diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 603d6123df1ea2..0f813267b586bd 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -3,7 +3,10 @@ name: Build Gutenberg Plugin Zip
 on:
     pull_request:
     push:
-        branches: [trunk]
+        branches:
+            - trunk
+            - 'release/**'
+            - 'wp/**'
     workflow_dispatch:
         inputs:
             version:
@@ -69,7 +72,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
@@ -165,13 +168,13 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
@@ -222,7 +225,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 2
                   ref: ${{ needs.bump-version.outputs.release_branch }}
@@ -311,14 +314,14 @@ jobs:
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
         steps:
             - name: Checkout (for CLI)
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: main
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Checkout (for publishing)
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -333,7 +336,7 @@ jobs:
                   git config user.email gutenberg@wordpress.org
 
             - name: Setup Node.js
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'main/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/bundle-size.yml b/.github/workflows/bundle-size.yml
index 499a2c020255cb..e24b30eea7ba7c 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -37,13 +37,13 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 1
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/check-backport-changelog.yml b/.github/workflows/check-backport-changelog.yml
index 366bad9fdbc247..cf07b1a3936b97 100644
--- a/.github/workflows/check-backport-changelog.yml
+++ b/.github/workflows/check-backport-changelog.yml
@@ -22,7 +22,7 @@ jobs:
         runs-on: ubuntu-latest
         if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
index 1f6863b4a486e1..40fbfe22bea568 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -22,7 +22,7 @@ jobs:
             - name: 'Get PR commit count'
               run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml
index b43b0cc267314d..11688a7cfba980 100644
--- a/.github/workflows/cherry-pick-wp-release.yml
+++ b/.github/workflows/cherry-pick-wp-release.yml
@@ -70,7 +70,7 @@ jobs:
 
             - name: Checkout repository
               if: env.cherry_pick == 'true'
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   fetch-depth: 0
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 0de1b9ee6566ae..d20b3e353c31e4 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 99166989cd68ca..bbf033222a4b31 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -27,7 +27,7 @@ jobs:
                 totalParts: [8]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -102,7 +102,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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/enforce-pr-labels.yml b/.github/workflows/enforce-pr-labels.yml
index 093eb9a325e365..7493459a6ff35c 100644
--- a/.github/workflows/enforce-pr-labels.yml
+++ b/.github/workflows/enforce-pr-labels.yml
@@ -12,7 +12,7 @@ jobs:
               with:
                   mode: exactly
                   count: 1
-                  labels: '[Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core'
+                  labels: '[Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin'
                   add_comment: true
                   message: "**Warning: Type of PR label mismatch**\n\n To merge this PR, it requires {{ errorString }} {{ count }} label indicating the type of PR. Other labels are optional and not being checked here. \n- **Type-related labels to choose from**: {{ provided }}.\n- **Labels found**: {{ applied }}.\n\nRead more about [Type labels in Gutenberg](https://github.com/WordPress/gutenberg/labels?q=type). Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task."
                   exit_type: failure
diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index 8cc11b9bd913bb..4715e1e09c2b83 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -6,7 +6,7 @@ jobs:
         name: 'Validation'
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
             - uses: gradle/wrapper-validation-action@v3
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 98615b93b8a176..9c4bee3af473c8 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -33,7 +33,7 @@ jobs:
             WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index a24e5012474025..66f8130ece2f06 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -31,7 +31,7 @@ jobs:
         steps:
             - name: Checkout (for CLI)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: cli
                   ref: trunk
@@ -39,7 +39,7 @@ jobs:
 
             - name: Checkout (for publishing)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -49,7 +49,7 @@ jobs:
 
             - name: Checkout (for publishing WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   ref: wp/${{ github.event.inputs.wp_version }}
@@ -67,7 +67,7 @@ jobs:
 
             - name: Setup Node.js
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'cli/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
@@ -75,7 +75,7 @@ jobs:
 
             - name: Setup Node.js (for WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: 'publish/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index 996bb1667ada57..2006eafd81cc7d 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -12,13 +12,13 @@ jobs:
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 2c3998c2952808..917ee6144087e6 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 2926e494b09f89..cf065ad1cdf7db 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -23,11 +23,11 @@ jobs:
                 native-test-name: [gutenberg-editor-rendering]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: ruby/setup-ruby@a6e6f86333f0a2523ece813039b8b4be04560854 # v1.190.0
+            - uses: ruby/setup-ruby@c04af2bb7258bb6a03df1d3c1865998ac9390972 # v1.194.0
               with:
                   # `.ruby-version` file location
                   working-directory: packages/react-native-editor/ios
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 1efd248bf7f306..1af2bb0ec79275 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,12 +22,12 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+              uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 65dd46b3a76108..83f7fdb96f9262 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,7 +12,7 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml
index bbc5663cf715be..b71d9440c38a1f 100644
--- a/.github/workflows/sync-backport-changelog.yml
+++ b/.github/workflows/sync-backport-changelog.yml
@@ -20,7 +20,7 @@ jobs:
             )
         steps:
             - name: Checkout
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   fetch-depth: 2 # Fetch the last two commits to compare changes
             - name: Check for changes in backport-changelog
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index c0f70070908c1c..bfa35492589a48 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -70,7 +70,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -121,7 +121,7 @@ jobs:
         name: Build JavaScript assets for PHP unit tests
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -135,7 +135,9 @@ jobs:
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: build-assets
-                  path: ./build/
+                  path: |
+                      ./build/
+                      ./build-module/
 
     test-php:
         name: PHP ${{ matrix.php }}${{ matrix.multisite && ' multisite' || '' }}${{ matrix.wordpress != '' && format( ' (WP {0}) ', matrix.wordpress ) || '' }} on ubuntu-latest
@@ -153,6 +155,7 @@ jobs:
                     - '8.0'
                     - '8.1'
                     - '8.2'
+                    - '8.3'
                 multisite: [false, true]
                 wordpress: [''] # Latest WordPress version.
                 include:
@@ -161,7 +164,7 @@ jobs:
                       wordpress: 'previous major version'
                     - php: '7.4'
                       wordpress: 'previous major version'
-                    - php: '8.2'
+                    - php: '8.3'
                       wordpress: 'previous major version'
 
         env:
@@ -170,7 +173,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -195,12 +198,6 @@ jobs:
             - name: Override PHP version in composer.json
               run: composer config platform.php ${{ matrix.php }}
 
-            # The spatie/phpunit-watcher package is not compatible with PHP < 7.2.
-            # It must be removed before running the tests.
-            - name: Remove incompatible Composer packages
-              if: ${{ matrix.php < '7.2' }}
-              run: composer remove spatie/phpunit-watcher --dev --no-update
-
             # Since Composer dependencies are installed using `composer update` and no lock file is in version control,
             # passing a custom cache suffix ensures that the cache is flushed at least once per week.
             - name: Install Composer dependencies
@@ -212,7 +209,6 @@ jobs:
               uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: build-assets
-                  path: ./build
 
             - name: Docker debug information
               run: |
@@ -282,7 +278,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -352,7 +348,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index 81a9c4739ac19b..d09e2af3dd2135 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -96,7 +96,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
diff --git a/backport-changelog/6.7/7139.md b/backport-changelog/6.7/7139.md
index 9023695102a919..b5b0090fbaa563 100644
--- a/backport-changelog/6.7/7139.md
+++ b/backport-changelog/6.7/7139.md
@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7139
 
 * https://github.com/WordPress/gutenberg/pull/64504
+* https://github.com/WordPress/gutenberg/pull/65280
diff --git a/backport-changelog/6.7/7298.md b/backport-changelog/6.7/7298.md
new file mode 100644
index 00000000000000..4c01ef5d4f46e6
--- /dev/null
+++ b/backport-changelog/6.7/7298.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7298
+
+* https://github.com/WordPress/gutenberg/pull/65099
\ No newline at end of file
diff --git a/backport-changelog/6.7/7336.md b/backport-changelog/6.7/7336.md
new file mode 100644
index 00000000000000..7cb2e26d7eeb95
--- /dev/null
+++ b/backport-changelog/6.7/7336.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7336
+
+* https://github.com/WordPress/gutenberg/pull/65071
diff --git a/backport-changelog/6.7/7360.md b/backport-changelog/6.7/7360.md
new file mode 100644
index 00000000000000..b2fb8efd624b93
--- /dev/null
+++ b/backport-changelog/6.7/7360.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7360
+
+* https://github.com/WordPress/gutenberg/pull/65460
diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js
index 91fe4b07d325e6..9427549cafaba6 100644
--- a/bin/packages/get-babel-config.js
+++ b/bin/packages/get-babel-config.js
@@ -11,6 +11,8 @@ module.exports = ( environment = '', file ) => {
 			name: `WP_BUILD_${ environment.toUpperCase() }`,
 		},
 	};
+	// Add `/* wp:polyfill */` magic comment where needed.
+	callerOpts.caller.addPolyfillComments = true;
 	switch ( environment ) {
 		case 'main':
 			// To be merged as a presetEnv option.
diff --git a/changelog.txt b/changelog.txt
index b0e6c8e907582e..b802a88a14202c 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,280 @@
 == Changelog ==
 
+= 19.3.0 =
+
+## Changelog
+
+### Features
+
+#### Zoom Out
+- Remove experimental flag. ([65404](https://github.com/WordPress/gutenberg/pull/65404))
+
+### Enhancements
+
+- Create Block: Update the minimum required PHP version to 7.2. ([65166](https://github.com/WordPress/gutenberg/pull/65166))
+- DataViews: remove unused `.dataviews-view-table__cell-content-wrapper:Empty` style rule. ([65084](https://github.com/WordPress/gutenberg/pull/65084))
+- Media Utils: Add TypeScript support and export more utils. ([64784](https://github.com/WordPress/gutenberg/pull/64784))
+- Media placeholders: Add "drag" to the text. ([65149](https://github.com/WordPress/gutenberg/pull/65149))
+- Restore: Move to trash button in Document settings. ([65087](https://github.com/WordPress/gutenberg/pull/65087))
+- Inspector Controls: Use custom block name in inspector controls when available. ([65398](https://github.com/WordPress/gutenberg/pull/65398))
+- Icons: Adds bell and bell-unread icons. ([65324](https://github.com/WordPress/gutenberg/pull/65324))
+- Editor topbar: Reorder the actions on the right. ([65163](https://github.com/WordPress/gutenberg/pull/65163))
+- Patterns: Add opt out preference to the 'Choose a Pattern' modal when adding a page. ([65026](https://github.com/WordPress/gutenberg/pull/65026))
+- Locked Templates: Blocks with contentOnly locking should not be transformable. ([64917](https://github.com/WordPress/gutenberg/pull/64917))
+- Block Locking: Add border to Replace item in content only image toolbar. ([64849](https://github.com/WordPress/gutenberg/pull/64849))
+- DataViews: Improve UX of bundled views for Pages. ([65295](https://github.com/WordPress/gutenberg/pull/65295))
+
+#### Components
+- Styling: Apply elevation scale in components package. ([65159](https://github.com/WordPress/gutenberg/pull/65159))
+- Tabs: Improve Tabs indicator animation and related utils. ([64926](https://github.com/WordPress/gutenberg/pull/64926))
+- Modal
+  - Add exit animation. ([65203](https://github.com/WordPress/gutenberg/pull/65203))
+  - Decrease close button size. ([65131](https://github.com/WordPress/gutenberg/pull/65131))
+- Navigator Screen: Warn if path doesn't follow a URL-like scheme. ([65231](https://github.com/WordPress/gutenberg/pull/65231))
+- Card: Update Card radius. ([65053](https://github.com/WordPress/gutenberg/pull/65053))
+- Combobox Control: Add placeholder attribute. ([65254](https://github.com/WordPress/gutenberg/pull/65254))
+
+#### Block Library
+- Allow dropping multiple images to the image block. ([65030](https://github.com/WordPress/gutenberg/pull/65030))
+- Categories List block: Add dropdown for taxonomies. ([65272](https://github.com/WordPress/gutenberg/pull/65272))
+- Image: Adds the block controls for uploading image. ([64320](https://github.com/WordPress/gutenberg/pull/64320))
+- Remove colons from control labels. ([65205](https://github.com/WordPress/gutenberg/pull/65205))
+- Terms List block: Add Categories-specific variation. ([65434](https://github.com/WordPress/gutenberg/pull/65434))
+
+#### Zoom Out
+- Add Zoom Out toggle to editor header when experiment enabled. ([65183](https://github.com/WordPress/gutenberg/pull/65183))
+- Add prompt for drag and drop in Patterns tab in Zoom Out mode. ([65115](https://github.com/WordPress/gutenberg/pull/65115))
+- Close inserter on exiting Zoom Out to edit. ([65194](https://github.com/WordPress/gutenberg/pull/65194))
+- Show top level sections in List View. ([65202](https://github.com/WordPress/gutenberg/pull/65202))
+- Try vertical displacement when dragging a pattern between existing patterns/sections. ([63896](https://github.com/WordPress/gutenberg/pull/63896))
+
+#### Block Editor
+- Link Editing: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- Drag and Drop: When dragging a mix of video, audio, and image blocks, create individual blocks as appropriate. ([65144](https://github.com/WordPress/gutenberg/pull/65144))
+- URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+- Normalize block inspector controls spacing. ([64526](https://github.com/WordPress/gutenberg/pull/64526))
+
+#### Post Editor
+- Add new Media section to preferences modal. ([64846](https://github.com/WordPress/gutenberg/pull/64846))
+- DocumentBar: Replace icon with post type label. ([65170](https://github.com/WordPress/gutenberg/pull/65170))
+- Page editor: Double-click to edit template part. ([65024](https://github.com/WordPress/gutenberg/pull/65024))
+- Post publish upload media dialog: Handle more block types. ([65122](https://github.com/WordPress/gutenberg/pull/65122))
+
+#### Block bindings
+- Populate block context with inherited post type from template slug. ([65062](https://github.com/WordPress/gutenberg/pull/65062))
+- Try gap 0 on attribute items. ([65277](https://github.com/WordPress/gutenberg/pull/65277))
+- Use post meta label from `register_meta` in block bindings workflows. ([65099](https://github.com/WordPress/gutenberg/pull/65099))
+
+#### Global Styles
+- Refactor site background controls and move site global styles into Background group. ([65304](https://github.com/WordPress/gutenberg/pull/65304))
+- Spacing control: Replace sides dropdwon with link button. ([65193](https://github.com/WordPress/gutenberg/pull/65193))
+
+#### Interactivity API
+- Refactor context proxies. ([64713](https://github.com/WordPress/gutenberg/pull/64713))
+- Update: Rephrase "Force page reload" and move to Advanced. ([65081](https://github.com/WordPress/gutenberg/pull/65081))
+
+#### REST API
+- Global Styles: Allow read access to users with `edit_posts` capabilities. ([65071](https://github.com/WordPress/gutenberg/pull/65071))
+- Query loop / Post template: Enable post format filter. ([64167](https://github.com/WordPress/gutenberg/pull/64167))
+
+### New APIs
+- Add @wordpress/fields package.
+  - Introduce the package. ([65230](https://github.com/WordPress/gutenberg/pull/65230))
+  - Make the package private. ([65269](https://github.com/WordPress/gutenberg/pull/65269))
+- Interactivity API: Add `getServerState()` and `getServerContext()`. ([65151](https://github.com/WordPress/gutenberg/pull/65151))
+
+### Bug Fixes
+
+- Align popover alt variant styling with block toolbar. ([65263](https://github.com/WordPress/gutenberg/pull/65263))
+- Compose: Correctly call timer cleanup in 'useFocusOnMount'. ([65184](https://github.com/WordPress/gutenberg/pull/65184))
+- Fix some docblock types related to the Template Registration API. ([65187](https://github.com/WordPress/gutenberg/pull/65187))
+- Fix the issue where block spacing control not shown. ([65371](https://github.com/WordPress/gutenberg/pull/65371))
+- Fix unintentional block toolbar shadow. ([65182](https://github.com/WordPress/gutenberg/pull/65182))
+- Fix: Moving a page to the trash on the site editor does not goes back to the pages list. ([65119](https://github.com/WordPress/gutenberg/pull/65119))
+- Fix: Moving the last page item to the the trash causes a crash. ([65236](https://github.com/WordPress/gutenberg/pull/65236))
+- Preferences: Fix back button on mobile. ([65141](https://github.com/WordPress/gutenberg/pull/65141))
+- Post Summary Panel: Restore `height:Auto` for toggle buttons. ([65362](https://github.com/WordPress/gutenberg/pull/65362))
+- Fix Tabs styling in Font Library modal. ([65330](https://github.com/WordPress/gutenberg/pull/65330))
+- E2E: Change deprecated social icons for standard in end-to-end. ([65312](https://github.com/WordPress/gutenberg/pull/65312))
+- Typography: Make title blocks apply typographic styles consistently. ([65307](https://github.com/WordPress/gutenberg/pull/65307))
+- Target Hints REST API: Add missing param sanitization. ([65280](https://github.com/WordPress/gutenberg/pull/65280))
+- Interactivity API: Update iterable signals when `deepMerge()` adds new properties. ([65135](https://github.com/WordPress/gutenberg/pull/65135))
+- Navigation Menus: Typography styling support to the navigation submenu block. ([65060](https://github.com/WordPress/gutenberg/pull/65060))
+- Grid: In RTL languages, the resize handles point in the opposite direction. ([64995](https://github.com/WordPress/gutenberg/pull/64995))
+- Block Locking: Fix Content Only Toolbar icon focus style. ([64940](https://github.com/WordPress/gutenberg/pull/64940))
+- Image: Fix resizing to max width in classic themes. ([64819](https://github.com/WordPress/gutenberg/pull/64819))
+- Meta Boxes: Try split content view. ([64351](https://github.com/WordPress/gutenberg/pull/64351))
+- Distraction Free: Fix blurry edge along editor header. ([64277](https://github.com/WordPress/gutenberg/pull/64277))
+
+#### Block Library
+- Comments Pagination: Fix warning returned by comments pagination blocks. ([65435](https://github.com/WordPress/gutenberg/pull/65435))
+- Cover: Explicitly set isUserOverlayColor to false when media is updated. ([65105](https://github.com/WordPress/gutenberg/pull/65105))
+- Disallow setting grid block rows/columns to zero. ([65217](https://github.com/WordPress/gutenberg/pull/65217))
+- Fix image block crash. ([65222](https://github.com/WordPress/gutenberg/pull/65222))
+- Fix: Buttons block: Block spacing value does not apply to both vertical and horizontal alignment. ([64971](https://github.com/WordPress/gutenberg/pull/64971))
+- Fix: Embed blocks: Figcaption inserted via toolbar not nested within figure element - #64960. ([64970](https://github.com/WordPress/gutenberg/pull/64970))
+- Image cropping: Skip making an API request if there are no changes to apply. ([65384](https://github.com/WordPress/gutenberg/pull/65384))
+- Comments Pagination: Pass the comments query `paged` arg to functions  `get_next_comments_link` and `get_previous_comments_link`. ([63698](https://github.com/WordPress/gutenberg/pull/63698))
+- Query Loop
+  - Default to querying posts when on singular content. ([65067](https://github.com/WordPress/gutenberg/pull/65067))
+  - Remove is_singular() check and fix test. ([65483](https://github.com/WordPress/gutenberg/pull/65483))
+  - Format controls: Fix JavaScript error. ([65551](https://github.com/WordPress/gutenberg/pull/65551))
+
+#### Block Editor
+- Inserter: Fix loading indicator for reusable blocks. ([64839](https://github.com/WordPress/gutenberg/pull/64839))
+- Normalize spacing in Layout hook controls. ([65132](https://github.com/WordPress/gutenberg/pull/65132))
+- Pattern Inserter: Fix pattern list overflow. ([65192](https://github.com/WordPress/gutenberg/pull/65192))
+- Remove reset styles RTL from the iframe. ([65150](https://github.com/WordPress/gutenberg/pull/65150))
+- Revert "Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (https://github.com/WordPress/gutenberg/pull/64048)" ([65208](https://github.com/WordPress/gutenberg/pull/65208))
+
+#### Components
+- BoxControl: Unify input filed width whether linked or not. ([65348](https://github.com/WordPress/gutenberg/pull/65348))
+- ComboboxControl: Add more unit tests. ([65255](https://github.com/WordPress/gutenberg/pull/65255))
+- Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- Tabs: Fix vertical indicator. ([65385](https://github.com/WordPress/gutenberg/pull/65385))
+
+#### Block bindings
+- Fix empty strings placeholders in post meta bindings. ([65089](https://github.com/WordPress/gutenberg/pull/65089))
+- Remove key fallback in bindings get values and rely on source label. ([65517](https://github.com/WordPress/gutenberg/pull/65517))
+- Fix passing bindings context to `canUserEditValue`. ([65599](https://github.com/WordPress/gutenberg/pull/65599))
+- Prioritize existing placeholder over bindingsPlaceholder. ([65220](https://github.com/WordPress/gutenberg/pull/65220))
+- Only use `canUserEditValue` when `setValues` is defined. ([65565](https://github.com/WordPress/gutenberg/pull/65566))
+
+#### Zoom Out
+- Force device type to Desktop whenever zoom out is invoked. ([64476](https://github.com/WordPress/gutenberg/pull/64476))
+- Hide toolbar icon on smaller viewports. ([65437](https://github.com/WordPress/gutenberg/pull/65437))
+- Remove zoom out toggle when editor is not iframed. ([65452](https://github.com/WordPress/gutenberg/pull/65452))
+
+### Accessibility
+
+- A11y: Add script-module. ([65101](https://github.com/WordPress/gutenberg/pull/65101))
+- Interactivity API: Use a11y Script Module in Gutenberg. ([65123](https://github.com/WordPress/gutenberg/pull/65123))
+- Script Modules API: Print script module live regions HTML in page HTML. ([65380](https://github.com/WordPress/gutenberg/pull/65380))
+- DatePicker: Better hover/focus styles. ([65117](https://github.com/WordPress/gutenberg/pull/65117))
+- Form Input: Don't use `flex-direction: Row-reverse` for checkbox field. ([64232](https://github.com/WordPress/gutenberg/pull/64232))
+- Navigation Menus: Remove Warning and add notice for Navigation. ([63921](https://github.com/WordPress/gutenberg/pull/63921))
+- Global Styles: Fix the shadows Range control accessibility and usability. ([63908](https://github.com/WordPress/gutenberg/pull/63908))
+- Block Editor: Fix accessibility of the hooked blocks toggles. ([63133](https://github.com/WordPress/gutenberg/pull/63133))
+
+
+#### Post Editor
+- Support keyboard resizing of meta boxes pane. ([65325](https://github.com/WordPress/gutenberg/pull/65325))
+- Swap position of the Pre-publish checks buttons. ([65317](https://github.com/WordPress/gutenberg/pull/65317))
+
+
+### Performance
+
+- Core Data: Batch remaining actions in resolvers. ([65176](https://github.com/WordPress/gutenberg/pull/65176))
+- Block Editor: Use static access for selector in 'useZoomOutModeExit'. ([65337](https://github.com/WordPress/gutenberg/pull/65337))
+- Editor: Optimize global styles permission check. ([65177](https://github.com/WordPress/gutenberg/pull/65177))
+
+
+### Experiments
+
+- Block bindings REST API: Bring bindings UI in Site Editor. ([64072](https://github.com/WordPress/gutenberg/pull/64072))
+
+
+### Documentation
+
+- Add JSDoc block for getSectionRootClientId in block editor package. ([65219](https://github.com/WordPress/gutenberg/pull/65219))
+- ButtonGroup: Fix story to show what the component does. ([65336](https://github.com/WordPress/gutenberg/pull/65336))
+- DataViews storybook
+  - Better styles for combined fields story. ([65078](https://github.com/WordPress/gutenberg/pull/65078))
+  - Enable all layouts for combined fields storybook. ([65082](https://github.com/WordPress/gutenberg/pull/65082))
+- Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- Docs: Update the content of the API version 3 section in the Block API Reference. ([65375](https://github.com/WordPress/gutenberg/pull/65375))
+- Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+
+
+### Code Quality
+
+- Components: Transition to the new 40px default size.
+  - Button:
+    - Add __next40pxDefaultSize for files in editor 3. ([65139](https://github.com/WordPress/gutenberg/pull/65139))
+    - Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+    - Add props for buttons in editor 1. ([65068](https://github.com/WordPress/gutenberg/pull/65068))
+    - Add props for buttons in editor 2. ([65083](https://github.com/WordPress/gutenberg/pull/65083))
+    - Fix: Replace remaining 40px default size violations [Block Editor 4]. ([65257](https://github.com/WordPress/gutenberg/pull/65257))
+    - Fix: Replace remaining 40px default size violation [Block library 3]. ([65110](https://github.com/WordPress/gutenberg/pull/65110))
+    - Fix: Replace remaining 40px default size violation [Block library 4]. ([65143](https://github.com/WordPress/gutenberg/pull/65143))
+    - Fix: Replace remaining 40px default size violation [Block library]. ([65075](https://github.com/WordPress/gutenberg/pull/65075))
+    - Fix: Replace remaining 40px default size violation [Edit Site 2]. ([65258](https://github.com/WordPress/gutenberg/pull/65258))
+    - Fix: Replace remaining 40px default size violations [Block library 1]. ([65033](https://github.com/WordPress/gutenberg/pull/65033))
+    - Fix: Replace remaining 40px default size violations [Block Editor 1]. ([65034](https://github.com/WordPress/gutenberg/pull/65034))
+  - BoxControl
+    - Add lint rule for 40px size prop usage. ([65341](https://github.com/WordPress/gutenberg/pull/65341))
+   - DimensionsPanel: Apply 40px default size to UI when no spacing preset is available. ([65300](https://github.com/WordPress/gutenberg/pull/65300))
+- Add `useEvent` and revamped `useResizeObserver` to `@wordpress/compose`. ([64943](https://github.com/WordPress/gutenberg/pull/64943))
+- DataViews: Use Dropdown for views configuration dialog. ([65314](https://github.com/WordPress/gutenberg/pull/65314))
+- Platform docs: Upgrade dependencies. ([65445](https://github.com/WordPress/gutenberg/pull/65445))
+- Rename edit-post__fade-in-animation and unify keyframe definitions. ([65377](https://github.com/WordPress/gutenberg/pull/65377))
+- Update minimum required version in PHP. ([65301](https://github.com/WordPress/gutenberg/pull/65301))
+- Editor: Use hooks instead of HoC in `BlockManager`. ([65349](https://github.com/WordPress/gutenberg/pull/65349))
+- Data Views Fields: Migrate store and actions from editor package to fields package. ([65261](https://github.com/WordPress/gutenberg/pull/65261))
+- Plugin: Remove 'function_exists' checks for methods with 'gutenberg' prefix. ([65260](https://github.com/WordPress/gutenberg/pull/65260))
+- Global Styles: Update REST controller override method and backport changes from Core. ([65259](https://github.com/WordPress/gutenberg/pull/65259))
+- Patterns: Remove unused method returned from 'mapSelect'. ([65073](https://github.com/WordPress/gutenberg/pull/65073))
+- Embed: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+
+#### Components
+- BoxControl: Fix critical error when null value is passed. ([65287](https://github.com/WordPress/gutenberg/pull/65287))
+- Composite:
+  - Deprecate legacy, unstable version. ([63572](https://github.com/WordPress/gutenberg/pull/63572))
+  - Remove store prop and useCompositeStore hook. ([64723](https://github.com/WordPress/gutenberg/pull/64723))
+  - Stabilize APIs. ([63569](https://github.com/WordPress/gutenberg/pull/63569))
+- `@wordpress/components`: Add local copy of `use-lilius`. ([65097](https://github.com/WordPress/gutenberg/pull/65097))
+
+#### Block bindings
+- Always prioritize using context in post meta source logic. ([65449](https://github.com/WordPress/gutenberg/pull/65449))
+- Improve getRegisteredPostMeta resolver. ([65450](https://github.com/WordPress/gutenberg/pull/65450))
+- Remove extra filtering of empty sources. ([65447](https://github.com/WordPress/gutenberg/pull/65447))
+
+#### Block Editor
+- Remove the 'PrivateInserter' component. ([65111](https://github.com/WordPress/gutenberg/pull/65111))
+- Use the tooltip from a button in 'ButtonBlockAppender'. ([65113](https://github.com/WordPress/gutenberg/pull/65113))
+- Remove unused css selectors. ([65276](https://github.com/WordPress/gutenberg/pull/65276))
+
+### Tools
+
+- Scripts: Update stylelint dependency and the default configuration. ([64828](https://github.com/WordPress/gutenberg/pull/64828))
+- Styleling config: Fix stylelint configuration missing files for npm. ([65313](https://github.com/WordPress/gutenberg/pull/65313))
+
+#### Build Tooling
+- Build Plugin: Simplify and improve zip contents. ([65232](https://github.com/WordPress/gutenberg/pull/65232))
+- Build zip artifact on release and wp production branches. ([65471](https://github.com/WordPress/gutenberg/pull/65471))
+- Build: Include Core blocks' `render` and `variations` files. ([63311](https://github.com/WordPress/gutenberg/pull/63311))
+- Script Modules
+  - Prepare build for more script modules. ([65064](https://github.com/WordPress/gutenberg/pull/65064))
+  - Remove babel from script-modules build. ([65279](https://github.com/WordPress/gutenberg/pull/65279))
+  - Remove es-module shims and importmap-polyfill. ([65210](https://github.com/WordPress/gutenberg/pull/65210))
+- Correctly generate PHP files for server-side rendering of blocks on Windows OS. ([65248](https://github.com/WordPress/gutenberg/pull/65248))
+- Packages: Only add polyfills where needed. ([65292](https://github.com/WordPress/gutenberg/pull/65292))
+- Switch from UglifyJS to Terser to build the polyfill script. ([65278](https://github.com/WordPress/gutenberg/pull/65278))
+
+#### Testing
+- Unit tests: Mock matchMedia to enforce prefers-reduce-motion. ([65438](https://github.com/WordPress/gutenberg/pull/65438))
+- Upgrade Playwright to v1.47. ([65156](https://github.com/WordPress/gutenberg/pull/65156))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AKSHAT2802: Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+- @devansh016: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- @dhruvang21: Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- @farid-hadi: Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- @greenworld: Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+- @louwie17: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+- @rahulharpal1603: URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AKSHAT2802 @Aljullu @andrewserong @carolinan @cbravobernal @ciampo @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @devansh016 @dhruvang21 @ellatrix @farid-hadi @getdave @gigitux @greenworld @gziolo @hbhalodia @jameskoster @jasmussen @javierarce @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @louwie17 @madhusudhand @MaggieCabrera @Mamaduka @mikeybinns @mirka @ntsekouras @oandregal @ockham @peterwilsoncc @rahulharpal1603 @ramonjd @richtabor @rohitmathur-7 @SantosGuillamot @scruffian @sgomes @sirreal @stokesman @swissspidy @t-hamano @talldan @vipul0425 @zaguiini
+
+
 = 19.2.0 =
 
 ## Changelog
diff --git a/composer.json b/composer.json
index 3571377bd58bd7..982a71a975223d 100644
--- a/composer.json
+++ b/composer.json
@@ -23,14 +23,15 @@
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true,
 			"composer/installers": true
-		}
+		},
+		"lock": false
 	},
 	"require-dev": {
 		"phpcompatibility/phpcompatibility-wp": "^2.1.3",
 		"wp-coding-standards/wpcs": "^3.0",
 		"sirbrillig/phpcs-variable-analysis": "^2.8",
 		"spatie/phpunit-watcher": "^1.23",
-		"yoast/phpunit-polyfills": "^1.0",
+		"yoast/phpunit-polyfills": "^1.1.0",
 		"gutenberg/gutenberg-coding-standards": "@dev"
 	},
 	"repositories": [
@@ -43,7 +44,7 @@
 		}
 	],
 	"require": {
-		"composer/installers": "~1.0"
+		"composer/installers": "^1.0 || ^2.0"
 	},
 	"scripts": {
 		"format": "phpcbf --standard=phpcs.xml.dist --report-summary --report-source",
diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
index 8c4debb8b696f6..62347f2d644a61 100644
--- a/docs/contributors/versions-in-wordpress.md
+++ b/docs/contributors/versions-in-wordpress.md
@@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 18.6-19.3          | 6.7               |
 | 17.8-18.5          | 6.6.1             |
 | 17.8-18.5          | 6.6               |
 | 16.8-17.7          | 6.5.5             |
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index aac507d4c573f4..4e43241f63fb16 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -25,7 +25,7 @@ To complete this tutorial, you will need:
 If you don't have one or more of these items, the [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) documentation will help you get started. Come back here once you are all set up.
 
 <div class="callout callout-info">
-	This tutorial uses <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> to create a local WordPress development environment. However, feel free to use alternate local development tools if you already have one that you prefer.
+	This tutorial uses <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> to create a local WordPress development environment. However, feel free to use any development environment that meets the abovementioned prerequisites.
 </div>
 
 ## Scaffolding the block
@@ -250,7 +250,7 @@ At this point, the block's icon and description are correct, and block supports
 
 ### Updating edit.js
 
-The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message " Copyright Date Block – hello from the editor!". Let's change that.
+The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message "Copyright Date Block – hello from the editor!". Let's change that.
 
 Open the file and see that the `Edit()` function returns a paragraph tag with the default message.
 
@@ -647,10 +647,10 @@ While the Editor looks great, the starting year functionality has yet to be adde
 
 Start by adding a variable called `$display_date` and replicate what you did in the `Edit()` function above.
 
-This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` is the `showStartingYear` attribute is `false`.
+This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` if the `showStartingYear` attribute is `false`.
 
 <div class="callout callout-tip">
-	<p>Three variables are exposed in the <code>render.php</code>, which you can use to customize the block's output:</p>
+	<p>Three variables are exposed in <code>render.php</code>, which you can use to customize the block's output:</p>
 	<ul>
 		<li><code>$attributes</code> (array): The block attributes.</li>
 		<li><code>$content</code> (string): The block default content.</li>
diff --git a/docs/manifest.json b/docs/manifest.json
index d7f74d47995b63..8387b9079694c0 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -521,6 +521,12 @@
 		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md",
 		"parent": "core-concepts"
 	},
+	{
+		"title": "Using TypeScript",
+		"slug": "using-typescript",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/using-typescript.md",
+		"parent": "core-concepts"
+	},
 	{
 		"title": "Quick start guide",
 		"slug": "iapi-quick-start-guide",
@@ -1092,33 +1098,9 @@
 		"parent": "components"
 	},
 	{
-		"title": "NavigatorBackButton",
-		"slug": "navigator-back-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-back-button/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorButton",
-		"slug": "navigator-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-button/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorProvider",
-		"slug": "navigator-provider",
-		"markdown_source": "../packages/components/src/navigator/navigator-provider/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorScreen",
-		"slug": "navigator-screen",
-		"markdown_source": "../packages/components/src/navigator/navigator-screen/README.md",
-		"parent": "components"
-	},
-	{
-		"title": "NavigatorToParentButton",
-		"slug": "navigator-to-parent-button",
-		"markdown_source": "../packages/components/src/navigator/navigator-to-parent-button/README.md",
+		"title": "Navigator",
+		"slug": "navigator",
+		"markdown_source": "../packages/components/src/navigator/README.md",
 		"parent": "components"
 	},
 	{
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0e0de9d4f8a507..66f713b3aa40fc 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -72,14 +72,14 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 -	**Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight)
 -	**Attributes:** month, year
 
-## Categories List
+## Terms List
 
-Display a list of all categories. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
+Display a list of all terms of a given taxonomy. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
 
 -	**Name:** core/categories
 -	**Category:** widgets
 -	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts
+-	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
 
 ## Code
 
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index c6552ef431cef8..956e8dd010581a 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -262,7 +262,7 @@ _Returns_
 
 ### getBlockInsertionPoint
 
-Returns the insertion point, the index at which the new inserted block would be placed. Defaults to the last index.
+Returns the location of the insertion cue. Defaults to the last index.
 
 _Parameters_
 
@@ -857,15 +857,9 @@ _Returns_
 
 ### hasBlockMovingClientId
 
-Returns whether block moving mode is enabled.
-
-_Parameters_
-
--   _state_ `Object`: Editor state.
-
-_Returns_
+> **Deprecated**
 
--   `string`: Client Id of moving block.
+Returns whether block moving mode is enabled.
 
 ### hasDraggedInnerBlock
 
@@ -988,7 +982,7 @@ _Returns_
 
 ### isBlockInsertionPointVisible
 
-Returns true if we should show the block insertion point.
+Returns true if the block insertion point is visible.
 
 _Parameters_
 
@@ -1661,11 +1655,13 @@ _Returns_
 
 ### setBlockMovingClientId
 
-Action that enables or disables the block moving mode.
+> **Deprecated**
 
-_Parameters_
+Set the block moving client ID.
 
--   _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
+_Returns_
+
+-   `Object`: Action object.
 
 ### setBlockVisibility
 
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index 4fea2c51fa54f3..a4c1a59f0c4231 100644
--- a/docs/reference-guides/data/data-core-editor.md
+++ b/docs/reference-guides/data/data-core-editor.md
@@ -1422,6 +1422,10 @@ _Parameters_
 -   _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
 -   _value.rootClientId_ `string`: The root client ID to insert at.
 -   _value.insertionIndex_ `number`: The index to insert at.
+-   _value.filterValue_ `string`: A query to filter the inserter results.
+-   _value.onSelect_ `Function`: A callback when an item is selected.
+-   _value.tab_ `string`: The tab to open in the inserter.
+-   _value.category_ `string`: The category to initialize in the inserter.
 
 _Returns_
 
diff --git a/docs/reference-guides/filters/block-filters.md b/docs/reference-guides/filters/block-filters.md
index 637cecadf1402b..f1952ef9bf86f8 100644
--- a/docs/reference-guides/filters/block-filters.md
+++ b/docs/reference-guides/filters/block-filters.md
@@ -294,6 +294,31 @@ Used to filter an individual transform result from block transformation. All of
 
 Called immediately after the default parsing of a block's attributes and before validation to allow a plugin to manipulate attribute values in time for validation and/or the initial values rendering of the block in the editor.
 
+The callback function for this filter accepts 4 parameters:
+- `blockAttributes` (`Object`): All block attributes.
+- `blockType` (`Object`): The block type.
+- `innerHTML` (`string`): Raw block content.
+- `attributes` (`object`): Known block attributes (from delimiters).
+
+In the example below, we use the `blocks.getBlockAttributes` filter to lock the position of all paragraph blocks on a page.
+
+```js
+// Our filter function
+function lockParagraphs( blockAttributes, blockType, innerHTML, attributes  ) {
+    if('core/paragraph' === blockType.name) {
+        blockAttributes['lock'] = {move: true}
+    }
+    return blockAttributes;
+}
+
+// Add the filter
+wp.hooks.addFilter(
+    'blocks.getBlockAttributes',
+    'my-plugin/lock-paragraphs',
+    lockParagraphs
+);
+```
+
 ### `editor.BlockEdit`
 
 Used to modify the block's `edit` component. It receives the original block `BlockEdit` component and returns a new wrapped component.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/README.md b/docs/reference-guides/interactivity-api/core-concepts/README.md
index f4e6891c4ff165..695a4d622f6c52 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/README.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/README.md
@@ -7,3 +7,5 @@ This section provides some guides on important concepts and mental models relate
 2. **[Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
 
 3. **[Server-side rendering: Processing directives on the server](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.
+
+4. **[Using TypeScript](/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md):** This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
new file mode 100644
index 00000000000000..ed0bdd88211d11
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
@@ -0,0 +1,746 @@
+# Using TypeScript
+
+The Interactivity API provides robust support for TypeScript, enabling developers to build type-safe stores to enhance the development experience with static type checking, improved code completion, and simplified refactoring. This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
+
+These are the core principles of TypeScript's interaction with the Interactivity API:
+
+-   **Inferred client types**: When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the types for you.
+-   **Explicit server types**: When dealing with data defined on the server, like local context or the initial values of the global state, you can explicitly define its types to ensure that everything is correctly typed.
+-   **Mutiple store parts**: Even if your store is split into multiple parts, you can define or infer the types of each part of the store and then merge them into a single type that represents the entire store.
+-   **Typed external stores**: You can import typed stores from external namespaces, allowing you to use other plugins' functionality with type safety.
+
+## Installing `@wordpress/interactivity` locally
+
+If you haven't done so already, you need to install the package `@wordpress/interactivity` locally so TypeScript can use its types in your IDE. You can do this using the following command:
+
+`npm install @wordpress/interactivity`
+
+It is also a good practice to keep that package updated.
+
+## Scaffolding a new typed interactive block
+
+If you want to explore an example of an interactive block using TypeScript in your local environment, you can use the `@wordpress/create-block-interactive-template`.
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+Next, use the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package and the [`@wordpress/create-block-interactive-template`](https://www.npmjs.com/package/@wordpress/create-block-interactive-template) template to scaffold the block.
+
+Choose the folder where you want to create the plugin, execute the following command in the terminal from within that folder, and choose the `typescript` variant when asked.
+
+```
+npx @wordpress/create-block@latest --template @wordpress/create-block-interactive-template
+```
+
+**Important**: Do not provide a slug in the terminal. Otherwise, `create-block` will not ask you which variant you want to choose and it will select the default non-TypeScript variant by default.
+
+Finally, you can keep following the instructions in the [Getting Started Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/) as the rest of the instructions remain the same.
+
+## Typing the store
+
+Depending on the structure of your store and your preference, there are three options you can choose from to generate your store's types:
+
+1.  Infer the types from your client store definition.
+2.  Manually type the server state, but infer the rest from your client store definition.
+3.  Manually write all the types.
+
+### 1. Infer the types from your client store definition
+
+When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, `callbacks`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the correct types for you.
+
+Let's start with a basic example of a counter block. We will define the store in the `view.ts` file of the block, which contains the initial global state, an action and a callback.
+
+```ts
+// view.ts
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			myStore.state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ myStore.state.counter }` );
+		},
+	},
+} );
+```
+
+If you inspect the types of `myStore` using TypeScript, you will see that TypeScript has been able to infer the types correctly.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+};
+```
+
+You can also destructure the `state`, `actions` and `callbacks` properties, and the types will still work correctly.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+In conclusion, inferring the types is useful when you have a simple store defined in a single call to the `store` function and you do not need to type any state that has been initialized on the server.
+
+### 2. Manually type the server state, but infer the rest from your client store definition
+
+The global state that is initialized on the server with the `wp_interactivity_state` function doesn't exist on your client store definition and, therefore, needs to be manually typed. But if you don't want to define all the types of your store, you can infer the types of your client store definition and merge them with the types of your server initialized state.
+
+_Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about `wp_interactivity_state` and how directives are processed on the server._
+
+Following our previous example, let's move our `counter` state initialization to the server.
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+));
+```
+
+Now, let's define the server state types and merge it with the types inferred from the client store definition.
+
+```ts
+// Types the server state.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// Defines the store in a variable to be able to extract its type later.
+const storeDef = {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+Alternatively, if you don't mind typing the entire state including both the values defined on the server and the values defined on the client, you can cast the `state` property and let TypeScript infer the rest of the store.
+
+Let's imagine you have an additional property in the client global state called `product`.
+
+```ts
+type State = {
+	counter: number; // The server state.
+	product: number; // The client state.
+};
+
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		product: 2,
+	} as State, // Casts the entire state manually.
+	actions: {
+		increment() {
+			state.counter * state.product;
+		},
+	},
+} );
+```
+
+That's it. Now, TypeScript will infer the types of the `actions` and `callbacks` properties from the store definition, but it will use the type `State` for the `state` property so it contains the correct types from both the client and server definitions.
+
+In conclusion, this approach is useful when you have a server state that needs to be manually typed, but you still want to infer the types of the rest of the store.
+
+### 3. Manually write all the types
+
+If you prefer to define all the types of the store manually instead of letting TypeScript infer them from your client store definition, you can do that too. You simply need to pass them to the `store` function.
+
+```ts
+// Defines the store types.
+interface Store {
+	state: {
+		counter: number; // Initial server state
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+}
+
+// Pass the types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+That's it! In conclusion, this approach is useful when you want to control all the types of your store and you don't mind writing them by hand.
+
+## Typing the local context
+
+The initial local context is defined on the server using the `data-wp-context` directive.
+
+```html
+<div data-wp-context='{ "counter": 0 }'>...</div>
+```
+
+For that reason, you need to define its type manually and pass it to the `getContext` function to ensure the returned properties are correctly typed.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Passes it to the getContext function.
+			const context = getContext< MyContext >();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+To avoid having to pass the context types over and over, you can also define a typed function and use that function instead of `getContext`.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+// Defines a typed function. You only have to do this once.
+const getMyContext = getContext< MyContext >;
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Use your typed function.
+			const context = getMyContext();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+That's it! Now you can access the context properties with the correct types.
+
+## Typing the derived state
+
+The derived state is data that is calculated based on the global state or local context. In the client store definition, it is defined using a getter in the `state` object.
+
+_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+
+Following our previous example, let's create a derived state that is the double of our counter.
+
+```ts
+type MyContext = {
+	counter: number;
+};
+
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		get double() {
+			const { counter } = getContext< MyContext >();
+			return counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is number.
+		},
+	},
+} );
+```
+
+Normally, when the derived state depends on the local context, TypeScript will be able to infer the correct types:
+
+```ts
+const myStore: {
+	state: {
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+But when the return value of the derived state depends directly on some part of the global state, TypeScript will not be able to infer the types because it will claim that it has a circular reference.
+
+For example, in this case, TypeScript cannot infer the type of `state.double` because it depends on `state.counter`, and the type of `state` is not completed until the type of `state.double` is defined, creating a circular reference.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double() {
+			// TypeScript can't infer this return type because it depends on `state`.
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is now unknown.
+		},
+	},
+} );
+```
+
+In this case, depending on your TypeScript configuration, TypeScript will either warn you about a circular reference or simply add the `any` type to the `state` property.
+
+However, solving this problem is easy; we simply need to manually provide TypeScript with the return type of that getter. Once we do that, the circular reference disappears, and TypeScript can once again infer all the `state` types.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 1,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // Correctly inferred!
+		},
+	},
+} );
+```
+
+These are now the correct inferred types for the previous store.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+When using `wp_interactivity_state` in the server, remember that you also need to define the initial value of your derived state, like this:
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+	'double'  => 2,
+));
+```
+
+But if you are inferring the types, you don't need to manually define the type of the derived state because it already exists in your client's store definition.
+
+```ts
+// You don't need to type `state.double` here.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// The `state.double` type is inferred from here.
+const storeDef = {
+	state: {
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+That's it! Now you can access the derived state properties with the correct types.
+
+## Typing asynchronous actions
+
+Another thing to keep in mind when using TypeScript with the Interactivity API is that asynchronous actions must be defined with generators instead of async functions.
+
+The reason for using generators in the Interactivity API's asynchronous actions is to be able to restore the scope from the initially triggered action once the asynchronous action continues its execution after yielding. But this is a syntax change only, otherwise, **these functions operate just like regular async functions**, and the inferred types from the `store` function reflect this.
+
+Following our previous example, let's add an asynchronous action to the store.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+		*delayedIncrement() {
+			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+			state.counter += 1;
+		},
+	},
+} );
+```
+
+The inferred types for this store are:
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		// This behaves like a regular async function.
+		delayedIncrement(): Promise< void >;
+	};
+};
+```
+
+This also means that you can use your async actions in external functions, and TypeScript will correctly use the async function types.
+
+```ts
+const someAsyncFunction = async () => {
+	// This works fine and it's correctly typed.
+	await actions.delayedIncrement( 2000 );
+};
+```
+
+When you are not inferring types but manually writing the types for your entire store, you can use async function types for your async actions.
+
+```ts
+type Store = {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		delayedIncrement(): Promise< void >; // You can use async functions here.
+	};
+};
+```
+
+There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn() {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // TypeScript can't infer this return type.
+    		},
+    	},
+    } );
+    ```
+
+    In this case, just as we did with the derived state, we must manually type the return value of the generator.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn(): Generator< uknown, number, uknown > {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // Now this is correctly inferred.
+    		},
+    	},
+    } );
+    ```
+
+    That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.
+
+## Typing stores that are divided into multiple parts
+
+Sometimes, stores can be divided into different files. This can happen when different blocks share the same namespace, with each block loading the part of the store it needs.
+
+Let's look at an example of two blocks:
+
+-   `todo-list`: A block that displays a list of todos.
+-   `add-post-to-todo`: A block that shows a button to add a new todo item to the list with the text "Read {$post_title}".
+
+First, let's initialize the global and derived state of the `todo-list` block on the server.
+
+```php
+<?php
+// todo-list-block/render.php
+$todos = array( 'Buy milk', 'Walk the dog' );
+wp_interactivity_state( 'myTodoPlugin', array(
+  'todos'         => $todos,
+  'filter'        => 'all',
+  'filteredTodos' => $todos,
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type the server state and add the client store definition. Remember, `filteredTodos` is derived state, so you don't need to type it manually.
+
+```ts
+// todo-list-block/view.ts
+type ServerState = {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+	};
+};
+
+const todoList = {
+	state: {
+		get filteredTodos(): string[] {
+			return state.filter === 'completed'
+				? state.todos.filter( ( todo ) => todo.includes( '✅' ) )
+				: state.todos;
+		},
+	},
+	actions: {
+		addTodo( todo: string ) {
+			state.todos.push( todo );
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+export type TodoList = ServerState & typeof todoList;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< TodoList >( 'myTodoPlugin', todoList );
+```
+
+So far, so good. Now let's create our `add-post-to-todo` block.
+
+First, let's add the current post title to the server state.
+
+```php
+<?php
+// add-post-to-todo-block/render.php
+wp_interactivity_state( 'myTodoPlugin', array(
+  'postTitle' => get_the_title(),
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type that server state and add the client store definition.
+
+```ts
+// add-post-to-todo-block/view.ts
+type ServerState = {
+	state: {
+		postTitle: string;
+	};
+};
+
+const addPostToTodo = {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! state.todos.includes( todo ) ) {
+				actions.addTodo( todo );
+			}
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+type Store = ServerState & typeof addPostToTodo;
+
+// Injects the final types when calling the `store` function.
+const { state, actions } = store< Store >( 'myTodoPlugin', addPostToTodo );
+```
+
+This works fine in the browser, but TypeScript will complain that, in this block, `state` and `actions` do not include `state.todos` and `actions.addtodo`.
+
+To fix this, we need to import the `TodoList` type from the `todo-list` block and merge it with the other types.
+
+```ts
+import type { TodoList } from '../todo-list-block/view';
+
+// ...
+
+// Merges the inferred types inferred the server state types.
+type Store = TodoList & ServerState & typeof addPostToTodo;
+```
+
+That's it! Now TypeScript will know that `state.todos` and `actions.addTodo` are available in the `add-post-to-todo` block.
+
+This approach allows the `add-post-to-todo` block to interact with the existing todo list while maintaining type safety and adding its own functionality to the shared store.
+
+If you need to use the `add-post-to-todo` types in the `todo-list` block, you simply have to export its types and import them in the other `view.ts` file.
+
+Finally, if you prefer to define all types manually instead of inferring them, you can define them in a separate file and import that definition into each of your store parts. Here's how you could do that for our todo list example:
+
+```ts
+// types.ts
+interface Store {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+		filtered: string[];
+		postTitle: string;
+	};
+	actions: {
+		addTodo( todo: string ): void;
+		addPostToTodo(): void;
+	};
+}
+
+export default Store;
+```
+
+```ts
+// todo-list-block/view.ts
+import type Store from '../types';
+
+const { state } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+```ts
+// add-post-to-todo-block/view.ts
+import type Store from '../types';
+
+const { state, actions } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+This approach allows you to have full control over your types and ensures consistency across all parts of your store. It's particularly useful when you have a complex store structure or when you want to enforce a specific interface across multiple blocks or components.
+
+## Importing and exporting typed stores
+
+In the Interactivity API, stores from other namespaces can be accessed using the `store` function.
+
+Let's go back to our `todo-list` block example, but this time, let's imagine that the `add-post-to-todo` block belongs to a different plugin and therefore will use a different namespace.
+
+```ts
+// Import the store of the `todo-list` block.
+const myTodoPlugin = store( 'myTodoPlugin' );
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! myTodoPlugin.state.todos.includes( todo ) ) {
+				myTodoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+This works fine in the browser, but TypeScript will complain that `myTodoPlugin.state` and `myTodoPlugin.actions` are not typed.
+
+To fix that, the `myTodoPlugin` plugin can export the result of calling the `store` function with the correct types, and make that available using a script module.
+
+```ts
+// Export the already typed state and actions.
+export const { state, actions } = store< TodoList >( 'myTodoPlugin', {
+	// ...
+} );
+```
+
+Now, the `add-post-to-todo` block can import the typed store from the `myTodoPlugin` script module, and it not only ensures that the store will be loaded, but that it also contains the correct types.
+
+```ts
+import { store } from '@wordpress/interactivity';
+import {
+	state as todoState,
+	actions as todoActions,
+} from 'my-todo-plugin-module';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoState.todos.includes( todo ) ) {
+				todoActions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+Remember that you will need to declare the `my-todo-plugin-module` script module as a dependency.
+
+If the other store is optional and you don't want to load it eagerly, a dynamic import can be used instead of a static import.
+
+```ts
+import { store } from '@wordpress/interactivity';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		*addPostToTodo() {
+			const todoPlugin = yield import( 'my-todo-plugin-module' );
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoPlugin.state.todos.includes( todo ) ) {
+				todoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+## Conclusion
+
+In this guide, we explored different approaches to typing the Interactivity API stores, from inferring types automatically to manually defining them. We also covered how to handle server-initialized state, local context, and derived state, as well as how to type asynchronous actions.
+
+Remember that the choice between inferring types and manually defining them depends on your specific needs and the complexity of your store. Whichever approach you choose, TypeScript will help you build better and more reliable interactive blocks.
diff --git a/docs/toc.json b/docs/toc.json
index 719ffa344e3744..0d4689811b26ec 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -214,6 +214,9 @@
 							},
 							{
 								"docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/using-typescript.md": []
 							}
 						]
 					},
diff --git a/gutenberg.php b/gutenberg.php
index 342c61fb56cd13..466509dcf6b585 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.5
  * Requires PHP: 7.2
- * Version: 19.2.0
+ * Version: 19.3.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
index e33304e596e129..1f6543fa184283 100644
--- a/lib/class-wp-rest-global-styles-controller-gutenberg.php
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -532,27 +532,39 @@ public function get_item_schema() {
 	 * Checks if a given request has access to read a single theme global styles config.
 	 *
 	 * @since 5.9.0
+	 * @since 6.7.0 Allow users with edit post capabilities to view theme global styles.
 	 *
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
 	 */
 	public function get_theme_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		/*
+		 * Verify if the current user has edit_posts capability.
+		 */
+		if ( current_user_can( 'edit_posts' ) ) {
+			return true;
+		}
+
+		foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) {
+			if ( current_user_can( $post_type->cap->edit_posts ) ) {
+				return true;
+			}
+		}
 
 		/*
 		 * Verify if the current user has edit_theme_options capability.
-		 * This capability is required to edit/view/delete global styles.
 		 */
-		if ( ! current_user_can( 'edit_theme_options' ) ) {
-			return new WP_Error(
-				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
+		if ( current_user_can( 'edit_theme_options' ) ) {
+			return true;
 		}
 
-		return true;
+		return new WP_Error(
+			'rest_cannot_read_global_styles',
+			__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
+			array(
+				'status' => rest_authorization_required_code(),
+			)
+		);
 	}
 
 	/**
@@ -616,23 +628,8 @@ public function get_theme_item( $request ) {
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
 	 */
-	public function get_theme_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-
-		/*
-		 * Verify if the current user has edit_theme_options capability.
-		 * This capability is required to edit/view/delete global styles.
-		 */
-		if ( ! current_user_can( 'edit_theme_options' ) ) {
-			return new WP_Error(
-				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
-		}
-
-		return true;
+	public function get_theme_items_permissions_check( $request ) {
+		return $this->get_theme_item_permissions_check( $request );
 	}
 
 	/**
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 62e874d6b06c82..2343530e5595a7 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -601,6 +601,56 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 
+/**
+ * Registers or re-registers Gutenberg Script Modules.
+ *
+ * Script modules that are registered by Core will be re-registered by Gutenberg.
+ *
+ * @since 19.3.0
+ */
+function gutenberg_default_script_modules() {
+	/*
+	 * Expects multidimensional array like:
+	 *
+	 *     'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity-router/index.min.js' => …
+	 */
+	$assets = include gutenberg_dir_path() . '/build-module/assets.php';
+
+	foreach ( $assets as $file_name => $script_module_data ) {
+		/*
+		 * Build the WordPress Script Module ID from the file name.
+		 * Prepend `@wordpress/` and remove extensions and `/index` if present:
+		 *   - interactivity/index.min.js  => @wordpress/interactivity
+		 *   - interactivity/debug.min.js  => @wordpress/interactivity/debug
+		 *   - block-library/query/view.js => @wordpress/block-library/query/view
+		 */
+		$script_module_id = '@wordpress/' . preg_replace( '~(?:/index)?\.min\.js$~D', '', $file_name, 1 );
+		switch ( $script_module_id ) {
+			/*
+			 * Interactivity exposes two entrypoints, "/index" and "/debug".
+			 * "/debug" should replalce "/index" in devlopment.
+			 */
+			case '@wordpress/interactivity/debug':
+				if ( ! SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				$script_module_id = '@wordpress/interactivity';
+				break;
+			case '@wordpress/interactivity':
+				if ( SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				break;
+		}
+
+		$path = gutenberg_url( "build-module/{$file_name}" );
+		wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
+	}
+}
+remove_action( 'wp_default_scripts', 'wp_default_script_modules' );
+add_action( 'wp_default_scripts', 'gutenberg_default_script_modules' );
 
 /*
  * Always remove the Core action hook while gutenberg_enqueue_stored_styles() exists to avoid styles being printed twice.
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
index 9e82c1843f35a0..a8f68c0f0f04ea 100644
--- a/lib/compat/wordpress-6.7/block-bindings.php
+++ b/lib/compat/wordpress-6.7/block-bindings.php
@@ -53,3 +53,35 @@ function gutenberg_add_can_update_block_bindings_editor_setting( $editor_setting
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 );
+
+/**
+ * Add `label` to `register_meta`.
+ *
+ * @param array  $args Array of arguments for registering meta.
+ * @return array Modified arguments array including `label`.
+ */
+function gutenberg_update_meta_args_with_label( $args ) {
+	// Don't update schema when label isn't provided.
+	if ( ! isset( $args['label'] ) ) {
+		return $args;
+	}
+
+	$schema = array( 'title' => $args['label'] );
+	if ( ! is_array( $args['show_in_rest'] ) ) {
+		$args['show_in_rest'] = array(
+			'schema' => $schema,
+		);
+		return $args;
+	}
+
+	if ( ! empty( $args['show_in_rest']['schema'] ) ) {
+		$args['show_in_rest']['schema'] = array_merge( $args['show_in_rest']['schema'], $schema );
+	} else {
+		$args['show_in_rest']['schema'] = $schema;
+	}
+
+	return $args;
+}
+
+// Priority must be lower than 10 to ensure the label is not removed.
+add_filter( 'register_meta_args', 'gutenberg_update_meta_args_with_label', 5, 1 );
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
index 8374e8dc1fa23f..efdc41289dfac2 100644
--- a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
@@ -95,17 +95,33 @@ public static function get_response_links( $response ) {
 					continue;
 				}
 
-				$match = $server->match_request_to_handler( $request );
-				if ( ! is_wp_error( $match ) ) {
-					$response = new WP_REST_Response();
-					$response->set_matched_route( $match[0] );
-					$response->set_matched_handler( $match[1] );
-					$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
-
-					foreach ( $headers as $name => $value ) {
-						$name                               = WP_REST_Request::canonicalize_header_name( $name );
-						$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
-					}
+				$matched = $server->match_request_to_handler( $request );
+
+				if ( is_wp_error( $matched ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->has_valid_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->sanitize_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				list( $route, $handler ) = $matched;
+
+				$response = new WP_REST_Response();
+				$response->set_matched_route( $route );
+				$response->set_matched_handler( $handler );
+				$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
+
+				foreach ( $headers as $name => $value ) {
+					$name                               = WP_REST_Request::canonicalize_header_name( $name );
+					$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
 				}
 
 				$data[ $rel ][] = $attributes;
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
index c5e2927198da0c..313367594caae0 100644
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -114,3 +114,26 @@ function gutenberg_override_default_rest_server() {
 	return 'Gutenberg_REST_Server';
 }
 add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );
+
+
+/**
+ * Filters the arguments for registering a wp_global_styles post type.
+ * Note when syncing to Core: the capabilities should be updates for `wp_global_styles` in the wp-includes/post.php.
+ *
+ * @since 6.7.0
+ *
+ * @param array  $args      Array of arguments for registering a post type.
+ *                          See the register_post_type() function for accepted arguments.
+ * @param string $post_type Post type key.
+ *
+ * @return array Array of arguments for registering a post type.
+ */
+function gutenberg_register_post_type_args_for_wp_global_styles( $args, $post_type ) {
+	if ( 'wp_global_styles' === $post_type ) {
+		$args['capabilities']['read'] = 'edit_posts';
+	}
+
+	return $args;
+}
+
+add_filter( 'register_post_type_args', 'gutenberg_register_post_type_args_for_wp_global_styles', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/script-modules.php b/lib/compat/wordpress-6.7/script-modules.php
index 0a440ec81688d2..2282a3d4bd5acd 100644
--- a/lib/compat/wordpress-6.7/script-modules.php
+++ b/lib/compat/wordpress-6.7/script-modules.php
@@ -102,3 +102,46 @@ function () {
 	},
 	20
 );
+
+/**
+ * Prints HTML for the a11y Script Module.
+ *
+ * a11y relies on some DOM elements to use as ARIA live regions.
+ * Ideally, these elements are part of the initial HTML of the page
+ * so that accessibility tools can find them and observe updates.
+ */
+function gutenberg_a11y_script_module_html() {
+	$a11y_module_available = false;
+
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_marked_for_enqueue->setAccessible( true );
+	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+	$get_import_map->setAccessible( true );
+
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		if ( '@wordpress/a11y' === $id ) {
+			$a11y_module_available = true;
+			break;
+		}
+	}
+	if ( ! $a11y_module_available ) {
+		foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+			if ( '@wordpress/a11y' === $id ) {
+				$a11y_module_available = true;
+				break;
+			}
+		}
+	}
+	if ( ! $a11y_module_available ) {
+		return;
+	}
+	echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
+		. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications', 'default' ) . '</p>'
+		. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '</div>';
+}
+if ( ! method_exists( 'WP_Script_Modules', 'print_a11y_script_module_html' ) ) {
+	add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
+	add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );
+}
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 919be2e6e34a45..126382f85a513e 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -34,9 +34,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = true', 'before' );
-	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experimental/media/load.php b/lib/experimental/media/load.php
index 5cb16d84e1d8d9..bcb02accf62a6b 100644
--- a/lib/experimental/media/load.php
+++ b/lib/experimental/media/load.php
@@ -186,6 +186,24 @@ function gutenberg_rest_get_attachment_filesize( array $post ): ?int {
 	return null;
 }
 
+/**
+ * Filters the list of rewrite rules formatted for output to an .htaccess file.
+ *
+ * Adds support for serving wasm-vips locally.
+ *
+ * @param string $rules mod_rewrite Rewrite rules formatted for .htaccess.
+ * @return string Filtered rewrite rules.
+ */
+function gutenberg_filter_mod_rewrite_rules( string $rules ): string {
+	$rules .= "\n# BEGIN Gutenberg client-side media processing experiment\n" .
+				"AddType application/wasm wasm\n" .
+				"# END Gutenberg client-side media processing experiment\n";
+
+	return $rules;
+}
+
+add_filter( 'mod_rewrite_rules', 'gutenberg_filter_mod_rewrite_rules' );
+
 /**
  * Enables cross-origin isolation in the block editor.
  *
@@ -236,16 +254,11 @@ function gutenberg_start_cross_origin_isolation_output_buffer(): void {
 	$coep = $is_safari ? 'require-corp' : 'credentialless';
 
 	ob_start(
-		function ( string $output, ?int $phase ) use ( $coep ): string {
-			// Only send the header when the buffer is not being cleaned.
-			if ( ( $phase & PHP_OUTPUT_HANDLER_CLEAN ) === 0 ) {
-				header( 'Cross-Origin-Opener-Policy: same-origin' );
-				header( "Cross-Origin-Embedder-Policy: $coep" );
-
-				$output = gutenberg_add_crossorigin_attributes( $output );
-			}
+		function ( string $output ) use ( $coep ): string {
+			header( 'Cross-Origin-Opener-Policy: same-origin' );
+			header( "Cross-Origin-Embedder-Policy: $coep" );
 
-			return $output;
+			return gutenberg_add_crossorigin_attributes( $output );
 		}
 	);
 }
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
index a113df02b9d758..5a14e1418ed6de 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -200,30 +200,3 @@ function gutenberg_dequeue_module( $module_identifier ) {
 	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' );
 	wp_script_modules()->dequeue( $module_identifier );
 }
-
-/**
- * Registers Gutenberg Script Modules.
- *
- * @since 19.3
- */
-function gutenberg_register_script_modules() {
-	// When in production, use the plugin's version as the default asset version;
-	// else (for development or test) default to use the current time.
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
-
-	wp_deregister_script_module( '@wordpress/a11y' );
-	wp_register_script_module(
-		'@wordpress/a11y',
-		gutenberg_url( 'build-module/a11y/index.min.js' ),
-		array(),
-		$default_version
-	);
-	add_filter(
-		'script_module_data_@wordpress/a11y',
-		function ( $data ) {
-			$data['i18n'] = array( 'Notifications' => __( 'Notifications', 'default' ) );
-			return $data;
-		}
-	);
-}
-add_action( 'init', 'gutenberg_register_script_modules' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 5acd5f0f192364..27a54b920f4d52 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -175,17 +175,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-zoom-out-experiment',
-		__( 'Zoom out experiments', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Enable zoom out experiments; shows zoom out in the device preview and other zoom out experiments.', 'gutenberg' ),
-			'id'    => 'gutenberg-zoom-out-experiment',
-		)
-	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php
index 90535f1ebaa42f..ff68936f054a7e 100644
--- a/lib/interactivity-api.php
+++ b/lib/interactivity-api.php
@@ -6,27 +6,28 @@
  */
 
 /**
- * Deregisters the Core Interactivity API Modules and replace them
- * with the ones from the Gutenberg plugin.
+ * Adds script data to the interactivity-router script module.
+ *
+ * This filter is registered conditionally anticipating a WordPress Core change to add the script module data.
+ * The filter runs on 'after_setup_theme' (when Core registers Interactivity and Script Modules hooks)
+ * to ensure that the conditional registration happens after Core and correctly determine whether
+ * the filter should be added.
+ *
+ * @see https://github.com/WordPress/wordpress-develop/pull/7304
  */
-function gutenberg_reregister_interactivity_script_modules() {
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
-	wp_deregister_script_module( '@wordpress/interactivity' );
-	wp_deregister_script_module( '@wordpress/interactivity-router' );
-
-	wp_register_script_module(
-		'@wordpress/interactivity',
-		gutenberg_url( '/build-module/' . ( SCRIPT_DEBUG ? 'interactivity/debug.min.js' : 'interactivity/index.min.js' ) ),
-		array(),
-		$default_version
-	);
-
-	wp_register_script_module(
-		'@wordpress/interactivity-router',
-		gutenberg_url( '/build-module/interactivity-router/index.min.js' ),
-		array( '@wordpress/interactivity' ),
-		$default_version
-	);
+function gutenberg_register_interactivity_script_module_data_hooks() {
+	if ( ! has_filter( 'script_module_data_@wordpress/interactivity-router', array( wp_interactivity(), 'filter_script_module_interactivity_router_data' ) ) ) {
+		add_filter(
+			'script_module_data_@wordpress/interactivity-router',
+			function ( $data ) {
+				if ( ! isset( $data['i18n'] ) ) {
+					$data['i18n'] = array();
+				}
+				$data['i18n']['loading'] = __( 'Loading page, please wait.', 'default' );
+				$data['i18n']['loaded']  = __( 'Page Loaded.', 'default' );
+				return $data;
+			}
+		);
+	}
 }
-
-add_action( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
diff --git a/lib/rest-api.php b/lib/rest-api.php
index ac020e243ec056..7570bb19737233 100644
--- a/lib/rest-api.php
+++ b/lib/rest-api.php
@@ -13,9 +13,8 @@
 /**
  * Overrides the REST controller for the `wp_global_styles` post type.
  *
- * @param array  $args      Array of arguments for registering a post type.
+ * @param array $args Array of arguments for registering a post type.
  *                          See the register_post_type() function for accepted arguments.
- * @param string $post_type Post type key.
  *
  * @return array Array of arguments for registering a post type.
  */
diff --git a/package-lock.json b/package-lock.json
index 0bf382361797d6..9d3bc7007499e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "19.2.0",
+	"version": "19.3.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "19.2.0",
+			"version": "19.3.0",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52564,7 +52564,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52578,7 +52578,7 @@
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52606,7 +52606,7 @@
 		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52620,7 +52620,7 @@
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52632,7 +52632,7 @@
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52645,7 +52645,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52663,7 +52663,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52686,7 +52686,7 @@
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52696,7 +52696,7 @@
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52708,7 +52708,7 @@
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52730,7 +52730,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -52743,7 +52744,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "14.2.0",
+			"version": "14.3.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52842,7 +52843,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "9.7.0",
+			"version": "9.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52908,7 +52909,7 @@
 		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52920,7 +52921,7 @@
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
@@ -52933,7 +52934,7 @@
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "13.7.0",
+			"version": "13.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52987,7 +52988,7 @@
 		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52997,7 +52998,7 @@
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53170,7 +53171,7 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "28.7.0",
+			"version": "28.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.10",
@@ -53290,7 +53291,7 @@
 		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53327,7 +53328,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53340,6 +53341,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -53355,7 +53357,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53400,7 +53402,7 @@
 		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.50.0",
+			"version": "4.51.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53428,7 +53430,7 @@
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -53438,7 +53440,7 @@
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53476,7 +53478,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53505,7 +53507,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53523,7 +53525,7 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "4.3.0",
+			"version": "4.4.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.10",
@@ -53580,7 +53582,7 @@
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53595,7 +53597,7 @@
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53611,7 +53613,7 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53624,7 +53626,7 @@
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53646,7 +53648,7 @@
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53659,7 +53661,7 @@
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53671,7 +53673,7 @@
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "11.7.0",
+			"version": "11.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53694,7 +53696,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53722,7 +53724,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53762,7 +53764,7 @@
 		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53809,7 +53811,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53872,7 +53874,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53915,7 +53917,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "14.7.0",
+			"version": "14.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53977,7 +53979,7 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53996,7 +53998,7 @@
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54138,7 +54140,7 @@
 		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54150,7 +54152,7 @@
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "21.0.0",
+			"version": "21.1.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54197,6 +54199,7 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
+				"@wordpress/api-fetch": "file:../api-fetch",
 				"@wordpress/blob": "file:../blob",
 				"@wordpress/blocks": "file:../blocks",
 				"@wordpress/components": "file:../components",
@@ -54228,7 +54231,7 @@
 		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54256,7 +54259,7 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54268,7 +54271,7 @@
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54280,7 +54283,7 @@
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54300,7 +54303,7 @@
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54314,7 +54317,7 @@
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
@@ -54327,9 +54330,10 @@
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			},
 			"engines": {
@@ -54363,7 +54367,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54392,7 +54396,7 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54404,7 +54408,7 @@
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54421,7 +54425,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "12.7.0",
+			"version": "12.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54439,7 +54443,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54462,7 +54466,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54480,7 +54484,7 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54493,7 +54497,7 @@
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54508,7 +54512,7 @@
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54531,7 +54535,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54547,7 +54551,7 @@
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54564,7 +54568,7 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54577,7 +54581,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "9.7.0",
+			"version": "9.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54600,7 +54604,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54630,7 +54634,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54653,7 +54657,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54670,7 +54674,7 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54683,7 +54687,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54709,7 +54713,7 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54722,7 +54726,7 @@
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54735,7 +54739,7 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54752,7 +54756,7 @@
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54765,7 +54769,7 @@
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54777,7 +54781,7 @@
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54807,7 +54811,7 @@
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54963,7 +54967,7 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54976,7 +54980,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55021,7 +55025,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55048,7 +55052,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55072,7 +55076,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55091,7 +55095,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "29.0.0",
+			"version": "30.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -55546,7 +55550,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55572,7 +55576,7 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55585,7 +55589,7 @@
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55598,7 +55602,7 @@
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "22.7.0",
+			"version": "23.0.0",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -55716,7 +55720,7 @@
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55737,7 +55741,7 @@
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -55749,7 +55753,7 @@
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55762,7 +55766,7 @@
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55775,7 +55779,7 @@
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55793,7 +55797,7 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -55802,7 +55806,7 @@
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55830,7 +55834,7 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -67939,7 +67943,8 @@
 				"@wordpress/plugins": "file:../plugins",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/url": "file:../url",
-				"change-case": "^4.1.2"
+				"change-case": "^4.1.2",
+				"clsx": "^2.1.1"
 			}
 		},
 		"@wordpress/block-editor": {
@@ -68362,6 +68367,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -68944,6 +68950,7 @@
 			"version": "file:packages/fields",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"@wordpress/api-fetch": "file:../api-fetch",
 				"@wordpress/blob": "file:../blob",
 				"@wordpress/blocks": "file:../blocks",
 				"@wordpress/components": "file:../components",
@@ -69040,6 +69047,7 @@
 		"@wordpress/interactivity-router": {
 			"version": "file:packages/interactivity-router",
 			"requires": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			}
 		},
diff --git a/package.json b/package.json
index 46d2b42f267abb..5ecd0ef57b3516 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "19.2.0",
+	"version": "19.3.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
diff --git a/packages/README.md b/packages/README.md
index e780d006f70fbd..b8d2c913a91b9d 100644
--- a/packages/README.md
+++ b/packages/README.md
@@ -58,7 +58,7 @@ When creating a new package, you need to provide at least the following:
     Initial release.
     ```
 
-To ensure your package is recognised, you should also _manually_ add your new package to the root `package.json` file and then run `npm install` to update the dependencies.
+To ensure your package is recognized, you should also _manually_ add your new package to the root `package.json` file and then run `npm install` to update the dependencies.
 
 ## Managing Dependencies
 
@@ -104,7 +104,7 @@ Next, you need to run `npm install` in the root of the project to ensure that `p
 This is the most confusing part of working with [monorepo] which causes a lot of hassles for contributors. The most successful strategy so far is to do the following:
 
 1.  First, remove the existing dependency as described in the previous section.
-2.  Next, add the same dependency back as described in the first section of this chapter. This time it wil get the latest version applied unless you enforce a different version explicitly.
+2.  Next, add the same dependency back as described in the first section of this chapter. This time it will get the latest version applied unless you enforce a different version explicitly.
 
 ### Development Dependencies
 
@@ -152,9 +152,9 @@ It's very important to have a good plan for what a new package will include. All
 
 ## Maintaining Changelogs
 
-In maintaining dozens of npm packages, it can be tough to keep track of changes. To simplify the release process, each package includes a `CHANGELOG.md` file which details all published releases and the unreleased ("Unreleased") changes, if any exist.
+When maintaining dozens of npm packages, it can be tough to keep track of changes. To simplify the release process, each package includes a `CHANGELOG.md` file which details all published releases and the unreleased ("Unreleased") changes, if any exist.
 
-For each pull request, you should always include relevant changes in a "Unreleased" heading at the top of the file. You should add the heading if it doesn't already exist.
+For each pull request, you should always include relevant changes under an "Unreleased" heading at the top of the file. You should add the heading if it doesn't already exist.
 
 _Example:_
 
@@ -200,7 +200,7 @@ Gutenberg uses TypeScript by running the TypeScript compiler (`tsc`) on select p
 These packages benefit from type checking and produced type declarations in the published packages.
 
 To opt-in to TypeScript tooling, packages should include a `tsconfig.json` file in the package root and add an entry to the root `tsconfig.json` references.
-The changes will indicate that the package has opted-in and will be included in the TypeScript build process.
+The changes will indicate that the package has opted in and will be included in the TypeScript build process.
 
 A `tsconfig.json` file should look like the following (comments are not necessary):
 
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 36973cce020f33..626488313977d1 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 327d6b9ff07167..d3337485a18284 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index 59e93da780bd81..cdc3be10545155 100644
--- a/packages/a11y/src/index.js
+++ b/packages/a11y/src/index.js
@@ -2,18 +2,37 @@
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { makeSetupFunction } from './shared/index';
+import addContainer from './script/add-container';
+import addIntroText from './script/add-intro-text';
+
 export { speak } from './shared/index';
 
 /**
  * Create the live regions.
  */
-export const setup = makeSetupFunction( __( 'Notifications' ) );
+export function setup() {
+	const introText = document.getElementById( 'a11y-speak-intro-text' );
+	const containerAssertive = document.getElementById(
+		'a11y-speak-assertive'
+	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
+
+	if ( introText === null ) {
+		addIntroText();
+	}
+
+	if ( containerAssertive === null ) {
+		addContainer( 'assertive' );
+	}
+
+	if ( containerPolite === null ) {
+		addContainer( 'polite' );
+	}
+}
 
 /**
  * Run setup on domReady.
diff --git a/packages/a11y/src/module/index.ts b/packages/a11y/src/module/index.ts
index a2c87f397f4875..a06882f068dd3a 100644
--- a/packages/a11y/src/module/index.ts
+++ b/packages/a11y/src/module/index.ts
@@ -1,25 +1,11 @@
 /**
  * Internal dependencies
  */
-import { makeSetupFunction } from '../shared/index';
 export { speak } from '../shared/index';
 
-// Without an i18n Script Module, "Notifications" (the only localized text used in this module)
-// will be translated on the server and provided as script-module data.
-let notificationsText = 'Notifications';
-try {
-	const textContent = document.getElementById(
-		'wp-script-module-data-@wordpress/a11y'
-	)?.textContent;
-	if ( textContent ) {
-		const parsed = JSON.parse( textContent );
-		notificationsText = parsed?.i18n?.Notifications ?? notificationsText;
-	}
-} catch {}
-
 /**
- * Create the live regions.
+ * This no-op function is exported to provide compatibility with the `wp-a11y` Script.
+ *
+ * Filters should inject the relevant HTML on page load instead of requiring setup.
  */
-export const setup = makeSetupFunction( notificationsText );
-
-setup();
+export const setup = () => {};
diff --git a/packages/a11y/src/shared/add-container.js b/packages/a11y/src/script/add-container.js
similarity index 100%
rename from packages/a11y/src/shared/add-container.js
rename to packages/a11y/src/script/add-container.js
diff --git a/packages/a11y/src/shared/add-intro-text.ts b/packages/a11y/src/script/add-intro-text.ts
similarity index 83%
rename from packages/a11y/src/shared/add-intro-text.ts
rename to packages/a11y/src/script/add-intro-text.ts
index 6bd97c887664d3..2bcf453ec44c8e 100644
--- a/packages/a11y/src/shared/add-intro-text.ts
+++ b/packages/a11y/src/script/add-intro-text.ts
@@ -1,18 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Build the explanatory text to be placed before the aria live regions.
  *
  * This text is initially hidden from assistive technologies by using a `hidden`
  * HTML attribute which is then removed once a message fills the aria-live regions.
  *
- * @param {string} introTextContent The translated intro text content.
  * @return {HTMLParagraphElement} The explanatory text HTML element.
  */
-export default function addIntroText( introTextContent: string ) {
+export default function addIntroText() {
 	const introText = document.createElement( 'p' );
 
 	introText.id = 'a11y-speak-intro-text';
 	introText.className = 'a11y-speak-intro-text';
-	introText.textContent = introTextContent;
+	introText.textContent = __( 'Notifications' );
 
 	introText.setAttribute(
 		'style',
diff --git a/packages/a11y/src/shared/test/add-container.test.js b/packages/a11y/src/script/test/add-container.test.js
similarity index 100%
rename from packages/a11y/src/shared/test/add-container.test.js
rename to packages/a11y/src/script/test/add-container.test.js
diff --git a/packages/a11y/src/shared/index.js b/packages/a11y/src/shared/index.js
index a05f891f428561..2b6353720d0add 100644
--- a/packages/a11y/src/shared/index.js
+++ b/packages/a11y/src/shared/index.js
@@ -1,37 +1,9 @@
 /**
  * Internal dependencies
  */
-import addContainer from './add-container';
-import addIntroText from './add-intro-text';
 import clear from './clear';
 import filterMessage from './filter-message';
 
-/**
- * Create the live regions.
- * @param {string} introTextContent The intro text content.
- */
-export function makeSetupFunction( introTextContent ) {
-	return function setup() {
-		const introText = document.getElementById( 'a11y-speak-intro-text' );
-		const containerAssertive = document.getElementById(
-			'a11y-speak-assertive'
-		);
-		const containerPolite = document.getElementById( 'a11y-speak-polite' );
-
-		if ( introText === null ) {
-			addIntroText( introTextContent );
-		}
-
-		if ( containerAssertive === null ) {
-			addContainer( 'assertive' );
-		}
-
-		if ( containerPolite === null ) {
-			addContainer( 'polite' );
-		}
-	};
-}
-
 /**
  * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
  * This module is inspired by the `speak` function in `wp-a11y.js`.
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index 6211cf30688e5c..7ac3e50c3fd8b6 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index c189dcc11fd09f..edaae0ca7617bd 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index 01b37d4e14a7d1..7c333170b6cc11 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 76d797f4ddfa57..54fb852a75402e 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index ed19f1ceafbc58..4bb494dcfff5c0 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 4e1cf577ebd09c..49ddffcf79f9ce 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index c916b788243a06..5a68cf8eb40400 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 1af6bdf93cb044..d06a750eb0d91e 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index e7345f314d5788..d878e1fb6b020c 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index a7c18d891538d1..5c9cbb1384796b 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 70a740f60cad38..b31be6ffd8d56d 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix a bug in 8.8.1 due to missing files in the published package ([#65481](https://github.com/WordPress/gutenberg/pull/65481)).
+
+## 8.8.0 (2024-09-19)
+
+### Internal
+
+-   Added `addPolyfillComments` option. When used, it will automatically add magic comments to mark files that need `wp-polyfill` ([#65292](https://github.com/WordPress/gutenberg/pull/65292)).
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md
index fb853a73ea3c8b..301d2583dcf865 100644
--- a/packages/babel-preset-default/README.md
+++ b/packages/babel-preset-default/README.md
@@ -43,7 +43,7 @@ For example, if you'd like to use a new language feature proposal which has not
 
 There is a complementary `build/polyfill.js` (minified version – `build/polyfill.min.js`) file available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project ([#31279](https://github.com/WordPress/gutenberg/pull/31279)). It's a drop-in replacement for the deprecated `@babel/polyfill` package, and it's also based on [`core-js`](https://github.com/zloirock/core-js) project.
 
-This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a `<script>` before it.
+This needs to be included in some cases, if the features being used require polyfills. You can either prepend it to your compiled code or include it in a `<script>` before it.
 
 #### TC39 Proposals
 
diff --git a/packages/babel-preset-default/bin/index.js b/packages/babel-preset-default/bin/index.js
index 0e0e66b450c1d6..041ab0143a5ae4 100755
--- a/packages/babel-preset-default/bin/index.js
+++ b/packages/babel-preset-default/bin/index.js
@@ -7,13 +7,14 @@ const builder = require( 'core-js-builder' );
 const { minify } = require( 'terser' );
 const { writeFile } = require( 'fs' ).promises;
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( '../polyfill-exclusions' );
+
 builder( {
 	modules: [ 'es.', 'web.' ],
-	exclude: [
-		// This is an IE-only feature which we don't use, and don't want to polyfill.
-		// @see https://github.com/WordPress/gutenberg/pull/49234
-		'web.immediate',
-	],
+	exclude: exclusions,
 	summary: { console: { size: true, modules: true } },
 	targets: require( '@wordpress/browserslist-config' ),
 	filename: './build/polyfill.js',
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 45ec6473be3cbc..468c2cce812f69 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -3,6 +3,12 @@
  */
 const browserslist = require( 'browserslist' );
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( './polyfill-exclusions' );
+const replacePolyfills = require( './replace-polyfills' );
+
 module.exports = ( api ) => {
 	let wpBuildOpts = {};
 	const isWPBuild = ( name ) =>
@@ -27,6 +33,13 @@ module.exports = ( api ) => {
 				'proposal-nullish-coalescing-operator',
 				'proposal-logical-assignment-operators',
 			],
+			...( wpBuildOpts.addPolyfillComments
+				? {
+						useBuiltIns: 'usage',
+						exclude: exclusions,
+						corejs: require( 'core-js/package.json' ).version,
+				  }
+				: {} ),
 		};
 
 		if ( isTestEnv ) {
@@ -82,6 +95,7 @@ module.exports = ( api ) => {
 				},
 			],
 			maybeGetPluginTransformRuntime(),
+			wpBuildOpts.addPolyfillComments && replacePolyfills,
 		].filter( Boolean ),
 	};
 };
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index be5b3786346eb2..1203586ec20292 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,9 @@
 	},
 	"files": [
 		"build",
-		"index.js"
+		"index.js",
+		"polyfill-exclusions.js",
+		"replace-polyfills.js"
 	],
 	"main": "index.js",
 	"dependencies": {
diff --git a/packages/babel-preset-default/polyfill-exclusions.js b/packages/babel-preset-default/polyfill-exclusions.js
new file mode 100644
index 00000000000000..507396c930b99c
--- /dev/null
+++ b/packages/babel-preset-default/polyfill-exclusions.js
@@ -0,0 +1,10 @@
+module.exports = [
+	// Ignore excessively strict polyfilling of `Array.prototype.push` to work
+	// around an obscure bug involving non-writable arrays.
+	// See https://issues.chromium.org/issues/42202623 for the details of the
+	// bug that leads to the polyfilling, and which we are choosing to ignore.
+	'es.array.push',
+	// This is an IE-only feature which we don't use, and don't want to polyfill.
+	// @see https://github.com/WordPress/gutenberg/pull/49234
+	'web.immediate',
+];
diff --git a/packages/babel-preset-default/replace-polyfills.js b/packages/babel-preset-default/replace-polyfills.js
new file mode 100644
index 00000000000000..a3a68cc5f84e90
--- /dev/null
+++ b/packages/babel-preset-default/replace-polyfills.js
@@ -0,0 +1,59 @@
+// Babel plugin that looks for `core-js` imports (or requires)
+// and replaces them with magic comments to mark the file as
+// depending on wp-polyfill.
+function replacePolyfills() {
+	return {
+		pre() {
+			this.hasAddedPolyfills = false;
+		},
+		visitor: {
+			Program: {
+				exit( path ) {
+					if ( this.hasAddedPolyfills ) {
+						// Add magic comment to top of file.
+						path.addComment( 'leading', ' wp:polyfill ' );
+					}
+				},
+			},
+			// Handle `import` syntax.
+			ImportDeclaration( path ) {
+				const source = path?.node?.source;
+				const name = source?.value || '';
+
+				// Look for imports from `core-js`.
+				if ( name.startsWith( 'core-js/' ) ) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+
+			// Handle `require` syntax.
+			CallExpression( path ) {
+				const callee = path?.node?.callee;
+				const arg = path?.node?.arguments[ 0 ];
+
+				if (
+					! callee ||
+					! arg ||
+					callee.type !== 'Identifier' ||
+					callee.name !== 'require'
+				) {
+					return;
+				}
+
+				// Look for requires for `core-js`.
+				if (
+					arg.type === 'StringLiteral' &&
+					arg.value.startsWith( 'core-js/' )
+				) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+		},
+	};
+}
+
+module.exports = replacePolyfills;
diff --git a/packages/babel-preset-default/test/fixtures/polyfill.js b/packages/babel-preset-default/test/fixtures/polyfill.js
new file mode 100644
index 00000000000000..14a4fb20f14fa4
--- /dev/null
+++ b/packages/babel-preset-default/test/fixtures/polyfill.js
@@ -0,0 +1,6 @@
+// Note: this fixture may need to be updated when the browserslist or the
+// core-js dependencies are updated.
+// It should always test a feature that is supported, but requires
+// a polyfill to work across all supported browsers.
+const foo = new URLSearchParams();
+window.fooSize = foo.size;
diff --git a/packages/babel-preset-default/test/index.js b/packages/babel-preset-default/test/index.js
index 0a411cd4247975..4a23d13544b278 100644
--- a/packages/babel-preset-default/test/index.js
+++ b/packages/babel-preset-default/test/index.js
@@ -24,4 +24,22 @@ describe( 'Babel preset default', () => {
 
 		expect( output.code ).toMatchSnapshot();
 	} );
+
+	test( 'transpilation includes magic comment when using the addPolyfillComments option', () => {
+		const filename = path.join( __dirname, '/fixtures/polyfill.js' );
+		const input = readFileSync( filename );
+
+		const output = transform( input, {
+			filename,
+			configFile: false,
+			envName: 'production',
+			presets: [ babelPresetDefault ],
+			caller: {
+				name: 'WP_BUILD_MAIN',
+				addPolyfillComments: true,
+			},
+		} );
+
+		expect( output.code ).toContain( '/* wp:polyfill */' );
+	} );
 } );
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index cad2f94c98da7b..ea6b765aea3f11 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index 8706d185aa221b..b17478ed24f040 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -4,7 +4,7 @@
 	}
 }
 
-@mixin animation__fade-in($speed: 0.08s, $delay: 0s) {
+@mixin animation__fade-in($speed: 0.08s, $delay: 0s, $easing: linear) {
 	@include keyframes(__wp-base-styles-fade-in) {
 		from {
 			opacity: 0;
@@ -15,12 +15,12 @@
 	}
 
 
-	animation: __wp-base-styles-fade-in $speed linear $delay;
+	animation: __wp-base-styles-fade-in $speed $easing $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
 
-@mixin animation__fade-out($speed: 0.08s, $delay: 0s) {
+@mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) {
 	@include keyframes(__wp-base-styles-fade-out) {
 		from {
 			opacity: 1;
@@ -31,7 +31,7 @@
 	}
 
 
-	animation: __wp-base-styles-fade-out $speed linear $delay;
+	animation: __wp-base-styles-fade-out $speed $easing $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 91017c8bb99320..65f98bf6f15bfc 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,6 +1,74 @@
 @import "./functions";
 @import "./long-content-fade";
 
+/**
+ * Typography
+ */
+
+@mixin _text-heading() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-medium;
+}
+
+@mixin _text-body() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+}
+
+@mixin heading-small() {
+	@include _text-heading();
+	font-size: $font-size-x-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin heading-medium() {
+	@include _text-heading();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin heading-large() {
+	@include _text-heading();
+	font-size: $font-size-large;
+	line-height: $line-height-small;
+}
+
+@mixin heading-x-large() {
+	@include _text-heading();
+	font-size: $font-size-x-large;
+	line-height: $line-height-medium;
+}
+
+@mixin heading-2x-large() {
+	@include _text-heading();
+	font-size: $font-size-2x-large;
+	line-height: $font-line-height-2x-large;
+}
+
+@mixin body-small() {
+	@include _text-body();
+	font-size: $font-size-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin body-medium() {
+	@include _text-body();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin body-large() {
+	@include _text-body();
+	font-size: $font-size-large;
+	line-height: $line-height-medium;
+}
+
+@mixin body-x-large() {
+	@include _text-body();
+	font-size: $font-size-x-large;
+	line-height: $line-height-x-large;
+}
+
 /**
  * Breakpoint mixins
  */
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0f0c9e6d019ba3..ec0bdf91f2489d 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -12,15 +12,37 @@
  * Fonts & basic variables.
  */
 
-$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
-$default-font-size: 13px;
-$default-line-height: 1.4;
-$editor-html-font: Menlo, Consolas, monaco, monospace;
-$editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
-$text-editor-font-size: 15px;
-$editor-line-height: 1.8;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+$default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; // Todo: deprecate in favor of $family variables
+$default-line-height: 1.4; // Todo: deprecate in favor of $line-height tokens
+
+/**
+ * Typography
+ */
+
+// Sizes
+$font-size-x-small: 11px;
+$font-size-small: 12px;
+$font-size-medium: 13px;
+$font-size-large: 15px;
+$font-size-x-large: 20px;
+$font-size-2x-large: 32px;
+
+// Line heights
+$font-line-height-x-small: 16px;
+$font-line-height-small: 20px;
+$font-line-height-medium: 24px;
+$font-line-height-large: 28px;
+$font-line-height-x-large: 32px;
+$font-line-height-2x-large: 40px;
+
+// Weights
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+
+// Families
+$font-family-headings: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font-family-mono: Menlo, Consolas, monaco, monospace;
 
 /**
  * Grid System.
@@ -55,16 +77,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
+$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
+$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
+$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
 
 /**
  * Dimensions.
@@ -91,7 +113,12 @@ $spinner-size: 16px;
 $canvas-padding: $grid-unit-20;
 
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in".
+
+/**
+ * Editor styles.
  */
 
 $sidebar-width: 280px;
@@ -99,6 +126,11 @@ $content-width: 840px;
 $wide-content-width: 1100px;
 $widget-area-width: 700px;
 $secondary-sidebar-width: 350px;
+$editor-font-size: 16px;
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks.
+$text-editor-font-size: 15px;
+$editor-line-height: 1.8;
+$editor-html-font: $font-family-mono;
 
 /**
  * Block & Editor UI.
@@ -117,7 +149,7 @@ $block-padding: 14px; // Used to define space between block footprint and surrou
 $radius-block-ui: $radius-small;
 $shadow-popover: $elevation-x-small;
 $shadow-modal: $elevation-large;
-
+$default-font-size: $font-size-medium;
 
 /**
  * Block paddings.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index cc99df6dbeaafc..77238c6f386084 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -8,7 +8,6 @@ $z-layers: (
 	".block-editor-block-switcher__arrow": 1,
 	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
-	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
 	".editor-text-editor__toolbar": 1,
 
@@ -70,10 +69,6 @@ $z-layers: (
 	// Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
 	".block-editor-global-styles-background-panel__popover": 159900 - 10,
 
-	// Small screen inner blocks overlay must be displayed above drop zone,
-	// settings menu, and movers.
-	".block-editor-block-list__layout.has-overlay::after": 60,
-
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-contextual-toolbar": 61,
 
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 6839a8081e04a8..c6ab374e1f5dd3 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index f95598025a8b68..c13c6e6faf6ac8 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 3dea70c9771976..cbcf04ecf64882 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index 70914f293ca998..8c25431f1b5b5e 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 39f239edfcb44a..974125a5f3f2c3 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -45,7 +45,8 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/url": "file:../url",
-		"change-case": "^4.1.2"
+		"change-case": "^4.1.2",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/index.js b/packages/block-directory/src/components/downloadable-block-list-item/index.js
index ac587dc2d6d0cc..7a5f479174ab25 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/index.js
@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
-	Button,
+	Tooltip,
 	Spinner,
 	VisuallyHidden,
 	Composite,
@@ -89,77 +94,75 @@ function DownloadableBlockListItem( { item, onClick } ) {
 		statusText = __( 'Installing…' );
 	}
 
+	const itemLabel = getDownloadableBlockLabel( item, {
+		hasNotice,
+		isInstalled,
+		isInstalling,
+	} );
+
 	return (
-		<Composite.Item
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					accessibleWhenDisabled
-					type="button"
-					role="option"
-					className="block-directory-downloadable-block-list-item"
-					isBusy={ isInstalling }
-					onClick={ ( event ) => {
-						event.preventDefault();
-						onClick();
-					} }
-					label={ getDownloadableBlockLabel( item, {
-						hasNotice,
-						isInstalled,
-						isInstalling,
-					} ) }
-					showTooltip
-					tooltipPosition="top center"
-				/>
-			}
-			disabled={ isInstalling || ! isInstallable }
-		>
-			<div className="block-directory-downloadable-block-list-item__icon">
-				<DownloadableBlockIcon icon={ icon } title={ title } />
-				{ isInstalling ? (
-					<span className="block-directory-downloadable-block-list-item__spinner">
-						<Spinner />
-					</span>
-				) : (
-					<BlockRatings rating={ rating } />
+		<Tooltip placement="top" text={ itemLabel }>
+			<Composite.Item
+				className={ clsx(
+					'block-directory-downloadable-block-list-item',
+					isInstalling && 'is-installing'
 				) }
-			</div>
-			<span className="block-directory-downloadable-block-list-item__details">
-				<span className="block-directory-downloadable-block-list-item__title">
-					{ createInterpolateElement(
-						sprintf(
-							/* translators: %1$s: block title, %2$s: author name. */
-							__( '%1$s <span>by %2$s</span>' ),
-							decodeEntities( title ),
-							author
-						),
-						{
-							span: (
-								<span className="block-directory-downloadable-block-list-item__author" />
+				accessibleWhenDisabled
+				disabled={ isInstalling || ! isInstallable }
+				onClick={ ( event ) => {
+					event.preventDefault();
+					onClick();
+				} }
+				aria-label={ itemLabel }
+				type="button"
+				role="option"
+			>
+				<div className="block-directory-downloadable-block-list-item__icon">
+					<DownloadableBlockIcon icon={ icon } title={ title } />
+					{ isInstalling ? (
+						<span className="block-directory-downloadable-block-list-item__spinner">
+							<Spinner />
+						</span>
+					) : (
+						<BlockRatings rating={ rating } />
+					) }
+				</div>
+				<span className="block-directory-downloadable-block-list-item__details">
+					<span className="block-directory-downloadable-block-list-item__title">
+						{ createInterpolateElement(
+							sprintf(
+								/* translators: %1$s: block title, %2$s: author name. */
+								__( '%1$s <span>by %2$s</span>' ),
+								decodeEntities( title ),
+								author
 							),
-						}
+							{
+								span: (
+									<span className="block-directory-downloadable-block-list-item__author" />
+								),
+							}
+						) }
+					</span>
+					{ hasNotice ? (
+						<DownloadableBlockNotice block={ item } />
+					) : (
+						<>
+							<span className="block-directory-downloadable-block-list-item__desc">
+								{ !! statusText
+									? statusText
+									: decodeEntities( description ) }
+							</span>
+							{ isInstallable &&
+								! ( isInstalled || isInstalling ) && (
+									<VisuallyHidden>
+										{ __( 'Install block' ) }
+									</VisuallyHidden>
+								) }
+						</>
 					) }
 				</span>
-				{ hasNotice ? (
-					<DownloadableBlockNotice block={ item } />
-				) : (
-					<>
-						<span className="block-directory-downloadable-block-list-item__desc">
-							{ !! statusText
-								? statusText
-								: decodeEntities( description ) }
-						</span>
-						{ isInstallable &&
-							! ( isInstalled || isInstalling ) && (
-								<VisuallyHidden>
-									{ __( 'Install block' ) }
-								</VisuallyHidden>
-							) }
-					</>
-				) }
-			</span>
-		</Composite.Item>
+			</Composite.Item>
+		</Tooltip>
 	);
 }
 
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index 8f95297bd9ef0d..6fce5e1b5b32a7 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -1,10 +1,21 @@
 .block-directory-downloadable-block-list-item {
-	padding: $grid-unit-15;
+	& + & {
+		margin-top: $grid-unit-05;
+	}
+
+	display: grid;
+	grid-template-columns: auto 1fr;
+
 	width: 100%;
 	height: auto;
+	padding: $grid-unit-15;
+	margin: 0;
+
+	appearance: none;
+	background: none;
+	border: 0;
 	text-align: left;
-	display: grid;
-	grid-template-columns: auto 1fr;
+	transition: box-shadow 0.1s linear;
 
 	// The item contains absolutely positioned items.
 	// Set `position: relative` on the parent to prevent overflow issues
@@ -12,13 +23,20 @@
 	// See: https://github.com/WordPress/gutenberg/issues/63384
 	position: relative;
 
+
+	&:not([aria-disabled="true"]) {
+		cursor: pointer;
+	}
+
 	&:hover {
 		@include button-style__focus();
 	}
 
-	&.is-busy {
-		background: transparent;
+	&[data-focus-visible] {
+		@include button-style__focus();
+	}
 
+	&.is-installing {
 		.block-directory-downloadable-block-list-item__author {
 			border: 0;
 			clip: rect(1px, 1px, 1px, 1px);
@@ -33,11 +51,6 @@
 			word-wrap: normal !important;
 		}
 	}
-
-	&:disabled,
-	&[aria-disabled] {
-		opacity: 1;
-	}
 }
 
 .block-directory-downloadable-block-list-item__icon {
@@ -56,6 +69,11 @@
 		align-items: center;
 		justify-content: center;
 	}
+
+	.is-installing & {
+		// Adding an extra 6px to avoid the UI from jumping when the rating bar gets hidden
+		margin-right: $grid-unit-20 + 6px;
+	}
 }
 
 .block-directory-block-ratings {
diff --git a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
index ff3fdb9ea8e319..f4df5ad4abda53 100644
--- a/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
+++ b/packages/block-directory/src/components/downloadable-blocks-panel/style.scss
@@ -32,6 +32,3 @@
 	margin-top: 0;
 }
 
-.block-directory-downloadable-blocks-panel button {
-	margin-top: $grid-unit-05;
-}
diff --git a/packages/block-directory/src/plugins/get-install-missing/index.js b/packages/block-directory/src/plugins/get-install-missing/index.js
index 8b192cbe8fdc49..43c051cb9aa371 100644
--- a/packages/block-directory/src/plugins/get-install-missing/index.js
+++ b/packages/block-directory/src/plugins/get-install-missing/index.js
@@ -101,8 +101,7 @@ const ModifiedWarning = ( { originalBlock, ...props } ) => {
 		);
 		actions.push(
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				key="convert"
 				onClick={ convertToHTML }
 				variant="tertiary"
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 3b05b53a380b9a..ec4a48dd39bf53 100644
--- a/packages/block-directory/src/plugins/get-install-missing/install-button.js
+++ b/packages/block-directory/src/plugins/get-install-missing/install-button.js
@@ -22,8 +22,7 @@ export default function InstallButton( { attributes, block, clientId } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			onClick={ () =>
 				installBlockType( block ).then( ( success ) => {
 					if ( success ) {
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index da44ebc4149f58..db61ff05e3c1ad 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.3.0 (2024-09-19)
+
 ## 14.2.0 (2024-09-05)
 
 ## 14.1.0 (2024-08-21)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index a474d1df7e56d0..32ba4598c4f92d 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -839,6 +839,48 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-popover/README.md>
 
+### useBlockBindingsUtils
+
+Retrieves the existing utils needed to update the block `bindings` metadata. They can be used to create, modify, or remove connections from the existing block attributes.
+
+It contains the following utils:
+
+-   `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+-   `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+
+_Usage_
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+
+// Update url and alt attributes.
+updateBlockBindings( {
+	url: {
+		source: 'core/post-meta',
+		args: {
+			key: 'url_custom_field',
+		},
+	},
+	alt: {
+		source: 'core/post-meta',
+		args: {
+			key: 'text_custom_field',
+		},
+	},
+} );
+
+// Remove binding from url attribute.
+updateBlockBindings( { url: undefined } );
+
+// Remove bindings from all attributes.
+removeAllBlockBindings();
+```
+
+_Returns_
+
+-   `?WPBlockBindingsUtils`: Object containing the block bindings utils.
+
 ### useBlockCommands
 
 Undocumented declaration.
@@ -1027,11 +1069,11 @@ _Parameters_
 
 ### useZoomOut
 
-A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+A hook used to set the zoomed out view, invoking the hook sets the mode.
 
 _Parameters_
 
--   _zoomOut_ `boolean`: If we should enter into zoomOut mode or not
+-   _zoomOut_ `boolean`: If we should zoom out or not.
 
 ### Warning
 
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index d3064c78dbe658..a135f126d7eb3c 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.2.0",
+	"version": "14.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js
index ce9af28f19d000..fb64cb151294d6 100644
--- a/packages/block-editor/src/autocompleters/link.js
+++ b/packages/block-editor/src/autocompleters/link.js
@@ -6,6 +6,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Icon, page, post } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const SHOWN_SUGGESTIONS = 10;
 
@@ -46,7 +47,7 @@ function createLinkCompleter() {
 						key="icon"
 						icon={ item.subtype === 'page' ? page : post }
 					/>
-					{ item.title }
+					{ decodeEntities( item.title ) }
 				</>
 			);
 		},
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
index 5e12165c679424..f06c8addedad50 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -29,7 +29,6 @@ export default function BlockActions( {
 				getBlockRootClientId,
 				getBlocksByClientId,
 				getDirectInsertBlock,
-				canMoveBlocks,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 
@@ -44,7 +43,6 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds ),
 				canRemove: canRemoveBlocks( clientIds ),
 				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
@@ -67,8 +65,7 @@ export default function BlockActions( {
 	);
 	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
-		selected;
+	const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
 	const {
 		removeBlocks,
@@ -77,9 +74,6 @@ export default function BlockActions( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		flashBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -89,7 +83,6 @@ export default function BlockActions( {
 		canCopyStyles,
 		canDuplicate,
 		canInsertBlock,
-		canMove,
 		canRemove,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
@@ -103,11 +96,6 @@ export default function BlockActions( {
 		onInsertAfter() {
 			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
-		onMoveTo() {
-			setNavigationMode( true );
-			selectBlock( clientIds[ 0 ] );
-			setBlockMovingClientId( clientIds[ 0 ] );
-		},
 		onGroup() {
 			if ( ! clientIds.length ) {
 				return;
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 8196f7688d4b50..4d40fe07d55471 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -22,7 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType, className } ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -65,7 +65,16 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			) }
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">{ title }</h2>
+				<h2 className="block-editor-block-card__title">
+					{ name?.length
+						? sprintf(
+								// translators:  %1$s: Custom block name. %2$s: Block title.
+								__( '%1$s (%2$s)' ),
+								name,
+								title
+						  )
+						: title }
+				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">
 						{ description }
diff --git a/packages/block-editor/src/components/block-controls/use-has-block-controls.js b/packages/block-editor/src/components/block-controls/use-has-block-controls.js
deleted file mode 100644
index f7884cc1882ed5..00000000000000
--- a/packages/block-editor/src/components/block-controls/use-has-block-controls.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-
-export function useHasAnyBlockControls() {
-	let hasAnyBlockControls = false;
-	for ( const group in groups ) {
-		// It is safe to violate the rules of hooks here as the `groups` object
-		// is static and will not change length between renders. Do not return
-		// early as that will cause the hook to be called a different number of
-		// times between renders.
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		if ( useHasBlockControls( group ) ) {
-			hasAnyBlockControls = true;
-		}
-	}
-	return hasAnyBlockControls;
-}
-
-export function useHasBlockControls( group = 'default' ) {
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
-		warning( `Unknown BlockControls group "${ group }" provided.` );
-		return null;
-	}
-	return !! fills?.length;
-}
diff --git a/packages/block-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 349afa2c3563c0..f716f2d32a1d40 100644
--- a/packages/block-editor/src/components/block-draggable/style.scss
+++ b/packages/block-editor/src/components/block-draggable/style.scss
@@ -8,7 +8,7 @@
 .block-editor-block-draggable-chip {
 	background-color: $gray-900;
 	border-radius: $radius-small;
-	box-shadow: 0 6px 8px rgba($black, 0.3);
+	box-shadow: $elevation-small;
 	color: $white;
 	cursor: grabbing;
 	display: inline-flex;
@@ -77,6 +77,6 @@
 	.block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
 		background-color: $gray-700;
 		opacity: 1;
-		box-shadow: 0 4px 8px rgba($black, 0.2);
+		box-shadow: $elevation-small;
 	}
 }
diff --git a/packages/block-editor/src/components/block-heading-level-dropdown/index.js b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
index 71cb2ede989b5b..6b9bad09978a50 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
@@ -40,12 +40,18 @@ export default function HeadingLevelDropdown( {
 	value,
 	onChange,
 } ) {
+	const validOptions = options
+		.filter(
+			( option ) => option === 0 || HEADING_LEVELS.includes( option )
+		)
+		.sort( ( a, b ) => a - b ); // Sorts numerically in ascending order;
+
 	return (
 		<ToolbarDropdownMenu
 			popoverProps={ POPOVER_PROPS }
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
-			controls={ options.map( ( targetLevel ) => {
+			controls={ validOptions.map( ( targetLevel ) => {
 				const isActive = targetLevel === value;
 				return {
 					icon: <HeadingLevelIcon level={ targetLevel } />,
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index a18556f2fa5bd9..475d4f6a4b8c2e 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -40,83 +40,36 @@ function BlockStylesPanel( { clientId } ) {
 	);
 }
 
-function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const contentClientIds = useSelect(
-		( select ) => {
-			const {
-				getClientIdsOfDescendants,
-				getBlockName,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
-				( clientId ) =>
-					getBlockName( clientId ) !== 'core/list-item' &&
-					getBlockEditingMode( clientId ) === 'contentOnly'
-			);
-		},
-		[ topLevelLockedBlock ]
-	);
-	const hasBlockStyles = useSelect(
-		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
-			const { getBlockStyles } = select( blocksStore );
-			return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
-				?.length;
-		},
-		[ topLevelLockedBlock ]
-	);
-	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
-	return (
-		<div className="block-editor-block-inspector">
-			<BlockCard
-				{ ...blockInformation }
-				className={ blockInformation.isSynced && 'is-synced' }
-			/>
-			<BlockInfo.Slot />
-			{ hasBlockStyles && (
-				<BlockStylesPanel clientId={ topLevelLockedBlock } />
-			) }
-			{ contentClientIds.length > 0 && (
-				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation clientIds={ contentClientIds } />
-				</PanelBody>
-			) }
-		</div>
-	);
-}
-
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
-		topLevelLockedBlock,
+		isSectionBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
-			getContentLockingParent,
-			getTemplateLock,
+			getParentSectionBlock,
+			isSectionBlock: _isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
 		const _selectedBlockClientId = getSelectedBlockClientId();
+		const renderedBlockClientId =
+			getParentSectionBlock( _selectedBlockClientId ) ||
+			getSelectedBlockClientId();
 		const _selectedBlockName =
-			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
+			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
 			_selectedBlockName && getBlockType( _selectedBlockName );
 
 		return {
 			count: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
+			selectedBlockClientId: renderedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
-				_selectedBlockName === 'core/block'
-					? _selectedBlockClientId
-					: undefined ),
+			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 		};
 	}, [] );
 
@@ -136,7 +89,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		blockName: selectedBlockName,
 	} );
 
-	if ( count > 1 ) {
+	if ( count > 1 && ! isSectionBlock ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
@@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
-	if ( topLevelLockedBlock ) {
-		return (
-			<BlockInspectorLockedBlocks
-				topLevelLockedBlock={ topLevelLockedBlock }
-			/>
-		);
-	}
 
 	return (
 		<BlockInspectorSingleBlockWrapper
@@ -219,6 +165,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<BlockInspectorSingleBlock
 				clientId={ selectedBlockClientId }
 				blockName={ blockType.name }
+				isSectionBlock={ isSectionBlock }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -260,9 +207,13 @@ const AnimatedContainer = ( {
 	);
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+	clientId,
+	blockName,
+	isSectionBlock,
+} ) => {
 	const availableTabs = useInspectorControlsTabs( blockName );
-	const showTabs = availableTabs?.length > 1;
+	const showTabs = ! isSectionBlock && availableTabs?.length > 1;
 
 	const hasBlockStyles = useSelect(
 		( select ) => {
@@ -274,6 +225,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const contentClientIds = useSelect(
+		( select ) => {
+			// Avoid unnecessary subscription.
+			if ( ! isSectionBlock ) {
+				return;
+			}
+
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			return getClientIdsOfDescendants( clientId ).filter(
+				( current ) =>
+					getBlockName( current ) !== 'core/list-item' &&
+					getBlockEditingMode( current ) === 'contentOnly'
+			);
+		},
+		[ isSectionBlock, clientId ]
+	);
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -296,35 +267,48 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					{ hasBlockStyles && (
 						<BlockStylesPanel clientId={ clientId } />
 					) }
-					<InspectorControls.Slot />
-					<InspectorControls.Slot group="list" />
-					<InspectorControls.Slot
-						group="color"
-						label={ __( 'Color' ) }
-						className="color-block-support-panel__inner-wrapper"
-					/>
-					<InspectorControls.Slot
-						group="background"
-						label={ __( 'Background image' ) }
-					/>
-					<InspectorControls.Slot
-						group="typography"
-						label={ __( 'Typography' ) }
-					/>
-					<InspectorControls.Slot
-						group="dimensions"
-						label={ __( 'Dimensions' ) }
-					/>
-					<InspectorControls.Slot
-						group="border"
-						label={ borderPanelLabel }
-					/>
-					<InspectorControls.Slot group="styles" />
-					<PositionControls />
-					<InspectorControls.Slot group="bindings" />
-					<div>
-						<AdvancedControls />
-					</div>
+
+					{ contentClientIds && contentClientIds?.length > 0 && (
+						<PanelBody title={ __( 'Content' ) }>
+							<BlockQuickNavigation
+								clientIds={ contentClientIds }
+							/>
+						</PanelBody>
+					) }
+
+					{ ! isSectionBlock && (
+						<>
+							<InspectorControls.Slot />
+							<InspectorControls.Slot group="list" />
+							<InspectorControls.Slot
+								group="color"
+								label={ __( 'Color' ) }
+								className="color-block-support-panel__inner-wrapper"
+							/>
+							<InspectorControls.Slot
+								group="background"
+								label={ __( 'Background image' ) }
+							/>
+							<InspectorControls.Slot
+								group="typography"
+								label={ __( 'Typography' ) }
+							/>
+							<InspectorControls.Slot
+								group="dimensions"
+								label={ __( 'Dimensions' ) }
+							/>
+							<InspectorControls.Slot
+								group="border"
+								label={ borderPanelLabel }
+							/>
+							<InspectorControls.Slot group="styles" />
+							<PositionControls />
+							<InspectorControls.Slot group="bindings" />
+							<div>
+								<AdvancedControls />
+							</div>
+						</>
+					) }
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index bdbf3660d9619e..92a9a0dd03ab35 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -49,4 +49,6 @@
 
 .block-editor-block-inspector__tab-item {
 	flex: 1 1 0px;
+	display: flex;
+	justify-content: center;
 }
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index deda4e3b9d0897..2cecd941dfa3bb 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -25,6 +25,7 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 	store as blocksStore,
+	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -46,6 +47,8 @@ import { PrivateBlockContext } from './private-block-context';
 
 import { unlock } from '../../lock-unlock';
 
+const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
+
 /**
  * Merges wrapper props with special handling for classNames and styles.
  *
@@ -350,12 +353,48 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					removeBlock( _clientId );
 				} else {
 					registry.batch( () => {
+						const firstBlock = getBlock( firstClientId );
+						const isFirstBlockContentUnmodified =
+							isUnmodifiedBlockContent( firstBlock );
+						const defaultBlockName = getDefaultBlockName();
+						const replacement = switchToBlockType(
+							firstBlock,
+							defaultBlockName
+						);
+						const canTransformToDefaultBlock =
+							!! replacement?.length &&
+							replacement.every( ( block ) =>
+								canInsertBlockType( block.name, _clientId )
+							);
+
 						if (
+							isFirstBlockContentUnmodified &&
+							canTransformToDefaultBlock
+						) {
+							// Step 1: If the block is empty and can be transformed to the default block type.
+							replaceBlocks(
+								firstClientId,
+								replacement,
+								changeSelection
+							);
+						} else if (
+							isFirstBlockContentUnmodified &&
+							firstBlock.name === defaultBlockName
+						) {
+							// Step 2: If the block is empty and is already the default block type.
+							removeBlock( firstClientId );
+							const nextBlockClientId =
+								getNextBlockClientId( clientId );
+							if ( nextBlockClientId ) {
+								selectBlock( nextBlockClientId );
+							}
+						} else if (
 							canInsertBlockType(
-								getBlockName( firstClientId ),
+								firstBlock.name,
 								targetRootClientId
 							)
 						) {
+							// Step 3: If the block can be moved up.
 							moveBlocksToPosition(
 								[ firstClientId ],
 								_clientId,
@@ -363,21 +402,17 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const replacement = switchToBlockType(
-								getBlock( firstClientId ),
-								getDefaultBlockName()
-							);
-
-							if (
-								replacement &&
-								replacement.length &&
+							const canLiftAndTransformToDefaultBlock =
+								!! replacement?.length &&
 								replacement.every( ( block ) =>
 									canInsertBlockType(
 										block.name,
 										targetRootClientId
 									)
-								)
-							) {
+								);
+
+							if ( canLiftAndTransformToDefaultBlock ) {
+								// Step 4: If the block can be transformed to the default block type and moved up.
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -386,6 +421,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								);
 								removeBlock( firstClientId, false );
 							} else {
+								// Step 5: Continue the default behavior.
 								switchToDefaultOrRemove();
 							}
 						}
@@ -549,6 +585,7 @@ function BlockListBlockProvider( props ) {
 				getBlockMode,
 				isSelectionEnabled,
 				getTemplateLock,
+				isSectionBlock: _isSectionBlock,
 				getBlockWithoutAttributes,
 				getBlockAttributes,
 				canRemoveBlock,
@@ -571,8 +608,6 @@ function BlockListBlockProvider( props ) {
 				__unstableSelectionHasUnmergeableBlock,
 				isBlockBeingDragged,
 				isDragging,
-				hasBlockMovingClientId,
-				canInsertBlockType,
 				__unstableHasActiveBlockOverlayActive,
 				__unstableGetEditorMode,
 				getSelectedBlocksInitialCaretPosition,
@@ -632,7 +667,6 @@ function BlockListBlockProvider( props ) {
 				clientId,
 				checkDeep
 			);
-			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
 			const multiple = hasBlockSupport( blockName, 'multiple', true );
@@ -653,7 +687,7 @@ function BlockListBlockProvider( props ) {
 				mode: getBlockMode( clientId ),
 				isSelectionEnabled: isSelectionEnabled(),
 				isLocked: !! getTemplateLock( rootClientId ),
-				templateLock: getTemplateLock( clientId ),
+				isSectionBlock: _isSectionBlock( clientId ),
 				canRemove,
 				canMove,
 				isSelected: _isSelected,
@@ -681,11 +715,9 @@ function BlockListBlockProvider( props ) {
 				hasOverlay:
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
-				initialPosition:
-					_isSelected &&
-					( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
-						? getSelectedBlocksInitialCaretPosition()
-						: undefined,
+				initialPosition: _isSelected
+					? getSelectedBlocksInitialCaretPosition()
+					: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
 				isMultiSelected,
 				isPartiallySelected:
@@ -694,13 +726,6 @@ function BlockListBlockProvider( props ) {
 					! __unstableSelectionHasUnmergeableBlock(),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
-				isBlockMovingMode: !! movingClientId,
-				canInsertMovingBlock:
-					movingClientId &&
-					canInsertBlockType(
-						getBlockName( movingClientId ),
-						rootClientId
-					),
 				isEditingDisabled: blockEditingMode === 'disabled',
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
@@ -745,9 +770,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		className,
@@ -792,9 +815,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3f4b4c508aeb02..c5fda109d8b67d 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -80,7 +80,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 
@@ -92,34 +91,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		}
 	}
 
-	// Moving blocks using keyboard (Ellipsis > Move).
-	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-
-		&::after {
-			content: "";
-			position: absolute;
-			z-index: 0;
-			pointer-events: none;
-			transition:
-				border-color 0.1s linear,
-				border-style 0.1s linear,
-				box-shadow 0.1s linear;
-			right: 0;
-			left: 0;
-			top: -$default-block-margin * 0.5;
-			border-radius: $radius-small;
-			border-top: 4px solid $gray-400;
-			bottom: auto;
-			box-shadow: none;
-		}
-	}
-
-	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::after {
-			border-color: var(--wp-admin-theme-color);
-		}
-	}
-
 	// Ensure an accurate partial text selection.
 	// To do this, we disable text selection on the main container, then re-enable it only on the
 	// elements that actually get selected.
@@ -134,14 +105,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
-	// Should be invisible but not unfocusable.
-	opacity: 0;
-	font-size: 1px;
-	height: 1px;
-	padding: 0;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -223,19 +186,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		background-color: transparent;
 	}
 
-	// Reusable blocks clickthrough overlays.
-	&.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
-		// Remove only the top click overlay.
-		&::after {
-			display: none;
-		}
-
-		// Restore it for subsequent.
-		.block-editor-block-list__layout.has-overlay::after {
-			display: block;
-		}
-	}
-
 	// Reusable blocks parent border.
 	&.is-reusable.has-child-selected::after {
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
@@ -307,7 +257,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
 	animation-name: block-editor-is-editable__animation;
 	animation-duration: 0.8s;
 	animation-timing-function: ease-out;
@@ -461,6 +411,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	margin-left: -1px;
 	margin-right: -1px;
 	transition: background-color 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: $default-font-size;
+	font-family: $default-font;
+	color: $black;
+	font-weight: normal;
+
+	.is-zoomed-out & {
+		// Scale the font size based on the zoom level.
+		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+	}
 
 	&.is-dragged-over {
 		background: $gray-400;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ea6128f1534642..e2e019d4a9bf69 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -47,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isOutlineMode,
-		isFocusMode,
-		editorMode,
-		temporarilyEditingAsBlocks,
-	} = useSelect( ( select ) => {
-		const {
-			getSettings,
-			__unstableGetEditorMode,
-			getTemporarilyEditingAsBlocks,
-			isTyping,
-		} = unlock( select( blockEditorStore ) );
-		const { outlineMode, focusMode } = getSettings();
-		return {
-			isOutlineMode: outlineMode && ! isTyping(),
-			isFocusMode: focusMode,
-			editorMode: __unstableGetEditorMode(),
-			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
-		};
-	}, [] );
+	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+		useSelect( ( select ) => {
+			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+				unlock( select( blockEditorStore ) );
+			const { outlineMode, focusMode } = getSettings();
+			return {
+				isOutlineMode: outlineMode && ! isTyping(),
+				isFocusMode: focusMode,
+				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+			};
+		}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,7 +106,6 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings
@@ -192,7 +182,8 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
 
@@ -211,15 +202,16 @@ function Items( {
 				visibleBlocks: __unstableGetVisibleBlocks(),
 				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
 				shouldRenderAppender:
+					! isSectionBlock( rootClientId ) &&
+					getBlockEditingMode( rootClientId ) !== 'disabled' &&
+					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
 					__unstableGetEditorMode() !== 'zoom-out' &&
-					( hasCustomAppender
-						? ! getTemplateLock( rootClientId ) &&
-						  getBlockEditingMode( rootClientId ) !== 'disabled'
-						: rootClientId === selectedBlockClientId ||
-						  ( ! rootClientId &&
-								! selectedBlockClientId &&
-								! _order.length ) ),
+					( hasCustomAppender ||
+						rootClientId === selectedBlockClientId ||
+						( ! rootClientId &&
+							! selectedBlockClientId &&
+							! _order.length ) ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]
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 c3a279a618b5da..1cf1d4908b0768 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -25,7 +25,6 @@ import {
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useNavModeExit } from './use-nav-mode-exit';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
@@ -98,13 +97,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
-		templateLock,
+		isSectionBlock,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -116,7 +113,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useNavModeExit( clientId ),
 		useZoomOutModeExit( { editorMode } ),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
@@ -124,7 +120,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useDisabled( { isDisabled: ! hasOverlay } ),
 		useFlashEditableBlocks( {
 			clientId,
-			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
 	] );
@@ -182,8 +178,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'is-block-moving-mode': isBlockMovingMode,
-				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
index a6308f48005f9d..27f72d1a100d3e 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
@@ -68,7 +68,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
-			ownerDocument.defaultView.getSelection().removeAllRanges();
 			ref.current.focus();
 			return;
 		}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
deleted file mode 100644
index aa9c0a630c5bd7..00000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Allows navigation mode to be exited by clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
- */
-export function useNavModeExit( clientId ) {
-	const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
-	const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
-	return useRefEffect(
-		( node ) => {
-			function onMouseDown( event ) {
-				// Don't select a block if it's already handled by a child
-				// block.
-				if ( isNavigationMode() && ! event.defaultPrevented ) {
-					// Prevent focus from moving to the block.
-					event.preventDefault();
-
-					// When clicking on a selected block, exit navigation mode.
-					if ( isBlockSelected( clientId ) ) {
-						setNavigationMode( false );
-					} else {
-						selectBlock( clientId );
-					}
-				}
-			}
-
-			node.addEventListener( 'mousedown', onMouseDown );
-
-			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
-			};
-		},
-		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
index d0001bd3b33c68..92c54bac9b806d 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
@@ -16,14 +16,17 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useZoomOutModeExit( { editorMode } ) {
-	const { getSettings } = useSelect( blockEditorStore );
-	const { __unstableSetEditorMode } = unlock(
+	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
 	return useRefEffect(
 		( node ) => {
-			if ( editorMode !== 'zoom-out' ) {
+			// In "compose" mode.
+			const composeMode = editorMode === 'zoom-out' && isZoomOut();
+
+			if ( ! composeMode ) {
 				return;
 			}
 
@@ -39,6 +42,7 @@ export function useZoomOutModeExit( { editorMode } ) {
 						__experimentalSetIsInserterOpened( false );
 					}
 					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
 				}
 			}
 
diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index bb307816fd1501..2b76804785a576 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -31,7 +32,8 @@ export function useInBetweenInserter() {
 		getBlockEditingMode,
 		getBlockName,
 		getBlockAttributes,
-	} = useSelect( blockEditorStore );
+		getParentSectionBlock,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -133,7 +135,8 @@ export function useInBetweenInserter() {
 				const clientId = element.id.slice( 'block-'.length );
 				if (
 					! clientId ||
-					__unstableIsWithinBlockOverlay( clientId )
+					__unstableIsWithinBlockOverlay( clientId ) ||
+					!! getParentSectionBlock( clientId )
 				) {
 					return;
 				}
diff --git a/packages/block-editor/src/components/block-list/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index be5af549630607..9e0d087c2267cd 100644
--- a/packages/block-editor/src/components/block-list/zoom-out-separator.js
+++ b/packages/block-editor/src/components/block-list/zoom-out-separator.js
@@ -13,6 +13,7 @@ import {
 import { useReducedMotion } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -29,14 +30,16 @@ export function ZoomOutSeparator( {
 	const {
 		sectionRootClientId,
 		sectionClientIds,
-		blockInsertionPoint,
+		insertionPoint,
 		blockInsertionPointVisible,
+		blockInsertionPoint,
 	} = useSelect( ( select ) => {
 		const {
-			getBlockInsertionPoint,
+			getInsertionPoint,
 			getBlockOrder,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
+			isBlockInsertionPointVisible,
+			getBlockInsertionPoint,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -45,6 +48,7 @@ export function ZoomOutSeparator( {
 			sectionRootClientId: root,
 			sectionClientIds: sectionRootClientIds,
 			blockOrder: getBlockOrder( root ),
+			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 		};
@@ -67,17 +71,30 @@ export function ZoomOutSeparator( {
 		return null;
 	}
 
+	const hasTopInsertionPoint =
+		insertionPoint?.index === 0 &&
+		clientId === sectionClientIds[ insertionPoint.index ];
+	const hasBottomInsertionPoint =
+		insertionPoint &&
+		insertionPoint.hasOwnProperty( 'index' ) &&
+		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+	// We want to show the zoom out separator in either of these conditions:
+	// 1. If the inserter has an insertion index set
+	// 2. We are dragging a pattern over an insertion point
 	if ( position === 'top' ) {
 		isVisible =
-			blockInsertionPointVisible &&
-			blockInsertionPoint.index === 0 &&
-			clientId === sectionClientIds[ blockInsertionPoint.index ];
+			hasTopInsertionPoint ||
+			( blockInsertionPointVisible &&
+				blockInsertionPoint.index === 0 &&
+				clientId === sectionClientIds[ blockInsertionPoint.index ] );
 	}
 
 	if ( position === 'bottom' ) {
 		isVisible =
-			blockInsertionPointVisible &&
-			clientId === sectionClientIds[ blockInsertionPoint.index - 1 ];
+			hasBottomInsertionPoint ||
+			( blockInsertionPointVisible &&
+				clientId ===
+					sectionClientIds[ blockInsertionPoint.index - 1 ] );
 	}
 
 	return (
@@ -103,7 +120,19 @@ export function ZoomOutSeparator( {
 					data-is-insertion-point="true"
 					onDragOver={ () => setIsDraggedOver( true ) }
 					onDragLeave={ () => setIsDraggedOver( false ) }
-				></motion.div>
+				>
+					<motion.div
+						initial={ { opacity: 0 } }
+						animate={ { opacity: 1 } }
+						exit={ { opacity: 0 } }
+						transition={ {
+							type: 'tween',
+							duration: 0.1,
+						} }
+					>
+						{ __( 'Drop pattern.' ) }
+					</motion.div>
+				</motion.div>
 			) }
 		</AnimatePresence>
 	);
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
index 035a38604b0293..0bf8fd05320188 100644
--- a/packages/block-editor/src/components/block-navigation/dropdown.js
+++ b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -27,8 +27,7 @@ function BlockNavigationDropdownToggle( {
 } ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			ref={ innerRef }
 			icon={ listView }
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 80b314eeb42e5c..9090de42f8b7d7 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -23,24 +24,26 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { firstParentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId, isVisible } = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
 			getBlockEditingMode,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
-		const _firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _firstParentClientId );
+		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _parentClientId );
 		const _parentBlockType = getBlockType( parentBlockName );
 		return {
-			firstParentClientId: _firstParentClientId,
+			parentClientId: _parentClientId,
 			isVisible:
-				_firstParentClientId &&
-				getBlockEditingMode( _firstParentClientId ) === 'default' &&
+				_parentClientId &&
+				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					_parentBlockType,
 					'__experimentalParentSelector',
@@ -48,7 +51,7 @@ export default function BlockParentSelector() {
 				),
 		};
 	}, [] );
-	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -65,13 +68,13 @@ export default function BlockParentSelector() {
 	return (
 		<div
 			className="block-editor-block-parent-selector"
-			key={ firstParentClientId }
+			key={ parentClientId }
 			ref={ nodeRef }
 			{ ...showHoveredOrFocusedGestures }
 		>
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"
-				onClick={ () => selectBlock( firstParentClientId ) }
+				onClick={ () => selectBlock( parentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select parent block: %s' ),
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index c551c2e1632bcf..d571e0fef5dcc3 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -18,8 +18,7 @@ import { VIEWMODES } from './constants';
 const Actions = ( { onBlockPatternSelect } ) => (
 	<div className="block-editor-block-pattern-setup__actions">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="primary"
 			onClick={ onBlockPatternSelect }
 		>
@@ -36,8 +35,7 @@ const CarouselNavigation = ( {
 } ) => (
 	<div className="block-editor-block-pattern-setup__navigation">
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="compact"
 			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
@@ -45,8 +43,7 @@ const CarouselNavigation = ( {
 			accessibleWhenDisabled
 		/>
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="compact"
 			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
@@ -69,16 +66,14 @@ const SetupToolbar = ( {
 	const displayControls = (
 		<div className="block-editor-block-pattern-setup__display-controls">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="compact"
 				icon={ stretchFullWidth }
 				label={ __( 'Carousel view' ) }
 				onClick={ () => setViewMode( VIEWMODES.carousel ) }
 				isPressed={ isCarouselView }
 			/>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="compact"
 				icon={ grid }
 				label={ __( 'Grid view' ) }
 				onClick={ () => setViewMode( VIEWMODES.grid ) }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index ce1fa8b93df735..e4d7ce49b90f3e 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -38,24 +38,24 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-previous"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'First page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>«</span>
 						</Button>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage - 1 ) }
 							disabled={ currentPage === 1 }
 							aria-label={ __( 'Previous page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>‹</span>
 						</Button>
@@ -74,13 +74,13 @@ export default function Pagination( {
 						className="block-editor-patterns__grid-pagination-next"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
 							variant="tertiary"
 							onClick={ () => changePage( currentPage + 1 ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Next page' ) }
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>›</span>
 						</Button>
@@ -89,8 +89,9 @@ export default function Pagination( {
 							onClick={ () => changePage( numPages ) }
 							disabled={ currentPage === numPages }
 							aria-label={ __( 'Last page' ) }
-							size="default"
+							size="compact"
 							accessibleWhenDisabled
+							className="block-editor-patterns__grid-pagination-button"
 						>
 							<span>»</span>
 						</Button>
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
index f5f34d821233aa..85d39f9a36577c 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -4,37 +4,20 @@
 		border-top: 1px solid $gray-800;
 		padding: $grid-unit-05;
 		justify-content: center;
-		.components-button.is-tertiary {
-			width: auto;
-			height: $button-size-compact;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				color: $white;
-				background-color: $gray-700;
-			}
-		}
 	}
 }
 
 .show-icon-labels {
-	.block-editor-patterns__grid-pagination {
-		.components-button {
-			width: auto;
-			// Hide the button icons when labels are set to display...
-			span {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+	.block-editor-patterns__grid-pagination-button {
+		width: auto;
+		// Hide the button icons when labels are set to display...
+		span {
+			display: none;
+		}
+		// ... and display labels.
+		// Uses ::before as ::after is already used for active tab styling.
+		&::before {
+			content: attr(aria-label);
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 4f22c2a266722d..fdb3475b3e180f 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -59,8 +59,7 @@ function BlockQuickNavigationItem( { clientId, onSelect } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			isPressed={ isSelected }
 			onClick={ async () => {
 				await selectBlock( clientId );
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 39063db4f52e02..4ebce4172e9b37 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -4,12 +4,9 @@
 import {
 	createSlotFill,
 	MenuGroup,
-	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove &&
-							! fillProps?.onlyBlock &&
-							! isContentOnly && (
-								<MenuItem
-									onClick={ pipe(
-										fillProps?.onClose,
-										fillProps?.onMoveTo
-									) }
-								>
-									{ __( 'Move to' ) }
-								</MenuItem>
-							) }
 						{ selectedClientIds.length === 1 && (
 							<ModifyContentLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
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 069bd2c9ff1ee4..ac2b99ac2bb620 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -58,7 +58,6 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
-		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
@@ -67,7 +66,6 @@ export function BlockSettingsDropdown( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
 					( getActiveBlockVariation(
@@ -186,6 +183,9 @@ export function BlockSettingsDropdown( {
 		}
 	}
 
+	const shouldShowBlockParentMenuItem =
+		! parentBlockIsSelected && !! firstParentClientId;
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -195,7 +195,6 @@ export function BlockSettingsDropdown( {
 				canCopyStyles,
 				canDuplicate,
 				canInsertBlock,
-				canMove,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
@@ -203,26 +202,39 @@ export function BlockSettingsDropdown( {
 				onRemove,
 				onCopy,
 				onPasteStyles,
-				onMoveTo,
-			} ) => (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'Options' ) }
-					className="block-editor-block-settings-menu"
-					popoverProps={ POPOVER_PROPS }
-					open={ open }
-					onToggle={ onToggle }
-					noIcons
-					{ ...props }
-				>
-					{ ( { onClose } ) => (
-						<>
-							<MenuGroup>
-								<__unstableBlockSettingsMenuFirstItem.Slot
-									fillProps={ { onClose } }
-								/>
-								{ ! parentBlockIsSelected &&
-									!! firstParentClientId && (
+			} ) => {
+				// It is possible that some plugins register fills for this menu
+				// even if Core doesn't render anything in the block settings menu.
+				// in which case, we may want to render the menu anyway.
+				// That said for now, we can start more conservative.
+				const isEmpty =
+					! canRemove &&
+					! canDuplicate &&
+					! canInsertBlock &&
+					isContentOnly;
+
+				if ( isEmpty ) {
+					return null;
+				}
+
+				return (
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Options' ) }
+						className="block-editor-block-settings-menu"
+						popoverProps={ POPOVER_PROPS }
+						open={ open }
+						onToggle={ onToggle }
+						noIcons
+						{ ...props }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuGroup>
+									<__unstableBlockSettingsMenuFirstItem.Slot
+										fillProps={ { onClose } }
+									/>
+									{ shouldShowBlockParentMenuItem && (
 										<BlockParentSelectorMenuItem
 											parentClientId={
 												firstParentClientId
@@ -230,101 +242,103 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-								{ count === 1 && (
-									<BlockHTMLConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
-								{ ! isContentOnly && (
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										shortcut={ displayShortcut.primary(
-											'c'
-										) }
-									/>
-								) }
-								{ canDuplicate && (
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onDuplicate,
-											updateSelectionAfterDuplicate
-										) }
-										shortcut={ shortcuts.duplicate }
-									>
-										{ __( 'Duplicate' ) }
-									</MenuItem>
-								) }
-								{ canInsertBlock && ! isContentOnly && (
-									<>
+									{ count === 1 && (
+										<BlockHTMLConvertButton
+											clientId={ firstBlockClientId }
+										/>
+									) }
+									{ ! isContentOnly && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ displayShortcut.primary(
+												'c'
+											) }
+										/>
+									) }
+									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertBefore
+												onDuplicate,
+												updateSelectionAfterDuplicate
 											) }
-											shortcut={ shortcuts.insertBefore }
+											shortcut={ shortcuts.duplicate }
 										>
-											{ __( 'Add before' ) }
+											{ __( 'Duplicate' ) }
+										</MenuItem>
+									) }
+									{ canInsertBlock && ! isContentOnly && (
+										<>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertBefore
+												) }
+												shortcut={
+													shortcuts.insertBefore
+												}
+											>
+												{ __( 'Add before' ) }
+											</MenuItem>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertAfter
+												) }
+												shortcut={
+													shortcuts.insertAfter
+												}
+											>
+												{ __( 'Add after' ) }
+											</MenuItem>
+										</>
+									) }
+								</MenuGroup>
+								{ canCopyStyles && ! isContentOnly && (
+									<MenuGroup>
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											label={ __( 'Copy styles' ) }
+										/>
+										<MenuItem onClick={ onPasteStyles }>
+											{ __( 'Paste styles' ) }
 										</MenuItem>
+									</MenuGroup>
+								) }
+								<BlockSettingsMenuControls.Slot
+									fillProps={ {
+										onClose,
+										count,
+										firstBlockClientId,
+									} }
+									clientIds={ clientIds }
+								/>
+								{ typeof children === 'function'
+									? children( { onClose } )
+									: Children.map( ( child ) =>
+											cloneElement( child, { onClose } )
+									  ) }
+								{ canRemove && (
+									<MenuGroup>
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertAfter
+												onRemove,
+												updateSelectionAfterRemove
 											) }
-											shortcut={ shortcuts.insertAfter }
+											shortcut={ shortcuts.remove }
 										>
-											{ __( 'Add after' ) }
+											{ __( 'Delete' ) }
 										</MenuItem>
-									</>
+									</MenuGroup>
 								) }
-							</MenuGroup>
-							{ canCopyStyles && ! isContentOnly && (
-								<MenuGroup>
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										label={ __( 'Copy styles' ) }
-									/>
-									<MenuItem onClick={ onPasteStyles }>
-										{ __( 'Paste styles' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-							<BlockSettingsMenuControls.Slot
-								fillProps={ {
-									onClose,
-									canMove,
-									onMoveTo,
-									onlyBlock,
-									count,
-									firstBlockClientId,
-								} }
-								clientIds={ clientIds }
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
-							{ canRemove && (
-								<MenuGroup>
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onRemove,
-											updateSelectionAfterRemove
-										) }
-										shortcut={ shortcuts.remove }
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</>
-					) }
-				</DropdownMenu>
-			) }
+							</>
+						) }
+					</DropdownMenu>
+				);
+			} }
 		</BlockActions>
 	);
 }
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 98e7f7b2d21420..79f33bd30d7537 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -35,36 +35,40 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
-	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks } = useSelect(
-		( select ) => {
-			const {
-				getBlocksByClientId,
-				getBlockRootClientId,
-				getBlockTransformItems,
-				__experimentalGetPatternTransformItems,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const _blocks = getBlocksByClientId( clientIds );
-			return {
-				blocks: _blocks,
-				possibleBlockTransformations: getBlockTransformItems(
-					_blocks,
-					rootClientId
-				),
-				patterns: __experimentalGetPatternTransformItems(
-					_blocks,
-					rootClientId
-				),
-			};
-		},
-		[ clientIds ]
-	);
+	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockAttributes,
+					getBlocksByClientId,
+					getBlockRootClientId,
+					getBlockTransformItems,
+					__experimentalGetPatternTransformItems,
+				} = select( blockEditorStore );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+				const _blocks = getBlocksByClientId( clientIds );
+				return {
+					blocks: _blocks,
+					possibleBlockTransformations: getBlockTransformItems(
+						_blocks,
+						rootClientId
+					),
+					patterns: __experimentalGetPatternTransformItems(
+						_blocks,
+						rootClientId
+					),
+					isUsingBindings: clientIds.every(
+						( clientId ) =>
+							!! getBlockAttributes( clientId )?.metadata
+								?.bindings
+					),
+				};
+			},
+			[ clientIds ]
+		);
 	const blockVariationTransformations = useBlockVariationTransforms( {
 		clientIds,
 		blocks,
@@ -196,7 +200,7 @@ const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
 	</>
 );
 
-export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
+export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
 		canRemove,
@@ -205,6 +209,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		invalidBlocks,
 		isReusable,
 		isTemplate,
+		isDisabled,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -212,6 +217,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				getBlocksByClientId,
 				getBlockAttributes,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -222,6 +228,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
+			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
 
 			let _icon;
 			let _hasTemplateLock;
@@ -256,6 +263,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				isTemplate:
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
+				isDisabled: editingMode !== 'default',
 			};
 		},
 		[ clientIds ]
@@ -275,7 +283,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		: __( 'Multiple blocks selected' );
 
 	const hideDropdown =
-		disabled ||
+		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
 		hasContentOnlyLocking;
 
@@ -339,7 +347,6 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
-								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>
diff --git a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
index 05ce545667d464..4d63c763174791 100644
--- a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
+++ b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save() {},
diff --git a/packages/block-editor/src/components/block-switcher/test/utils.js b/packages/block-editor/src/components/block-switcher/test/utils.js
index 38009601e16468..eafe5e8a4d9378 100644
--- a/packages/block-editor/src/components/block-switcher/test/utils.js
+++ b/packages/block-editor/src/components/block-switcher/test/utils.js
@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
 					},
 					content: {
 						type: 'boolean',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					level: {
 						type: 'number',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					color: {
 						type: 'string',
-						__experimentalRole: 'other',
+						role: 'other',
 					},
 				},
 				save() {},
diff --git a/packages/block-editor/src/components/block-switcher/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
index ebd95fc460e33e..49257a2126cbe5 100644
--- a/packages/block-editor/src/components/block-switcher/utils.js
+++ b/packages/block-editor/src/components/block-switcher/utils.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 6c4789cb2924f2..2ac2cbb12ff352 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -58,7 +59,6 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
-		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
@@ -78,12 +78,14 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
-		const firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( firstParentClientId );
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
 		const _isDefaultEditingMode = editingMode === 'default';
@@ -112,21 +114,19 @@ export function PrivateBlockToolbar( {
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
-			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
+			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
 				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,
 					'__experimentalParentSelector',
 					true
 				) &&
-				selectedBlockClientIds.length === 1 &&
-				_isDefaultEditingMode,
+				selectedBlockClientIds.length === 1,
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
@@ -179,36 +179,26 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar && isDefaultEditingMode && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+								<BlockMover
 									clientIds={ blockClientIds }
-									disabled={ ! isDefaultEditingMode }
-									isUsingBindings={ isUsingBindings }
+									hideDragHandle={ hideDragHandle }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
-								) }
 							</ToolbarGroup>
 						</div>
 					) }
@@ -242,9 +232,7 @@ export function PrivateBlockToolbar( {
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />
-				{ isDefaultEditingMode && (
-					<BlockSettingsMenu clientIds={ blockClientIds } />
-				) }
+				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
 		</NavigableToolbar>
 	);
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 40d748dd0a1568..ae03eeed1a817c 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -37,6 +37,13 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-connected {
+		.block-editor-block-switcher .components-button::before {
+			background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+			border-radius: $radius-small;
+		}
+	}
+
 	&.is-synced,
 	&.is-connected {
 		.block-editor-block-switcher .components-button .block-editor-block-icon {
@@ -52,9 +59,18 @@
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
 .block-editor-block-contextual-toolbar {
diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
index c4e228f8a3c07b..80ce3691147834 100644
--- a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
+++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
@@ -7,7 +7,6 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 /**
  * Returns true if the block toolbar should be shown.
@@ -15,40 +14,29 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
 
-			// we only care about the 1st selected block
-			// for the toolbar, so we use getBlockSelectionStart
-			// instead of getSelectedBlockClientIds
-			const selectedBlockClientId = getBlockSelectionStart();
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
 
-			const blockType =
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
-	const hasAnyBlockControls = useHasAnyBlockControls();
-
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || isBlockDisabled ) {
 		return false;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
deleted file mode 100644
index 9c6c22181ef2ac..00000000000000
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef, useEffect } from '@wordpress/element';
-import {
-	BACKSPACE,
-	DELETE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	TAB,
-	ESCAPE,
-	ENTER,
-	SPACE,
-} from '@wordpress/keycodes';
-import {
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-	store as blocksStore,
-} from '@wordpress/blocks';
-import { speak } from '@wordpress/a11y';
-import { focus } from '@wordpress/dom';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockTitle from '../block-title';
-import BlockIcon from '../block-icon';
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
-
-/**
- * Block selection button component, displaying the label of the block. If the block
- * descends from a root block, a button is displayed enabling the user to select
- * the root block.
- *
- * @param {string} props          Component props.
- * @param {string} props.clientId Client ID of block.
- * @param {Object} ref            Reference to the component.
- *
- * @return {Component} The component to be rendered.
- */
-function BlockSelectionButton( { clientId, rootClientId }, ref ) {
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getBlockIndex,
-				hasBlockMovingClientId,
-				getBlockListSettings,
-				__unstableGetEditorMode,
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-				canMoveBlock,
-			} = select( blockEditorStore );
-			const { getActiveBlockVariation, getBlockType } =
-				select( blocksStore );
-			const index = getBlockIndex( clientId );
-			const { name, attributes } = getBlock( clientId );
-			const blockType = getBlockType( name );
-			const orientation =
-				getBlockListSettings( rootClientId )?.orientation;
-			const match = getActiveBlockVariation( name, attributes );
-
-			return {
-				blockMovingMode: hasBlockMovingClientId(),
-				editorMode: __unstableGetEditorMode(),
-				icon: match?.icon || blockType.icon,
-				label: getAccessibleBlockLabel(
-					blockType,
-					attributes,
-					index + 1,
-					orientation
-				),
-				canMove: canMoveBlock( clientId, rootClientId ),
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-			};
-		},
-		[ clientId, rootClientId ]
-	);
-	const { label, icon, blockMovingMode, editorMode, canMove } = selected;
-	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-
-	// Focus the breadcrumb in navigation mode.
-	useEffect( () => {
-		if ( editorMode === 'navigation' ) {
-			ref.current.focus();
-			speak( label );
-		}
-	}, [ label, editorMode ] );
-	const blockElement = useBlockElement( clientId );
-
-	const {
-		hasBlockMovingClientId,
-		getBlockIndex,
-		getBlockRootClientId,
-		getClientIdsOfDescendants,
-		getSelectedBlockClientId,
-		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-	} = useSelect( blockEditorStore );
-	const {
-		selectBlock,
-		clearSelectedBlock,
-		setBlockMovingClientId,
-		moveBlockToPosition,
-	} = useDispatch( blockEditorStore );
-
-	function onKeyDown( event ) {
-		const { keyCode } = event;
-		const isUp = keyCode === UP;
-		const isDown = keyCode === DOWN;
-		const isLeft = keyCode === LEFT;
-		const isRight = keyCode === RIGHT;
-		const isTab = keyCode === TAB;
-		const isEscape = keyCode === ESCAPE;
-		const isEnter = keyCode === ENTER;
-		const isSpace = keyCode === SPACE;
-		const isShift = event.shiftKey;
-
-		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
-			removeBlock( clientId );
-			event.preventDefault();
-			return;
-		}
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const selectionEndClientId = getMultiSelectedBlocksEndClientId();
-		const selectionBeforeEndClientId = getPreviousBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-		const selectionAfterEndClientId = getNextBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-
-		const navigateUp = ( isTab && isShift ) || isUp;
-		const navigateDown = ( isTab && ! isShift ) || isDown;
-		// Move out of current nesting level (no effect if at root level).
-		const navigateOut = isLeft;
-		// Move into next nesting level (no effect if the current block has no innerBlocks).
-		const navigateIn = isRight;
-
-		let focusedBlockUid;
-		if ( navigateUp ) {
-			focusedBlockUid = selectionBeforeEndClientId;
-		} else if ( navigateDown ) {
-			focusedBlockUid = selectionAfterEndClientId;
-		} else if ( navigateOut ) {
-			focusedBlockUid =
-				getBlockRootClientId( selectedBlockClientId ) ??
-				selectedBlockClientId;
-		} else if ( navigateIn ) {
-			focusedBlockUid =
-				getClientIdsOfDescendants( selectedBlockClientId )[ 0 ] ??
-				selectedBlockClientId;
-		}
-		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
-			setBlockMovingClientId( null );
-			event.preventDefault();
-		}
-		if ( ( isEnter || isSpace ) && startingBlockClientId ) {
-			const sourceRoot = getBlockRootClientId( startingBlockClientId );
-			const destRoot = getBlockRootClientId( selectedBlockClientId );
-			const sourceBlockIndex = getBlockIndex( startingBlockClientId );
-			let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
-			if (
-				sourceBlockIndex < destinationBlockIndex &&
-				sourceRoot === destRoot
-			) {
-				destinationBlockIndex -= 1;
-			}
-			moveBlockToPosition(
-				startingBlockClientId,
-				sourceRoot,
-				destRoot,
-				destinationBlockIndex
-			);
-			selectBlock( startingBlockClientId );
-			setBlockMovingClientId( null );
-		}
-		// Prevent the block from being moved into itself.
-		if (
-			startingBlockClientId &&
-			selectedBlockClientId === startingBlockClientId &&
-			navigateIn
-		) {
-			return;
-		}
-		if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
-			if ( focusedBlockUid ) {
-				event.preventDefault();
-				selectBlock( focusedBlockUid );
-			} else if ( isTab && selectedBlockClientId ) {
-				let nextTabbable;
-
-				if ( navigateDown ) {
-					nextTabbable = blockElement;
-					do {
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					} while (
-						nextTabbable &&
-						blockElement.contains( nextTabbable )
-					);
-
-					if ( ! nextTabbable ) {
-						nextTabbable =
-							blockElement.ownerDocument.defaultView.frameElement;
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					}
-				} else {
-					nextTabbable = focus.tabbable.findPrevious( blockElement );
-				}
-
-				if ( nextTabbable ) {
-					event.preventDefault();
-					nextTabbable.focus();
-					clearSelectedBlock();
-				}
-			}
-		}
-	}
-
-	const classNames = clsx(
-		'block-editor-block-list__block-selection-button',
-		{
-			'is-block-moving-mode': !! blockMovingMode,
-		}
-	);
-
-	const dragHandleLabel = __( 'Drag' );
-	const showBlockDraggable = canMove && editorMode === 'navigation';
-
-	return (
-		<div className={ classNames }>
-			<Flex
-				justify="center"
-				className="block-editor-block-list__block-selection-button__content"
-			>
-				<FlexItem>
-					<BlockIcon icon={ icon } showColors />
-				</FlexItem>
-				{ showBlockDraggable && (
-					<FlexItem>
-						<BlockDraggable clientIds={ [ clientId ] }>
-							{ ( draggableProps ) => (
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									icon={ dragHandle }
-									className="block-selection-button_drag-handle"
-									label={ dragHandleLabel }
-									// Should not be able to tab to drag handle as this
-									// button can only be used with a pointer device.
-									tabIndex="-1"
-									{ ...draggableProps }
-								/>
-							) }
-						</BlockDraggable>
-					</FlexItem>
-				) }
-				{ editorMode === 'navigation' && (
-					<FlexItem>
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							ref={ ref }
-							onClick={
-								editorMode === 'navigation'
-									? () => setNavigationMode( false )
-									: undefined
-							}
-							onKeyDown={ onKeyDown }
-							label={ label }
-							showTooltip={ false }
-							className="block-selection-button_select-button"
-						>
-							<BlockTitle
-								clientId={ clientId }
-								maximumLength={ 35 }
-							/>
-						</Button>
-					</FlexItem>
-				) }
-			</Flex>
-		</div>
-	);
-}
-
-export default forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
deleted file mode 100644
index ae03bdb4f51647..00000000000000
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import { PrivateBlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-
-function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	return (
-		<PrivateBlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ clsx( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			<BlockSelectionButton
-				ref={ ref }
-				clientId={ clientId }
-				rootClientId={ rootClientId }
-			/>
-		</PrivateBlockPopover>
-	);
-}
-
-export default forwardRef( BlockToolbarBreadcrumb );
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 24f60dbbf970aa..099323925384b8 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
 	default as InsertionPoint,
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
-import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
@@ -78,7 +77,6 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
-		showBreadcrumb,
 		showBlockToolbarPopover,
 		showZoomOutToolbar,
 	} = useShowBlockTools();
@@ -223,14 +221,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBreadcrumb && (
-					<BlockToolbarBreadcrumb
-						ref={ blockSelectionButtonRef }
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ showZoomOutToolbar && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index 469f7e53908cb4..891a32eaa5dc9c 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -37,7 +37,6 @@ function InbetweenInsertionPointPopover( {
 		rootClientId,
 		isInserterShown,
 		isDistractionFree,
-		isNavigationMode,
 		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
@@ -48,7 +47,6 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			isNavigationMode: _isNavigationMode,
 			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
@@ -78,7 +76,6 @@ function InbetweenInsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
-			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
@@ -144,7 +141,7 @@ function InbetweenInsertionPointPopover( {
 		},
 	};
 
-	if ( isDistractionFree && ! isNavigationMode ) {
+	if ( isDistractionFree ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 9f1325d7f95a1a..b7586a6715dcc6 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -84,84 +84,6 @@
 	}
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-
-.block-editor-block-list__block-selection-button {
-	display: inline-flex;
-	padding: 0 $grid-unit-15;
-	z-index: z-index(".block-editor-block-list__block-selection-button");
-
-	// Dark block UI appearance.
-	border-radius: $radius-small;
-	background-color: $gray-900;
-
-	font-size: $default-font-size;
-	height: $block-toolbar-height;
-
-	.block-editor-block-list__block-selection-button__content {
-		margin: auto;
-		display: inline-flex;
-		align-items: center;
-
-		> .components-flex__item {
-			margin-right: $grid-unit-15 * 0.5;
-		}
-	}
-	.components-button.has-icon.block-selection-button_drag-handle {
-		cursor: grab;
-		padding: 0;
-		height: $grid-unit-30;
-		min-width: $grid-unit-30;
-		margin-left: -2px;
-
-		// Drag handle is smaller than the others.
-		svg {
-			min-width: 18px;
-			min-height: 18px;
-		}
-	}
-
-	.block-editor-block-icon {
-		font-size: $default-font-size;
-		color: $white;
-		height: $block-toolbar-height;
-	}
-
-	// The button here has a special style to appear as a toolbar.
-	.components-button {
-		min-width: $button-size;
-		color: $white;
-		height: $block-toolbar-height;
-
-		// When button is focused, it receives a box-shadow instead of the border.
-		&:focus {
-			box-shadow: none;
-			border: none;
-		}
-
-		&:active {
-			color: $white;
-		}
-
-		// Make sure the button has no hover style when it's disabled.
-		&[aria-disabled="true"]:hover {
-			color: $white;
-		}
-
-		display: flex;
-	}
-	.block-selection-button_select-button.components-button {
-		padding: 0;
-	}
-
-	.block-editor-block-mover {
-		background: unset;
-		border: none;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -178,14 +100,10 @@
 .components-popover.block-editor-block-list__block-popover {
 
 	// Position the block toolbar.
-	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
 		pointer-events: all;
 		margin-top: $grid-unit-10;
 		margin-bottom: $grid-unit-10;
-	}
-
-	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
 		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
@@ -284,11 +202,3 @@
 		border: none;
 	}
 }
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
-}
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 07e0ebd16a64b0..02a8f0583bcddf 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -22,7 +22,6 @@ export function useShowBlockTools() {
 			getBlock,
 			getBlockMode,
 			getSettings,
-			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
 		} = select( blockEditorStore );
@@ -42,29 +41,20 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const maybeShowBreadcrumb =
-			hasSelectedBlock &&
-			! hasMultiSelection() &&
-			editorMode === 'navigation';
-
 		const isZoomOut = editorMode === 'zoom-out';
 		const _showZoomOutToolbar =
 			isZoomOut &&
 			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter &&
-			! maybeShowBreadcrumb;
+			! _showEmptyBlockSideInserter;
 		const _showBlockToolbarPopover =
 			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb;
+			! isEmptyDefaultBlock;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-			showBreadcrumb:
-				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
 			showZoomOutToolbar: _showZoomOutToolbar,
 		};
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
index 8ea80a53830135..961552caa66e01 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js
@@ -6,17 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-function ZoomOutModeInserterButton( { isVisible, onClick } ) {
-	const [
-		zoomOutModeInserterButtonHovered,
-		setZoomOutModeInserterButtonHovered,
-	] = useState( false );
-
+function ZoomOutModeInserterButton( { onClick } ) {
 	return (
 		<Button
 			variant="primary"
@@ -24,18 +18,9 @@ function ZoomOutModeInserterButton( { isVisible, onClick } ) {
 			size="compact"
 			className={ clsx(
 				'block-editor-button-pattern-inserter__button',
-				'block-editor-block-tools__zoom-out-mode-inserter-button',
-				{
-					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
-				}
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			onMouseOver={ () => {
-				setZoomOutModeInserterButtonHovered( true );
-			} }
-			onMouseOut={ () => {
-				setZoomOutModeInserterButtonHovered( false );
-			} }
 			label={ _x(
 				'Add pattern',
 				'Generic label for pattern inserter button'
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 79f8be3f9cfe97..c279cb36782028 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
@@ -16,41 +16,39 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
+		insertionPoint,
 		blockOrder,
 		blockInsertionPointVisible,
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
-			getBlockInsertionPoint,
+			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
-			isBlockInsertionPointVisible,
 			getSectionRootClientId,
+			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
 
 		return {
 			hasSelection: !! getSelectionStart().clientId,
-			blockInsertionPoint: getBlockInsertionPoint(),
+			insertionPoint: getInsertionPoint(),
 			blockOrder: getBlockOrder( root ),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
-	const { showInsertionPoint } = useDispatch( blockEditorStore );
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { showInsertionPoint } = unlock( useDispatch( blockEditorStore ) );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
@@ -62,25 +60,20 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+			blockInsertionPointVisible && insertionPoint?.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
 
 		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
+			selectedBlockClientId === previousClientId ||
+			selectedBlockClientId === nextClientId;
 
 		return (
 			<BlockPopoverInbetween
@@ -88,9 +81,8 @@ function ZoomOutModeInserters() {
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ ! shouldRenderInsertionPoint && (
+				{ ! shouldRenderInsertionPoint && isSelected && (
 					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index a3c46c4b4c970a..b8736de11481a0 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -20,13 +15,13 @@ import BlockDraggable from '../block-draggable';
 import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
+import { unlock } from '../../lock-unlock';
 
 export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
 				getBlock,
-				hasBlockMovingClientId,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
 				canRemoveBlock,
@@ -62,7 +57,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 			}
 
 			return {
-				blockMovingMode: hasBlockMovingClientId(),
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
@@ -75,7 +69,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	);
 
 	const {
-		blockMovingMode,
 		isBlockTemplatePart,
 		isNextBlockTemplatePart,
 		isPrevBlockTemplatePart,
@@ -84,18 +77,15 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		setIsInserterOpened,
 	} = selected;
 
-	const { removeBlock, __unstableSetEditorMode } =
-		useDispatch( blockEditorStore );
-
-	const classNames = clsx( 'zoom-out-toolbar', {
-		'is-block-moving-mode': !! blockMovingMode,
-	} );
+	const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	const showBlockDraggable = canMove && ! isBlockTemplatePart;
 
 	return (
 		<NavigableToolbar
-			className={ classNames }
+			className="zoom-out-toolbar"
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
@@ -144,6 +134,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 							setIsInserterOpened( false );
 						}
 						__unstableSetEditorMode( 'edit' );
+						resetZoomLevel();
 						__unstableContentRef.current?.focus();
 					} }
 				/>
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 ecdf8b23bec3fe..f3687a305e84fd 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -64,8 +64,7 @@ function BlockVariationPicker( {
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => onSelect() }
 					>
diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index 97a3f980541842..5850fc52b37b68 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -21,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function VariationsButtons( {
 	className,
@@ -35,8 +36,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
+					size="compact"
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
@@ -140,19 +141,28 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations } = useSelect(
+	const { activeBlockVariation, variations, isContentOnly } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const { getBlockName, getBlockAttributes } =
+
+			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
 				select( blockEditorStore );
+
 			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
 			return {
 				activeBlockVariation: getActiveBlockVariation(
 					name,
 					getBlockAttributes( blockClientId )
 				),
 				variations: name && getBlockVariations( name, 'transform' ),
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
 			};
 		},
 		[ blockClientId ]
@@ -181,8 +191,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	// Skip rendering if there are no variations
-	if ( ! variations?.length ) {
+	if ( ! variations?.length || isContentOnly ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss
index e462278c07c104..f5486d3f6f6086 100644
--- a/packages/block-editor/src/components/button-block-appender/content.scss
+++ b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -8,11 +8,6 @@
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
-	// Needs specificity to override button styles.
-	&.components-button.components-button {
-		padding: $grid-unit-15;
-	}
-
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
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 c4a6854c6d6cc4..53b15e2fd2cfdd 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -60,8 +60,7 @@ function ButtonBlockAppender(
 
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index d3cf59a2a5e6e6..71b27c06e7ccfc 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -88,11 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }
diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
index 63965f509ba534..57697f595cc800 100644
--- a/packages/block-editor/src/components/font-family/README.md
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -1,5 +1,9 @@
 # FontFamilyControl
 
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
 FontFamilyControl is a React component that renders a UI that allows users to select a font family.
 The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
 Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
@@ -10,7 +14,7 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
 
 ```jsx
 import { useState } from 'react';
-import { FontFamilyControl } from '@wordpress/block-editor';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 // ...
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 cc7a464f8634a9..aea8e67f5b5944 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalBorderBoxControl as BorderBoxControl,
+	BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
 	__experimentalIsDefinedBorder as isDefinedBorder,
 	__experimentalToolsPanel as ToolsPanel,
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 87c19adedbb27b..a55a7b331bd0dd 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -239,11 +239,7 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							{ ...toggleProps }
-						>
+						<Button __next40pxDefaultSize { ...toggleProps }>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
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 ce508a5ebc89e5..4c52de6a3d7d11 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
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 de6e58b3334f13..581661e0c84071 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -190,8 +190,7 @@ export default function FiltersPanel( {
 							return (
 								<ItemGroup isBordered isSeparated>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										{ ...toggleProps }
 									>
 										<LabeledColorIndicator
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 1ed367e3c3ad0e..1cfdff0be286ee 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
@@ -11,6 +11,7 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -42,8 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Composite.Item
-			role="option"
-			aria-label={ label }
-			aria-selected={ isActive }
-			className={ clsx( 'block-editor-global-styles__shadow__item', {
-				'is-active': isActive,
-			} ) }
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					className={ clsx(
-						'block-editor-global-styles__shadow-indicator',
-						{
-							unset: type === 'unset',
-						}
-					) }
-					onClick={ onSelect }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					showTooltip
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</Button>
-			}
-		/>
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
 	);
 }
 
@@ -143,11 +142,7 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 3ba4f81d09daf4..e0782fdb01b1d0 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -37,10 +37,15 @@
 
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;
diff --git a/packages/block-editor/src/components/inner-blocks/content.scss b/packages/block-editor/src/components/inner-blocks/content.scss
deleted file mode 100644
index 05259ede35daaa..00000000000000
--- a/packages/block-editor/src/components/inner-blocks/content.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Add clickable overlay to blocks with nesting.
-// This makes it easy to select all layers of the block.
-.block-editor-block-list__layout.has-overlay {
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
-	}
-}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 0d35b459190fef..1583031a8ea18d 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -195,14 +195,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				isBlockSelected,
-				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
-				isDragging,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
@@ -213,8 +210,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation';
 			const blockEditingMode = getBlockEditingMode( clientId );
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
@@ -236,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					'__experimentalExposeControlsToChildren',
 					false
 				),
-				hasOverlay:
-					blockName !== 'core/template' &&
-					! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough &&
-					! isDragging(),
 				name: blockName,
 				blockType: getBlockType( blockName ),
 				parentLock: getTemplateLock( parentClientId ),
@@ -254,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 	const {
 		__experimentalCaptureToolbars,
-		hasOverlay,
 		name,
 		blockType,
 		parentLock,
@@ -299,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
-			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
-			{
-				'has-overlay': hasOverlay,
-			}
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames
 		),
 		children: clientId ? (
 			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index 69c316bdbbccef..06c266d793d2ff 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -33,11 +33,7 @@ function InserterListboxItem(
 					return children( propsWithTabIndex );
 				}
 				return (
-					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						{ ...propsWithTabIndex }
-					>
+					<Button __next40pxDefaultSize { ...propsWithTabIndex }>
 						{ children }
 					</Button>
 				);
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
index 95de775e48eef8..d258c24da10cfb 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
@@ -15,8 +15,7 @@ function PatternCategoriesList( {
 			{ patternCategories.map( ( { name, label } ) => {
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						key={ name }
 						label={ label }
 						className={ `${ baseClassName }__categories-list__item` }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index 0db78cec24dcb2..141ebf8cc84016 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -61,8 +61,7 @@ function BlockPatternsTab( {
 						{ children }
 					</CategoryTabs>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"
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 50a8b46b46427c..844d5dd341437e 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -186,7 +186,7 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		if ( rootClientId && item.rootClientId === rootClientId ) {
+		if ( rootClientId && item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {
 			itemsRemaining.push( item );
diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
index 8db23267eee8f4..6f11060c75c494 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -2,19 +2,23 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
-import { withRootClientIdOptionKey } from '../../../store/utils';
+import { isFiltered } from '../../../store/utils';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Retrieves the block types inserter state.
@@ -26,7 +30,7 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const options = useMemo(
-		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		() => ( { [ isFiltered ]: !! isQuick } ),
 		[ isQuick ]
 	);
 	const [ items ] = useSelect(
@@ -38,6 +42,10 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 		],
 		[ rootClientId, options ]
 	);
+	const { getClosestAllowedInsertionPoint } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [ categories, collections ] = useSelect( ( select ) => {
 		const { getCategories, getCollections } = select( blocksStore );
@@ -46,16 +54,29 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{
-				name,
-				initialAttributes,
-				innerBlocks,
-				syncStatus,
-				content,
-				rootClientId: _rootClientId,
-			},
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
 			shouldFocusBlock
 		) => {
+			const destinationClientId = getClosestAllowedInsertionPoint(
+				name,
+				rootClientId
+			);
+			if ( destinationClientId === null ) {
+				const title = getBlockType( name )?.title ?? name;
+				createErrorNotice(
+					sprintf(
+						/* translators: %s: block pattern title. */
+						__( 'Block "%s" can\'t be inserted.' ),
+						title
+					),
+					{
+						type: 'snackbar',
+						id: 'inserter-notice',
+					}
+				);
+				return;
+			}
+
 			const insertedBlock =
 				syncStatus === 'unsynced'
 					? parse( content, {
@@ -66,15 +87,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 							initialAttributes,
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
-
 			onInsert(
 				insertedBlock,
 				undefined,
 				shouldFocusBlock,
-				_rootClientId
+				destinationClientId
 			);
 		},
-		[ onInsert ]
+		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
 	);
 
 	return [ items, categories, collections, onSelectItem ];
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index 24074ec5004565..de814152c620b0 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -71,7 +71,11 @@ function useInsertionPoint( {
 	selectBlockOnInsert = true,
 } ) {
 	const registry = useRegistry();
-	const { getSelectedBlock } = useSelect( blockEditorStore );
+	const {
+		getSelectedBlock,
+		getClosestAllowedInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
 			const {
@@ -79,15 +83,24 @@ function useInsertionPoint( {
 				getBlockRootClientId,
 				getBlockIndex,
 				getBlockOrder,
-			} = select( blockEditorStore );
+				getInsertionPoint,
+			} = unlock( select( blockEditorStore ) );
 			const selectedBlockClientId = getSelectedBlockClientId();
-
 			let _destinationRootClientId = rootClientId;
 			let _destinationIndex;
+			const insertionPoint = getInsertionPoint();
 
 			if ( insertionIndex !== undefined ) {
 				// Insert into a specific index.
 				_destinationIndex = insertionIndex;
+			} else if (
+				insertionPoint &&
+				insertionPoint.hasOwnProperty( 'index' )
+			) {
+				_destinationRootClientId = insertionPoint?.rootClientId
+					? insertionPoint.rootClientId
+					: rootClientId;
+				_destinationIndex = insertionPoint.index;
 			} else if ( clientId ) {
 				// Insert after a specific client ID.
 				_destinationIndex = getBlockIndex( clientId );
@@ -193,21 +206,30 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
-				showInsertionPoint(
-					item.rootClientId,
-					getIndex( {
-						destinationRootClientId,
-						destinationIndex,
-						rootClientId: item.rootClientId,
-						registry,
-					} )
-				);
+			if ( item && ! isBlockInsertionPointVisible() ) {
+				const allowedDestinationRootClientId =
+					getClosestAllowedInsertionPoint(
+						item.name,
+						destinationRootClientId
+					);
+				if ( allowedDestinationRootClientId !== null ) {
+					showInsertionPoint(
+						allowedDestinationRootClientId,
+						getIndex( {
+							destinationRootClientId,
+							destinationIndex,
+							rootClientId: allowedDestinationRootClientId,
+							registry,
+						} )
+					);
+				}
 			} else {
 				hideInsertionPoint();
 			}
 		},
 		[
+			getClosestAllowedInsertionPoint,
+			isBlockInsertionPointVisible,
 			showInsertionPoint,
 			hideInsertionPoint,
 			destinationRootClientId,
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index 6483dc58ae8b97..13dae7f2ed7c0d 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -11,33 +11,66 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { getParsedPattern } from '../../../store/utils';
 
 /**
  * Retrieves the block patterns inserter state.
  *
  * @param {Function} onInsert         function called when inserter a list of blocks.
  * @param {string=}  rootClientId     Insertion's root client ID.
- *
  * @param {string}   selectedCategory The selected pattern category.
+ * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
+ *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
-	const { patternCategories, patterns, userPatternCategories } = useSelect(
+const usePatternsState = (
+	onInsert,
+	rootClientId,
+	selectedCategory,
+	isQuick
+) => {
+	const { patternCategories, allPatterns, userPatternCategories } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
-				select( blockEditorStore );
+			const {
+				getAllPatterns,
+				getSettings,
+				__experimentalGetAllowedPatterns,
+			} = unlock( select( blockEditorStore ) );
 			const {
 				__experimentalUserPatternCategories,
 				__experimentalBlockPatternCategories,
 			} = getSettings();
 			return {
-				patterns: __experimentalGetAllowedPatterns( rootClientId ),
+				allPatterns: isQuick
+					? __experimentalGetAllowedPatterns()
+					: getAllPatterns(),
 				userPatternCategories: __experimentalUserPatternCategories,
 				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
-		[ rootClientId ]
+		[ isQuick ]
+	);
+	const { getClosestAllowedInsertionPointForPattern } = unlock(
+		useSelect( blockEditorStore )
+	);
+
+	const patterns = useMemo(
+		() =>
+			isQuick
+				? allPatterns
+				: allPatterns
+						.filter( ( { inserter = true } ) => !! inserter )
+						.map( ( pattern ) => {
+							return {
+								...pattern,
+								get blocks() {
+									return getParsedPattern( pattern ).blocks;
+								},
+							};
+						} ),
+		[ isQuick, allPatterns ]
 	);
 
 	const allCategories = useMemo( () => {
@@ -58,6 +91,15 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
+			const destinationRootClientId = isQuick
+				? rootClientId
+				: getClosestAllowedInsertionPointForPattern(
+						pattern,
+						rootClientId
+				  );
+			if ( destinationRootClientId === null ) {
+				return;
+			}
 			const patternBlocks =
 				pattern.type === INSERTER_PATTERN_TYPES.user &&
 				pattern.syncStatus !== 'unsynced'
@@ -77,7 +119,9 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 					}
 					return clonedBlock;
 				} ),
-				pattern.name
+				pattern.name,
+				false,
+				destinationRootClientId
 			);
 			createSuccessNotice(
 				sprintf(
@@ -87,11 +131,18 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 				),
 				{
 					type: 'snackbar',
-					id: 'block-pattern-inserted-notice',
+					id: 'inserter-notice',
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert, selectedCategory ]
+		[
+			createSuccessNotice,
+			onInsert,
+			selectedCategory,
+			rootClientId,
+			getClosestAllowedInsertionPointForPattern,
+			isQuick,
+		]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
index 4416b710302cef..319c25c01831c8 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
@@ -26,6 +26,7 @@ import { moreVertical, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { isBlobURL } from '@wordpress/blob';
+import { getFilename } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -100,8 +101,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 			>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ onClose }
 					>
@@ -110,8 +110,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 				</FlexItem>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ onSubmit }
 					>
@@ -134,7 +133,8 @@ export function MediaPreview( { media, onClick, category } ) {
 	);
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { getSettings } = useSelect( blockEditorStore );
+	const { getSettings, getBlock } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const onMediaInsert = useCallback(
 		( previewBlock ) => {
@@ -169,30 +169,51 @@ export function MediaPreview( { media, onClick, category } ) {
 				.fetch( url )
 				.then( ( response ) => response.blob() )
 				.then( ( blob ) => {
+					const fileName = getFilename( url ) || 'image.jpg';
+					const file = new File( [ blob ], fileName, {
+						type: blob.type,
+					} );
+
 					settings.mediaUpload( {
-						filesList: [ blob ],
+						filesList: [ file ],
 						additionalData: { caption },
 						onFileChange( [ img ] ) {
 							if ( isBlobURL( img.url ) ) {
 								return;
 							}
-							onClick( {
-								...clonedBlock,
-								attributes: {
+
+							if ( ! getBlock( clonedBlock.clientId ) ) {
+								// Ensure the block is only inserted once.
+								onClick( {
+									...clonedBlock,
+									attributes: {
+										...clonedBlock.attributes,
+										id: img.id,
+										url: img.url,
+									},
+								} );
+
+								createSuccessNotice(
+									__( 'Image uploaded and inserted.' ),
+									{ type: 'snackbar', id: 'inserter-notice' }
+								);
+							} else {
+								// For subsequent calls, update the existing block.
+								updateBlockAttributes( clonedBlock.clientId, {
 									...clonedBlock.attributes,
 									id: img.id,
 									url: img.url,
-								},
-							} );
-							createSuccessNotice(
-								__( 'Image uploaded and inserted.' ),
-								{ type: 'snackbar' }
-							);
+								} );
+							}
+
 							setIsInserting( false );
 						},
 						allowedTypes: ALLOWED_MEDIA_TYPES,
 						onError( message ) {
-							createErrorNotice( message, { type: 'snackbar' } );
+							createErrorNotice( message, {
+								type: 'snackbar',
+								id: 'inserter-notice',
+							} );
 							setIsInserting( false );
 						},
 					} );
@@ -207,7 +228,9 @@ export function MediaPreview( { media, onClick, category } ) {
 			getSettings,
 			onClick,
 			createSuccessNotice,
+			updateBlockAttributes,
 			createErrorNotice,
+			getBlock,
 		]
 	);
 
@@ -283,6 +306,7 @@ export function MediaPreview( { media, onClick, category } ) {
 						onClick( cloneBlock( block ) );
 						createSuccessNotice( __( 'Image inserted.' ), {
 							type: 'snackbar',
+							id: 'inserter-notice',
 						} );
 						setShowExternalUploadModal( false );
 					} }
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index 07fce9ee6d80b0..ca901a127e5b42 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -71,8 +71,7 @@ function MediaTab( {
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							render={ ( { open } ) => (
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									onClick={ ( event ) => {
 										// Safari doesn't emit a focus event on button elements when
 										// clicked and we need to manually focus the button here.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index faf2c20514f67a..4bc26196cb5243 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -114,9 +114,9 @@ function InserterMenu(
 	);
 
 	const onInsertPattern = useCallback(
-		( blocks, patternName ) => {
+		( blocks, patternName, ...args ) => {
 			onToggleInsertionPoint( false );
-			onInsertBlocks( blocks, { patternName } );
+			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
 		},
 		[ onInsertBlocks, onSelect ]
diff --git a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
index fa8191cc5eaaa0..5f34c3c21d832f 100644
--- a/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
+++ b/packages/block-editor/src/components/inserter/mobile-tab-navigation.js
@@ -10,10 +10,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	FlexBlock,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
@@ -24,7 +21,7 @@ function ScreenHeader( { title } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorBackButton
+						<Navigator.BackButton
 							style={
 								// TODO: This style override is also used in ToolsPanelHeader.
 								// It should be supported out-of-the-box by Button.
@@ -46,14 +43,14 @@ function ScreenHeader( { title } ) {
 
 export default function MobileTabNavigation( { categories, children } ) {
 	return (
-		<NavigatorProvider
+		<Navigator
 			initialPath="/"
 			className="block-editor-inserter__mobile-tab-navigation"
 		>
-			<NavigatorScreen path="/">
+			<Navigator.Screen path="/">
 				<ItemGroup>
 					{ categories.map( ( category ) => (
-						<NavigatorButton
+						<Navigator.Button
 							key={ category.name }
 							path={ `/category/${ category.name }` }
 							as={ Item }
@@ -67,19 +64,19 @@ export default function MobileTabNavigation( { categories, children } ) {
 									}
 								/>
 							</HStack>
-						</NavigatorButton>
+						</Navigator.Button>
 					) ) }
 				</ItemGroup>
-			</NavigatorScreen>
+			</Navigator.Screen>
 			{ categories.map( ( category ) => (
-				<NavigatorScreen
+				<Navigator.Screen
 					key={ category.name }
 					path={ `/category/${ category.name }` }
 				>
 					<ScreenHeader title={ __( 'Back' ) } />
 					{ children( category ) }
-				</NavigatorScreen>
+				</Navigator.Screen>
 			) ) }
-		</NavigatorProvider>
+		</Navigator>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index e28ae1f3896c45..7c7f836842b418 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -47,10 +47,11 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		true
 	);
-
 	const [ patterns ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		true
 	);
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
@@ -86,10 +87,10 @@ export default function QuickInserter( {
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
 		setInserterIsOpened( {
-			rootClientId,
-			insertionIndex,
 			filterValue,
 			onSelect,
+			rootClientId,
+			insertionIndex,
 		} );
 	};
 
@@ -138,8 +139,7 @@ export default function QuickInserter( {
 
 			{ setInserterIsOpened && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index e772a67a131388..f3fa8d1e7df04b 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -257,39 +257,11 @@ $block-inserter-tabs-height: 44px;
 			svg {
 				fill: var(--wp-admin-theme-color);
 			}
-
-			&::after {
-				content: "";
-				display: block;
-				outline: none;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: $radius-small;
-				opacity: 0.04;
-				background: var(--wp-admin-theme-color);
-				height: 100%;
-			}
-		}
-
-		&:focus-visible,
-		&:focus:not(:disabled) {
-			border-radius: $radius-small;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: 0;
 		}
 
 		&::before {
 			display: none;
 		}
-
-		&::after {
-			display: none;
-		}
 	}
 }
 
@@ -410,7 +382,6 @@ $block-inserter-tabs-height: 44px;
 	background: $gray-900;
 	color: $white;
 	width: 100%;
-	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
 
 	&:hover {
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
deleted file mode 100644
index b46e4bfdaf0148..00000000000000
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { forwardRef } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const blocksTab = {
-	name: 'blocks',
-	/* translators: Blocks tab title in the block inserter. */
-	title: __( 'Blocks' ),
-};
-const patternsTab = {
-	name: 'patterns',
-	/* translators: Theme and Directory Patterns tab title in the block inserter. */
-	title: __( 'Patterns' ),
-};
-
-const mediaTab = {
-	name: 'media',
-	/* translators: Media tab title in the block inserter. */
-	title: __( 'Media' ),
-};
-
-function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
-	const tabs = [ blocksTab, patternsTab, mediaTab ];
-
-	return (
-		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
-				<div className="block-editor-inserter__tablist-and-close-button">
-					<Button
-						className="block-editor-inserter__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close block inserter' ) }
-						onClick={ () => onClose() }
-						size="small"
-					/>
-
-					<Tabs.TabList className="block-editor-inserter__tablist">
-						{ tabs.map( ( tab ) => (
-							<Tabs.Tab
-								key={ tab.name }
-								tabId={ tab.name }
-								className="block-editor-inserter__tab"
-							>
-								{ tab.title }
-							</Tabs.Tab>
-						) ) }
-					</Tabs.TabList>
-				</div>
-				{ tabs.map( ( tab ) => (
-					<Tabs.TabPanel
-						key={ tab.name }
-						tabId={ tab.name }
-						focusable={ false }
-						className="block-editor-inserter__tabpanel"
-					>
-						{ children }
-					</Tabs.TabPanel>
-				) ) }
-			</Tabs>
-		</div>
-	);
-}
-
-export default forwardRef( InserterTabs );
diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
deleted file mode 100644
index 925570130359a6..00000000000000
--- a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import items from './fixtures';
-import BlockTypesTab from '../block-types-tab';
-
-jest.mock( '../hooks/use-clipboard-block' );
-jest.mock( '@wordpress/data/src/components/use-select' );
-
-const selectMock = {
-	getCategories: jest.fn().mockReturnValue( [] ),
-	getCollections: jest.fn().mockReturnValue( [] ),
-	getInserterItems: jest.fn().mockReturnValue( [] ),
-	canInsertBlockType: jest.fn(),
-	getBlockType: jest.fn(),
-	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( { impressions: {} } ) ),
-};
-
-describe( 'BlockTypesTab component', () => {
-	beforeEach( () => {
-		useSelect.mockImplementation( ( callback ) =>
-			callback( () => selectMock )
-		);
-	} );
-
-	it( 'renders without crashing', () => {
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-		expect( component ).toBeTruthy();
-	} );
-
-	it( 'shows block items', () => {
-		selectMock.getInserterItems.mockReturnValue( items );
-
-		const blockItems = items.filter(
-			( { id, category } ) =>
-				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
-		);
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-
-		blockItems.forEach( ( item ) => {
-			expect( component.getByText( item.title ) ).toBeTruthy();
-		} );
-	} );
-} );
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/index.js b/packages/block-editor/src/components/inspector-controls-tabs/index.js
index 601854373b7eb0..c8d9536aeb9caf 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/index.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/index.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	Button,
+	Icon,
+	Tooltip,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -43,27 +44,27 @@ export default function InspectorControlsTabs( {
 		<div className="block-editor-block-inspector__tabs">
 			<Tabs defaultTabId={ initialTabName } key={ clientId }>
 				<Tabs.TabList>
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							render={
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									icon={
-										! showIconLabels ? tab.icon : undefined
-									}
-									label={
-										! showIconLabels ? tab.title : undefined
-									}
+					{ tabs.map( ( tab ) =>
+						showIconLabels ? (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className={ tab.className }
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) : (
+							<Tooltip text={ tab.title } key={ tab.name }>
+								<Tabs.Tab
+									tabId={ tab.name }
 									className={ tab.className }
+									aria-label={ tab.title }
 								>
-									{ showIconLabels && tab.title }
-								</Button>
-							}
-						/>
-					) ) }
+									<Icon icon={ tab.icon } />
+								</Tabs.Tab>
+							</Tooltip>
+						)
+					) }
 				</Tabs.TabList>
 				<Tabs.TabPanel tabId={ TAB_SETTINGS.name } focusable={ false }>
 					<SettingsTab showAdvancedControls={ !! blockName } />
diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
index 863ac3d9bed03a..9c9b04f7b84734 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss
+++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss
@@ -1,7 +1,3 @@
-.show-icon-labels {
-	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button {
-			justify-content: center;
-		}
-	}
+.block-editor-block-inspector__tabs [role="tablist"] {
+	width: 100%;
 }
diff --git a/packages/block-editor/src/components/inspector-popover-header/index.js b/packages/block-editor/src/components/inspector-popover-header/index.js
index d543ab0298cc62..cf6bf0d3d6796e 100644
--- a/packages/block-editor/src/components/inspector-popover-header/index.js
+++ b/packages/block-editor/src/components/inspector-popover-header/index.js
@@ -31,8 +31,7 @@ export default function InspectorPopoverHeader( {
 				<Spacer />
 				{ actions.map( ( { label, icon, onClick } ) => (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
@@ -45,8 +44,7 @@ export default function InspectorPopoverHeader( {
 				) ) }
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						size="small"
 						className="block-editor-inspector-popover-header__action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
diff --git a/packages/block-editor/src/components/inspector-popover-header/style.scss b/packages/block-editor/src/components/inspector-popover-header/style.scss
index ebb76aab23e28a..1ce9ec07f64094 100644
--- a/packages/block-editor/src/components/inspector-popover-header/style.scss
+++ b/packages/block-editor/src/components/inspector-popover-header/style.scss
@@ -1,16 +1,3 @@
 .block-editor-inspector-popover-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].block-editor-inspector-popover-header__action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 2024aca998caac..0f2ae4a0e05d26 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -12,6 +12,7 @@ import {
 	Notice,
 	TextControl,
 	__experimentalHStack as HStack,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -383,7 +384,7 @@ function LinkControl( {
 								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
-								size="__unstable-large"
+								__next40pxDefaultSize
 							/>
 						) }
 						<LinkControlSearchInput
@@ -404,20 +405,23 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							hideLabelFromVision={ ! showTextControl }
+							suffix={
+								showActions ? undefined : (
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											onClick={
+												isDisabled ? noop : handleSubmit
+											}
+											label={ __( 'Submit' ) }
+											icon={ keyboardReturn }
+											className="block-editor-link-control__search-submit"
+											aria-disabled={ isDisabled }
+											size="small"
+										/>
+									</InputControlSuffixWrapper>
+								)
+							}
 						/>
-						{ ! showActions && (
-							<div className="block-editor-link-control__search-enter">
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									onClick={ isDisabled ? noop : handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									aria-disabled={ isDisabled }
-								/>
-							</div>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -470,16 +474,14 @@ function LinkControl( {
 					className="block-editor-link-control__search-actions"
 				>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ handleCancel }
 					>
 						{ __( 'Cancel' ) }
 					</Button>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
 						className="block-editor-link-control__search-submit"
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 3a5dcd4148e951..f41884092e4894 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -43,6 +43,7 @@ const LinkControlSearchInput = forwardRef(
 			withURLSuggestion = true,
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
+			suffix,
 		},
 		ref
 	) => {
@@ -147,6 +148,7 @@ const LinkControlSearchInput = forwardRef(
 						}
 					} }
 					ref={ ref }
+					suffix={ suffix }
 				/>
 				{ children }
 			</div>
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index d8bffbd553f81b..935a50ac99a6f7 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -25,8 +25,7 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	return (
 		<>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index b0a5f6af2651b3..16493e1a5aa7f0 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -72,34 +72,12 @@ $block-editor-link-control-number-of-actions: 1;
 		color: $gray-900;
 	}
 
-	input[type="text"],
-	// Specificity overide of URLInput defaults.
-	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
-		@include input-control;
-		display: block;
-		border: $border-width solid $gray-600;
-		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
-		margin: 0;
-		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
-		position: relative;
-		width: 100%;
-
-		.has-actions & {
-			padding-right: $grid-unit-20;
-		}
-	}
 }
 
 .block-editor-link-control__search-error {
 	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
-.block-editor-link-control__search-enter {
-	position: absolute;
-	right: 19px; // specific to place the button properly.
-	top: 3px;
-}
-
 .block-editor-link-control__search-actions {
 	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 }
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 91bfbd7eddaa03..0ed2b162b127b8 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -14,7 +8,6 @@ import { forwardRef } from '@wordpress/element';
  */
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
 import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
@@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
-			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-				};
-			},
-			[]
-		);
-
 		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
 			useListViewContext();
 
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = clsx( 'block-editor-list-view-block-contents', {
-			'is-dropping-before': isBlockMoveTarget,
-		} );
-
 		// Only include all selected blocks if the currently clicked on block
 		// is one of the selected blocks. This ensures that if a user attempts
 		// to drag a block that isn't part of the selection, they're still able
@@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }
-							className={ className }
+							className="block-editor-list-view-block-contents"
 							block={ block }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index fbfa06ee10936b..3b21fd4a04e6d0 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	Button,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
@@ -82,9 +81,7 @@ function ListViewBlockSelectButton(
 	}
 
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+		<a
 			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
@@ -156,7 +153,7 @@ function ListViewBlockSelectButton(
 					</span>
 				) }
 			</HStack>
-		</Button>
+		</a>
 	);
 }
 
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 05a04abfd110b4..2916622efabee9 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -41,6 +41,15 @@
 		&:hover {
 			color: var(--wp-admin-theme-color);
 		}
+
+		svg {
+			fill: currentColor;
+			// Optimizate for high contrast modes.
+			// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
+			@media (forced-colors: active) {
+				fill: CanvasText;
+			}
+		}
 	}
 
 	&:not(.is-selected) .block-editor-list-view-block-select-button {
@@ -216,20 +225,15 @@
 		text-align: left;
 		position: relative;
 		white-space: nowrap;
-
-		&.is-dropping-before::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition:
-				border-color 0.1s linear,
-				border-style 0.1s linear,
-				box-shadow 0.1s linear;
-			top: -2px;
-			right: 0;
-			left: 0;
-			border-top: 4px solid var(--wp-admin-theme-color);
-		}
+		border-radius: 2px;
+		box-sizing: border-box;
+		color: inherit;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 400;
+		margin: 0;
+		text-decoration: none;
+		transition: box-shadow 0.1s linear;
 
 		.components-modal__content & {
 			padding-left: 0;
diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
index eeb2928df80baf..2f7bb2e673f12e 100644
--- a/packages/block-editor/src/components/media-placeholder/content.scss
+++ b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -1,27 +1,11 @@
 .block-editor-media-placeholder__url-input-form {
-	display: flex;
-
-	// Selector requires a lot of specificity to override base styles.
-	input[type="url"].block-editor-media-placeholder__url-input-field {
-		width: 100%;
-		min-width: 200px;
-
-		@include break-small() {
-			width: 300px;
-		}
-
-		flex-grow: 1;
-		border: none;
-		border-radius: 0;
-		margin: 2px;
+	min-width: 260px;
 
+	@include break-small() {
+		width: 300px;
 	}
 }
 
-.block-editor-media-placeholder__url-input-submit-button {
-	flex-shrink: 1;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 4d41289f324c0f..f16e4317227235 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -11,6 +11,8 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	__experimentalInputControl as InputControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -42,21 +44,23 @@ const InsertFromURLPopover = ( {
 			className="block-editor-media-placeholder__url-input-form"
 			onSubmit={ onSubmit }
 		>
-			<input
-				className="block-editor-media-placeholder__url-input-field"
-				type="text"
-				aria-label={ __( 'URL' ) }
+			<InputControl
+				__next40pxDefaultSize
+				label={ __( 'URL' ) }
+				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
 				value={ src }
-			/>
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				className="block-editor-media-placeholder__url-input-submit-button"
-				icon={ keyboardReturn }
-				label={ __( 'Apply' ) }
-				type="submit"
+				suffix={
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							size="small"
+							icon={ keyboardReturn }
+							label={ __( 'Apply' ) }
+							type="submit"
+						/>
+					</InputControlSuffixWrapper>
+				}
 			/>
 		</form>
 	</URLPopover>
@@ -87,8 +91,7 @@ const URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {
 	return (
 		<div className="block-editor-media-placeholder__url-input-container">
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
@@ -167,10 +170,6 @@ export function MediaPlaceholder( {
 		);
 	};
 
-	const onChangeSrc = ( event ) => {
-		setSrc( event.target.value );
-	};
-
 	const onFilesUpload = ( files ) => {
 		if (
 			! handleUpload ||
@@ -389,8 +388,7 @@ export function MediaPlaceholder( {
 		return (
 			onCancel && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-media-placeholder__cancel-button"
 					title={ __( 'Cancel' ) }
 					variant="link"
@@ -407,7 +405,7 @@ export function MediaPlaceholder( {
 			onSelectURL && (
 				<URLSelectionUI
 					src={ src }
-					onChangeSrc={ onChangeSrc }
+					onChangeSrc={ setSrc }
 					onSelectURL={ onSelectURL }
 				/>
 			)
@@ -419,8 +417,7 @@ export function MediaPlaceholder( {
 			onToggleFeaturedImage && (
 				<div className="block-editor-media-placeholder__url-input-container">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
 						variant="secondary"
@@ -436,8 +433,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						open();
@@ -477,8 +473,7 @@ export function MediaPlaceholder( {
 							const content = (
 								<>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										variant="primary"
 										className={ clsx(
 											'block-editor-media-placeholder__button',
@@ -508,8 +503,7 @@ export function MediaPlaceholder( {
 					<FormFileUpload
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								onClick={ openFileDialog }
 								variant="primary"
 								className={ clsx(
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
index 9266cd25537545..ef1833bda88e63 100644
--- a/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
+++ b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
@@ -26,15 +26,10 @@ export default ( props ) => ( element ) => {
 			preserveWhiteSpace,
 			pastePlainText,
 		} = props.current;
-		const { ownerDocument } = element;
-		const { defaultView } = ownerDocument;
-		const { anchorNode, focusNode } = defaultView.getSelection();
-		const containsSelection =
-			element.contains( anchorNode ) && element.contains( focusNode );
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( ! containsSelection ) {
+		// the target is the element or inside the element.
+		if ( ! element.contains( event.target ) ) {
 			return;
 		}
 
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 732b8dbf2c089c..8a5d99a7eb9f0a 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -20,7 +20,7 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -39,7 +39,6 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content, valueToHTMLString } from './content';
 import { withDeprecations } from './with-deprecations';
-import { unlock } from '../../lock-unlock';
 import { canBindBlock } from '../../hooks/use-bindings-attributes';
 import BlockContext from '../block-context';
 
@@ -125,6 +124,7 @@ export function RichTextWrapper(
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
 	const blockContext = useContext( BlockContext );
+	const registry = useRegistry();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -164,7 +164,7 @@ export function RichTextWrapper(
 		isBlockSelected,
 	] );
 
-	const { disableBoundBlock, bindingsPlaceholder } = useSelect(
+	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
 			if (
 				! blockBindings?.[ identifier ] ||
@@ -174,31 +174,63 @@ export function RichTextWrapper(
 			}
 
 			const relatedBinding = blockBindings[ identifier ];
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const blockBindingsSource = getBlockBindingsSource(
 				relatedBinding.source
 			);
+			const blockBindingsContext = {};
+			if ( blockBindingsSource?.usesContext?.length ) {
+				for ( const key of blockBindingsSource.usesContext ) {
+					blockBindingsContext[ key ] = blockContext[ key ];
+				}
+			}
 
 			const _disableBoundBlock =
 				! blockBindingsSource?.canUserEditValue?.( {
 					select,
-					context: blockContext,
+					context: blockBindingsContext,
 					args: relatedBinding.args,
 				} );
 
+			// Don't modify placeholders if value is not empty.
+			if ( adjustedValue.length > 0 ) {
+				return {
+					disableBoundBlock: _disableBoundBlock,
+					// Null values will make them fall back to the default behavior.
+					bindingsPlaceholder: null,
+					bindingsLabel: null,
+				};
+			}
+
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+				select,
+				context: blockBindingsContext,
+			} );
+			const bindingKey =
+				fieldsList?.[ relatedBinding?.args?.key ]?.label ??
+				blockBindingsSource?.label;
+
 			const _bindingsPlaceholder = _disableBoundBlock
+				? bindingKey
+				: sprintf(
+						/* translators: %s: connected field label or source label */
+						__( 'Add %s' ),
+						bindingKey
+				  );
+			const _bindingsLabel = _disableBoundBlock
 				? relatedBinding?.args?.key || blockBindingsSource?.label
 				: sprintf(
 						/* translators: %s: source label or key */
-						__( 'Add %s' ),
+						__( 'Empty %s; start writing to edit its value' ),
 						relatedBinding?.args?.key || blockBindingsSource?.label
 				  );
 
 			return {
 				disableBoundBlock: _disableBoundBlock,
 				bindingsPlaceholder:
-					( ! adjustedValue || adjustedValue.length === 0 ) &&
-					_bindingsPlaceholder,
+					blockAttributes?.placeholder || _bindingsPlaceholder,
+				bindingsLabel: _bindingsLabel,
 			};
 		},
 		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
@@ -356,22 +388,9 @@ export function RichTextWrapper(
 	const inputEvents = useRef( new Set() );
 
 	function onFocus() {
-		let element = anchorRef.current;
-
-		if ( ! element ) {
-			return;
-		}
-
-		// Writing flow might be editable, so we should make sure focus goes to
-		// the root editable element.
-		while ( element.parentElement?.isContentEditable ) {
-			element = element.parentElement;
-		}
-
-		element.focus();
+		anchorRef.current?.focus();
 	}
 
-	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>
@@ -406,7 +425,7 @@ export function RichTextWrapper(
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
 				aria-label={
-					bindingsPlaceholder || props[ 'aria-label' ] || placeholder
+					bindingsLabel || props[ 'aria-label' ] || placeholder
 				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
diff --git a/packages/block-editor/src/components/skip-to-selected-block/index.js b/packages/block-editor/src/components/skip-to-selected-block/index.js
index dee7f37550e379..2b52433480f3e6 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/index.js
+++ b/packages/block-editor/src/components/skip-to-selected-block/index.js
@@ -28,8 +28,7 @@ export default function SkipToSelectedBlock() {
 
 	return selectedBlockClientId ? (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }
diff --git a/packages/block-editor/src/components/skip-to-selected-block/style.scss b/packages/block-editor/src/components/skip-to-selected-block/style.scss
index 075e9d3c522653..8a1933423e2f9e 100644
--- a/packages/block-editor/src/components/skip-to-selected-block/style.scss
+++ b/packages/block-editor/src/components/skip-to-selected-block/style.scss
@@ -3,18 +3,9 @@
 	top: -9999em;
 
 	&:focus {
-		height: auto;
-		width: auto;
-		display: block;
 		font-size: 14px;
 		font-weight: 600;
-		padding: 15px 23px 14px;
 		background: #f1f1f1;
-		color: var(--wp-admin-theme-color);
-		line-height: normal;
-		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		text-decoration: none;
-		outline: none;
 		z-index: z-index(".skip-to-selected-block");
 	}
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
index 22191b4e1a8de9..a8440bb5be8caf 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
@@ -378,41 +378,34 @@ describe( 'getInitialView', () => {
 				VIEWS.custom
 			);
 		} );
-	} );
-
-	describe( 'Single side view', () => {
-		it( 'should return single side when only single side supported', () => {
+		it( 'should return custom view even if only single side supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
+				VIEWS.custom
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.custom
 			);
 		} );
+	} );
 
+	describe( 'Single side view', () => {
 		it( 'should return single side when only single side supported and no value defined', () => {
 			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
 		} );
 
-		it( 'should return single side when only single side supported and all values defined', () => {
+		it( 'should return single side when only single side supported and has only axial sides', () => {
 			expect(
-				getInitialView(
-					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
-					[ 'top' ]
-				)
+				getInitialView( { top: '1em' }, [ 'horizontal', 'vertical' ] )
 			).toBe( VIEWS.top );
-		} );
-
-		it( 'should return single side view when only one side is supported', () => {
-			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
-				VIEWS.left
-			);
+			expect(
+				getInitialView( { left: '4em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.left );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index df2da0d93d0609..046bee98761bf2 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -363,11 +363,10 @@ export function getInitialView( values = {}, sides ) {
 		top === bottom && left === right && ( !! top || !! left );
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
-
-	// Only single side supported and no value defined.
-	if ( sides?.length === 1 ) {
-		return sides[ 0 ];
-	}
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
 	if (
 		hasAxisSupport( sides ) &&
@@ -376,6 +375,24 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
+	// Only axial sides are supported and single value defined.
+	// - Ensure the side returned is the first side that has a value.
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
 	// Default to the Custom (separated sides) view.
 	return VIEWS.custom;
 }
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index 4ec777a911cc73..fbbf03af7921a7 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -18,6 +18,7 @@ import { Icon, edit as editIcon } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const selectIcon = (
 	<SVG
@@ -35,17 +36,18 @@ function ToolSelector( props, ref ) {
 		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return (
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					{ ...props }
 					ref={ ref }
-					icon={ mode === 'navigation' ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? editIcon : selectIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -56,7 +58,11 @@ function ToolSelector( props, ref ) {
 			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
-					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
+					<NavigableMenu
+						className="block-editor-tool-selector__menu"
+						role="menu"
+						aria-label={ __( 'Tools' ) }
+					>
 						<MenuItemsChoice
 							value={
 								mode === 'navigation' ? 'navigation' : 'edit'
@@ -64,29 +70,31 @@ function ToolSelector( props, ref ) {
 							onSelect={ __unstableSetEditorMode }
 							choices={ [
 								{
-									value: 'edit',
+									value: 'navigation',
 									label: (
 										<>
 											<Icon icon={ editIcon } />
-											{ __( 'Edit' ) }
+											{ __( 'Write' ) }
 										</>
 									),
+									info: __( 'Focus on content.' ),
 								},
 								{
-									value: 'navigation',
+									value: 'edit',
 									label: (
 										<>
 											{ selectIcon }
-											{ __( 'Select' ) }
+											{ __( 'Design' ) }
 										</>
 									),
+									info: __( 'Edit layout and styles.' ),
 								},
 							] }
 						/>
 					</NavigableMenu>
 					<div className="block-editor-tool-selector__help">
 						{ __(
-							'Tools provide different interactions for selecting, navigating, and editing blocks. Toggle between select and edit by pressing Escape and Enter.'
+							'Tools provide different sets of interactions for blocks. Toggle between simplified content tools (Write) and advanced visual editing tools (Design).'
 						) }
 					</div>
 				</>
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss
index 03774fe0f6b9d3..07ca91d346d907 100644
--- a/packages/block-editor/src/components/tool-selector/style.scss
+++ b/packages/block-editor/src/components/tool-selector/style.scss
@@ -8,3 +8,8 @@
 	color: $gray-700;
 	min-width: 280px;
 }
+
+.block-editor-tool-selector__menu .components-menu-item__info {
+	margin-left: $grid-unit-30 + $grid-unit-15; // icon size + margin
+	text-align: left;
+}
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 8170ea614ace26..560f5cd7d3d5db 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
 
 /**
@@ -38,8 +41,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -53,8 +55,7 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -63,13 +64,16 @@ class URLInputButton extends Component {
 							<URLInput
 								value={ url || '' }
 								onChange={ onChange }
-							/>
-							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
-								icon={ keyboardReturn }
-								label={ __( 'Submit' ) }
-								type="submit"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											size="small"
+											icon={ keyboardReturn }
+											label={ __( 'Submit' ) }
+											type="submit"
+										/>
+									</InputControlSuffixWrapper>
+								}
 							/>
 						</div>
 					</form>
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 9a5c589a44a047..cb058be5c932f6 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -12,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
+	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
@@ -234,8 +235,8 @@ class URLInput extends Component {
 		this.suggestionsRequest = request;
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	onChange( newValue ) {
+		this.props.onChange( newValue );
 	}
 
 	onFocus() {
@@ -448,7 +449,6 @@ class URLInput extends Component {
 			id: inputId,
 			value,
 			required: true,
-			className: 'block-editor-url-input__input',
 			type: 'text',
 			onChange: this.onChange,
 			onFocus: this.onFocus,
@@ -464,6 +464,7 @@ class URLInput extends Component {
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
 					: undefined,
 			ref: this.inputRef,
+			suffix: this.props.suffix,
 		};
 
 		if ( renderControl ) {
@@ -472,7 +473,7 @@ class URLInput extends Component {
 
 		return (
 			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
-				<input { ...inputProps } />
+				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);
@@ -539,8 +540,7 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 5afb22269765e2..ef37566f8e34e0 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -9,33 +9,14 @@ $input-size: 300px;
 	position: relative;
 	padding: 1px;
 
-	input[type="text"] {
-		width: 100%;
-		@include break-small() {
-			width: $input-size;
-		}
-		padding: $input-padding;
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&::-ms-clear {
-			display: none;
-		}
+	@include break-small() {
+		min-width: $input-size;
+		width: auto;
 	}
 
 	&.is-full-width {
 		width: 100%;
 
-		.block-editor-url-input__input[type="text"] {
-			width: 100%;
-		}
-
 		&__suggestions {
 			width: 100%;
 		}
@@ -49,10 +30,6 @@ $input-size: 300px;
 	}
 }
 
-.block-editor-url-input__input[type="text"] {
-	@include input-control;
-}
-
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;
@@ -132,10 +109,4 @@ $input-size: 300px;
 	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
-
-	.components-button {
-		flex-shrink: 0;
-		width: $button-size;
-		height: $button-size;
-	}
 }
diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js
index 8a09999ecdff3c..c88ec4e5378926 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -16,7 +16,6 @@ import {
 	plus as add,
 	group,
 	ungroup,
-	moveTo as move,
 } from '@wordpress/icons';
 
 /**
@@ -127,59 +126,6 @@ export const useTransformCommands = () => {
 	return { isLoading: false, commands };
 };
 
-const useActionsCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-
-		return {
-			clientIds: selectedBlockClientIds,
-		};
-	}, [] );
-
-	const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
-		useSelect( blockEditorStore );
-
-	const { setBlockMovingClientId, setNavigationMode, selectBlock } =
-		useDispatch( blockEditorStore );
-
-	if ( ! clientIds || clientIds.length < 1 ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canMove =
-		canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
-
-	const commands = [];
-
-	if ( canMove ) {
-		commands.push( {
-			name: 'move-to',
-			label: __( 'Move to' ),
-			callback: () => {
-				setNavigationMode( true );
-				selectBlock( clientIds[ 0 ] );
-				setBlockMovingClientId( clientIds[ 0 ] );
-			},
-			icon: move,
-		} );
-	}
-
-	return {
-		isLoading: false,
-		commands: commands.map( ( command ) => ( {
-			...command,
-			name: 'core/block-editor/action-' + command.name,
-			callback: ( { close } ) => {
-				command.callback();
-				close();
-			},
-		} ) ),
-	};
-};
-
 const useQuickActionsCommands = () => {
 	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
@@ -344,10 +290,6 @@ export const useBlockCommands = () => {
 		name: 'core/block-editor/blockTransforms',
 		hook: useTransformCommands,
 	} );
-	useCommandLoader( {
-		name: 'core/block-editor/blockActions',
-		hook: useActionsCommands,
-	} );
 	useCommandLoader( {
 		name: 'core/block-editor/blockQuickActions',
 		hook: useQuickActionsCommands,
diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
index cea3e4b19707dd..7e6b36b0e22143 100644
--- a/packages/block-editor/src/components/writing-flow/index.js
+++ b/packages/block-editor/src/components/writing-flow/index.js
@@ -23,7 +23,6 @@ import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
 import useClipboardHandler from './use-clipboard-handler';
-import useEventRedirect from './use-event-redirect';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -66,7 +65,6 @@ export function useWritingFlow() {
 				},
 				[ hasMultiSelection ]
 			),
-			useEventRedirect(),
 		] ),
 		after,
 	];
diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
index fda5a0133ee00c..44051b324ff64d 100644
--- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
@@ -19,7 +19,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -191,7 +190,8 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,11 +233,6 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const target =
-				ownerDocument.activeElement === node
-					? getSelectionRoot( ownerDocument )
-					: event.target;
-
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -279,7 +274,6 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -303,7 +297,6 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,
diff --git a/packages/block-editor/src/components/writing-flow/use-event-redirect.js b/packages/block-editor/src/components/writing-flow/use-event-redirect.js
deleted file mode 100644
index b8dcd7eda69697..00000000000000
--- a/packages/block-editor/src/components/writing-flow/use-event-redirect.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { getSelectionRoot } from './utils';
-
-/**
- * Whenever content editable is enabled on writing flow, it will have focus, so
- * we need to dispatch some events to the root of the selection to ensure
- * compatibility with rich text. In the future, perhaps the rich text event
- * handlers should be attached to the window instead.
- *
- * Alternatively, we could try to find a way to always maintain rich text focus.
- */
-export default function useEventRedirect() {
-	return useRefEffect( ( node ) => {
-		function onInput( event ) {
-			if ( event.target !== node ) {
-				return;
-			}
-
-			const { ownerDocument } = node;
-			const { defaultView } = ownerDocument;
-			const prototype = Object.getPrototypeOf( event );
-			const constructorName = prototype.constructor.name;
-			const Constructor = defaultView[ constructorName ];
-			const root = getSelectionRoot( ownerDocument );
-
-			if ( ! root || root === node ) {
-				return;
-			}
-
-			const init = {};
-
-			for ( const key in event ) {
-				init[ key ] = event[ key ];
-			}
-
-			init.bubbles = false;
-
-			const newEvent = new Constructor( event.type, init );
-			const cancelled = ! root.dispatchEvent( newEvent );
-
-			if ( cancelled ) {
-				event.preventDefault();
-			}
-		}
-
-		const events = [
-			'beforeinput',
-			'input',
-			'compositionstart',
-			'compositionend',
-			'compositionupdate',
-			'keydown',
-		];
-
-		events.forEach( ( eventType ) => {
-			node.addEventListener( eventType, onInput );
-		} );
-
-		return () => {
-			events.forEach( ( eventType ) => {
-				node.removeEventListener( eventType, onInput );
-			} );
-		};
-	}, [] );
-}
diff --git a/packages/block-editor/src/components/writing-flow/use-input.js b/packages/block-editor/src/components/writing-flow/use-input.js
index 31c5d769834c01..0f10cc9c2d1c75 100644
--- a/packages/block-editor/src/components/writing-flow/use-input.js
+++ b/packages/block-editor/src/components/writing-flow/use-input.js
@@ -16,7 +16,6 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Handles input for selections across blocks.
@@ -50,24 +49,7 @@ export default function useInput() {
 			// DOM. This will cause React errors (and the DOM should only be
 			// altered in a controlled fashion).
 			if ( node.contentEditable === 'true' ) {
-				const selection = node.ownerDocument.defaultView.getSelection();
-				const range = selection.rangeCount
-					? selection.getRangeAt( 0 )
-					: null;
-				const root = getSelectionRoot( node.ownerDocument );
-
-				// If selection is contained within a nested editable, allow
-				// input. We need to ensure that selection is maintained.
-				if ( root ) {
-					node.contentEditable = false;
-					root.focus();
-					selection.removeAllRanges();
-					if ( range ) {
-						selection.addRange( range );
-					}
-				} else {
-					event.preventDefault();
-				}
+				event.preventDefault();
 			}
 		}
 
@@ -77,23 +59,6 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
-				const { ownerDocument } = node;
-				if ( node === ownerDocument.activeElement ) {
-					if ( event.key === 'End' || event.key === 'Home' ) {
-						const selectionRoot = getSelectionRoot( ownerDocument );
-						const selection =
-							ownerDocument.defaultView.getSelection();
-						selection.selectAllChildren( selectionRoot );
-						const method =
-							event.key === 'End'
-								? 'collapseToEnd'
-								: 'collapseToStart';
-						selection[ method ]();
-						event.preventDefault();
-						return;
-					}
-				}
-
 				if ( event.keyCode === ENTER ) {
 					if ( event.shiftKey || __unstableIsFullySelected() ) {
 						return;
diff --git a/packages/block-editor/src/components/writing-flow/use-select-all.js b/packages/block-editor/src/components/writing-flow/use-select-all.js
index 5a7acb3a8783a4..c56549acf54ad5 100644
--- a/packages/block-editor/src/components/writing-flow/use-select-all.js
+++ b/packages/block-editor/src/components/writing-flow/use-select-all.js
@@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -24,27 +23,12 @@ export default function useSelectAll() {
 				return;
 			}
 
-			const selectionRoot = getSelectionRoot( node.ownerDocument );
 			const selectedClientIds = getSelectedBlockClientIds();
 
-			// Abort if there is selection, but it is not within a block.
-			if ( selectionRoot && ! selectedClientIds.length ) {
-				return;
-			}
-
 			if (
-				selectionRoot &&
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( selectionRoot )
+				! isEntirelySelected( event.target )
 			) {
-				if ( node === node.ownerDocument.activeElement ) {
-					event.preventDefault();
-					node.ownerDocument.defaultView
-						.getSelection()
-						.selectAllChildren( selectionRoot );
-					return;
-				}
-
 				return;
 			}
 
@@ -61,7 +45,6 @@ export default function useSelectAll() {
 					node.ownerDocument.defaultView
 						.getSelection()
 						.removeAllRanges();
-					node.contentEditable = 'false';
 					selectBlock( rootClientId );
 				}
 				return;
diff --git a/packages/block-editor/src/components/writing-flow/use-selection-observer.js b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
index 8ecba461d1025f..c7ce5d259d875a 100644
--- a/packages/block-editor/src/components/writing-flow/use-selection-observer.js
+++ b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
@@ -107,12 +107,8 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const {
-		getBlockParents,
-		getBlockSelectionStart,
-		isMultiSelecting,
-		getSelectedBlockClientId,
-	} = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -195,17 +191,10 @@ export default function useSelectionObserver() {
 					return;
 				}
 
-				setContentEditableWrapper(
-					node,
-					!! ( startClientId && endClientId )
-				);
-
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						if ( getSelectedBlockClientId() !== startClientId ) {
-							selectBlock( startClientId );
-						}
+						selectBlock( startClientId );
 					} else {
 						multiSelect( startClientId, startClientId );
 					}
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 b321d7c8d29957..3788c7021fd664 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { focus, isFormElement } from '@wordpress/dom';
-import { TAB, ESCAPE } from '@wordpress/keycodes';
+import { TAB } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
@@ -21,19 +21,9 @@ export default function useTabNav() {
 
 	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
 		useSelect( blockEditorStore );
-	const { setNavigationMode, setLastFocus } = unlock(
-		useDispatch( blockEditorStore )
-	);
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
+	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
 	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 
-	// Don't allow tabbing to this element in Navigation mode.
-	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
-
 	// Reference that holds the a flag for enabling or disabling
 	// capturing on the focus capture elements.
 	const noCaptureRef = useRef();
@@ -56,8 +46,6 @@ export default function useTabNav() {
 					.focus();
 			}
 		} else {
-			setNavigationMode( true );
-
 			const canvasElement =
 				container.current.ownerDocument === event.target.ownerDocument
 					? container.current
@@ -82,7 +70,7 @@ export default function useTabNav() {
 	const before = (
 		<div
 			ref={ focusCaptureBeforeRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -90,7 +78,7 @@ export default function useTabNav() {
 	const after = (
 		<div
 			ref={ focusCaptureAfterRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -101,12 +89,6 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
-				event.preventDefault();
-				setNavigationMode( true );
-				return;
-			}
-
 			// In Edit mode, Tab should focus the first tabbable element after
 			// the content, which is normally the sidebar (with block controls)
 			// and Shift+Tab should focus the first tabbable element before the
@@ -119,20 +101,6 @@ export default function useTabNav() {
 
 			const isShift = event.shiftKey;
 			const direction = isShift ? 'findPrevious' : 'findNext';
-
-			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
-				// Preserve the behaviour of entering navigation mode when
-				// tabbing into the content without a block selection.
-				// `onFocusCapture` already did this previously, but we need to
-				// do it again here because after clearing block selection,
-				// focus land on the writing flow container and pressing Tab
-				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) {
-					setNavigationMode( true );
-				}
-				return;
-			}
-
 			const nextTabbable = focus.tabbable[ direction ]( event.target );
 
 			// We want to constrain the tabbing to the block and its child blocks.
diff --git a/packages/block-editor/src/components/writing-flow/utils.js b/packages/block-editor/src/components/writing-flow/utils.js
index 0cd41eedd3f6f1..2a2010854ed205 100644
--- a/packages/block-editor/src/components/writing-flow/utils.js
+++ b/packages/block-editor/src/components/writing-flow/utils.js
@@ -116,33 +116,3 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
-
-/**
- * Gets the current content editable root element based on the selection.
- * @param {Document} ownerDocument
- * @return {Element|undefined} The content editable root element.
- */
-export function getSelectionRoot( ownerDocument ) {
-	const { defaultView } = ownerDocument;
-	const { anchorNode, focusNode } = defaultView.getSelection();
-
-	if ( ! anchorNode || ! focusNode ) {
-		return;
-	}
-
-	const anchorElement = (
-		anchorNode.nodeType === anchorNode.ELEMENT_NODE
-			? anchorNode
-			: anchorNode.parentElement
-	).closest( '[contenteditable]' );
-
-	if ( ! anchorElement ) {
-		return;
-	}
-
-	if ( ! anchorElement.contains( focusNode ) ) {
-		return;
-	}
-
-	return anchorElement;
-}
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 36d428dca6b762..1ef4e118fb1bbe 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -8,7 +8,6 @@
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/iframe/content.scss";
-@import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";
 @import "./components/rich-text/content.scss";
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index be632cd4db3a25..5c002613831ce1 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
+import {
+	getBlockBindingsSource,
+	getBlockBindingsSources,
+} from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -12,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useRegistry, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useContext, Fragment } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -31,6 +34,8 @@ import { store as blockEditorStore } from '../store';
 
 const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
+const EMPTY_OBJECT = {};
+
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -45,7 +50,6 @@ const useToolsPanelDropdownMenuProps = () => {
 };
 
 function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
-	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 	const registeredSources = getBlockBindingsSources();
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const currentKey = binding?.args?.key;
@@ -59,7 +63,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								{ registeredSources[ name ].label }
 							</DropdownMenuV2.GroupLabel>
 						) }
-						{ Object.entries( fields ).map( ( [ key, value ] ) => (
+						{ Object.entries( fields ).map( ( [ key, args ] ) => (
 							<DropdownMenuV2.RadioItem
 								key={ key }
 								onChange={ () =>
@@ -75,10 +79,10 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								checked={ key === currentKey }
 							>
 								<DropdownMenuV2.ItemLabel>
-									{ key }
+									{ args?.label }
 								</DropdownMenuV2.ItemLabel>
 								<DropdownMenuV2.ItemHelpText>
-									{ value }
+									{ args?.value }
 								</DropdownMenuV2.ItemHelpText>
 							</DropdownMenuV2.RadioItem>
 						) ) }
@@ -92,10 +96,9 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 	);
 }
 
-function BlockBindingsAttribute( { attribute, binding } ) {
+function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
 	const { source: sourceName, args } = binding || {};
-	const sourceProps =
-		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+	const sourceProps = getBlockBindingsSource( sourceName );
 	const isSourceInvalid = ! sourceProps;
 	return (
 		<VStack className="block-editor-bindings__item" spacing={ 0 }>
@@ -108,14 +111,16 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 				>
 					{ isSourceInvalid
 						? __( 'Invalid source' )
-						: args?.key || sourceProps?.label || sourceName }
+						: fieldsList?.[ sourceName ]?.[ args?.key ]?.label ||
+						  sourceProps?.label ||
+						  sourceName }
 				</Text>
 			) }
 		</VStack>
 	);
 }
 
-function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
+function ReadOnlyBlockBindingsPanelItems( { bindings, fieldsList } ) {
 	return (
 		<>
 			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
@@ -123,6 +128,7 @@ function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
 					<BlockBindingsAttribute
 						attribute={ attribute }
 						binding={ binding }
+						fieldsList={ fieldsList }
 					/>
 				</Item>
 			) ) }
@@ -162,6 +168,7 @@ function EditableBlockBindingsPanelItems( {
 									<BlockBindingsAttribute
 										attribute={ attribute }
 										binding={ binding }
+										fieldsList={ fieldsList }
 									/>
 								</Item>
 							}
@@ -180,13 +187,60 @@ function EditableBlockBindingsPanelItems( {
 }
 
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
-	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
-	const { bindings } = metadata || {};
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	// `useSelect` is used purposely here to ensure `getFieldsList`
+	// is updated whenever there are updates in block context.
+	// `source.getFieldsList` may also call a selector via `select`.
+	const _fieldsList = {};
+	const { fieldsList, canUpdateBlockBindings } = useSelect(
+		( select ) => {
+			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+				return EMPTY_OBJECT;
+			}
+			const registeredSources = getBlockBindingsSources();
+			Object.entries( registeredSources ).forEach(
+				( [ sourceName, { getFieldsList, usesContext } ] ) => {
+					if ( getFieldsList ) {
+						// Populate context.
+						const context = {};
+						if ( usesContext?.length ) {
+							for ( const key of usesContext ) {
+								context[ key ] = blockContext[ key ];
+							}
+						}
+						const sourceList = getFieldsList( {
+							select,
+							context,
+						} );
+						// Only add source if the list is not empty.
+						if ( Object.keys( sourceList || {} ).length ) {
+							_fieldsList[ sourceName ] = { ...sourceList };
+						}
+					}
+				}
+			);
+			return {
+				fieldsList:
+					Object.values( _fieldsList ).length > 0
+						? _fieldsList
+						: EMPTY_OBJECT,
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+			};
+		},
+		[ blockContext, bindableAttributes ]
+	);
+	// Return early if there are no bindable attributes.
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		return null;
+	}
+	// Filter bindings to only show bindable attributes and remove pattern overrides.
+	const { bindings } = metadata || {};
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
@@ -197,48 +251,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 		}
 	} );
 
-	const { canUpdateBlockBindings } = useSelect( ( select ) => {
-		return {
-			canUpdateBlockBindings:
-				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
-		};
-	}, [] );
-
-	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
-		return null;
-	}
-
-	const fieldsList = {};
-	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
-	const registeredSources = getBlockBindingsSources();
-	Object.entries( registeredSources ).forEach(
-		( [ sourceName, { getFieldsList, usesContext } ] ) => {
-			if ( getFieldsList ) {
-				// Populate context.
-				const context = {};
-				if ( usesContext?.length ) {
-					for ( const key of usesContext ) {
-						context[ key ] = blockContext[ key ];
-					}
-				}
-				const sourceList = getFieldsList( {
-					registry,
-					context,
-				} );
-				// Only add source if the list is not empty.
-				if ( sourceList ) {
-					fieldsList[ sourceName ] = { ...sourceList };
-				}
-			}
-		}
-	);
-	// Remove empty sources.
-	Object.entries( fieldsList ).forEach( ( [ key, value ] ) => {
-		if ( ! Object.keys( value ).length ) {
-			delete fieldsList[ key ];
-		}
-	} );
-
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly =
 		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
@@ -261,6 +273,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					{ readOnly ? (
 						<ReadOnlyBlockBindingsPanelItems
 							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
 						/>
 					) : (
 						<EditableBlockBindingsPanelItems
diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
index b1fab1b124f8dc..04a2313b629ba7 100644
--- a/packages/block-editor/src/hooks/block-hooks.js
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -3,18 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { BlockIcon, InspectorControls } from '../components';
+import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
@@ -204,14 +200,7 @@ function BlockHooksControlPure( {
 										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
-										label={
-											<HStack justify="flex-start">
-												<BlockIcon
-													icon={ block.icon }
-												/>
-												<span>{ block.title }</span>
-											</HStack>
-										}
+										label={ block.title }
 										onChange={ () => {
 											if ( ! checked ) {
 												// Create and insert block.
diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/packages/block-editor/src/hooks/block-hooks.scss
index c8f2027483ccf3..03cabd638d8684 100644
--- a/packages/block-editor/src/hooks/block-hooks.scss
+++ b/packages/block-editor/src/hooks/block-hooks.scss
@@ -1,13 +1,4 @@
 .block-editor-hooks__block-hooks {
-	/**
-	 * Since we're displaying the block icon alongside the block name,
-	 * we need to right-align the toggle.
-	 */
-	.components-toggle-control .components-h-stack {
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
-		flex-direction: row-reverse;
-	}
-
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 51130ccb9ec2a4..dbd47831c42668 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -314,8 +314,11 @@ function useDuotoneStyles( {
 	}, [ isValidFilter, blockElement, colors ] );
 }
 
+// Used for generating the instance ID
+const DUOTONE_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockProps( { clientId, name, style } ) {
-	const id = useInstanceId( useBlockProps );
+	const id = useInstanceId( DUOTONE_BLOCK_PROPS_REFERENCE );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
 
diff --git a/packages/block-editor/src/hooks/layout-child.js b/packages/block-editor/src/hooks/layout-child.js
index 8beb50c1b82849..558d5e2cc626bf 100644
--- a/packages/block-editor/src/hooks/layout-child.js
+++ b/packages/block-editor/src/hooks/layout-child.js
@@ -17,6 +17,9 @@ import {
 	GridItemMovers,
 } from '../components/grid';
 
+// Used for generating the instance ID
+const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
 		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
@@ -32,7 +35,7 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	} = layout;
 	const parentLayout = useLayout() || {};
 	const { columnCount, minimumColumnWidth } = parentLayout;
-	const id = useInstanceId( useBlockPropsChildLayoutStyles );
+	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
 	const selector = `.wp-container-content-${ id }`;
 
 	// Check that the grid layout attributes are of the correct type, so that we don't accidentally
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 22d916d7b791bf..54a376a0c6a4f7 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -11,8 +11,8 @@ import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
-	Button,
-	ButtonGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ToggleControl,
 	PanelBody,
 	privateApis as componentsPrivateApis,
@@ -315,21 +315,26 @@ export default {
 
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
-		<ButtonGroup>
+		<ToggleGroupControl
+			__next40pxDefaultSize
+			isBlock
+			label={ __( 'Layout type' ) }
+			__nextHasNoMarginBottom
+			hideLabelFromVision
+			isAdaptiveWidth
+			value={ type }
+			onChange={ onChange }
+		>
 			{ getLayoutTypes().map( ( { name, label } ) => {
 				return (
-					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+					<ToggleGroupControlOption
 						key={ name }
-						isPressed={ type === name }
-						onClick={ () => onChange( name ) }
-					>
-						{ label }
-					</Button>
+						value={ name }
+						label={ label }
+					/>
 				);
 			} ) }
-		</ButtonGroup>
+		</ToggleGroupControl>
 	);
 }
 
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 95a9c2198e4c71..bf1b730cd67d1a 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -310,6 +310,9 @@ export default {
 	},
 };
 
+// Used for generating the instance ID
+const POSITION_BLOCK_PROPS_REFERENCE = {};
+
 function useBlockProps( { name, style } ) {
 	const hasPositionBlockSupport = hasBlockSupport(
 		name,
@@ -318,7 +321,7 @@ function useBlockProps( { name, style } ) {
 	const isPositionDisabled = useIsPositionDisabled( { name } );
 	const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;
 
-	const id = useInstanceId( useBlockProps );
+	const id = useInstanceId( POSITION_BLOCK_PROPS_REFERENCE );
 
 	// Higher specificity to override defaults in editor UI.
 	const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index e1ebf5fda6b8ee..fdc617fda20c05 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -103,11 +103,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const { name, clientId } = props;
-		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
-		const hasPatternOverridesDefaultBinding =
-			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
-				?.source === 'core/pattern-overrides';
+		const { name, clientId, context, setAttributes } = props;
 		const blockBindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
@@ -121,79 +117,87 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// used purposely here to ensure `boundAttributes` is updated whenever
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
-		const boundAttributes = useSelect( () => {
-			if ( ! blockBindings ) {
-				return;
-			}
-
-			const attributes = {};
-
-			const blockBindingsBySource = new Map();
-
-			for ( const [ attributeName, binding ] of Object.entries(
-				blockBindings
-			) ) {
-				const { source: sourceName, args: sourceArgs } = binding;
-				const source = sources[ sourceName ];
-				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
-					continue;
+		const updatedContext = {};
+		const boundAttributes = useSelect(
+			( select ) => {
+				if ( ! blockBindings ) {
+					return;
 				}
 
-				blockBindingsBySource.set( source, {
-					...blockBindingsBySource.get( source ),
-					[ attributeName ]: {
-						args: sourceArgs,
-					},
-				} );
-			}
+				const attributes = {};
 
-			if ( blockBindingsBySource.size ) {
-				for ( const [ source, bindings ] of blockBindingsBySource ) {
-					// Populate context.
-					const context = {};
+				const blockBindingsBySource = new Map();
 
-					if ( source.usesContext?.length ) {
-						for ( const key of source.usesContext ) {
-							context[ key ] = blockContext[ key ];
-						}
+				for ( const [ attributeName, binding ] of Object.entries(
+					blockBindings
+				) ) {
+					const { source: sourceName, args: sourceArgs } = binding;
+					const source = sources[ sourceName ];
+					if (
+						! source ||
+						! canBindAttribute( name, attributeName )
+					) {
+						continue;
 					}
 
-					// Get values in batch if the source supports it.
-					let values = {};
-					if ( ! source.getValues ) {
-						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the `key` or the source label when `getValues` doesn't exist
-							values[ attr ] =
-								bindings[ attr ].args?.key || source.label;
-						} );
-					} else {
-						values = source.getValues( {
-							registry,
-							context,
-							clientId,
-							bindings,
-						} );
+					// Populate context.
+					for ( const key of source.usesContext || [] ) {
+						updatedContext[ key ] = blockContext[ key ];
 					}
-					for ( const [ attributeName, value ] of Object.entries(
-						values
-					) ) {
-						if (
-							attributeName === 'url' &&
-							( ! value || ! isURLLike( value ) )
-						) {
-							// Return null if value is not a valid URL.
-							attributes[ attributeName ] = null;
+
+					blockBindingsBySource.set( source, {
+						...blockBindingsBySource.get( source ),
+						[ attributeName ]: {
+							args: sourceArgs,
+						},
+					} );
+				}
+
+				if ( blockBindingsBySource.size ) {
+					for ( const [
+						source,
+						bindings,
+					] of blockBindingsBySource ) {
+						// Get values in batch if the source supports it.
+						let values = {};
+						if ( ! source.getValues ) {
+							Object.keys( bindings ).forEach( ( attr ) => {
+								// Default to the the source label when `getValues` doesn't exist.
+								values[ attr ] = source.label;
+							} );
 						} else {
-							attributes[ attributeName ] = value;
+							values = source.getValues( {
+								select,
+								context: updatedContext,
+								clientId,
+								bindings,
+							} );
+						}
+						for ( const [ attributeName, value ] of Object.entries(
+							values
+						) ) {
+							if (
+								attributeName === 'url' &&
+								( ! value || ! isURLLike( value ) )
+							) {
+								// Return null if value is not a valid URL.
+								attributes[ attributeName ] = null;
+							} else {
+								attributes[ attributeName ] = value;
+							}
 						}
 					}
 				}
-			}
 
-			return attributes;
-		}, [ blockBindings, name, clientId, blockContext, registry, sources ] );
+				return attributes;
+			},
+			[ blockBindings, name, clientId, updatedContext, sources ]
+		);
 
-		const { setAttributes } = props;
+		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
 
 		const _setAttributes = useCallback(
 			( nextAttributes ) => {
@@ -237,18 +241,10 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							source,
 							bindings,
 						] of blockBindingsBySource ) {
-							// Populate context.
-							const context = {};
-
-							if ( source.usesContext?.length ) {
-								for ( const key of source.usesContext ) {
-									context[ key ] = blockContext[ key ];
-								}
-							}
-
 							source.setValues( {
-								registry,
-								context,
+								select: registry.select,
+								dispatch: registry.dispatch,
+								context: updatedContext,
 								clientId,
 								bindings,
 							} );
@@ -278,7 +274,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				blockBindings,
 				name,
 				clientId,
-				blockContext,
+				updatedContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
@@ -292,6 +288,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
 					setAttributes={ _setAttributes }
+					context={ { ...context, ...updatedContext } }
 				/>
 			</>
 		);
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index d7e21ec1be0578..2a1b43060c00a9 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -8,46 +8,40 @@ import { useEffect, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 /**
- * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * A hook used to set the zoomed out view, invoking the hook sets the mode.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} zoomOut If we should zoom out or not.
  */
 export function useZoomOut( zoomOut = true ) {
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const originalEditingModeRef = useRef( null );
-	const mode = __unstableGetEditorMode();
+	const originalIsZoomOutRef = useRef( null );
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingModeRef.current ) {
-			originalEditingModeRef.current = mode;
+		if ( ! originalIsZoomOutRef.current ) {
+			originalIsZoomOutRef.current = isZoomOut();
 		}
 
-		return () => {
-			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if (
-				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingModeRef.current
-			) {
-				__unstableSetEditorMode( originalEditingModeRef.current );
-			}
-		};
-	}, [] );
-
-	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
-	useEffect( () => {
-		if ( zoomOut && mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
+		// The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
+		if ( zoomOut && isZoomOut() === false ) {
+			setZoomLevel( 50 );
 		} else if (
 			! zoomOut &&
-			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingModeRef.current !== mode
+			isZoomOut() &&
+			originalIsZoomOutRef.current !== isZoomOut()
 		) {
-			__unstableSetEditorMode( originalEditingModeRef.current );
+			setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
 		}
-	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
+
+		return () => {
+			if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
+				setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
+			}
+		};
+	}, [ isZoomOut, setZoomLevel, zoomOut ] );
 }
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index dc7e9d1a167a19..81718449695651 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -12,7 +12,6 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import {
-	Button,
 	ToggleControl,
 	Flex,
 	FlexItem,
@@ -110,7 +109,6 @@ export default {
 					<FlexLayoutVerticalAlignmentControl
 						layout={ layout }
 						onChange={ onChange }
-						isToolbar
 					/>
 				) }
 			</BlockControls>
@@ -190,11 +188,7 @@ export default {
 	},
 };
 
-function FlexLayoutVerticalAlignmentControl( {
-	layout,
-	onChange,
-	isToolbar = false,
-} ) {
+function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 
 	const defaultVerticalAlignment =
@@ -210,54 +204,17 @@ function FlexLayoutVerticalAlignmentControl( {
 			verticalAlignment: value,
 		} );
 	};
-	if ( isToolbar ) {
-		return (
-			<BlockVerticalAlignmentControl
-				onChange={ onVerticalAlignmentChange }
-				value={ verticalAlignment }
-				controls={
-					orientation === 'horizontal'
-						? [ 'top', 'center', 'bottom', 'stretch' ]
-						: [ 'top', 'center', 'bottom', 'space-between' ]
-				}
-			/>
-		);
-	}
-
-	const verticalAlignmentOptions = [
-		{
-			value: 'flex-start',
-			label: __( 'Align items top' ),
-		},
-		{
-			value: 'center',
-			label: __( 'Align items center' ),
-		},
-		{
-			value: 'flex-end',
-			label: __( 'Align items bottom' ),
-		},
-	];
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
-			<legend>{ __( 'Vertical alignment' ) }</legend>
-			<div>
-				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
-					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ verticalAlignment === value }
-							onClick={ () => onVerticalAlignmentChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<BlockVerticalAlignmentControl
+			onChange={ onVerticalAlignmentChange }
+			value={ verticalAlignment }
+			controls={
+				orientation === 'horizontal'
+					? [ 'top', 'center', 'bottom', 'stretch' ]
+					: [ 'top', 'center', 'bottom', 'space-between' ]
+			}
+		/>
 	);
 }
 
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 12f477a95a196b..7205bef5798ec1 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -47,7 +47,6 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
-import { useBlockBindingsUtils } from './utils/block-bindings';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -92,6 +91,5 @@ lock( privateApis, {
 	useBlockDisplayTitle,
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
-	useBlockBindingsUtils,
 	sectionRootClientIdKey,
 } );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e91f997ca67837..ee11838395ec5c 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1728,23 +1728,24 @@ export const __unstableSetEditorMode =
 	};
 
 /**
- * Action that enables or disables the block moving mode.
+ * Set the block moving client ID.
  *
- * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
+ * @deprecated
+ *
+ * @return {Object} Action object.
  */
-export const setBlockMovingClientId =
-	( hasBlockMovingClientId = null ) =>
-	( { dispatch } ) => {
-		dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
-
-		if ( hasBlockMovingClientId ) {
-			speak(
-				__(
-					'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
-				)
-			);
+export function setBlockMovingClientId() {
+	deprecated(
+		'wp.data.dispatch( "core/block-editor" ).setBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
 		}
+	);
+	return {
+		type: 'DO_NOTHING',
 	};
+}
 
 /**
  * Action that duplicates a list of blocks.
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index dc57d61fd6b76c..5571db0ce91066 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -359,6 +359,20 @@ export function expandBlock( clientId ) {
 	};
 }
 
+/**
+ * @param {Object} value
+ * @param {string} value.rootClientId The root client ID to insert at.
+ * @param {number} value.index        The index to insert at.
+ *
+ * @return {Object} Action object.
+ */
+export function setInsertionPoint( value ) {
+	return {
+		type: 'SET_INSERTION_POINT',
+		value,
+	};
+}
+
 /**
  * Temporarily modify/unlock the content-only block for editions.
  *
@@ -383,3 +397,26 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Sets the zoom level.
+ *
+ * @param {number} zoom the new zoom level
+ * @return {Object} Action object.
+ */
+export function setZoomLevel( zoom = 100 ) {
+	return {
+		type: 'SET_ZOOM_LEVEL',
+		zoom,
+	};
+}
+
+/**
+ * Resets the Zoom state.
+ * @return {Object} Action object.
+ */
+export function resetZoomLevel() {
+	return {
+		type: 'RESET_ZOOM_LEVEL',
+	};
+}
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 01ad8f69febc9e..c3228980310656 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -15,6 +15,8 @@ import {
 	getBlockName,
 	getTemplateLock,
 	getClientIdsWithDescendants,
+	isNavigationMode,
+	getBlockRootClientId,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -115,6 +117,7 @@ export const getEnabledClientIdsTree = createSelector(
 		state.settings.templateLock,
 		state.blockListSettings,
 		state.editorMode,
+		getSectionRootClientId( state ),
 	]
 );
 
@@ -471,26 +474,57 @@ export function getExpandedBlock( state ) {
  * with the provided client ID.
  *
  * @param {Object} state    Global application state.
- * @param {Object} clientId Client Id of the block.
+ * @param {string} clientId Client Id of the block.
  *
  * @return {?string} Client ID of the ancestor block that is content locking the block.
  */
-export const getContentLockingParent = createSelector(
-	( state, clientId ) => {
-		let current = clientId;
-		let result;
-		while ( ( current = state.blocks.parents.get( current ) ) ) {
-			if (
-				getBlockName( state, current ) === 'core/block' ||
-				getTemplateLock( state, current ) === 'contentOnly'
-			) {
-				result = current;
-			}
+export const getContentLockingParent = ( state, clientId ) => {
+	let current = clientId;
+	let result;
+	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+		if ( getTemplateLock( state, current ) === 'contentOnly' ) {
+			result = current;
 		}
-		return result;
-	},
-	( state ) => [ state.blocks.parents, state.blockListSettings ]
-);
+	}
+	return result;
+};
+
+/**
+ * Retrieves the client ID of the parent section block.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getParentSectionBlock = ( state, clientId ) => {
+	let current = clientId;
+	let result;
+	while ( ! result && ( current = state.blocks.parents.get( current ) ) ) {
+		if ( isSectionBlock( state, current ) ) {
+			result = current;
+		}
+	}
+	return result;
+};
+
+/**
+ * Retrieves the client ID is a content locking parent
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client Id of the block.
+ *
+ * @return {boolean} Whether the block is a content locking parent.
+ */
+export function isSectionBlock( state, clientId ) {
+	const sectionRootClientId = getSectionRootClientId( state );
+	const sectionClientIds = getBlockOrder( state, sectionRootClientId );
+	return (
+		getBlockName( state, clientId ) === 'core/block' ||
+		getTemplateLock( state, clientId ) === 'contentOnly' ||
+		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
+	);
+}
 
 /**
  * Retrieves the client ID of the block that is content locked but is
@@ -560,3 +594,93 @@ export function isZoomOutMode( state ) {
 export function getSectionRootClientId( state ) {
 	return state.settings?.[ sectionRootClientIdKey ];
 }
+
+/**
+ * Returns the zoom out state.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} The zoom out state.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
+}
+
+/**
+ * Returns whether the editor is considered zoomed out.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the editor is zoomed.
+ */
+export function isZoomOut( state ) {
+	return getZoomLevel( state ) < 100;
+}
+
+/**
+ * Finds the closest block where the block is allowed to be inserted.
+ *
+ * @param {Object}            state    Editor state.
+ * @param {string[] | string} name     Block name or names.
+ * @param {string}            clientId Default insertion point.
+ *
+ * @return {string} clientID of the closest container when the block name can be inserted.
+ */
+export function getClosestAllowedInsertionPoint( state, name, clientId = '' ) {
+	const blockNames = Array.isArray( name ) ? name : [ name ];
+	const areBlockNamesAllowedInClientId = ( id ) =>
+		blockNames.every( ( currentName ) =>
+			canInsertBlockType( state, currentName, id )
+		);
+
+	// If we're trying to insert at the root level and it's not allowed
+	// Try the section root instead.
+	if ( ! clientId ) {
+		if ( areBlockNamesAllowedInClientId( clientId ) ) {
+			return clientId;
+		}
+
+		const sectionRootClientId = getSectionRootClientId( state );
+		if (
+			sectionRootClientId &&
+			areBlockNamesAllowedInClientId( sectionRootClientId )
+		) {
+			return sectionRootClientId;
+		}
+		return null;
+	}
+
+	// Traverse the block tree up until we find a place where we can insert.
+	let current = clientId;
+	while ( current !== null && ! areBlockNamesAllowedInClientId( current ) ) {
+		const parentClientId = getBlockRootClientId( state, current );
+		current = parentClientId;
+	}
+
+	return current;
+}
+
+export function getClosestAllowedInsertionPointForPattern(
+	state,
+	pattern,
+	clientId
+) {
+	const { allowedBlockTypes } = getSettings( state );
+	const isAllowed = checkAllowListRecursive(
+		getGrammar( pattern ),
+		allowedBlockTypes
+	);
+	if ( ! isAllowed ) {
+		return null;
+	}
+	const names = getGrammar( pattern ).map( ( { blockName: name } ) => name );
+	return getClosestAllowedInsertionPoint( state, names, clientId );
+}
+
+/**
+ * Where the point where the next block will be inserted into.
+ *
+ * @param {Object} state
+ * @return {Object} where the insertion point in the block editor is or null if none is set.
+ */
+export function getInsertionPoint( state ) {
+	return state.insertionPoint;
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index cd4569c45e5801..f6445f8a3681c9 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1601,7 +1601,7 @@ export function blocksMode( state = {}, action ) {
  *
  * @return {Object} Updated state.
  */
-export function insertionPoint( state = null, action ) {
+export function insertionCue( state = null, action ) {
 	switch ( action.type ) {
 		case 'SHOW_INSERTION_POINT': {
 			const {
@@ -1795,11 +1795,6 @@ export const blockListSettings = ( state = {}, action ) => {
  * @return {string} Updated state.
  */
 export function editorMode( state = 'edit', action ) {
-	// Let inserting block in navigation mode always trigger Edit mode.
-	if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
-		return 'edit';
-	}
-
 	if ( action.type === 'SET_EDITOR_MODE' ) {
 		return action.mode;
 	}
@@ -1807,26 +1802,6 @@ export function editorMode( state = 'edit', action ) {
 	return state;
 }
 
-/**
- * Reducer returning whether the block moving mode is enabled or not.
- *
- * @param {string|null} state  Current state.
- * @param {Object}      action Dispatched action.
- *
- * @return {string|null} Updated state.
- */
-export function hasBlockMovingClientId( state = null, action ) {
-	if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
-		return action.hasBlockMovingClientId;
-	}
-
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return null;
-	}
-
-	return state;
-}
-
 /**
  * Reducer return an updated state representing the most recent block attribute
  * update. The state is structured as an object where the keys represent the
@@ -2085,6 +2060,44 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting zoom out state.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {number} Updated state.
+ */
+export function zoomLevel( state = 100, action ) {
+	switch ( action.type ) {
+		case 'SET_ZOOM_LEVEL':
+			return action.zoom;
+		case 'RESET_ZOOM_LEVEL':
+			return 100;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer setting the insertion point
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function insertionPoint( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_INSERTION_POINT':
+			return action.value;
+		case 'SELECT_BLOCK':
+			return null;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2098,13 +2111,13 @@ const combinedReducers = combineReducers( {
 	blocksMode,
 	blockListSettings,
 	insertionPoint,
+	insertionCue,
 	template,
 	settings,
 	preferences,
 	lastBlockAttributesChange,
 	lastFocus,
 	editorMode,
-	hasBlockMovingClientId,
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
@@ -2118,6 +2131,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	zoomLevel,
 } );
 
 function withAutomaticChangeReset( reducer ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 30fdb76bdbe787..7bb002661565bd 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -21,7 +21,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import {
-	withRootClientIdOptionKey,
+	isFiltered,
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
@@ -38,6 +38,8 @@ import {
 	getTemporarilyEditingAsBlocks,
 	getTemporarilyEditingFocusModeToRevert,
 	getSectionRootClientId,
+	isSectionBlock,
+	getParentSectionBlock,
 } from './private-selectors';
 
 /**
@@ -78,7 +80,9 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
-const EMPTY_OBJECT = {};
+const DEFAULT_INSERTER_OPTIONS = {
+	[ isFiltered ]: true,
+};
 
 /**
  * Returns a block's name given its client ID, or null if no block exists with
@@ -1450,8 +1454,7 @@ export function isCaretWithinFormattedText() {
 }
 
 /**
- * Returns the insertion point, the index at which the new inserted block would
- * be placed. Defaults to the last index.
+ * Returns the location of the insertion cue. Defaults to the last index.
  *
  * @param {Object} state Editor state.
  *
@@ -1462,11 +1465,11 @@ export const getBlockInsertionPoint = createSelector(
 		let rootClientId, index;
 
 		const {
-			insertionPoint,
+			insertionCue,
 			selection: { selectionEnd },
 		} = state;
-		if ( insertionPoint !== null ) {
-			return insertionPoint;
+		if ( insertionCue !== null ) {
+			return insertionCue;
 		}
 
 		const { clientId } = selectionEnd;
@@ -1481,7 +1484,7 @@ export const getBlockInsertionPoint = createSelector(
 		return { rootClientId, index };
 	},
 	( state ) => [
-		state.insertionPoint,
+		state.insertionCue,
 		state.selection.selectionEnd.clientId,
 		state.blocks.parents,
 		state.blocks.order,
@@ -1489,14 +1492,14 @@ export const getBlockInsertionPoint = createSelector(
 );
 
 /**
- * Returns true if we should show the block insertion point.
+ * Returns true if the block insertion point is visible.
  *
  * @param {Object} state Global application state.
  *
  * @return {?boolean} Whether the insertion point is visible or not.
  */
 export function isBlockInsertionPointVisible( state ) {
-	return state.insertionPoint !== null;
+	return state.insertionCue !== null;
 }
 
 /**
@@ -1582,6 +1585,11 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
+	const _isSectionBlock = !! isSectionBlock( state, rootClientId );
+	if ( _isSectionBlock ) {
+		return false;
+	}
+
 	if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
 		return false;
 	}
@@ -1733,6 +1741,11 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
+	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+	if ( isBlockWithinSection ) {
+		return false;
+	}
+
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
@@ -1996,7 +2009,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
+		( state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {
@@ -2044,56 +2057,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				)
 				.map( buildBlockTypeInserterItem );
 
-			if ( options[ withRootClientIdOptionKey ] ) {
-				blockTypeInserterItems = blockTypeInserterItems.reduce(
-					( accumulator, item ) => {
-						item.rootClientId = rootClientId ?? '';
-
-						while (
-							! canInsertBlockTypeUnmemoized(
-								state,
-								item.name,
-								item.rootClientId
-							)
-						) {
-							if ( ! item.rootClientId ) {
-								let sectionRootClientId;
-								try {
-									sectionRootClientId =
-										getSectionRootClientId( state );
-								} catch ( e ) {}
-								if (
-									sectionRootClientId &&
-									canInsertBlockTypeUnmemoized(
-										state,
-										item.name,
-										sectionRootClientId
-									)
-								) {
-									item.rootClientId = sectionRootClientId;
-								} else {
-									delete item.rootClientId;
-								}
-								break;
-							} else {
-								const parentClientId = getBlockRootClientId(
-									state,
-									item.rootClientId
-								);
-								item.rootClientId = parentClientId;
-							}
-						}
-
-						// We could also add non insertable items and gray them out.
-						if ( item.hasOwnProperty( 'rootClientId' ) ) {
-							accumulator.push( item );
-						}
-
-						return accumulator;
-					},
-					[]
-				);
-			} else {
+			if ( options[ isFiltered ] !== false ) {
 				blockTypeInserterItems = blockTypeInserterItems.filter(
 					( blockType ) =>
 						canIncludeBlockTypeInInserter(
@@ -2102,6 +2066,17 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							rootClientId
 						)
 				);
+			} else {
+				blockTypeInserterItems = blockTypeInserterItems.map(
+					( blockType ) => ( {
+						...blockType,
+						isAllowedInCurrentRoot: canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						),
+					} )
+				);
 			}
 
 			const items = blockTypeInserterItems.reduce(
@@ -2467,7 +2442,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
  * Determines the items that appear in the available pattern transforms list.
  *
  * For now we only handle blocks without InnerBlocks and take into account
- * the `__experimentalRole` property of blocks' attributes for the transformation.
+ * the `role` property of blocks' attributes for the transformation.
  *
  * We return the first set of possible eligible block patterns,
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2489,7 +2464,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 				}
 				/**
 				 * For now we only handle blocks without InnerBlocks and take into account
-				 * the `__experimentalRole` property of blocks' attributes for the transformation.
+				 * the `role` property of blocks' attributes for the transformation.
 				 * Note that the blocks have been retrieved through `getBlock`, which doesn't
 				 * return the inner blocks of an inner block controller, so we still need
 				 * to check for this case too.
@@ -2674,12 +2649,17 @@ export function __unstableGetEditorMode( state ) {
 /**
  * Returns whether block moving mode is enabled.
  *
- * @param {Object} state Editor state.
- *
- * @return {string} Client Id of moving block.
+ * @deprecated
  */
-export function hasBlockMovingClientId( state ) {
-	return state.hasBlockMovingClientId;
+export function hasBlockMovingClientId() {
+	deprecated(
+		'wp.data.select( "core/block-editor" ).hasBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
+		}
+	);
+	return false;
 }
 
 /**
@@ -2862,11 +2842,9 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 		'__experimentalDisableBlockOverlay',
 		false
 	);
-	const shouldEnableIfUnselected =
-		editorMode === 'navigation' ||
-		( blockSupportDisable
-			? false
-			: areInnerBlocksControlled( state, clientId ) );
+	const shouldEnableIfUnselected = blockSupportDisable
+		? false
+		: areInnerBlocksControlled( state, clientId );
 
 	return (
 		shouldEnableIfUnselected &&
@@ -2886,6 +2864,14 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 	return false;
 }
 
+function isWithinBlock( state, clientId, parentClientId ) {
+	let parent = state.blocks.parents.get( clientId );
+	while ( !! parent && parent !== parentClientId ) {
+		parent = state.blocks.parents.get( parent );
+	}
+	return parent === parentClientId;
+}
+
 /**
  * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
  */
@@ -2926,6 +2912,7 @@ export const getBlockEditingMode = createRegistrySelector(
 			if ( clientId === null ) {
 				clientId = '';
 			}
+
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
@@ -2943,28 +2930,76 @@ export const getBlockEditingMode = createRegistrySelector(
 					state,
 					sectionRootClientId
 				);
-				if ( ! sectionsClientIds?.includes( clientId ) ) {
+
+				// Sections are always contentOnly.
+				if ( sectionsClientIds?.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				return 'disabled';
+			}
+
+			if ( editorMode === 'navigation' ) {
+				const sectionRootClientId = getSectionRootClientId( state );
+
+				// The root section is "default mode"
+				if ( clientId === sectionRootClientId ) {
+					return 'default';
+				}
+
+				// Sections should always be contentOnly in navigation mode.
+				const sectionsClientIds = getBlockOrder(
+					state,
+					sectionRootClientId
+				);
+				if ( sectionsClientIds.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				// Blocks outside sections should be disabled.
+				const isWithinSectionRoot = isWithinBlock(
+					state,
+					clientId,
+					sectionRootClientId
+				);
+				if ( ! isWithinSectionRoot ) {
 					return 'disabled';
 				}
+
+				// The rest of the blocks depend on whether they are content blocks or not.
+				// This "flattens" the sections tree.
+				const name = getBlockName( state, clientId );
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
+
+				return isContent ? 'contentOnly' : 'disabled';
 			}
 
+			// In normal mode, consider that an explicitely set editing mode takes over.
 			const blockEditingMode = state.blockEditingModes.get( clientId );
 			if ( blockEditingMode ) {
 				return blockEditingMode;
 			}
+
+			// In normal mode, top level is default mode.
 			if ( ! clientId ) {
 				return 'default';
 			}
+
 			const rootClientId = getBlockRootClientId( state, clientId );
 			const templateLock = getTemplateLock( state, rootClientId );
+			// If the parent of the block is contentOnly locked, check whether it's a content block.
 			if ( templateLock === 'contentOnly' ) {
 				const name = getBlockName( state, clientId );
-				const isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
 				return isContent ? 'contentOnly' : 'disabled';
 			}
+			// Otherwise, check if there's an ancestor that is contentOnly
 			const parentMode = getBlockEditingMode( state, rootClientId );
 			return parentMode === 'contentOnly' ? 'default' : parentMode;
 		}
diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js
index 7576b95866306a..d54a519c9056b6 100644
--- a/packages/block-editor/src/store/test/private-actions.js
+++ b/packages/block-editor/src/store/test/private-actions.js
@@ -6,6 +6,7 @@ import {
 	showBlockInterface,
 	expandBlock,
 	__experimentalUpdateSettings,
+	setInsertionPoint,
 	setOpenedBlockSettingsMenu,
 	startDragging,
 	stopDragging,
@@ -123,4 +124,18 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setInsertionPoint', () => {
+		it( 'should return the SET_INSERTION_POINT action', () => {
+			expect(
+				setInsertionPoint( {
+					rootClientId: '',
+					index: '123',
+				} )
+			).toEqual( {
+				type: 'SET_INSERTION_POINT',
+				value: { rootClientId: '', index: '123' },
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
index 45432b750bb9eb..cbb75daa4baaa0 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -124,10 +124,10 @@ describe( 'private selectors', () => {
 			blockEditingModes: new Map( [] ),
 		};
 
-		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		const hasContentRoleAttribute = jest.fn( () => false );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
-				__experimentalHasContentRoleAttribute,
+				hasContentRoleAttribute,
 			} ) ),
 		};
 
@@ -394,6 +394,10 @@ describe( 'private selectors', () => {
 					parents: new Map( [
 						[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
 					] ),
+					order: new Map( [
+						[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+						[ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ],
+					] ),
 				},
 				blockEditingModes: new Map(),
 			};
@@ -424,6 +428,21 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 						],
 					] ),
+
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[
+								'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+								'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
@@ -461,6 +480,21 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 						],
 					] ),
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ],
+						],
+						[
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index cd472fa59ac724..1f1b9a9143d981 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -28,6 +28,7 @@ import {
 	isMultiSelecting,
 	preferences,
 	blocksMode,
+	insertionCue,
 	insertionPoint,
 	template,
 	blockListSettings,
@@ -2378,15 +2379,15 @@ describe( 'state', () => {
 		} );
 	} );
 
-	describe( 'insertionPoint', () => {
+	describe( 'insertionCue', () => {
 		it( 'should default to null', () => {
-			const state = insertionPoint( undefined, {} );
+			const state = insertionCue( undefined, {} );
 
 			expect( state ).toBe( null );
 		} );
 
 		it( 'should set insertion point', () => {
-			const state = insertionPoint( null, {
+			const state = insertionCue( null, {
 				type: 'SHOW_INSERTION_POINT',
 				rootClientId: 'clientId1',
 				index: 0,
@@ -2403,7 +2404,7 @@ describe( 'state', () => {
 				rootClientId: 'clientId1',
 				index: 0,
 			} );
-			const state = insertionPoint( original, {
+			const state = insertionCue( original, {
 				type: 'HIDE_INSERTION_POINT',
 			} );
 
@@ -3485,4 +3486,39 @@ describe( 'state', () => {
 			expect( state ).toBe( null );
 		} );
 	} );
+
+	describe( 'insertionPoint', () => {
+		it( 'should default to null', () => {
+			const state = insertionPoint( undefined, {} );
+
+			expect( state ).toBe( null );
+		} );
+
+		it( 'should set insertion point', () => {
+			const state = insertionPoint( null, {
+				type: 'SET_INSERTION_POINT',
+				value: {
+					rootClientId: 'clientId1',
+					index: 4,
+				},
+			} );
+
+			expect( state ).toEqual( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+		} );
+
+		it( 'should clear the insertion point on block selection', () => {
+			const original = deepFreeze( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+			const state = insertionPoint( original, {
+				type: 'SELECT_BLOCK',
+			} );
+
+			expect( state ).toBe( null );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 85006621c4701e..a08c2e0dde1508 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -15,6 +15,8 @@ import { select, dispatch } from '@wordpress/data';
  */
 import * as selectors from '../selectors';
 import { store } from '../';
+import { sectionRootClientIdKey } from '../private-keys';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -2423,7 +2425,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 0,
 				},
@@ -2464,7 +2466,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2502,7 +2504,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			const insertionPoint1 = getBlockInsertionPoint( state );
@@ -2544,7 +2546,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2586,7 +2588,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2628,7 +2630,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2641,7 +2643,7 @@ describe( 'selectors', () => {
 	describe( 'isBlockInsertionPointVisible', () => {
 		it( 'should return false if no assigned insertion point', () => {
 			const state = {
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( isBlockInsertionPointVisible( state ) ).toBe( false );
@@ -2649,7 +2651,7 @@ describe( 'selectors', () => {
 
 		it( 'should return true if assigned insertion point', () => {
 			const state = {
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 5,
 				},
@@ -2694,6 +2696,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2711,6 +2714,7 @@ describe( 'selectors', () => {
 				blocks: {
 					byClientId: new Map(),
 					attributes: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2728,6 +2732,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2748,6 +2753,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2772,6 +2778,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2796,6 +2803,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2822,6 +2830,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2848,6 +2857,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2876,6 +2886,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2904,6 +2915,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2932,6 +2944,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2960,6 +2973,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2976,6 +2990,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2992,7 +3007,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(
 						Object.entries( {
 							block1: { name: 'core/test-block-ancestor' },
-							block2: { name: 'core/block' },
+							block2: { name: 'core/block1' },
 						} )
 					),
 					attributes: new Map(
@@ -3006,6 +3021,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3023,6 +3042,37 @@ describe( 'selectors', () => {
 			).toBe( true );
 		} );
 
+		it( 'should prevent blocks from being inserted within sections', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/block' }, // reusable blocks are always sections.
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block1: '',
+						} )
+					),
+					order: new Map( [ [ '', [ 'block1' ] ] ] ),
+				},
+				blockListSettings: {
+					block1: {},
+				},
+				settings: {},
+				blockEditingModes: new Map(),
+			};
+			expect(
+				canInsertBlockType( state, 'core/test-block-a', 'block1' )
+			).toBe( false );
+		} );
+
 		it( 'should allow blocks to be inserted if both parent and ancestor restrictions are met', () => {
 			const state = {
 				blocks: {
@@ -3046,6 +3096,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3086,6 +3141,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3126,6 +3186,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3159,11 +3224,14 @@ describe( 'selectors', () => {
 							block2: {},
 						} )
 					),
-					parents: new Map(
-						Object.entries( {
-							block2: 'block1',
-						} )
-					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
+					parents: new Map( [
+						[ 'block2', 'block1' ],
+						[ 'block1', '' ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3203,6 +3271,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3240,6 +3312,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -3273,6 +3346,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -4310,12 +4384,28 @@ describe( 'getBlockEditingMode', () => {
 		settings: {},
 		blocks: {
 			byClientId: new Map( [
-				[ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header
-				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group
-				[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // |  Post Title
-				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // |  Post Content
-				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | |  Paragraph
-				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | |  Paragraph
+				[
+					'6cf70164-9097-4460-bcbf-200560546988',
+					{ name: 'core/template-part' },
+				], // Header
+				[
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					{ name: 'core/group' },
+				], // Group
+				[
+					'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					{ name: 'core/post-title' },
+				], // |  Post Title
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					{ name: 'core/group' },
+				], // |  Group
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', { name: 'core/p' } ], // | |  Paragraph
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', { name: 'core/p' } ], // | |  Paragraph
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					{ name: 'core/group' },
+				], // | | Group
 			] ),
 			order: new Map( [
 				[
@@ -4339,10 +4429,12 @@ describe( 'getBlockEditingMode', () => {
 					[
 						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
 						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
 					],
 				],
 				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ],
 				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', [] ],
 			] ),
 			parents: new Map( [
 				[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
@@ -4363,6 +4455,10 @@ describe( 'getBlockEditingMode', () => {
 					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
 				],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
 			] ),
 		},
 		blockListSettings: {
@@ -4372,11 +4468,22 @@ describe( 'getBlockEditingMode', () => {
 		blockEditingModes: new Map( [] ),
 	};
 
-	const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+	const navigationModeStateWithRootSection = {
+		...baseState,
+		editorMode: 'navigation',
+		settings: {
+			[ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
+		},
+	};
+
+	const hasContentRoleAttribute = jest.fn( () => false );
+
+	const fauxPrivateAPIs = {};
+
+	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+
 	getBlockEditingMode.registry = {
-		select: jest.fn( () => ( {
-			__experimentalHasContentRoleAttribute,
-		} ) ),
+		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
 	it( 'should return default by default', () => {
@@ -4480,7 +4587,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+		hasContentRoleAttribute.mockReturnValueOnce( false );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'disabled' );
@@ -4496,9 +4603,69 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'contentOnly' );
 	} );
+
+	it( 'in navigation mode, the root section container is default', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+			)
+		).toBe( 'default' );
+	} );
+
+	it( 'in navigation mode, anything outside the section container is disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'6cf70164-9097-4460-bcbf-200560546988'
+			)
+		).toBe( 'disabled' );
+	} );
+
+	it( 'in navigation mode, sections are contentOnly', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b26fc763-417d-4f01-b81c-2ec61e14a972'
+			)
+		).toBe( 'contentOnly' );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+			)
+		).toBe( 'contentOnly' );
+
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
+			)
+		).toBe( 'disabled' );
+	} );
 } );
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index b630912a5163d6..9b83a8f74cf9aa 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -10,9 +10,9 @@ import { parse as grammarParse } from '@wordpress/block-serialization-default-pa
 import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
+import { getSectionRootClientId } from './private-selectors';
 
-export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
-
+export const isFiltered = Symbol( 'isFiltered' );
 const parsedPatternCache = new WeakMap();
 const grammarMapCache = new WeakMap();
 
@@ -117,5 +117,7 @@ export function getInsertBlockTypeDependants( state, rootClientId ) {
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		state.blockEditingModes,
+		state.editorMode,
+		getSectionRootClientId( state ),
 	];
 }
diff --git a/packages/block-editor/src/utils/block-bindings.js b/packages/block-editor/src/utils/block-bindings.js
index b3daf4f4b36b43..db4de9d39cb253 100644
--- a/packages/block-editor/src/utils/block-bindings.js
+++ b/packages/block-editor/src/utils/block-bindings.js
@@ -13,6 +13,53 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+/**
+ * Contains utils to update the block `bindings` metadata.
+ *
+ * @typedef {Object} WPBlockBindingsUtils
+ *
+ * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.
+ * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
+ */
+
+/**
+ * Retrieves the existing utils needed to update the block `bindings` metadata.
+ * They can be used to create, modify, or remove connections from the existing block attributes.
+ *
+ * It contains the following utils:
+ * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+ * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+ *
+ * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
+ *
+ * @example
+ * ```js
+ * import { useBlockBindingsUtils } from '@wordpress/block-editor'
+ * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+ *
+ * // Update url and alt attributes.
+ * updateBlockBindings( {
+ *     url: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'url_custom_field',
+ *         },
+ *     },
+ *     alt: {
+ *         source: 'core/post-meta',
+ *         args: {
+ *             key: 'text_custom_field',
+ *         },
+ *     },
+ * } );
+ *
+ * // Remove binding from url attribute.
+ * updateBlockBindings( { url: undefined } );
+ *
+ * // Remove bindings from all attributes.
+ * removeAllBlockBindings();
+ * ```
+ */
 export function useBlockBindingsUtils() {
 	const { clientId } = useBlockEditContext();
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
diff --git a/packages/block-editor/src/utils/index.js b/packages/block-editor/src/utils/index.js
index 6f53ba585e5ecb..1b5aa769a13b28 100644
--- a/packages/block-editor/src/utils/index.js
+++ b/packages/block-editor/src/utils/index.js
@@ -1,2 +1,3 @@
 export { default as transformStyles } from './transform-styles';
 export { default as getPxFromCssUnit } from './get-px-from-css-unit';
+export { useBlockBindingsUtils } from './block-bindings';
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 4ee3ebc7564b53..08accf8c36d9e5 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.8.0 (2024-09-19)
+
 ## 9.7.0 (2024-09-05)
 
 ## 9.6.0 (2024-08-21)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 1353ef24c77d89..aa9daf62dda63a 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.7.0",
+	"version": "9.8.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
index bee2ff6d534a70..9b77efee23cce2 100644
--- a/packages/block-library/src/audio/block.json
+++ b/packages/block-library/src/audio/block.json
@@ -10,24 +10,24 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "audio",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"autoplay": {
 			"type": "boolean",
diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js
index d318450aec3903..0b3ad9c62c4e30 100644
--- a/packages/block-library/src/avatar/index.js
+++ b/packages/block-library/src/avatar/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index 5c90361e6bb435..104b07157cba74 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -32,7 +32,7 @@ import {
 	InnerBlocks,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -196,7 +196,6 @@ function ReusableBlockEdit( {
 		( select ) => {
 			const { getBlocks, getSettings, getBlockEditingMode } =
 				select( blockEditorStore );
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index d0f90b93467c9d..2c1c05baa20dd3 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -26,34 +26,34 @@
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a,button",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"text": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "a,button",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "target",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "rel",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"placeholder": {
 			"type": "string"
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index d7b8e6486c3c66..3539fd54f4eece 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
-import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -45,7 +44,7 @@ import {
 	createBlock,
 	cloneBlock,
 	getDefaultBlockName,
-	store as blocksStore,
+	getBlockBindingsSource,
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -240,9 +239,9 @@ function ButtonEdit( props ) {
 				return {};
 			}
 
-			const blockBindingsSource = unlock(
-				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
 
 			return {
 				lockUrlControls:
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 8492553bd50b81..e563f3957f3746 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -2,6 +2,8 @@
 $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	&.is-vertical {
 		flex-direction: column;
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index 460fbef92fdab2..3609bdf9ab97c0 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -2,11 +2,16 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/categories",
-	"title": "Categories List",
+	"title": "Terms List",
 	"category": "widgets",
-	"description": "Display a list of all categories.",
+	"description": "Display a list of all terms of a given taxonomy.",
+	"keywords": [ "categories" ],
 	"textdomain": "default",
 	"attributes": {
+		"taxonomy": {
+			"type": "string",
+			"default": "category"
+		},
 		"displayAsDropdown": {
 			"type": "boolean",
 			"default": false
@@ -29,7 +34,7 @@
 		},
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 48d505eeb75aee..8bd2769b0ec711 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	PanelBody,
 	Placeholder,
+	SelectControl,
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
@@ -20,7 +21,7 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
@@ -33,19 +34,33 @@ export default function CategoriesEdit( {
 		showEmpty,
 		label,
 		showLabel,
+		taxonomy: taxonomySlug,
 	},
 	setAttributes,
 	className,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
+
+	const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
+		'root',
+		'taxonomy'
+	);
+
+	const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public );
+
+	const taxonomy = taxonomies?.find( ( t ) => t.slug === taxonomySlug );
+
+	const isHierarchicalTaxonomy =
+		! isResolvingTaxonomies && taxonomy?.hierarchical;
+
 	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
-	if ( showOnlyTopLevel ) {
+	if ( isHierarchicalTaxonomy && showOnlyTopLevel ) {
 		query.parent = 0;
 	}
 
 	const { records: categories, isResolving } = useEntityRecords(
 		'taxonomy',
-		'category',
+		taxonomySlug,
 		query
 	);
 
@@ -66,7 +81,7 @@ export default function CategoriesEdit( {
 		! name ? __( '(Untitled)' ) : decodeEntities( name ).trim();
 
 	const renderCategoryList = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return categoriesList.map( ( category ) =>
 			renderCategoryListItem( category )
@@ -82,19 +97,21 @@ export default function CategoriesEdit( {
 					{ renderCategoryName( name ) }
 				</a>
 				{ showPostCounts && ` (${ count })` }
-				{ showHierarchy && !! childCategories.length && (
-					<ul className="children">
-						{ childCategories.map( ( childCategory ) =>
-							renderCategoryListItem( childCategory )
-						) }
-					</ul>
-				) }
+				{ isHierarchicalTaxonomy &&
+					showHierarchy &&
+					!! childCategories.length && (
+						<ul className="children">
+							{ childCategories.map( ( childCategory ) =>
+								renderCategoryListItem( childCategory )
+							) }
+						</ul>
+					) }
 			</li>
 		);
 	};
 
 	const renderCategoryDropdown = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
@@ -102,7 +119,7 @@ export default function CategoriesEdit( {
 					<RichText
 						className="wp-block-categories__label"
 						aria-label={ __( 'Label text' ) }
-						placeholder={ __( 'Categories' ) }
+						placeholder={ taxonomy.name }
 						withoutInteractiveFormatting
 						value={ label }
 						onChange={ ( html ) =>
@@ -111,11 +128,17 @@ export default function CategoriesEdit( {
 					/>
 				) : (
 					<VisuallyHidden as="label" htmlFor={ selectId }>
-						{ label ? label : __( 'Categories' ) }
+						{ label ? label : taxonomy.name }
 					</VisuallyHidden>
 				) }
 				<select id={ selectId }>
-					<option>{ __( 'Select Category' ) }</option>
+					<option>
+						{ sprintf(
+							/* translators: %s: taxonomy's singular name */
+							__( 'Select %s' ),
+							taxonomy.labels.singular_name
+						) }
+					</option>
 					{ categoriesList.map( ( category ) =>
 						renderCategoryDropdownItem( category, 0 )
 					) }
@@ -133,7 +156,8 @@ export default function CategoriesEdit( {
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
 			</option>,
-			showHierarchy &&
+			isHierarchicalTaxonomy &&
+				showHierarchy &&
 				!! childCategories.length &&
 				childCategories.map( ( childCategory ) =>
 					renderCategoryDropdownItem( childCategory, level + 1 )
@@ -161,6 +185,23 @@ export default function CategoriesEdit( {
 		<TagName { ...blockProps }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
+					{ Array.isArray( taxonomies ) && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ taxonomies.map( ( t ) => ( {
+								label: t.name,
+								value: t.slug,
+							} ) ) }
+							value={ taxonomySlug }
+							onChange={ ( selectedTaxonomy ) =>
+								setAttributes( {
+									taxonomy: selectedTaxonomy,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
@@ -182,19 +223,21 @@ export default function CategoriesEdit( {
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					{ isHierarchicalTaxonomy && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show only top level terms' ) }
+							checked={ showOnlyTopLevel }
+							onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show only top level categories' ) }
-						checked={ showOnlyTopLevel }
-						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show empty categories' ) }
+						label={ __( 'Show empty terms' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
-					{ ! showOnlyTopLevel && (
+					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
@@ -205,16 +248,12 @@ export default function CategoriesEdit( {
 				</PanelBody>
 			</InspectorControls>
 			{ isResolving && (
-				<Placeholder icon={ pin } label={ __( 'Categories' ) }>
+				<Placeholder icon={ pin } label={ __( 'Terms' ) }>
 					<Spinner />
 				</Placeholder>
 			) }
 			{ ! isResolving && categories?.length === 0 && (
-				<p>
-					{ __(
-						'Your site does not have any posts, so there is nothing to display here at the moment.'
-					) }
-				</p>
+				<p>{ taxonomy.labels.no_terms }</p>
 			) }
 			{ ! isResolving &&
 				categories?.length > 0 &&
diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js
index 8cdcad450862a2..d30c55667d106e 100644
--- a/packages/block-library/src/categories/index.js
+++ b/packages/block-library/src/categories/index.js
@@ -9,6 +9,7 @@ import { category as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index 5c0cc63415cb78..60a29713b4660d 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -21,11 +21,14 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$taxonomy = get_taxonomy( $attributes['taxonomy'] );
+
 	$args = array(
 		'echo'         => false,
 		'hierarchical' => ! empty( $attributes['showHierarchy'] ),
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
+		'taxonomy'     => $attributes['taxonomy'],
 		'title_li'     => '',
 		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
@@ -36,13 +39,20 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
-		$args['show_option_none'] = __( 'Select Category' );
-		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
-		$default_label            = __( 'Categories' );
-		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
-		$items_markup             = wp_dropdown_categories( $args );
-		$type                     = 'dropdown';
+		$args['name']             = $taxonomy->query_var;
+		$args['value_field']      = 'slug';
+		$args['show_option_none'] = sprintf(
+			/* translators: %s: taxonomy's singular name */
+			__( 'Select %s' ),
+			$taxonomy->labels->singular_name
+		);
+
+		$show_label     = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label  = $taxonomy->label;
+		$label_text     = ! empty( $attributes['label'] ) ? wp_kses_post( $attributes['label'] ) : $default_label;
+		$wrapper_markup = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
+		$items_markup   = wp_dropdown_categories( $args );
+		$type           = 'dropdown';
 
 		if ( ! is_admin() ) {
 			// Inject the dropdown script immediately after the select dropdown.
@@ -54,6 +64,8 @@ function render_block_core_categories( $attributes, $content, $block ) {
 			);
 		}
 	} else {
+		$args['show_option_none'] = $taxonomy->labels->no_terms;
+
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
@@ -92,8 +104,8 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	( function() {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
-			if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-				location.href = "<?php echo esc_url( home_url() ); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
+			if ( dropdown.options[ dropdown.selectedIndex ].value !== -1 ) {
+				location.href = "<?php echo esc_url( home_url() ); ?>/?" + dropdown.name + '=' + dropdown.options[ dropdown.selectedIndex ].value;
 			}
 		}
 		dropdown.onchange = onCatChange;
diff --git a/packages/block-library/src/categories/variations.js b/packages/block-library/src/categories/variations.js
new file mode 100644
index 00000000000000..94f3fb8efa6b9a
--- /dev/null
+++ b/packages/block-library/src/categories/variations.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { category as icon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'terms',
+		title: __( 'Terms List' ),
+		icon,
+		attributes: {
+			// We need to set an attribute here that will be set when inserting the block.
+			// We cannot leave this empty, as that would be interpreted as the default value,
+			// which is `category` -- for which we're defining a distinct variation below,
+			// for backwards compatibility reasons.
+			// The logical fallback is thus the only other built-in and public taxonomy: Tags.
+			taxonomy: 'post_tag',
+		},
+		isActive: ( blockAttributes ) =>
+			// This variation is used for any taxonomy other than `category`.
+			blockAttributes.taxonomy !== 'category',
+	},
+	{
+		name: 'categories',
+		title: __( 'Categories List' ),
+		description: __( 'Display a list of all categories.' ),
+		icon,
+		attributes: {
+			taxonomy: 'category',
+		},
+		isActive: [ 'taxonomy' ],
+		// The following is needed to prevent "Terms List" from showing up twice in the inserter
+		// (once for the block, once for the variation). Fortunately, it does not collide with
+		// `categories` being the default value of the `taxonomy` attribute.
+		isDefault: true,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js
index 4d85bbebe047be..5bcb6896564807 100644
--- a/packages/block-library/src/comment-author-name/index.js
+++ b/packages/block-library/src/comment-author-name/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js
index 130f1d30125559..aefcef75acf8ae 100644
--- a/packages/block-library/src/comment-content/index.js
+++ b/packages/block-library/src/comment-content/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js
index fddae539acfa34..d95c0a958f9ed8 100644
--- a/packages/block-library/src/comment-date/index.js
+++ b/packages/block-library/src/comment-date/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-edit-link/index.js b/packages/block-library/src/comment-edit-link/index.js
index 6639dda86a7a40..ffe8c98a75dfd9 100644
--- a/packages/block-library/src/comment-edit-link/index.js
+++ b/packages/block-library/src/comment-edit-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-reply-link/index.js b/packages/block-library/src/comment-reply-link/index.js
index c04f8ce7b1bba5..a8287f6b08ff35 100644
--- a/packages/block-library/src/comment-reply-link/index.js
+++ b/packages/block-library/src/comment-reply-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 22e20bfa8dbf2d..3f7ebe677328d5 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Next Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 14a323df3a13ae..0fd9519a56d304 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -37,7 +37,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 		$label .= $pagination_arrow;
 	}
 
-	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] );
+	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 
diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js
index 3fd903e2d9ef48..f769f54b4ac034 100644
--- a/packages/block-library/src/comments-pagination-numbers/index.js
+++ b/packages/block-library/src/comments-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index 0871b000c569dd..eb5203af33c866 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-previous/index.php b/packages/block-library/src/comments-pagination-previous/index.php
index b70a9f609da9f0..ba9bef97ad34d9 100644
--- a/packages/block-library/src/comments-pagination-previous/index.php
+++ b/packages/block-library/src/comments-pagination-previous/index.php
@@ -30,7 +30,7 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
 	$comment_vars           = build_comment_query_vars_from_block( $block );
-	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] );
+	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 86bdab0dbccbff..69b8228eab892b 100644
--- a/packages/block-library/src/comments-title/index.js
+++ b/packages/block-library/src/comments-title/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
index a42aafbab4b0b9..5bfb63b0fa9e94 100644
--- a/packages/block-library/src/embed/block.json
+++ b/packages/block-library/src/embed/block.json
@@ -9,21 +9,21 @@
 	"attributes": {
 		"url": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"providerNameSlug": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"allowResponsive": {
 			"type": "boolean",
@@ -32,12 +32,12 @@
 		"responsive": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"previewable": {
 			"type": "boolean",
 			"default": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index 0526120c4dfc1e..bf0082c576dd16 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -13,7 +13,7 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"href": {
 			"type": "string"
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 85cc840201da59..8ea668d56d8545 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -19,18 +19,7 @@
 function render_block_core_file( $attributes, $content ) {
 	// If it's interactive, enqueue the script module and add the directives.
 	if ( ! empty( $attributes['displayPreview'] ) ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/file/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/file',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/file/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/file' );
+		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
diff --git a/packages/block-library/src/form-input/block.json b/packages/block-library/src/form-input/block.json
index 53aa0be6744cb9..386c90ac207ad4 100644
--- a/packages/block-library/src/form-input/block.json
+++ b/packages/block-library/src/form-input/block.json
@@ -23,7 +23,7 @@
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
 			"source": "rich-text",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"inlineLabel": {
 			"type": "boolean",
@@ -41,7 +41,7 @@
 			"selector": ".wp-block-form-input__input",
 			"source": "attribute",
 			"attribute": "placeholder",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"value": {
 			"type": "string",
diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index 451cc704a42d55..d974cca387a188 100644
--- a/packages/block-library/src/form-input/deprecated.js
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -41,7 +41,7 @@ const v2 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -59,7 +59,7 @@ const v2 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
@@ -155,7 +155,7 @@ const v1 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -173,7 +173,7 @@ const v1 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 11beecbab0eb68..739a9cd0cf852e 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -39,9 +39,9 @@
 	&::after {
 		content: "";
 		display: flex;
-		flex: 1 0 $grid-unit-60;
+		flex: 1 0 $button-size-next-default-40px;
 		pointer-events: none;
-		min-height: $grid-unit-60 - $border-width - $border-width;
+		min-height: $button-size-next-default-40px - $border-width - $border-width;
 		border: $border-width dashed currentColor;
 	}
 
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 6e43a18cfba452..2276bcbbb50172 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"level": {
 			"type": "number",
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index a97415712bf07c..76b175ac44fc40 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -259,7 +259,7 @@ const v5 = {
 			source: 'html',
 			selector: 'h1,h2,h3,h4,h5,h6',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		level: {
 			type: 'number',
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 6417879164a22b..f441a6e893290b 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -11,14 +11,14 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"alt": {
 			"type": "string",
@@ -26,13 +26,13 @@
 			"selector": "img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"lightbox": {
 			"type": "object",
@@ -45,14 +45,14 @@
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"href": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -68,7 +68,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "string"
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 135463a377131f..6c1db75c5e2aa5 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -559,7 +559,7 @@ const v6 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -567,27 +567,27 @@ const v6 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -603,7 +603,7 @@ const v6 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -762,7 +762,7 @@ const v7 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -770,27 +770,27 @@ const v7 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -806,7 +806,7 @@ const v7 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -962,7 +962,7 @@ const v8 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -970,27 +970,27 @@ const v8 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -1006,7 +1006,7 @@ const v8 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'string',
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index d44dc73abfd855..360c4b8e6127b8 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { isBlobURL, createBlobURL } from '@wordpress/blob';
-import { store as blocksStore, createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockBindingsSource } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -28,7 +28,6 @@ import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
 import { isValidFileType } from './utils';
@@ -372,9 +371,9 @@ export function ImageEdit( {
 				return {};
 			}
 
-			const blockBindingsSource = unlock(
-				select( blocksStore )
-			).getBlockBindingsSource( metadata?.bindings?.url?.source );
+			const blockBindingsSource = getBlockBindingsSource(
+				metadata?.bindings?.url?.source
+			);
 
 			return {
 				lockUrlControls:
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 1673d36e463d5a..89bf31f92664b9 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -34,7 +34,7 @@ import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
-import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -476,7 +476,6 @@ export default function Image( {
 			if ( ! isSingleSelected ) {
 				return {};
 			}
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index abbb03c0952452..5d7815a1f2f3fb 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -70,19 +70,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		isset( $lightbox_settings['enabled'] ) &&
 		true === $lightbox_settings['enabled']
 	) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/image/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/image',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-
-		wp_enqueue_script_module( '@wordpress/block-library/image' );
+		wp_enqueue_script_module( '@wordpress/block-library/image/view' );
 
 		/*
 		 * This render needs to happen in a filter with priority 15 to ensure that
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index a4bf2351d97509..6eb30cfe6d0af0 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -16,7 +16,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "li",
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index ea07a0eb542df3..4a86def8d687b4 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -12,7 +12,7 @@
 		"ordered": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"values": {
 			"type": "string",
@@ -21,7 +21,7 @@
 			"multiline": "li",
 			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string"
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index edb04dff27c904..13804b7040ed46 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -14,7 +14,7 @@ const v0 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -23,7 +23,7 @@ const v0 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -74,7 +74,7 @@ const v1 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -83,7 +83,7 @@ const v1 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -144,7 +144,7 @@ const v2 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -153,7 +153,7 @@ const v2 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -225,7 +225,7 @@ const v3 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -234,7 +234,7 @@ const v3 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 42384c0c4478e0..0c2cfc4a14995a 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -18,7 +18,7 @@
 			"selector": "figure img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaPosition": {
 			"type": "string",
@@ -26,14 +26,14 @@
 		},
 		"mediaId": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaUrl": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure video,figure img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaLink": {
 			"type": "string"
@@ -52,7 +52,7 @@
 			"source": "attribute",
 			"selector": "figure a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -68,7 +68,7 @@
 		},
 		"mediaType": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaWidth": {
 			"type": "number",
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 54c6f863311ffe..24f239a41ed295 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -172,29 +172,29 @@ const v6Attributes = {
 		selector: 'figure img',
 		attribute: 'alt',
 		default: '',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaId: {
 		type: 'number',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaUrl: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure video,figure img',
 		attribute: 'src',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	href: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure a',
 		attribute: 'href',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaType: {
 		type: 'string',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 };
 
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index ec72b03b6906f0..fa9bb5a56f8012 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -622,18 +622,7 @@ private static function get_nav_element_directives( $is_interactive ) {
 	 */
 	private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build-module/block-library/navigation/view.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/navigation',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/navigation/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/navigation' );
+			wp_enqueue_script_module( '@wordpress/block-library/navigation/view' );
 		}
 	}
 
@@ -1510,9 +1499,15 @@ function block_core_navigation_mock_parsed_block( $inner_blocks, $post ) {
  */
 function block_core_navigation_insert_hooked_blocks( $inner_blocks, $post ) {
 	$mock_navigation_block = block_core_navigation_mock_parsed_block( $inner_blocks, $post );
-	$hooked_blocks         = get_hooked_blocks();
-	$before_block_visitor  = null;
-	$after_block_visitor   = null;
+
+	if ( function_exists( 'apply_block_hooks_to_content' ) ) {
+		$mock_navigation_block_markup = serialize_block( $mock_navigation_block );
+		return apply_block_hooks_to_content( $mock_navigation_block_markup, $post, 'insert_hooked_blocks' );
+	}
+
+	$hooked_blocks        = get_hooked_blocks();
+	$before_block_visitor = null;
+	$after_block_visitor  = null;
 
 	if ( ! empty( $hooked_blocks ) || has_filter( 'hooked_block_types' ) ) {
 		$before_block_visitor = make_before_block_visitor( $hooked_blocks, $post, 'insert_hooked_blocks' );
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index f16a7cf0411443..7e004019cbf282 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"dropCap": {
 			"type": "boolean",
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index ce733759846fee..5f1b295119822a 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -34,6 +34,12 @@
 			"default": ""
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Next post",
+			"arrow": "arrow"
+		}
+	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js
index 945d6eb550f276..4f52b21338af1e 100644
--- a/packages/block-library/src/post-navigation-link/variations.js
+++ b/packages/block-library/src/post-navigation-link/variations.js
@@ -15,6 +15,12 @@ const variations = [
 		icon: next,
 		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Next post',
+				arrow: 'arrow',
+			},
+		},
 	},
 	{
 		name: 'post-previous',
@@ -25,6 +31,12 @@ const variations = [
 		icon: previous,
 		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Previous post',
+				arrow: 'arrow',
+			},
+		},
 	},
 ];
 
diff --git a/packages/block-library/src/post-time-to-read/index.js b/packages/block-library/src/post-time-to-read/index.js
index 95b379f55f0b3f..039923161ca81d 100644
--- a/packages/block-library/src/post-time-to-read/index.js
+++ b/packages/block-library/src/post-time-to-read/index.js
@@ -12,6 +12,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 5e7d3eee9dd11d..ecb5053d6cd39e 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -80,8 +80,5 @@
 			}
 		}
 	},
-	"style": "wp-block-post-title",
-	"selectors": {
-		"typography": ".wp-block-post-title, .wp-block-post-title > a"
-	}
+	"style": "wp-block-post-title"
 }
diff --git a/packages/block-library/src/post-title/style.scss b/packages/block-library/src/post-title/style.scss
index 5d0e3407105bd4..8dfd25b1a0786b 100644
--- a/packages/block-library/src/post-title/style.scss
+++ b/packages/block-library/src/post-title/style.scss
@@ -3,31 +3,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&[style*="font-weight"] :where(a) {
-		font-weight: inherit;
-	}
-	&[class*="-font-family"] :where(a),
-	&[style*="font-family"] :where(a) {
+	:where(a) {
+		display: inline-block;
 		font-family: inherit;
-	}
-	&[class*="-font-size"] :where(a),
-	&[style*="font-size"] :where(a) {
 		font-size: inherit;
-	}
-	&[style*="line-height"] :where(a) {
-		line-height: inherit;
-	}
-	&[style*="font-style"] :where(a) {
 		font-style: inherit;
-	}
-	&[style*="letter-spacing"] :where(a) {
+		font-weight: inherit;
 		letter-spacing: inherit;
-	}
-	&[style*="text-decoration"] :where(a) {
+		line-height: inherit;
 		text-decoration: inherit;
 	}
-
-	a {
-		display: inline-block;
-	}
 }
diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index a1726ee8b0d43c..c25b8ce37093a5 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -12,7 +12,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 0935f9759668d5..271bba74d0252a 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -11,13 +11,13 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 6e6f49da91c6a3..18e47997550782 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -75,14 +75,14 @@ const v5 = {
 			source: 'html',
 			selector: 'blockquote',
 			multiline: 'p',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json
index 8f3ba56adcc36a..2f656594afa306 100644
--- a/packages/block-library/src/query-no-results/block.json
+++ b/packages/block-library/src/query-no-results/block.json
@@ -8,6 +8,16 @@
 	"parent": [ "core/query" ],
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"attributes": {
+					"content": "No posts were found."
+				}
+			}
+		]
+	},
 	"supports": {
 		"align": true,
 		"reusable": false,
diff --git a/packages/block-library/src/query-pagination-numbers/index.js b/packages/block-library/src/query-pagination-numbers/index.js
index 3fd903e2d9ef48..f769f54b4ac034 100644
--- a/packages/block-library/src/query-pagination-numbers/index.js
+++ b/packages/block-library/src/query-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index de3e60214685c2..5d5c9113bda084 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -29,6 +29,11 @@
 			"default": true
 		}
 	},
+	"example": {
+		"attributes": {
+			"type": "search"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index 9eb84959638236..b2225192c6b218 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -5,6 +5,7 @@
 	"title": "Query Loop",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.",
+	"keywords": [ "posts", "list", "blog", "blogs", "custom post types" ],
 	"textdomain": "default",
 	"attributes": {
 		"queryId": {
@@ -41,6 +42,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
diff --git a/packages/block-library/src/query/edit/inspector-controls/format-controls.js b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
index d26fd9d81ce6f7..15c95f3bbba2e2 100644
--- a/packages/block-library/src/query/edit/inspector-controls/format-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
@@ -68,7 +68,7 @@ export default function FormatControls( { onChange, query: { format } } ) {
 		.filter( Boolean );
 
 	const suggestions = formats
-		.filter( ( item ) => ! format.includes( item.value ) )
+		.filter( ( item ) => ! normalizedFormats.includes( item.value ) )
 		.map( ( item ) => item.label );
 
 	return (
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 6c246ab89b3b37..3128c3526926f9 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -45,7 +45,7 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout } = props;
+	const { attributes, setQuery, setDisplayLayout, isTemplate } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -103,6 +103,7 @@ export default function QueryInspectorControls( props ) {
 		if ( ! hasFormatSupport ) {
 			updateQuery.format = [];
 		}
+
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -118,20 +119,25 @@ export default function QueryInspectorControls( props ) {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
-	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+
+	const showInheritControl =
+		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		! inherit && isControlAllowed( allowedControls, 'postType' );
+		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
+		! isTemplate;
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		! inherit && isControlAllowed( allowedControls, 'order' );
+		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
+		! isTemplate;
 	const showStickyControl =
-		! inherit &&
-		showSticky &&
-		isControlAllowed( allowedControls, 'sticky' );
+		( ! inherit &&
+			showSticky &&
+			isControlAllowed( allowedControls, 'sticky' ) ) ||
+		( showSticky && ! isTemplate );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
@@ -315,7 +321,7 @@ export default function QueryInspectorControls( props ) {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Items' ) }
+						label={ __( 'Items per page' ) }
 						hasValue={ () => perPage > 0 }
 					>
 						<PerPageControl
@@ -335,7 +341,7 @@ export default function QueryInspectorControls( props ) {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						label={ __( 'Max Pages to Show' ) }
+						label={ __( 'Max pages to show' ) }
 						hasValue={ () => pages > 0 }
 						onDeselect={ () => setQuery( { pages: 0 } ) }
 					>
diff --git a/packages/block-library/src/query/edit/inspector-controls/pages-control.js b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
index cde61453ea844d..06c6e32b66ad2a 100644
--- a/packages/block-library/src/query/edit/inspector-controls/pages-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/pages-control.js
@@ -8,7 +8,7 @@ export const PagesControl = ( { pages, onChange } ) => {
 	return (
 		<NumberControl
 			__next40pxDefaultSize
-			label={ __( 'Max pages' ) }
+			label={ __( 'Max pages to show' ) }
 			value={ pages }
 			min={ 0 }
 			onChange={ ( newPages ) => {
diff --git a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
index 3e0dfbf50b70bd..933bb0851e6257 100644
--- a/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/per-page-control.js
@@ -12,7 +12,7 @@ const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
 		<RangeControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
-			label={ __( 'Posts per page' ) }
+			label={ __( 'Items per page' ) }
 			min={ MIN_POSTS_PER_PAGE }
 			max={ MAX_POSTS_PER_PAGE }
 			onChange={ ( newPerPage ) => {
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 4624b3b96049e9..8b3ff09b17934b 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -32,6 +32,7 @@ export default function QueryContent( {
 	openPatternSelectionModal,
 	name,
 	clientId,
+	context,
 } ) {
 	const {
 		queryId,
@@ -41,6 +42,7 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
+	const { postType } = context;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -48,6 +50,16 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
+	const isTemplate = useSelect(
+		( select ) => {
+			const currentTemplate =
+				select( coreStore ).__experimentalGetTemplateForLink()?.type;
+			const isInTemplate = 'wp_template' === currentTemplate;
+			const isInSingularContent = postType !== undefined;
+			return isInTemplate && ! isInSingularContent;
+		},
+		[ postType ]
+	);
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
@@ -81,6 +93,10 @@ export default function QueryContent( {
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
+	const updateQuery = useCallback(
+		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
+		[ query, setAttributes ]
+	);
 	useEffect( () => {
 		const newQuery = {};
 		// When we inherit from global query always need to set the `perPage`
@@ -90,11 +106,24 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
+		// We need to reset the `inherit` value if not in a template, as queries
+		// are not inherited when outside a template (e.g. when in singular content).
+		if ( ! isTemplate && query.inherit ) {
+			newQuery.inherit = false;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage, postsPerPage, inherit ] );
+	}, [
+		query.perPage,
+		postsPerPage,
+		inherit,
+		isTemplate,
+		query.inherit,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateQuery,
+	] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -102,9 +131,12 @@ export default function QueryContent( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { queryId: instanceId } );
 		}
-	}, [ queryId, instanceId ] );
-	const updateQuery = ( newQuery ) =>
-		setAttributes( { query: { ...query, ...newQuery } } );
+	}, [
+		queryId,
+		instanceId,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 	const updateDisplayLayout = ( newDisplayLayout ) =>
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
@@ -135,6 +167,7 @@ export default function QueryContent( {
 					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
+					isTemplate={ isTemplate }
 				/>
 			</InspectorControls>
 			<BlockControls>
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index d10db26529854e..043f351e11d7f1 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -24,27 +24,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 	// Enqueue the script module and add the necessary directives if the block is
 	// interactive.
 	if ( $is_interactive ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/query/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/query',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/query/view{$suffix}.js" ),
-			array(
-				array(
-					'id'     => '@wordpress/interactivity',
-					'import' => 'static',
-				),
-				array(
-					'id'     => '@wordpress/interactivity-router',
-					'import' => 'dynamic',
-				),
-			),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/query' );
+		wp_enqueue_script_module( '@wordpress/block-library/query/view' );
 
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 0f9ec97422f64b..2ae37f9f36f766 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -14,13 +14,13 @@
 			"selector": "blockquote",
 			"multiline": "p",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 77098b6e753139..4d3efd28e3a22c 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -70,14 +70,14 @@ const v4 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
@@ -138,14 +138,14 @@ const v3 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index dac4c6b488a97e..c5af5a29d21beb 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -10,7 +10,7 @@
 	"attributes": {
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
@@ -19,7 +19,7 @@
 		"placeholder": {
 			"type": "string",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "number"
@@ -29,7 +29,7 @@
 		},
 		"buttonText": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"buttonPosition": {
 			"type": "string",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index e2f3bb3999e42c..d4ed5b7e3a4055 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -424,13 +424,12 @@ export default function SearchEdit( {
 							}
 							step={ 1 }
 							onChange={ ( newWidth ) => {
-								const filteredWidth =
-									widthUnit === '%' &&
-									parseInt( newWidth, 10 ) > 100
-										? 100
-										: newWidth;
+								const parsedNewWidth =
+									newWidth === ''
+										? undefined
+										: parseInt( newWidth, 10 );
 								setAttributes( {
-									width: parseInt( filteredWidth, 10 ),
+									width: parsedNewWidth,
 								} );
 							} }
 							onUnitChange={ ( newUnit ) => {
@@ -566,7 +565,11 @@ export default function SearchEdit( {
 
 			<ResizableBox
 				size={ {
-					width: `${ width }${ widthUnit }`,
+					width:
+						width === undefined
+							? 'auto'
+							: `${ width }${ widthUnit }`,
+					height: 'auto',
 				} }
 				className={ clsx(
 					'wp-block-search__inside-wrapper',
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index fb09cdd36406e8..e4259bb0ce2c7f 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -80,18 +80,7 @@ function render_block_core_search( $attributes ) {
 		// If it's interactive, enqueue the script module and add the directives.
 		$is_expandable_searchfield = 'button-only' === $button_position;
 		if ( $is_expandable_searchfield ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build-module/block-library/search/view.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/search',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/search/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/search' );
+			wp_enqueue_script_module( '@wordpress/block-library/search/view' );
 
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
 			$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index dc95d5906d7345..36c217c1bf0c79 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -564,6 +564,7 @@ export default function LogoEdit( {
 					iconId={ siteIconId }
 					canUserEdit={ canUserEdit }
 				/>
+				{ canUserEdit && <DropZone onFilesDrop={ onFilesDrop } /> }
 			</>
 		);
 	}
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
index dbb484c74a1e45..c75b1bc229beb9 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -75,8 +75,5 @@
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
-	"style": "wp-block-site-title",
-	"selectors": {
-		"typography": ".wp-block-site-title > span, .wp-block-site-title > a"
-	}
+	"style": "wp-block-site-title"
 }
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
index 8647f3d9b2947c..3b332e35c65237 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -2,31 +2,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&[style*="font-weight"] :where(a) {
-		font-weight: inherit;
-	}
-	&[class*="-font-family"] :where(a),
-	&[style*="font-family"] :where(a) {
+	:where(a) {
+		color: inherit;
 		font-family: inherit;
-	}
-	&[class*="-font-size"] :where(a),
-	&[style*="font-size"] :where(a) {
 		font-size: inherit;
-	}
-	&[style*="line-height"] :where(a) {
-		line-height: inherit;
-	}
-	&[style*="font-style"] :where(a) {
 		font-style: inherit;
-	}
-	&[style*="letter-spacing"] :where(a) {
+		font-weight: inherit;
 		letter-spacing: inherit;
-	}
-	&[style*="text-decoration"] :where(a) {
+		line-height: inherit;
 		text-decoration: inherit;
 	}
-
-	:where(a) {
-		color: inherit;
-	}
 }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 65d85c0400116f..47af181bfe17e8 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -22,6 +22,7 @@ import {
 	PanelBody,
 	PanelRow,
 	TextControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
@@ -78,15 +79,18 @@ const SocialLinkURLPopover = ( {
 							}
 							removeBlock( clientId );
 						} }
+						suffix={
+							<InputControlSuffixWrapper variant="control">
+								<Button
+									icon={ keyboardReturn }
+									label={ __( 'Apply' ) }
+									type="submit"
+									size="small"
+								/>
+							</InputControlSuffixWrapper>
+						}
 					/>
 				</div>
-				<Button
-					// TODO: Switch to `true` (40px size) if possible.
-					__next40pxDefaultSize={ false }
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
 			</form>
 		</URLPopover>
 	);
diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json
index 451d245d867b07..5eb6e729d3f03e 100644
--- a/packages/block-library/src/table-of-contents/block.json
+++ b/packages/block-library/src/table-of-contents/block.json
@@ -62,6 +62,57 @@
 			}
 		}
 	},
-	"example": {},
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			}
+		],
+		"attributes": {
+			"headings": [
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				},
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				}
+			]
+		}
+	},
 	"style": "wp-block-table-of-contents"
 }
diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js
index 0ff710a91f5d50..330ca05bd174e1 100644
--- a/packages/block-library/src/term-description/index.js
+++ b/packages/block-library/src/term-description/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index 387ff3dfe17123..81cccd72965b1a 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -13,7 +13,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
index 7e3c96bc80cd98..bd4edc46738c5c 100644
--- a/packages/block-library/src/verse/deprecated.js
+++ b/packages/block-library/src/verse/deprecated.js
@@ -46,7 +46,7 @@ const v2 = {
 			selector: 'pre',
 			default: '',
 			__unstablePreserveWhiteSpace: true,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 1d3dc75961e8f1..d2dcd95365c3b5 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -18,7 +18,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"controls": {
 			"type": "boolean",
@@ -29,7 +29,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"loop": {
 			"type": "boolean",
@@ -58,14 +58,14 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"playsInline": {
 			"type": "boolean",
@@ -74,7 +74,7 @@
 			"attribute": "playsinline"
 		},
 		"tracks": {
-			"__experimentalRole": "content",
+			"role": "content",
 			"type": "array",
 			"items": {
 				"type": "object"
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 9dd0bd70309764..47e1db147942ff 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index cac606bd7bd1ee..60e638120952d8 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index b8d02b5348e1b6..173ce09db51e2b 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index d48d1846e79095..ab73fa1689ad67 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 0755d5170d1b32..838983c17233ea 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 13.8.0 (2024-09-19)
+
 ## 13.7.0 (2024-09-05)
 
 ## 13.6.0 (2024-08-21)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index d724f986b0ca81..c5a754f88d4929 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -102,6 +102,39 @@ _Returns_
 
 -   `Object`: All block attributes.
 
+### getBlockAttributesNamesByRole
+
+Filter block attributes by `role` and return their names.
+
+_Parameters_
+
+-   _name_ `string`: Block attribute's name.
+-   _role_ `string`: The role of a block attribute.
+
+_Returns_
+
+-   `string[]`: The attribute names that have the provided role.
+
+### getBlockBindingsSource
+
+Returns a registered block bindings source by its name.
+
+_Parameters_
+
+-   _name_ `string`: Block bindings source name.
+
+_Returns_
+
+-   `?Object`: Block bindings source.
+
+### getBlockBindingsSources
+
+Returns all registered block bindings sources.
+
+_Returns_
+
+-   `Array`: Block bindings sources.
+
 ### getBlockContent
 
 Given a block object, returns the Block's Inner HTML markup.
@@ -479,6 +512,36 @@ _Returns_
 
 -   `Array`: A list of blocks.
 
+### registerBlockBindingsSource
+
+Registers a new block bindings source with an object defining its behavior. Once registered, the source is available to be connected to the supported block attributes.
+
+_Usage_
+
+```js
+import { _x } from '@wordpress/i18n';
+import { registerBlockBindingsSource } from '@wordpress/blocks';
+
+registerBlockBindingsSource( {
+	name: 'plugin/my-custom-source',
+	label: _x( 'My Custom Source', 'block bindings source' ),
+	usesContext: [ 'postType' ],
+	getValues: getSourceValues,
+	setValues: updateMyCustomValuesInBatch,
+	canUserEditValue: () => true,
+} );
+```
+
+_Parameters_
+
+-   _source_ `Object`: Properties of the source to be registered.
+-   _source.name_ `string`: The unique and machine-readable name.
+-   _source.label_ `[string]`: Human-readable label. Optional when it is defined in the server.
+-   _source.usesContext_ `[Array]`: Optional array of context needed by the source only in the editor.
+-   _source.getValues_ `[Function]`: Optional function to get the values from the source.
+-   _source.setValues_ `[Function]`: Optional function to update multiple values connected to the source.
+-   _source.canUserEditValue_ `[Function]`: Optional function to determine if the user can edit the value.
+
 ### registerBlockCollection
 
 Registers a new block collection to group blocks in the same namespace in the inserter.
@@ -780,6 +843,22 @@ _Returns_
 
 -   `Array`: Updated Block list.
 
+### unregisterBlockBindingsSource
+
+Unregisters a block bindings source by providing its name.
+
+_Usage_
+
+```js
+import { unregisterBlockBindingsSource } from '@wordpress/blocks';
+
+unregisterBlockBindingsSource( 'plugin/my-custom-source' );
+```
+
+_Parameters_
+
+-   _name_ `string`: The name of the block bindings source to unregister.
+
 ### unregisterBlockStyle
 
 Unregisters a block style for the given block.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index f371ecc087af41..b2c24928b7c344 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "13.7.0",
+	"version": "13.8.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 803467cb2187e2..0b38b8e29e68a0 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -2,12 +2,7 @@
  * Internal dependencies
  */
 import { lock } from '../lock-unlock';
-import {
-	registerBlockBindingsSource,
-	unregisterBlockBindingsSource,
-	getBlockBindingsSource,
-	getBlockBindingsSources,
-} from './registration';
+import { isUnmodifiedBlockContent } from './utils';
 
 // The blocktype is the most important concept within the block API. It defines
 // all aspects of the block configuration and its interfaces, including `edit`
@@ -146,6 +141,10 @@ export {
 	unregisterBlockStyle,
 	registerBlockVariation,
 	unregisterBlockVariation,
+	registerBlockBindingsSource,
+	unregisterBlockBindingsSource,
+	getBlockBindingsSource,
+	getBlockBindingsSources,
 } from './registration';
 export {
 	isUnmodifiedBlock,
@@ -155,6 +154,7 @@ export {
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
 	__experimentalSanitizeBlockAttributes,
+	getBlockAttributesNamesByRole,
 	__experimentalGetBlockAttributesNamesByRole,
 } from './utils';
 
@@ -177,9 +177,4 @@ export {
 } from './constants';
 
 export const privateApis = {};
-lock( privateApis, {
-	registerBlockBindingsSource,
-	unregisterBlockBindingsSource,
-	getBlockBindingsSource,
-	getBlockBindingsSources,
-} );
+lock( privateApis, { isUnmodifiedBlockContent } );
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index b0f5ae350759f0..f7d85cd816c9df 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -769,12 +769,11 @@ export const unregisterBlockVariation = ( blockName, variationName ) => {
  *
  * @param {Object}   source                    Properties of the source to be registered.
  * @param {string}   source.name               The unique and machine-readable name.
- * @param {string}   [source.label]            Human-readable label.
- * @param {Array}    [source.usesContext]      Array of context needed by the source only in the editor.
- * @param {Function} [source.getValues]        Function to get the values from the source.
- * @param {Function} [source.setValues]        Function to update multiple values connected to the source.
- * @param {Function} [source.canUserEditValue] Function to determine if the user can edit the value.
- * @param {Function} [source.getFieldsList]    Function to get the lists of fields to expose in the connections panel.
+ * @param {string}   [source.label]            Human-readable label. Optional when it is defined in the server.
+ * @param {Array}    [source.usesContext]      Optional array of context needed by the source only in the editor.
+ * @param {Function} [source.getValues]        Optional function to get the values from the source.
+ * @param {Function} [source.setValues]        Optional function to update multiple values connected to the source.
+ * @param {Function} [source.canUserEditValue] Optional function to determine if the user can edit the value.
  *
  * @example
  * ```js
@@ -784,8 +783,9 @@ export const unregisterBlockVariation = ( blockName, variationName ) => {
  * registerBlockBindingsSource( {
  *     name: 'plugin/my-custom-source',
  *     label: _x( 'My Custom Source', 'block bindings source' ),
- *     getValues: () => getSourceValues(),
- *     setValues: () => updateMyCustomValuesInBatch(),
+ *     usesContext: [ 'postType' ],
+ *     getValues: getSourceValues,
+ *     setValues: updateMyCustomValuesInBatch,
  *     canUserEditValue: () => true,
  * } );
  * ```
@@ -903,7 +903,7 @@ export const registerBlockBindingsSource = ( source ) => {
 };
 
 /**
- * Unregisters a block bindings source
+ * Unregisters a block bindings source by providing its name.
  *
  * @param {string} name The name of the block bindings source to unregister.
  *
@@ -924,7 +924,7 @@ export function unregisterBlockBindingsSource( name ) {
 }
 
 /**
- * Returns a registered block bindings source.
+ * Returns a registered block bindings source by its name.
  *
  * @param {string} name Block bindings source name.
  *
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 2e7246ce9584a9..f1fb28e9d9a361 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -10,6 +10,7 @@ import {
 import { hasFilter, applyFilters } from '@wordpress/hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { removep } from '@wordpress/autop';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -238,7 +239,17 @@ export function getCommentAttributes( blockType, attributes ) {
 			}
 
 			// Ignore all local attributes
+			if ( attributeSchema.role === 'local' ) {
+				return accumulator;
+			}
+
 			if ( attributeSchema.__experimentalRole === 'local' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockType?.name } block.`,
+				} );
 				return accumulator;
 			}
 
diff --git a/packages/blocks/src/api/test/serializer.js b/packages/blocks/src/api/test/serializer.js
index 7fed23041daaa6..3c1cbd6d1e74ff 100644
--- a/packages/blocks/src/api/test/serializer.js
+++ b/packages/blocks/src/api/test/serializer.js
@@ -155,7 +155,7 @@ describe( 'block serializer', () => {
 					attributes: {
 						blob: {
 							type: 'string',
-							__experimentalRole: 'local',
+							role: 'local',
 						},
 						url: {
 							type: 'string',
diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
index 9bfef69c4c1428..ad76e89aafe5f0 100644
--- a/packages/blocks/src/api/test/utils.js
+++ b/packages/blocks/src/api/test/utils.js
@@ -13,7 +13,7 @@ import {
 	getAccessibleBlockLabel,
 	getBlockLabel,
 	__experimentalSanitizeBlockAttributes,
-	__experimentalGetBlockAttributesNamesByRole,
+	getBlockAttributesNamesByRole,
 } from '../utils';
 
 const noop = () => {};
@@ -309,7 +309,7 @@ describe( 'sanitizeBlockAttributes', () => {
 	} );
 } );
 
-describe( '__experimentalGetBlockAttributesNamesByRole', () => {
+describe( 'getBlockAttributesNamesByRole', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
 			attributes: {
@@ -318,15 +318,15 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save: noop,
@@ -357,42 +357,28 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should return empty array if block has no attributes', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-3' )
-		).toEqual( [] );
+		expect( getBlockAttributesNamesByRole( 'core/test-block-3' ) ).toEqual(
+			[]
+		);
 	} );
 	it( 'should return all attribute names if no role is provided', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-1' )
-		).toEqual(
+		expect( getBlockAttributesNamesByRole( 'core/test-block-1' ) ).toEqual(
 			expect.arrayContaining( [ 'align', 'content', 'level', 'color' ] )
 		);
 	} );
 	it( 'should return proper results with existing attributes and provided role', () => {
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'content' )
 		).toEqual( expect.arrayContaining( [ 'content', 'level' ] ) );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'other'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'other' )
 		).toEqual( [ 'color' ] );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'not-exists'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'not-exists' )
 		).toEqual( [] );
 		// A block with no `role` in any attributes.
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-2',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-2', 'content' )
 		).toEqual( [] );
 	} );
 } );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index a68937586f9273..7bace4ff84c29b 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -12,6 +12,7 @@ import { Component, isValidElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -29,6 +30,30 @@ extend( [ namesPlugin, a11yPlugin ] );
  */
 const ICON_COLORS = [ '#191e23', '#f8f9f9' ];
 
+/**
+ * Determines whether the block's attribute is equal to the default attribute
+ * which means the attribute is unmodified.
+ * @param {Object} attributeDefinition The attribute's definition of the block type.
+ * @param {*}      value               The attribute's value.
+ * @return {boolean} Whether the attribute is unmodified.
+ */
+function isUnmodifiedAttribute( attributeDefinition, value ) {
+	// Every attribute that has a default must match the default.
+	if ( attributeDefinition.hasOwnProperty( 'default' ) ) {
+		return value === attributeDefinition.default;
+	}
+
+	// The rich text type is a bit different from the rest because it
+	// has an implicit default value of an empty RichTextData instance,
+	// so check the length of the value.
+	if ( attributeDefinition.type === 'rich-text' ) {
+		return ! value?.length;
+	}
+
+	// Every attribute that doesn't have a default should be undefined.
+	return value === undefined;
+}
+
 /**
  * Determines whether the block's attributes are equal to the default attributes
  * which means the block is unmodified.
@@ -42,20 +67,7 @@ export function isUnmodifiedBlock( block ) {
 		( [ key, definition ] ) => {
 			const value = block.attributes[ key ];
 
-			// Every attribute that has a default must match the default.
-			if ( definition.hasOwnProperty( 'default' ) ) {
-				return value === definition.default;
-			}
-
-			// The rich text type is a bit different from the rest because it
-			// has an implicit default value of an empty RichTextData instance,
-			// so check the length of the value.
-			if ( definition.type === 'rich-text' ) {
-				return ! value?.length;
-			}
-
-			// Every attribute that doesn't have a default should be undefined.
-			return value === undefined;
+			return isUnmodifiedAttribute( definition, value );
 		}
 	);
 }
@@ -72,6 +84,35 @@ export function isUnmodifiedDefaultBlock( block ) {
 	return block.name === getDefaultBlockName() && isUnmodifiedBlock( block );
 }
 
+/**
+ * Determines whether the block content is unmodified. A block content is
+ * considered unmodified if all the attributes that have a role of 'content'
+ * are equal to the default attributes (or undefined).
+ * If the block does not have any attributes with a role of 'content', it
+ * will be considered unmodified if all the attributes are equal to the default
+ * attributes (or undefined).
+ *
+ * @param {WPBlock} block Block Object
+ * @return {boolean} Whether the block content is unmodified.
+ */
+export function isUnmodifiedBlockContent( block ) {
+	const contentAttributes = getBlockAttributesNamesByRole(
+		block.name,
+		'content'
+	);
+
+	if ( contentAttributes.length === 0 ) {
+		return isUnmodifiedBlock( block );
+	}
+
+	return contentAttributes.every( ( key ) => {
+		const definition = getBlockType( block.name )?.attributes[ key ];
+		const value = block.attributes[ key ];
+
+		return isUnmodifiedAttribute( definition, value );
+	} );
+}
+
 /**
  * Function that checks if the parameter is a valid icon.
  *
@@ -332,7 +373,7 @@ export function __experimentalSanitizeBlockAttributes( name, attributes ) {
  *
  * @return {string[]} The attribute names that have the provided role.
  */
-export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
+export function getBlockAttributesNamesByRole( name, role ) {
 	const attributes = getBlockType( name )?.attributes;
 	if ( ! attributes ) {
 		return [];
@@ -341,12 +382,34 @@ export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
 	if ( ! role ) {
 		return attributesNames;
 	}
-	return attributesNames.filter(
-		( attributeName ) =>
-			attributes[ attributeName ]?.__experimentalRole === role
-	);
+
+	return attributesNames.filter( ( attributeName ) => {
+		const attribute = attributes[ attributeName ];
+		if ( attribute?.role === role ) {
+			return true;
+		}
+		if ( attribute?.__experimentalRole === role ) {
+			deprecated( '__experimentalRole attribute', {
+				since: '6.7',
+				version: '6.8',
+				alternative: 'role attribute',
+				hint: `Check the block.json of the ${ name } block.`,
+			} );
+			return true;
+		}
+		return false;
+	} );
 }
 
+export const __experimentalGetBlockAttributesNamesByRole = ( ...args ) => {
+	deprecated( '__experimentalGetBlockAttributesNamesByRole', {
+		since: '6.7',
+		version: '6.8',
+		alternative: 'getBlockAttributesNamesByRole',
+	} );
+	return getBlockAttributesNamesByRole( ...args );
+};
+
 /**
  * Return a new object with the specified keys omitted.
  *
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 4cded8268ae97c..d5665323859e40 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createSelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -209,3 +210,36 @@ export function getAllBlockBindingsSources( state ) {
 export function getBlockBindingsSource( state, sourceName ) {
 	return state.blockBindingsSources[ sourceName ];
 }
+
+/**
+ * Determines if any of the block type's attributes have
+ * the content role attribute.
+ *
+ * @param {Object} state         Data state.
+ * @param {string} blockTypeName Block type name.
+ * @return {boolean} Whether block type has content role attribute.
+ */
+export const hasContentRoleAttribute = ( state, blockTypeName ) => {
+	const blockType = getBlockType( state, blockTypeName );
+	if ( ! blockType ) {
+		return false;
+	}
+
+	return Object.values( blockType.attributes ).some(
+		( { role, __experimentalRole } ) => {
+			if ( role === 'content' ) {
+				return true;
+			}
+			if ( __experimentalRole === 'content' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockTypeName } block.`,
+				} );
+				return true;
+			}
+			return false;
+		}
+	);
+};
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index fbcec7a619cf63..7c7fb4763a1cb6 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -393,6 +393,13 @@ function getMergedUsesContext( existingUsesContext = [], newUsesContext = [] ) {
 export function blockBindingsSources( state = {}, action ) {
 	switch ( action.type ) {
 		case 'ADD_BLOCK_BINDINGS_SOURCE':
+			// Only open this API in Gutenberg and for `core/post-meta` for the moment.
+			let getFieldsList;
+			if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+				getFieldsList = action.getFieldsList;
+			} else if ( action.name === 'core/post-meta' ) {
+				getFieldsList = action.getFieldsList;
+			}
 			return {
 				...state,
 				[ action.name ]: {
@@ -404,8 +411,10 @@ export function blockBindingsSources( state = {}, action ) {
 					),
 					getValues: action.getValues,
 					setValues: action.setValues,
-					canUserEditValue: action.canUserEditValue,
-					getFieldsList: action.getFieldsList,
+					// Only set `canUserEditValue` if `setValues` is also defined.
+					canUserEditValue:
+						action.setValues && action.canUserEditValue,
+					getFieldsList,
 				},
 			};
 		case 'ADD_BOOTSTRAPPED_BLOCK_BINDINGS_SOURCE':
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index e97048e92b0c07..79e88073ba20de 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -8,11 +8,13 @@ import removeAccents from 'remove-accents';
  */
 import { createSelector } from '@wordpress/data';
 import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { getValueFromObjectPath, matchesAttributes } from './utils';
+import { hasContentRoleAttribute as privateHasContentRoleAttribute } from './private-selectors';
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */
@@ -822,23 +824,11 @@ export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
 	} );
 };
 
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- */
-export const __experimentalHasContentRoleAttribute = createSelector(
-	( state, blockTypeName ) => {
-		const blockType = getBlockType( state, blockTypeName );
-		if ( ! blockType ) {
-			return false;
-		}
-
-		return Object.entries( blockType.attributes ).some(
-			( [ , { __experimentalRole } ] ) => __experimentalRole === 'content'
-		);
-	},
-	( state, blockTypeName ) => [
-		state.blockTypes[ blockTypeName ]?.attributes,
-	]
-);
+export const __experimentalHasContentRoleAttribute = ( ...args ) => {
+	deprecated( '__experimentalHasContentRoleAttribute', {
+		since: '6.7',
+		version: '6.8',
+		hint: 'This is a private selector.',
+	} );
+	return privateHasContentRoleAttribute( ...args );
+};
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index b8ee58633b7ef2..cbe4763ea32706 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index c51d7318170c4e..cae627c406e817 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index bde7767a0f61f6..b8f45c79470040 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 88b9b86f4b3aeb..769931293bd2fd 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1473cf5f5df40e..f98f878080aa27 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,22 +4,60 @@
 
 ### Bug Fixes
 
+-   `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
+-   `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
+-   `ToggleGroupControl`: Fix arrow key navigation in RTL ([#65735](https://github.com/WordPress/gutenberg/pull/65735)).
+
+### Deprecations
+
+-   `__experimentalBorderBoxControl` can now be imported as a stable `BorderBoxControl` ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
+
+### Enhancements
+
+-   `Tabs`: handle horizontal overflow and large tab lists gracefully ([#64371](https://github.com/WordPress/gutenberg/pull/64371)).
+-   `BorderBoxControl`: promote to stable ([#65586](https://github.com/WordPress/gutenberg/pull/65586)).
+-   `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)).
+-   `DatePicker`: Use compact button size. ([#65653](https://github.com/WordPress/gutenberg/pull/65653)).
+-   `Navigator`: add support for exit animation ([#64777](https://github.com/WordPress/gutenberg/pull/64777)).
+-   `Guide`: Update finish button to use the new default size ([#65680](https://github.com/WordPress/gutenberg/pull/65680)).
+-   `BorderControl`: Use `__next40pxDefaultSize` prop for Reset button ([#65682](https://github.com/WordPress/gutenberg/pull/65682)).
+-   `Navigator`: stabilize APIs ([#64613](https://github.com/WordPress/gutenberg/pull/64613)).
+
+## 28.8.0 (2024-09-19)
+
+### Bug Fixes
+
+-   `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)).
 -   `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
 -   `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)).
+-   `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)).
+-   `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)).
 
 ### Deprecations
 
 -   Deprecate `__unstableComposite`, `__unstableCompositeGroup`, `__unstableCompositeItem` and `__unstableUseCompositeState`. Consumers of the package should use the stable `Composite` component instead ([#63572](https://github.com/WordPress/gutenberg/pull/63572)).
+-   `__experimentalBoxControl` can now be imported as a stable `BoxControl` ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
 
 ### New Features
 
 -   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)).
 
 ### Enhancements
 
 -   `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
 -   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+-   `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Modal`: add exit animation for internally triggered events ([#65203](https://github.com/WordPress/gutenberg/pull/65203)).
 -   `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)).
+-   `BoxControl`: promote to stable ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
 
 ### Bug Fixes
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 8337d6dd8857f4..98eb4c5de0430d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.7.0",
+	"version": "28.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index ef0fefe199c2e3..ad930d3affdd14 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -72,6 +72,9 @@ const getNodeText = ( node: React.ReactNode ): string => {
 
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
+// Used for generating the instance ID
+const AUTOCOMPLETE_HOOK_REFERENCE = {};
+
 export function useAutocomplete( {
 	record,
 	onChange,
@@ -79,7 +82,7 @@ export function useAutocomplete( {
 	completers,
 	contentRef,
 }: UseAutocompleteProps ) {
-	const instanceId = useInstanceId( useAutocomplete );
+	const instanceId = useInstanceId( AUTOCOMPLETE_HOOK_REFERENCE );
 	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
 
 	const [ filteredOptions, setFilteredOptions ] = useState<
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index 5ec2263bf16741..e67a1386103c1a 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -1,12 +1,7 @@
 # BorderBoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-<br />
-
-This component provides users with the ability to configure a single "flat"
-border or separate borders per side.
+An input control for the color, style, and width of the border of a box. The
+border can be customized as a whole, or individually for each side of the box.
 
 ## Development guidelines
 
@@ -28,7 +23,7 @@ show "Mixed" placeholder text.
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+import { BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const colors = [
@@ -76,35 +71,35 @@ colors are organized by multiple origins.
 
 Each color may be an object containing a `name` and `color` value.
 
-- Required: No
-- Default: `[]`
+-   Required: No
+-   Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
 This toggles the ability to choose custom colors.
 
-- Required: No
+-   Required: No
 
 ### `enableAlpha`: `boolean`
 
 This controls whether the alpha channel will be offered when selecting
 custom colors.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `enableStyle`: `boolean`
 
 This controls whether to support border style selections.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `hideLabelFromVision`: `boolean`
 
 Provides control over whether the label will only be visible to screen readers.
 
-- Required: No
+-   Required: No
 
 ### `label`: `string`
 
@@ -113,7 +108,7 @@ If provided, a label will be generated using this as the content.
 _Whether it is visible only to screen readers is controlled via
 `hideLabelFromVision`._
 
-- Required: No
+-   Required: No
 
 ### `onChange`: `( value?: Object ) => void`
 
@@ -123,7 +118,7 @@ borders, or `undefined`.
 
 _Note: The will be `undefined` if a user clears all borders._
 
-- Required: Yes
+-   Required: Yes
 
 ### `popoverPlacement`: `string`
 
@@ -133,21 +128,21 @@ By default, popovers are displayed relative to the button that initiated the pop
 
 The available base placements are 'top', 'right', 'bottom', 'left'. Each of these base placements has an alignment in the form -start and -end. For example, 'right-start', or 'bottom-end'. These allow you to align the tooltip to the edges of the button, rather than centering it.
 
-- Required: No
+-   Required: No
 
 ### `popoverOffset`: `number`
 
 The space between the popover and the control wrapper.
 
-- Required: No
+-   Required: No
 
 ### `size`: `string`
 
 Size of the control.
 
-- Required: No
-- Default: `default`
-- Allowed values: `default`, `__unstable-large`
+-   Required: No
+-   Default: `default`
+-   Allowed values: `default`, `__unstable-large`
 
 ### `value`: `Object`
 
@@ -158,6 +153,7 @@ properties or a "split" border which defines the previous properties but for
 each side; `top`, `right`, `bottom`, and `left`.
 
 Examples:
+
 ```js
 const flatBorder = { color: '#72aee6', style: 'solid', width: '1px' };
 const splitBorders = {
@@ -168,11 +164,11 @@ const splitBorders = {
 };
 ```
 
-- Required: No
+-   Required: No
 
 ### `__next40pxDefaultSize`: `boolean`
 
 Start opting into the larger default height that will become the default size in a future version.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 26967ad7f63ddb..1dd3437aa50de4 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -147,22 +147,11 @@ const UnconnectedBorderBoxControl = (
 };
 
 /**
- * The `BorderBoxControl` effectively has two view states. The first, a "linked"
- * view, allows configuration of a flat border via a single `BorderControl`.
- * The second, a "split" view, contains a `BorderControl` for each side
- * as well as a visualizer for the currently selected borders. Each view also
- * contains a button to toggle between the two.
- *
- * When switching from the "split" view to "linked", if the individual side
- * borders are not consistent, the "linked" view will display any border
- * properties selections that are consistent while showing a mixed state for
- * those that aren't. For example, if all borders had the same color and style
- * but different widths, then the border dropdown in the "linked" view's
- * `BorderControl` would show that consistent color and style but the "linked"
- * view's width input would show "Mixed" placeholder text.
+ * An input control for the color, style, and width of the border of a box. The
+ * border can be customized as a whole, or individually for each side of the box.
  *
  * ```jsx
- * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { BorderBoxControl } from '@wordpress/components';
  * import { __ } from '@wordpress/i18n';
  *
  * const colors = [
diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
index 5b5d7f311208c0..5341dacab646eb 100644
--- a/packages/components/src/border-box-control/stories/index.story.tsx
+++ b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -16,7 +16,7 @@ import Button from '../../button';
 import { BorderBoxControl } from '../';
 
 const meta: Meta< typeof BorderBoxControl > = {
-	title: 'Components (Experimental)/BorderBoxControl',
+	title: 'Components/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
@@ -83,4 +83,5 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Borders',
+	enableStyle: true,
 };
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index b2951054e624e7..d84d6bea77335b 100644
--- a/packages/components/src/border-control/border-control-dropdown/component.tsx
+++ b/packages/components/src/border-control/border-control-dropdown/component.tsx
@@ -237,6 +237,7 @@ const BorderControlDropdown = (
 							onReset();
 							onClose();
 						} }
+						__next40pxDefaultSize
 					>
 						{ __( 'Reset' ) }
 					</Button>
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 2c77a2d21465d6..a678b6f362308a 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -156,7 +156,6 @@ export const resetButton = css`
 		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		height: 40px;
 	}
 `;
 
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index b03b03a85466ae..77176b49eeb6d8 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -1,18 +1,14 @@
 # BoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
+A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
 
-const Example = () => {
+function Example() {
 	const [ values, setValues ] = useState( {
 		top: '50px',
 		left: '10%',
@@ -26,23 +22,24 @@ const Example = () => {
 			onChange={ ( nextValues ) => setValues( nextValues ) }
 		/>
 	);
-};
+}
 ```
 
 ## Props
+
 ### `allowReset`: `boolean`
 
 If this property is true, a button to reset the box control is rendered.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `splitOnAxis`: `boolean`
 
 If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `inputProps`: `object`
 
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index fb65014dfaf0f5..e9166ff7f692e8 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -10,7 +10,6 @@ import {
 	FlexedRangeControl,
 	StyledUnitControl,
 } from './styles/box-control-styles';
-import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
@@ -72,7 +71,7 @@ export default function AllInputControl( {
 	};
 
 	return (
-		<HStack>
+		<>
 			<StyledUnitControl
 				{ ...props }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
@@ -104,6 +103,6 @@ export default function AllInputControl( {
 				value={ parsedQuantity ?? 0 }
 				withInputField={ false }
 			/>
-		</HStack>
+		</>
 	);
 }
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 9c3452d4ccb806..41e95aa88bea37 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -47,14 +47,14 @@ function useUniqueId( idProp?: string ) {
 }
 
 /**
- * BoxControl components let users set values for Top, Right, Bottom, and Left.
- * This can be used as an input control for values like `padding` or `margin`.
+ * A control that lets users set values for top, right, bottom, and left. Can be
+ * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+ * import { BoxControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
- * const Example = () => {
+ * function Example() {
  * 	const [ values, setValues ] = useState( {
  * 		top: '50px',
  * 		left: '10%',
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 1b6604048f6d52..783f9d047b1bb0 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components (Experimental)/BoxControl',
+	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index eeb72df14bb9c1..5f4071aeed88a7 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -37,13 +37,13 @@ export type BoxControlProps = Pick<
 	/**
 	 * Props for the internal `UnitControl` components.
 	 *
-	 * @default `{ min: 0 }`
+	 * @default { min: 0 }
 	 */
 	inputProps?: UnitControlPassthroughProps;
 	/**
 	 * Heading label for the control.
 	 *
-	 * @default `__( 'Box Control' )`
+	 * @default __( 'Box Control' )
 	 */
 	label?: string;
 	/**
@@ -53,7 +53,7 @@ export type BoxControlProps = Pick<
 	/**
 	 * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 	 *
-	 * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
+	 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
 	 */
 	resetValues?: BoxControlValue;
 	/**
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 61611f82fee233..5831c5ec2832c2 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -111,6 +111,13 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
+### placeholder
+
+If passed, the combobox input will show a placeholder string if no values are present.
+
+-   Type: `string`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index fc3ecccf0b6599..5c6725a51b435d 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -129,6 +129,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		},
 		__experimentalRenderItem,
 		expandOnFocus = true,
+		placeholder,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -340,6 +341,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
+								placeholder={ placeholder }
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index adc76590c24538..639407ac998ed2 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -188,6 +188,46 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
+	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( onFilterValueChangeSpy ).toHaveBeenCalledWith( 'a' );
+	} );
+
+	it( 'clears the textbox value if there is no selected value on blur', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( input ).toHaveValue( 'a' );
+
+		// Blur and focus the input.
+		await user.tab();
+		await user.click( input );
+
+		expect( input ).toHaveValue( '' );
+		expect( onFilterValueChangeSpy ).toHaveBeenLastCalledWith( '' );
+	} );
+
 	it( 'should select the correct option from a search', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index 10adf8c0ff0ef6..470b38c35e2c8a 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -82,4 +82,8 @@ export type ComboboxControlProps = Pick<
 	 * The current value of the control.
 	 */
 	value?: string | null;
+	/**
+	 * If passed, the combobox input will show a placeholder string if no values are present.
+	 */
+	placeholder?: string;
 };
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index c82d6eba2e1a76..2b8bdb9946b7c9 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -120,6 +120,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	background-color: ${ COLORS.theme.background };
 	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
 
 	/* z-index(".components-popover") */
 	z-index: 1000000;
diff --git a/packages/components/src/date-time/date/index.tsx b/packages/components/src/date-time/date/index.tsx
index 33fc736564d5e6..5a565ee38cec59 100644
--- a/packages/components/src/date-time/date/index.tsx
+++ b/packages/components/src/date-time/date/index.tsx
@@ -125,6 +125,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 				<NavigatorHeading level={ 3 }>
 					<strong>
@@ -150,6 +151,7 @@ export function DatePicker( {
 							)
 						);
 					} }
+					size="compact"
 				/>
 			</Navigator>
 			<Calendar
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 55020fbcd41354..b25613e9feb52b 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -37,7 +37,7 @@ const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index b6bc11ddec9abf..dd4907bd0b96b1 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -96,6 +96,9 @@ export const WithChildren: StoryObj< typeof DropdownMenu > = {
 		icon: more,
 		children: ( { onClose } ) => (
 			<>
+				<MenuItem icon={ arrowUp } onClick={ onClose }>
+					Standalone Item
+				</MenuItem>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index c6fe5014ffdc2a..0f07664787cc33 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = {
 		...Default.args,
 		renderContent: () => (
 			<>
+				<MenuItem>Standalone Item</MenuItem>
 				<MenuGroup label="Group 1">
 					<MenuItem>Item 1</MenuItem>
 					<MenuItem>Item 2</MenuItem>
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index 8a5b0e0a0a6a28..d7ae7963f7ed8c 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -5,6 +5,16 @@
 .components-dropdown__content {
 	.components-popover__content {
 		padding: $grid-unit-10;
+
+		&:has(.components-menu-group) {
+			padding: 0;
+
+			.components-dropdown-menu__menu > .components-menu-item__button,
+			> .components-menu-item__button {
+				margin: $grid-unit-10;
+				width: auto;
+			}
+		}
 	}
 
 	[role="menuitem"] {
@@ -13,22 +23,9 @@
 
 	.components-menu-group {
 		padding: $grid-unit-10;
-		margin-top: 0;
-		margin-bottom: 0;
-		margin-left: -$grid-unit-10;
-		margin-right: -$grid-unit-10;
-
-		&:first-child {
-			margin-top: -$grid-unit-10;
-		}
-
-		&:last-child {
-			margin-bottom: -$grid-unit-10;
-		}
 	}
 
 	.components-menu-group + .components-menu-group {
-		margin-top: 0;
 		border-top: $border-width solid $gray-400;
 		padding: $grid-unit-10;
 	}
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index dd7888403b34d4..900874b59004b8 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -60,6 +60,7 @@ $transition-duration: 0.2s;
 			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
+		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
 		border: math.div($toggle-thumb-size, 2) solid transparent;
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index 0ca5957fd3a656..121c9f22330e88 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -164,6 +164,7 @@ function Guide( {
 							className="components-guide__finish-button"
 							variant="primary"
 							onClick={ onFinish }
+							__next40pxDefaultSize
 						>
 							{ finishButtonText }
 						</Button>
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 32195ebc444ce6..fe3642f7700772 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -33,14 +33,18 @@ export {
 } from './autocomplete';
 export { default as BaseControl, useBaseControlProps } from './base-control';
 export {
+	/** @deprecated Import `BorderBoxControl` instead. */
 	BorderBoxControl as __experimentalBorderBoxControl,
+	BorderBoxControl,
 	hasSplitBorders as __experimentalHasSplitBorders,
 	isDefinedBorder as __experimentalIsDefinedBorder,
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
+	/** @deprecated Import `BoxControl` instead. */
 	default as __experimentalBoxControl,
+	default as BoxControl,
 	applyValueToSides as __experimentalApplyValueToSides,
 } from './box-control';
 export { default as Button } from './button';
@@ -126,6 +130,10 @@ export {
 	NavigatorButton as __experimentalNavigatorButton,
 	NavigatorBackButton as __experimentalNavigatorBackButton,
 	NavigatorToParentButton as __experimentalNavigatorToParentButton,
+} from './navigator/legacy';
+export {
+	Navigator,
+	useNavigator,
 	useNavigator as __experimentalUseNavigator,
 } from './navigator';
 export { default as Notice } from './notice';
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index d9412c504940b3..744e3f74c5b955 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,5 +1,4 @@
 .components-menu-group + .components-menu-group {
-	margin-top: $grid-unit-10;
 	padding-top: $grid-unit-10;
 	border-top: $border-width solid $gray-900;
 
@@ -10,6 +9,10 @@
 	}
 }
 
+.components-menu-group:has(> div:empty) {
+	display: none;
+}
+
 .components-menu-group__label {
 	padding: 0 $grid-unit-10;
 	margin-top: $grid-unit-05;
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e8..383eb4066ba86b 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,7 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
+	height: auto;
+
 	svg {
 		margin-right: $grid-unit-15;
 	}
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 7d988a0e7240b3..7d55c9a4d5d1e6 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -38,10 +37,11 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { Spacer } from '../spacer';
+import { useModalExitAnimation } from './use-modal-exit-animation';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
-	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
 
@@ -50,7 +50,7 @@ const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
 	const {
 		bodyOpenClassName = 'modal-open',
@@ -70,7 +70,7 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
@@ -184,6 +184,9 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
 		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
@@ -200,21 +203,21 @@ function UnforwardedModal(
 		};
 	}, [ isContentScrollable, childrenContainerRef ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
-			if ( onRequestClose ) {
-				onRequestClose( event );
-			}
+			closeModal().then( () => onRequestClose( event ) );
 		}
 	}
 
 	const onContentContainerScroll = useCallback(
-		( e: UIEvent< HTMLDivElement > ) => {
+		( e: React.UIEvent< HTMLDivElement > ) => {
 			const scrollY = e?.currentTarget?.scrollTop ?? -1;
 
 			if ( ! hasScrolledContent && scrollY > 0 ) {
@@ -248,7 +251,7 @@ function UnforwardedModal(
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
 			if ( button === 0 && isSameTarget ) {
-				onRequestClose();
+				closeModal().then( () => onRequestClose() );
 			}
 		},
 	};
@@ -259,7 +262,8 @@ function UnforwardedModal(
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
 			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
@@ -271,8 +275,12 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMount !== 'firstContentElement'
@@ -331,7 +339,13 @@ function UnforwardedModal(
 										/>
 										<Button
 											size="small"
-											onClick={ onRequestClose }
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
 											icon={ close }
 											label={
 												closeButtonLabel ||
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 3790e0b7368a64..70959f69392d1c 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -10,6 +10,13 @@
 	display: flex;
 	// This animates the appearance of the backdrop.
 	@include animation__fade-in();
+
+	&.is-animating-out {
+		// Note: it's important that the fade-out animation doesn't end after the
+		// modal frame's disappear animation, because the component will be removed
+		// from the DOM when that animation ends.
+		@include animation__fade-out($delay: 80ms);
+	}
 }
 
 // The modal window element.
@@ -25,10 +32,17 @@
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
-	animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+	animation-name: components-modal__appear-animation;
+	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 	@include reduce-motion("animation");
 
+	.components-modal__screen-overlay.is-animating-out & {
+		animation-name: components-modal__disappear-animation;
+		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+	}
+
 	// Show a centered modal on bigger screens.
 	@include break-small() {
 		border-radius: $radius-large;
@@ -88,6 +102,19 @@
 	}
 }
 
+// Note: this animation is also used in the animationend JS event listener.
+// Make sure that the animation name is kept in sync across the two files.
+@keyframes components-modal__disappear-animation {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+}
+
 // Fix header to the top so it is always there to provide context to the modal
 // if the content needs to be scrolled (for example, on the keyboard shortcuts
 // modal screen).
diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
index 0a422718b1be14..f6f35eec85fc73 100644
--- a/packages/components/src/modal/types.ts
+++ b/packages/components/src/modal/types.ts
@@ -1,15 +1,3 @@
-/**
- * External dependencies
- */
-import type {
-	AriaRole,
-	CSSProperties,
-	ReactNode,
-	KeyboardEventHandler,
-	KeyboardEvent,
-	SyntheticEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +30,7 @@ export type ModalProps = {
 	/**
 	 * The children elements.
 	 */
-	children: ReactNode;
+	children: React.ReactNode;
 	/**
 	 * If this property is added, it will an additional class name to the modal
 	 * content `div`.
@@ -77,7 +65,7 @@ export type ModalProps = {
 	 *
 	 * @default null
 	 */
-	headerActions?: ReactNode;
+	headerActions?: React.ReactNode;
 
 	/**
 	 * If this property is added, an icon will be added before the title.
@@ -108,12 +96,12 @@ export type ModalProps = {
 	/**
 	 *  Handle the key down on the modal frame `div`.
 	 */
-	onKeyDown?: KeyboardEventHandler< HTMLDivElement >;
+	onKeyDown?: React.KeyboardEventHandler< HTMLDivElement >;
 	/**
 	 * This function is called to indicate that the modal should be closed.
 	 */
 	onRequestClose: (
-		event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent
+		event?: React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent
 	) => void;
 	/**
 	 * If this property is added, it will an additional class name to the modal
@@ -126,7 +114,7 @@ export type ModalProps = {
 	 *
 	 * @default 'dialog'
 	 */
-	role?: AriaRole;
+	role?: React.AriaRole;
 	/**
 	 * If this property is added, it will determine whether the modal requests
 	 * to close when a mouse click occurs outside of the modal content.
@@ -144,7 +132,7 @@ export type ModalProps = {
 	/**
 	 * If this property is added, it will be added to the modal frame `div`.
 	 */
-	style?: CSSProperties;
+	style?: React.CSSProperties;
 	/**
 	 * This property is used as the modal header's title.
 	 *
diff --git a/packages/components/src/modal/use-modal-exit-animation.ts b/packages/components/src/modal/use-modal-exit-animation.ts
new file mode 100644
index 00000000000000..729b4f9ea6f86c
--- /dev/null
+++ b/packages/components/src/modal/use-modal-exit-animation.ts
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion } from '@wordpress/compose';
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../utils';
+import warning from '@wordpress/warning';
+
+// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
+const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
+const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
+	CONFIG.transitionDuration
+);
+
+const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';
+
+export function useModalExitAnimation() {
+	const frameRef = useRef< HTMLDivElement >();
+	const [ isAnimatingOut, setIsAnimatingOut ] = useState( false );
+	const isReducedMotion = useReducedMotion();
+
+	const closeModal = useCallback(
+		() =>
+			new Promise< void >( ( closeModalResolve ) => {
+				// Grab a "stable" reference of the frame element, since
+				// the value held by the react ref might change at runtime.
+				const frameEl = frameRef.current;
+
+				if ( isReducedMotion ) {
+					closeModalResolve();
+					return;
+				}
+
+				if ( ! frameEl ) {
+					warning(
+						"wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element."
+					);
+					closeModalResolve();
+					return;
+				}
+
+				let handleAnimationEnd:
+					| undefined
+					| ( ( e: AnimationEvent ) => void );
+
+				const startAnimation = () =>
+					new Promise< void >( ( animationResolve ) => {
+						handleAnimationEnd = ( e: AnimationEvent ) => {
+							if ( e.animationName === EXIT_ANIMATION_NAME ) {
+								animationResolve();
+							}
+						};
+
+						frameEl.addEventListener(
+							'animationend',
+							handleAnimationEnd
+						);
+						setIsAnimatingOut( true );
+					} );
+				const animationTimeout = () =>
+					new Promise< void >( ( timeoutResolve ) => {
+						setTimeout(
+							() => timeoutResolve(),
+							// Allow an extra 20% of the animation duration for the
+							// animationend event to fire, in case the animation frame is
+							// slightly delayes by some other events in the event loop.
+							FRAME_ANIMATION_DURATION_NUMBER * 1.2
+						);
+					} );
+
+				Promise.race( [ startAnimation(), animationTimeout() ] ).then(
+					() => {
+						if ( handleAnimationEnd ) {
+							frameEl.removeEventListener(
+								'animationend',
+								handleAnimationEnd
+							);
+						}
+						setIsAnimatingOut( false );
+						closeModalResolve();
+					}
+				);
+			} ),
+		[ isReducedMotion ]
+	);
+
+	return {
+		overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
+		frameRef,
+		frameStyle: {
+			'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }`,
+		},
+		closeModal,
+	};
+}
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 00000000000000..b56a82e0524eef
--- /dev/null
+++ b/packages/components/src/navigator/README.md
@@ -0,0 +1,176 @@
+# `Navigator`
+
+`Navigator` is a collection components that allow rendering nested views/panels/menus (via the `Navigator.Screen` component) and navigate between them (via the `Navigator.Button` and `Navigator.BackButton` components).
+
+## Usage
+
+```jsx
+import { Navigator } from '@wordpress/components';
+
+const MyNavigation = () => (
+	<Navigator initialPath="/">
+		<Navigator.Screen path="/">
+			<p>This is the home screen.</p>
+			<Navigator.Button path="/child">
+				Navigate to child screen.
+			</Navigator.Button>
+		</Navigator.Screen>
+		<Navigator.Screen path="/child">
+			<p>This is the child screen.</p>
+			<Navigator.BackButton>Go back</Navigator.BackButton>
+		</Navigator.Screen>
+	</Navigator>
+);
+```
+
+### Hierarchical `path`s
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`;
+-   `/parent/child` is a child of `/parent`;
+-   `/parent/child/grand-child` is a child of `/parent/child`;
+-   `/parent/:param` is a child of `/parent` as well;
+-   if the current screen has a `path="/parent/child/grand-child"`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+### Height and animations
+
+Due to how `Navigator.Screen` animations work, it is recommended that the `Navigator` component is assigned a `height` to prevent some potential UI jumps while moving across screens.
+
+### Individual components
+
+`Navigator` is comprised of four individual components:
+
+-   `Navigator`: a wrapper component and context provider. It holds the main logic for hiding and showing screens.
+-   `Navigator.Screen`: represents a single view/screen/panel;
+-   `Navigator.Button`: renders a button that allows navigating to a different `Navigator.Screen`;
+-   `Navigator.BackButton`: renders a button that allows navigating to the parent `Navigator.Screen` (see the section above about hierarchical paths).
+
+For advanced usages, consumers can use the `useNavigator` hook.
+
+#### `Navigator`
+
+##### Props
+
+###### `initialPath`: `string`
+
+The initial active path.
+
+-   Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: Yes
+
+#### `Navigator.Screen`
+
+##### Props
+
+###### `path`: `string`
+
+The screen's path, matched against the current path stored in the navigator.
+
+`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
+
+`Navigator` will treat "back" navigations as going to the parent screen — it is, therefore, the responsibility of the consumer of the component to create the correct screen hierarchy.
+
+For example:
+
+-   `/` is the root of all paths. There should always be a screen with `path="/"`.
+-   `/parent/child` is a child of `/parent`.
+-   `/parent/child/grand-child` is a child of `/parent/child`.
+-   `/parent/:param` is a child of `/parent` as well.
+-   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+-   Required: Yes
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: Yes
+
+#### `Navigator.Button`
+
+##### Props
+
+###### `path`: `string`
+
+The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
+
+-   Required: Yes
+
+###### `attributeName`: `string`
+
+The HTML attribute used to identify the `Navigator.Button`, which is used by `Navigator` to restore focus.
+
+-   Required: No
+-   Default: `id`
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: No
+
+###### Inherited props
+
+`Navigator.Button` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `Navigator.BackButton`
+
+##### Props
+
+###### `children`: `string`
+
+The children elements.
+
+-   Required: No
+
+###### Inherited props
+
+`Navigator.BackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
+
+#### `useNavigator`
+
+You can retrieve a `navigator` instance by using the `useNavigator` hook.
+
+##### Props
+
+The `navigator` instance has a few properties:
+
+###### `goTo`: `( path: string, options: NavigateOptions ) => void`
+
+The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
+
+The available options are:
+
+-   `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
+-   `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
+-   `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
+
+###### `goBack`: `( path: string, options: NavigateOptions ) => void`
+
+The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
+
+When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
+
+The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
+
+###### `location`: `NavigatorLocation`
+
+The `location` object represents the current location, and has a few properties:
+
+-   `path`: `string`. The path associated to the location.
+-   `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards.
+-   `isInitial`: `boolean`. A flag that is `true` only for the initial location.
+
+###### `params`: `Record< string, string | string[] >`
+
+The parsed record of parameters from the current location. For example if the current screen path is `/product/:productId` and the location is `/product/123`, then `params` will be `{ productId: '123' }`.
diff --git a/packages/components/src/navigator/index.ts b/packages/components/src/navigator/index.ts
deleted file mode 100644
index 130edc2ae52eb8..00000000000000
--- a/packages/components/src/navigator/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { NavigatorProvider } from './navigator-provider/component';
-export { NavigatorScreen } from './navigator-screen/component';
-export { NavigatorButton } from './navigator-button/component';
-export { NavigatorBackButton } from './navigator-back-button/component';
-export { NavigatorToParentButton } from './navigator-to-parent-button/component';
-export { useNavigator } from './use-navigator';
diff --git a/packages/components/src/navigator/index.tsx b/packages/components/src/navigator/index.tsx
new file mode 100644
index 00000000000000..1d9ae95441e01a
--- /dev/null
+++ b/packages/components/src/navigator/index.tsx
@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as TopLevelNavigator } from './navigator/component';
+import { NavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton } from './navigator-back-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `Navigator` component allows rendering nested views/panels/menus
+ * (via the `Navigator.Screen` component) and navigate between them
+ * (via the `Navigator.Button` and `Navigator.BackButton` components).
+ *
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <Navigator initialPath="/">
+ *     <Navigator.Screen path="/">
+ *       <p>This is the home screen.</p>
+ *        <Navigator.Button path="/child">
+ *          Navigate to child screen.
+ *       </Navigator.Button>
+ *     </Navigator.Screen>
+ *
+ *     <Navigator.Screen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <Navigator.BackButton>
+ *         Go back
+ *       </Navigator.BackButton>
+ *     </Navigator.Screen>
+ *   </Navigator>
+ * );
+ * ```
+ */
+export const Navigator = Object.assign( TopLevelNavigator, {
+	/**
+	 * The `Navigator.Screen` component represents a single view/screen/panel and
+	 * should be used in combination with the `Navigator`, the `Navigator.Button`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Screen: Object.assign( NavigatorScreen, {
+		displayName: 'Navigator.Screen',
+	} ),
+	/**
+	 * The `Navigator.Button` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Button: Object.assign( NavigatorButton, {
+		displayName: 'Navigator.Button',
+	} ),
+	/**
+	 * The `Navigator.BackButton` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.Button` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	BackButton: Object.assign( NavigatorBackButton, {
+		displayName: 'Navigator.BackButton',
+	} ),
+} );
diff --git a/packages/components/src/navigator/legacy.ts b/packages/components/src/navigator/legacy.ts
new file mode 100644
index 00000000000000..1caa5380fc049e
--- /dev/null
+++ b/packages/components/src/navigator/legacy.ts
@@ -0,0 +1,169 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as InternalNavigator } from './navigator/component';
+import { NavigatorScreen as InternalNavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton as InternalNavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton as InternalNavigatorBackButton } from './navigator-back-button/component';
+import { NavigatorToParentButton as InternalNavigatorToParentButton } from './navigator-to-parent-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between them
+ * (via the `NavigatorButton` and `NavigatorBackButton` components).
+ *
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorProvider = Object.assign( InternalNavigator, {
+	displayName: 'NavigatorProvider',
+} );
+
+/**
+ * The `NavigatorScreen` component represents a single view/screen/panel and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorButton` and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorScreen = Object.assign( InternalNavigatorScreen, {
+	displayName: 'NavigatorScreen',
+} );
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorButton = Object.assign( InternalNavigatorButton, {
+	displayName: 'NavigatorButton',
+} );
+
+/**
+ * The `NavigatorBackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorScreen` and the `NavigatorButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back (to parent)
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorBackButton = Object.assign( InternalNavigatorBackButton, {
+	displayName: 'NavigatorBackButton',
+} );
+
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
+ *
+ * @deprecated
+ */
+export const NavigatorToParentButton = Object.assign(
+	InternalNavigatorToParentButton,
+	{
+		displayName: 'NavigatorToParentButton',
+	}
+);
diff --git a/packages/components/src/navigator/navigator-back-button/README.md b/packages/components/src/navigator/navigator-back-button/README.md
deleted file mode 100644
index 01d4221be536e5..00000000000000
--- a/packages/components/src/navigator/navigator-back-button/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# `NavigatorBackButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 88ed45b643a13d..b5c4de7df78a85 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -21,43 +21,7 @@ function UnconnectedNavigatorBackButton(
 	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
 }
 
-/**
- * The `NavigatorBackButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back (to parent)
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorBackButton = contextConnect(
 	UnconnectedNavigatorBackButton,
-	'NavigatorBackButton'
+	'Navigator.BackButton'
 );
-
-export default NavigatorBackButton;
diff --git a/packages/components/src/navigator/navigator-back-button/hook.ts b/packages/components/src/navigator/navigator-back-button/hook.ts
index 9ddc095292190a..d6fcd39647bff9 100644
--- a/packages/components/src/navigator/navigator-back-button/hook.ts
+++ b/packages/components/src/navigator/navigator-back-button/hook.ts
@@ -20,7 +20,7 @@ export function useNavigatorBackButton(
 		as = Button,
 
 		...otherProps
-	} = useContextSystem( props, 'NavigatorBackButton' );
+	} = useContextSystem( props, 'Navigator.BackButton' );
 
 	const { goBack } = useNavigator();
 	const handleClick: React.MouseEventHandler< HTMLButtonElement > =
diff --git a/packages/components/src/navigator/navigator-button/README.md b/packages/components/src/navigator/navigator-button/README.md
deleted file mode 100644
index 72154ec317da44..00000000000000
--- a/packages/components/src/navigator/navigator-button/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `NavigatorButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `attributeName`: `string`
-
-The HTML attribute used to identify the `NavigatorButton`, which is used by `Navigator` to restore focus.
-
--   Required: No
--   Default: `id`
-
-### `onClick`: `React.MouseEventHandler< HTMLElement >`
-
-The callback called in response to a `click` event.
-
--   Required: No
-
-### `path`: `string`
-
-The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
-
--   Required: Yes
-
-### Inherited props
-
-`NavigatorButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 1b84a2315c04d3..a6dc7963376723 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -21,42 +21,7 @@ function UnconnectedNavigatorButton(
 	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
 }
 
-/**
- * The `NavigatorButton` component can be used to navigate to a screen and should
- * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorButton = contextConnect(
 	UnconnectedNavigatorButton,
-	'NavigatorButton'
+	'Navigator.Button'
 );
-
-export default NavigatorButton;
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 3e39b05661e1b2..59d2aaa65662d7 100644
--- a/packages/components/src/navigator/navigator-button/hook.ts
+++ b/packages/components/src/navigator/navigator-button/hook.ts
@@ -25,7 +25,7 @@ export function useNavigatorButton(
 		as = Button,
 		attributeName = 'id',
 		...otherProps
-	} = useContextSystem( props, 'NavigatorButton' );
+	} = useContextSystem( props, 'Navigator.Button' );
 
 	const escapedPath = escapeAttribute( path );
 
diff --git a/packages/components/src/navigator/navigator-provider/README.md b/packages/components/src/navigator/navigator-provider/README.md
deleted file mode 100644
index 35bf7a69720be2..00000000000000
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# `NavigatorProvider`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md), [`NavigatorToParentButton`](/packages/components/src/navigator/navigator-to-parent-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this.
-
-## Usage
-
-```jsx
-import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-} from '@wordpress/components';
-
-const MyNavigation = () => (
-	<NavigatorProvider initialPath="/">
-		<NavigatorScreen path="/">
-			<p>This is the home screen.</p>
-			<NavigatorButton path="/child">
-				Navigate to child screen.
-			</NavigatorButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/child">
-			<p>This is the child screen.</p>
-			<NavigatorBackButton>Go back</NavigatorBackButton>
-		</NavigatorScreen>
-	</NavigatorProvider>
-);
-```
-
-**Important note**
-
-`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
-
-`Navigator` will treat "back" navigations as going to the parent screen — it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
-
-For example:
-
--   `/` is the root of all paths. There should always be a screen with `path="/"`.
--   `/parent/child` is a child of `/parent`.
--   `/parent/child/grand-child` is a child of `/parent/child`.
--   `/parent/:param` is a child of `/parent` as well.
--   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
-
-## Props
-
-The component accepts the following props:
-
-### `initialPath`: `string`
-
-The initial active path.
-
--   Required: No
-
-## The `navigator` object
-
-You can retrieve a `navigator` instance by using the `useNavigator` hook.
-
-The `navigator` instance has a few properties:
-
-### `goTo`: `( path: string, options: NavigateOptions ) => void`
-
-The `goTo` function allows navigating to a given path. The second argument can augment the navigation operations with different options.
-
-The available options are:
-
--   `focusTargetSelector`: `string`. An optional property used to specify the CSS selector used to restore focus on the matching element when navigating back;
--   `isBack`: `boolean`. An optional property used to specify whether the navigation should be considered as backwards (thus enabling focus restoration when possible, and causing the animation to be backwards too);
--   `skipFocus`: `boolean`. An optional property used to opt out of `Navigator`'s focus management, useful when the consumer of the component wants to manage focus themselves;
-
-### `goBack`: `( path: string, options: NavigateOptions ) => void`
-
-The `goBack` function allows navigating to the parent screen. Parent/child navigation only works if the paths you define are hierarchical (see note above).
-
-When a match is not found, the function will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) are found.
-
-The available options are the same as for the `goTo` method, except for the `isBack` property, which is not available for the `goBack` method.
-
-### `location`: `NavigatorLocation`
-
-The `location` object represent the current location, and has a few properties:
-
--   `path`: `string`. The path associated to the location.
--   `isBack`: `boolean`. A flag that is `true` when the current location was reached by navigating backwards.
--   `isInitial`: `boolean`. A flag that is `true` only for the initial location.
-
-### `params`: `Record< string, string | string[] >`
-
-The parsed record of parameters from the current location. For example if the current screen path is `/product/:productId` and the location is `/product/123`, then `params` will be `{ productId: '123' }`.
diff --git a/packages/components/src/navigator/navigator-screen/README.md b/packages/components/src/navigator/navigator-screen/README.md
deleted file mode 100644
index 583da461cd3c27..00000000000000
--- a/packages/components/src/navigator/navigator-screen/README.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# `NavigatorScreen`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `path`: `string`
-
-The screen&quot;s path, matched against the current path stored in the navigator.
-
-`Navigator` assumes that screens are organized hierarchically according to their `path`, which should follow a URL-like scheme where each path segment starts with and is separated by the `/` character.
-
-`Navigator` will treat "back" navigations as going to the parent screen — it is therefore responsibility of the consumer of the component to create the correct screen hierarchy.
-
-For example:
-
--   `/` is the root of all paths. There should always be a screen with `path="/"`.
--   `/parent/child` is a child of `/parent`.
--   `/parent/child/grand-child` is a child of `/parent/child`.
--   `/parent/:param` is a child of `/parent` as well.
--   if the current screen has a `path` with value `/parent/child/grand-child`, when going "back" `Navigator` will try to recursively navigate the path hierarchy until a matching screen (or the root `/`) is found.
-
--   Required: Yes
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 5882f271d4518f..fe0d81b90a17be 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -15,7 +15,6 @@ import {
 	useId,
 } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { isRTL as isRTLFn } from '@wordpress/i18n';
 import { escapeAttribute } from '@wordpress/escape-html';
 import warning from '@wordpress/warning';
 
@@ -29,6 +28,7 @@ import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import * as styles from '../styles';
 import type { NavigatorScreenProps } from '../types';
+import { useScreenAnimatePresence } from './use-screen-animate-presence';
 
 function UnconnectedNavigatorScreen(
 	props: WordPressComponentProps< NavigatorScreenProps, 'div', false >,
@@ -36,21 +36,29 @@ function UnconnectedNavigatorScreen(
 ) {
 	if ( ! /^\//.test( props.path ) ) {
 		warning(
-			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+			'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
 		);
 	}
 
 	const screenId = useId();
-	const { children, className, path, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorScreen'
-	);
+
+	const {
+		children,
+		className,
+		path,
+		onAnimationEnd: onAnimationEndProp,
+		...otherProps
+	} = useContextSystem( props, 'Navigator.Screen' );
 
 	const { location, match, addScreen, removeScreen } =
 		useContext( NavigatorContext );
+	const { isInitial, isBack, focusTargetSelector, skipFocus } = location;
+
 	const isMatch = match === screenId;
 	const wrapperRef = useRef< HTMLDivElement >( null );
+	const skipAnimationAndFocusRestoration = !! isInitial && ! isBack;
 
+	// Register / unregister screen with the navigator context.
 	useEffect( () => {
 		const screen = {
 			id: screenId,
@@ -60,31 +68,28 @@ function UnconnectedNavigatorScreen(
 		return () => removeScreen( screen );
 	}, [ screenId, path, addScreen, removeScreen ] );
 
-	const isRTL = isRTLFn();
-	const { isInitial, isBack } = location;
+	// Animation.
+	const { animationStyles, shouldRenderScreen, screenProps } =
+		useScreenAnimatePresence( {
+			isMatch,
+			isBack,
+			onAnimationEnd: onAnimationEndProp,
+			skipAnimation: skipAnimationAndFocusRestoration,
+		} );
+
 	const cx = useCx();
 	const classes = useMemo(
-		() =>
-			cx(
-				styles.navigatorScreen( {
-					isInitial,
-					isBack,
-					isRTL,
-				} ),
-				className
-			),
-		[ className, cx, isInitial, isBack, isRTL ]
+		() => cx( styles.navigatorScreen, animationStyles, className ),
+		[ className, cx, animationStyles ]
 	);
 
+	// Focus restoration
 	const locationRef = useRef( location );
-
 	useEffect( () => {
 		locationRef.current = location;
 	}, [ location ] );
-
-	// Focus restoration
-	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
+		const wrapperEl = wrapperRef.current;
 		// Only attempt to restore focus:
 		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
@@ -92,20 +97,20 @@ function UnconnectedNavigatorScreen(
 		// - if focus hasn't already been restored for the current location
 		// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
 		if (
-			isInitialLocation ||
+			skipAnimationAndFocusRestoration ||
 			! isMatch ||
-			! wrapperRef.current ||
+			! wrapperEl ||
 			locationRef.current.hasRestoredFocus ||
-			location.skipFocus
+			skipFocus
 		) {
 			return;
 		}
 
-		const activeElement = wrapperRef.current.ownerDocument.activeElement;
+		const activeElement = wrapperEl.ownerDocument.activeElement;
 
 		// If an element is already focused within the wrapper do not focus the
 		// element. This prevents inputs or buttons from losing focus unnecessarily.
-		if ( wrapperRef.current.contains( activeElement ) ) {
+		if ( wrapperEl.contains( activeElement ) ) {
 			return;
 		}
 
@@ -113,75 +118,42 @@ function UnconnectedNavigatorScreen(
 
 		// When navigating back, if a selector is provided, use it to look for the
 		// target element (assumed to be a node inside the current NavigatorScreen)
-		if ( location.isBack && location.focusTargetSelector ) {
-			elementToFocus = wrapperRef.current.querySelector(
-				location.focusTargetSelector
-			);
+		if ( isBack && focusTargetSelector ) {
+			elementToFocus = wrapperEl.querySelector( focusTargetSelector );
 		}
 
 		// If the previous query didn't run or find any element to focus, fallback
 		// to the first tabbable element in the screen (or the screen itself).
 		if ( ! elementToFocus ) {
-			const [ firstTabbable ] = focus.tabbable.find( wrapperRef.current );
-			elementToFocus = firstTabbable ?? wrapperRef.current;
+			const [ firstTabbable ] = focus.tabbable.find( wrapperEl );
+			elementToFocus = firstTabbable ?? wrapperEl;
 		}
 
 		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
-		isInitialLocation,
+		skipAnimationAndFocusRestoration,
 		isMatch,
-		location.isBack,
-		location.focusTargetSelector,
-		location.skipFocus,
+		isBack,
+		focusTargetSelector,
+		skipFocus,
 	] );
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
 
-	return isMatch ? (
-		<View ref={ mergedWrapperRef } className={ classes } { ...otherProps }>
+	return shouldRenderScreen ? (
+		<View
+			ref={ mergedWrapperRef }
+			className={ classes }
+			{ ...screenProps }
+			{ ...otherProps }
+		>
 			{ children }
 		</View>
 	) : null;
 }
 
-/**
- * The `NavigatorScreen` component represents a single view/screen/panel and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorScreen = contextConnect(
 	UnconnectedNavigatorScreen,
-	'NavigatorScreen'
+	'Navigator.Screen'
 );
-
-export default NavigatorScreen;
diff --git a/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
new file mode 100644
index 00000000000000..af5a47ee12df4c
--- /dev/null
+++ b/packages/components/src/navigator/navigator-screen/use-screen-animate-presence.ts
@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
+import { isRTL as isRTLFn } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+
+// Possible values:
+// - 'INITIAL': the initial state
+// - 'ANIMATING_IN': start enter animation
+// - 'IN': enter animation has ended
+// - 'ANIMATING_OUT': start exit animation
+// - 'OUT': the exit animation has ended
+type AnimationStatus =
+	| 'INITIAL'
+	| 'ANIMATING_IN'
+	| 'IN'
+	| 'ANIMATING_OUT'
+	| 'OUT';
+
+// Allow an extra 20% of the total animation duration to account for potential
+// event loop delays.
+const ANIMATION_TIMEOUT_MARGIN = 1.2;
+
+const isEnterAnimation = (
+	animationDirection: 'end' | 'start',
+	animationStatus: AnimationStatus,
+	animationName: string
+) =>
+	animationStatus === 'ANIMATING_IN' &&
+	animationName === styles.ANIMATION_END_NAMES[ animationDirection ].in;
+
+const isExitAnimation = (
+	animationDirection: 'end' | 'start',
+	animationStatus: AnimationStatus,
+	animationName: string
+) =>
+	animationStatus === 'ANIMATING_OUT' &&
+	animationName === styles.ANIMATION_END_NAMES[ animationDirection ].out;
+
+export function useScreenAnimatePresence( {
+	isMatch,
+	skipAnimation,
+	isBack,
+	onAnimationEnd,
+}: {
+	isMatch: boolean;
+	skipAnimation: boolean;
+	isBack?: boolean;
+	onAnimationEnd?: React.AnimationEventHandler< Element >;
+} ) {
+	const isRTL = isRTLFn();
+	const prefersReducedMotion = useReducedMotion();
+
+	const [ animationStatus, setAnimationStatus ] =
+		useState< AnimationStatus >( 'INITIAL' );
+
+	// Start enter and exit animations when the screen is selected or deselected.
+	// The animation status is set to `IN` or `OUT` immediately if the animation
+	// should be skipped.
+	const becameSelected =
+		animationStatus !== 'ANIMATING_IN' &&
+		animationStatus !== 'IN' &&
+		isMatch;
+	const becameUnselected =
+		animationStatus !== 'ANIMATING_OUT' &&
+		animationStatus !== 'OUT' &&
+		! isMatch;
+	useLayoutEffect( () => {
+		if ( becameSelected ) {
+			setAnimationStatus(
+				skipAnimation || prefersReducedMotion ? 'IN' : 'ANIMATING_IN'
+			);
+		} else if ( becameUnselected ) {
+			setAnimationStatus(
+				skipAnimation || prefersReducedMotion ? 'OUT' : 'ANIMATING_OUT'
+			);
+		}
+	}, [
+		becameSelected,
+		becameUnselected,
+		skipAnimation,
+		prefersReducedMotion,
+	] );
+
+	// Animation attributes (derived state).
+	const animationDirection =
+		( isRTL && isBack ) || ( ! isRTL && ! isBack ) ? 'end' : 'start';
+	const isAnimatingIn = animationStatus === 'ANIMATING_IN';
+	const isAnimatingOut = animationStatus === 'ANIMATING_OUT';
+	let animationType: 'in' | 'out' | undefined;
+	if ( isAnimatingIn ) {
+		animationType = 'in';
+	} else if ( isAnimatingOut ) {
+		animationType = 'out';
+	}
+
+	const onScreenAnimationEnd = useCallback(
+		( e: React.AnimationEvent< HTMLElement > ) => {
+			onAnimationEnd?.( e );
+
+			if (
+				isExitAnimation(
+					animationDirection,
+					animationStatus,
+					e.animationName
+				)
+			) {
+				// When the exit animation ends on an unselected screen, set the
+				// status to 'OUT' to remove the screen contents from the DOM.
+				setAnimationStatus( 'OUT' );
+			} else if (
+				isEnterAnimation(
+					animationDirection,
+					animationStatus,
+					e.animationName
+				)
+			) {
+				// When the enter animation ends on a selected screen, set the
+				// status to 'IN' to ensure the screen is rendered in the DOM.
+				setAnimationStatus( 'IN' );
+			}
+		},
+		[ onAnimationEnd, animationStatus, animationDirection ]
+	);
+
+	// Fallback timeout to ensure that the logic is applied even if the
+	// `animationend` event is not triggered.
+	useEffect( () => {
+		let animationTimeout: number | undefined;
+
+		if ( isAnimatingOut ) {
+			animationTimeout = window.setTimeout( () => {
+				setAnimationStatus( 'OUT' );
+				animationTimeout = undefined;
+			}, styles.TOTAL_ANIMATION_DURATION.OUT * ANIMATION_TIMEOUT_MARGIN );
+		} else if ( isAnimatingIn ) {
+			animationTimeout = window.setTimeout( () => {
+				setAnimationStatus( 'IN' );
+				animationTimeout = undefined;
+			}, styles.TOTAL_ANIMATION_DURATION.IN * ANIMATION_TIMEOUT_MARGIN );
+		}
+
+		return () => {
+			if ( animationTimeout ) {
+				window.clearTimeout( animationTimeout );
+				animationTimeout = undefined;
+			}
+		};
+	}, [ isAnimatingOut, isAnimatingIn ] );
+
+	return {
+		animationStyles: styles.navigatorScreenAnimation,
+		// Render the screen's contents in the DOM not only when the screen is
+		// selected, but also while it is animating out.
+		shouldRenderScreen:
+			isMatch ||
+			animationStatus === 'IN' ||
+			animationStatus === 'ANIMATING_OUT',
+		screenProps: {
+			onAnimationEnd: onScreenAnimationEnd,
+			'data-animation-direction': animationDirection,
+			'data-animation-type': animationType,
+			'data-skip-animation': skipAnimation || undefined,
+		},
+	} as const;
+}
diff --git a/packages/components/src/navigator/navigator-to-parent-button/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md
deleted file mode 100644
index 0100ea9b8d2e1f..00000000000000
--- a/packages/components/src/navigator/navigator-to-parent-button/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# `NavigatorToParentButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-This component is deprecated. Please use the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) component instead.
-
-The `NavigatorToParentButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorToParentButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-to-parent-button/component.tsx b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
index fcbadea03cf7bb..f1c2d27e2284a1 100644
--- a/packages/components/src/navigator/navigator-to-parent-button/component.tsx
+++ b/packages/components/src/navigator/navigator-to-parent-button/component.tsx
@@ -17,21 +17,16 @@ function UnconnectedNavigatorToParentButton(
 ) {
 	deprecated( 'wp.components.NavigatorToParentButton', {
 		since: '6.7',
-		alternative: 'wp.components.NavigatorBackButton',
+		alternative: 'wp.components.Navigator.BackButton',
 	} );
 
 	return <NavigatorBackButton ref={ forwardedRef } { ...props } />;
 }
 
 /**
- * _Note: this component is deprecated. Please use the `NavigatorBackButton`
- * component instead._
- *
  * @deprecated
  */
 export const NavigatorToParentButton = contextConnect(
 	UnconnectedNavigatorToParentButton,
-	'NavigatorToParentButton'
+	'Navigator.ToParentButton'
 );
-
-export default NavigatorToParentButton;
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator/component.tsx
similarity index 81%
rename from packages/components/src/navigator/navigator-provider/component.tsx
rename to packages/components/src/navigator/navigator/component.tsx
index ebcb247c574830..bd49b3682fb144 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator/component.tsx
@@ -21,7 +21,7 @@ import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import * as styles from '../styles';
 import type {
-	NavigatorProviderProps,
+	NavigatorProps,
 	NavigatorLocation,
 	NavigatorContext as NavigatorContextType,
 	NavigateOptions,
@@ -66,7 +66,7 @@ function goTo(
 	options: NavigateOptions = {}
 ) {
 	const { focusSelectors } = state;
-	const currentLocation = { ...state.currentLocation, isInitial: false };
+	const currentLocation = { ...state.currentLocation };
 
 	const {
 		// Default assignments
@@ -114,6 +114,7 @@ function goTo(
 	return {
 		currentLocation: {
 			...restOptions,
+			isInitial: false,
 			path,
 			isBack,
 			hasRestoredFocus: false,
@@ -129,7 +130,7 @@ function goToParent(
 	options: NavigateToParentOptions = {}
 ) {
 	const { screens, focusSelectors } = state;
-	const currentLocation = { ...state.currentLocation, isInitial: false };
+	const currentLocation = { ...state.currentLocation };
 	const currentPath = currentLocation.path;
 	if ( currentPath === undefined ) {
 		return { currentLocation, focusSelectors };
@@ -212,8 +213,8 @@ function routerReducer(
 	};
 }
 
-function UnconnectedNavigatorProvider(
-	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
+function UnconnectedNavigator(
+	props: WordPressComponentProps< NavigatorProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
@@ -221,7 +222,7 @@ function UnconnectedNavigatorProvider(
 		children,
 		className,
 		...otherProps
-	} = useContextSystem( props, 'NavigatorProvider' );
+	} = useContextSystem( props, 'Navigator' );
 
 	const [ routerState, dispatch ] = useReducer(
 		routerReducer,
@@ -274,7 +275,7 @@ function UnconnectedNavigatorProvider(
 
 	const cx = useCx();
 	const classes = useMemo(
-		() => cx( styles.navigatorProviderWrapper, className ),
+		() => cx( styles.navigatorWrapper, className ),
 		[ className, cx ]
 	);
 
@@ -287,42 +288,4 @@ function UnconnectedNavigatorProvider(
 	);
 }
 
-/**
- * The `NavigatorProvider` component allows rendering nested views/panels/menus
- * (via the `NavigatorScreen` component and navigate between these different
- * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
- * `useNavigator` hook).
- *
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
-export const NavigatorProvider = contextConnect(
-	UnconnectedNavigatorProvider,
-	'NavigatorProvider'
-);
-
-export default NavigatorProvider;
+export const Navigator = contextConnect( UnconnectedNavigator, 'Navigator' );
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
index 30b9c71a368c1a..e9e342bb0d2eee 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -8,20 +8,20 @@ import type { Meta, StoryObj } from '@storybook/react';
  */
 import Button from '../../button';
 import { VStack } from '../../v-stack';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-	useNavigator,
-} from '..';
 import { HStack } from '../../h-stack';
-
-const meta: Meta< typeof NavigatorProvider > = {
-	component: NavigatorProvider,
-	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
-	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
-	title: 'Components (Experimental)/Navigator',
+import { Navigator, useNavigator } from '../';
+
+const meta: Meta< typeof Navigator > = {
+	component: Navigator,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Screen: Navigator.Screen,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Button: Navigator.Button,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		BackButton: Navigator.BackButton,
+	},
+	title: 'Components/Navigator',
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
@@ -36,14 +36,14 @@ const meta: Meta< typeof NavigatorProvider > = {
 			return (
 				<>
 					<style>{ `
-					  /* These attributes are a private implementation detail of the
-						  Navigator component. Do not use outside of its source code. */
-						[data-wp-component="NavigatorProvider"] {
-							height: calc(100vh - 2rem);
-							max-height: 250px;
-
+					  /* The data-wp-component attribute is a private implementation
+						 * detail of the Navigator component. Do not use outside of
+						 * its source code.
+						 */
+						[data-wp-component="Navigator"] {
+							height: 250px;
 						}
-						[data-wp-component="NavigatorScreen"]:not([data-sticky]) {
+						[data-wp-component="Navigator.Screen"] {
 							padding: 8px;
 						}
 					` }</style>
@@ -55,55 +55,55 @@ const meta: Meta< typeof NavigatorProvider > = {
 };
 export default meta;
 
-export const Default: StoryObj< typeof NavigatorProvider > = {
+export const Default: StoryObj< typeof Navigator > = {
 	args: {
 		initialPath: '/',
 		children: (
 			<>
-				<NavigatorScreen path="/">
+				<Navigator.Screen path="/">
 					<h2>This is the home screen.</h2>
 
 					<VStack alignment="left">
-						<NavigatorButton variant="primary" path="/child">
+						<Navigator.Button variant="primary" path="/child">
 							Go to child screen.
-						</NavigatorButton>
+						</Navigator.Button>
 
-						<NavigatorButton variant="primary" path="/product/1">
+						<Navigator.Button variant="primary" path="/product/1">
 							Go to dynamic path screen with id 1.
-						</NavigatorButton>
+						</Navigator.Button>
 
-						<NavigatorButton variant="primary" path="/product/2">
+						<Navigator.Button variant="primary" path="/product/2">
 							Go to dynamic path screen with id 2.
-						</NavigatorButton>
+						</Navigator.Button>
 					</VStack>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path="/child">
+				<Navigator.Screen path="/child">
 					<h2>This is the child screen.</h2>
 					<HStack spacing={ 2 } alignment="left">
-						<NavigatorBackButton variant="secondary">
+						<Navigator.BackButton variant="secondary">
 							Go back
-						</NavigatorBackButton>
+						</Navigator.BackButton>
 
-						<NavigatorButton
+						<Navigator.Button
 							variant="primary"
 							path="/child/grandchild"
 						>
 							Go to grand child screen.
-						</NavigatorButton>
+						</Navigator.Button>
 					</HStack>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path="/child/grandchild">
+				<Navigator.Screen path="/child/grandchild">
 					<h2>This is the grand child screen.</h2>
-					<NavigatorBackButton variant="secondary">
+					<Navigator.BackButton variant="secondary">
 						Go back
-					</NavigatorBackButton>
-				</NavigatorScreen>
+					</Navigator.BackButton>
+				</Navigator.Screen>
 
-				<NavigatorScreen path="/product/:id">
+				<Navigator.Screen path="/product/:id">
 					<DynamicScreen />
-				</NavigatorScreen>
+				</Navigator.Screen>
 			</>
 		),
 	},
@@ -119,14 +119,14 @@ function DynamicScreen() {
 				This screen can parse params dynamically. The current id is:{ ' ' }
 				{ params.id }
 			</p>
-			<NavigatorBackButton variant="secondary">
+			<Navigator.BackButton variant="secondary">
 				Go back
-			</NavigatorBackButton>
+			</Navigator.BackButton>
 		</>
 	);
 }
 
-export const WithNestedInitialPath: StoryObj< typeof NavigatorProvider > = {
+export const WithNestedInitialPath: StoryObj< typeof Navigator > = {
 	...Default,
 	args: {
 		...Default.args,
@@ -138,7 +138,7 @@ const NavigatorButtonWithSkipFocus = ( {
 	path,
 	onClick,
 	...props
-}: React.ComponentProps< typeof NavigatorButton > ) => {
+}: React.ComponentProps< typeof Navigator.Button > ) => {
 	const { goTo } = useNavigator();
 
 	return (
@@ -156,7 +156,7 @@ const NavigatorButtonWithSkipFocus = ( {
 	);
 };
 
-export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
+export const SkipFocus: StoryObj< typeof Navigator > = {
 	args: {
 		initialPath: '/',
 		children: (
@@ -167,21 +167,22 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
 						outline: '1px solid black',
 						outlineOffset: '-1px',
 						marginBlockEnd: '1rem',
+						display: 'contents',
 					} }
 				>
-					<NavigatorScreen path="/">
+					<Navigator.Screen path="/">
 						<h2>Home screen</h2>
-						<NavigatorButton variant="primary" path="/child">
+						<Navigator.Button variant="primary" path="/child">
 							Go to child screen.
-						</NavigatorButton>
-					</NavigatorScreen>
+						</Navigator.Button>
+					</Navigator.Screen>
 
-					<NavigatorScreen path="/child">
+					<Navigator.Screen path="/child">
 						<h2>Child screen</h2>
-						<NavigatorBackButton variant="secondary">
+						<Navigator.BackButton variant="secondary">
 							Go back to home screen
-						</NavigatorBackButton>
-					</NavigatorScreen>
+						</Navigator.BackButton>
+					</Navigator.Screen>
 				</div>
 
 				<NavigatorButtonWithSkipFocus path="/child">
diff --git a/packages/components/src/navigator/styles.ts b/packages/components/src/navigator/styles.ts
index 0203edbdf1816a..167d4ac07de3d6 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -3,69 +3,140 @@
  */
 import { css, keyframes } from '@emotion/react';
 
-export const navigatorProviderWrapper = css`
+export const navigatorWrapper = css`
+	position: relative;
 	/* Prevents horizontal overflow while animating screen transitions */
-	overflow-x: hidden;
-	/* Mark this subsection of the DOM as isolated, providing performance benefits
-	 * by limiting calculations of layout, style and paint to a DOM subtree rather
-	 * than the entire page.
+	overflow-x: clip;
+	/*
+	 * Mark this DOM subtree as isolated when it comes to layout calculations,
+	 * providing performance benefits.
 	 */
-	contain: content;
+	contain: layout;
+
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+	align-items: start;
 `;
 
-const fadeInFromRight = keyframes( {
-	'0%': {
+const fadeIn = keyframes( {
+	from: {
 		opacity: 0,
-		transform: `translateX( 50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-const fadeInFromLeft = keyframes( {
-	'0%': {
+const fadeOut = keyframes( {
+	to: {
 		opacity: 0,
-		transform: `translateX( -50px )`,
 	},
-	'100%': { opacity: 1, transform: 'none' },
 } );
 
-type NavigatorScreenAnimationProps = {
-	isInitial?: boolean;
-	isBack?: boolean;
-	isRTL: boolean;
+export const slideFromRight = keyframes( {
+	from: {
+		transform: 'translateX(100px)',
+	},
+} );
+
+export const slideToLeft = keyframes( {
+	to: {
+		transform: 'translateX(-80px)',
+	},
+} );
+
+export const slideFromLeft = keyframes( {
+	from: {
+		transform: 'translateX(-100px)',
+	},
+} );
+
+export const slideToRight = keyframes( {
+	to: {
+		transform: 'translateX(80px)',
+	},
+} );
+
+const FADE = {
+	DURATION: 70,
+	EASING: 'linear',
+	DELAY: {
+		IN: 70,
+		OUT: 40,
+	},
+};
+const SLIDE = {
+	DURATION: 300,
+	EASING: 'cubic-bezier(0.33, 0, 0, 1)',
+};
+
+export const TOTAL_ANIMATION_DURATION = {
+	IN: Math.max( FADE.DURATION + FADE.DELAY.IN, SLIDE.DURATION ),
+	OUT: Math.max( FADE.DURATION + FADE.DELAY.OUT, SLIDE.DURATION ),
 };
 
-const navigatorScreenAnimation = ( {
-	isInitial,
-	isBack,
-	isRTL,
-}: NavigatorScreenAnimationProps ) => {
-	if ( isInitial && ! isBack ) {
-		return;
-	}
+export const ANIMATION_END_NAMES = {
+	end: {
+		in: slideFromRight.name,
+		out: slideToLeft.name,
+	},
+	start: {
+		in: slideFromLeft.name,
+		out: slideToRight.name,
+	},
+};
 
-	const animationName =
-		( isRTL && isBack ) || ( ! isRTL && ! isBack )
-			? fadeInFromRight
-			: fadeInFromLeft;
+const ANIMATION = {
+	end: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromRight }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToLeft }
+		`,
+	},
+	start: {
+		in: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.IN }ms both ${ fadeIn }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideFromLeft }
+		`,
+		out: css`
+			${ FADE.DURATION }ms ${ FADE.EASING } ${ FADE.DELAY
+				.OUT }ms both ${ fadeOut }, ${ SLIDE.DURATION }ms ${ SLIDE.EASING } both ${ slideToRight }
+		`,
+	},
+} as const;
+export const navigatorScreenAnimation = css`
+	z-index: 1;
 
-	return css`
-		animation-duration: 0.14s;
-		animation-timing-function: ease-in-out;
-		will-change: transform, opacity;
-		animation-name: ${ animationName };
+	&[data-animation-type='out'] {
+		z-index: 0;
+	}
 
-		@media ( prefers-reduced-motion ) {
-			animation-duration: 0s;
+	@media not ( prefers-reduced-motion ) {
+		&:not( [data-skip-animation] ) {
+			${ ( [ 'start', 'end' ] as const ).map( ( direction ) =>
+				( [ 'in', 'out' ] as const ).map(
+					( type ) => css`
+						&[data-animation-direction='${ direction }'][data-animation-type='${ type }'] {
+							animation: ${ ANIMATION[ direction ][ type ] };
+						}
+					`
+				)
+			) }
 		}
-	`;
-};
+	}
+`;
 
-export const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`
+export const navigatorScreen = css`
 	/* Ensures horizontal overflow is visually accessible */
 	overflow-x: auto;
 	/* In case the root has a height, it should not be exceeded */
 	max-height: 100%;
+	box-sizing: border-box;
+
+	position: relative;
 
-	${ navigatorScreenAnimation( props ) }
+	grid-column: 1 / -1;
+	grid-row: 1 / -1;
 `;
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index 820942a22644ba..cab6e9a4cdadff 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -14,14 +14,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import {
-	NavigatorProvider,
-	NavigatorScreen,
-	NavigatorButton,
-	NavigatorBackButton,
-	NavigatorToParentButton,
-	useNavigator,
-} from '..';
+import { Navigator, useNavigator } from '..';
+import { NavigatorToParentButton } from '../legacy';
 import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
@@ -76,11 +70,11 @@ function CustomNavigatorButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorButton
+		<Navigator.Button
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goTo`.
 				onClick?.( { type: 'goTo', path } );
@@ -95,7 +89,7 @@ function CustomNavigatorGoToBackButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -115,7 +109,7 @@ function CustomNavigatorGoToSkipFocusButton( {
 	path,
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+}: Omit< ComponentPropsWithoutRef< typeof Navigator.Button >, 'onClick' > & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	const { goTo } = useNavigator();
@@ -134,11 +128,14 @@ function CustomNavigatorGoToSkipFocusButton( {
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
-		<NavigatorBackButton
+		<Navigator.BackButton
 			onClick={ () => {
 				// Used to spy on the values passed to `navigator.goBack`.
 				onClick?.( { type: 'goBack' } );
@@ -151,7 +148,10 @@ function CustomNavigatorBackButton( {
 function CustomNavigatorToParentButton( {
 	onClick,
 	...props
-}: Omit< ComponentPropsWithoutRef< typeof NavigatorBackButton >, 'onClick' > & {
+}: Omit<
+	ComponentPropsWithoutRef< typeof Navigator.BackButton >,
+	'onClick'
+> & {
 	onClick?: CustomTestOnClickHandler;
 } ) {
 	return (
@@ -194,13 +194,13 @@ const ProductScreen = ( {
 	const { params } = useNavigator();
 
 	return (
-		<NavigatorScreen path={ PATHS.PRODUCT_PATTERN }>
+		<Navigator.Screen path={ PATHS.PRODUCT_PATTERN }>
 			<p>{ SCREEN_TEXT.product }</p>
 			<p>Product ID is { params.productId }</p>
 			<CustomNavigatorBackButton onClick={ onBackButtonClick }>
 				{ BUTTON_TEXT.back }
 			</CustomNavigatorBackButton>
-		</NavigatorScreen>
+		</Navigator.Screen>
 	);
 };
 
@@ -215,8 +215,8 @@ const MyNavigation = ( {
 	const [ outerInputValue, setOuterInputValue ] = useState( '' );
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -254,9 +254,9 @@ const MyNavigation = ( {
 					>
 						{ BUTTON_TEXT.toInvalidHtmlPathScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -286,30 +286,30 @@ const MyNavigation = ( {
 						} }
 						value={ innerInputValue }
 					/>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
 				<ProductScreen onBackButtonClick={ onNavigatorButtonClick } />
 
-				<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+				<Navigator.Screen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
 					<p>{ SCREEN_TEXT.invalidHtmlPath }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
-			</NavigatorProvider>
+				{ /* A `Navigator.Screen` with `path={ PATHS.NOT_FOUND }` is purposefully not included. */ }
+			</Navigator>
 
 			<label htmlFor="test-input-outer">Outer input</label>
 			<input
@@ -334,8 +334,8 @@ const MyHierarchicalNavigation = ( {
 } ) => {
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -349,9 +349,9 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -370,9 +370,9 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorBackButton
 						onClick={ onNavigatorButtonClick }
@@ -385,14 +385,14 @@ const MyHierarchicalNavigation = ( {
 					>
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 				<CustomNavigatorGoToSkipFocusButton
 					path={ PATHS.NESTED }
 					onClick={ onNavigatorButtonClick }
 				>
 					{ BUTTON_TEXT.goToWithSkipFocus }
 				</CustomNavigatorGoToSkipFocusButton>
-			</NavigatorProvider>
+			</Navigator>
 		</>
 	);
 };
@@ -406,8 +406,8 @@ const MyDeprecatedNavigation = ( {
 } ) => {
 	return (
 		<>
-			<NavigatorProvider initialPath={ initialPath }>
-				<NavigatorScreen path={ PATHS.HOME }>
+			<Navigator initialPath={ initialPath }>
+				<Navigator.Screen path={ PATHS.HOME }>
 					<p>{ SCREEN_TEXT.home }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -421,9 +421,9 @@ const MyDeprecatedNavigation = ( {
 					>
 						{ BUTTON_TEXT.toChildScreen }
 					</CustomNavigatorButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.CHILD }>
+				<Navigator.Screen path={ PATHS.CHILD }>
 					<p>{ SCREEN_TEXT.child }</p>
 					{ /*
 					 * A button useful to test focus restoration. This button is the first
@@ -442,17 +442,17 @@ const MyDeprecatedNavigation = ( {
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorToParentButton>
-				</NavigatorScreen>
+				</Navigator.Screen>
 
-				<NavigatorScreen path={ PATHS.NESTED }>
+				<Navigator.Screen path={ PATHS.NESTED }>
 					<p>{ SCREEN_TEXT.nested }</p>
 					<CustomNavigatorToParentButtonAlternative
 						onClick={ onNavigatorButtonClick }
 					>
 						{ BUTTON_TEXT.back }
 					</CustomNavigatorToParentButtonAlternative>
-				</NavigatorScreen>
-			</NavigatorProvider>
+				</Navigator.Screen>
+			</Navigator>
 		</>
 	);
 };
@@ -643,10 +643,10 @@ describe( 'Navigator', () => {
 	} );
 
 	it( 'should warn if the `path` prop does not follow the required format', () => {
-		render( <NavigatorScreen path="not-valid">Test</NavigatorScreen> );
+		render( <Navigator.Screen path="not-valid">Test</Navigator.Screen> );
 
 		expect( console ).toHaveWarnedWith(
-			'wp.components.NavigatorScreen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
+			'wp.components.Navigator.Screen: the `path` should follow a URL-like scheme; it should start with and be separated by the `/` character.'
 		);
 	} );
 
@@ -880,7 +880,7 @@ describe( 'Navigator', () => {
 
 			// Rendering `NavigatorToParentButton` logs a deprecation notice
 			expect( console ).toHaveWarnedWith(
-				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.NavigatorBackButton instead.'
+				'wp.components.NavigatorToParentButton is deprecated since version 6.7. Please use wp.components.Navigator.BackButton instead.'
 			);
 		} );
 
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 855787b4d0a193..aeb5fd3b12c7fb 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -86,7 +86,7 @@ export type NavigatorContext = Navigator & {
 	match?: string;
 };
 
-export type NavigatorProviderProps = {
+export type NavigatorProps = {
 	/**
 	 * The initial active path.
 	 */
@@ -100,6 +100,24 @@ export type NavigatorProviderProps = {
 export type NavigatorScreenProps = {
 	/**
 	 * The screen's path, matched against the current path stored in the navigator.
+	 *
+	 * `Navigator` assumes that screens are organized hierarchically according
+	 * to their `path`, which should follow a URL-like scheme where each path
+	 * segment starts with and is separated by the `/` character.
+	 *
+	 * `Navigator` will treat "back" navigations as going to the parent screen —
+	 * it is, therefore, the responsibility of the consumer of the component to
+	 * create the correct screen hierarchy.
+	 *
+	 * For example:
+	 *  - `/` is the root of all paths. There should always be a screen with
+	 *    `path="/"`;
+	 *  - `/parent/child` is a child of `/parent`;
+	 *  - `/parent/child/grand-child` is a child of `/parent/child`;
+	 *  - `/parent/:param` is a child of `/parent` as well;
+	 *  - if the current screen has a `path="/parent/child/grand-child"`, when
+	 *    going "back" `Navigator` will try to recursively navigate the path
+	 *    hierarchy until a matching screen (or the root `/`) is found.
 	 */
 	path: string;
 	/**
diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
index 7ac35d73150d32..1ea99f3f1c857d 100644
--- a/packages/components/src/navigator/use-navigator.ts
+++ b/packages/components/src/navigator/use-navigator.ts
@@ -10,7 +10,10 @@ import { NavigatorContext } from './context';
 import type { Navigator } from './types';
 
 /**
- * Retrieves a `navigator` instance.
+ * Retrieves a `navigator` instance. This hook provides advanced functionality,
+ * such as imperatively navigating to a new location (with options like
+ * navigating back or skipping focus restoration) and accessing the current
+ * location and path parameters.
  */
 export function useNavigator(): Navigator {
 	const { location, params, goTo, goBack, goToParent } =
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index bfab8978864b34..601e9ebb7675f5 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -22,7 +22,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover__content {
 	background: $white;
-	box-shadow: $shadow-popover-border-default, $elevation-x-small;
+	box-shadow: $shadow-popover-border-default, $elevation-medium;
 	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index e2b651bd317da5..dae1d0de3ddb66 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -239,6 +239,7 @@ export const Thumb = styled.span< ThumbProps >`
 	position: absolute;
 	user-select: none;
 	width: 100%;
+	box-shadow: ${ CONFIG.elevationXSmall };
 
 	${ thumbColor };
 	${ thumbFocus };
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 2e709a5bbb382d..3c9efd27136460 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
index aac905e137e025..c41eda9b209b6c 100644
--- a/packages/components/src/search-control/index.tsx
+++ b/packages/components/src/search-control/index.tsx
@@ -67,7 +67,7 @@ function UnforwardedSearchControl(
 ) {
 	// @ts-expect-error The `disabled` prop is not yet supported in the SearchControl component.
 	// Work with the design team (@WordPress/gutenberg-design) if you need this feature.
-	delete restProps.disabled;
+	const { disabled, ...filteredRestProps } = restProps;
 
 	const searchRef = useRef< HTMLInputElement >( null );
 	const instanceId = useInstanceId(
@@ -117,7 +117,7 @@ function UnforwardedSearchControl(
 						/>
 					</SuffixItemWrapper>
 				}
-				{ ...restProps }
+				{ ...filteredRestProps }
 			/>
 		</ContextSystemProvider>
 	);
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index 018f519e6b6d43..5e57a4eaecd5ab 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import SelectControl from '../';
+import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';
 
 const meta: Meta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
@@ -64,6 +65,7 @@ const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 export const Default = SelectControlWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	options: [
 		{ value: '', label: 'Select an Option', disabled: true },
 		{ value: 'a', label: 'Option A' },
@@ -76,7 +78,6 @@ export const WithLabelAndHelpText = SelectControlWithState.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
 	help: 'Help text to explain the select control.',
-	label: 'Value',
 };
 
 /**
@@ -86,6 +87,7 @@ WithLabelAndHelpText.args = {
 export const WithCustomChildren = SelectControlWithState.bind( {} );
 WithCustomChildren.args = {
 	__nextHasNoMarginBottom: true,
+	label: 'Label',
 	children: (
 		<>
 			<option value="option-1">Option 1</option>
@@ -104,8 +106,19 @@ WithCustomChildren.args = {
 	),
 };
 
+/**
+ * By default, the prefix is aligned with the edge of the input border, with no padding.
+ * If you want to apply standard padding in accordance with the size variant, wrap the element in the `<InputControlPrefixWrapper>` component.
+ */
+export const WithPrefix = SelectControlWithState.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <InputControlPrefixWrapper>Prefix:</InputControlPrefixWrapper>,
+};
+
 export const Minimal = SelectControlWithState.bind( {} );
 Minimal.args = {
 	...Default.args,
 	variant: 'minimal',
+	hideLabelFromVision: true,
 };
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index e7f29267d6f6db..1e76a1666411e7 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -4,7 +4,7 @@
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-medium;
-	box-shadow: $elevation-x-small;
+	box-shadow: $elevation-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
index e5f113d93b7d0e..0f7e0d2c6ac75f 100644
--- a/packages/components/src/tabs/stories/index.story.tsx
+++ b/packages/components/src/tabs/stories/index.story.tsx
@@ -70,6 +70,112 @@ const Template: StoryFn< typeof Tabs > = ( props ) => {
 
 export const Default = Template.bind( {} );
 
+export const SizeAndOverflowPlayground: StoryFn< typeof Tabs > = ( props ) => {
+	const [ fullWidth, setFullWidth ] = useState( false );
+	return (
+		<div>
+			<div style={ { maxWidth: '40rem', marginBottom: '1rem' } }>
+				<p>
+					This story helps understand how the TabList component
+					behaves under different conditions. The container below
+					(with the dotted red border) can be horizontally resized,
+					and it has a bit of padding to be out of the way of the
+					TabList.
+				</p>
+				<p>
+					The button will toggle between full width (adding{ ' ' }
+					<code>width: 100%</code>) and the default width.
+				</p>
+				<p>Try the following:</p>
+				<ul>
+					<li>
+						<strong>Small container</strong> that causes tabs to
+						overflow with scroll.
+					</li>
+					<li>
+						<strong>Large container</strong> that exceeds the normal
+						width of the tabs.
+						<ul>
+							<li>
+								<strong>
+									With <code>width: 100%</code>
+								</strong>{ ' ' }
+								set on the TabList (tabs fill up the space).
+							</li>
+							<li>
+								<strong>
+									Without <code>width: 100%</code>
+								</strong>{ ' ' }
+								(defaults to <code>auto</code>) set on the
+								TabList (tabs take up space proportional to
+								their content).
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+			<Button
+				style={ { marginBottom: '1rem' } }
+				variant="primary"
+				onClick={ () => setFullWidth( ! fullWidth ) }
+			>
+				{ fullWidth
+					? 'Remove width: 100% from TabList'
+					: 'Set width: 100% in TabList' }
+			</Button>
+			<Tabs { ...props }>
+				<div
+					style={ {
+						width: '20rem',
+						border: '2px dotted red',
+						padding: '1rem',
+						resize: 'horizontal',
+						overflow: 'auto',
+					} }
+				>
+					<Tabs.TabList
+						style={ {
+							maxWidth: '100%',
+							width: fullWidth ? '100%' : undefined,
+						} }
+					>
+						<Tabs.Tab tabId="tab1">
+							Label with multiple words
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab2">Short</Tabs.Tab>
+						<Tabs.Tab tabId="tab3">
+							Hippopotomonstrosesquippedaliophobia
+						</Tabs.Tab>
+						<Tabs.Tab tabId="tab4">Tab 4</Tabs.Tab>
+						<Tabs.Tab tabId="tab5">Tab 5</Tabs.Tab>
+					</Tabs.TabList>
+				</div>
+				<Tabs.TabPanel tabId="tab1">
+					<p>Selected tab: Tab 1</p>
+					<p>(Label with multiple words)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab2">
+					<p>Selected tab: Tab 2</p>
+					<p>(Short)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab3">
+					<p>Selected tab: Tab 3</p>
+					<p>(Hippopotomonstrosesquippedaliophobia)</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab4">
+					<p>Selected tab: Tab 4</p>
+				</Tabs.TabPanel>
+				<Tabs.TabPanel tabId="tab5">
+					<p>Selected tab: Tab 5</p>
+				</Tabs.TabPanel>
+			</Tabs>
+		</div>
+	);
+};
+SizeAndOverflowPlayground.args = {
+	defaultTabId: 'tab4',
+};
+
 const VerticalTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	return (
 		<Tabs orientation="vertical" { ...props }>
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a6425f9ab31e45..283d6421f5b768 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -16,32 +16,40 @@ export const TabListWrapper = styled.div`
 	align-items: stretch;
 	flex-direction: row;
 	text-align: center;
+	overflow-x: auto;
 
 	&[aria-orientation='vertical'] {
 		flex-direction: column;
 		text-align: start;
 	}
 
-	@media not ( prefers-reduced-motion ) {
-		&.is-animation-enabled::after {
-			transition-property: transform;
-			transition-duration: 0.2s;
-			transition-timing-function: ease-out;
-		}
+	:where( [aria-orientation='horizontal'] ) {
+		width: fit-content;
 	}
+
 	--direction-factor: 1;
-	--direction-origin-x: left;
+	--direction-start: left;
+	--direction-end: right;
 	--indicator-start: var( --indicator-left );
 	&:dir( rtl ) {
 		--direction-factor: -1;
-		--direction-origin-x: right;
+		--direction-start: right;
+		--direction-end: left;
 		--indicator-start: var( --indicator-right );
 	}
-	&::after {
+
+	@media not ( prefers-reduced-motion ) {
+		&.is-animation-enabled::before {
+			transition-property: transform;
+			transition-duration: 0.2s;
+			transition-timing-function: ease-out;
+		}
+	}
+	&::before {
 		content: '';
 		position: absolute;
 		pointer-events: none;
-		transform-origin: var( --direction-origin-x ) top;
+		transform-origin: var( --direction-start ) top;
 
 		// Windows high contrast mode.
 		outline: 2px solid transparent;
@@ -52,7 +60,31 @@ export const TabListWrapper = styled.div`
 			when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
 	--antialiasing-factor: 100;
 	&:not( [aria-orientation='vertical'] ) {
-		&::after {
+		--fade-width: 4rem;
+		--fade-gradient-base: transparent 0%, black var( --fade-width );
+		--fade-gradient-composed: var( --fade-gradient-base ), black 60%,
+			transparent 50%;
+		&.is-overflowing-first {
+			mask-image: linear-gradient(
+				to var( --direction-end ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-last {
+			mask-image: linear-gradient(
+				to var( --direction-start ),
+				var( --fade-gradient-base )
+			);
+		}
+		&.is-overflowing-first.is-overflowing-last {
+			mask-image: linear-gradient(
+					to right,
+					var( --fade-gradient-composed )
+				),
+				linear-gradient( to left, var( --fade-gradient-composed ) );
+		}
+
+		&::before {
 			bottom: 0;
 			height: 0;
 			width: calc( var( --antialiasing-factor ) * 1px );
@@ -71,12 +103,11 @@ export const TabListWrapper = styled.div`
 				${ COLORS.theme.accent };
 		}
 	}
-	&[aria-orientation='vertical']::after {
-		z-index: -1;
+	&[aria-orientation='vertical']::before {
 		top: 0;
 		left: 0;
 		width: 100%;
-		width: calc( var( --antialiasing-factor ) * 1px );
+		height: calc( var( --antialiasing-factor ) * 1px );
 		transform: translateY( calc( var( --indicator-top ) * 1px ) )
 			scaleY(
 				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
@@ -87,14 +118,14 @@ export const TabListWrapper = styled.div`
 
 export const Tab = styled( Ariakit.Tab )`
 	& {
+		scroll-margin: 24px;
+		flex-grow: 1;
+		flex-shrink: 0;
 		display: inline-flex;
 		align-items: center;
 		position: relative;
 		border-radius: 0;
-		min-height: ${ space(
-			12
-		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
-		height: auto;
+		height: ${ space( 12 ) };
 		background: transparent;
 		border: none;
 		box-shadow: none;
@@ -104,7 +135,6 @@ export const Tab = styled( Ariakit.Tab )`
 		margin-left: 0;
 		font-weight: 500;
 		text-align: inherit;
-		hyphens: auto;
 		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
@@ -123,7 +153,7 @@ export const Tab = styled( Ariakit.Tab )`
 		}
 
 		// Focus.
-		&::before {
+		&::after {
 			content: '';
 			position: absolute;
 			top: ${ space( 3 ) };
@@ -146,7 +176,7 @@ export const Tab = styled( Ariakit.Tab )`
 			}
 		}
 
-		&:focus-visible::before {
+		&:focus-visible::after {
 			opacity: 1;
 		}
 	}
@@ -156,6 +186,10 @@ export const Tab = styled( Ariakit.Tab )`
 			10
 		) }; // Avoid fixed height to allow for long strings that go in multiple lines.
 	}
+
+	[aria-orientation='horizontal'] & {
+		justify-content: center;
+	}
 `;
 
 export const TabPanel = styled( Ariakit.TabPanel )`
diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx
index 2977d6a6283708..ae8daf60fc237c 100644
--- a/packages/components/src/tabs/tablist.tsx
+++ b/packages/components/src/tabs/tablist.tsx
@@ -8,7 +8,8 @@ import { useStoreState } from '@ariakit/react';
  * WordPress dependencies
  */
 import warning from '@wordpress/warning';
-import { forwardRef, useState } from '@wordpress/element';
+import { forwardRef, useLayoutEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -20,33 +21,58 @@ import type { WordPressComponentProps } from '../context';
 import clsx from 'clsx';
 import { useTrackElementOffsetRect } from '../utils/element-rect';
 import { useOnValueUpdate } from '../utils/hooks/use-on-value-update';
+import { useTrackOverflow } from './use-track-overflow';
+
+const SCROLL_MARGIN = 24;
 
 export const TabList = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< TabListProps, 'div', false >
 >( function TabList( { children, ...otherProps }, ref ) {
-	const context = useTabsContext();
+	const { store } = useTabsContext() ?? {};
+
+	const selectedId = useStoreState( store, 'selectedId' );
+	const activeId = useStoreState( store, 'activeId' );
+	const selectOnMove = useStoreState( store, 'selectOnMove' );
+	const items = useStoreState( store, 'items' );
+	const [ parent, setParent ] = useState< HTMLElement | null >();
+	const refs = useMergeRefs( [ ref, setParent ] );
+	const overflow = useTrackOverflow( parent, {
+		first: items?.at( 0 )?.element,
+		last: items?.at( -1 )?.element,
+	} );
 
-	const tabStoreState = useStoreState( context?.store );
-	const selectedId = tabStoreState?.selectedId;
-	const indicatorPosition = useTrackElementOffsetRect(
-		context?.store.item( selectedId )?.element
+	const selectedTabPosition = useTrackElementOffsetRect(
+		store?.item( selectedId )?.element
 	);
 
 	const [ animationEnabled, setAnimationEnabled ] = useState( false );
-	useOnValueUpdate(
-		selectedId,
-		( { previousValue } ) => previousValue && setAnimationEnabled( true )
-	);
+	useOnValueUpdate( selectedId, ( { previousValue } ) => {
+		if ( previousValue ) {
+			setAnimationEnabled( true );
+		}
+	} );
 
-	if ( ! context || ! tabStoreState ) {
-		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
-		return null;
-	}
+	// Make sure selected tab is scrolled into view.
+	useLayoutEffect( () => {
+		if ( ! parent || ! selectedTabPosition ) {
+			return;
+		}
+
+		const { scrollLeft: parentScroll } = parent;
+		const parentWidth = parent.getBoundingClientRect().width;
+		const { left: childLeft, width: childWidth } = selectedTabPosition;
 
-	const { store } = context;
-	const { activeId, selectOnMove } = tabStoreState;
-	const { setActiveId } = store;
+		const parentRightEdge = parentScroll + parentWidth;
+		const childRightEdge = childLeft + childWidth;
+		const rightOverflow = childRightEdge + SCROLL_MARGIN - parentRightEdge;
+		const leftOverflow = parentScroll - ( childLeft - SCROLL_MARGIN );
+		if ( leftOverflow > 0 ) {
+			parent.scrollLeft = parentScroll - leftOverflow;
+		} else if ( rightOverflow > 0 ) {
+			parent.scrollLeft = parentScroll + rightOverflow;
+		}
+	}, [ parent, selectedTabPosition ] );
 
 	const onBlur = () => {
 		if ( ! selectOnMove ) {
@@ -58,35 +84,43 @@ export const TabList = forwardRef<
 		// that the selected tab will receive keyboard focus when tabbing back into
 		// the tablist.
 		if ( selectedId !== activeId ) {
-			setActiveId( selectedId );
+			store?.setActiveId( selectedId );
 		}
 	};
 
+	if ( ! store ) {
+		warning( '`Tabs.TabList` must be wrapped in a `Tabs` component.' );
+		return null;
+	}
+
 	return (
 		<Ariakit.TabList
-			ref={ ref }
+			ref={ refs }
 			store={ store }
 			render={
 				<TabListWrapper
 					onTransitionEnd={ ( event ) => {
-						if ( event.pseudoElement === '::after' ) {
+						if ( event.pseudoElement === '::before' ) {
 							setAnimationEnabled( false );
 						}
 					} }
 				/>
 			}
 			onBlur={ onBlur }
+			tabIndex={ -1 }
 			{ ...otherProps }
 			style={ {
-				'--indicator-top': indicatorPosition.top,
-				'--indicator-right': indicatorPosition.right,
-				'--indicator-left': indicatorPosition.left,
-				'--indicator-width': indicatorPosition.width,
-				'--indicator-height': indicatorPosition.height,
+				'--indicator-top': selectedTabPosition.top,
+				'--indicator-right': selectedTabPosition.right,
+				'--indicator-left': selectedTabPosition.left,
+				'--indicator-width': selectedTabPosition.width,
+				'--indicator-height': selectedTabPosition.height,
 				...otherProps.style,
 			} }
 			className={ clsx(
-				animationEnabled ? 'is-animation-enabled' : '',
+				overflow.first && 'is-overflowing-first',
+				overflow.last && 'is-overflowing-last',
+				animationEnabled && 'is-animation-enabled',
 				otherProps.className
 			) }
 		>
diff --git a/packages/components/src/tabs/use-track-overflow.ts b/packages/components/src/tabs/use-track-overflow.ts
new file mode 100644
index 00000000000000..5f6504e6875212
--- /dev/null
+++ b/packages/components/src/tabs/use-track-overflow.ts
@@ -0,0 +1,76 @@
+/* eslint-disable jsdoc/require-param */
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { useEvent } from '@wordpress/compose';
+
+/**
+ * Tracks if an element contains overflow and on which end by tracking the
+ * first and last child elements with an `IntersectionObserver` in relation
+ * to the parent element.
+ *
+ * Note that the returned value will only indicate whether the first or last
+ * element is currently "going out of bounds" but not whether it happens on
+ * the X or Y axis.
+ */
+export function useTrackOverflow(
+	parent: HTMLElement | undefined | null,
+	children: {
+		first: HTMLElement | undefined | null;
+		last: HTMLElement | undefined | null;
+	}
+) {
+	const [ first, setFirst ] = useState( false );
+	const [ last, setLast ] = useState( false );
+	const [ observer, setObserver ] = useState< IntersectionObserver >();
+
+	const callback: IntersectionObserverCallback = useEvent( ( entries ) => {
+		for ( const entry of entries ) {
+			if ( entry.target === children.first ) {
+				setFirst( ! entry.isIntersecting );
+			}
+			if ( entry.target === children.last ) {
+				setLast( ! entry.isIntersecting );
+			}
+		}
+	} );
+
+	useEffect( () => {
+		if ( ! parent || ! window.IntersectionObserver ) {
+			return;
+		}
+		const newObserver = new IntersectionObserver( callback, {
+			root: parent,
+			threshold: 0.9,
+		} );
+		setObserver( newObserver );
+
+		return () => newObserver.disconnect();
+	}, [ callback, parent ] );
+
+	useEffect( () => {
+		if ( ! observer ) {
+			return;
+		}
+
+		if ( children.first ) {
+			observer.observe( children.first );
+		}
+		if ( children.last ) {
+			observer.observe( children.last );
+		}
+
+		return () => {
+			if ( children.first ) {
+				observer.unobserve( children.first );
+			}
+			if ( children.last ) {
+				observer.unobserve( children.last );
+			}
+		};
+	}, [ children.first, children.last, observer ] );
+
+	return { first, last };
+}
+/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 86efc5224077f4..020468991225c1 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.toggleGroupControlBackgroundColor };
+		background: ${ CONFIG.controlBackgroundColor };
 	}
 
 	${ isDeselectable && deselectable }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index 6baadd65dc5ff6..c062e35cb2b72b 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -10,6 +10,7 @@ import { useStoreState } from '@ariakit/react';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,6 +66,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		defaultValue,
 		value,
 		setValue: wrappedOnChangeProp,
+		rtl: isRTL(),
 	} );
 
 	const selectedValue = useStoreState( radio, 'value' );
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index df41b623eefb6c..1daa7537335e1c 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
@@ -91,8 +91,8 @@ export function DimensionPanel() {
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			<PanelDescription>
-				Select dimensions or spacing related settings from the
-				menu for additional controls.
+				Select dimensions or spacing related settings from the menu for
+				additional controls.
 			</PanelDescription>
 			<SingleColumnItem
 				hasValue={ () => !! height }
@@ -154,8 +154,8 @@ export function DimensionPanel() {
 Flags that the items in this ToolsPanel will be contained within an inner
 wrapper element allowing the panel to lay them out accordingly.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `dropdownMenuProps`: `{}`
 
@@ -176,7 +176,7 @@ The heading level of the panel's header.
 Text to be displayed within the panel's header and as the `aria-label` for the
 panel's dropdown menu.
 
-- Required: Yes
+-   Required: Yes
 
 ### `panelId`: `string | null`
 
@@ -185,13 +185,13 @@ to restrict panel items. When a `panelId` is set, items can only register
 themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
 exactly.
 
-- Required: No
+-   Required: No
 
 ### `resetAll`: `( filters?: ResetAllFilter[] ) => void`
 
 A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`.
 
-- Required: Yes
+-   Required: Yes
 
 ### `shouldRenderPlaceholderItems`: `boolean`
 
@@ -201,5 +201,5 @@ placeholder content (instead of `null`) when they are toggled off and hidden.
 Note that placeholder items won't apply the `className` that would be
 normally applied to a visible `ToolsPanelItem` via the `className` prop.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 931bf2494e6e34..583a079ab20026 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -5,8 +5,8 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useReducer,
 	useRef,
-	useState,
 } from '@wordpress/element';
 
 /**
@@ -27,14 +27,40 @@ import type {
 
 const DEFAULT_COLUMNS = 2;
 
+type PanelItemsState = {
+	panelItems: ToolsPanelItem[];
+	menuItemOrder: string[];
+	menuItems: ToolsPanelMenuItems;
+};
+
+type PanelItemsAction =
+	| { type: 'REGISTER_PANEL'; item: ToolsPanelItem }
+	| { type: 'UNREGISTER_PANEL'; label: string }
+	| {
+			type: 'UPDATE_VALUE';
+			group: ToolsPanelMenuItemKey;
+			label: string;
+			value: boolean;
+	  }
+	| { type: 'TOGGLE_VALUE'; label: string }
+	| { type: 'RESET_ALL' };
+
+function emptyMenuItems(): ToolsPanelMenuItems {
+	return { default: {}, optional: {} };
+}
+
+function emptyState(): PanelItemsState {
+	return { panelItems: [], menuItemOrder: [], menuItems: emptyMenuItems() };
+}
+
 const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
 	currentMenuItems,
 	menuItemOrder,
 }: ToolsPanelMenuItemsConfig ) => {
-	const newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
-	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+	const newMenuItems: ToolsPanelMenuItems = emptyMenuItems();
+	const menuItems: ToolsPanelMenuItems = emptyMenuItems();
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
 		const group = isShownByDefault ? 'default' : 'optional';
@@ -75,9 +101,149 @@ const generateMenuItems = ( {
 	return menuItems;
 };
 
+function panelItemsReducer(
+	panelItems: ToolsPanelItem[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			const newItems = [ ...panelItems ];
+			// If an item with this label has already been registered, remove it
+			// first. This can happen when an item is moved between the default
+			// and optional groups.
+			const existingIndex = newItems.findIndex(
+				( oldItem ) => oldItem.label === action.item.label
+			);
+			if ( existingIndex !== -1 ) {
+				newItems.splice( existingIndex, 1 );
+			}
+			newItems.push( action.item );
+			return newItems;
+		}
+		case 'UNREGISTER_PANEL': {
+			const index = panelItems.findIndex(
+				( item ) => item.label === action.label
+			);
+			if ( index !== -1 ) {
+				const newItems = [ ...panelItems ];
+				newItems.splice( index, 1 );
+				return newItems;
+			}
+			return panelItems;
+		}
+		default:
+			return panelItems;
+	}
+}
+
+function menuItemOrderReducer(
+	menuItemOrder: string[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			// Track the initial order of item registration. This is used for
+			// maintaining menu item order later.
+			if ( menuItemOrder.includes( action.item.label ) ) {
+				return menuItemOrder;
+			}
+
+			return [ ...menuItemOrder, action.item.label ];
+		}
+		default:
+			return menuItemOrder;
+	}
+}
+
+function menuItemsReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL':
+		case 'UNREGISTER_PANEL':
+			// generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`
+			return generateMenuItems( {
+				currentMenuItems: state.menuItems,
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: false,
+			} );
+		case 'RESET_ALL':
+			return generateMenuItems( {
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: true,
+			} );
+		case 'UPDATE_VALUE': {
+			const oldValue = state.menuItems[ action.group ][ action.label ];
+			if ( action.value === oldValue ) {
+				return state.menuItems;
+			}
+			return {
+				...state.menuItems,
+				[ action.group ]: {
+					...state.menuItems[ action.group ],
+					[ action.label ]: action.value,
+				},
+			};
+		}
+		case 'TOGGLE_VALUE': {
+			const currentItem = state.panelItems.find(
+				( item ) => item.label === action.label
+			);
+
+			if ( ! currentItem ) {
+				return state.menuItems;
+			}
+
+			const menuGroup = currentItem.isShownByDefault
+				? 'default'
+				: 'optional';
+
+			const newMenuItems = {
+				...state.menuItems,
+				[ menuGroup ]: {
+					...state.menuItems[ menuGroup ],
+					[ action.label ]:
+						! state.menuItems[ menuGroup ][ action.label ],
+				},
+			};
+			return newMenuItems;
+		}
+
+		default:
+			return state.menuItems;
+	}
+}
+
+function panelReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	const panelItems = panelItemsReducer( state.panelItems, action );
+	const menuItemOrder = menuItemOrderReducer( state.menuItemOrder, action );
+	// `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`
+	// and the updated `panelItems` and `menuItemOrder`.
+	const menuItems = menuItemsReducer(
+		{ panelItems, menuItemOrder, menuItems: state.menuItems },
+		action
+	);
+
+	return { panelItems, menuItemOrder, menuItems };
+}
+
+function resetAllFiltersReducer(
+	filters: ResetAllFilter[],
+	action: { type: 'REGISTER' | 'UNREGISTER'; filter: ResetAllFilter }
+) {
+	switch ( action.type ) {
+		case 'REGISTER':
+			return [ ...filters, action.filter ];
+		case 'UNREGISTER':
+			return filters.filter( ( f ) => f !== action.filter );
+		default:
+			return filters;
+	}
+}
+
 const isMenuItemTypeEmpty = (
-	obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
-) => obj && Object.keys( obj ).length === 0;
+	obj: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => Object.keys( obj ).length === 0;
 
 export function useToolsPanel(
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >
@@ -108,103 +274,43 @@ export function useToolsPanel(
 	}, [ wasResetting ] );
 
 	// Allow panel items to register themselves.
-	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
-	const [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
-	const [ resetAllFilters, setResetAllFilters ] = useState<
-		ResetAllFilter[]
-	>( [] );
-
-	const registerPanelItem = useCallback(
-		( item: ToolsPanelItem ) => {
-			// Add item to panel items.
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				// If an item with this label has already been registered, remove it
-				// first. This can happen when an item is moved between the default
-				// and optional groups.
-				const existingIndex = newItems.findIndex(
-					( oldItem ) => oldItem.label === item.label
-				);
-				if ( existingIndex !== -1 ) {
-					newItems.splice( existingIndex, 1 );
-				}
-				return [ ...newItems, item ];
-			} );
-
-			// Track the initial order of item registration. This is used for
-			// maintaining menu item order later.
-			setMenuItemOrder( ( items ) => {
-				if ( items.includes( item.label ) ) {
-					return items;
-				}
+	const [ { panelItems, menuItems }, panelDispatch ] = useReducer(
+		panelReducer,
+		undefined,
+		emptyState
+	);
 
-				return [ ...items, item.label ];
-			} );
-		},
-		[ setPanelItems, setMenuItemOrder ]
+	const [ resetAllFilters, dispatchResetAllFilters ] = useReducer(
+		resetAllFiltersReducer,
+		[]
 	);
 
+	const registerPanelItem = useCallback( ( item: ToolsPanelItem ) => {
+		// Add item to panel items.
+		panelDispatch( { type: 'REGISTER_PANEL', item } );
+	}, [] );
+
 	// Panels need to deregister on unmount to avoid orphans in menu state.
 	// This is an issue when panel items are being injected via SlotFills.
-	const deregisterPanelItem = useCallback(
-		( label: string ) => {
-			// When switching selections between components injecting matching
-			// controls, e.g. both panels have a "padding" control, the
-			// deregistration of the first panel doesn't occur until after the
-			// registration of the next.
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				const index = newItems.findIndex(
-					( item ) => item.label === label
-				);
-				if ( index !== -1 ) {
-					newItems.splice( index, 1 );
-				}
-				return newItems;
-			} );
-		},
-		[ setPanelItems ]
-	);
-
-	const registerResetAllFilter = useCallback(
-		( newFilter: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return [ ...filters, newFilter ];
-			} );
-		},
-		[ setResetAllFilters ]
-	);
+	const deregisterPanelItem = useCallback( ( label: string ) => {
+		// When switching selections between components injecting matching
+		// controls, e.g. both panels have a "padding" control, the
+		// deregistration of the first panel doesn't occur until after the
+		// registration of the next.
+		panelDispatch( { type: 'UNREGISTER_PANEL', label } );
+	}, [] );
+
+	const registerResetAllFilter = useCallback( ( filter: ResetAllFilter ) => {
+		dispatchResetAllFilters( { type: 'REGISTER', filter } );
+	}, [] );
 
 	const deregisterResetAllFilter = useCallback(
-		( filterToRemove: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return filters.filter(
-					( filter ) => filter !== filterToRemove
-				);
-			} );
+		( filter: ResetAllFilter ) => {
+			dispatchResetAllFilters( { type: 'UNREGISTER', filter } );
 		},
-		[ setResetAllFilters ]
+		[]
 	);
 
-	// Manage and share display state of menu items representing child controls.
-	const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
-		default: {},
-		optional: {},
-	} );
-
-	// Setup menuItems state as panel items register themselves.
-	useEffect( () => {
-		setMenuItems( ( prevState ) => {
-			const items = generateMenuItems( {
-				panelItems,
-				shouldReset: false,
-				currentMenuItems: prevState,
-				menuItemOrder,
-			} );
-			return items;
-		} );
-	}, [ panelItems, setMenuItems, menuItemOrder ] );
-
 	// Updates the status of the panel’s menu items. For default items the
 	// value represents whether it differs from the default and for optional
 	// items whether the item is shown.
@@ -214,38 +320,24 @@ export function useToolsPanel(
 			label: string,
 			group: ToolsPanelMenuItemKey = 'default'
 		) => {
-			setMenuItems( ( items ) => {
-				const newState = {
-					...items,
-					[ group ]: {
-						...items[ group ],
-						[ label ]: value,
-					},
-				};
-				return newState;
-			} );
+			panelDispatch( { type: 'UPDATE_VALUE', group, label, value } );
 		},
-		[ setMenuItems ]
+		[]
 	);
 
 	// Whether all optional menu items are hidden or not must be tracked
 	// in order to later determine if the panel display is empty and handle
 	// conditional display of a plus icon to indicate the presence of further
 	// menu items.
-	const [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =
-		useState( false );
-
-	useEffect( () => {
-		if (
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			! isMenuItemTypeEmpty( menuItems?.optional )
-		) {
-			const allControlsHidden = ! Object.entries(
-				menuItems.optional
-			).some( ( [ , isSelected ] ) => isSelected );
-			setAreAllOptionalControlsHidden( allControlsHidden );
-		}
-	}, [ menuItems, setAreAllOptionalControlsHidden ] );
+	const areAllOptionalControlsHidden = useMemo( () => {
+		return (
+			isMenuItemTypeEmpty( menuItems.default ) &&
+			! isMenuItemTypeEmpty( menuItems.optional ) &&
+			Object.values( menuItems.optional ).every(
+				( isSelected ) => ! isSelected
+			)
+		);
+	}, [ menuItems ] );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
@@ -253,9 +345,7 @@ export function useToolsPanel(
 			hasInnerWrapper &&
 			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			areAllOptionalControlsHidden &&
-			styles.ToolsPanelHiddenInnerWrapper;
+			areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
 
 		return cx(
 			styles.ToolsPanel( DEFAULT_COLUMNS ),
@@ -263,42 +353,13 @@ export function useToolsPanel(
 			emptyStyle,
 			className
 		);
-	}, [
-		areAllOptionalControlsHidden,
-		className,
-		cx,
-		hasInnerWrapper,
-		menuItems,
-	] );
+	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
-	const toggleItem = useCallback(
-		( label: string ) => {
-			const currentItem = panelItems.find(
-				( item ) => item.label === label
-			);
-
-			if ( ! currentItem ) {
-				return;
-			}
-
-			const menuGroup = currentItem.isShownByDefault
-				? 'default'
-				: 'optional';
-
-			const newMenuItems = {
-				...menuItems,
-				[ menuGroup ]: {
-					...menuItems[ menuGroup ],
-					[ label ]: ! menuItems[ menuGroup ][ label ],
-				},
-			};
-
-			setMenuItems( newMenuItems );
-		},
-		[ menuItems, panelItems, setMenuItems ]
-	);
+	const toggleItem = useCallback( ( label: string ) => {
+		panelDispatch( { type: 'TOGGLE_VALUE', label } );
+	}, [] );
 
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = useCallback( () => {
@@ -308,20 +369,15 @@ export function useToolsPanel(
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = generateMenuItems( {
-			panelItems,
-			menuItemOrder,
-			shouldReset: true,
-		} );
-		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
+		panelDispatch( { type: 'RESET_ALL' } );
+	}, [ resetAllFilters, resetAll ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
 	const getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {
 		const optionalItems = menuItems.optional || {};
 		const firstItem = items.find(
-			( item ) => item.isShownByDefault || !! optionalItems[ item.label ]
+			( item ) => item.isShownByDefault || optionalItems[ item.label ]
 		);
 
 		return firstItem?.label;
@@ -332,6 +388,8 @@ export function useToolsPanel(
 		[ ...panelItems ].reverse()
 	);
 
+	const hasMenuItems = panelItems.length > 0;
+
 	const panelContext = useMemo(
 		() => ( {
 			areAllOptionalControlsHidden,
@@ -339,7 +397,7 @@ export function useToolsPanel(
 			deregisterResetAllFilter,
 			firstDisplayedItem,
 			flagItemCustomization,
-			hasMenuItems: !! panelItems.length,
+			hasMenuItems,
 			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
@@ -359,7 +417,7 @@ export function useToolsPanel(
 			lastDisplayedItem,
 			menuItems,
 			panelId,
-			panelItems,
+			hasMenuItems,
 			registerResetAllFilter,
 			registerPanelItem,
 			shouldRenderPlaceholderItems,
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index eaac8b3ad1c7f6..e84946e4a9176c 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -8,6 +8,7 @@
 	font-size: 12px;
 	padding: $grid-unit-05 $grid-unit-10;
 	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 4d7ed859e89edd..1bc3945f9b3b16 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -7,18 +7,13 @@ import { COLORS } from './colors-values';
 const CONTROL_HEIGHT = '36px';
 
 const CONTROL_PROPS = {
-	controlSurfaceColor: COLORS.white,
-	controlTextActiveColor: COLORS.theme.accent,
-
 	// These values should be shared with TextControl.
 	controlPaddingX: 12,
 	controlPaddingXSmall: 8,
 	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
 
 	controlBackgroundColor: COLORS.white,
-	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
-	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
 	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
@@ -26,18 +21,9 @@ const CONTROL_PROPS = {
 	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
 
-const TOGGLE_GROUP_CONTROL_PROPS = {
-	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
-	toggleGroupControlBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBackgroundColor:
-		CONTROL_PROPS.controlSurfaceColor,
-	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
-};
-
 // Using Object.assign to avoid creating circular references when emitting
 // TypeScript type declarations.
-export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
+export default Object.assign( {}, CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -72,10 +58,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
-	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
-	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
-	elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',
diff --git a/packages/components/src/utils/element-rect.ts b/packages/components/src/utils/element-rect.ts
index 550ec35b0bc932..4c60e4ba51c48a 100644
--- a/packages/components/src/utils/element-rect.ts
+++ b/packages/components/src/utils/element-rect.ts
@@ -3,11 +3,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { useEvent } from './hooks/use-event';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
 
 /**
  * The position and dimensions of an element, relative to its offset parent.
@@ -79,9 +75,11 @@ export function getElementOffsetRect(
 	if ( rect.width === 0 || rect.height === 0 ) {
 		return;
 	}
+	const offsetParent = element.offsetParent;
 	const offsetParentRect =
-		element.offsetParent?.getBoundingClientRect() ??
-		NULL_ELEMENT_OFFSET_RECT;
+		offsetParent?.getBoundingClientRect() ?? NULL_ELEMENT_OFFSET_RECT;
+	const offsetParentScrollX = offsetParent?.scrollLeft ?? 0;
+	const offsetParentScrollY = offsetParent?.scrollTop ?? 0;
 
 	// Computed widths and heights have subpixel precision, and are not affected
 	// by distortions.
@@ -97,10 +95,18 @@ export function getElementOffsetRect(
 		// To obtain the adjusted values for the position:
 		// 1. Compute the element's position relative to the offset parent.
 		// 2. Correct for the scale factor.
-		top: ( rect.top - offsetParentRect?.top ) * scaleY,
-		right: ( offsetParentRect?.right - rect.right ) * scaleX,
-		bottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,
-		left: ( rect.left - offsetParentRect?.left ) * scaleX,
+		// 3. Adjust for the scroll position of the offset parent.
+		top:
+			( rect.top - offsetParentRect?.top ) * scaleY + offsetParentScrollY,
+		right:
+			( offsetParentRect?.right - rect.right ) * scaleX -
+			offsetParentScrollX,
+		bottom:
+			( offsetParentRect?.bottom - rect.bottom ) * scaleY -
+			offsetParentScrollY,
+		left:
+			( rect.left - offsetParentRect?.left ) * scaleX +
+			offsetParentScrollX,
 		// Computed dimensions don't need any adjustments.
 		width: computedWidth,
 		height: computedHeight,
diff --git a/packages/components/src/utils/hooks/use-event.ts b/packages/components/src/utils/hooks/use-event.ts
deleted file mode 100644
index eefac9478a8b4f..00000000000000
--- a/packages/components/src/utils/hooks/use-event.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable jsdoc/require-param */
-/**
- * WordPress dependencies
- */
-import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
-
-/**
- * Any function.
- */
-export type AnyFunction = ( ...args: any ) => any;
-
-/**
- * Creates a stable callback function that has access to the latest state and
- * can be used within event handlers and effect callbacks. Throws when used in
- * the render phase.
- *
- * @example
- *
- * ```tsx
- * function Component(props) {
- *   const onClick = useEvent(props.onClick);
- *   React.useEffect(() => {}, [onClick]);
- * }
- * ```
- */
-export function useEvent< T extends AnyFunction >( callback?: T ) {
-	const ref = useRef< AnyFunction | undefined >( () => {
-		throw new Error( 'Cannot call an event handler while rendering.' );
-	} );
-	useInsertionEffect( () => {
-		ref.current = callback;
-	} );
-	return useCallback< AnyFunction >(
-		( ...args ) => ref.current?.( ...args ),
-		[]
-	) as T;
-}
-/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-on-value-update.ts b/packages/components/src/utils/hooks/use-on-value-update.ts
index 5726f3977daf04..05c7173d092fac 100644
--- a/packages/components/src/utils/hooks/use-on-value-update.ts
+++ b/packages/components/src/utils/hooks/use-on-value-update.ts
@@ -2,11 +2,8 @@
 /**
  * WordPress dependencies
  */
+import { useEvent } from '@wordpress/compose';
 import { useRef, useEffect } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './use-event';
 
 /**
  * Context object for the `onUpdate` callback of `useOnValueUpdate`.
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index cc0d7ef333f0d6..28269dca692a4f 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `useResizeObserver`: export legacy API at top-level for React Native ([#65588](https://github.com/WordPress/gutenberg/pull/65588)).
+
+## 7.8.0 (2024-09-19)
+
 ### New Features
 
 -   `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 4b68841d1777e6..f52ac9956a75c1 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
new file mode 100644
index 00000000000000..79eb3e569e332a
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -0,0 +1 @@
+export { default } from './legacy/index.native';
diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts
index 2a76b2aa6ab590..1bd0f074cc49f2 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.ts
+++ b/packages/compose/src/hooks/use-resize-observer/index.ts
@@ -1,53 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useEvent from '../use-event';
-import type { ObservedSize } from './_legacy';
-import _useLegacyResizeObserver from './_legacy';
+import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
+import type { ObservedSize } from './legacy';
+import _useLegacyResizeObserver from './legacy';
 /**
  * External dependencies
  */
 import type { ReactElement } from 'react';
 
-// This is the current implementation of `useResizeObserver`.
-//
-// The legacy implementation is still supported for backwards compatibility.
-// This is achieved by overloading the exported function with both signatures,
-// and detecting which API is being used at runtime.
-function _useResizeObserver< T extends HTMLElement >(
-	callback: ResizeObserverCallback,
-	resizeObserverOptions: ResizeObserverOptions = {}
-): ( element?: T | null ) => void {
-	const callbackEvent = useEvent( callback );
-
-	const observedElementRef = useRef< T | null >();
-	const resizeObserverRef = useRef< ResizeObserver >();
-	return useEvent( ( element?: T | null ) => {
-		if ( element === observedElementRef.current ) {
-			return;
-		}
-		observedElementRef.current = element;
-
-		// Set up `ResizeObserver`.
-		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
-		const { current: resizeObserver } = resizeObserverRef;
-
-		// Unobserve previous element.
-		if ( observedElementRef.current ) {
-			resizeObserver.unobserve( observedElementRef.current );
-		}
-
-		// Observe new element.
-		if ( element ) {
-			resizeObserver.observe( element, resizeObserverOptions );
-		}
-	} );
-}
-
 /**
  * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
  * for an HTML or SVG element.
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
similarity index 98%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
index b44bd841964164..fe765810982226 100644
--- a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
@@ -10,7 +10,7 @@ import { useCallback, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useResizeObserver from '../index';
+import { useResizeObserver } from '../use-resize-observer';
 
 export type ObservedSize = {
 	width: number | null;
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
new file mode 100644
index 00000000000000..4c1031b9839dc3
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import useEvent from '../use-event';
+
+// This is the current implementation of `useResizeObserver`.
+//
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+export function useResizeObserver< T extends HTMLElement >(
+	callback: ResizeObserverCallback,
+	resizeObserverOptions: ResizeObserverOptions = {}
+): ( element?: T | null ) => void {
+	const callbackEvent = useEvent( callback );
+
+	const observedElementRef = useRef< T | null >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	return useEvent( ( element?: T | null ) => {
+		if ( element === observedElementRef.current ) {
+			return;
+		}
+
+		// Set up `ResizeObserver`.
+		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Unobserve previous element.
+		if ( observedElementRef.current ) {
+			resizeObserver.unobserve( observedElementRef.current );
+		}
+
+		// Observe new element.
+		observedElementRef.current = element;
+		if ( element ) {
+			resizeObserver.observe( element, resizeObserverOptions );
+		}
+	} );
+}
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index 02871d4f31e135..2d8d93373f4c5e 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index bae1e4c211cf0b..a2d3c76ebe5d9c 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,6 +37,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/router": "file:../router",
 		"@wordpress/url": "file:../url"
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index 0ffa7ba7eb6285..c0d8bb084b46ad 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -1,9 +1,92 @@
 /**
  * WordPress dependencies
  */
-import { useCommand } from '@wordpress/commands';
+import { useCommand, useCommandLoader } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
+import { getPath } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useAddNewPageCommand() {
+	const isSiteEditor = getPath( window.location.href )?.includes(
+		'site-editor.php'
+	);
+	const history = useHistory();
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme()?.is_block_theme;
+	}, [] );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const createPageEntity = useCallback(
+		async ( { close } ) => {
+			try {
+				const page = await saveEntityRecord(
+					'postType',
+					'page',
+					{
+						status: 'draft',
+					},
+					{
+						throwOnError: true,
+					}
+				);
+				if ( page?.id ) {
+					history.push( {
+						postId: page.id,
+						postType: 'page',
+						canvas: 'edit',
+					} );
+				}
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while creating the item.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				close();
+			}
+		},
+		[ createErrorNotice, history, saveEntityRecord ]
+	);
+
+	const commands = useMemo( () => {
+		const addNewPage =
+			isSiteEditor && isBlockBasedTheme
+				? createPageEntity
+				: () =>
+						( document.location.href =
+							'post-new.php?post_type=page' );
+		return [
+			{
+				name: 'core/add-new-page',
+				label: __( 'Add new page' ),
+				icon: plus,
+				callback: addNewPage,
+			},
+		];
+	}, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
 
 export function useAdminNavigationCommands() {
 	useCommand( {
@@ -14,12 +97,9 @@ export function useAdminNavigationCommands() {
 			document.location.href = 'post-new.php';
 		},
 	} );
-	useCommand( {
+
+	useCommandLoader( {
 		name: 'core/add-new-page',
-		label: __( 'Add new page' ),
-		icon: plus,
-		callback: () => {
-			document.location.href = 'post-new.php?post_type=page';
-		},
+		hook: useAddNewPageCommand,
 	} );
 }
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 6286a55291a54f..fcedd5d1100661 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index ddb2d2ef091778..b0eadbcea26039 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/src/index.js b/packages/core-data/src/index.js
index ad6adec0203c59..99507a914f377b 100644
--- a/packages/core-data/src/index.js
+++ b/packages/core-data/src/index.js
@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as resolvers from './resolvers';
 import createLocksActions from './locks/actions';
 import {
@@ -79,6 +80,7 @@ const storeConfig = () => ( {
  */
 export const store = createReduxStore( STORE_NAME, storeConfig() );
 unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );
 register( store ); // Register store after unlocking private selectors to allow resolvers to use them.
 
 export { default as EntityProvider } from './entity-provider';
diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js
new file mode 100644
index 00000000000000..df76d2693e54f3
--- /dev/null
+++ b/packages/core-data/src/private-actions.js
@@ -0,0 +1,16 @@
+/**
+ * Returns an action object used in signalling that the registered post meta
+ * fields for a post type have been received.
+ *
+ * @param {string} postType           Post type slug.
+ * @param {Object} registeredPostMeta Registered post meta.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveRegisteredPostMeta( postType, registeredPostMeta ) {
+	return {
+		type: 'RECEIVE_REGISTERED_POST_META',
+		postType,
+		registeredPostMeta,
+	};
+}
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
index 841f4ee2ef460d..b2f6fa7def9858 100644
--- a/packages/core-data/src/private-selectors.ts
+++ b/packages/core-data/src/private-selectors.ts
@@ -93,3 +93,15 @@ export function getEntityRecordPermissions(
 ) {
 	return getEntityRecordsPermissions( state, kind, name, id )[ 0 ];
 }
+
+/**
+ * Returns the registered post meta fields for a given post type.
+ *
+ * @param state    Data state.
+ * @param postType Post type.
+ *
+ * @return Registered post meta fields.
+ */
+export function getRegisteredPostMeta( state: State, postType: string ) {
+	return state.registeredPostMeta?.[ postType ] ?? {};
+}
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 97a8cc59041534..9748355fc5caf6 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -628,6 +628,25 @@ export function defaultTemplates( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning an object of registered post meta.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function registeredPostMeta( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_REGISTERED_POST_META':
+			return {
+				...state,
+				[ action.postType ]: action.registeredPostMeta,
+			};
+	}
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -649,4 +668,5 @@ export default combineReducers( {
 	userPatternCategories,
 	navigationFallbackId,
 	defaultTemplates,
+	registeredPostMeta,
 } );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 9229673903623a..91a73a0b3511c2 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -645,7 +645,7 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		const themeGlobalStyles = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeBaseGlobalStyles(
 			currentTheme.stylesheet,
@@ -658,7 +658,7 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		const variations = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeGlobalStyleVariations(
 			currentTheme.stylesheet,
@@ -984,3 +984,34 @@ export const getRevision =
 			dispatch.receiveRevisions( kind, name, recordKey, record, query );
 		}
 	};
+
+/**
+ * Requests a specific post type options from the REST API.
+ *
+ * @param {string} postType Post type slug.
+ */
+export const getRegisteredPostMeta =
+	( postType ) =>
+	async ( { dispatch, resolveSelect } ) => {
+		let options;
+		try {
+			const {
+				rest_namespace: restNamespace = 'wp/v2',
+				rest_base: restBase,
+			} = ( await resolveSelect.getPostType( postType ) ) || {};
+			options = await apiFetch( {
+				path: `${ restNamespace }/${ restBase }/?context=edit`,
+				method: 'OPTIONS',
+			} );
+		} catch ( error ) {
+			// Do nothing if the request comes back with an API error.
+			return;
+		}
+
+		if ( options ) {
+			dispatch.receiveRegisteredPostMeta(
+				postType,
+				options?.schema?.properties?.meta?.properties
+			);
+		}
+	};
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index aeec14782ce4fb..9acadd5c0c0e70 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -47,6 +47,7 @@ export interface State {
 	navigationFallbackId: EntityRecordKey;
 	userPatternCategories: Array< UserPatternCategory >;
 	defaultTemplates: Record< string, string >;
+	registeredPostMeta: Record< string, Object >;
 }
 
 type EntityRecordKey = string | number;
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
index 6b0b7bd5ef77a8..4dc0d8a51663e8 100644
--- a/packages/core-data/src/test/entity-provider.js
+++ b/packages/core-data/src/test/entity-provider.js
@@ -104,7 +104,7 @@ describe( 'useEntityBlockEditor', () => {
 					source: 'html',
 					selector: 'p',
 					default: '',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 			},
 			title: 'block title',
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index c044dfff15e3ac..24dcfd52b7b586 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
-## Unreleased
+## 2.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Added TypeScript variant of the template ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
 
 ## 2.7.0 (2024-09-05)
 
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
index 4417c647495c4c..b50adb49265245 100644
--- a/packages/create-block-interactive-template/README.md
+++ b/packages/create-block-interactive-template/README.md
@@ -1,6 +1,6 @@
 # Create Block Interactive Template
 
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks.
 
 ## Usage
 
diff --git a/packages/create-block-interactive-template/block-templates/README.md.mustache b/packages/create-block-interactive-template/block-templates/README.md.mustache
index 3e64ce8f629a3c..4a13743750f748 100644
--- a/packages/create-block-interactive-template/block-templates/README.md.mustache
+++ b/packages/create-block-interactive-template/block-templates/README.md.mustache
@@ -3,6 +3,4 @@
 > **Note**
 > Check the [Interactivity API Reference docs in the Block Editor handbook](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) to learn more about the Interactivity API.
 
-{{#isBasicVariant}}
 This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
-{{/isBasicVariant}}
\ No newline at end of file
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index 3a41a2981cd8cf..4f84b30dbcdbdd 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -1,4 +1,3 @@
-{{#isBasicVariant}}
 <?php
 /**
  * PHP file to use when rendering the block type on the server to show on the front end.
@@ -11,8 +10,19 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-// Generate unique id for aria-controls.
+// Generates a unique id for aria-controls.
 $unique_id = wp_unique_id( 'p-' );
+
+// Adds the global state.
+wp_interactivity_state(
+	'{{namespace}}',
+	array(
+		'isDark'    => false,
+		'darkText'  => esc_html__( 'Switch to Light', '{{textdomain}}' ),
+		'lightText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+		'themeText'	=> esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+	)
+);
 ?>
 
 <div
@@ -20,9 +30,15 @@ $unique_id = wp_unique_id( 'p-' );
 	data-wp-interactive="{{namespace}}"
 	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
 	data-wp-watch="callbacks.logIsOpen"
+	data-wp-class--dark-theme="state.isDark"
 >
 	<button
-		data-wp-on--click="actions.toggle"
+		data-wp-on--click="actions.toggleTheme"
+		data-wp-text="state.themeText"
+	></button>
+
+	<button
+		data-wp-on--click="actions.toggleOpen"
 		data-wp-bind--aria-expanded="context.isOpen"
 		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
 	>
@@ -38,4 +54,3 @@ $unique_id = wp_unique_id( 'p-' );
 		?>
 	</p>
 </div>
-{{/isBasicVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/style.scss.mustache b/packages/create-block-interactive-template/block-templates/style.scss.mustache
index 1c73fa1c38ff94..c8aa9f232136e2 100644
--- a/packages/create-block-interactive-template/block-templates/style.scss.mustache
+++ b/packages/create-block-interactive-template/block-templates/style.scss.mustache
@@ -9,4 +9,19 @@
 	font-size: 1em;
 	background: #ffff001a;
 	padding: 1em;
+
+	&.dark-theme {
+		background: #333;
+		color: #fff;
+
+		button {
+			background: #555;
+			color: #fff;
+			border: 1px solid #777;
+		}
+
+		p {
+			color: #ddd;
+		}
+	}
 }
diff --git a/packages/create-block-interactive-template/block-templates/view.js.mustache b/packages/create-block-interactive-template/block-templates/view.js.mustache
index b4bae3939461dd..3fcf1ba365d265 100644
--- a/packages/create-block-interactive-template/block-templates/view.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -1,15 +1,23 @@
-{{#isBasicVariant}}
+{{#isDefaultVariant}}
 /**
  * WordPress dependencies
  */
-import { store, getContext } from "@wordpress/interactivity";
+import { store, getContext } from '@wordpress/interactivity';
 
-store( '{{namespace}}', {
+const { state } = store( '{{namespace}}', {
+	state: {
+		get themeText() {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
 	actions: {
-		toggle: () => {
+		toggleOpen() {
 			const context = getContext();
 			context.isOpen = ! context.isOpen;
 		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
 	},
 	callbacks: {
 		logIsOpen: () => {
@@ -19,5 +27,4 @@ store( '{{namespace}}', {
 		},
 	},
 } );
-
-{{/isBasicVariant}}
+{{/isDefaultVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/view.ts.mustache b/packages/create-block-interactive-template/block-templates/view.ts.mustache
new file mode 100644
index 00000000000000..11670442d73704
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/view.ts.mustache
@@ -0,0 +1,46 @@
+{{#isTypescriptVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+type ServerState = {
+	state: {
+		isDark: boolean;
+		darkText: string;
+		lightText: string;
+	};
+};
+
+type Context = {
+	isOpen: boolean;
+};
+
+const storeDef = {
+	state: {
+		get themeText(): string {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
+	actions: {
+		toggleOpen() {
+			const context = getContext< Context >();
+			context.isOpen = ! context.isOpen;
+		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext< Context >();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+};
+
+type Store = ServerState & typeof storeDef;
+
+const { state } = store< Store >( '{{namespace}}', storeDef );
+{{/isTypescriptVariant}}
diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js
index bb203b7023e281..94f615df2747f2 100644
--- a/packages/create-block-interactive-template/index.js
+++ b/packages/create-block-interactive-template/index.js
@@ -7,7 +7,7 @@ module.exports = {
 	defaultValues: {
 		slug: 'example-interactive',
 		title: 'Example Interactive',
-		description: 'An interactive block with the Interactivity API',
+		description: 'An interactive block with the Interactivity API.',
 		dashicon: 'media-interactive',
 		npmDependencies: [ '@wordpress/interactivity' ],
 		customPackageJSON: { files: [ '[^.]*' ] },
@@ -24,7 +24,14 @@ module.exports = {
 		},
 	},
 	variants: {
-		basic: {},
+		default: {},
+		typescript: {
+			slug: 'example-interactive-typescript',
+			title: 'Example Interactive TypeScript',
+			description:
+				'An interactive block with the Interactivity API using TypeScript.',
+			viewScriptModule: 'file:./view.ts',
+		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 667d3998ba820d..ad30a4b7e01955 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 0fe0f748b8804d..e93bc0270ba953 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ### Enhancements
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index 64a8a90bc167c0..67b0c9554ed988 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 99e7b1fd37a33a..d3a8c1c75dd3fb 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.51.0 (2024-09-19)
+
 ## 4.50.0 (2024-09-05)
 
 ### Enhancements
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 2103a85c5894f2..e1522c887deef8 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.50.0",
+	"version": "4.51.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 4e0d5a37553577..061b656c892c79 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index a8b50cf9cb318c..05edab039844b5 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index e6af7fdcb6e240..3d16450a7825b4 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index e97e59b74700cd..5d4d06d3c13cd8 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 4ba90611c2a787..f9ebf9eb17a68c 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/data/package.json b/packages/data/package.json
index 84ad7a7973bc49..11396fe33e0876 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 1e323714c4d5f7..6ce337d726e083 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.4.0 (2024-09-19)
+
 ## 4.3.0 (2024-09-05)
 
 ## 4.2.0 (2024-08-21)
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 3ce895680a15c5..95b8fc898555c3 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -2,6 +2,10 @@
 
 DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
 
+DataViews is data agnostic, it can work with data coming from a static (JSON file) or dynamic source (HTTP Request) — it just requires the data to be an array of objects that have an unique identifier. Consumers are responsible to query the data source appropiately based on the DataViews props:
+
+![DataViews flow](https://developer.wordpress.org/files/2024/09/368600071-20aa078f-7c3d-406d-8dd0-8b764addd22a.png "DataViews flow")
+
 ## Installation
 
 Install the module
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index e327a217435c52..6265d88a4ad82f 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.3.0",
+	"version": "4.4.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",
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 48fdf6906b0774..02e81b2b0913d8 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,6 +8,7 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Dropdown,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -27,6 +28,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useMemo } from '@wordpress/element';
 import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -55,6 +57,8 @@ interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
 function ViewTypeMenu( {
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
@@ -510,7 +514,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigContent( {
+function DataviewsViewConfigDropdown( {
 	density,
 	setDensity,
 }: {
@@ -518,25 +522,52 @@ function DataviewsViewConfigContent( {
 	setDensity: React.Dispatch< React.SetStateAction< number > >;
 } ) {
 	const { view } = useContext( DataViewsContext );
+	const popoverId = useInstanceId(
+		_DataViewsViewConfig,
+		'dataviews-view-config-dropdown'
+	);
+
 	return (
-		<VStack className="dataviews-view-config" spacing={ 6 }>
-			<SettingsSection title={ __( 'Appearance' ) }>
-				<HStack expanded className="is-divided-in-two">
-					<SortFieldControl />
-					<SortDirectionControl />
-				</HStack>
-				{ view.type === LAYOUT_GRID && (
-					<DensityPicker
-						density={ density }
-						setDensity={ setDensity }
+		<Dropdown
+			popoverProps={ {
+				...DATAVIEWS_CONFIG_POPOVER_PROPS,
+				id: popoverId,
+			} }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<Button
+						size="compact"
+						icon={ cog }
+						label={ _x( 'View options', 'View is used as a noun' ) }
+						onClick={ onToggle }
+						aria-expanded={ isOpen ? 'true' : 'false' }
+						aria-controls={ popoverId }
 					/>
-				) }
-				<ItemsPerPageControl />
-			</SettingsSection>
-			<SettingsSection title={ __( 'Properties' ) }>
-				<FieldControl />
-			</SettingsSection>
-		</VStack>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<VStack className="dataviews-view-config" spacing={ 6 }>
+						<SettingsSection title={ __( 'Appearance' ) }>
+							<HStack expanded className="is-divided-in-two">
+								<SortFieldControl />
+								<SortDirectionControl />
+							</HStack>
+							{ view.type === LAYOUT_GRID && (
+								<DensityPicker
+									density={ density }
+									setDensity={ setDensity }
+								/>
+							) }
+							<ItemsPerPageControl />
+						</SettingsSection>
+						<SettingsSection title={ __( 'Properties' ) }>
+							<FieldControl />
+						</SettingsSection>
+					</VStack>
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
 
@@ -552,28 +583,9 @@ function _DataViewsViewConfig( {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<Dropdown
-				popoverProps={ { placement: 'bottom-end', offset: 9 } }
-				contentClassName="dataviews-view-config"
-				renderToggle={ ( { onToggle } ) => {
-					return (
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-							onClick={ onToggle }
-						/>
-					);
-				} }
-				renderContent={ () => (
-					<DataviewsViewConfigContent
-						density={ density }
-						setDensity={ setDensity }
-					/>
-				) }
+			<DataviewsViewConfigDropdown
+				density={ density }
+				setDensity={ setDensity }
 			/>
 		</>
 	);
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index c7d07fe7866bcf..7fff110337ee3a 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,12 +1,9 @@
 .dataviews-view-config {
-	.components-popover__content {
-		width: 320px;
-		/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
-		container-type: inline-size;
-		padding: $grid-unit-20;
-		font-size: $default-font-size;
-		line-height: $default-line-height;
-	}
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 8909c7cf1c7cfd..aa8fbcfb009c05 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -80,7 +80,6 @@
 		padding: $grid-unit-15 $grid-unit-30;
 	}
 
-	.dataviews-view-grid,
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-left: $grid-unit-30;
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
index 9f118584998bd3..94e107dc20665a 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -44,12 +44,10 @@ function DropdownHeader( {
 				<Spacer />
 				{ onClose && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						className="dataforms-layouts-panel__dropdown-header-action"
 						label={ __( 'Close' ) }
 						icon={ closeSmall }
 						onClick={ onClose }
+						size="small"
 					/>
 				) }
 			</HStack>
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
index e6840bed9d6e0b..ae69c4ff45243a 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/style.scss
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -44,16 +44,3 @@
 .dataforms-layouts-panel__dropdown-header {
 	margin-bottom: $grid-unit-20;
 }
-
-[class].dataforms-layouts-panel__dropdown-header-action {
-	height: $icon-size;
-
-	&.has-icon {
-		min-width: $icon-size;
-		padding: 0;
-	}
-
-	&:not(.has-icon) {
-		text-decoration: underline;
-	}
-}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 5fab362b0b47b6..6286ed94685a04 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -163,3 +163,11 @@
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
 	top: $grid-unit-10;
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index e19aa08ab6fe50..8c28ff83d53ed8 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/date/package.json b/packages/date/package.json
index 488db71cfd693a..ad957a6393e1c8 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 1da5f074301fd6..7c8f74d2906fed 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Detection of magic comments is now done before minification ([#65582](https://github.com/WordPress/gutenberg/pull/65582)).
+
+### Bug Fixes
+
+-   Fix a bug where cycles in dependent modules could enter infinite recursion ([#65291](https://github.com/WordPress/gutenberg/pull/65291)).
+
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
index 0e6f8a5fbc6ccc..cf780d7370dcfc 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -162,6 +162,14 @@ class DependencyExtractionWebpackPlugin {
 		compiler.hooks.thisCompilation.tap(
 			this.constructor.name,
 			( compilation ) => {
+				compilation.hooks.processAssets.tap(
+					{
+						name: this.constructor.name,
+						stage: compiler.webpack.Compilation
+							.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY,
+					},
+					() => this.checkForMagicComments( compilation )
+				);
 				compilation.hooks.processAssets.tap(
 					{
 						name: this.constructor.name,
@@ -174,6 +182,60 @@ class DependencyExtractionWebpackPlugin {
 		);
 	}
 
+	/**
+	 * Check for magic comments before minification, so minification doesn't have to preserve them.
+	 * @param {webpack.Compilation} compilation
+	 */
+	checkForMagicComments( compilation ) {
+		// Accumulate all entrypoint chunks, some of them shared
+		const entrypointChunks = new Set();
+		for ( const entrypoint of compilation.entrypoints.values() ) {
+			for ( const chunk of entrypoint.chunks ) {
+				entrypointChunks.add( chunk );
+			}
+		}
+
+		// Process each entrypoint chunk independently
+		for ( const chunk of entrypointChunks ) {
+			const chunkFiles = Array.from( chunk.files );
+
+			const jsExtensionRegExp = this.useModules ? /\.m?js$/i : /\.js$/i;
+
+			const chunkJSFile = chunkFiles.find( ( f ) =>
+				jsExtensionRegExp.test( f )
+			);
+			if ( ! chunkJSFile ) {
+				// There's no JS file in this chunk, no work for us. Typically a `style.css` from cache group.
+				continue;
+			}
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const processContentsForMagicComments = ( content ) => {
+				const magicComments = [];
+
+				if ( content.includes( '/* wp:polyfill */' ) ) {
+					magicComments.push( 'wp-polyfill' );
+				}
+
+				return magicComments;
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				const wpMagicComments =
+					processContentsForMagicComments( content );
+				compilation.updateAsset( filename, ( v ) => v, {
+					wpMagicComments,
+				} );
+			} );
+		}
+	}
+
 	/** @param {webpack.Compilation} compilation */
 	addAssets( compilation ) {
 		const {
@@ -269,7 +331,7 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
-			// Go through the assets and hash the sources. We can't just use
+			// Prepare to hash the sources. We can't just use
 			// `chunk.contentHash` because that's not updated when
 			// assets are minified. In practice the hash is updated by
 			// `RealContentHashPlugin` after minification, but it only modifies
@@ -278,12 +340,35 @@ class DependencyExtractionWebpackPlugin {
 			const { hashFunction, hashDigest, hashDigestLength } =
 				compilation.outputOptions;
 
-			const contentHash = chunkFiles
-				.sort()
-				.reduce( ( hash, filename ) => {
-					const asset = compilation.getAsset( filename );
-					return hash.update( asset.source.buffer() );
-				}, createHash( hashFunction ) )
+			const hashBuilder = createHash( hashFunction );
+
+			const processContentsForHash = ( content ) => {
+				hashBuilder.update( content );
+			};
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const handleMagicComments = ( info ) => {
+				if ( ! info ) {
+					return;
+				}
+				if ( info.includes( 'wp-polyfill' ) ) {
+					chunkStaticDeps.add( 'wp-polyfill' );
+				}
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to generate hashes, as well as look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				processContentsForHash( content );
+				handleMagicComments( asset.info.wpMagicComments );
+			} );
+
+			// Finalise hash.
+			const contentHash = hashBuilder
 				.digest( hashDigest )
 				.slice( 0, hashDigestLength );
 
@@ -349,6 +434,9 @@ class DependencyExtractionWebpackPlugin {
 		}
 	}
 
+	static #staticDepsCurrent = new WeakSet();
+	static #staticDepsCache = new WeakMap();
+
 	/**
 	 * Can we trace a line of static dependencies from an entry to a module
 	 *
@@ -358,6 +446,20 @@ class DependencyExtractionWebpackPlugin {
 	 * @return {boolean} True if there is a static import path to the root
 	 */
 	static hasStaticDependencyPathToRoot( compilation, block ) {
+		if ( DependencyExtractionWebpackPlugin.#staticDepsCache.has( block ) ) {
+			return DependencyExtractionWebpackPlugin.#staticDepsCache.get(
+				block
+			);
+		}
+
+		if (
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.has( block )
+		) {
+			return false;
+		}
+
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.add( block );
+
 		const incomingConnections = [
 			...compilation.moduleGraph.getIncomingConnections( block ),
 		].filter(
@@ -371,6 +473,13 @@ class DependencyExtractionWebpackPlugin {
 		// If we don't have non-entry, non-library incoming connections,
 		// we've reached a root of
 		if ( ! incomingConnections.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				true
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
 			return true;
 		}
 
@@ -389,16 +498,28 @@ class DependencyExtractionWebpackPlugin {
 
 		// All the dependencies were Async, the module was reached via a dynamic import
 		if ( ! staticDependentModules.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				false
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
 			return false;
 		}
 
 		// Continue to explore any static dependencies
-		return staticDependentModules.some( ( parentStaticDependentModule ) =>
-			DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
-				compilation,
-				parentStaticDependentModule
-			)
+		const result = staticDependentModules.some(
+			( parentStaticDependentModule ) =>
+				DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
+					compilation,
+					parentStaticDependentModule
+				)
 		);
+
+		DependencyExtractionWebpackPlugin.#staticDepsCache.set( block, result );
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete( block );
+		return result;
 	}
 }
 
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index f720a1df826e80..a9368e1eb18259 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
index d3090daa89a476..f0d418851103ba 100644
--- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
@@ -55,6 +55,21 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => 'e1033c1bd62e8cb8d4c9', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array(array('id' => '@wordpress/blob', 'import' => 'dynamic')), 'version' => '4f59b7847b70a07b2710', 'type' => 'module');
 "
@@ -235,6 +250,20 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`overrides\` should
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '9725ab782f6b09598d3d', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment-minified\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '31d6cfe0d16ae931b73c', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment-minified\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('@wordpress/blob'), 'version' => 'a1906cfc819b623c86f8', 'type' => 'module');
 "
@@ -412,6 +441,24 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-interactivity'), 'version' => '455f3cab924853d41b8b');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
 exports[`DependencyExtractionWebpackPlugin scripts Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('wp-blob'), 'version' => 'c0e8a6f22065ea096606');
 "
@@ -619,6 +666,20 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`overrides\` should
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '464c785b5c938d4fde3f');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment-minified\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '31d6cfe0d16ae931b73c');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment-minified\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
 exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('wp-blob'), 'version' => 'd3cda564b538b44d38ef');
 "
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
new file mode 100644
index 00000000000000..1f0edffe27efd3
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { someFunction } from '.';
+
+someFunction();
+
+export const a = 'test';
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
new file mode 100644
index 00000000000000..01d7eff466bfbd
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { a } from './a';
+
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+export const someFunction = () => {
+	store( 'test', {
+		state: {
+			a,
+		},
+	} );
+	return a;
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js
new file mode 100644
index 00000000000000..d98678f44cb697
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/index.js
@@ -0,0 +1,3 @@
+/* wp:polyfill */
+
+// Nothing else, really.
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js
new file mode 100644
index 00000000000000..be01328d675d0a
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment-minified/webpack.config.js
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	optimization: {
+		minimize: true,
+	},
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
new file mode 100644
index 00000000000000..d98678f44cb697
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
@@ -0,0 +1,3 @@
+/* wp:polyfill */
+
+// Nothing else, really.
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
new file mode 100644
index 00000000000000..bfffff3ae78319
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 673567a2a3e492..945bf44ad6a653 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index ed2f9434539efe..245d459fb842e5 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 3aefc7cae99ae2..3e966fc4518d75 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 38a228d50a8e0f..9bd4581859193f 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index f3290182dff5c2..265e7b5947061a 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 89acde8f2b1245..9f4ffbcf61e410 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 1857e3d51cb70f..77f85a59cada84 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/dom/package.json b/packages/dom/package.json
index dd05677fcb9303..6707de05992697 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/src/dom/place-caret-at-edge.js b/packages/dom/src/dom/place-caret-at-edge.js
index 013a64d076e559..4075fc7c439586 100644
--- a/packages/dom/src/dom/place-caret-at-edge.js
+++ b/packages/dom/src/dom/place-caret-at-edge.js
@@ -67,14 +67,7 @@ export default function placeCaretAtEdge( container, isReverse, x ) {
 		return;
 	}
 
-	const { ownerDocument } = container;
-	const { defaultView } = ownerDocument;
-	assertIsDefined( defaultView, 'defaultView' );
-	const selection = defaultView.getSelection();
-	assertIsDefined( selection, 'selection' );
-
 	if ( ! container.isContentEditable ) {
-		selection.removeAllRanges();
 		return;
 	}
 
@@ -86,6 +79,11 @@ export default function placeCaretAtEdge( container, isReverse, x ) {
 		return;
 	}
 
+	const { ownerDocument } = container;
+	const { defaultView } = ownerDocument;
+	assertIsDefined( defaultView, 'defaultView' );
+	const selection = defaultView.getSelection();
+	assertIsDefined( selection, 'selection' );
 	selection.removeAllRanges();
 	selection.addRange( range );
 }
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index eb3cbd95fe3ad0..b53821f46eefef 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 1bb80bc4cc7643..f8e31ddc3c359a 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index b22c016a799bc5..98c17f5b6ecb01 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 11.8.0 (2024-09-19)
+
 ## 11.7.0 (2024-09-05)
 
 ## 11.6.0 (2024-08-21)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 02cee410f33d66..eeb0e66cb62a78 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.7.0",
+	"version": "11.8.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index a7ba03f05f4668..3fe696deaabb53 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 81e7fa1802c65b..2ce38150c96a00 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/block-bindings.php b/packages/e2e-tests/plugins/block-bindings.php
index 143feb240ac2ef..ffbe50ab3cc902 100644
--- a/packages/e2e-tests/plugins/block-bindings.php
+++ b/packages/e2e-tests/plugins/block-bindings.php
@@ -8,66 +8,158 @@
  */
 
 /**
-* Register custom fields and custom block bindings sources.
-*/
+ * Code necessary for testing block bindings:
+ * - Enqueues a custom script to register sources in the client.
+ * - Registers sources in the server.
+ * - Registers a custom post type and custom fields.
+ */
 function gutenberg_test_block_bindings_registration() {
+	// Define fields list.
+	$upload_dir  = wp_upload_dir();
+	$testing_url = $upload_dir['url'] . '/1024x768_e2e_test_image_size.jpeg';
+	$fields_list = array(
+		'text_field'  => array(
+			'label' => 'Text Field Label',
+			'value' => 'Text Field Value',
+		),
+		'url_field'   => array(
+			'label' => 'URL Field Label',
+			'value' => $testing_url,
+		),
+		'empty_field' => array(
+			'label' => 'Empty Field Label',
+			'value' => '',
+		),
+	);
+
+	// Enqueue a custom script for the plugin.
+	wp_enqueue_script(
+		'gutenberg-test-block-bindings',
+		plugins_url( 'block-bindings/index.js', __FILE__ ),
+		array(
+			'wp-blocks',
+			'wp-private-apis',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings/index.js' ),
+		true
+	);
+
+	// Pass data to the script.
+	wp_localize_script(
+		'gutenberg-test-block-bindings',
+		'testingBindings',
+		array(
+			'fieldsList' => $fields_list,
+		)
+	);
+
 	// Register custom block bindings sources.
 	register_block_bindings_source(
-		'core/server-source',
+		'testing/complete-source',
+		array(
+			'label'              => 'Complete Source',
+			'get_value_callback' => function ( $source_args ) use ( $fields_list ) {
+				if ( ! isset( $source_args['key'] ) || ! isset( $fields_list[ $source_args['key'] ] ) ) {
+					return null;
+				}
+				return $fields_list[ $source_args['key'] ]['value']; },
+		)
+	);
+	register_block_bindings_source(
+		'testing/server-only-source',
 		array(
 			'label'              => 'Server Source',
 			'get_value_callback' => function () {},
 		)
 	);
 
-	// Register custom fields.
+	// Register "movie" custom post type.
+	register_post_type(
+		'movie',
+		array(
+			'label'        => 'Movie',
+			'public'       => true,
+			'supports'     => array( 'title', 'editor', 'comments', 'revisions', 'trackbacks', 'author', 'excerpt', 'page-attributes', 'thumbnail', 'custom-fields', 'post-formats' ),
+			'has_archive'  => true,
+			'show_in_rest' => true,
+		)
+	);
+
+	// Register global custom fields.
 	register_meta(
 		'post',
 		'text_custom_field',
 		array(
+			'default'      => 'Value of the text custom field',
 			'show_in_rest' => true,
-			'type'         => 'string',
 			'single'       => true,
-			'default'      => 'Value of the text_custom_field',
+			'type'         => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'url_custom_field',
 		array(
+			'default'      => '#url-custom-field',
 			'show_in_rest' => true,
-			'type'         => 'string',
 			'single'       => true,
-			'default'      => '#url-custom-field',
+			'type'         => 'string',
 		)
 	);
+	// Register CPT custom fields.
 	register_meta(
 		'post',
-		'empty_field',
+		'movie_field',
 		array(
-			'show_in_rest' => true,
-			'type'         => 'string',
-			'single'       => true,
-			'default'      => '',
+			'label'          => 'Movie field label',
+			'default'        => 'Movie field default value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'field_with_only_label',
+		array(
+			'label'          => 'Field with only label',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
+		)
+	);
+	register_meta(
+		'post',
+		'field_without_label_or_default',
+		array(
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'_protected_field',
 		array(
-			'type'    => 'string',
-			'single'  => true,
-			'default' => 'protected field value',
+			'default'        => 'Protected field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'show_in_rest_false_field',
 		array(
-			'show_in_rest' => false,
-			'type'         => 'string',
-			'single'       => true,
-			'default'      => 'show_in_rest false field value',
+			'default'        => 'show_in_rest false field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => false,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 }
diff --git a/packages/e2e-tests/plugins/block-bindings/index.js b/packages/e2e-tests/plugins/block-bindings/index.js
new file mode 100644
index 00000000000000..c31502631307d0
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-bindings/index.js
@@ -0,0 +1,49 @@
+const { registerBlockBindingsSource } = wp.blocks;
+const { fieldsList } = window.testingBindings || {};
+
+const getValues = ( { bindings } ) => {
+	const newValues = {};
+	for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
+		newValues[ attributeName ] = fieldsList[ source.args.key ]?.value;
+	}
+	return newValues;
+};
+const setValues = ( { dispatch, bindings } ) => {
+	Object.values( bindings ).forEach( ( { args, newValue } ) => {
+		// Example of what could be done.
+		dispatch( 'core' ).editEntityRecord( 'postType', 'post', 1, {
+			meta: { [ args?.key ]: newValue },
+		} );
+	} );
+};
+
+registerBlockBindingsSource( {
+	name: 'testing/complete-source',
+	label: 'Complete Source',
+	getValues,
+	setValues,
+	canUserEditValue: () => true,
+	getFieldsList: () => fieldsList,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/can-user-edit-false',
+	label: 'Can User Edit: False',
+	getValues,
+	setValues,
+	canUserEditValue: () => false,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/can-user-edit-undefined',
+	label: 'Can User Edit: Undefined',
+	getValues,
+	setValues,
+} );
+
+registerBlockBindingsSource( {
+	name: 'testing/set-values-undefined',
+	label: 'Set Values: Undefined',
+	getValues,
+	canUserEditValue: () => true,
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index 5a46908f77d87b..77f2f25c5f9a41 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -41,13 +41,13 @@ directive(
 	'test-context',
 	( { context: { Provider }, props: { children } } ) => {
 		executionProof( 'context' );
-		const value = {
+		const client = {
 			[ namespace ]: proxifyState( namespace, {
 				attribute: 'from context',
 				text: 'from context',
 			} ),
 		};
-		return h( Provider, { value }, children );
+		return h( Provider, { value: { client } }, children );
 	},
 	{ priority: 8 }
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
new file mode 100644
index 00000000000000..c635846328b9e4
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-context",
+	"title": "E2E Interactivity tests - getServerContext",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
new file mode 100644
index 00000000000000..a71ced20dc46a1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * HTML for testing the getServerContext() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$link1      = $attributes['links']['modified'];
+$link2      = $attributes['links']['newProps'];
+$parent_ctx = $attributes['parentContext'];
+$child_ctx  = $attributes['childContext'];
+?>
+
+<nav
+	data-testid="navigate"
+	data-wp-interactive="test/get-server-context"
+	data-wp-on--click="actions.navigate"
+>
+	<a data-testid="modified" href="<?php echo esc_url( $link1 ); ?>">modified</a>
+	<a data-testid="newProps" href="<?php echo esc_url( $link2 ); ?>">newProps</a>
+</nav>
+
+<div
+	data-wp-interactive="test/get-server-context"
+	data-wp-router-region="server-context"
+	data-wp-watch="callbacks.updateServerContextParent"
+	<?php echo wp_interactivity_data_wp_context( $parent_ctx ); ?>
+>
+	<div
+		data-wp-watch="callbacks.updateServerContextChild"
+		<?php echo wp_interactivity_data_wp_context( $child_ctx ); ?>
+	>
+		<div data-testid="prop" data-wp-text="context.prop"></div>
+		<div data-testid="nested.prop" data-wp-text="context.nested.prop"></div>
+		<div data-testid="newProp" data-wp-text="context.newProp"></div>
+		<div data-testid="nested.newProp" data-wp-text="context.nested.newProp"></div>
+		<div data-testid="inherited.prop" data-wp-text="context.inherited.prop"></div>
+		<div data-testid="inherited.newProp" data-wp-text="context.inherited.newProp"></div>
+
+		<button
+			data-testid="tryToModifyServerContext"
+			<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+			data-wp-on--click="actions.attemptModification"
+			data-wp-text="context.result">
+		>
+			modify
+		</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
new file mode 100644
index 00000000000000..83f016e2eac16a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getServerContext } from '@wordpress/interactivity';
+
+store( 'test/get-server-context', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerContext().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateServerContextParent() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+		updateServerContextChild() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
new file mode 100644
index 00000000000000..abf76eb9beddcc
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-state",
+	"title": "E2E Interactivity tests - getServerState",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
new file mode 100644
index 00000000000000..abc4efd8272d5b
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * HTML for testing the getServerState() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+if ( isset( $attributes['state'] ) ) {
+	wp_interactivity_state( 'test/get-server-state', $attributes['state'] );
+}
+?>
+
+<div
+	data-wp-interactive="test/get-server-state"
+	data-wp-watch="callbacks.updateState"
+>
+	<div data-testid="prop" data-wp-text="state.prop"></div>
+	<div data-testid="nested.prop" data-wp-text="state.nested.prop"></div>
+	<div data-testid="newProp" data-wp-text="state.newProp"></div>
+	<div data-testid="nested.newProp" data-wp-text="state.nested.newProp"></div>
+
+	<button
+		data-testid="tryToModifyServerState"
+		<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+		data-wp-on--click="actions.attemptModification"
+		data-wp-text="context.result">
+	>
+		modify
+	</button>
+
+
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+HTML;
+			}
+		}
+		?>
+	</nav>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
new file mode 100644
index 00000000000000..db2992ec4a5863
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getServerState, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'test/get-server-state', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerState().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateState() {
+			const { prop, newProp, nested } = getServerState();
+			state.prop = prop;
+			state.newProp = newProp;
+			state.nested.prop = nested.prop;
+			state.nested.newProp = nested.newProp;
+		},
+	},
+} );
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index cd4b4a36295f07..3eb52f26e65012 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 0d8e0b28f7c7c5..1e5cbb13892a17 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js
index 5b94e838dbcad2..6c7cd269a27de9 100644
--- a/packages/edit-post/src/components/init-pattern-modal/index.js
+++ b/packages/edit-post/src/components/init-pattern-modal/index.js
@@ -11,12 +11,11 @@ import {
 	ToggleControl,
 	TextControl,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 export default function InitPatternModal() {
 	const { editPost } = useDispatch( editorStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const [ syncType, setSyncType ] = useState( undefined );
 	const [ title, setTitle ] = useState( '' );
 
@@ -28,14 +27,9 @@ export default function InitPatternModal() {
 			isNewPost: isCleanNewPost(),
 		};
 	}, [] );
-
-	useEffect( () => {
-		if ( isNewPost && postType === 'wp_block' ) {
-			setIsModalOpen( true );
-		}
-		// We only want the modal to open when the page is first loaded.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( () =>
+		isNewPost && postType === 'wp_block' ? true : false
+	);
 
 	if ( postType !== 'wp_block' || ! isNewPost ) {
 		return null;
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 2cbf5c32e814b8..66fa9dd5d93b8a 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -26,9 +26,10 @@ import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useCallback,
-	useLayoutEffect,
 	useMemo,
+	useId,
 	useRef,
+	useState,
 } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -41,8 +42,17 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { ResizableBox, SlotFillProvider } from '@wordpress/components';
-import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
+import {
+	ResizableBox,
+	SlotFillProvider,
+	Tooltip,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useMediaQuery,
+	useRefEffect,
+	useViewportMatch,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -176,13 +186,41 @@ function MetaBoxesMain( { isLegacy } ) {
 	const resizableBoxRef = useRef();
 	const isShort = useMediaQuery( '(max-height: 549px)' );
 
-	const isAutoHeight = openHeight === undefined;
-	// In case a user size is set stops the default max-height from applying.
-	useLayoutEffect( () => {
-		if ( ! isLegacy && hasAnyVisible && ! isShort && ! isAutoHeight ) {
-			resizableBoxRef.current.resizable.classList.add( 'has-user-size' );
+	const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
+	// Keeps the resizable area’s size constraints updated taking into account
+	// editor notices. The constraints are also used to derive the value for the
+	// aria-valuenow attribute on the seperator.
+	const effectSizeConstraints = useRefEffect( ( node ) => {
+		const container = node.closest(
+			'.interface-interface-skeleton__content'
+		);
+		const noticeLists = container.querySelectorAll(
+			':scope > .components-notice-list'
+		);
+		const resizeHandle = container.querySelector(
+			'.edit-post-meta-boxes-main__resize-handle'
+		);
+		const actualize = () => {
+			const fullHeight = container.offsetHeight;
+			let nextMax = fullHeight;
+			for ( const element of noticeLists ) {
+				nextMax -= element.offsetHeight;
+			}
+			const nextMin = resizeHandle.offsetHeight;
+			setHeightConstraints( { min: nextMin, max: nextMax } );
+		};
+		const observer = new window.ResizeObserver( actualize );
+		observer.observe( container );
+		for ( const element of noticeLists ) {
+			observer.observe( element );
 		}
-	}, [ isAutoHeight, isShort, hasAnyVisible, isLegacy ] );
+		return () => observer.disconnect();
+	}, [] );
+
+	const separatorRef = useRef();
+	const separatorHelpId = useId();
+
+	const [ isUntouched, setIsUntouched ] = useState( true );
 
 	if ( ! hasAnyVisible ) {
 		return;
@@ -206,6 +244,18 @@ function MetaBoxesMain( { isLegacy } ) {
 		return contents;
 	}
 
+	const isAutoHeight = openHeight === undefined;
+	let usedMax = '50%'; // Approximation before max has a value.
+	if ( max !== undefined ) {
+		// Halves the available max height until a user height is set.
+		usedMax = isAutoHeight && isUntouched ? max / 2 : max;
+	}
+
+	const getAriaValueNow = ( height ) =>
+		Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
+	const usedAriaValueNow =
+		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
+
 	if ( isShort ) {
 		return (
 			<details
@@ -224,6 +274,35 @@ function MetaBoxesMain( { isLegacy } ) {
 			</details>
 		);
 	}
+
+	// TODO: Support more/all keyboard interactions from the window splitter pattern:
+	// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+	const onSeparatorKeyDown = ( event ) => {
+		const delta = { ArrowUp: 20, ArrowDown: -20 }[ event.key ];
+		if ( delta ) {
+			const { resizable } = resizableBoxRef.current;
+			const fromHeight = isAutoHeight
+				? resizable.offsetHeight
+				: openHeight;
+			const nextHeight = Math.min(
+				max,
+				Math.max( min, delta + fromHeight )
+			);
+			resizableBoxRef.current.updateSize( {
+				height: nextHeight,
+				// Oddly, if left unspecified a subsequent drag gesture applies a fixed
+				// width and the pane fails to shrink/grow with parent width changes from
+				// sidebars opening/closing or window resizes.
+				width: 'auto',
+			} );
+			setPreference(
+				'core/edit-post',
+				'metaBoxesMainOpenHeight',
+				nextHeight
+			);
+		}
+	};
+
 	return (
 		<ResizableBox
 			className={ className }
@@ -239,8 +318,8 @@ function MetaBoxesMain( { isLegacy } ) {
 				bottomRight: false,
 				bottomLeft: false,
 			} }
-			// This is overriden by an !important rule that applies until user resizes.
-			maxHeight="100%"
+			minHeight={ min }
+			maxHeight={ usedMax }
 			bounds="parent"
 			boundsByDirection
 			// Avoids hiccups while dragging over objects like iframes and ensures that
@@ -250,19 +329,58 @@ function MetaBoxesMain( { isLegacy } ) {
 				target.setPointerCapture( pointerId );
 			} }
 			onResizeStart={ ( event, direction, elementRef ) => {
-				// Avoids height jumping in case it’s limited by max-height.
-				elementRef.style.height = `${ elementRef.offsetHeight }px`;
-				// Stops initial max-height from being applied.
-				elementRef.classList.add( 'has-user-size' );
+				if ( isAutoHeight ) {
+					const heightNow = elementRef.offsetHeight;
+					// Sets the starting height to avoid visual jumps in height and
+					// aria-valuenow being `NaN` for the first (few) resize events.
+					resizableBoxRef.current.updateSize( { height: heightNow } );
+					// Causes `maxHeight` to update to full `max` value instead of half.
+					setIsUntouched( false );
+				}
+			} }
+			onResize={ () => {
+				const { height } = resizableBoxRef.current.state;
+				const separator = separatorRef.current;
+				separator.ariaValueNow = getAriaValueNow( height );
 			} }
 			onResizeStop={ () => {
+				const nextHeight = resizableBoxRef.current.state.height;
 				setPreference(
 					'core/edit-post',
 					'metaBoxesMainOpenHeight',
-					resizableBoxRef.current.state.height
+					nextHeight
 				);
 			} }
+			handleClasses={ {
+				top: 'edit-post-meta-boxes-main__resize-handle',
+			} }
+			handleComponent={ {
+				top: (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: aria-valuenow is supported by separator role. */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<button
+								ref={ separatorRef }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ separatorHelpId }
+								onKeyDown={ onSeparatorKeyDown }
+								// Disable reason: buttons are allowed to be separator role.
+								// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+								role="separator"
+								aria-valuenow={ usedAriaValueNow }
+							/>
+						</Tooltip>
+						<VisuallyHidden id={ separatorHelpId }>
+							{ __(
+								'Use up and down arrow keys to resize the metabox panel.'
+							) }
+						</VisuallyHidden>
+					</>
+				),
+			} }
 		>
+			<meta ref={ effectSizeConstraints } />
 			{ contents }
 		</ResizableBox>
 	);
@@ -280,7 +398,7 @@ function Layout( {
 	const shouldIframe = useShouldIframe();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
-		currentPost,
+		currentPost: { postId: currentPostId, postType: currentPostType },
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
 	} = useNavigateToEntityRecord(
@@ -288,6 +406,7 @@ function Layout( {
 		initialPostType,
 		'post-only'
 	);
+	const isEditingTemplate = currentPostType === 'wp_template';
 	const {
 		mode,
 		isFullscreenActive,
@@ -297,7 +416,6 @@ function Layout( {
 		isDistractionFree,
 		showMetaBoxes,
 		hasHistory,
-		isEditingTemplate,
 		isWelcomeGuideVisible,
 		templateId,
 	} = useSelect(
@@ -310,7 +428,7 @@ function Layout( {
 
 			const supportsTemplateMode = settings.supportsTemplateMode;
 			const isViewable =
-				getPostType( currentPost.postType )?.viewable ?? false;
+				getPostType( currentPostType )?.viewable ?? false;
 			const canViewTemplate = canUser( 'read', {
 				kind: 'postType',
 				name: 'wp_template',
@@ -326,21 +444,19 @@ function Layout( {
 				showIconLabels: get( 'core', 'showIconLabels' ),
 				isDistractionFree: get( 'core', 'distractionFree' ),
 				showMetaBoxes:
+					! DESIGN_POST_TYPES.includes( currentPostType ) &&
 					select( editorStore ).getRenderingMode() === 'post-only',
-				isEditingTemplate:
-					select( editorStore ).getCurrentPostType() ===
-					'wp_template',
 				isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 				templateId:
 					supportsTemplateMode &&
 					isViewable &&
 					canViewTemplate &&
-					currentPost.postType !== 'wp_template'
+					! isEditingTemplate
 						? getEditedPostTemplateId()
 						: null,
 			};
 		},
-		[ settings.supportsTemplateMode, currentPost.postType ]
+		[ currentPostType, isEditingTemplate, settings.supportsTemplateMode ]
 	);
 
 	// Set the right context for the command palette
@@ -450,12 +566,12 @@ function Layout( {
 		<SlotFillProvider>
 			<ErrorBoundary>
 				<CommandMenu />
-				<WelcomeGuide postType={ currentPost.postType } />
+				<WelcomeGuide postType={ currentPostType } />
 				<Editor
 					settings={ editorSettings }
 					initialEdits={ initialEdits }
-					postType={ currentPost.postType }
-					postId={ currentPost.postId }
+					postType={ currentPostType }
+					postId={ currentPostId }
 					templateId={ templateId }
 					className={ className }
 					styles={ styles }
@@ -467,7 +583,7 @@ function Layout( {
 					autoFocus={ ! isWelcomeGuideVisible }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
-						! isEditingTemplate && <MetaBoxes location="side" />
+						showMetaBoxes && <MetaBoxes location="side" />
 					}
 					extraContent={
 						! isDistractionFree &&
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 5392a7e9da4d95..5d0a9a29c329ca 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,15 +1,12 @@
+$resize-handle-height: $grid-unit-30;
+
 .edit-post-meta-boxes-main {
 	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
 	background-color: $white;
 	clear: both; // This is seemingly only needed in case the canvas is not iframe’d.
 
 	&:not(details) {
-		padding-top: 23px;
-		max-height: 100%;
-
-		&:not(.has-user-size) {
-			max-height: 50% !important;
-		}
+		padding-top: $resize-handle-height;
 	}
 
 	// The component renders as a details element in short viewports.
@@ -31,24 +28,34 @@
 			z-index: 1;
 		}
 	}
+}
 
-	& .components-resizable-box__handle-top {
-		top: 0;
-		box-shadow: 0 $border-width $gray-300;
-	}
-	& .components-resizable-box__side-handle::before {
-		border-radius: 0;
-		top: 0;
-		height: $border-width;
-	}
-	& .components-resizable-box__handle::after {
+.edit-post-meta-boxes-main__resize-handle {
+	display: flex;
+	// The position is absolute by default inline style of ResizableBox.
+	inset: 0 0 auto 0;
+	height: $resize-handle-height;
+	box-shadow: 0 $border-width $gray-300;
+
+	& > button {
+		appearance: none;
+		cursor: inherit;
+		margin: auto;
+		padding: 0;
+		border: none;
+		outline: none;
 		background-color: $gray-300;
-		box-shadow: none;
-		border-radius: 4px;
+		width: $grid-unit-80;
 		height: $grid-unit-05;
-		top: calc(50% - #{$grid-unit-05} / 2);
-		width: 100px;
-		right: calc(50% - 50px);
+		border-radius: $radius-small;
+		transition: width 0.3s ease-out;
+		@include reduce-motion("transition");
+	}
+
+	&:hover > button,
+	> button:focus {
+		background-color: var(--wp-admin-theme-color);
+		width: $grid-unit-80 + $grid-unit-20;
 	}
 }
 
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d00f7472382f80..1dc0401baf21c3 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -8,7 +8,7 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
-import { addFilter } from '@wordpress/hooks';
+import { addAction } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -478,21 +478,14 @@ export const initializeMetaBoxes =
 		metaBoxesInitialized = true;
 
 		// Save metaboxes on save completion, except for autosaves.
-		addFilter(
-			'editor.__unstableSavePost',
+		addAction(
+			'editor.savePost',
 			'core/edit-post/save-metaboxes',
-			( previous, options ) =>
-				previous.then( () => {
-					if ( options.isAutosave ) {
-						return;
-					}
-
-					if ( ! select.hasMetaBoxes() ) {
-						return;
-					}
-
-					return dispatch.requestMetaBoxUpdates();
-				} )
+			async ( options ) => {
+				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
+					await dispatch.requestMetaBoxUpdates();
+				}
+			}
 		);
 
 		dispatch( {
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 5bea6e7d35eb62..8d85249e8100ba 100644
--- a/packages/edit-post/src/store/selectors.js
+++ b/packages/edit-post/src/store/selectors.js
@@ -506,7 +506,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 				version: '6.7',
 			}
 		);
-		return unlock( select( editorStore ) ).getInsertionPoint();
+		return unlock( select( editorStore ) ).getInserter();
 	}
 );
 
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 025d2389e4b01d..b14fb6dcd6d3e8 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index a7b22e9c314300..dec5761a62806b 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 4993f12153b9e4..69f1925c7b0e44 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -36,8 +36,7 @@ function SuggestionListItem( {
 		<Composite.Item
 			render={
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					role="option"
 					className={ baseCssClass }
 					onClick={ () =>
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 933ea6df1198bb..bb0acbe62cd659 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -107,8 +107,7 @@ function TemplateListItem( {
 } ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			className={ className }
 			onClick={ onClick }
 			label={ description }
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 36a3a5b43e5cd2..ac1083e69abd7e 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -125,8 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								size="compact"
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }
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 7df2b0ceca552f..0bdbc2bbe32355 100644
--- a/packages/edit-site/src/components/editor-canvas-container/style.scss
+++ b/packages/edit-site/src/components/editor-canvas-container/style.scss
@@ -29,7 +29,7 @@
 .edit-site-editor-canvas-container__close-button {
 	position: absolute;
 	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-	z-index: 1;
+	top: $grid-unit-10;
+	z-index: 2;
 	background: $white;
 }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b99a7cd78ed371..855225081236c8 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -22,7 +22,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, homeButton } from '@wordpress/icons';
+import { Icon, arrowUpLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -256,8 +256,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 										whileTap="tap"
 									>
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize
 											label={ __( 'Open Navigation' ) }
 											showTooltip
 											tooltipPosition="middle right"
@@ -292,7 +291,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 											) }
 											variants={ toggleHomeIconVariants }
 										>
-											<Icon icon={ homeButton } />
+											<Icon icon={ arrowUpLeft } />
 										</motion.div>
 									</motion.div>
 								)
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 10efff92af6434..a6cc5084966947 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -69,6 +69,10 @@
 	background-color: hsla(0, 0%, 80%);
 	pointer-events: none;
 
+	svg {
+		fill: currentColor;
+	}
+
 	&.has-site-icon {
 		background-color: hsla(0, 0%, 100%, 0.6);
 		-webkit-backdrop-filter: saturate(180%) blur(15px);
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
index b03c99f46f03b1..c4090c7e6b1190 100644
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ b/packages/edit-site/src/components/error-boundary/warning.js
@@ -9,12 +9,7 @@ import { useCopyToClipboard } from '@wordpress/compose';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
-			variant="secondary"
-			ref={ ref }
-		>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/edit-site/src/components/global-styles-sidebar/index.js b/packages/edit-site/src/components/global-styles-sidebar/index.js
index b314b5d7e75244..966005907cda4a 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/index.js
+++ b/packages/edit-site/src/components/global-styles-sidebar/index.js
@@ -6,7 +6,7 @@ import {
 	FlexBlock,
 	Flex,
 	Button,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index b76192ddfcb5ca..4ca87bf200f178 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -22,14 +22,7 @@
 	flex-direction: column;
 	min-height: 100%;
 
-	&__panel,
-	&__navigator-provider {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-	}
-
-	&__navigator-screen {
+	&__panel {
 		flex: 1;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 6a554b136317dd..5332478823c210 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
@@ -61,14 +61,9 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 4 }>
-				{ themeFonts.length > 0 && (
-					<VStack>
-						<Subtitle level={ 3 }>
-							{
-								/* translators: Heading for a list of fonts provided by the theme. */
-								_x( 'Theme', 'font source' )
-							}
-						</Subtitle>
+				{ [ ...themeFonts, ...customFonts ].length > 0 && (
+					<>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
 							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
@@ -77,25 +72,7 @@ function FontFamilies() {
 								/>
 							) ) }
 						</ItemGroup>
-					</VStack>
-				) }
-				{ customFonts.length > 0 && (
-					<VStack>
-						<Subtitle level={ 3 }>
-							{
-								/* translators: Heading for a list of fonts installed by the user. */
-								_x( 'Custom', 'font source' )
-							}
-						</Subtitle>
-						<ItemGroup size="large" isBordered isSeparated>
-							{ customFonts.map( ( font ) => (
-								<FontFamilyItem
-									key={ font.slug }
-									font={ font }
-								/>
-							) ) }
-						</ItemGroup>
-					</VStack>
+					</>
 				) }
 				{ ! hasFonts && (
 					<VStack>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
index 579c6564fdf3e7..61f8c28c77144f 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -3,7 +3,7 @@
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index ce7b4c1766c64f..caf339091de752 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -13,9 +13,7 @@ import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -284,11 +282,11 @@ function FontCollection( { slug } ) {
 
 			{ ! isLoading && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath="/"
 						className="font-library-modal__tabpanel-layout"
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<HStack justify="space-between">
 								<VStack>
 									<Heading level={ 2 } size={ 13 }>
@@ -378,11 +376,11 @@ function FontCollection( { slug } ) {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</div>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<Flex justify="flex-start">
-								<NavigatorBackButton
+								<Navigator.BackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -463,8 +461,8 @@ function FontCollection( { slug } ) {
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
 							<Spacer margin={ 16 } />
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					{ selectedFont && (
 						<Flex
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 495652f144275e..27093e0ef1cbba 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -67,7 +67,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<Tabs defaultTabId={ defaultTabId }>
-				<div className="font-library-modal__tablist">
+				<div className="font-library-modal__tablist-container">
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>
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 8cb023fff08e96..b7666a66afe0b3 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -6,10 +6,8 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
 	__experimentalHeading as Heading,
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
-	__experimentalUseNavigator as useNavigator,
+	Navigator,
+	useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
@@ -235,12 +233,12 @@ function InstalledFonts() {
 
 			{ ! isResolvingLibrary && (
 				<>
-					<NavigatorProvider
+					<Navigator
 						initialPath={
 							libraryFontSelected ? '/fontFamily' : '/'
 						}
 					>
-						<NavigatorScreen path="/">
+						<Navigator.Screen path="/">
 							<VStack spacing="8">
 								{ notice && (
 									<Notice
@@ -338,9 +336,9 @@ function InstalledFonts() {
 									</VStack>
 								) }
 							</VStack>
-						</NavigatorScreen>
+						</Navigator.Screen>
 
-						<NavigatorScreen path="/fontFamily">
+						<Navigator.Screen path="/fontFamily">
 							<ConfirmDeleteDialog
 								font={ libraryFontSelected }
 								isOpen={ isConfirmDeleteOpen }
@@ -353,7 +351,7 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<NavigatorBackButton
+								<Navigator.BackButton
 									icon={
 										isRTL() ? chevronRight : chevronLeft
 									}
@@ -427,8 +425,8 @@ function InstalledFonts() {
 								</ul>
 								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
-						</NavigatorScreen>
-					</NavigatorProvider>
+						</Navigator.Screen>
+					</Navigator>
 
 					<HStack
 						justify="flex-end"
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index e8c48ca2c30bf8..7d94376ac8d942 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -133,7 +133,7 @@ $footer-height: 70px;
 	padding-bottom: $grid-unit-20;
 }
 
-.font-library-modal__tablist {
+.font-library-modal__tablist-container {
 	position: sticky;
 	top: 0;
 	border-bottom: 1px solid $gray-300;
@@ -141,6 +141,10 @@ $footer-height: 70px;
 	margin: 0 #{$grid-unit-40 * -1};
 	padding: 0 $grid-unit-20;
 	z-index: 1;
+
+	[role="tablist"] {
+		margin-bottom: -1px;
+	}
 }
 
 
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
index 25ff6812d583c9..80b1ea55c405bc 100644
--- a/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-size.js
@@ -5,7 +5,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalView as View,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 1d9de84183aef7..1bbff8fb3d6a6d 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,7 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorBackButton
+						<Navigator.BackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
 							label={ __( 'Back' ) }
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 5bc8a50e0e2f45..62af9740e8ae1a 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -29,11 +28,11 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 }
 
 function NavigationButtonAsItem( props ) {
-	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
+	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index de27e92113b554..89af705cd92504 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 } from '@wordpress/components';
diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js
deleted file mode 100644
index ce754121dfe1b5..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-typeset.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TypographyVariations from './variations/variations-typography';
-import ScreenHeader from './header';
-import FontFamilies from './font-families';
-
-function ScreenTypeset() {
-	const fontLibraryEnabled = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().fontLibraryEnabled,
-		[]
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Typesets' ) }
-				description={ __(
-					'Fonts and typographic styling applied across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen">
-				<VStack spacing={ 7 }>
-					<TypographyVariations />
-
-					{ fontLibraryEnabled && <FontFamilies /> }
-				</VStack>
-			</div>
-		</>
-	);
-}
-
-export default ScreenTypeset;
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 c23592c51a6a2a..3739e3234258bd 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -11,8 +11,8 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import TypographyElements from './typography-elements';
 import ScreenHeader from './header';
+import TypographyVariations from './variations/variations-typography';
 import FontSizesCount from './font-sizes/font-sizes-count';
-import TypesetButton from './typeset-button';
 import FontFamilies from './font-families';
 
 function ScreenTypography() {
@@ -27,12 +27,12 @@ function ScreenTypography() {
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Typography styles and the application of those styles on site elements.'
+					'Available fonts, typographic styles, and the application of those styles.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypesetButton />
+					<TypographyVariations title={ __( 'Typesets' ) } />
 					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 					<FontSizesCount />
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index cf49d8c28ebcb9..f12f960f6a36bb 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -13,15 +13,13 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	__experimentalUseNavigator as useNavigator,
+	useNavigator,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -35,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -51,7 +48,6 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -464,13 +460,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<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
@@ -481,7 +475,6 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'Spread' ) }
 					value={ shadowObj.spread }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
 			</Grid>
@@ -489,16 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	);
 }
 
-function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -506,50 +490,11 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-				/>
-			) : (
-				<RangeControl
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-				/>
-			) }
-		</VStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
deleted file mode 100644
index bcd450def06f8e..00000000000000
--- a/packages/edit-site/src/components/global-styles/typeset-button.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { isRTL, __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useMemo, useContext } from '@wordpress/element';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import FontLibraryProvider from './font-library-modal/context';
-import { getFontFamilies } from './utils';
-import { NavigationButtonAsItem } from './navigation-button';
-import Subtitle from './subtitle';
-import { unlock } from '../../lock-unlock';
-import {
-	filterObjectByProperties,
-	useCurrentMergeThemeStyleVariationsWithUserConfig,
-} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-
-function TypesetButton() {
-	const propertiesToFilter = [ 'typography' ];
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
-	const hasTypographyVariations = typographyVariations?.length > 1;
-	const { base, user: userConfig } = useContext( GlobalStylesContext );
-	const config = mergeBaseAndUserConfigs( base, userConfig );
-	const allFontFamilies = getFontFamilies( config );
-	const hasFonts =
-		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
-	const variations = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeGlobalStylesVariations();
-	}, [] );
-	const userTypographyConfig = filterObjectByProperties(
-		userConfig,
-		'typography'
-	);
-
-	const title = useMemo( () => {
-		if ( Object.keys( userTypographyConfig ).length === 0 ) {
-			return __( 'Default' );
-		}
-		const activeVariation = variations?.find( ( variation ) => {
-			return (
-				JSON.stringify(
-					filterObjectByProperties( variation, 'typography' )
-				) === JSON.stringify( userTypographyConfig )
-			);
-		} );
-		if ( activeVariation ) {
-			return activeVariation.title;
-		}
-		return allFontFamilies.map( ( font ) => font?.name ).join( ', ' );
-	}, [ allFontFamilies, userTypographyConfig, variations ] );
-
-	return (
-		hasTypographyVariations &&
-		hasFonts && (
-			<VStack spacing={ 2 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
-				</HStack>
-				<ItemGroup isBordered isSeparated>
-					<NavigationButtonAsItem
-						path="/typography/typeset"
-						aria-label={ __( 'Typeset' ) }
-					>
-						<HStack direction="row">
-							<FlexItem>{ title }</FlexItem>
-							<Icon
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</VStack>
-		)
-	);
-}
-
-export default ( { ...props } ) => (
-	<FontLibraryProvider>
-		<TypesetButton { ...props } />
-	</FontLibraryProvider>
-);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 60d7e314d7776a..fbc3e461e6abb6 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+	Navigator,
+	useNavigator,
 	createSlotFill,
 	DropdownMenu,
 	MenuGroup,
@@ -32,7 +31,6 @@ import {
 } from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
-import ScreenTypeset from './screen-typeset';
 import ScreenTypographyElement from './screen-typography-element';
 import FontSize from './font-sizes/font-size';
 import FontSizes from './font-sizes/font-sizes';
@@ -125,7 +123,7 @@ function GlobalStylesActionMenu() {
 
 function GlobalStylesNavigationScreen( { className, ...props } ) {
 	return (
-		<NavigatorScreen
+		<Navigator.Screen
 			className={ [
 				'edit-site-global-styles-sidebar__navigator-screen',
 				className,
@@ -272,19 +270,6 @@ function GlobalStylesEditorCanvasContainerLink() {
 					goTo( '/' );
 				}
 				break;
-			default:
-				/*
-				 * Example: the user has navigated to "Browse styles" or elsewhere
-				 * and changes the editorCanvasContainerView, e.g., closes the style book.
-				 * The panel should not be affected.
-				 * Exclude revisions panel from this behavior,
-				 * as it should close when the editorCanvasContainerView doesn't correspond.
-				 */
-				if ( path !== '/' && ! isRevisionsOpen ) {
-					return;
-				}
-				goTo( '/' );
-				break;
 		}
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
@@ -297,7 +282,7 @@ function GlobalStylesUI() {
 		[]
 	);
 	return (
-		<NavigatorProvider
+		<Navigator
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
@@ -325,10 +310,6 @@ function GlobalStylesUI() {
 				<FontSize />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/typography/typeset">
-				<ScreenTypeset />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>
@@ -403,7 +384,7 @@ function GlobalStylesUI() {
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />
-		</NavigatorProvider>
+		</Navigator>
 	);
 }
 export { GlobalStylesMenuSlot };
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index b2d929a7943dbf..27a3f7b99bf7e2 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -114,14 +114,18 @@
 		width: calc(100% - #{$canvas-padding});
 
 		.edit-site-resizable-frame__inner-content {
-			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-			transition: border-radius 0.4s;
+			box-shadow: $elevation-x-small;
+			transition: border-radius, box-shadow 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
 
 			.edit-site-layout:not(.is-full-canvas) & {
 				border-radius: $radius-large;
 			}
+
+			&:hover {
+				box-shadow: $elevation-large;
+			}
 		}
 	}
 
@@ -246,6 +250,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	flex-grow: 1;
 	margin: 0;
 	overflow: hidden;
+	box-shadow: $elevation-x-small;
 	@include break-medium() {
 		border-radius: 8px;
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js
index ff9c0dbe81a047..88de0c1fa39b01 100644
--- a/packages/edit-site/src/components/page-patterns/fields.js
+++ b/packages/edit-site/src/components/page-patterns/fields.js
@@ -133,8 +133,7 @@ function TitleField( { item } ) {
 					title
 				) : (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ onClick }
 						// Required for the grid's roving tab index system.
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index b589a3861c75d3..b5aae01918e691 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -171,7 +171,10 @@ function ResizableFrame( {
 		event.preventDefault();
 
 		const step = 20 * ( event.shiftKey ? 5 : 1 );
-		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const delta =
+			step *
+			( event.key === 'ArrowLeft' ? 1 : -1 ) *
+			( isRTL() ? -1 : 1 );
 		const newWidth = Math.min(
 			Math.max(
 				FRAME_MIN_WIDTH,
@@ -200,15 +203,17 @@ function ResizableFrame( {
 	const resizeHandleVariants = {
 		hidden: {
 			opacity: 0,
-			left: 0,
+			...( isRTL() ? { right: 0 } : { left: 0 } ),
 		},
 		visible: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 		},
 		active: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 			scaleY: 1.3,
 		},
 	};
@@ -246,10 +251,11 @@ function ResizableFrame( {
 			size={ frameSize }
 			enable={ {
 				top: false,
-				right: false,
 				bottom: false,
 				// Resizing will be disabled until the editor content is loaded.
-				left: isReady,
+				...( isRTL()
+					? { right: isReady, left: false }
+					: { left: isReady, right: false } ),
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,
@@ -269,7 +275,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				left: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js
index 4423eeeb1d6e8d..a34b37943a0799 100644
--- a/packages/edit-site/src/components/routes/link.js
+++ b/packages/edit-site/src/components/routes/link.js
@@ -33,14 +33,17 @@ export function useLink( params, state, shouldReplace = false ) {
 		...Object.keys( currentArgs )
 	);
 
+	let extraParams = {};
 	if ( isPreviewingTheme() ) {
-		params = {
-			...params,
+		extraParams = {
 			wp_theme_preview: currentlyPreviewingTheme(),
 		};
 	}
 
-	const newUrl = addQueryArgs( currentUrlWithoutArgs, params );
+	const newUrl = addQueryArgs( currentUrlWithoutArgs, {
+		...params,
+		...extraParams,
+	} );
 
 	return {
 		href: newUrl,
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index babcf72181a1af..9b00a39fd78948 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -150,8 +150,7 @@ export default function SavePanel() {
 				} ) }
 			>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="secondary"
 					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
index d7030597dac503..64c6efb891f462 100644
--- a/packages/edit-site/src/components/sidebar-button/index.js
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -11,8 +11,7 @@ import { Button } from '@wordpress/components';
 export default function SidebarButton( props ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			{ ...props }
 			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>
diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js
index 3e369db9b2a821..62956ccd18960d 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
@@ -88,8 +88,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 				/>
 				<HStack justify="right">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => {
 							setIsAdding( false );
@@ -99,8 +98,7 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 					</Button>
 
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title || isSaving }
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index 7fe929d20a1db2..8cb3502493cff0 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -62,8 +62,7 @@ const SiteHub = memo(
 						) }
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							ref={ ref }
 							href={ dashboardLink }
 							label={ __( 'Go to the Dashboard' ) }
@@ -80,8 +79,7 @@ const SiteHub = memo(
 					<HStack>
 						<div className="edit-site-site-hub__title">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
@@ -101,8 +99,7 @@ const SiteHub = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
@@ -149,8 +146,7 @@ export const SiteHubMobile = memo(
 						) }
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							ref={ ref }
 							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
@@ -170,8 +166,7 @@ export const SiteHubMobile = memo(
 					<HStack>
 						<div className="edit-site-site-hub__title">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
@@ -186,8 +181,7 @@ export const SiteHubMobile = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts
new file mode 100644
index 00000000000000..2c1b627c6d0c60
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/categories.ts
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	BlockExample,
+	StyleBookCategory,
+	CategoryExamples,
+} from './types';
+import {
+	STYLE_BOOK_CATEGORIES,
+	STYLE_BOOK_THEME_SUBCATEGORIES,
+} from './constants';
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ * @param {StyleBookCategory} categoryDefinition The category definition.
+ * @param {BlockExample[]}    examples           An array of block examples.
+ * @return {CategoryExamples|undefined} An object containing the category examples.
+ */
+export function getExamplesByCategory(
+	categoryDefinition: StyleBookCategory,
+	examples: BlockExample[]
+): CategoryExamples | undefined {
+	if ( ! categoryDefinition?.slug || ! examples?.length ) {
+		return;
+	}
+
+	if ( categoryDefinition?.subcategories?.length ) {
+		return categoryDefinition.subcategories.reduce(
+			( acc, subcategoryDefinition ) => {
+				const subcategoryExamples = getExamplesByCategory(
+					subcategoryDefinition,
+					examples
+				);
+				if ( subcategoryExamples ) {
+					acc.subcategories = [
+						...acc.subcategories,
+						subcategoryExamples,
+					];
+				}
+				return acc;
+			},
+			{
+				title: categoryDefinition.title,
+				slug: categoryDefinition.slug,
+				subcategories: [],
+			}
+		);
+	}
+
+	const blocksToInclude = categoryDefinition?.blocks || [];
+	const blocksToExclude = categoryDefinition?.exclude || [];
+	const categoryExamples = examples.filter( ( example ) => {
+		return (
+			! blocksToExclude.includes( example.name ) &&
+			( example.category === categoryDefinition.slug ||
+				blocksToInclude.includes( example.name ) )
+		);
+	} );
+
+	if ( ! categoryExamples.length ) {
+		return;
+	}
+
+	return {
+		title: categoryDefinition.title,
+		slug: categoryDefinition.slug,
+		examples: categoryExamples,
+	};
+}
+
+/**
+ * Returns category examples for a given category definition and list of examples.
+ *
+ * @return {StyleBookCategory[]} An array of top-level category definitions.
+ */
+export function getTopLevelStyleBookCategories(): StyleBookCategory[] {
+	const reservedCategories = [
+		...STYLE_BOOK_THEME_SUBCATEGORIES,
+		...STYLE_BOOK_CATEGORIES,
+	].map( ( { slug } ) => slug );
+	const extraCategories = getCategories().filter(
+		( { slug } ) => ! reservedCategories.includes( slug )
+	);
+	return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ];
+}
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
new file mode 100644
index 00000000000000..fc06d8f1409f0d
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/constants.ts
@@ -0,0 +1,191 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory } from './types';
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
+	StyleBookCategory,
+	'subcategories'
+>[] = [
+	{
+		slug: 'site-identity',
+		title: __( 'Site Identity' ),
+		blocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],
+	},
+	{
+		slug: 'design',
+		title: __( 'Design' ),
+		blocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],
+		exclude: [ 'core/home-link', 'core/navigation-link' ],
+	},
+	{
+		slug: 'posts',
+		title: __( 'Posts' ),
+		blocks: [
+			'core/post-title',
+			'core/post-excerpt',
+			'core/post-author',
+			'core/post-author-name',
+			'core/post-author-biography',
+			'core/post-date',
+			'core/post-terms',
+			'core/term-description',
+			'core/query-title',
+			'core/query-no-results',
+			'core/query-pagination',
+			'core/query-numbers',
+		],
+	},
+	{
+		slug: 'comments',
+		title: __( 'Comments' ),
+		blocks: [
+			'core/comments-title',
+			'core/comments-pagination',
+			'core/comments-pagination-numbers',
+			'core/comments',
+			'core/comments-author-name',
+			'core/comment-content',
+			'core/comment-date',
+			'core/comment-edit-link',
+			'core/comment-reply-link',
+			'core/comment-template',
+			'core/post-comments-count',
+			'core/post-comments-link',
+		],
+	},
+];
+
+export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [ 'custom/colors' ],
+	},
+	{
+		slug: 'theme',
+		title: __( 'Theme' ),
+		subcategories: STYLE_BOOK_THEME_SUBCATEGORIES,
+	},
+	{
+		slug: 'media',
+		title: __( 'Media' ),
+		blocks: [ 'core/post-featured-image' ],
+	},
+	{
+		slug: 'widgets',
+		title: __( 'Widgets' ),
+		blocks: [],
+	},
+	{
+		slug: 'embed',
+		title: __( 'Embeds' ),
+		include: [],
+	},
+];
+
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+	// Forming a "block formatting context" to prevent margin collapsing.
+	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+	.is-root-container {
+		display: flow-root;
+	}
+	
+	body {
+		position: relative;
+		padding: 32px !important;
+	}
+
+	.edit-site-style-book__examples {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+	    max-width: 900px;
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
+		margin: 0 auto 40px auto;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+	
+	.edit-site-style-book__subcategory-title,
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+	
+	.edit-site-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	border-bottom: 1px solid #ddd;
+    	padding-bottom: 8px;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts
new file mode 100644
index 00000000000000..80807b10374c68
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/examples.ts
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample } from './types';
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples(): BlockExample[] {
+	const nonHeadingBlockExamples = getBlockTypes()
+		.filter( ( blockType ) => {
+			const { name, example, supports } = blockType;
+			return (
+				name !== 'core/heading' &&
+				!! example &&
+				supports.inserter !== false
+			);
+		} )
+		.map( ( blockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			blocks: getBlockFromExample( blockType.name, blockType.example ),
+		} ) );
+	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+	if ( ! isHeadingBlockRegistered ) {
+		return nonHeadingBlockExamples;
+	}
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+			return createBlock( 'core/heading', {
+				content: sprintf(
+					// translators: %d: heading level e.g: "1", "2", "3"
+					__( 'Heading %d' ),
+					level
+				),
+				level,
+			} );
+		} ),
+	};
+
+	return [ headingsExample, ...nonHeadingBlockExamples ];
+}
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index 64503dcf7a6dbb..7b85c320e20c99 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -12,13 +12,6 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	getCategories,
-	getBlockType,
-	getBlockTypes,
-	getBlockFromExample,
-	createBlock,
-} from '@wordpress/blocks';
 import {
 	BlockList,
 	privateApis as blockEditorPrivateApis,
@@ -37,6 +30,12 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
+import { STYLE_BOOK_IFRAME_STYLES } from './constants';
+import {
+	getExamplesByCategory,
+	getTopLevelStyleBookCategories,
+} from './categories';
+import { getExamples } from './examples';
 
 const {
 	ExperimentalBlockEditorProvider,
@@ -48,126 +47,10 @@ const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-// The content area of the Style Book is rendered within an iframe so that global styles
-// are applied to elements within the entire content area. To support elements that are
-// not part of the block previews, such as headings and layout for the block previews,
-// additional CSS rules need to be passed into the iframe. These are hard-coded below.
-// Note that button styles are unset, and then focus rules from the `Button` component are
-// applied to the `button` element, targeted via `.edit-site-style-book__example`.
-// This is to ensure that browser default styles for buttons are not applied to the previews.
-const STYLE_BOOK_IFRAME_STYLES = `
-	.edit-site-style-book__examples {
-		max-width: 900px;
-		margin: 0 auto;
-	}
-
-	.edit-site-style-book__example {
-		border-radius: 2px;
-		cursor: pointer;
-		display: flex;
-		flex-direction: column;
-		gap: 40px;
-		margin-bottom: 40px;
-		padding: 16px;
-		width: 100%;
-		box-sizing: border-box;
-		scroll-margin-top: 32px;
-		scroll-margin-bottom: 32px;
-	}
-
-	.edit-site-style-book__example.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	}
-
-	.edit-site-style-book__example:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-		outline: 3px solid transparent;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
-	}
-
-	.edit-site-style-book__example-title {
-		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
-		line-height: normal;
-		margin: 0;
-		text-align: left;
-		text-transform: uppercase;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
-	.edit-site-style-book__example-preview {
-		width: 100%;
-	}
-
-	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
-	.edit-site-style-book__example-preview .block-list-appender {
-		display: none;
-	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
-		margin-top: 0;
-	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
-		margin-bottom: 0;
-	}
-`;
-
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function getExamples() {
-	const nonHeadingBlockExamples = getBlockTypes()
-		.filter( ( blockType ) => {
-			const { name, example, supports } = blockType;
-			return (
-				name !== 'core/heading' &&
-				!! example &&
-				supports.inserter !== false
-			);
-		} )
-		.map( ( blockType ) => ( {
-			name: blockType.name,
-			title: blockType.title,
-			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
-		} ) );
-
-	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
-
-	if ( ! isHeadingBlockRegistered ) {
-		return nonHeadingBlockExamples;
-	}
-
-	// Use our own example for the Heading block so that we can show multiple
-	// heading levels.
-	const headingsExample = {
-		name: 'core/heading',
-		title: __( 'Headings' ),
-		category: 'text',
-		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
-			return createBlock( 'core/heading', {
-				content: sprintf(
-					// translators: %d: heading level e.g: "1", "2", "3"
-					__( 'Heading %d' ),
-					level
-				),
-				level,
-			} );
-		} ),
-	};
-
-	return [ headingsExample, ...nonHeadingBlockExamples ];
-}
-
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -184,17 +67,11 @@ function StyleBook( {
 	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
-			getCategories()
-				.filter( ( category ) =>
-					examples.some(
-						( example ) => example.category === category.slug
-					)
+			getTopLevelStyleBookCategories().filter( ( category ) =>
+				examples.some(
+					( example ) => example.category === category.slug
 				)
-				.map( ( category ) => ( {
-					name: category.slug,
-					title: category.title,
-					icon: category.icon,
-				} ) ),
+			),
 		[ examples ]
 	);
 	const { base: baseConfig } = useContext( GlobalStylesContext );
@@ -245,24 +122,26 @@ function StyleBook( {
 				{ showTabs ? (
 					<div className="edit-site-style-book__tabs">
 						<Tabs>
-							<Tabs.TabList>
-								{ tabs.map( ( tab ) => (
-									<Tabs.Tab
-										tabId={ tab.name }
-										key={ tab.name }
-									>
-										{ tab.title }
-									</Tabs.Tab>
-								) ) }
-							</Tabs.TabList>
+							<div className="edit-site-style-book__tablist-container">
+								<Tabs.TabList>
+									{ tabs.map( ( tab ) => (
+										<Tabs.Tab
+											tabId={ tab.slug }
+											key={ tab.slug }
+										>
+											{ tab.title }
+										</Tabs.Tab>
+									) ) }
+								</Tabs.TabList>
+							</div>
 							{ tabs.map( ( tab ) => (
 								<Tabs.TabPanel
-									key={ tab.name }
-									tabId={ tab.name }
+									key={ tab.slug }
+									tabId={ tab.slug }
 									focusable={ false }
 								>
 									<StyleBookBody
-										category={ tab.name }
+										category={ tab.slug }
 										examples={ examples }
 										isSelected={ isSelected }
 										onSelect={ onSelect }
@@ -329,10 +208,6 @@ const StyleBookBody = ( {
 		readonly: true,
 	};
 
-	const buttonModeStyles = onClick
-		? 'body { cursor: pointer; } body * { pointer-events: none; }'
-		: '';
-
 	return (
 		<Iframe
 			className={ clsx( 'edit-site-style-book__iframe', {
@@ -345,14 +220,9 @@ const StyleBookBody = ( {
 		>
 			<EditorStyles styles={ settings.styles } />
 			<style>
-				{
-					// Forming a "block formatting context" to prevent margin collapsing.
-					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-					`.is-root-container { display: flow-root; }
-						body { position: relative; padding: 32px !important; }` +
-						STYLE_BOOK_IFRAME_STYLES +
-						buttonModeStyles
-				}
+				{ STYLE_BOOK_IFRAME_STYLES }
+				{ !! onClick &&
+					'body { cursor: pointer; } body * { pointer-events: none; }' }
 			</style>
 			<Examples
 				className={ clsx( 'edit-site-style-book__examples', {
@@ -379,6 +249,16 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
+		const categoryDefinition = category
+			? getTopLevelStyleBookCategories().find(
+					( _category ) => _category.slug === category
+			  )
+			: null;
+
+		const filteredExamples = categoryDefinition
+			? getExamplesByCategory( categoryDefinition, examples )
+			: { examples };
+
 		return (
 			<Composite
 				orientation="vertical"
@@ -386,11 +266,8 @@ const Examples = memo(
 				aria-label={ label }
 				role="grid"
 			>
-				{ examples
-					.filter( ( example ) =>
-						category ? example.category === category : true
-					)
-					.map( ( example ) => (
+				{ !! filteredExamples?.examples?.length &&
+					filteredExamples.examples.map( ( example ) => (
 						<Example
 							key={ example.name }
 							id={ `example-${ example.name }` }
@@ -402,11 +279,47 @@ const Examples = memo(
 							} }
 						/>
 					) ) }
+				{ !! filteredExamples?.subcategories?.length &&
+					filteredExamples.subcategories.map( ( subcategory ) => (
+						<Composite.Group
+							className="edit-site-style-book__subcategory"
+							key={ `subcategory-${ subcategory.slug }` }
+						>
+							<Composite.GroupLabel>
+								<h2 className="edit-site-style-book__subcategory-title">
+									{ subcategory.title }
+								</h2>
+							</Composite.GroupLabel>
+							<Subcategory
+								examples={ subcategory.examples }
+								isSelected={ isSelected }
+								onSelect={ onSelect }
+							/>
+						</Composite.Group>
+					) ) }
 			</Composite>
 		);
 	}
 );
 
+const Subcategory = ( { examples, isSelected, onSelect } ) => {
+	return (
+		!! examples?.length &&
+		examples.map( ( example ) => (
+			<Example
+				key={ example.name }
+				id={ `example-${ example.name }` }
+				title={ example.title }
+				blocks={ example.blocks }
+				isSelected={ isSelected( example.name ) }
+				onClick={ () => {
+					onSelect?.( example.name );
+				} }
+			/>
+		) )
+	);
+};
+
 const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss
index ab66ec288da310..3e0c6466438a22 100644
--- a/packages/edit-site/src/components/style-book/style.scss
+++ b/packages/edit-site/src/components/style-book/style.scss
@@ -17,12 +17,16 @@
 	}
 }
 
-.edit-site-style-book__tabs {
-	[role="tablist"] {
-		background: $white;
-		color: $gray-900;
-	}
+.edit-site-style-book__tablist-container {
+	background: $white;
+	width: 100%;
+	padding-right: 56px;
+	display: flex;
+	position: absolute;
+	z-index: 1;
+}
 
+.edit-site-style-book__tabs {
 	[role="tabpanel"] {
 		bottom: 0;
 		left: 0;
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
new file mode 100644
index 00000000000000..5629689e260f89
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/test/categories.js
@@ -0,0 +1,171 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getExamplesByCategory,
+	getTopLevelStyleBookCategories,
+} from '../categories';
+import { STYLE_BOOK_CATEGORIES } from '../constants';
+
+jest.mock( '@wordpress/blocks', () => {
+	return {
+		getCategories() {
+			return [
+				{
+					slug: 'text',
+					title: 'Text Registered',
+					icon: 'text',
+				},
+				{
+					slug: 'design',
+					title: 'Design Registered',
+					icon: 'design',
+				},
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			];
+		},
+	};
+} );
+
+// Fixtures
+const exampleThemeBlocks = [
+	{
+		name: 'core/post-content',
+		title: 'Post Content',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-terms',
+		title: 'Post Terms',
+		category: 'theme',
+	},
+	{
+		name: 'core/home-link',
+		title: 'Home Link',
+		category: 'design',
+	},
+	{
+		name: 'custom/colors',
+		title: 'Colors',
+		category: 'colors',
+	},
+	{
+		name: 'core/site-logo',
+		title: 'Site Logo',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-title',
+		title: 'Site Title',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-tagline',
+		title: 'Site Tagline',
+		category: 'theme',
+	},
+	{
+		name: 'core/group',
+		title: 'Group',
+		category: 'design',
+	},
+	{
+		name: 'core/comments-pagination-numbers',
+		title: 'Comments Page Numbers',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-featured-image',
+		title: 'Featured Image',
+		category: 'theme',
+	},
+];
+
+describe( 'utils', () => {
+	describe( 'getTopLevelStyleBookCategories', () => {
+		it( 'returns theme subcategories examples', () => {
+			expect( getTopLevelStyleBookCategories() ).toEqual( [
+				...STYLE_BOOK_CATEGORIES,
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			] );
+		} );
+	} );
+
+	describe( 'getExamplesByCategory', () => {
+		it( 'returns theme subcategories examples', () => {
+			const themeCategory = STYLE_BOOK_CATEGORIES.find(
+				( category ) => category.slug === 'theme'
+			);
+			const themeCategoryExamples = getExamplesByCategory(
+				themeCategory,
+				exampleThemeBlocks
+			);
+
+			expect( themeCategoryExamples.slug ).toEqual( 'theme' );
+
+			const siteIdentity = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'site-identity'
+			);
+			expect( siteIdentity ).toEqual( {
+				title: 'Site Identity',
+				slug: 'site-identity',
+				examples: [
+					{
+						name: 'core/site-logo',
+						title: 'Site Logo',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-title',
+						title: 'Site Title',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-tagline',
+						title: 'Site Tagline',
+						category: 'theme',
+					},
+				],
+			} );
+
+			const design = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'design'
+			);
+			expect( design ).toEqual( {
+				title: 'Design',
+				slug: 'design',
+				examples: [
+					{
+						name: 'core/group',
+						title: 'Group',
+						category: 'design',
+					},
+				],
+			} );
+
+			const posts = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'posts'
+			);
+
+			expect( posts ).toEqual( {
+				title: 'Posts',
+				slug: 'posts',
+				examples: [
+					{
+						name: 'core/post-terms',
+						title: 'Post Terms',
+						category: 'theme',
+					},
+				],
+			} );
+		} );
+	} );
+} );
diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts
new file mode 100644
index 00000000000000..4729b38b1b2bb1
--- /dev/null
+++ b/packages/edit-site/src/components/style-book/types.ts
@@ -0,0 +1,27 @@
+type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks?: Block[];
+};
+
+export type StyleBookCategory = {
+	title: string;
+	slug: string;
+	blocks?: string[];
+	exclude?: string[];
+	subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+	name: string;
+	title: string;
+	category: string;
+	blocks: Block | Block[];
+};
+
+export type CategoryExamples = {
+	title: string;
+	slug: string;
+	examples?: BlockExample[];
+	subcategories?: CategoryExamples[];
+};
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 3f7bbea0be7d25..ddef4a71d0a915 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -213,7 +213,7 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 				version: '6.7',
 			}
 		);
-		return unlock( select( editorStore ) ).getInsertionPoint();
+		return unlock( select( editorStore ) ).getInserter();
 	}
 );
 
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index f1cbcef0667d7c..6115fc42560f82 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index d24857f0f8a0ce..f0cc613aa40fc2 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 6e5d8de8142f42..7bd3c41a6a22ad 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -82,6 +82,7 @@
 	padding-right: $grid-unit-10;
 	padding-left: $grid-unit-20;
 	overflow: hidden;
+	height: $header-height;
 }
 
 .edit-widgets-header__title {
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index f08ee81a0d19cc..79a47b18c7bf12 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -28,7 +28,7 @@ const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( {
 
 const BLOCK_INSPECTOR_IDENTIFIER = 'edit-widgets/block-inspector';
 
-// Widget areas were one called block areas, so use 'edit-widgets/block-areas'
+// Widget areas were once called block areas, so use 'edit-widgets/block-areas'
 // for backwards compatibility.
 const WIDGET_AREAS_IDENTIFIER = 'edit-widgets/block-areas';
 
@@ -192,10 +192,10 @@ export default function Sidebar() {
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	// `newSelectedTabId` could technically be falsey if no tab is selected (i.e.
+	// `newSelectedTabId` could technically be falsy if no tab is selected (i.e.
 	// the initial render) or when we don't want a tab displayed (i.e. the
 	// sidebar is closed). These cases should both be covered by the `!!` check
-	// below, so we shouldn't need any additional falsey handling.
+	// below, so we shouldn't need any additional falsy handling.
 	const onTabSelect = useCallback(
 		( newSelectedTabId ) => {
 			if ( !! newSelectedTabId ) {
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index b380c2fd296d55..6f31c1735021f6 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.8.0 (2024-09-19)
+
 ## 14.7.0 (2024-09-05)
 
 ## 14.6.0 (2024-08-21)
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 2e01aff3a0aa5f..29cbffcfb72221 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.7.0",
+	"version": "14.8.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/src/bindings/api.js b/packages/editor/src/bindings/api.js
index 2cfed5168a143e..84003fab7eaf7b 100644
--- a/packages/editor/src/bindings/api.js
+++ b/packages/editor/src/bindings/api.js
@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import {
-	privateApis as blocksPrivateApis,
 	store as blocksStore,
+	registerBlockBindingsSource,
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
 
@@ -25,7 +25,6 @@ import { unlock } from '../lock-unlock';
  * ```
  */
 export function registerCoreBlockBindingsSources() {
-	const { registerBlockBindingsSource } = unlock( blocksPrivateApis );
 	registerBlockBindingsSource( patternOverrides );
 	registerBlockBindingsSource( postMeta );
 }
diff --git a/packages/editor/src/bindings/pattern-overrides.js b/packages/editor/src/bindings/pattern-overrides.js
index 88c6c73bdc61c1..baa1f72f47694b 100644
--- a/packages/editor/src/bindings/pattern-overrides.js
+++ b/packages/editor/src/bindings/pattern-overrides.js
@@ -7,9 +7,9 @@ const CONTENT = 'content';
 
 export default {
 	name: 'core/pattern-overrides',
-	getValues( { registry, clientId, context, bindings } ) {
+	getValues( { select, clientId, context, bindings } ) {
 		const patternOverridesContent = context[ 'pattern/overrides' ];
-		const { getBlockAttributes } = registry.select( blockEditorStore );
+		const { getBlockAttributes } = select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
 
 		const overridesValues = {};
@@ -32,9 +32,9 @@ export default {
 		}
 		return overridesValues;
 	},
-	setValues( { registry, clientId, bindings } ) {
+	setValues( { select, dispatch, clientId, bindings } ) {
 		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
-			registry.select( blockEditorStore );
+			select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
 		const blockName = currentBlockAttributes?.metadata?.name;
 		if ( ! blockName ) {
@@ -61,12 +61,10 @@ export default {
 			const syncBlocksWithSameName = ( blocks ) => {
 				for ( const block of blocks ) {
 					if ( block.attributes?.metadata?.name === blockName ) {
-						registry
-							.dispatch( blockEditorStore )
-							.updateBlockAttributes(
-								block.clientId,
-								attributes
-							);
+						dispatch( blockEditorStore ).updateBlockAttributes(
+							block.clientId,
+							attributes
+						);
 					}
 					syncBlocksWithSameName( block.innerBlocks );
 				}
@@ -77,27 +75,26 @@ export default {
 		}
 		const currentBindingValue =
 			getBlockAttributes( patternClientId )?.[ CONTENT ];
-		registry
-			.dispatch( blockEditorStore )
-			.updateBlockAttributes( patternClientId, {
-				[ CONTENT ]: {
-					...currentBindingValue,
-					[ blockName ]: {
-						...currentBindingValue?.[ blockName ],
-						...Object.entries( attributes ).reduce(
-							( acc, [ key, value ] ) => {
-								// TODO: We need a way to represent `undefined` in the serialized overrides.
-								// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
-								// We use an empty string to represent undefined for now until
-								// we support a richer format for overrides and the block bindings API.
-								acc[ key ] = value === undefined ? '' : value;
-								return acc;
-							},
-							{}
-						),
-					},
+
+		dispatch( blockEditorStore ).updateBlockAttributes( patternClientId, {
+			[ CONTENT ]: {
+				...currentBindingValue,
+				[ blockName ]: {
+					...currentBindingValue?.[ blockName ],
+					...Object.entries( attributes ).reduce(
+						( acc, [ key, value ] ) => {
+							// TODO: We need a way to represent `undefined` in the serialized overrides.
+							// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
+							// We use an empty string to represent undefined for now until
+							// we support a richer format for overrides and the block bindings API.
+							acc[ key ] = value === undefined ? '' : value;
+							return acc;
+						},
+						{}
+					),
 				},
-			} );
+			},
+		} );
 	},
 	canUserEditValue: () => true,
 };
diff --git a/packages/editor/src/bindings/post-meta.js b/packages/editor/src/bindings/post-meta.js
index 7618ba6c360236..9198ac0fe41e1e 100644
--- a/packages/editor/src/bindings/post-meta.js
+++ b/packages/editor/src/bindings/post-meta.js
@@ -7,35 +7,99 @@ import { store as coreDataStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Gets a list of post meta fields with their values and labels
+ * to be consumed in the needed callbacks.
+ * If the value is not available based on context, like in templates,
+ * it falls back to the default value, label, or key.
+ *
+ * @param {Object} select  The select function from the data store.
+ * @param {Object} context The context provided.
+ * @return {Object} List of post meta fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ *     field_1_key: {
+ *         label: 'Field 1 Label',
+ *         value: 'Field 1 Value',
+ *     },
+ *     field_2_key: {
+ *         label: 'Field 2 Label',
+ *         value: 'Field 2 Value',
+ *     },
+ *     ...
+ * }
+ * ```
+ */
+function getPostMetaFields( select, context ) {
+	const { getEditedEntityRecord } = select( coreDataStore );
+	const { getRegisteredPostMeta } = unlock( select( coreDataStore ) );
+
+	let entityMetaValues;
+	// Try to get the current entity meta values.
+	if ( context?.postType && context?.postId ) {
+		entityMetaValues = getEditedEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId
+		).meta;
+	}
+
+	const registeredFields = getRegisteredPostMeta( context?.postType );
+	const metaFields = {};
+	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+		// Don't include footnotes or private fields.
+		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+			metaFields[ key ] = {
+				label: props.title || key,
+				value:
+					// When using the entity value, an empty string IS a valid value.
+					entityMetaValues?.[ key ] ??
+					// When using the default, an empty string IS NOT a valid value.
+					( props.default || undefined ),
+			};
+		}
+	} );
+
+	if ( ! Object.keys( metaFields || {} ).length ) {
+		return null;
+	}
+
+	return metaFields;
+}
 
 export default {
 	name: 'core/post-meta',
-	getValues( { registry, context, bindings } ) {
-		const meta = registry
-			.select( coreDataStore )
-			.getEditedEntityRecord(
-				'postType',
-				context?.postType,
-				context?.postId
-			)?.meta;
+	getValues( { select, context, bindings } ) {
+		const metaFields = getPostMetaFields( select, context );
+
 		const newValues = {};
 		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			// Use the key if the value is not set.
-			newValues[ attributeName ] =
-				meta?.[ source.args.key ] ?? source.args.key;
+			// Use the value, the field label, or the field key.
+			const fieldKey = source.args.key;
+			const { value: fieldValue, label: fieldLabel } =
+				metaFields?.[ fieldKey ] || {};
+			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
 		}
 		return newValues;
 	},
-	setValues( { registry, context, bindings } ) {
+	setValues( { dispatch, context, bindings } ) {
 		const newMeta = {};
 		Object.values( bindings ).forEach( ( { args, newValue } ) => {
 			newMeta[ args.key ] = newValue;
 		} );
-		registry
-			.dispatch( coreDataStore )
-			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+
+		dispatch( coreDataStore ).editEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId,
+			{
 				meta: newMeta,
-			} );
+			}
+		);
 	},
 	canUserEditValue( { select, context, args } ) {
 		// Lock editing in query loop.
@@ -51,14 +115,9 @@ export default {
 			return false;
 		}
 
-		// Check that the custom field is not protected and available in the REST API.
+		const fieldValue = getPostMetaFields( select, context )?.[ args.key ]
+			?.value;
 		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
-		const fieldValue = select( coreDataStore ).getEntityRecord(
-			'postType',
-			postType,
-			context?.postId
-		)?.meta?.[ args.key ];
-
 		if ( fieldValue === undefined ) {
 			return false;
 		}
@@ -81,24 +140,7 @@ export default {
 
 		return true;
 	},
-	getFieldsList( { registry, context } ) {
-		const metaFields = registry
-			.select( coreDataStore )
-			.getEditedEntityRecord(
-				'postType',
-				context?.postType,
-				context?.postId
-			).meta;
-
-		if ( ! metaFields || ! Object.keys( metaFields ).length ) {
-			return null;
-		}
-
-		// Remove footnotes or private keys from the list of fields.
-		return Object.fromEntries(
-			Object.entries( metaFields ).filter(
-				( [ key ] ) => key !== 'footnotes' && key.charAt( 0 ) !== '_'
-			)
-		);
+	getFieldsList( { select, context } ) {
+		return getPostMetaFields( select, context );
 	},
 };
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
index fcf7adfa77635c..af0e9b30ae83b4 100644
--- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -17,21 +17,20 @@ import { __, _x } from '@wordpress/i18n';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
 
 function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const postContentBlocks = usePostContentBlocks();
 	const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
 		( select ) => {
 			const {
-				getBlockEditingMode,
 				getBlockParentsByBlockName,
 				getSettings,
 				getBlockAttributes,
+				getBlockParents,
 			} = select( blockEditorStore );
-			const contentOnly =
-				getBlockEditingMode( clientId ) === 'contentOnly';
-			if ( ! contentOnly ) {
-				return {};
-			}
+			const { getCurrentTemplateId, getRenderingMode } =
+				select( editorStore );
 			const patternParent = getBlockParentsByBlockName(
 				clientId,
 				'core/block',
@@ -45,19 +44,20 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					'wp_block',
 					getBlockAttributes( patternParent ).ref
 				);
-			} else {
-				const { getCurrentTemplateId } = select( editorStore );
-				const templateId = getCurrentTemplateId();
-				const { getContentLockingParent } = unlock(
-					select( blockEditorStore )
+			} else if (
+				getRenderingMode() === 'template-locked' &&
+				! getBlockParents( clientId ).some( ( parent ) =>
+					postContentBlocks.includes( parent )
+				)
+			) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					getCurrentTemplateId()
 				);
-				if ( ! getContentLockingParent( clientId ) && templateId ) {
-					record = select( coreStore ).getEntityRecord(
-						'postType',
-						'wp_template',
-						templateId
-					);
-				}
+			}
+			if ( ! record ) {
+				return {};
 			}
 			const _canEditTemplates = select( coreStore ).canUser( 'create', {
 				kind: 'postType',
@@ -70,7 +70,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					getSettings().onNavigateToEntityRecord,
 			};
 		},
-		[ clientId ]
+		[ clientId, postContentBlocks ]
 	);
 
 	if ( ! entity ) {
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 54121652bbf131..6a8c20c8d70551 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -38,10 +38,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		listViewShortcut,
 		inserterSidebarToggleRef,
 		listViewToggleRef,
-		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
 		const {
 			isListViewOpened,
@@ -60,7 +58,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			),
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
-			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
@@ -137,7 +134,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && ! hasFixedToolbar && (
+						{ isLargeViewport && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 284c9772d7bd6f..0709b91175712d 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -32,6 +32,8 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorContentSlotFill from './content-slot-fill';
 
+import { unlock } from '../../lock-unlock';
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
 	header: __( 'Editor top bar' ),
@@ -71,12 +73,13 @@ export default function EditorInterface( {
 		nextShortcut,
 		showBlockBreadcrumbs,
 		documentLabel,
-		blockEditorMode,
+		isZoomOut,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
 
 		return {
 			mode: select( editorStore ).getEditorMode(),
@@ -94,8 +97,7 @@ export default function EditorInterface( {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			blockEditorMode:
-				select( blockEditorStore ).__unstableGetEditorMode(),
+			isZoomOut: _isZoomOut(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -139,6 +141,7 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
+						isEditorIframed={ ! disableIframe }
 					/>
 				)
 			}
@@ -205,7 +208,7 @@ export default function EditorInterface( {
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
 				isRichEditingEnabled &&
-				blockEditorMode !== 'zoom-out' &&
+				! isZoomOut &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 8c0d59573a44d9..ba84ef2b392f5b 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -128,11 +128,21 @@ export function EntitiesSavedStatesExtensible( {
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
+					size="compact"
 					disabled={ ! saveEnabled }
 					accessibleWhenDisabled
 					onClick={ () =>
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
 				>
 					{ saveLabel }
 				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 981a0d92e5ff6b..e2c320678c322a 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,8 +1,8 @@
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 	height: $header-height;
 	border-bottom: $border-width solid $gray-300;
 }
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 8268997d1f1def..6f2d8177056cb1 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -46,24 +46,38 @@ export function mergeBaseAndUserConfigs( base, user ) {
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution, canUser } =
-				select( coreStore );
+			const {
+				getEntityRecord,
+				getEditedEntityRecord,
+				hasFinishedResolution,
+				canUser,
+			} = select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
-			const record =
-				_globalStylesId &&
-				canUser( 'read', {
-					kind: 'root',
-					name: 'globalStyles',
-					id: _globalStylesId,
-				} )
-					? getEditedEntityRecord(
-							'root',
-							'globalStyles',
-							_globalStylesId
-					  )
-					: undefined;
+			let record;
+			const userCanEditGlobalStyles = canUser( 'update', {
+				kind: 'root',
+				name: 'globalStyles',
+				id: _globalStylesId,
+			} );
+
+			if ( _globalStylesId ) {
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
 
 			let hasResolved = false;
 			if (
@@ -71,13 +85,22 @@ function useGlobalStylesUserConfig() {
 					'__experimentalGetCurrentGlobalStylesId'
 				)
 			) {
-				hasResolved = _globalStylesId
-					? hasFinishedResolution( 'getEditedEntityRecord', [
-							'root',
-							'globalStyles',
-							_globalStylesId,
-					  ] )
-					: true;
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
 			}
 
 			return {
@@ -145,20 +168,11 @@ function useGlobalStylesUserConfig() {
 }
 
 function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		const {
-			__experimentalGetCurrentThemeBaseGlobalStyles,
-			getCurrentTheme,
-			canUser,
-		} = select( coreStore );
-		const currentTheme = getCurrentTheme();
-
-		return currentTheme &&
-			canUser( 'read', 'global-styles/themes', currentTheme.stylesheet )
-			? __experimentalGetCurrentThemeBaseGlobalStyles()
-			: undefined;
-	}, [] );
-
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
 	return [ !! baseConfig, baseConfig ];
 }
 
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index b1b8f2fc1ee32b..f49ada48997ce5 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -7,7 +7,6 @@ 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
@@ -47,10 +46,8 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
+	isEditorIframed,
 } ) {
-	const zoomOutExperimentEnabled =
-		window.__experimentalEnableZoomOutExperiment;
-
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
@@ -60,34 +57,40 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		isNestedEntity,
+		postType,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
 			getEditorMode,
 			getEditorSettings,
+			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
+			postType: getCurrentPostType(),
 			isTextEditor: getEditorMode() === 'text',
 			isPublishSidebarOpened: _isPublishSidebarOpened(),
 			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			isNestedEntity:
 				!! getEditorSettings().onNavigateToPreviousEntityRecord,
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
+	const canBeZoomedOut = [ 'post', 'page', 'wp_template' ].includes(
+		postType
+	);
+
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
 	const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar;
 	const hasBackButton = useHasBackButton();
-
-	// The edit-post-header classname is only kept for backward compatibilty
-	// as some plugins might be relying on its presence.
+	/*
+	 * The edit-post-header classname is only kept for backward compatability
+	 * as some plugins might be relying on its presence.
+	 */
 	return (
 		<div className="editor-header edit-post-header">
 			{ hasBackButton && (
@@ -129,13 +132,20 @@ function Header( {
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
+					/*
+					 * This button isn't completely hidden by the publish sidebar.
+					 * We can't hide the whole toolbar when the publish sidebar is open because
+					 * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					 * We track that DOM node to return focus to the PostPublishButtonOrToggle
+					 * when the publish sidebar has been closed.
+					 */
 					<PostSavedState forceIsDirty={ forceIsDirty } />
 				) }
+
+				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
+					<ZoomOutToggle />
+				) }
+
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
 					disabled={ isNestedEntity }
@@ -146,8 +156,6 @@ function Header( {
 				/>
 				<PostViewLink />
 
-				{ zoomOutExperimentEnabled && <ZoomOutToggle /> }
-
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index b98770b7afe8fa..5cace042fae58c 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -24,13 +24,13 @@ export default function InserterSidebar() {
 	const {
 		blockSectionRootClientId,
 		inserterSidebarToggleRef,
-		insertionPoint,
+		inserter,
 		showMostUsedBlocks,
 		sidebarIsOpened,
 	} = useSelect( ( select ) => {
 		const {
 			getInserterSidebarToggleRef,
-			getInsertionPoint,
+			getInserter,
 			isPublishSidebarOpened,
 		} = unlock( select( editorStore ) );
 		const {
@@ -52,7 +52,7 @@ export default function InserterSidebar() {
 		};
 		return {
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
-			insertionPoint: getInsertionPoint(),
+			inserter: getInserter(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
 			blockSectionRootClientId: getBlockSectionRootClientId(),
 			sidebarIsOpened: !! (
@@ -88,14 +88,11 @@ export default function InserterSidebar() {
 				showMostUsedBlocks={ showMostUsedBlocks }
 				showInserterHelpPanel
 				shouldFocusBlock={ isMobileViewport }
-				rootClientId={
-					blockSectionRootClientId ?? insertionPoint.rootClientId
-				}
-				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
-				onSelect={ insertionPoint.onSelect }
-				__experimentalInitialTab={ insertionPoint.tab }
-				__experimentalInitialCategory={ insertionPoint.category }
-				__experimentalFilterValue={ insertionPoint.filterValue }
+				rootClientId={ blockSectionRootClientId }
+				onSelect={ inserter.onSelect }
+				__experimentalInitialTab={ inserter.tab }
+				__experimentalInitialCategory={ inserter.category }
+				__experimentalFilterValue={ inserter.filterValue }
 				onPatternCategorySelection={
 					sidebarIsOpened
 						? () => disableComplementaryArea( 'core' )
diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
index b9c0177e30fc42..56a954cadffb69 100644
--- a/packages/editor/src/components/plugin-sidebar/index.js
+++ b/packages/editor/src/components/plugin-sidebar/index.js
@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { ComplementaryArea } from '@wordpress/interface';
 
 /**
@@ -77,12 +76,9 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
+	const { postTitle } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 		};
 	}, [] );
 	return (
@@ -91,7 +87,6 @@ export default function PluginSidebar( { className, ...props } ) {
 			className="editor-sidebar"
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
-			toggleShortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
index f76c586850500e..53e0c645f6f069 100644
--- a/packages/editor/src/components/post-panel-row/style.scss
+++ b/packages/editor/src/components/post-panel-row/style.scss
@@ -28,6 +28,7 @@
 		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
+		height: auto;
 		min-height: $button-size-compact;
 	}
 
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 0460b27b616e81..71e18a4d6a9c82 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -17,7 +17,6 @@ const noop = () => {};
 export class PostPublishButton extends Component {
 	constructor( props ) {
 		super( props );
-		this.buttonNode = createRef();
 
 		this.createOnClick = this.createOnClick.bind( this );
 		this.closeEntitiesSavedStates =
@@ -28,21 +27,6 @@ export class PostPublishButton extends Component {
 		};
 	}
 
-	componentDidMount() {
-		if ( this.props.focusOnMount ) {
-			// This timeout is necessary to make sure the `useEffect` hook of
-			// `useFocusReturn` gets the correct element (the button that opens the
-			// PostPublishPanel) otherwise it will get this button.
-			this.timeoutID = setTimeout( () => {
-				this.buttonNode.current.focus();
-			}, 0 );
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeoutID );
-	}
-
 	createOnClick( callback ) {
 		return ( ...args ) => {
 			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
@@ -182,7 +166,6 @@ export class PostPublishButton extends Component {
 		return (
 			<>
 				<Button
-					ref={ this.buttonNode }
 					{ ...componentProps }
 					className={ `${ componentProps.className } editor-post-publish-button__button` }
 					size="compact"
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index f0e9a55eae0609..6a2d393e20c4ba 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import {
 	Button,
 	Spinner,
@@ -27,6 +27,20 @@ export class PostPublishPanel extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onSubmit = this.onSubmit.bind( this );
+		this.cancelButtonNode = createRef();
+	}
+
+	componentDidMount() {
+		// This timeout is necessary to make sure the `useEffect` hook of
+		// `useFocusReturn` gets the correct element (the button that opens the
+		// PostPublishPanel) otherwise it will get this button.
+		this.timeoutID = setTimeout( () => {
+			this.cancelButtonNode.current.focus();
+		}, 0 );
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -85,15 +99,9 @@ export class PostPublishPanel extends Component {
 						/>
 					) : (
 						<>
-							<div className="editor-post-publish-panel__header-publish-button">
-								<PostPublishButton
-									focusOnMount
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-								/>
-							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									ref={ this.cancelButtonNode }
 									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
@@ -103,6 +111,12 @@ export class PostPublishPanel extends Component {
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
+							<div className="editor-post-publish-panel__header-publish-button">
+								<PostPublishButton
+									onSubmit={ this.onSubmit }
+									forceIsDirty={ forceIsDirty }
+								/>
+							</div>
 						</>
 					) }
 				</div>
diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
index 8c8d757c583399..32ea69c425e0b5 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -98,8 +98,8 @@ function Image( { clientId, alt, url } ) {
 			animate={ { opacity: 1 } }
 			exit={ { opacity: 0, scale: 0 } }
 			style={ {
-				width: '36px',
-				height: '36px',
+				width: '32px',
+				height: '32px',
 				objectFit: 'cover',
 				borderRadius: '2px',
 				cursor: 'pointer',
@@ -256,7 +256,7 @@ export default function MaybeUploadMediaPanel() {
 					<Spinner />
 				) : (
 					<Button
-						__next40pxDefaultSize
+						size="compact"
 						variant="primary"
 						onClick={ uploadImages }
 					>
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 9892cf5430f9a2..7b075717651781 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -68,12 +68,12 @@
 }
 
 .editor-post-publish-panel__header-publish-button {
-	padding-right: $grid-unit-05;
+	padding-left: $grid-unit-05;
 	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
-	padding-left: $grid-unit-05;
+	padding-right: $grid-unit-05;
 }
 
 .editor-post-publish-panel__header-published {
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 1dd75fffaa7b6a..b074159ac423d4 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -433,24 +433,24 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -586,24 +586,24 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -783,24 +783,24 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
index 1d3050e7e3dd6b..c2bf038875354d 100644
--- a/packages/editor/src/components/post-status/index.js
+++ b/packages/editor/src/components/post-status/index.js
@@ -173,6 +173,7 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
+							className="editor-post-status__toggle"
 							variant="tertiary"
 							size="compact"
 							onClick={ onToggle }
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
index c601d887d68c7f..670dc5fc35999a 100644
--- a/packages/editor/src/components/post-status/style.scss
+++ b/packages/editor/src/components/post-status/style.scss
@@ -4,6 +4,11 @@
 	&.is-read-only {
 		padding: 6px 12px;
 	}
+
+	.editor-post-status__toggle.editor-post-status__toggle {
+		padding-top: $grid-unit-05;
+		padding-bottom: $grid-unit-05;
+	}
 }
 
 .editor-change-status__password-fieldset,
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index ecc5bc610a3027..0fbb2beb62665e 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -26,7 +26,9 @@ import { ActionItem } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import PostPreviewButton from '../post-preview-button';
+import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
@@ -44,6 +46,14 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	const handleDevicePreviewChange = ( newDeviceType ) => {
+		setDeviceType( newDeviceType );
+		__unstableSetEditorMode( 'edit' );
+		resetZoomLevel();
+	};
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
@@ -113,7 +123,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 						<MenuItemsChoice
 							choices={ choices }
 							value={ deviceType }
-							onSelect={ setDeviceType }
+							onSelect={ handleDevicePreviewChange }
 						/>
 					</MenuGroup>
 					{ isTemplate && (
diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
index 9abb0e14079d5e..ae4fd1075fc261 100644
--- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -3,52 +3,32 @@
  */
 import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useMemo } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const POST_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import usePostContentBlocks from './use-post-content-blocks';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	const contentOnlyBlockTypes = useMemo(
-		() => [
-			...applyFilters(
-				'editor.postContentBlockTypes',
-				POST_CONTENT_BLOCK_TYPES
-			),
-			'core/template-part',
-		],
-		[]
-	);
-
-	// Note that there are two separate subscriptions because the result for each
-	// returns a new array.
-	const contentOnlyIds = useSelect(
+	const contentOnlyIds = usePostContentBlocks();
+	const templateParts = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( 'core/template-part' );
+	}, [] );
+	const disabledIds = useSelect(
 		( select ) => {
-			const { getPostBlocksByName } = unlock( select( editorStore ) );
-			return getPostBlocksByName( contentOnlyBlockTypes );
+			const { getBlockOrder } = select( blockEditorStore );
+			return templateParts.flatMap( ( clientId ) =>
+				getBlockOrder( clientId )
+			);
 		},
-		[ contentOnlyBlockTypes ]
+		[ templateParts ]
 	);
-	const disabledIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
-		return getBlocksByName( 'core/template-part' ).flatMap( ( clientId ) =>
-			getBlockOrder( clientId )
-		);
-	}, [] );
 
 	const registry = useRegistry();
 
@@ -61,6 +41,9 @@ export default function DisableNonPageContentBlocks() {
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
+			for ( const clientId of templateParts ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
 			for ( const clientId of disabledIds ) {
 				setBlockEditingMode( clientId, 'disabled' );
 			}
@@ -72,12 +55,15 @@ export default function DisableNonPageContentBlocks() {
 				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+				for ( const clientId of templateParts ) {
+					unsetBlockEditingMode( clientId );
+				}
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [ contentOnlyIds, disabledIds, registry ] );
+	}, [ templateParts, contentOnlyIds, disabledIds, registry ] );
 
 	return null;
 }
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 11b1478d58434a..0c45dbc5e7199c 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -188,26 +188,19 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			const postContext = {};
 			// If it is a template, try to inherit the post type from the slug.
 			if ( post.type === 'wp_template' ) {
-				if ( ! post.is_custom ) {
-					const [ kind ] = post.slug.split( '-' );
-					switch ( kind ) {
-						case 'page':
-							postContext.postType = 'page';
-							break;
-						case 'single':
-							// Infer the post type from the slug.
-							const postTypesSlugs =
-								postTypes?.map( ( entity ) => entity.slug ) ||
-								[];
-							const match = post.slug.match(
-								`^single-(${ postTypesSlugs.join(
-									'|'
-								) })(?:-.+)?$`
-							);
-							if ( match ) {
-								postContext.postType = match[ 1 ];
-							}
-							break;
+				if ( post.slug === 'page' ) {
+					postContext.postType = 'page';
+				} else if ( post.slug === 'single' ) {
+					postContext.postType = 'post';
+				} else if ( post.slug.split( '-' )[ 0 ] === 'single' ) {
+					// If the slug is single-{postType}, infer the post type from the slug.
+					const postTypesSlugs =
+						postTypes?.map( ( entity ) => entity.slug ) || [];
+					const match = post.slug.match(
+						`^single-(${ postTypesSlugs.join( '|' ) })(?:-.+)?$`
+					);
+					if ( match ) {
+						postContext.postType = match[ 1 ];
 					}
 				}
 			} else if (
diff --git a/packages/editor/src/components/provider/use-post-content-blocks.js b/packages/editor/src/components/provider/use-post-content-blocks.js
new file mode 100644
index 00000000000000..bdd277157e47e0
--- /dev/null
+++ b/packages/editor/src/components/provider/use-post-content-blocks.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+export default function usePostContentBlocks() {
+	const contentOnlyBlockTypes = useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		],
+		[]
+	);
+
+	// Note that there are two separate subscriptions because the result for each
+	// returns a new array.
+	const contentOnlyIds = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName( contentOnlyBlockTypes );
+		},
+		[ contentOnlyBlockTypes ]
+	);
+
+	return contentOnlyIds;
+}
diff --git a/packages/editor/src/components/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
index dbba31f6f998ba..ccd903d0f3a172 100644
--- a/packages/editor/src/components/resizable-editor/resize-handle.js
+++ b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -15,6 +15,11 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
+		if ( keyCode !== LEFT && keyCode !== RIGHT ) {
+			return;
+		}
+		event.preventDefault();
+
 		if (
 			( direction === 'left' && keyCode === LEFT ) ||
 			( direction === 'right' && keyCode === RIGHT )
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 2ff115272d614b..88d2dac8ffd77c 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -174,17 +174,19 @@ function VisualEditor( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
-		isZoomOutMode,
+		isZoomedOut,
 	} = useSelect( ( select ) => {
-		const { getSettings, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getSettings, isZoomOut: _isZoomOut } = unlock(
+			select( blockEditorStore )
+		);
+
 		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomedOut: _isZoomOut(),
 		};
 	}, [] );
 
@@ -336,7 +338,7 @@ function VisualEditor( {
 	] );
 
 	const zoomOutProps =
-		isZoomOutMode && ! isTabletViewport
+		isZoomedOut && ! isTabletViewport
 			? {
 					scale: 'default',
 					frameSize: '48px',
@@ -355,7 +357,7 @@ function VisualEditor( {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
-		! isZoomOutMode;
+		! isZoomedOut;
 	const shouldIframe =
 		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
index e8c7b1e50510ab..b89bf15546f0d8 100644
--- a/packages/editor/src/components/zoom-out-toggle/index.js
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -7,26 +7,43 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { square as zoomOutIcon } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
 
 const ZoomOutToggle = () => {
-	const { isZoomOutMode } = useSelect( ( select ) => ( {
-		isZoomOutMode:
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
+		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		showIconLabels: select( preferencesStore ).get(
+			'core',
+			'showIconLabels'
+		),
 	} ) );
 
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	const handleZoomOut = () => {
-		__unstableSetEditorMode( isZoomOutMode ? 'edit' : 'zoom-out' );
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 50 );
+		}
+		__unstableSetEditorMode( isZoomOut ? 'edit' : 'zoom-out' );
 	};
 
 	return (
 		<Button
 			onClick={ handleZoomOut }
 			icon={ zoomOutIcon }
-			label={ __( 'Toggle Zoom Out' ) }
-			isPressed={ isZoomOutMode }
+			label={ __( 'Zoom Out' ) }
+			isPressed={ isZoomOut }
 			size="compact"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 };
diff --git a/packages/editor/src/dataviews/actions/delete-post.tsx b/packages/editor/src/dataviews/actions/delete-post.tsx
deleted file mode 100644
index 381c2964f943f6..00000000000000
--- a/packages/editor/src/dataviews/actions/delete-post.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { trash } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import {
-	Button,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-// @ts-ignore
-import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
-import type { Action } from '@wordpress/dataviews';
-import type { StoreDescriptor } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import {
-	isTemplateRemovable,
-	getItemTitle,
-	isTemplateOrTemplatePart,
-} from './utils';
-// @ts-ignore
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import type { Post } from '../types';
-
-const { PATTERN_TYPES } = unlock( patternsPrivateApis );
-
-// This action is used for templates, patterns and template parts.
-// Every other post type uses the similar `trashPostAction` which
-// moves the post to trash.
-const deletePostAction: Action< Post > = {
-	id: 'delete-post',
-	label: __( 'Delete' ),
-	isPrimary: true,
-	icon: trash,
-	isEligible( post ) {
-		if ( isTemplateOrTemplatePart( post ) ) {
-			return isTemplateRemovable( post );
-		}
-		// We can only remove user patterns.
-		return post.type === PATTERN_TYPES.user;
-	},
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { removeTemplates } = unlock(
-			useDispatch( editorStore as StoreDescriptor )
-		);
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ items.length > 1
-						? sprintf(
-								// translators: %d: number of items to delete.
-								_n(
-									'Delete %d item?',
-									'Delete %d items?',
-									items.length
-								),
-								items.length
-						  )
-						: sprintf(
-								// translators: %s: The template or template part's titles
-								__( 'Delete "%s"?' ),
-								getItemTitle( items[ 0 ] )
-						  ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-						__next40pxDefaultSize
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							await removeTemplates( items, {
-								allowUndo: false,
-							} );
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal?.();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-						__next40pxDefaultSize
-					>
-						{ __( 'Delete' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export default deletePostAction;
diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx
deleted file mode 100644
index d0b5521a34833d..00000000000000
--- a/packages/editor/src/dataviews/actions/reset-post.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { backup } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-import { useState } from '@wordpress/element';
-import {
-	Button,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import type { Action } from '@wordpress/dataviews';
-import type { StoreDescriptor } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../store/constants';
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import type { Post, CoreDataError } from '../types';
-import { isTemplateOrTemplatePart, getItemTitle } from './utils';
-
-const resetPost: Action< Post > = {
-	id: 'reset-post',
-	label: __( 'Reset' ),
-	isEligible: ( item ) => {
-		return (
-			isTemplateOrTemplatePart( item ) &&
-			item?.source === TEMPLATE_ORIGINS.custom &&
-			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
-				item?.has_theme_file )
-		);
-	},
-	icon: backup,
-	supportsBulk: true,
-	hideModalHeader: true,
-	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
-		const [ isBusy, setIsBusy ] = useState( false );
-		const { revertTemplate } = unlock(
-			useDispatch( editorStore as StoreDescriptor )
-		);
-		const { saveEditedEntityRecord } = useDispatch( coreStore );
-		const { createSuccessNotice, createErrorNotice } =
-			useDispatch( noticesStore );
-		const onConfirm = async () => {
-			try {
-				for ( const template of items ) {
-					await revertTemplate( template, {
-						allowUndo: false,
-					} );
-					await saveEditedEntityRecord(
-						'postType',
-						template.type,
-						template.id
-					);
-				}
-				createSuccessNotice(
-					items.length > 1
-						? sprintf(
-								/* translators: The number of items. */
-								__( '%s items reset.' ),
-								items.length
-						  )
-						: sprintf(
-								/* translators: The template/part's name. */
-								__( '"%s" reset.' ),
-								getItemTitle( items[ 0 ] )
-						  ),
-					{
-						type: 'snackbar',
-						id: 'revert-template-action',
-					}
-				);
-			} catch ( error ) {
-				let fallbackErrorMessage;
-				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
-					fallbackErrorMessage =
-						items.length === 1
-							? __(
-									'An error occurred while reverting the template.'
-							  )
-							: __(
-									'An error occurred while reverting the templates.'
-							  );
-				} else {
-					fallbackErrorMessage =
-						items.length === 1
-							? __(
-									'An error occurred while reverting the template part.'
-							  )
-							: __(
-									'An error occurred while reverting the template parts.'
-							  );
-				}
-
-				const typedError = error as CoreDataError;
-				const errorMessage =
-					typedError.message && typedError.code !== 'unknown_error'
-						? typedError.message
-						: fallbackErrorMessage;
-
-				createErrorNotice( errorMessage, { type: 'snackbar' } );
-			}
-		};
-		return (
-			<VStack spacing="5">
-				<Text>
-					{ __( 'Reset to default and clear all customizations?' ) }
-				</Text>
-				<HStack justify="right">
-					<Button
-						__next40pxDefaultSize
-						variant="tertiary"
-						onClick={ closeModal }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Cancel' ) }
-					</Button>
-					<Button
-						__next40pxDefaultSize
-						variant="primary"
-						onClick={ async () => {
-							setIsBusy( true );
-							await onConfirm();
-							onActionPerformed?.( items );
-							setIsBusy( false );
-							closeModal?.();
-						} }
-						isBusy={ isBusy }
-						disabled={ isBusy }
-						accessibleWhenDisabled
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				</HStack>
-			</VStack>
-		);
-	},
-};
-
-export default resetPost;
diff --git a/packages/editor/src/dataviews/fields/index.ts b/packages/editor/src/dataviews/fields/index.ts
deleted file mode 100644
index b215172eaf7f02..00000000000000
--- a/packages/editor/src/dataviews/fields/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import type { Field } from '@wordpress/dataviews';
-
-/**
- * Internal dependencies
- */
-import type { BasePost } from '../types';
-import { getItemTitle } from '../actions/utils';
-
-export const titleField: Field< BasePost > = {
-	type: 'text',
-	id: 'title',
-	label: __( 'Title' ),
-	placeholder: __( 'No title' ),
-	getValue: ( { item } ) => getItemTitle( item ),
-};
-
-export const orderField: Field< BasePost > = {
-	type: 'integer',
-	id: 'menu_order',
-	label: __( 'Order' ),
-	description: __( 'Determines the order of pages.' ),
-};
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index e685493641f3b8..10f2b9ce872d5a 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -8,11 +8,6 @@ import { doAction } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import duplicateTemplatePart from '../actions/duplicate-template-part';
-import resetPost from '../actions/reset-post';
-import trashPost from '../actions/trash-post';
-import renamePost from '../actions/rename-post';
-import restorePost from '../actions/restore-post';
 import type { PostType } from '../types';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
@@ -24,8 +19,13 @@ import {
 	reorderPage,
 	exportPattern,
 	permanentlyDeletePost,
+	restorePost,
+	trashPost,
+	renamePost,
+	resetPost,
+	deletePost,
 } from '@wordpress/fields';
-import deletePost from '../actions/delete-post';
+import duplicateTemplatePart from '../actions/duplicate-template-part';
 
 export function registerEntityAction< Item >(
 	kind: string,
@@ -117,8 +117,8 @@ export const registerPostTypeActions =
 				? reorderPage
 				: undefined,
 			postTypeConfig.slug === 'wp_block' ? exportPattern : undefined,
-			resetPost,
 			restorePost,
+			resetPost,
 			deletePost,
 			trashPost,
 			permanentlyDeletePost,
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 6f81f368351f38..8882856a89e0d9 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -6,7 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -58,7 +58,6 @@ function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
 	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const { getCurrentPostType, getEditedPostAttribute } =
 				select( editorStore );
 
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 59faa6b5b73624..fa720e1fc7d347 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -12,7 +12,11 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { applyFilters } from '@wordpress/hooks';
+import {
+	applyFilters,
+	applyFiltersAsync,
+	doActionAsync,
+} from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 
@@ -26,7 +30,7 @@ import {
 	getNotificationArgumentsForSaveFail,
 	getNotificationArgumentsForTrashFail,
 } from './utils/notice-builder';
-
+import { unlock } from '../lock-unlock';
 /**
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
@@ -184,7 +188,7 @@ export const savePost =
 		}
 
 		const previousRecord = select.getCurrentPost();
-		const edits = {
+		let edits = {
 			id: previousRecord.id,
 			...registry
 				.select( coreStore )
@@ -199,9 +203,9 @@ export const savePost =
 
 		let error = false;
 		try {
-			error = await applyFilters(
-				'editor.__unstablePreSavePost',
-				Promise.resolve( false ),
+			edits = await applyFiltersAsync(
+				'editor.preSavePost',
+				edits,
 				options
 			);
 		} catch ( err ) {
@@ -236,14 +240,25 @@ export const savePost =
 				);
 		}
 
+		// Run the hook with legacy unstable name for backward compatibility
 		if ( ! error ) {
-			await applyFilters(
-				'editor.__unstableSavePost',
-				Promise.resolve(),
-				options
-			).catch( ( err ) => {
+			try {
+				await applyFilters(
+					'editor.__unstableSavePost',
+					Promise.resolve(),
+					options
+				);
+			} catch ( err ) {
 				error = err;
-			} );
+			}
+		}
+
+		if ( ! error ) {
+			try {
+				await doActionAsync( 'editor.savePost', options );
+			} catch ( err ) {
+				error = err;
+			}
 		}
 		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );
 
@@ -726,15 +741,32 @@ export function removeEditorPanel( panelName ) {
  *                                              use an object.
  * @param {string}         value.rootClientId   The root client ID to insert at.
  * @param {number}         value.insertionIndex The index to insert at.
+ * @param {string}         value.filterValue    A query to filter the inserter results.
+ * @param {Function}       value.onSelect       A callback when an item is selected.
+ * @param {string}         value.tab            The tab to open in the inserter.
+ * @param {string}         value.category       The category to initialize in the inserter.
  *
  * @return {Object} Action object.
  */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+export const setIsInserterOpened =
+	( value ) =>
+	( { dispatch, registry } ) => {
+		if (
+			typeof value === 'object' &&
+			value.hasOwnProperty( 'rootClientId' ) &&
+			value.hasOwnProperty( 'insertionIndex' )
+		) {
+			unlock( registry.dispatch( blockEditorStore ) ).setInsertionPoint( {
+				rootClientId: value.rootClientId,
+				index: value.insertionIndex,
+			} );
+		}
+
+		dispatch( {
+			type: 'SET_IS_INSERTER_OPENED',
+			value,
+		} );
 	};
-}
 
 /**
  * Returns an action object used to open/close the list view.
diff --git a/packages/editor/src/store/private-selectors.js b/packages/editor/src/store/private-selectors.js
index 357a7344f631d4..9bc065436c10bb 100644
--- a/packages/editor/src/store/private-selectors.js
+++ b/packages/editor/src/store/private-selectors.js
@@ -37,13 +37,13 @@ const EMPTY_INSERTION_POINT = {
 };
 
 /**
- * Get the insertion point for the inserter.
+ * Get the inserter.
  *
  * @param {Object} state Global application state.
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export const getInsertionPoint = createRegistrySelector( ( select ) =>
+export const getInserter = createRegistrySelector( ( select ) =>
 	createSelector(
 		( state ) => {
 			if ( typeof state.blockInserterPanel === 'object' ) {
diff --git a/packages/editor/src/store/test/actions.js b/packages/editor/src/store/test/actions.js
index fae30c6fc271ec..206c60a159d04f 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -576,4 +576,80 @@ describe( 'Editor actions', () => {
 			).toBe( true );
 		} );
 	} );
+
+	describe( 'setIsInserterOpened', () => {
+		it( 'should open and close the inserter', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( false );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the list view should close when the inserter is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should open and close the list view', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( false );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the inserter should close when the list view is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+	} );
 } );
diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js
index b4fd013c6b4d42..3971ad30c9de74 100644
--- a/packages/editor/src/store/test/reducer.js
+++ b/packages/editor/src/store/test/reducer.js
@@ -18,7 +18,6 @@ import {
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
-import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'hasSameKeys()', () => {
@@ -298,15 +297,6 @@ describe( 'state', () => {
 			expect( blockInserterPanel( true, {} ) ).toBe( true );
 		} );
 
-		it( 'should set the open state of the inserter panel', () => {
-			expect(
-				blockInserterPanel( false, setIsInserterOpened( true ) )
-			).toBe( true );
-			expect(
-				blockInserterPanel( true, setIsInserterOpened( false ) )
-			).toBe( false );
-		} );
-
 		it( 'should close the inserter when opening the list view panel', () => {
 			expect(
 				blockInserterPanel( true, {
@@ -349,17 +339,5 @@ describe( 'state', () => {
 				} )
 			).toBe( false );
 		} );
-
-		it( 'should close the list view when opening the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should not change the state when closing the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
-				true
-			);
-		} );
 	} );
 } );
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index ccfa6a6021d71f..ee63e4b5e70fa8 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/element/package.json b/packages/element/package.json
index d6062abe6ecf61..56759cdc23d91b 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index b3dcf350596a0f..0b32fd808d9603 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/env/package.json b/packages/env/package.json
index 7f3b15b1e15622..b1ea172a4303d9 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 490cbdb184f5b1..c13edebda4480a 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 8dd1a66cf2d5e9..8f68366006ce7c 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 14d44d21acda9f..725872f8bf1011 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 21.1.0 (2024-09-19)
+
 ## 21.0.0 (2024-09-05)
 
 ### Breaking Changes
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 73996275c9154f..4902acd2bcd0ae 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "21.0.0",
+	"version": "21.1.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/fields/README.md b/packages/fields/README.md
index b09716a7598c9e..cded27e5bd9d4e 100644
--- a/packages/fields/README.md
+++ b/packages/fields/README.md
@@ -14,6 +14,10 @@ npm install @wordpress/fields --save
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### deletePost
+
+Undocumented declaration.
+
 ### duplicatePattern
 
 Undocumented declaration.
@@ -42,6 +46,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### renamePost
+
+Undocumented declaration.
+
 ### reorderPage
 
 Undocumented declaration.
@@ -50,6 +58,14 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### resetPost
+
+Undocumented declaration.
+
+### restorePost
+
+Undocumented declaration.
+
 ### slugField
 
 Undocumented declaration.
@@ -58,6 +74,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### trashPost
+
+Undocumented declaration.
+
 ### viewPost
 
 Undocumented declaration.
diff --git a/packages/fields/package.json b/packages/fields/package.json
index ba687e6db1bc87..3da913d1ee9ae5 100644
--- a/packages/fields/package.json
+++ b/packages/fields/package.json
@@ -32,6 +32,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/blocks": "file:../blocks",
 		"@wordpress/components": "file:../components",
diff --git a/packages/fields/src/actions/base-post/index.ts b/packages/fields/src/actions/base-post/index.ts
deleted file mode 100644
index 7541be86c48b1f..00000000000000
--- a/packages/fields/src/actions/base-post/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as viewPost } from './view-post';
-export { default as reorderPage } from './reorder-page';
-export { default as reorderPageNative } from './reorder-page.native';
-export { default as duplicatePost } from './duplicate-post';
-export { default as duplicatePostNative } from './duplicate-post.native';
diff --git a/packages/fields/src/actions/common/index.ts b/packages/fields/src/actions/common/index.ts
deleted file mode 100644
index 3590b2e270892e..00000000000000
--- a/packages/fields/src/actions/common/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as viewPostRevisions } from './view-post-revisions';
-export { default as permanentlyDeletePost } from './permanently-delete-post';
diff --git a/packages/fields/src/actions/delete-post.tsx b/packages/fields/src/actions/delete-post.tsx
new file mode 100644
index 00000000000000..c5ab866e12479e
--- /dev/null
+++ b/packages/fields/src/actions/delete-post.tsx
@@ -0,0 +1,203 @@
+/**
+ * WordPress dependencies
+ */
+import { trash } from '@wordpress/icons';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
+import type { Action } from '@wordpress/dataviews';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getItemTitle,
+	isTemplateOrTemplatePart,
+	isTemplateRemovable,
+} from './utils';
+import type { Pattern, Template, TemplatePart } from '../types';
+import type { NoticeSettings } from '../mutation';
+import { deletePostWithNotices } from '../mutation';
+import { unlock } from '../lock-unlock';
+
+const { PATTERN_TYPES } = unlock( patternsPrivateApis );
+
+// This action is used for templates, patterns and template parts.
+// Every other post type uses the similar `trashPostAction` which
+// moves the post to trash.
+const deletePostAction: Action< Template | TemplatePart | Pattern > = {
+	id: 'delete-post',
+	label: __( 'Delete' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( post ) {
+		if ( isTemplateOrTemplatePart( post ) ) {
+			return isTemplateRemovable( post );
+		}
+		// We can only remove user patterns.
+		return post.type === PATTERN_TYPES.user;
+	},
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+		const isResetting = items.every(
+			( item ) => isTemplateOrTemplatePart( item ) && item?.has_theme_file
+		);
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ items.length > 1
+						? sprintf(
+								// translators: %d: number of items to delete.
+								_n(
+									'Delete %d item?',
+									'Delete %d items?',
+									items.length
+								),
+								items.length
+						  )
+						: sprintf(
+								// translators: %s: The template or template part's titles
+								__( 'Delete "%s"?' ),
+								getItemTitle( items[ 0 ] )
+						  ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							const notice: NoticeSettings<
+								Template | TemplatePart | Pattern
+							> = {
+								success: {
+									messages: {
+										getMessage: ( item ) => {
+											return isResetting
+												? sprintf(
+														/* translators: The template/part's name. */
+														__( '"%s" reset.' ),
+														decodeEntities(
+															getItemTitle( item )
+														)
+												  )
+												: sprintf(
+														/* translators: The template/part's name. */
+														__( '"%s" deleted.' ),
+														decodeEntities(
+															getItemTitle( item )
+														)
+												  );
+										},
+										getBatchMessage: () => {
+											return isResetting
+												? __( 'Items reset.' )
+												: __( 'Items deleted.' );
+										},
+									},
+								},
+								error: {
+									messages: {
+										getMessage: ( error ) => {
+											if ( error.size === 1 ) {
+												return [ ...error ][ 0 ];
+											}
+											return isResetting
+												? __(
+														'An error occurred while reverting the item.'
+												  )
+												: __(
+														'An error occurred while deleting the item.'
+												  );
+										},
+										getBatchMessage: ( errors ) => {
+											if ( errors.size === 0 ) {
+												return isResetting
+													? __(
+															'An error occurred while reverting the items.'
+													  )
+													: __(
+															'An error occurred while deleting the items.'
+													  );
+											}
+
+											if ( errors.size === 1 ) {
+												return isResetting
+													? sprintf(
+															/* translators: %s: an error message */
+															__(
+																'An error occurred while reverting the items: %s'
+															),
+															[ ...errors ][ 0 ]
+													  )
+													: sprintf(
+															/* translators: %s: an error message */
+															__(
+																'An error occurred while deleting the items: %s'
+															),
+															[ ...errors ][ 0 ]
+													  );
+											}
+
+											return isResetting
+												? sprintf(
+														/* translators: %s: a list of comma separated error messages */
+														__(
+															'Some errors occurred while reverting the items: %s'
+														),
+														[ ...errors ].join(
+															','
+														)
+												  )
+												: sprintf(
+														/* translators: %s: a list of comma separated error messages */
+														__(
+															'Some errors occurred while deleting the items: %s'
+														),
+														[ ...errors ].join(
+															','
+														)
+												  );
+										},
+									},
+								},
+							};
+
+							await deletePostWithNotices( items, notice, {
+								onActionPerformed,
+							} );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+						__next40pxDefaultSize
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export default deletePostAction;
diff --git a/packages/fields/src/actions/pattern/duplicate-pattern.tsx b/packages/fields/src/actions/duplicate-pattern.tsx
similarity index 91%
rename from packages/fields/src/actions/pattern/duplicate-pattern.tsx
rename to packages/fields/src/actions/duplicate-pattern.tsx
index 7c71a271997f15..bf2820f951dbad 100644
--- a/packages/fields/src/actions/pattern/duplicate-pattern.tsx
+++ b/packages/fields/src/actions/duplicate-pattern.tsx
@@ -9,8 +9,8 @@ import type { Action } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
-import type { Pattern } from '../../types';
+import { unlock } from '../lock-unlock';
+import type { Pattern } from '../types';
 
 // Patterns.
 const { CreatePatternModalContents, useDuplicatePatternProps } =
diff --git a/packages/fields/src/actions/base-post/duplicate-post.native.tsx b/packages/fields/src/actions/duplicate-post.native.tsx
similarity index 100%
rename from packages/fields/src/actions/base-post/duplicate-post.native.tsx
rename to packages/fields/src/actions/duplicate-post.native.tsx
diff --git a/packages/fields/src/actions/base-post/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx
similarity index 96%
rename from packages/fields/src/actions/base-post/duplicate-post.tsx
rename to packages/fields/src/actions/duplicate-post.tsx
index 0035a40c009342..d153073f4b6c12 100644
--- a/packages/fields/src/actions/base-post/duplicate-post.tsx
+++ b/packages/fields/src/actions/duplicate-post.tsx
@@ -18,9 +18,9 @@ import type { Action } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import { titleField } from '../../fields';
-import type { BasePost, CoreDataError } from '../../types';
-import { getItemTitle } from '../utils';
+import { titleField } from '../fields';
+import type { BasePost, CoreDataError } from '../types';
+import { getItemTitle } from './utils';
 
 const fields = [ titleField ];
 const formDuplicateAction = {
diff --git a/packages/fields/src/actions/pattern/export-pattern.native.tsx b/packages/fields/src/actions/export-pattern.native.tsx
similarity index 100%
rename from packages/fields/src/actions/pattern/export-pattern.native.tsx
rename to packages/fields/src/actions/export-pattern.native.tsx
diff --git a/packages/fields/src/actions/pattern/export-pattern.tsx b/packages/fields/src/actions/export-pattern.tsx
similarity index 95%
rename from packages/fields/src/actions/pattern/export-pattern.tsx
rename to packages/fields/src/actions/export-pattern.tsx
index b0f6c3335544c1..b6be83eeda84b4 100644
--- a/packages/fields/src/actions/pattern/export-pattern.tsx
+++ b/packages/fields/src/actions/export-pattern.tsx
@@ -15,8 +15,8 @@ import type { Action } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { Pattern } from '../../types';
-import { getItemTitle } from '../utils';
+import type { Pattern } from '../types';
+import { getItemTitle } from './utils';
 
 function getJsonFromItem( item: Pattern ) {
 	return JSON.stringify(
diff --git a/packages/fields/src/actions/index.ts b/packages/fields/src/actions/index.ts
index cf4fd6833f3fbe..08e22836e68fd1 100644
--- a/packages/fields/src/actions/index.ts
+++ b/packages/fields/src/actions/index.ts
@@ -1,3 +1,15 @@
-export * from './base-post';
-export * from './common';
-export * from './pattern';
+export { default as viewPost } from './view-post';
+export { default as reorderPage } from './reorder-page';
+export { default as reorderPageNative } from './reorder-page.native';
+export { default as duplicatePost } from './duplicate-post';
+export { default as duplicatePostNative } from './duplicate-post.native';
+export { default as renamePost } from './rename-post';
+export { default as resetPost } from './reset-post';
+export { default as duplicatePattern } from './duplicate-pattern';
+export { default as exportPattern } from './export-pattern';
+export { default as exportPatternNative } from './export-pattern.native';
+export { default as viewPostRevisions } from './view-post-revisions';
+export { default as permanentlyDeletePost } from './permanently-delete-post';
+export { default as restorePost } from './restore-post';
+export { default as trashPost } from './trash-post';
+export { default as deletePost } from './delete-post';
diff --git a/packages/fields/src/actions/pattern/index.ts b/packages/fields/src/actions/pattern/index.ts
deleted file mode 100644
index 827c2ce365c2c5..00000000000000
--- a/packages/fields/src/actions/pattern/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as duplicatePattern } from './duplicate-pattern';
-export { default as exportPattern } from './export-pattern';
-export { default as exportPatternNative } from './export-pattern.native';
diff --git a/packages/fields/src/actions/common/permanently-delete-post.tsx b/packages/fields/src/actions/permanently-delete-post.tsx
similarity index 96%
rename from packages/fields/src/actions/common/permanently-delete-post.tsx
rename to packages/fields/src/actions/permanently-delete-post.tsx
index e0c1de96871f1f..afbb84ae12c74c 100644
--- a/packages/fields/src/actions/common/permanently-delete-post.tsx
+++ b/packages/fields/src/actions/permanently-delete-post.tsx
@@ -10,8 +10,8 @@ import { trash } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { getItemTitle, isTemplateOrTemplatePart } from '../utils';
-import type { CoreDataError, PostWithPermissions } from '../../types';
+import { getItemTitle, isTemplateOrTemplatePart } from './utils';
+import type { CoreDataError, PostWithPermissions } from '../types';
 
 const permanentlyDeletePost: Action< PostWithPermissions > = {
 	id: 'permanently-delete',
diff --git a/packages/editor/src/dataviews/actions/rename-post.tsx b/packages/fields/src/actions/rename-post.tsx
similarity index 97%
rename from packages/editor/src/dataviews/actions/rename-post.tsx
rename to packages/fields/src/actions/rename-post.tsx
index ef9da271111ea2..da1fd46669f0df 100644
--- a/packages/editor/src/dataviews/actions/rename-post.tsx
+++ b/packages/fields/src/actions/rename-post.tsx
@@ -19,17 +19,16 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_ORIGINS,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_POST_TYPE,
-} from '../../store/constants';
-import { unlock } from '../../lock-unlock';
+
+import { unlock } from '../lock-unlock';
 import {
 	getItemTitle,
 	isTemplateRemovable,
 	isTemplate,
 	isTemplatePart,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_POST_TYPE,
 } from './utils';
 import type { CoreDataError, PostWithPermissions } from '../types';
 
diff --git a/packages/fields/src/actions/base-post/reorder-page.native.tsx b/packages/fields/src/actions/reorder-page.native.tsx
similarity index 100%
rename from packages/fields/src/actions/base-post/reorder-page.native.tsx
rename to packages/fields/src/actions/reorder-page.native.tsx
diff --git a/packages/fields/src/actions/base-post/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx
similarity index 96%
rename from packages/fields/src/actions/base-post/reorder-page.tsx
rename to packages/fields/src/actions/reorder-page.tsx
index 7f3bca59c471ce..1820884d8d8c73 100644
--- a/packages/fields/src/actions/base-post/reorder-page.tsx
+++ b/packages/fields/src/actions/reorder-page.tsx
@@ -17,8 +17,8 @@ import type { Action, RenderModalProps } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { CoreDataError, BasePost } from '../../types';
-import { orderField } from '../../fields';
+import type { CoreDataError, BasePost } from '../types';
+import { orderField } from '../fields';
 
 const fields = [ orderField ];
 const formOrderAction = {
diff --git a/packages/fields/src/actions/reset-post.tsx b/packages/fields/src/actions/reset-post.tsx
new file mode 100644
index 00000000000000..105d7b283b8334
--- /dev/null
+++ b/packages/fields/src/actions/reset-post.tsx
@@ -0,0 +1,300 @@
+/**
+ * WordPress dependencies
+ */
+import { backup } from '@wordpress/icons';
+import { dispatch, select, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useState } from '@wordpress/element';
+// @ts-ignore
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import type { Action } from '@wordpress/dataviews';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getItemTitle,
+	isTemplateOrTemplatePart,
+	TEMPLATE_ORIGINS,
+	TEMPLATE_POST_TYPE,
+} from './utils';
+import type { CoreDataError, Template, TemplatePart } from '../types';
+
+const isTemplateRevertable = (
+	templateOrTemplatePart: Template | TemplatePart
+) => {
+	if ( ! templateOrTemplatePart ) {
+		return false;
+	}
+
+	return (
+		templateOrTemplatePart.source === TEMPLATE_ORIGINS.custom &&
+		( Boolean( templateOrTemplatePart?.plugin ) ||
+			templateOrTemplatePart?.has_theme_file )
+	);
+};
+
+/**
+ *  Copied - pasted from https://github.com/WordPress/gutenberg/blob/bf1462ad37d4637ebbf63270b9c244b23c69e2a8/packages/editor/src/store/private-actions.js#L233-L365
+ *
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
+ */
+const revertTemplate = async (
+	template: TemplatePart | Template,
+	{ allowUndo = true } = {}
+) => {
+	const noticeId = 'edit-site-template-reverted';
+	dispatch( noticesStore ).removeNotice( noticeId );
+	if ( ! isTemplateRevertable( template ) ) {
+		dispatch( noticesStore ).createErrorNotice(
+			__( 'This template is not revertable.' ),
+			{
+				type: 'snackbar',
+			}
+		);
+		return;
+	}
+
+	try {
+		const templateEntityConfig = select( coreStore ).getEntityConfig(
+			'postType',
+			template.type
+		);
+
+		if ( ! templateEntityConfig ) {
+			dispatch( noticesStore ).createErrorNotice(
+				__(
+					'The editor has encountered an unexpected error. Please reload.'
+				),
+				{ type: 'snackbar' }
+			);
+			return;
+		}
+
+		const fileTemplatePath = addQueryArgs(
+			`${ templateEntityConfig.baseURL }/${ template.id }`,
+			{ context: 'edit', source: template.origin }
+		);
+
+		const fileTemplate = ( await apiFetch( {
+			path: fileTemplatePath,
+		} ) ) as any;
+		if ( ! fileTemplate ) {
+			dispatch( noticesStore ).createErrorNotice(
+				__(
+					'The editor has encountered an unexpected error. Please reload.'
+				),
+				{ type: 'snackbar' }
+			);
+			return;
+		}
+
+		const serializeBlocks = ( { blocks: blocksForSerialization = [] } ) =>
+			__unstableSerializeAndClean( blocksForSerialization );
+
+		const edited = select( coreStore ).getEditedEntityRecord(
+			'postType',
+			template.type,
+			template.id
+		) as any;
+
+		// We are fixing up the undo level here to make sure we can undo
+		// the revert in the header toolbar correctly.
+		dispatch( coreStore ).editEntityRecord(
+			'postType',
+			template.type,
+			template.id,
+			{
+				content: serializeBlocks, // Required to make the `undo` behave correctly.
+				blocks: edited.blocks, // Required to revert the blocks in the editor.
+				source: 'custom', // required to avoid turning the editor into a dirty state
+			},
+			{
+				undoIgnore: true, // Required to merge this edit with the last undo level.
+			}
+		);
+
+		const blocks = parse( fileTemplate?.content?.raw );
+
+		dispatch( coreStore ).editEntityRecord(
+			'postType',
+			template.type,
+			fileTemplate.id,
+			{
+				content: serializeBlocks,
+				blocks,
+				source: 'theme',
+			}
+		);
+
+		if ( allowUndo ) {
+			const undoRevert = () => {
+				dispatch( coreStore ).editEntityRecord(
+					'postType',
+					template.type,
+					edited.id,
+					{
+						content: serializeBlocks,
+						blocks: edited.blocks,
+						source: 'custom',
+					}
+				);
+			};
+
+			dispatch( noticesStore ).createSuccessNotice(
+				__( 'Template reset.' ),
+				{
+					type: 'snackbar',
+					id: noticeId,
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: undoRevert,
+						},
+					],
+				}
+			);
+		}
+	} catch ( error: any ) {
+		const errorMessage =
+			error.message && error.code !== 'unknown_error'
+				? error.message
+				: __( 'Template revert failed. Please reload.' );
+
+		dispatch( noticesStore ).createErrorNotice( errorMessage, {
+			type: 'snackbar',
+		} );
+	}
+};
+
+const resetPostAction: Action< Template | TemplatePart > = {
+	id: 'reset-post',
+	label: __( 'Reset' ),
+	isEligible: ( item ) => {
+		return (
+			isTemplateOrTemplatePart( item ) &&
+			item?.source === TEMPLATE_ORIGINS.custom &&
+			( Boolean( item.type === 'wp_template' && item?.plugin ) ||
+				item?.has_theme_file )
+		);
+	},
+	icon: backup,
+	supportsBulk: true,
+	hideModalHeader: true,
+	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
+		const [ isBusy, setIsBusy ] = useState( false );
+
+		const { saveEditedEntityRecord } = useDispatch( coreStore );
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const onConfirm = async () => {
+			try {
+				for ( const template of items ) {
+					await revertTemplate( template, {
+						allowUndo: false,
+					} );
+					await saveEditedEntityRecord(
+						'postType',
+						template.type,
+						template.id
+					);
+				}
+				createSuccessNotice(
+					items.length > 1
+						? sprintf(
+								/* translators: The number of items. */
+								__( '%s items reset.' ),
+								items.length
+						  )
+						: sprintf(
+								/* translators: The template/part's name. */
+								__( '"%s" reset.' ),
+								getItemTitle( items[ 0 ] )
+						  ),
+					{
+						type: 'snackbar',
+						id: 'revert-template-action',
+					}
+				);
+			} catch ( error ) {
+				let fallbackErrorMessage;
+				if ( items[ 0 ].type === TEMPLATE_POST_TYPE ) {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template.'
+							  )
+							: __(
+									'An error occurred while reverting the templates.'
+							  );
+				} else {
+					fallbackErrorMessage =
+						items.length === 1
+							? __(
+									'An error occurred while reverting the template part.'
+							  )
+							: __(
+									'An error occurred while reverting the template parts.'
+							  );
+				}
+
+				const typedError = error as CoreDataError;
+				const errorMessage =
+					typedError.message && typedError.code !== 'unknown_error'
+						? typedError.message
+						: fallbackErrorMessage;
+
+				createErrorNotice( errorMessage, { type: 'snackbar' } );
+			}
+		};
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ __( 'Reset to default and clear all customizations?' ) }
+				</Text>
+				<HStack justify="right">
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ closeModal }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ async () => {
+							setIsBusy( true );
+							await onConfirm();
+							onActionPerformed?.( items );
+							setIsBusy( false );
+							closeModal?.();
+						} }
+						isBusy={ isBusy }
+						disabled={ isBusy }
+						accessibleWhenDisabled
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export default resetPostAction;
diff --git a/packages/editor/src/dataviews/actions/restore-post.tsx b/packages/fields/src/actions/restore-post.tsx
similarity index 100%
rename from packages/editor/src/dataviews/actions/restore-post.tsx
rename to packages/fields/src/actions/restore-post.tsx
diff --git a/packages/editor/src/dataviews/actions/trash-post.tsx b/packages/fields/src/actions/trash-post.tsx
similarity index 100%
rename from packages/editor/src/dataviews/actions/trash-post.tsx
rename to packages/fields/src/actions/trash-post.tsx
diff --git a/packages/fields/src/actions/common/view-post-revisions.tsx b/packages/fields/src/actions/view-post-revisions.tsx
similarity index 96%
rename from packages/fields/src/actions/common/view-post-revisions.tsx
rename to packages/fields/src/actions/view-post-revisions.tsx
index 617a5263a707d6..875b925b94f070 100644
--- a/packages/fields/src/actions/common/view-post-revisions.tsx
+++ b/packages/fields/src/actions/view-post-revisions.tsx
@@ -8,7 +8,7 @@ import type { Action } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { Post } from '../../types';
+import type { Post } from '../types';
 
 const viewPostRevisions: Action< Post > = {
 	id: 'view-post-revisions',
diff --git a/packages/fields/src/actions/base-post/view-post.tsx b/packages/fields/src/actions/view-post.tsx
similarity index 92%
rename from packages/fields/src/actions/base-post/view-post.tsx
rename to packages/fields/src/actions/view-post.tsx
index 8c581877e473bb..187faffafb5d3c 100644
--- a/packages/fields/src/actions/base-post/view-post.tsx
+++ b/packages/fields/src/actions/view-post.tsx
@@ -8,7 +8,7 @@ import type { Action } from '@wordpress/dataviews';
 /**
  * Internal dependencies
  */
-import type { BasePost } from '../../types';
+import type { BasePost } from '../types';
 
 const viewPost: Action< BasePost > = {
 	id: 'view-post',
diff --git a/packages/fields/src/index.native.ts b/packages/fields/src/index.native.ts
index e4d3134d72f847..33a26e3c2e6e27 100644
--- a/packages/fields/src/index.native.ts
+++ b/packages/fields/src/index.native.ts
@@ -1,2 +1,2 @@
-export * from './actions/base-post/duplicate-post.native';
-export * from './actions/base-post/reorder-page.native';
+export * from './actions/duplicate-post.native';
+export * from './actions/reorder-page.native';
diff --git a/packages/fields/src/mutation/index.ts b/packages/fields/src/mutation/index.ts
new file mode 100644
index 00000000000000..80e399d74e9479
--- /dev/null
+++ b/packages/fields/src/mutation/index.ts
@@ -0,0 +1,184 @@
+/**
+ * WordPress dependencies
+ */
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { dispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import type { CoreDataError, Post } from '../types';
+
+const getErrorMessagesFromPromises = < T >(
+	allSettledResults: PromiseSettledResult< T >[]
+) => {
+	const errorMessages = new Set< string >();
+	// If there was at lease one failure.
+	if ( allSettledResults.length === 1 ) {
+		const typedError = allSettledResults[ 0 ] as {
+			reason?: CoreDataError;
+		};
+		if ( typedError.reason?.message ) {
+			errorMessages.add( typedError.reason.message );
+		}
+	} else {
+		const failedPromises = allSettledResults.filter(
+			( { status } ) => status === 'rejected'
+		);
+		for ( const failedPromise of failedPromises ) {
+			const typedError = failedPromise as {
+				reason?: CoreDataError;
+			};
+			if ( typedError.reason?.message ) {
+				errorMessages.add( typedError.reason.message );
+			}
+		}
+	}
+	return errorMessages;
+};
+
+export type NoticeSettings< T extends Post > = {
+	success: {
+		id?: string;
+		type?: string;
+		messages: {
+			getMessage: ( posts: T ) => string;
+			getBatchMessage: ( posts: T[] ) => string;
+		};
+	};
+	error: {
+		id?: string;
+		type?: string;
+		messages: {
+			getMessage: ( errors: Set< string > ) => string;
+			getBatchMessage: ( errors: Set< string > ) => string;
+		};
+	};
+};
+
+export const deletePostWithNotices = async < T extends Post >(
+	posts: T[],
+	notice: NoticeSettings< T >,
+	callbacks: {
+		onActionPerformed?: ( posts: T[] ) => void;
+		onActionError?: () => void;
+	}
+) => {
+	const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+	const { deleteEntityRecord } = dispatch( coreStore );
+	const allSettledResults = await Promise.allSettled(
+		posts.map( ( post ) => {
+			return deleteEntityRecord(
+				'postType',
+				post.type,
+				post.id,
+				{ force: true },
+				{ throwOnError: true }
+			);
+		} )
+	);
+	// If all the promises were fulfilled with success.
+	if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+		let successMessage;
+		if ( allSettledResults.length === 1 ) {
+			successMessage = notice.success.messages.getMessage( posts[ 0 ] );
+		} else {
+			successMessage = notice.success.messages.getBatchMessage( posts );
+		}
+		createSuccessNotice( successMessage, {
+			type: notice.success.type ?? 'snackbar',
+			id: notice.success.id,
+		} );
+		callbacks.onActionPerformed?.( posts );
+	} else {
+		const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+		let errorMessage = '';
+		if ( allSettledResults.length === 1 ) {
+			errorMessage = notice.error.messages.getMessage( errorMessages );
+		} else {
+			errorMessage =
+				notice.error.messages.getBatchMessage( errorMessages );
+		}
+
+		createErrorNotice( errorMessage, {
+			type: notice.error.type ?? 'snackbar',
+			id: notice.error.id,
+		} );
+		callbacks.onActionError?.();
+	}
+};
+
+export const editPostWithNotices = async < T extends Post >(
+	postsWithUpdates: {
+		originalPost: T;
+		changes: Partial< T >;
+	}[],
+	notice: NoticeSettings< T >,
+	callbacks: {
+		onActionPerformed?: ( posts: T[] ) => void;
+		onActionError?: () => void;
+	}
+) => {
+	const { createSuccessNotice, createErrorNotice } = dispatch( noticesStore );
+	const { editEntityRecord, saveEditedEntityRecord } = dispatch( coreStore );
+	await Promise.allSettled(
+		postsWithUpdates.map( ( post ) => {
+			return editEntityRecord(
+				'postType',
+				post.originalPost.type,
+				post.originalPost.id,
+				{
+					...post.changes,
+				}
+			);
+		} )
+	);
+	const allSettledResults = await Promise.allSettled(
+		postsWithUpdates.map( ( post ) => {
+			return saveEditedEntityRecord(
+				'postType',
+				post.originalPost.type,
+				post.originalPost.id,
+				{
+					throwOnError: true,
+				}
+			);
+		} )
+	);
+	// If all the promises were fulfilled with success.
+	if ( allSettledResults.every( ( { status } ) => status === 'fulfilled' ) ) {
+		let successMessage;
+		if ( allSettledResults.length === 1 ) {
+			successMessage = notice.success.messages.getMessage(
+				postsWithUpdates[ 0 ].originalPost
+			);
+		} else {
+			successMessage = notice.success.messages.getBatchMessage(
+				postsWithUpdates.map( ( post ) => post.originalPost )
+			);
+		}
+		createSuccessNotice( successMessage, {
+			type: notice.success.type ?? 'snackbar',
+			id: notice.success.id,
+		} );
+		callbacks.onActionPerformed?.(
+			postsWithUpdates.map( ( post ) => post.originalPost )
+		);
+	} else {
+		const errorMessages = getErrorMessagesFromPromises( allSettledResults );
+		let errorMessage = '';
+		if ( allSettledResults.length === 1 ) {
+			errorMessage = notice.error.messages.getMessage( errorMessages );
+		} else {
+			errorMessage =
+				notice.error.messages.getBatchMessage( errorMessages );
+		}
+
+		createErrorNotice( errorMessage, {
+			type: notice.error.type ?? 'snackbar',
+			id: notice.error.id,
+		} );
+		callbacks.onActionError?.();
+	}
+};
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
index 70aa7756a74e4e..d895195cb40af7 100644
--- a/packages/fields/src/types.ts
+++ b/packages/fields/src/types.ts
@@ -56,6 +56,7 @@ export interface TemplatePart extends CommonPost {
 	has_theme_file: boolean;
 	id: string;
 	area: string;
+	plugin?: string;
 }
 
 export interface Pattern extends CommonPost {
diff --git a/packages/fields/src/wordpress-editor.d.ts b/packages/fields/src/wordpress-editor.d.ts
deleted file mode 100644
index 915dacd5f05a9c..00000000000000
--- a/packages/fields/src/wordpress-editor.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '@wordpress/editor';
diff --git a/packages/fields/tsconfig.json b/packages/fields/tsconfig.json
index c55be59acf40f0..69dbd076d05747 100644
--- a/packages/fields/tsconfig.json
+++ b/packages/fields/tsconfig.json
@@ -7,6 +7,7 @@
 		"checkJs": false
 	},
 	"references": [
+		{ "path": "../api-fetch" },
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../data" },
@@ -24,6 +25,5 @@
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" }
 	],
-	"include": [ "src" ],
-	"exclude": [ "@wordpress/editor" ]
+	"include": [ "src" ]
 }
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index c003ac587fcdfa..11a32094cffeab 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 780f513bdb0374..03b1047d3fb9d8 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index de9e11c38fe905..060e061b5c2843 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### New Features
+
+- added new `doActionAsync` and `applyFiltersAsync` functions to run hooks in async mode ([#64204](https://github.com/WordPress/gutenberg/pull/64204)).
+
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 3e9897c79952cd..f80d2e63af37ba 100644
--- a/packages/hooks/README.md
+++ b/packages/hooks/README.md
@@ -41,7 +41,9 @@ One notable difference between the JS and PHP hooks API is that in the JS versio
 -   `removeAllActions( 'hookName' )`
 -   `removeAllFilters( 'hookName' )`
 -   `doAction( 'hookName', arg1, arg2, moreArgs, finalArg )`
+-   `doActionAsync( 'hookName', arg1, arg2, moreArgs, finalArg )`
 -   `applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
+-   `applyFiltersAsync( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
 -   `doingAction( 'hookName' )`
 -   `doingFilter( 'hookName' )`
 -   `didAction( 'hookName' )`
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 51074af0d239b0..cf8e0a791a7471 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.js
index 634901fe55f63a..3ada0322496004 100644
--- a/packages/hooks/src/createCurrentHook.js
+++ b/packages/hooks/src/createCurrentHook.js
@@ -11,11 +11,8 @@
 function createCurrentHook( hooks, storeKey ) {
 	return function currentHook() {
 		const hooksStore = hooks[ storeKey ];
-
-		return (
-			hooksStore.__current[ hooksStore.__current.length - 1 ]?.name ??
-			null
-		);
+		const currentArray = Array.from( hooksStore.__current );
+		return currentArray.at( -1 )?.name ?? null;
 	};
 }
 
diff --git a/packages/hooks/src/createDoingHook.js b/packages/hooks/src/createDoingHook.js
index 652ab06b4ba728..9fccf38171f332 100644
--- a/packages/hooks/src/createDoingHook.js
+++ b/packages/hooks/src/createDoingHook.js
@@ -24,13 +24,13 @@ function createDoingHook( hooks, storeKey ) {
 
 		// If the hookName was not passed, check for any current hook.
 		if ( 'undefined' === typeof hookName ) {
-			return 'undefined' !== typeof hooksStore.__current[ 0 ];
+			return hooksStore.__current.size > 0;
 		}
 
-		// Return the __current hook.
-		return hooksStore.__current[ 0 ]
-			? hookName === hooksStore.__current[ 0 ].name
-			: false;
+		// Find if the `hookName` hook is in `__current`.
+		return Array.from( hooksStore.__current ).some(
+			( hook ) => hook.name === hookName
+		);
 	};
 }
 
diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.js
index 361383a3a97fc9..1f9b1a8206b020 100644
--- a/packages/hooks/src/createHooks.js
+++ b/packages/hooks/src/createHooks.js
@@ -20,11 +20,11 @@ export class _Hooks {
 	constructor() {
 		/** @type {import('.').Store} actions */
 		this.actions = Object.create( null );
-		this.actions.__current = [];
+		this.actions.__current = new Set();
 
 		/** @type {import('.').Store} filters */
 		this.filters = Object.create( null );
-		this.filters.__current = [];
+		this.filters.__current = new Set();
 
 		this.addAction = createAddHook( this, 'actions' );
 		this.addFilter = createAddHook( this, 'filters' );
@@ -34,8 +34,10 @@ export class _Hooks {
 		this.hasFilter = createHasHook( this, 'filters' );
 		this.removeAllActions = createRemoveHook( this, 'actions', true );
 		this.removeAllFilters = createRemoveHook( this, 'filters', true );
-		this.doAction = createRunHook( this, 'actions' );
-		this.applyFilters = createRunHook( this, 'filters', true );
+		this.doAction = createRunHook( this, 'actions', false, false );
+		this.doActionAsync = createRunHook( this, 'actions', false, true );
+		this.applyFilters = createRunHook( this, 'filters', true, false );
+		this.applyFiltersAsync = createRunHook( this, 'filters', true, true );
 		this.currentAction = createCurrentHook( this, 'actions' );
 		this.currentFilter = createCurrentHook( this, 'filters' );
 		this.doingAction = createDoingHook( this, 'actions' );
diff --git a/packages/hooks/src/createRunHook.js b/packages/hooks/src/createRunHook.js
index c2bf6fd187ce08..f2a56dbdc0d717 100644
--- a/packages/hooks/src/createRunHook.js
+++ b/packages/hooks/src/createRunHook.js
@@ -3,15 +3,15 @@
  * registered to a hook of the specified type, optionally returning the final
  * value of the call chain.
  *
- * @param {import('.').Hooks}    hooks                  Hooks instance.
+ * @param {import('.').Hooks}    hooks          Hooks instance.
  * @param {import('.').StoreKey} storeKey
- * @param {boolean}              [returnFirstArg=false] Whether each hook callback is expected to
- *                                                      return its first argument.
+ * @param {boolean}              returnFirstArg Whether each hook callback is expected to return its first argument.
+ * @param {boolean}              async          Whether the hook callback should be run asynchronously
  *
  * @return {(hookName:string, ...args: unknown[]) => undefined|unknown} Function that runs hook callbacks.
  */
-function createRunHook( hooks, storeKey, returnFirstArg = false ) {
-	return function runHooks( hookName, ...args ) {
+function createRunHook( hooks, storeKey, returnFirstArg, async ) {
+	return function runHook( hookName, ...args ) {
 		const hooksStore = hooks[ storeKey ];
 
 		if ( ! hooksStore[ hookName ] ) {
@@ -42,26 +42,43 @@ function createRunHook( hooks, storeKey, returnFirstArg = false ) {
 			currentIndex: 0,
 		};
 
-		hooksStore.__current.push( hookInfo );
-
-		while ( hookInfo.currentIndex < handlers.length ) {
-			const handler = handlers[ hookInfo.currentIndex ];
-
-			const result = handler.callback.apply( null, args );
-			if ( returnFirstArg ) {
-				args[ 0 ] = result;
+		async function asyncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = await handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
 			}
-
-			hookInfo.currentIndex++;
 		}
 
-		hooksStore.__current.pop();
-
-		if ( returnFirstArg ) {
-			return args[ 0 ];
+		function syncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
+			}
 		}
 
-		return undefined;
+		return ( async ? asyncRunner : syncRunner )();
 	};
 }
 
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.js
index 653a9537145d91..1d13397e406c6b 100644
--- a/packages/hooks/src/index.js
+++ b/packages/hooks/src/index.js
@@ -25,7 +25,7 @@ import createHooks from './createHooks';
  */
 
 /**
- * @typedef {Record<string, Hook> & {__current: Current[]}} Store
+ * @typedef {Record<string, Hook> & {__current: Set<Current>}} Store
  */
 
 /**
@@ -48,7 +48,9 @@ const {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -70,7 +72,9 @@ export {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
diff --git a/packages/hooks/src/test/index.test.js b/packages/hooks/src/test/index.test.js
index 9b7eb3b8e0e223..5fdaf5fc7207a1 100644
--- a/packages/hooks/src/test/index.test.js
+++ b/packages/hooks/src/test/index.test.js
@@ -12,7 +12,9 @@ import {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -943,3 +945,151 @@ test( 'checking hasFilter with named callbacks and removeAllActions', () => {
 	expect( hasFilter( 'test.filter', 'my_callback' ) ).toBe( false );
 	expect( hasFilter( 'test.filter', 'my_second_callback' ) ).toBe( false );
 } );
+
+describe( 'async filter', () => {
+	test( 'runs all registered handlers', async () => {
+		addFilter( 'test.async.filter', 'callback_plus1', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value + 1 ), 10 )
+			);
+		} );
+		addFilter( 'test.async.filter', 'callback_times2', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value * 2 ), 10 )
+			);
+		} );
+
+		expect( await applyFiltersAsync( 'test.async.filter', 2 ) ).toBe( 6 );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const sqrt = jest.fn( async ( value ) => {
+			if ( value < 0 ) {
+				throw new Error( 'cannot pass negative value to sqrt' );
+			}
+			return Math.sqrt( value );
+		} );
+
+		const plus1 = jest.fn( async ( value ) => {
+			return value + 1;
+		} );
+
+		addFilter( 'test.async.filter', 'callback_sqrt', sqrt );
+		addFilter( 'test.async.filter', 'callback_plus1', plus1 );
+
+		await expect(
+			applyFiltersAsync( 'test.async.filter', -1 )
+		).rejects.toThrow( 'cannot pass negative value to sqrt' );
+		expect( sqrt ).toHaveBeenCalledTimes( 1 );
+		expect( plus1 ).not.toHaveBeenCalled();
+	} );
+
+	test( 'is correctly tracked by doingFilter and didFilter', async () => {
+		addFilter( 'test.async.filter', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter' ) ).toBe( true );
+			return value;
+		} );
+
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 0 );
+		await applyFiltersAsync( 'test.async.filter', 0 );
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple filters run at once', async () => {
+		addFilter( 'test.async.filter1', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+		addFilter( 'test.async.filter2', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+
+		await Promise.all( [
+			applyFiltersAsync( 'test.async.filter1', 0 ),
+			applyFiltersAsync( 'test.async.filter2', 0 ),
+		] );
+	} );
+} );
+
+describe( 'async action', () => {
+	test( 'runs all registered handlers sequentially', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			outputs.push( 1 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 2 );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await doActionAsync( 'test.async.action' );
+		expect( outputs ).toEqual( [ 1, 2, 3, 4 ] );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			throw new Error( 'aborting' );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await expect( doActionAsync( 'test.async.action' ) ).rejects.toThrow(
+			'aborting'
+		);
+		expect( outputs ).toEqual( [] );
+	} );
+
+	test( 'is correctly tracked by doingAction and didAction', async () => {
+		addAction( 'test.async.action', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action' ) ).toBe( true );
+		} );
+
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 0 );
+		await doActionAsync( 'test.async.action', 0 );
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple actions run at once', async () => {
+		addAction( 'test.async.action1', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+		addAction( 'test.async.action2', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+
+		await Promise.all( [
+			doActionAsync( 'test.async.action1', 0 ),
+			doActionAsync( 'test.async.action2', 0 ),
+		] );
+	} );
+} );
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 6887a70b391f98..e49251a8653624 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 30e3c1728307d7..7196df00a8cd6a 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index d2bf7ad7ea7eb3..928a0d6d0ef74b 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index fb3c488c1a4dea..2e92335914271b 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 32bbd88181e369..ddf850dd116819 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
+### New Features
+
+-   Add new `envelope` icon.
+
+-   Add new `bell` and `bell-unread` icons.
+-   Add new `arrowUpLeft` and `arrowDownRight` icons.
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ab23fef8eff667..c1c1682ed6750f 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index e9b48331365135..586911ffc746b2 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -10,14 +10,18 @@ export { default as alignNone } from './library/align-none';
 export { default as alignRight } from './library/align-right';
 export { default as archive } from './library/archive';
 export { default as arrowDown } from './library/arrow-down';
+export { default as arrowDownRight } from './library/arrow-down-right';
 export { default as arrowLeft } from './library/arrow-left';
 export { default as arrowRight } from './library/arrow-right';
 export { default as arrowUp } from './library/arrow-up';
+export { default as arrowUpLeft } from './library/arrow-up-left';
 export { default as atSymbol } from './library/at-symbol';
 export { default as aspectRatio } from './library/aspect-ratio';
 export { default as audio } from './library/audio';
 export { default as background } from './library/background';
 export { default as backup } from './library/backup';
+export { default as bell } from './library/bell';
+export { default as bellUnread } from './library/bell-unread';
 export { default as blockDefault } from './library/block-default';
 export { default as blockMeta } from './library/block-meta';
 export { default as blockTable } from './library/block-table';
@@ -77,6 +81,7 @@ export { default as drawerLeft } from './library/drawer-left';
 export { default as drawerRight } from './library/drawer-right';
 export { default as download } from './library/download';
 export { default as edit } from './library/edit';
+export { default as envelope } from './library/envelope';
 export { default as external } from './library/external';
 export { default as file } from './library/file';
 export { default as filter } from './library/filter';
diff --git a/packages/icons/src/library/arrow-down-right.js b/packages/icons/src/library/arrow-down-right.js
new file mode 100644
index 00000000000000..3755b63873cefc
--- /dev/null
+++ b/packages/icons/src/library/arrow-down-right.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowDownRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M10 18h8v-8h-1.5v5.5L7 6 6 7l9.5 9.5H10V18Z" />
+	</SVG>
+);
+
+export default arrowDownRight;
diff --git a/packages/icons/src/library/arrow-up-left.js b/packages/icons/src/library/arrow-up-left.js
new file mode 100644
index 00000000000000..1b3686f6ec1e62
--- /dev/null
+++ b/packages/icons/src/library/arrow-up-left.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowUpLeft = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M14 6H6v8h1.5V8.5L17 18l1-1-9.5-9.5H14V6Z" />
+	</SVG>
+);
+
+export default arrowUpLeft;
diff --git a/packages/icons/src/library/bell-unread.js b/packages/icons/src/library/bell-unread.js
new file mode 100644
index 00000000000000..96c209ddb09f6d
--- /dev/null
+++ b/packages/icons/src/library/bell-unread.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, Circle } from '@wordpress/primitives';
+
+const bellUnread = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M13.969 4.39A5.088 5.088 0 0 0 12 4C9.2 4 7 6.2 7 9v2.5c0 1.353-.17 2.368-.976 3-.267.209-.602.376-1.024.5v1h14v-1c-.422-.124-.757-.291-1.024-.5-.806-.632-.976-1.647-.976-3V11c-.53 0-1.037-.103-1.5-.29v.79c0 .93.066 1.98.515 2.897l.053.103H7.932l.053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5.43 0 .838.072 1.214.206.167-.488.425-.933.755-1.316Zm-3.961 13.618c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20a1.991 1.991 0 0 1-1.992-1.992Z" />
+		<Circle cx="17" cy="7" r="2.5" />
+	</SVG>
+);
+
+export default bellUnread;
diff --git a/packages/icons/src/library/bell.js b/packages/icons/src/library/bell.js
new file mode 100644
index 00000000000000..910488ee3035a5
--- /dev/null
+++ b/packages/icons/src/library/bell.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const bell = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17 11.5c0 1.353.17 2.368.976 3 .266.209.602.376 1.024.5v1H5v-1c.422-.124.757-.291 1.024-.5.806-.632.976-1.647.976-3V9c0-2.8 2.2-5 5-5s5 2.2 5 5v2.5ZM15.5 9v2.5c0 .93.066 1.98.515 2.897l.053.103H7.932a4.018 4.018 0 0 0 .053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5s3.5 1.528 3.5 3.5Zm-5.492 9.008c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20c-1.1 0-1.992-.892-1.992-1.992Z"
+		/>
+	</SVG>
+);
+
+export default bell;
diff --git a/packages/icons/src/library/envelope.js b/packages/icons/src/library/envelope.js
new file mode 100644
index 00000000000000..45064b35785ec1
--- /dev/null
+++ b/packages/icons/src/library/envelope.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const envelope = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M3 7c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm2-.5h14c.3 0 .5.2.5.5v1L12 13.5 4.5 7.9V7c0-.3.2-.5.5-.5Zm-.5 3.3V17c0 .3.2.5.5.5h14c.3 0 .5-.2.5-.5V9.8L12 15.4 4.5 9.8Z"
+		/>
+	</SVG>
+);
+
+export default envelope;
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 00c47f3ed074b6..1f8e91dec05474 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index db85c0d8bdba3b..8314d7b1b70d56 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.7.0",
+	"version": "2.8.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",
@@ -28,6 +28,7 @@
 	"types": "build-types",
 	"wpScriptModuleExports": "./build-module/index.js",
 	"dependencies": {
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/interactivity": "file:../interactivity"
 	},
 	"publishConfig": {
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index c6e1087b038a55..b2e8e2d4395dcd 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -209,17 +209,32 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
-export const { state, actions } = store( 'core/router', {
+let hasLoadedNavigationTextsData = false;
+const navigationTexts = {
+	loading: 'Loading page, please wait.',
+	loaded: 'Page Loaded.',
+};
+
+interface Store {
+	state: {
+		url: string;
+		navigation: {
+			hasStarted: boolean;
+			hasFinished: boolean;
+		};
+	};
+	actions: {
+		navigate: ( href: string, options?: NavigateOptions ) => void;
+		prefetch: ( url: string, options?: PrefetchOptions ) => void;
+	};
+}
+
+export const { state, actions } = store< Store >( 'core/router', {
 	state: {
 		url: window.location.href,
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			texts: {
-				loading: '',
-				loaded: '',
-			},
-			message: '',
 		},
 	},
 	actions: {
@@ -275,7 +290,7 @@ export const { state, actions } = store( 'core/router', {
 					navigation.hasFinished = false;
 				}
 				if ( screenReaderAnnouncement ) {
-					navigation.message = navigation.texts.loading;
+					a11ySpeak( 'loading' );
 				}
 			}, 400 );
 
@@ -315,14 +330,7 @@ export const { state, actions } = store( 'core/router', {
 				}
 
 				if ( screenReaderAnnouncement ) {
-					// Announce that the page has been loaded. If the message is the
-					// same, we use a no-break space similar to the @wordpress/a11y
-					// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
-					navigation.message =
-						navigation.texts.loaded +
-						( navigation.message === navigation.texts.loaded
-							? '\u00A0'
-							: '' );
+					a11ySpeak( 'loaded' );
 				}
 
 				// Scroll to the anchor if exits in the link.
@@ -363,6 +371,56 @@ export const { state, actions } = store( 'core/router', {
 	},
 } );
 
+/**
+ * Announces a message to screen readers.
+ *
+ * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
+ * the package on demand and should be used instead of calling `ally.speak` direacly.
+ *
+ * @param messageKey The message to be announced by assistive technologies.
+ */
+function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
+	if ( ! hasLoadedNavigationTextsData ) {
+		hasLoadedNavigationTextsData = true;
+		const content = document.getElementById(
+			'wp-script-module-data-@wordpress/interactivity-router'
+		)?.textContent;
+		if ( content ) {
+			try {
+				const parsed = JSON.parse( content );
+				if ( typeof parsed?.i18n?.loading === 'string' ) {
+					navigationTexts.loading = parsed.i18n.loading;
+				}
+				if ( typeof parsed?.i18n?.loaded === 'string' ) {
+					navigationTexts.loaded = parsed.i18n.loaded;
+				}
+			} catch {}
+		} else {
+			// Fallback to localized strings from Interactivity API state.
+			// @todo This block is for Core < 6.7.0. Remove when support is dropped.
+
+			// @ts-expect-error
+			if ( state.navigation.texts?.loading ) {
+				// @ts-expect-error
+				navigationTexts.loading = state.navigation.texts.loading;
+			}
+			// @ts-expect-error
+			if ( state.navigation.texts?.loaded ) {
+				// @ts-expect-error
+				navigationTexts.loaded = state.navigation.texts.loaded;
+			}
+		}
+	}
+
+	const message = navigationTexts[ messageKey ];
+
+	import( '@wordpress/a11y' ).then(
+		( { speak } ) => speak( message ),
+		// Ignore failures to load the a11y module.
+		() => {}
+	);
+}
+
 // Add click and prefetch to all links.
 if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json
index eff80af2f28db3..f601a26a86f5f4 100644
--- a/packages/interactivity-router/tsconfig.json
+++ b/packages/interactivity-router/tsconfig.json
@@ -7,6 +7,6 @@
 		"checkJs": false,
 		"strict": false
 	},
-	"references": [ { "path": "../interactivity" } ],
+	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 9ea269fa269ad0..42f311973709dd 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Improve TypeScript support for generators ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+-   Refactor internal context proxies implementation ([#64713](https://github.com/WordPress/gutenberg/pull/64713)).
+
 ### Bug Fixes
 
 -   Prevent calling `proxifyContext` over an already-proxified context inside `wp-context` ([#65090](https://github.com/WordPress/gutenberg/pull/65090)).
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 6be9f3c4a0d7d8..5b6ce90fc5184e 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.7.0",
+	"version": "6.8.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",
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index b41d50722e3765..340880954683da 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -6,10 +6,6 @@
  */
 import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-/**
- * Internal dependencies
- */
-import { proxifyState, peek } from './proxies';
 
 /**
  * Internal dependencies
@@ -24,131 +20,7 @@ import {
 } from './utils';
 import { directive, getEvaluate, type DirectiveEntry } from './hooks';
 import { getScope } from './scopes';
-
-// Assigned objects should be ignored during proxification.
-const contextAssignedObjects = new WeakMap();
-
-// Store the context proxy and fallback for each object in the context.
-const contextObjectToProxy = new WeakMap();
-const contextProxyToObject = new WeakMap();
-const contextObjectToFallback = new WeakMap();
-
-const descriptor = Reflect.getOwnPropertyDescriptor;
-
-/**
- * Wrap a context object with a proxy to reproduce the context stack. The proxy
- * uses the passed `inherited` context as a fallback to look up for properties
- * that don't exist in the given context. Also, updated properties are modified
- * where they are defined, or added to the main context when they don't exist.
- *
- * By default, all plain objects inside the context are wrapped, unless it is
- * listed in the `ignore` option.
- *
- * @param current   Current context.
- * @param inherited Inherited context, used as fallback.
- *
- * @return The wrapped context object.
- */
-const proxifyContext = ( current: object, inherited: object = {} ): object => {
-	// Update the fallback object reference when it changes.
-	contextObjectToFallback.set( current, inherited );
-	if ( ! contextObjectToProxy.has( current ) ) {
-		const proxy = new Proxy( current, {
-			get: ( target: object, k: string ) => {
-				const fallback = contextObjectToFallback.get( current );
-				// Always subscribe to prop changes in the current context.
-				const currentProp = target[ k ];
-
-				// Return the inherited prop when missing in target.
-				if ( ! ( k in target ) && k in fallback ) {
-					return fallback[ k ];
-				}
-
-				// Proxify plain objects that were not directly assigned.
-				if (
-					k in target &&
-					! contextAssignedObjects.get( target )?.has( k ) &&
-					isPlainObject( currentProp )
-				) {
-					return proxifyContext( currentProp );
-				}
-
-				// Return the stored proxy for `currentProp` when it exists.
-				if ( contextObjectToProxy.has( currentProp ) ) {
-					return contextObjectToProxy.get( currentProp );
-				}
-
-				/*
-				 * For other cases, return the value from target, also
-				 * subscribing to changes in the parent context when the current
-				 * prop is not defined.
-				 */
-				return k in target ? currentProp : fallback[ k ];
-			},
-			set: ( target, k, value ) => {
-				const fallback = contextObjectToFallback.get( current );
-				const obj =
-					k in target || ! ( k in fallback ) ? target : fallback;
-
-				/*
-				 * Assigned object values should not be proxified so they point
-				 * to the original object and don't inherit unexpected
-				 * properties.
-				 */
-				if ( value && typeof value === 'object' ) {
-					if ( ! contextAssignedObjects.has( obj ) ) {
-						contextAssignedObjects.set( obj, new Set() );
-					}
-					contextAssignedObjects.get( obj ).add( k );
-				}
-
-				/*
-				 * When the value is a proxy, it's because it comes from the
-				 * context, so the inner value is assigned instead.
-				 */
-				if ( contextProxyToObject.has( value ) ) {
-					const innerValue = contextProxyToObject.get( value );
-					obj[ k ] = innerValue;
-				} else {
-					obj[ k ] = value;
-				}
-
-				return true;
-			},
-			ownKeys: ( target ) => [
-				...new Set( [
-					...Object.keys( contextObjectToFallback.get( current ) ),
-					...Object.keys( target ),
-				] ),
-			],
-			getOwnPropertyDescriptor: ( target, k ) =>
-				descriptor( target, k ) ||
-				descriptor( contextObjectToFallback.get( current ), k ),
-		} );
-		contextObjectToProxy.set( current, proxy );
-		contextProxyToObject.set( proxy, current );
-	}
-	return contextObjectToProxy.get( current );
-};
-
-/**
- * Recursively update values within a context object.
- *
- * @param target A context instance.
- * @param source Object with properties to update in `target`.
- */
-const updateContext = ( target: any, source: any ) => {
-	for ( const k in source ) {
-		if (
-			isPlainObject( peek( target, k ) ) &&
-			isPlainObject( source[ k ] )
-		) {
-			updateContext( peek( target, k ) as object, source[ k ] );
-		} else if ( ! ( k in target ) ) {
-			target[ k ] = source[ k ];
-		}
-	}
-};
+import { proxifyState, proxifyContext, deepMerge } from './proxies';
 
 /**
  * Recursively clone the passed object.
@@ -270,14 +142,19 @@ export default () => {
 			const defaultEntry = context.find(
 				( { suffix } ) => suffix === 'default'
 			);
-			const inheritedValue = useContext( inheritedContext );
+			const { client: inheritedClient, server: inheritedServer } =
+				useContext( inheritedContext );
 
 			const ns = defaultEntry!.namespace;
-			const currentValue = useRef( proxifyState( ns, {} ) );
+			const client = useRef( proxifyState( ns, {} ) );
+			const server = useRef( proxifyState( ns, {}, { readOnly: true } ) );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
-				const result = { ...inheritedValue };
+				const result = {
+					client: { ...inheritedClient },
+					server: { ...inheritedServer },
+				};
 				if ( defaultEntry ) {
 					const { namespace, value } = defaultEntry;
 					// Check that the value is a JSON object. Send a console warning if not.
@@ -286,17 +163,23 @@ export default () => {
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
-					updateContext(
-						currentValue.current,
-						deepClone( value ) as object
+					deepMerge(
+						client.current,
+						deepClone( value ) as object,
+						false
 					);
-					result[ namespace ] = proxifyContext(
-						currentValue.current,
-						inheritedValue[ namespace ]
+					deepMerge( server.current, deepClone( value ) as object );
+					result.client[ namespace ] = proxifyContext(
+						client.current,
+						inheritedClient[ namespace ]
+					);
+					result.server[ namespace ] = proxifyContext(
+						server.current,
+						inheritedServer[ namespace ]
 					);
 				}
 				return result;
-			}, [ defaultEntry, inheritedValue ] );
+			}, [ defaultEntry, inheritedClient, inheritedServer ] );
 
 			return createElement( Provider, { value: contextStack }, children );
 		},
@@ -690,17 +573,24 @@ export default () => {
 					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
 				const itemContext = proxifyContext(
 					proxifyState( namespace, {} ),
-					inheritedValue[ namespace ]
+					inheritedValue.client[ namespace ]
 				);
 				const mergedContext = {
-					...inheritedValue,
-					[ namespace ]: itemContext,
+					client: {
+						...inheritedValue.client,
+						[ namespace ]: itemContext,
+					},
+					server: { ...inheritedValue.server },
 				};
 
 				// Set the item after proxifying the context.
-				mergedContext[ namespace ][ itemProp ] = item;
+				mergedContext.client[ namespace ][ itemProp ] = item;
 
-				const scope = { ...getScope(), context: mergedContext };
+				const scope = {
+					...getScope(),
+					context: mergedContext.client,
+					serverContext: mergedContext.server,
+				};
 				const key = eachKey
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 215da8afef9b5b..6b55ec014aa799 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -93,7 +93,7 @@ interface DirectivesProps {
 }
 
 // Main context.
-const context = createContext< any >( {} );
+const context = createContext< any >( { client: {}, server: {} } );
 
 // WordPress Directives.
 const directiveCallbacks: Record< string, DirectiveCallback > = {};
@@ -190,9 +190,13 @@ const resolve = ( path: string, namespace: string ) => {
 	}
 	let resolvedStore = stores.get( namespace );
 	if ( typeof resolvedStore === 'undefined' ) {
-		resolvedStore = store( namespace, undefined, {
-			lock: universalUnlock,
-		} );
+		resolvedStore = store(
+			namespace,
+			{},
+			{
+				lock: universalUnlock,
+			}
+		);
 	}
 	const current = {
 		...resolvedStore,
@@ -253,7 +257,9 @@ const Directives = ( {
 	// element ref, state and props.
 	const scope = useRef< Scope >( {} as Scope ).current;
 	scope.evaluate = useCallback( getEvaluate( { scope } ), [] );
-	scope.context = useContext( context );
+	const { client, server } = useContext( context );
+	scope.context = client;
+	scope.serverContext = server;
 	/* eslint-disable react-hooks/rules-of-hooks */
 	scope.ref = previousScope?.ref || useRef( null );
 	/* eslint-enable react-hooks/rules-of-hooks */
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index 336c2a97226db7..9d013e4e744ed5 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -16,8 +16,8 @@ import { getNamespace } from './namespaces';
 import { parseServerData, populateServerData } from './store';
 import { proxifyState } from './proxies';
 
-export { store, getConfig } from './store';
-export { getContext, getElement } from './scopes';
+export { store, getConfig, getServerState } from './store';
+export { getContext, getServerContext, getElement } from './scopes';
 export {
 	withScope,
 	useWatch,
diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts
new file mode 100644
index 00000000000000..64517c91a6940e
--- /dev/null
+++ b/packages/interactivity/src/proxies/context.ts
@@ -0,0 +1,69 @@
+const contextObjectToProxy = new WeakMap();
+const contextObjectToFallback = new WeakMap();
+const contextProxies = new WeakSet();
+
+const descriptor = Reflect.getOwnPropertyDescriptor;
+
+// TODO: Use the proxy registry to avoid multiple proxies on the same object.
+const contextHandlers: ProxyHandler< object > = {
+	get: ( target, key ) => {
+		const fallback = contextObjectToFallback.get( target );
+		// Always subscribe to prop changes in the current context.
+		const currentProp = target[ key ];
+
+		/*
+		 * Return the value from `target` if it exists, or from `fallback`
+		 * otherwise. This way, in the case the property doesn't exist either in
+		 * `target` or `fallback`, it also subscribes to changes in the parent
+		 * context.
+		 */
+		return key in target ? currentProp : fallback[ key ];
+	},
+	set: ( target, key, value ) => {
+		const fallback = contextObjectToFallback.get( target );
+
+		// If the property exists in the current context, modify it. Otherwise,
+		// add it to the current context.
+		const obj = key in target || ! ( key in fallback ) ? target : fallback;
+		obj[ key ] = value;
+
+		return true;
+	},
+	ownKeys: ( target ) => [
+		...new Set( [
+			...Object.keys( contextObjectToFallback.get( target ) ),
+			...Object.keys( target ),
+		] ),
+	],
+	getOwnPropertyDescriptor: ( target, key ) =>
+		descriptor( target, key ) ||
+		descriptor( contextObjectToFallback.get( target ), key ),
+};
+
+/**
+ * Wrap a context object with a proxy to reproduce the context stack. The proxy
+ * uses the passed `inherited` context as a fallback to look up for properties
+ * that don't exist in the given context. Also, updated properties are modified
+ * where they are defined, or added to the main context when they don't exist.
+ *
+ * @param current   Current context.
+ * @param inherited Inherited context, used as fallback.
+ *
+ * @return The wrapped context object.
+ */
+export const proxifyContext = (
+	current: object,
+	inherited: object = {}
+): object => {
+	if ( contextProxies.has( current ) ) {
+		throw Error( 'This object cannot be proxified.' );
+	}
+	// Update the fallback object reference when it changes.
+	contextObjectToFallback.set( current, inherited );
+	if ( ! contextObjectToProxy.has( current ) ) {
+		const proxy = new Proxy( current, contextHandlers );
+		contextObjectToProxy.set( current, proxy );
+		contextProxies.add( proxy );
+	}
+	return contextObjectToProxy.get( current );
+};
diff --git a/packages/interactivity/src/proxies/index.ts b/packages/interactivity/src/proxies/index.ts
index 1a495de6b469fe..168e6467fc7016 100644
--- a/packages/interactivity/src/proxies/index.ts
+++ b/packages/interactivity/src/proxies/index.ts
@@ -3,3 +3,4 @@
  */
 export { proxifyState, peek, deepMerge } from './state';
 export { proxifyStore } from './store';
+export { proxifyContext } from './context';
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
index ec49c4b27c4adb..c91d8f6ab90a5b 100644
--- a/packages/interactivity/src/proxies/state.ts
+++ b/packages/interactivity/src/proxies/state.ts
@@ -46,6 +46,8 @@ const proxyToProps: WeakMap<
 export const hasPropSignal = ( proxy: object, key: string ) =>
 	proxyToProps.has( proxy ) && proxyToProps.get( proxy )!.has( key );
 
+const readOnlyProxies = new WeakSet();
+
 /**
  * Returns the {@link PropSignal | `PropSignal`} instance associated with the
  * specified prop in the passed proxy.
@@ -77,8 +79,11 @@ const getPropSignal = (
 			if ( get ) {
 				prop.setGetter( get );
 			} else {
+				const readOnly = readOnlyProxies.has( proxy );
 				prop.setValue(
-					shouldProxy( value ) ? proxifyState( ns, value ) : value
+					shouldProxy( value )
+						? proxifyState( ns, value, { readOnly } )
+						: value
 				);
 			}
 		}
@@ -148,6 +153,9 @@ const stateHandlers: ProxyHandler< object > = {
 		value: unknown,
 		receiver: object
 	): boolean {
+		if ( readOnlyProxies.has( receiver ) ) {
+			return false;
+		}
 		setNamespace( getNamespaceFromProxy( receiver ) );
 		try {
 			return Reflect.set( target, key, value, receiver );
@@ -161,6 +169,10 @@ const stateHandlers: ProxyHandler< object > = {
 		key: string,
 		desc: PropertyDescriptor
 	): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
 		const isNew = ! ( key in target );
 		const result = Reflect.defineProperty( target, key, desc );
 
@@ -199,6 +211,10 @@ const stateHandlers: ProxyHandler< object > = {
 	},
 
 	deleteProperty( target: object, key: string ): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
 		const result = Reflect.deleteProperty( target, key );
 
 		if ( result ) {
@@ -230,8 +246,10 @@ const stateHandlers: ProxyHandler< object > = {
  * Returns the proxy associated with the given state object, creating it if it
  * does not exist.
  *
- * @param namespace The namespace that will be associated to this proxy.
- * @param obj       The object to proxify.
+ * @param namespace        The namespace that will be associated to this proxy.
+ * @param obj              The object to proxify.
+ * @param options          Options.
+ * @param options.readOnly Read-only.
  *
  * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
  *         check if a proxy can be created for a specific object.
@@ -240,8 +258,15 @@ const stateHandlers: ProxyHandler< object > = {
  */
 export const proxifyState = < T extends object >(
 	namespace: string,
-	obj: T
-): T => createProxy( namespace, obj, stateHandlers ) as T;
+	obj: T,
+	options?: { readOnly?: boolean }
+): T => {
+	const proxy = createProxy( namespace, obj, stateHandlers ) as T;
+	if ( options?.readOnly ) {
+		readOnlyProxies.add( proxy );
+	}
+	return proxy;
+};
 
 /**
  * Reads the value of the specified property without subscribing to it.
diff --git a/packages/interactivity/src/proxies/test/context-proxy.ts b/packages/interactivity/src/proxies/test/context-proxy.ts
new file mode 100644
index 00000000000000..306b3e4a8aa94f
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/context-proxy.ts
@@ -0,0 +1,291 @@
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { proxifyContext, proxifyState } from '../';
+
+describe( 'Interactivity API', () => {
+	describe( 'context proxy', () => {
+		describe( 'get', () => {
+			it( 'should inherit props from its fallback', () => {
+				const fallback: any = proxifyContext( { a: 1 }, {} );
+				const context: any = proxifyContext( { b: 2 }, fallback );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+			} );
+
+			it( "should inherit props from its fallback's fallback", () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+				expect( context.c ).toBe( 3 );
+			} );
+
+			it( 'should list all inherited props', () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( Object.entries( context ) ).toEqual( [
+					[ 'a', 1 ],
+					[ 'b', 2 ],
+					[ 'c', 3 ],
+				] );
+			} );
+
+			it( 'should shadow properties defined in its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				expect( context.prop ).toBe( 'context' );
+			} );
+
+			it( 'should not inherit properties from nested objects', () => {
+				const fallback: any = proxifyContext( { obj: { a: 1 } }, {} );
+				const context: any = proxifyContext(
+					{ obj: { b: 2 } },
+					fallback
+				);
+
+				expect( 'a' in context.obj ).toBe( false );
+				expect( context.obj.b ).toBe( 2 );
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( state, fallback );
+
+				expect( context.a ).toBe( 1 );
+			} );
+		} );
+
+		describe( 'set', () => {
+			it( 'should modify props defined in it', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'fallback' );
+			} );
+
+			it( 'should modify props inherited from its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should see changes in inherited props', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				fallback.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should create non-inherited props in itself', () => {
+				const fallback: any = proxifyContext( {}, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBeUndefined();
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.a = 2;
+
+				expect( context.a ).toBe( 2 );
+				expect( state.a ).toBe( 2 );
+			} );
+		} );
+
+		describe( 'computations', () => {
+			it( 'should subscribe to changes in the current context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBe( 'context' );
+
+				context.fromContext = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to changes in inherited values', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBe( 'fallback' );
+
+				fallback.fromFallback = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to undefined props added to the context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBeUndefined();
+
+				context.fromContext = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to undefined props added to the fallback', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBeUndefined();
+
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to shadowed props', () => {
+				const fallbackState: any = proxifyState( 'test', {} );
+				const fallback: any = proxifyContext( fallbackState, {} );
+
+				const contextState: any = proxifyState( 'test', {} );
+				const context: any = proxifyContext( contextState, fallback );
+
+				const spy = jest.fn( () => context.prop );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.prop ).toBeUndefined();
+
+				fallbackState.prop = 'fromFallback';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.prop ).toBe( 'fromFallback' );
+
+				contextState.prop = 'fromContext';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( context.prop ).toBe( 'fromContext' );
+			} );
+
+			it( 'should subscribe to any changes in listed props', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => Object.keys( context ) );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( Object.keys( context ) ).toEqual( [] );
+
+				context.fromContext = 'added';
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( Object.keys( context ).sort() ).toEqual( [
+					'fromContext',
+					'fromFallback',
+				] );
+			} );
+		} );
+
+		describe( 'proxifyContext', () => {
+			it( 'should throw when trying to re-proxify a proxy object', () => {
+				const context = proxifyContext( {}, {} );
+				expect( () => proxifyContext( context, {} ) ).toThrow(
+					'This object cannot be proxified.'
+				);
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/state-proxy.ts b/packages/interactivity/src/proxies/test/state-proxy.ts
index 92500189fc8309..4b0d2b0a708c3a 100644
--- a/packages/interactivity/src/proxies/test/state-proxy.ts
+++ b/packages/interactivity/src/proxies/test/state-proxy.ts
@@ -9,7 +9,7 @@ import { effect } from '@preact/signals';
 /**
  * Internal dependencies
  */
-import { proxifyState, peek } from '../';
+import { proxifyState, peek, deepMerge } from '../';
 import { setScope, resetScope, getContext, getElement } from '../../scopes';
 import { setNamespace, resetNamespace } from '../../namespaces';
 
@@ -1265,5 +1265,202 @@ describe( 'Interactivity API', () => {
 				expect( x ).toBe( undefined );
 			} );
 		} );
+
+		describe( 'read-only', () => {
+			it( "should not allow modifying a prop's value", () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.prop = 'new value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.prop = 'new value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow modifying a prop descriptor', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					Object.defineProperty( readOnlyState, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+				expect( () => {
+					Object.defineProperty( readOnlyState.nested, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.newProp = 'value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.newProp = 'value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow removing props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					delete readOnlyState.prop;
+				} ).toThrow();
+				expect( () => {
+					delete readOnlyState.nested.prop;
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding items to an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.push( 4 ) ).toThrow();
+				expect( () => readOnlyState.nested.array.push( 4 ) ).toThrow();
+			} );
+
+			it( 'should not allow removing items from an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.pop() ).toThrow();
+				expect( () => readOnlyState.nested.array.pop() ).toThrow();
+			} );
+
+			it( 'should allow subscribing to prop changes', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.prop );
+				const spy2 = jest.fn( () => readOnlyState.nested.prop );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { prop: 'new value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { nested: { prop: 'new value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'new value' );
+			} );
+
+			it( 'should allow subscribing to new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.newProp );
+				const spy2 = jest.fn( () => readOnlyState.nested.newProp );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( undefined );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { newProp: 'value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { nested: { newProp: 'value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+			} );
+
+			it( 'should allow subscribing to array changes', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						array: [ 1, 2, 3 ],
+						nested: { array: [ 1, 2, 3 ] },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.array[ 0 ] );
+				const spy2 = jest.fn( () => readOnlyState.nested.array[ 0 ] );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 1 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { array: [ 4, 5, 6 ] } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { nested: { array: [] } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+			} );
+		} );
 	} );
 } );
diff --git a/packages/interactivity/src/scopes.ts b/packages/interactivity/src/scopes.ts
index 2e78755ec4bbe6..722305f6bee112 100644
--- a/packages/interactivity/src/scopes.ts
+++ b/packages/interactivity/src/scopes.ts
@@ -12,6 +12,7 @@ import type { Evaluate } from './hooks';
 export interface Scope {
 	evaluate: Evaluate;
 	context: object;
+	serverContext: object;
 	ref: RefObject< HTMLElement >;
 	attributes: createElement.JSX.HTMLAttributes;
 }
@@ -96,3 +97,46 @@ export const getElement = () => {
 		attributes: deepImmutable( attributes ),
 	} );
 };
+
+/**
+ * Retrieves the part of the inherited context defined and updated from the
+ * server.
+ *
+ * The object returned is read-only, and includes the context defined in PHP
+ * with `wp_interactivity_data_wp_context()`, including the corresponding
+ * inherited properties. When `actions.navigate()` is called, this object is
+ * updated to reflect the changes in the new visited page, without affecting the
+ * context returned by `getContext()`. Directives can subscribe to those changes
+ * to update the context if needed.
+ *
+ * @example
+ * ```js
+ *  store('...', {
+ *    callbacks: {
+ *      updateServerContext() {
+ *        const context = getContext();
+ *        const serverContext = getServerContext();
+ *        // Override some property with the new value that came from the server.
+ *        context.overridableProp = serverContext.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ *                  function exists is used.
+ * @return The server context content.
+ */
+export const getServerContext = < T extends object >(
+	namespace?: string
+): T => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getServerContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	return scope.serverContext[ namespace || getNamespace() ];
+};
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index c74764b902e194..b147e0f61163bf 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -12,6 +12,7 @@ export const stores = new Map();
 const rawStores = new Map();
 const storeLocks = new Map();
 const storeConfigs = new Map();
+const serverStates = new Map();
 
 /**
  * Get the defined config for the store with the passed namespace.
@@ -22,6 +23,39 @@ const storeConfigs = new Map();
 export const getConfig = ( namespace?: string ) =>
 	storeConfigs.get( namespace || getNamespace() ) || {};
 
+/**
+ * Get the part of the state defined and updated from the server.
+ *
+ * The object returned is read-only, and includes the state defined in PHP with
+ * `wp_interactivity_state()`. When using `actions.navigate()`, this object is
+ * updated to reflect the changes in its properites, without affecting the state
+ * returned by `store()`. Directives can subscribe to those changes to update
+ * the state if needed.
+ *
+ * @example
+ * ```js
+ *  const { state } = store('myStore', {
+ *    callbacks: {
+ *      updateServerState() {
+ *        const serverState = getServerState();
+ *        // Override some property with the new value that came from the server.
+ *        state.overridableProp = serverState.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store's namespace from which to retrieve the server state.
+ * @return The server state for the given namespace.
+ */
+export const getServerState = ( namespace?: string ) => {
+	const ns = namespace || getNamespace();
+	if ( ! serverStates.has( ns ) ) {
+		serverStates.set( ns, proxifyState( ns, {}, { readOnly: true } ) );
+	}
+	return serverStates.get( ns );
+};
+
 interface StoreOptions {
 	/**
 	 * Property to block/unblock private store namespaces.
@@ -50,6 +84,42 @@ interface StoreOptions {
 	lock?: boolean | string;
 }
 
+type Prettify< T > = { [ K in keyof T ]: T[ K ] } & {};
+type DeepPartial< T > = T extends object
+	? { [ P in keyof T ]?: DeepPartial< T[ P ] > }
+	: T;
+type DeepPartialState< T extends { state: object } > = Omit< T, 'state' > & {
+	state?: DeepPartial< T[ 'state' ] >;
+};
+type ConvertGeneratorToPromise< T > = T extends (
+	...args: infer A
+) => Generator< any, infer R, any >
+	? ( ...args: A ) => Promise< R >
+	: never;
+type ConvertGeneratorsToPromises< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertGeneratorToPromise< T[ K ] > extends never
+			? T[ K ]
+			: ConvertGeneratorToPromise< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertGeneratorsToPromises< T[ K ] > >
+		: T[ K ];
+};
+type ConvertPromiseToGenerator< T > = T extends (
+	...args: infer A
+) => Promise< infer R >
+	? ( ...args: A ) => Generator< any, R, any >
+	: never;
+type ConvertPromisesToGenerators< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertPromiseToGenerator< T[ K ] > extends never
+			? T[ K ]
+			: ConvertPromiseToGenerator< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertPromisesToGenerators< T[ K ] > >
+		: T[ K ];
+};
+
 export const universalUnlock =
 	'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
 
@@ -98,17 +168,34 @@ export const universalUnlock =
  *
  * @return A reference to the namespace content.
  */
-export function store< S extends object = {} >(
+
+// Overload for when the types are inferred.
+export function store< T extends object >(
+	namespace: string,
+	storePart: T,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they contain state.
+export function store< T extends { state: object } >(
+	namespace: string,
+	storePart: ConvertPromisesToGenerators< DeepPartialState< T > >,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they don't contain state.
+export function store< T extends object >(
 	namespace: string,
-	storePart?: S,
+	storePart: ConvertPromisesToGenerators< T >,
 	options?: StoreOptions
-): S;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
+// Overload for when types are divided into multiple parts.
 export function store< T extends object >(
 	namespace: string,
-	storePart?: T,
+	storePart: ConvertPromisesToGenerators< DeepPartial< T > >,
 	options?: StoreOptions
-): T;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
 export function store(
 	namespace: string,
@@ -187,6 +274,7 @@ export const populateServerData = ( data?: {
 		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
 			const st = store< any >( namespace, {}, { lock: universalUnlock } );
 			deepMerge( st.state, state, false );
+			deepMerge( getServerState( namespace ), state );
 		} );
 	}
 	if ( isPlainObject( data?.config ) ) {
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
new file mode 100644
index 00000000000000..1092001db03143
--- /dev/null
+++ b/packages/interactivity/src/test/store.ts
@@ -0,0 +1,286 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+describe( 'Interactivity API', () => {
+	describe( 'store', () => {
+		it( 'dummy test', () => {
+			expect( true ).toBe( true );
+		} );
+
+		describe( 'types', () => {
+			describe( 'the whole store can be inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.clientValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async( n: number ) {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.derived satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						state: {
+							clientValue: number;
+							serverValue: number;
+							readonly derived: number;
+						};
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						state: {
+							clientValue: 1,
+							// @ts-expect-error
+							nonExistent: 2,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, unknown > {
+								const n1 = myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the server state can be typed and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerStore = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const clientStore = {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					};
+
+					type Store = ServerStore & typeof clientStore;
+
+					const myStore = store< Store >( 'test', clientStore );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the state can be casted and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type State = {
+						clientValue: number;
+						serverValue: number;
+						derived: number;
+					};
+
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						} as State,
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed even if doesnt contain state', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+						callbacks: {
+							existent: number;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return n1 + n;
+							},
+						},
+						callbacks: {
+							existent: 1,
+							// @ts-expect-error
+							nonExistent: 1,
+						},
+					} );
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					myStore.callbacks.existent satisfies number;
+					// @ts-expect-error
+					myStore.callbacks.nonExistent satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the store can be divided into multiple parts', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerState = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const firstStorePart = {
+						state: {
+							clientValue1: 1,
+						},
+						actions: {
+							incrementValue1( n = 1 ) {
+								myStore.state.clientValue1 += n;
+							},
+						},
+					};
+
+					type FirstStorePart = typeof firstStorePart;
+
+					const secondStorePart = {
+						state: {
+							clientValue2: 'test',
+						},
+						actions: {
+							*asyncAction() {
+								return (
+									myStore.state.clientValue1 +
+									myStore.state.serverValue
+								);
+							},
+						},
+					};
+
+					type Store = ServerState &
+						FirstStorePart &
+						typeof secondStorePart;
+
+					const myStore = store< Store >( 'test', firstStorePart );
+					store( 'test', secondStorePart );
+
+					myStore.state.clientValue1 satisfies number;
+					myStore.state.clientValue2 satisfies string;
+					myStore.actions.incrementValue1( 1 );
+					myStore.actions.asyncAction() satisfies Promise< number >;
+					( await myStore.actions.asyncAction() ) satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies {};
+				};
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/tsconfig.test.json b/packages/interactivity/tsconfig.test.json
new file mode 100644
index 00000000000000..6a90abc2ba2210
--- /dev/null
+++ b/packages/interactivity/tsconfig.test.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"noEmit": true,
+		"emitDeclarationOnly": false,
+		"types": [ "jest" ]
+	},
+	"references": [ { "path": "./tsconfig.json" } ],
+	"files": [ "src/test/store.ts" ],
+	"exclude": []
+}
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 64f8c370bb6ece..f5e0d5e74762af 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index d15d648eaef446..932c3fde03de4d 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index b6690b7df5fc5d..2f8d8dd413674b 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -10,6 +10,25 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as interfaceStore } from '../../store';
 import complementaryAreaContext from '../complementary-area-context';
 
+/**
+ * Whether the role supports checked state.
+ *
+ * @param {import('react').AriaRole} role Role.
+ * @return {boolean} Whether the role supports checked state.
+ * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+ */
+function roleSupportsCheckedState( role ) {
+	return [
+		'checkbox',
+		'option',
+		'radio',
+		'switch',
+		'menuitemcheckbox',
+		'menuitemradio',
+		'treeitem',
+	].includes( role );
+}
+
 function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
@@ -17,6 +36,7 @@ function ComplementaryAreaToggle( {
 	icon,
 	selectedIcon,
 	name,
+	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
@@ -26,12 +46,18 @@ function ComplementaryAreaToggle( {
 			identifier,
 		[ identifier, scope ]
 	);
+
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+
 	return (
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
 			aria-controls={ identifier.replace( '/', ':' ) }
+			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
+			aria-checked={
+				roleSupportsCheckedState( props.role ) ? isSelected : undefined
+			}
 			onClick={ () => {
 				if ( isSelected ) {
 					disableComplementaryArea( scope );
@@ -39,6 +65,7 @@ function ComplementaryAreaToggle( {
 					enableComplementaryArea( scope, identifier );
 				}
 			} }
+			shortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 363a6ee9dea76c..d9fa8e71acb23a 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -275,6 +275,7 @@ function ComplementaryArea( {
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
+							shortcut={ toggleShortcut }
 						/>
 					) }
 				</PinnedItems>
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 81f2c4b164a3ab..ef424aaeebf220 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 553c3182bb5668..462b97bda17214 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 7f7f80b815a850..2ed1dc24299f45 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 4381a0f287235f..d55ce881a09566 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index e48d25dc1e6424..a3ecded683cd17 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.8.0 (2024-09-19)
+
 ## 12.7.0 (2024-09-05)
 
 ## 12.6.0 (2024-08-21)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 27638c711d4d1e..72be60b0f3376c 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.7.0",
+	"version": "12.8.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 572b4aa137a141..3e61ea09412d63 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index b8ccbfcd36beff..69fb9cfa181f44 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index fe3506ea4a5f19..356e850692af4d 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index dd560424b66ff7..038e15ebc1532b 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index 51050728f2f5a3..a578adb34bd3d3 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 5d8ec0545d7e3f..d63d5757dcbf31 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index daea6da3404d3f..6853a036fdaa50 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 62aab79635e9c4..758c1b5934a955 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 9f62523fd94e11..852f30a2999175 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 839532327faa24..03c1c11af9e49f 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/index.js b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
index d20ba9fcf10999..fdad08f80d213c 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/index.js
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/index.js
@@ -17,8 +17,8 @@ function ImportDropdown( { onUpload } ) {
 			contentClassName="list-reusable-blocks-import-dropdown__content"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
+					className="list-reusable-blocks-import-dropdown__button"
 					aria-expanded={ isOpen }
 					onClick={ onToggle }
 					variant="primary"
diff --git a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
index 8c2dc9c94bd71f..abef499a63b298 100644
--- a/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-dropdown/style.scss
@@ -1,3 +1,8 @@
 .list-reusable-blocks-import-dropdown__content .components-popover__content {
 	padding: 10px;
 }
+
+[class].list-reusable-blocks-import-dropdown__button {
+	// Todo: Make core button height and gutenberg button height equal.
+	height: 30px;
+}
diff --git a/packages/list-reusable-blocks/src/components/import-form/index.js b/packages/list-reusable-blocks/src/components/import-form/index.js
index b78869df61eb6c..ba6cffb956f04e 100644
--- a/packages/list-reusable-blocks/src/components/import-form/index.js
+++ b/packages/list-reusable-blocks/src/components/import-form/index.js
@@ -84,8 +84,7 @@ function ImportForm( { instanceId, onUpload } ) {
 			</label>
 			<input id={ inputId } type="file" onChange={ onChangeFile } />
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				__next40pxDefaultSize
 				type="submit"
 				isBusy={ isLoading }
 				accessibleWhenDisabled
diff --git a/packages/list-reusable-blocks/src/components/import-form/style.scss b/packages/list-reusable-blocks/src/components/import-form/style.scss
index 844130b7c5914a..e72d63fd2a4903 100644
--- a/packages/list-reusable-blocks/src/components/import-form/style.scss
+++ b/packages/list-reusable-blocks/src/components/import-form/style.scss
@@ -5,7 +5,6 @@
 
 .list-reusable-blocks-import-form__button {
 	margin-top: 10px;
-	margin-bottom: 10px;
 	float: right;
 }
 
diff --git a/packages/list-reusable-blocks/src/style.scss b/packages/list-reusable-blocks/src/style.scss
index ad85c700586099..6767bd0bd7e158 100644
--- a/packages/list-reusable-blocks/src/style.scss
+++ b/packages/list-reusable-blocks/src/style.scss
@@ -6,10 +6,6 @@
 	align-items: center;
 	position: relative;
 	top: -3px;
-	// Todo: Make core button height and gutenberg button height equal.
-	.components-button {
-		height: 26px;
-	}
 }
 
 @include wordpress-admin-schemes();
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 26282b6b2bda21..a25bdf05596f86 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ### New Features
 
 -   Rewrite in TypeScript, exporting all the individual utility functions.
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 1cfe019e89d0a6..e90ab5a98e87d6 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index f32648df69728e..dbff0c69b7449d 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index a4e2c5ea8d98c1..09056f5fe6818c 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 24dfd09fff55a2..ecf89f4df64717 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index ad88e3fd442a1d..38080c1e09d834 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index 85feaa73dbc239..51a49b1bf9314c 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.8.0 (2024-09-19)
+
 ## 9.7.0 (2024-09-05)
 
 ## 9.6.0 (2024-08-21)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index 7a8e565d163aa2..8bc5bfea622f09 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.7.0",
+	"version": "9.8.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/src/components/dot-tip/index.js b/packages/nux/src/components/dot-tip/index.js
index 80db7568b351b1..e2768789ad1fda 100644
--- a/packages/nux/src/components/dot-tip/index.js
+++ b/packages/nux/src/components/dot-tip/index.js
@@ -57,8 +57,7 @@ export function DotTip( {
 			<p>{ children }</p>
 			<p>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					variant="link"
 					onClick={ onDismiss }
 				>
@@ -66,8 +65,7 @@ export function DotTip( {
 				</Button>
 			</p>
 			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
+				size="small"
 				className="nux-dot-tip__disable"
 				icon={ close }
 				label={ __( 'Disable tips' ) }
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index dbea46e35fb091..a160b7f6555768 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -7,7 +7,7 @@ exports[`DotTip should render correctly 1`] = `
   data-wp-c16t="true"
   data-wp-component="Popover"
   role="dialog"
-  style="position: absolute; top: 0px; left: 0px; opacity: 1; transform: translateX(0px) translateY(0px) translateX(0em) scale(1) translateZ(0); transform-origin: 0% 50% 0;"
+  style="position: absolute; top: 0px; left: 0px; transform: none;"
   tabindex="-1"
 >
   <div
@@ -19,7 +19,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <p>
       <button
-        class="components-button is-link"
+        class="components-button is-next-40px-default-size is-link"
         type="button"
       >
         Got it
@@ -27,7 +27,7 @@ exports[`DotTip should render correctly 1`] = `
     </p>
     <button
       aria-label="Disable tips"
-      class="components-button nux-dot-tip__disable has-icon"
+      class="components-button nux-dot-tip__disable is-small has-icon"
       type="button"
     >
       <svg
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index eaef3c431d6687..1579dd646228ff 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index 6d67aa7ef3ac9e..e3563325f95fa7 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 28dd8788a390c6..5207348c7bd7c6 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -4,7 +4,7 @@
 import { useState, useId } from '@wordpress/element';
 import {
 	InspectorControls,
-	privateApis as blockEditorPrivateApis,
+	useBlockBindingsUtils,
 } from '@wordpress/block-editor';
 import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -17,9 +17,6 @@ import {
 	AllowOverridesModal,
 	DisallowOverridesModal,
 } from './allow-overrides-modal';
-import { unlock } from '../lock-unlock';
-
-const { useBlockBindingsUtils } = unlock( blockEditorPrivateApis );
 
 function PatternOverridesControls( {
 	attributes,
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index c2c010c8881150..18d5e1a38567dc 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 9cc58fc5096be2..e9e9bc0667f9a1 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index b16c9284417a31..e4441308f0fe40 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index d012dde494958e..67c030b3a10706 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 774c2edf77e0c3..c7d61b14eadf18 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 29e617382161ed..864056ee0d61e5 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index a4a3081901bf52..79a755f40bfd5b 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index a318979abed2a1..a82a883e2b5747 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 7d87ce93868757..840c476e8ece81 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 5b12d274af30ae..fbd2cc46033ee7 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/src/components/preferences-modal-tabs/index.js b/packages/preferences/src/components/preferences-modal-tabs/index.js
index d87e565f5e3364..f73bdd7f029dc7 100644
--- a/packages/preferences/src/components/preferences-modal-tabs/index.js
+++ b/packages/preferences/src/components/preferences-modal-tabs/index.js
@@ -3,10 +3,7 @@
  */
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorBackButton as NavigatorBackButton,
+	Navigator,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
@@ -98,17 +95,14 @@ export default function PreferencesModalTabs( { sections } ) {
 		);
 	} else {
 		modalContent = (
-			<NavigatorProvider
-				initialPath="/"
-				className="preferences__provider"
-			>
-				<NavigatorScreen path="/">
+			<Navigator initialPath="/" className="preferences__provider">
+				<Navigator.Screen path="/">
 					<Card isBorderless size="small">
 						<CardBody>
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
-										<NavigatorButton
+										<Navigator.Button
 											key={ tab.name }
 											path={ `/${ tab.name }` }
 											as={ Item }
@@ -130,17 +124,17 @@ export default function PreferencesModalTabs( { sections } ) {
 													/>
 												</FlexItem>
 											</HStack>
-										</NavigatorButton>
+										</Navigator.Button>
 									);
 								} ) }
 							</ItemGroup>
 						</CardBody>
 					</Card>
-				</NavigatorScreen>
+				</Navigator.Screen>
 				{ sections.length &&
 					sections.map( ( section ) => {
 						return (
-							<NavigatorScreen
+							<Navigator.Screen
 								key={ `${ section.name }-menu` }
 								path={ `/${ section.name }` }
 							>
@@ -151,7 +145,7 @@ export default function PreferencesModalTabs( { sections } ) {
 										size="small"
 										gap="6"
 									>
-										<NavigatorBackButton
+										<Navigator.BackButton
 											icon={
 												isRTL()
 													? chevronRight
@@ -165,10 +159,10 @@ export default function PreferencesModalTabs( { sections } ) {
 									</CardHeader>
 									<CardBody>{ section.content }</CardBody>
 								</Card>
-							</NavigatorScreen>
+							</Navigator.Screen>
 						);
 					} ) }
-			</NavigatorProvider>
+			</Navigator>
 		);
 	}
 
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index e0e01d2b7f3ac8..28d178a87f980b 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index f6c7797f2b6e7f..27a72866e6126d 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index 48db582f65e109..f0bd389bb08b73 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 8296c6348e9bef..2119fc70b11d1c 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index a7f1257b8f6b49..1c343e2cd0e818 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index c8d7cbe1cebb9a..a60c61528bd5ee 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index cd6449dc774ce7..f7807d3667b8a8 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index 3a3dd1aeab5706..957eec5e34b49e 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index 167e68512b3dfc..797d6e3a9cfe2d 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 2e33d7c44d6cf4..e4e1a345f05567 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index d0c0dbe7079f4e..cdab707f520dc1 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index d39fc7bba4ba5e..dd4e513e333830 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 8147d5c3b3475f..5f28f282f760f8 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index 285bcc27ba0a62..7901045e659b28 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index bd03c25219ddbc..82c3b1b4c2e92b 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 1efebcb92de7f8..8e151e7d6bbfa3 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 33f4ef529587f2..9ea28faa2e6c9e 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 8c15057189dc9a..3e5e9cfb0ca77d 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index bceca4876654cf..e0d8592df4d8c3 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -191,8 +191,7 @@ export default function ReusableBlockConvertButton( {
 							/>
 							<HStack justify="right">
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () => {
 										setIsModalOpen( false );
@@ -203,8 +202,7 @@ export default function ReusableBlockConvertButton( {
 								</Button>
 
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 								>
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index cee6ada55f7b61..e456968e24875b 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 3c3abc422fa5f9..033a4f2c747abe 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -430,7 +430,7 @@ Create an HTML string from a Rich Text value.
 
 _Parameters_
 
--   _$1_ `Object`: Named argements.
+-   _$1_ `Object`: Named arguments.
 -   _$1.value_ `RichTextValue`: Rich text value.
 -   _$1.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
 
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index a5a96c77175c1f..a7e8e4b173c154 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/component/event-listeners/copy-handler.js b/packages/rich-text/src/component/event-listeners/copy-handler.js
index 1a92237bb4c5b4..0cc1594c3ab914 100644
--- a/packages/rich-text/src/component/event-listeners/copy-handler.js
+++ b/packages/rich-text/src/component/event-listeners/copy-handler.js
@@ -2,21 +2,18 @@
  * Internal dependencies
  */
 import { toHTMLString } from '../../to-html-string';
+import { isCollapsed } from '../../is-collapsed';
 import { slice } from '../../slice';
-import { remove } from '../../remove';
 import { getTextContent } from '../../get-text-content';
 
 export default ( props ) => ( element ) => {
 	function onCopy( event ) {
-		const { record, createRecord, handleChange } = props.current;
+		const { record } = props.current;
 		const { ownerDocument } = element;
-		const { defaultView } = ownerDocument;
-		const { anchorNode, focusNode, isCollapsed } =
-			defaultView.getSelection();
-		const containsSelection =
-			element.contains( anchorNode ) && element.contains( focusNode );
-
-		if ( isCollapsed || ! containsSelection ) {
+		if (
+			isCollapsed( record.current ) ||
+			! element.contains( ownerDocument.activeElement )
+		) {
 			return;
 		}
 
@@ -29,7 +26,7 @@ export default ( props ) => ( element ) => {
 		event.preventDefault();
 
 		if ( event.type === 'cut' ) {
-			handleChange( remove( createRecord() ) );
+			ownerDocument.execCommand( 'delete' );
 		}
 	}
 
diff --git a/packages/rich-text/src/component/event-listeners/input-and-selection.js b/packages/rich-text/src/component/event-listeners/input-and-selection.js
index 11dcdb0d8ff9ab..621f1c59fab04e 100644
--- a/packages/rich-text/src/component/event-listeners/input-and-selection.js
+++ b/packages/rich-text/src/component/event-listeners/input-and-selection.js
@@ -114,13 +114,14 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		const { anchorNode, focusNode } = defaultView.getSelection();
-		const containsSelection =
-			element.contains( anchorNode ) &&
-			element.contains( focusNode ) &&
-			ownerDocument.activeElement.contains( element );
-
-		if ( ! containsSelection ) {
+		// Ensure the active element is the rich text element.
+		if ( ownerDocument.activeElement !== element ) {
+			// If it is not, we can stop listening for selection changes. We
+			// resume listening when the element is focused.
+			ownerDocument.removeEventListener(
+				'selectionchange',
+				handleSelectionChange
+			);
 			return;
 		}
 
@@ -254,9 +255,5 @@ export default ( props ) => ( element ) => {
 		element.removeEventListener( 'compositionstart', onCompositionStart );
 		element.removeEventListener( 'compositionend', onCompositionEnd );
 		element.removeEventListener( 'focus', onFocus );
-		ownerDocument.removeEventListener(
-			'selectionchange',
-			handleSelectionChange
-		);
 	};
 };
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 0b0a269509e7ec..898bdfa73b330e 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -431,7 +431,7 @@ export function removeReservedCharacters( string ) {
 /**
  * Creates a Rich Text value from a DOM element and range.
  *
- * @param {Object}  $1                  Named argements.
+ * @param {Object}  $1                  Named arguments.
  * @param {Element} [$1.element]        Element to create value from.
  * @param {Range}   [$1.range]          Range to create value from.
  * @param {boolean} [$1.isEditableTree]
@@ -591,7 +591,7 @@ function createFromElement( { element, range, isEditableTree } ) {
 /**
  * Gets the attributes of an element in object shape.
  *
- * @param {Object}  $1         Named argements.
+ * @param {Object}  $1         Named arguments.
  * @param {Element} $1.element Element to get attributes from.
  *
  * @return {Object|void} Attribute object or `undefined` if the element has no
diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js
index 35089003f0b3fb..f770dfdefc128a 100644
--- a/packages/rich-text/src/to-html-string.js
+++ b/packages/rich-text/src/to-html-string.js
@@ -19,7 +19,7 @@ import { toTree } from './to-tree';
 /**
  * Create an HTML string from a Rich Text value.
  *
- * @param {Object}        $1                      Named argements.
+ * @param {Object}        $1                      Named arguments.
  * @param {RichTextValue} $1.value                Rich text value.
  * @param {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
  *
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index 02871d4f31e135..2d8d93373f4c5e 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/router/package.json b/packages/router/package.json
index bcc709bbac5d30..5efc014ee221c9 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 43fe001351bc2c..d24f9dfc7c02a4 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 30.0.0 (2024-09-19)
+
 
 ### Breaking Changes
 
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index d9e74d0c71826a..f1546a9ff7b7e1 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "29.0.0",
+	"version": "30.0.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index d576f09c8e34b7..5acfc6a5cacae6 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 9ace449e3fe966..6b6be2fb7e88d5 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index 6abdd3c52f6d74..cc11e7806f00f4 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 10e368d06c9955..c16f22d5023cfb 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index a5292bfdd6c191..43598ca011863e 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 982ac1c1fa89db..49327c487b2322 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 4cc05e02105ff7..7ba3f7fd28dd7c 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 23.0.0 (2024-09-19)
+
 ### Breaking Changes
 
 -   Updated `stylelint` peer dependency requirement to `^16.8.2` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 874ec2af0c664d..8aa35643b3d7e7 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "22.7.0",
+	"version": "23.0.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index 071974be2a3a88..4b4978c4eab1ba 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index ba8c433e880c3b..b96133c749ad30 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index 7258699a5322ae..068047bb7f8a58 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 1a06b76ccb111b..346623f3df1735 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index cbe86921a489d2..a8ad0c1d7fbf0c 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 4574d94f46d7e1..1147efbb72a59d 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index fc3082dd1bd0c6..491eaf2e7b8ad2 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/url/package.json b/packages/url/package.json
index c8360c81008fa2..d04b42a2e19fb4 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 1bc96013d724bb..58850208f348c5 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index 69fe9c8695c6ce..1a5d1a1c7f5b44 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index bb7df7b6330625..248b318d7b576c 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 1095d2efd75621..ded853e825cb0c 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index be1af839314954..cf3d8c8eac0c2d 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 595bad0f733652..ccc2995650d81c 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index f371786c106d6f..c5ca43211e58e6 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -11,13 +11,11 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockIcon,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
 import { brush as brushIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { useEntityRecord } from '@wordpress/core-data';
 
 /**
@@ -102,11 +100,6 @@ function NotEmpty( {
 	const { record: widgetType, hasResolved: hasResolvedWidgetType } =
 		useEntityRecord( 'root', 'widgetType', widgetTypeId );
 
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
 	const setInstance = useCallback( ( nextInstance ) => {
 		setAttributes( { instance: nextInstance } );
 	}, [] );
@@ -130,8 +123,7 @@ function NotEmpty( {
 		);
 	}
 
-	const mode =
-		idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
+	const mode = idBase && ! isSelected ? 'preview' : 'edit';
 
 	return (
 		<>
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 0a5e3ae4d3b206..79a5a75b3ef833 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index 4f6fe750e3fad6..c8b610c9ccffe9 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/phpunit/blocks/render-post-template-test.php b/phpunit/blocks/render-post-template-test.php
index e375758044681a..e929e459654fe7 100644
--- a/phpunit/blocks/render-post-template-test.php
+++ b/phpunit/blocks/render-post-template-test.php
@@ -113,24 +113,33 @@ public function test_rendering_post_template_with_main_query_loop() {
 	}
 
 	/**
-	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a post
+	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a single post
 	 * as the main query loop has already been started. In this case, the main query object needs to be cloned to
 	 * prevent an infinite loop.
+	 * Also tests that the default query returns posts of the 'post' post type when in a single post of any post type.
 	 */
 	public function test_rendering_post_template_with_main_query_loop_already_started() {
 		global $wp_query, $wp_the_query;
 
 		// Query block with post template block.
-		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content  = '<!-- wp:query {"query":{"inherit":false}} -->';
 		$content .= '<!-- wp:post-template {"align":"wide"} -->';
 		$content .= '<!-- wp:post-title /-->';
 		$content .= '<!-- /wp:post-template -->';
 		$content .= '<!-- /wp:query -->';
 
-		$expected  = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
-		$expected .= '<li class="wp-block-post post-' . self::$post->ID . ' post type-post status-publish format-standard hentry category-uncategorized">';
-		$expected .= '<h2 class="wp-block-post-title">' . self::$post->post_title . '</h2>';
-		$expected .= '</li>';
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
 		$expected .= '</ul>';
 
 		// Update the post's content to have a query block for the same query as the main query.
@@ -156,4 +165,55 @@ public function test_rendering_post_template_with_main_query_loop_already_starte
 
 		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
 	}
+
+	/**
+	 * Tests that the `core/post-template` block rewinds the default query when not in a single post of any post type.
+	 */
+	public function test_rendering_post_template_with_main_query_loop_not_single_post() {
+		global $wp_query, $wp_the_query;
+
+		// Query block with post template block.
+		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content .= '<!-- wp:post-template {"align":"wide"} -->';
+		$content .= '<!-- wp:post-title /-->';
+		$content .= '<!-- /wp:post-template -->';
+		$content .= '<!-- /wp:query -->';
+
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
+		$expected .= '</ul>';
+
+		// Update the post's content to have a query block for the same query as the main query.
+		wp_update_post(
+			array(
+				'ID'                    => self::$post->ID,
+				'post_content'          => $content,
+				'post_content_filtered' => $content,
+			)
+		);
+
+		// Set main query to all posts.
+		$wp_query     = new WP_Query( array( 'post_type' => 'post' ) );
+		$wp_the_query = $wp_query;
+
+		// Get post content within main query loop.
+		$output = '';
+		while ( $wp_query->have_posts() ) {
+			$wp_query->the_post();
+
+			$output = get_echo( 'the_content' );
+		}
+
+		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
+	}
 }
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index 5d078193f0c3bf..36746d05669519 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -24,12 +24,6 @@
 define( 'GUTENBERG_DIR_TESTDATA', __DIR__ . '/data/' );
 define( 'GUTENBERG_DIR_TESTFIXTURES', __DIR__ . '/fixtures/' );
 
-// Pretend that these are Core unit tests. This is needed so that
-// wp_theme_has_theme_json() does not cache its return value between each test.
-if ( ! defined( 'WP_RUN_CORE_TESTS' ) ) {
-	define( 'WP_RUN_CORE_TESTS', true );
-}
-
 // Require composer dependencies.
 require_once dirname( __DIR__ ) . '/vendor/autoload.php';
 
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 85731a7dff5206..c9453f4bd8e5c3 100644
--- a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -12,11 +12,21 @@ class WP_REST_Global_Styles_Controller_Gutenberg_Test extends WP_Test_REST_Contr
 	 */
 	protected static $admin_id;
 
+	/**
+	 * @var int
+	 */
+	protected static $editor_id;
+
 	/**
 	 * @var int
 	 */
 	protected static $subscriber_id;
 
+	/**
+	 * @var int
+	 */
+	protected static $theme_manager_id;
+
 	/**
 	 * @var int
 	 */
@@ -44,12 +54,30 @@ public static function wpSetupBeforeClass( $factory ) {
 			)
 		);
 
+		self::$editor_id = $factory->user->create(
+			array(
+				'role' => 'editor',
+			)
+		);
+
 		self::$subscriber_id = $factory->user->create(
 			array(
 				'role' => 'subscriber',
 			)
 		);
 
+		self::$theme_manager_id = $factory->user->create(
+			array(
+				'role' => 'subscriber',
+			)
+		);
+
+		// Add the 'edit_theme_options' capability to the theme manager (subscriber).
+		$theme_manager_id = get_user_by( 'id', self::$theme_manager_id );
+		if ( $theme_manager_id instanceof WP_User ) {
+			$theme_manager_id->add_cap( 'edit_theme_options' );
+		}
+
 		// This creates the global styles for the current theme.
 		self::$global_styles_id = $factory->post->create(
 			array(
@@ -72,7 +100,9 @@ public static function wpSetupBeforeClass( $factory ) {
 	 */
 	public static function wpTearDownAfterClass() {
 		self::delete_user( self::$admin_id );
+		self::delete_user( self::$editor_id );
 		self::delete_user( self::$subscriber_id );
+		self::delete_user( self::$theme_manager_id );
 	}
 
 	/**
@@ -195,17 +225,50 @@ public function test_get_theme_item_no_user() {
 		wp_set_current_user( 0 );
 		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertErrorResponse( 'rest_cannot_manage_global_styles', $response, 401 );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 401 );
 	}
 
 	/**
 	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
 	 */
-	public function test_get_theme_item_permission_check() {
+	public function test_get_theme_item_subscriber_permission_check() {
 		wp_set_current_user( self::$subscriber_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_editor_permission_check() {
+		wp_set_current_user( self::$editor_id );
+		switch_theme( 'emptytheme' );
 		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertErrorResponse( 'rest_cannot_manage_global_styles', $response, 403 );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_theme_options_manager_permission_check() {
+		wp_set_current_user( self::$theme_manager_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
 	}
 
 	/**
diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
index 79783f1c1d5a1c..9ebc6258ce71c4 100644
--- a/platform-docs/package-lock.json
+++ b/platform-docs/package-lock.json
@@ -3365,24 +3365,6 @@
 				"@types/ms": "*"
 			}
 		},
-		"node_modules/@types/eslint": {
-			"version": "8.56.5",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.5.tgz",
-			"integrity": "sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==",
-			"dependencies": {
-				"@types/estree": "*",
-				"@types/json-schema": "*"
-			}
-		},
-		"node_modules/@types/eslint-scope": {
-			"version": "3.7.7",
-			"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-			"integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-			"dependencies": {
-				"@types/eslint": "*",
-				"@types/estree": "*"
-			}
-		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3645,9 +3627,10 @@
 			}
 		},
 		"node_modules/@types/unist": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
-			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
 		},
 		"node_modules/@types/ws": {
 			"version": "8.5.10",
@@ -3863,10 +3846,11 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/acorn-import-assertions": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-			"integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+		"node_modules/acorn-import-attributes": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+			"integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8"
 			}
@@ -3908,15 +3892,15 @@
 			}
 		},
 		"node_modules/ajv": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz",
-			"integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==",
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
 			"license": "MIT",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
 				"json-schema-traverse": "^1.0.0",
-				"require-from-string": "^2.0.2",
-				"uri-js": "^4.4.1"
+				"require-from-string": "^2.0.2"
 			},
 			"funding": {
 				"type": "github",
@@ -4284,9 +4268,10 @@
 			}
 		},
 		"node_modules/body-parser": {
-			"version": "1.20.2",
-			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-			"integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+			"version": "1.20.3",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+			"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+			"license": "MIT",
 			"dependencies": {
 				"bytes": "3.1.2",
 				"content-type": "~1.0.5",
@@ -4296,7 +4281,7 @@
 				"http-errors": "2.0.0",
 				"iconv-lite": "0.4.24",
 				"on-finished": "2.4.1",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"raw-body": "2.5.2",
 				"type-is": "~1.6.18",
 				"unpipe": "1.0.0"
@@ -4310,6 +4295,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
 			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -4318,6 +4304,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -4325,7 +4312,8 @@
 		"node_modules/body-parser/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/bonjour-service": {
 			"version": "1.2.1",
@@ -4875,9 +4863,10 @@
 			}
 		},
 		"node_modules/compressible/node_modules/mime-db": {
-			"version": "1.52.0",
-			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"version": "1.53.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.53.0.tgz",
+			"integrity": "sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -4979,6 +4968,7 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
 			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -5438,12 +5428,12 @@
 			"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
 		},
 		"node_modules/debug": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-			"integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
 			"license": "MIT",
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -5591,6 +5581,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
 			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -5607,6 +5598,7 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
 			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8",
 				"npm": "1.2.8000 || >= 1.4.16"
@@ -5735,9 +5727,10 @@
 			}
 		},
 		"node_modules/docusaurus-lunr-search/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/docusaurus-lunr-search/node_modules/bail": {
 			"version": "1.0.5",
@@ -5925,7 +5918,8 @@
 		"node_modules/ee-first": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.704",
@@ -5960,17 +5954,19 @@
 			}
 		},
 		"node_modules/encodeurl": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
 		},
 		"node_modules/enhanced-resolve": {
-			"version": "5.16.0",
-			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-			"integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+			"version": "5.17.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+			"integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+			"license": "MIT",
 			"dependencies": {
 				"graceful-fs": "^4.2.4",
 				"tapable": "^2.2.0"
@@ -6217,6 +6213,7 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -6269,37 +6266,37 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-			"integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+			"version": "4.21.0",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+			"integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
 			"license": "MIT",
 			"dependencies": {
 				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
-				"body-parser": "1.20.2",
+				"body-parser": "1.20.3",
 				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
 				"cookie": "0.6.0",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
-				"finalhandler": "1.2.0",
+				"finalhandler": "1.3.1",
 				"fresh": "0.5.2",
 				"http-errors": "2.0.0",
-				"merge-descriptors": "1.0.1",
+				"merge-descriptors": "1.0.3",
 				"methods": "~1.1.2",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.7",
+				"path-to-regexp": "0.1.10",
 				"proxy-addr": "~2.0.7",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"range-parser": "~1.2.1",
 				"safe-buffer": "5.2.1",
-				"send": "0.18.0",
-				"serve-static": "1.15.0",
+				"send": "0.19.0",
+				"serve-static": "1.16.2",
 				"setprototypeof": "1.2.0",
 				"statuses": "2.0.1",
 				"type-is": "~1.6.18",
@@ -6335,9 +6332,10 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
 		"node_modules/express/node_modules/path-to-regexp": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-			"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+			"integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+			"license": "MIT"
 		},
 		"node_modules/express/node_modules/range-parser": {
 			"version": "1.2.1",
@@ -6388,6 +6386,12 @@
 			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
 			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
 		},
+		"node_modules/fast-uri": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+			"integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+			"license": "MIT"
+		},
 		"node_modules/fast-url-parser": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
@@ -6523,12 +6527,13 @@
 			}
 		},
 		"node_modules/finalhandler": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-			"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+			"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+			"license": "MIT",
 			"dependencies": {
 				"debug": "2.6.9",
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
@@ -6543,6 +6548,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -6550,7 +6556,8 @@
 		"node_modules/finalhandler/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/find-cache-dir": {
 			"version": "4.0.0",
@@ -6770,6 +6777,7 @@
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
 			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -7212,9 +7220,10 @@
 			}
 		},
 		"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/hast-util-from-parse5/node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
@@ -7383,9 +7392,10 @@
 			}
 		},
 		"node_modules/hast-util-raw/node_modules/vfile-location": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
-			"integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+			"integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
 				"vfile": "^6.0.0"
@@ -7439,9 +7449,10 @@
 			}
 		},
 		"node_modules/hast-util-select/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/hast-util-select/node_modules/unist-util-visit": {
 			"version": "2.0.3",
@@ -7594,9 +7605,9 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
-			"integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==",
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+			"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
 			"license": "MIT"
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/property-information": {
@@ -7619,12 +7630,12 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
-			"integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+			"integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
 			"license": "MIT",
 			"dependencies": {
-				"inline-style-parser": "0.2.3"
+				"inline-style-parser": "0.2.4"
 			}
 		},
 		"node_modules/hast-util-to-parse5": {
@@ -7748,9 +7759,10 @@
 			}
 		},
 		"node_modules/hastscript/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/he": {
 			"version": "1.2.0",
@@ -7987,6 +7999,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
 			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"license": "MIT",
 			"dependencies": {
 				"depd": "2.0.0",
 				"inherits": "2.0.4",
@@ -8074,6 +8087,7 @@
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
 			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"license": "MIT",
 			"dependencies": {
 				"safer-buffer": ">= 2.1.2 < 3"
 			},
@@ -9281,6 +9295,7 @@
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
 			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -9297,9 +9312,13 @@
 			}
 		},
 		"node_modules/merge-descriptors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-			"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+			"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
@@ -10994,11 +11013,12 @@
 			]
 		},
 		"node_modules/micromatch": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"license": "MIT",
 			"dependencies": {
-				"braces": "^3.0.2",
+				"braces": "^3.0.3",
 				"picomatch": "^2.3.1"
 			},
 			"engines": {
@@ -11009,6 +11029,7 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
 			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"license": "MIT",
 			"bin": {
 				"mime": "cli.js"
 			},
@@ -11115,9 +11136,10 @@
 			}
 		},
 		"node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
 		},
 		"node_modules/multicast-dns": {
 			"version": "7.2.5",
@@ -11279,9 +11301,13 @@
 			}
 		},
 		"node_modules/object-inspect": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-			"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+			"integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -11320,6 +11346,7 @@
 			"version": "2.4.1",
 			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
 			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
 			"dependencies": {
 				"ee-first": "1.1.1"
 			},
@@ -11508,9 +11535,10 @@
 			}
 		},
 		"node_modules/parse-entities/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
@@ -11609,9 +11637,10 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-to-regexp": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-			"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+			"integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
+			"license": "MIT",
 			"dependencies": {
 				"isarray": "0.0.1"
 			}
@@ -12452,11 +12481,12 @@
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.11.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-			"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+			"version": "6.13.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
-				"side-channel": "^1.0.4"
+				"side-channel": "^1.0.6"
 			},
 			"engines": {
 				"node": ">=0.6"
@@ -12523,6 +12553,7 @@
 			"version": "2.5.2",
 			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
 			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+			"license": "MIT",
 			"dependencies": {
 				"bytes": "3.1.2",
 				"http-errors": "2.0.0",
@@ -12537,6 +12568,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
 			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -13392,7 +13424,8 @@
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
 		},
 		"node_modules/sax": {
 			"version": "1.3.0",
@@ -13462,9 +13495,9 @@
 			}
 		},
 		"node_modules/semver": {
-			"version": "7.6.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-			"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+			"version": "7.6.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -13488,9 +13521,10 @@
 			}
 		},
 		"node_modules/send": {
-			"version": "0.18.0",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-			"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+			"license": "MIT",
 			"dependencies": {
 				"debug": "2.6.9",
 				"depd": "2.0.0",
@@ -13514,6 +13548,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -13521,17 +13556,23 @@
 		"node_modules/send/node_modules/debug/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
-		"node_modules/send/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		"node_modules/send/node_modules/encodeurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
 		"node_modules/send/node_modules/range-parser": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
 			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -13635,14 +13676,15 @@
 			}
 		},
 		"node_modules/serve-static": {
-			"version": "1.15.0",
-			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-			"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+			"license": "MIT",
 			"dependencies": {
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"parseurl": "~1.3.3",
-				"send": "0.18.0"
+				"send": "0.19.0"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
@@ -13667,7 +13709,8 @@
 		"node_modules/setprototypeof": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
 		},
 		"node_modules/shallow-clone": {
 			"version": "3.0.1",
@@ -13732,6 +13775,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
 			"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bind": "^1.0.7",
 				"es-errors": "^1.3.0",
@@ -13919,6 +13963,7 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
 			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -13960,9 +14005,10 @@
 			}
 		},
 		"node_modules/string-width/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12"
 			},
@@ -14378,9 +14424,10 @@
 			}
 		},
 		"node_modules/to-vfile/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/to-vfile/node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
@@ -14426,6 +14473,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
 			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.6"
 			}
@@ -14476,6 +14524,7 @@
 			"version": "1.6.18",
 			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
 			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+			"license": "MIT",
 			"dependencies": {
 				"media-typer": "0.3.0",
 				"mime-types": "~2.1.24"
@@ -14488,6 +14537,7 @@
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -14496,6 +14546,7 @@
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
 			"dependencies": {
 				"mime-db": "1.52.0"
 			},
@@ -14734,6 +14785,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
 			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -14991,12 +15043,12 @@
 			}
 		},
 		"node_modules/vfile": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
-			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
-				"unist-util-stringify-position": "^4.0.0",
 				"vfile-message": "^4.0.0"
 			},
 			"funding": {
@@ -15056,25 +15108,25 @@
 			}
 		},
 		"node_modules/webpack": {
-			"version": "5.90.3",
-			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
-			"integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
+			"version": "5.94.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+			"integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+			"license": "MIT",
 			"dependencies": {
-				"@types/eslint-scope": "^3.7.3",
 				"@types/estree": "^1.0.5",
-				"@webassemblyjs/ast": "^1.11.5",
-				"@webassemblyjs/wasm-edit": "^1.11.5",
-				"@webassemblyjs/wasm-parser": "^1.11.5",
+				"@webassemblyjs/ast": "^1.12.1",
+				"@webassemblyjs/wasm-edit": "^1.12.1",
+				"@webassemblyjs/wasm-parser": "^1.12.1",
 				"acorn": "^8.7.1",
-				"acorn-import-assertions": "^1.9.0",
+				"acorn-import-attributes": "^1.9.5",
 				"browserslist": "^4.21.10",
 				"chrome-trace-event": "^1.0.2",
-				"enhanced-resolve": "^5.15.0",
+				"enhanced-resolve": "^5.17.1",
 				"es-module-lexer": "^1.2.1",
 				"eslint-scope": "5.1.1",
 				"events": "^3.2.0",
 				"glob-to-regexp": "^0.4.1",
-				"graceful-fs": "^4.2.9",
+				"graceful-fs": "^4.2.11",
 				"json-parse-even-better-errors": "^2.3.1",
 				"loader-runner": "^4.2.0",
 				"mime-types": "^2.1.27",
@@ -15082,7 +15134,7 @@
 				"schema-utils": "^3.2.0",
 				"tapable": "^2.1.1",
 				"terser-webpack-plugin": "^5.3.10",
-				"watchpack": "^2.4.0",
+				"watchpack": "^2.4.1",
 				"webpack-sources": "^3.2.3"
 			},
 			"bin": {
@@ -15244,9 +15296,9 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ws": {
-			"version": "8.17.1",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=10.0.0"
@@ -15308,6 +15360,12 @@
 				"ajv": "^6.9.1"
 			}
 		},
+		"node_modules/webpack/node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"license": "ISC"
+		},
 		"node_modules/webpack/node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -15463,9 +15521,10 @@
 			}
 		},
 		"node_modules/wrap-ansi/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12"
 			},
@@ -15579,9 +15638,10 @@
 			}
 		},
 		"node_modules/yocto-queue": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-			"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+			"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12.20"
 			},
diff --git a/readme.txt b/readme.txt
index c5ef1231b183ee..4bd7ddc36d6e9b 100644
--- a/readme.txt
+++ b/readme.txt
@@ -55,7 +55,7 @@ To report a security issue, please visit the [WordPress HackerOne](https://hacke
 
 = Do I have to use the Gutenberg plugin to get access to these features? =
 
-Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the <a href="https://wordpress.org/documentation/article/wordpress-block-editor/">WordPress Editor</a>. You are likely already benefitting from stable features!
+Not necessarily. Each version of WordPress after 5.0 has included features from the Gutenberg plugin, which are known collectively as the <a href="https://wordpress.org/documentation/article/wordpress-block-editor/">WordPress Editor</a>. You are likely already benefiting from stable features!
 
 But if you want cutting edge beta features, including more experimental items, you will need to use the plugin. You can <a href="https://wordpress.org/news/2021/04/become-an-early-adopter-with-the-gutenberg-plugin/">read more here</a> to help decide whether the plugin is right for you.
 
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ebf2d6891ba0bb..8525e48fffa585 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -2,9 +2,12 @@
 	( function redirectIfStoryMoved() {
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'alignmentmatrixcontrol',
+			'borderboxcontrol',
+			'boxcontrol',
 			'customselectcontrol-v2',
 			'dimensioncontrol',
 			'navigation',
+			'navigator',
 			'progressbar',
 			'theme',
 		];
diff --git a/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
new file mode 100644
index 00000000000000..73ed4090549910
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p><strong>t<a href="https://wordpress.org/gutenberg">es</a>t</strong></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js
index e592f776c61dd8..894f143d19bb82 100644
--- a/test/e2e/specs/editor/various/allowed-patterns.spec.js
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -14,10 +14,7 @@ test.describe( 'Allowed Patterns', () => {
 		);
 	} );
 
-	test( 'should show all patterns when all blocks are allowed', async ( {
-		admin,
-		page,
-	} ) => {
+	test( 'should show all patterns by default', async ( { admin, page } ) => {
 		await admin.createNewPost();
 		await page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
@@ -57,7 +54,7 @@ test.describe( 'Allowed Patterns', () => {
 			);
 		} );
 
-		test( 'should show only allowed patterns', async ( {
+		test( 'should show all patterns even if not allowed', async ( {
 			admin,
 			page,
 		} ) => {
@@ -80,7 +77,11 @@ test.describe( 'Allowed Patterns', () => {
 				page
 					.getByRole( 'listbox', { name: 'Block patterns' } )
 					.getByRole( 'option' )
-			).toHaveText( [ 'Test: Single heading' ] );
+			).toHaveText( [
+				'Test: Single heading',
+				'Test: Single paragraph',
+				'Test: Paragraph inside group',
+			] );
 		} );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
deleted file mode 100644
index 6e36b6ad5dd335..00000000000000
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ /dev/null
@@ -1,2415 +0,0 @@
-/**
- * External dependencies
- */
-const path = require( 'path' );
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block bindings', () => {
-	let imagePlaceholderSrc;
-	let imageCustomFieldSrc;
-	test.beforeAll( async ( { requestUtils } ) => {
-		await requestUtils.activateTheme( 'emptytheme' );
-		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
-		await requestUtils.deleteAllMedia();
-		const placeholderMedia = await requestUtils.uploadMedia(
-			path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
-		);
-		imagePlaceholderSrc = placeholderMedia.source_url;
-	} );
-
-	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllPosts();
-	} );
-
-	test.afterAll( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllMedia();
-		await requestUtils.activateTheme( 'twentytwentyone' );
-		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
-	} );
-
-	test.describe( 'Template context', () => {
-		test.beforeEach( async ( { admin, editor } ) => {
-			await admin.visitSiteEditor( {
-				postId: 'emptytheme//index',
-				postType: 'wp_template',
-				canvas: 'edit',
-			} );
-			await editor.openDocumentSettingsSidebar();
-		} );
-
-		test.describe( 'Paragraph', () => {
-			test( 'should show the key of the custom field in post meta', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'text_custom_field'
-				);
-			} );
-
-			test( 'should show the key of the custom field in server sources with key', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/server-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'text_custom_field'
-				);
-			} );
-
-			test( 'should show the source label in server sources without key', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/server-source',
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText( 'Server Source' );
-			} );
-
-			test( 'should lock the appropriate controls with a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await paragraphBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Paragraph is not editable.
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-
-			test( 'should lock the appropriate controls when source is not defined', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await paragraphBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Paragraph is not editable.
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-		} );
-
-		test.describe( 'Heading', () => {
-			test( 'should show the key of the custom field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await expect( headingBlock ).toHaveText( 'text_custom_field' );
-			} );
-
-			test( 'should lock the appropriate controls with a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await headingBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Heading is not editable.
-				await expect( headingBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-
-			test( 'should lock the appropriate controls when source is not defined', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await headingBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Heading is not editable.
-				await expect( headingBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-		} );
-
-		test.describe( 'Button', () => {
-			test( 'should show the key of the custom field when text is bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Button',
-					exact: true,
-				} );
-				await expect( buttonBlock ).toHaveText( 'text_custom_field' );
-			} );
-
-			test( 'should lock text controls when text is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Link controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeVisible();
-			} );
-
-			test( 'should lock text controls when text is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'plugin/undefined-source',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Alignment controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Link controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeVisible();
-			} );
-
-			test( 'should lock url controls when url is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Format controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeVisible();
-
-				// Button is editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-
-				// Link controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Link' } )
-				).toBeHidden();
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeHidden();
-			} );
-
-			test( 'should lock url controls when url is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'plugin/undefined-source',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Format controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeVisible();
-
-				// Button is editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-
-				// Link controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Link' } )
-				).toBeHidden();
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeHidden();
-			} );
-
-			test( 'should lock url and text controls when both are bound', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-
-				// Alignment controls are visible.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Align text' } )
-				).toBeVisible();
-
-				// Format controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Bold',
-						} )
-				).toBeHidden();
-
-				// Button is not editable.
-				await expect( buttonBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Link controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Link' } )
-				).toBeHidden();
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', { name: 'Unlink' } )
-				).toBeHidden();
-			} );
-		} );
-
-		test.describe( 'Image', () => {
-			test( 'should show the upload form when url is not bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( { name: 'core/image' } );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeVisible();
-			} );
-
-			test( 'should NOT show the upload form when url is bound to a registered source', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-			} );
-
-			test( 'should NOT show the upload form when url is bound to an undefined source', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'plugin/undefined-source',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-			} );
-
-			test( 'should lock url controls when url is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeHidden();
-
-				// Image placeholder doesn't show the upload button.
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is enabled and with the original value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should lock url controls when url is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'plugin/undefined-source',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeHidden();
-
-				// Image placeholder doesn't show the upload button.
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is enabled and with the original value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable alt textarea when alt is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is disabled and with the custom field value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toHaveAttribute( 'readonly' );
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'text_custom_field' );
-
-				// Title input is enabled and with the original value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable alt textarea when alt is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'plguin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is disabled and with the custom field value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toHaveAttribute( 'readonly' );
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is enabled and with the original value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'should disable title input when title is bound to a registered source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is disabled and with the custom field value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toHaveAttribute( 'readonly' );
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'text_custom_field' );
-			} );
-
-			test( 'should disable title input when title is bound to an undefined source', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'plugin/undefined-source',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeVisible();
-
-				// Alt textarea is enabled and with the original value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toBeEnabled();
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'default alt value' );
-
-				// Title input is disabled and with the custom field value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toHaveAttribute( 'readonly' );
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-
-			test( 'Multiple bindings should lock the appropriate controls', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Image',
-				} );
-				await imageBlock.click();
-
-				// Replace controls don't exist.
-				await expect(
-					page
-						.getByRole( 'toolbar', { name: 'Block tools' } )
-						.getByRole( 'button', {
-							name: 'Replace',
-						} )
-				).toBeHidden();
-
-				// Image placeholder doesn't show the upload button.
-				await expect(
-					imageBlock.getByRole( 'button', { name: 'Upload' } )
-				).toBeHidden();
-
-				// Alt textarea is disabled and with the custom field value.
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Alternative text' )
-				).toHaveAttribute( 'readonly' );
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'text_custom_field' );
-
-				// Title input is enabled and with the original value.
-				await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', { name: 'Advanced' } )
-					.click();
-				await expect(
-					page
-						.getByRole( 'tabpanel', { name: 'Settings' } )
-						.getByLabel( 'Title attribute' )
-				).toBeEnabled();
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-			} );
-		} );
-	} );
-
-	test.describe( 'Post/page context', () => {
-		test.beforeEach( async ( { admin } ) => {
-			await admin.createNewPost( { title: 'Test bindings' } );
-		} );
-		test.describe( 'Paragraph', () => {
-			test( 'should show the value of the custom field when exists', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
-			} );
-
-			test( "should show the value of the key when custom field doesn't exist", async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'non_existing_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'non_existing_custom_field'
-				);
-				// Paragraph is not editable.
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should show the prompt placeholder in field with empty value', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'empty_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					// Aria-label is changed for empty paragraphs.
-					name: 'Add empty_field',
-				} );
-
-				await expect( paragraphBlock ).toBeEmpty();
-
-				const placeholder = paragraphBlock.locator( 'span' );
-				await expect( placeholder ).toHaveAttribute(
-					'data-rich-text-placeholder',
-					'Add empty_field'
-				);
-			} );
-
-			test( 'should not show the value of a protected meta field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: '_protected_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText( '_protected_field' );
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should not show the value of a meta field with `show_in_rest` false', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'show_in_rest_false_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'show_in_rest_false_field'
-				);
-				// Check the frontend doesn't show the content.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'fallback value' );
-			} );
-
-			test( 'should add empty paragraph block when pressing enter', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				// Select the paragraph and press Enter at the end of it.
-				const paragraph = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await editor.selectBlocks( paragraph );
-				await page.keyboard.press( 'End' );
-				await page.keyboard.press( 'Enter' );
-				const [ initialParagraph, newEmptyParagraph ] =
-					await editor.canvas
-						.locator( '[data-type="core/paragraph"]' )
-						.all();
-				await expect( initialParagraph ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				await expect( newEmptyParagraph ).toHaveText( '' );
-				await expect( newEmptyParagraph ).toBeEditable();
-			} );
-
-			test( 'should NOT be possible to edit the value of the custom field when it is protected', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'protected-field-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: '_protected_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				const protectedFieldBlock = editor.canvas.getByRole(
-					'document',
-					{
-						name: 'Block: Paragraph',
-					}
-				);
-
-				await expect( protectedFieldBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-
-			test( 'should NOT be possible to edit the value of the custom field when it is not shown in the REST API', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'show-in-rest-false-binding',
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'show_in_rest_false_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				const showInRestFalseBlock = editor.canvas.getByRole(
-					'document',
-					{
-						name: 'Block: Paragraph',
-					}
-				);
-
-				await expect( showInRestFalseBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-			test( 'should show a selector for content', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-				} );
-				await page.getByLabel( 'Attributes options' ).click();
-				const contentAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show content',
-				} );
-				await expect( contentAttribute ).toBeVisible();
-			} );
-			test( 'should use a selector to update the content', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'fallback value',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'undefined_field' },
-								},
-							},
-						},
-					},
-				} );
-				await page.getByRole( 'button', { name: 'content' } ).click();
-
-				await page
-					.getByRole( 'menuitemradio' )
-					.filter( { hasText: 'text_custom_field' } )
-					.click();
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-				await expect( paragraphBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-			} );
-		} );
-
-		test.describe( 'Heading', () => {
-			test( 'should show the value of the custom field', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						anchor: 'heading-binding',
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const headingBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await expect( headingBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#heading-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
-			} );
-
-			test( 'should add empty paragraph block when pressing enter', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-					attributes: {
-						anchor: 'heading-binding',
-						content: 'heading default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				// Select the heading and press Enter at the end of it.
-				const heading = editor.canvas.getByRole( 'document', {
-					name: 'Block: Heading',
-				} );
-				await editor.selectBlocks( heading );
-				await page.keyboard.press( 'End' );
-				await page.keyboard.press( 'Enter' );
-				// Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
-				const [ initialHeading, newEmptyParagraph ] =
-					await editor.canvas.locator( '[data-block]' ).all();
-				// First block should be the original block.
-				await expect( initialHeading ).toHaveAttribute(
-					'data-type',
-					'core/heading'
-				);
-				await expect( initialHeading ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				// Second block should be an empty paragraph block.
-				await expect( newEmptyParagraph ).toHaveAttribute(
-					'data-type',
-					'core/paragraph'
-				);
-				await expect( newEmptyParagraph ).toHaveText( '' );
-				await expect( newEmptyParagraph ).toBeEditable();
-			} );
-			test( 'should show a selector for content', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/heading',
-				} );
-				await page.getByLabel( 'Attributes options' ).click();
-				const contentAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show content',
-				} );
-				await expect( contentAttribute ).toBeVisible();
-			} );
-		} );
-
-		test.describe( 'Button', () => {
-			test( 'should show the value of the custom field when text is bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-text-binding',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-				await expect( buttonBlock ).toHaveText(
-					'Value of the text_custom_field'
-				);
-
-				// Check the frontend shows the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-text-binding a'
-				);
-				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#default-url'
-				);
-			} );
-
-			test( 'should use the value of the custom field when url is bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-url-binding',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-
-				// Check the frontend shows the original value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-url-binding a'
-				);
-				await expect( buttonDom ).toHaveText( 'button default text' );
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#url-custom-field'
-				);
-			} );
-
-			test( 'should use the values of the custom fields when text and url are bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-multiple-bindings',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-
-				// Check the frontend uses the values of the custom fields.
-				const previewPage = await editor.openPreviewPage();
-				const buttonDom = previewPage.locator(
-					'#button-multiple-bindings a'
-				);
-				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				await expect( buttonDom ).toHaveAttribute(
-					'href',
-					'#url-custom-field'
-				);
-			} );
-
-			test( 'should add empty button block when pressing enter', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-text-binding',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										text: {
-											source: 'core/post-meta',
-											args: { key: 'text_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-				await editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' )
-					.click();
-				await page.keyboard.press( 'End' );
-				await page.keyboard.press( 'Enter' );
-				const [ initialButton, newEmptyButton ] = await editor.canvas
-					.locator( '[data-type="core/button"]' )
-					.all();
-				// First block should be the original block.
-				await expect( initialButton ).toHaveText(
-					'Value of the text_custom_field'
-				);
-				// Second block should be an empty paragraph block.
-				await expect( newEmptyButton ).toHaveText( '' );
-				await expect( newEmptyButton ).toBeEditable();
-			} );
-			test( 'should show a selector for url, text, linkTarget and rel', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-						},
-					],
-				} );
-				await editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' )
-					.click();
-				await page
-					.getByRole( 'tabpanel', {
-						name: 'Settings',
-					} )
-					.getByLabel( 'Attributes options' )
-					.click();
-				const urlAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show url',
-				} );
-				await expect( urlAttribute ).toBeVisible();
-				const textAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show text',
-				} );
-				await expect( textAttribute ).toBeVisible();
-				const linkTargetAttribute = page.getByRole(
-					'menuitemcheckbox',
-					{
-						name: 'Show linkTarget',
-					}
-				);
-				await expect( linkTargetAttribute ).toBeVisible();
-				const relAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show rel',
-				} );
-				await expect( relAttribute ).toBeVisible();
-			} );
-		} );
-
-		test.describe( 'Image', () => {
-			test.beforeAll( async ( { requestUtils } ) => {
-				const customFieldMedia = await requestUtils.uploadMedia(
-					path.join(
-						'./test/e2e/assets',
-						'1024x768_e2e_test_image_size.jpeg'
-					)
-				);
-				imageCustomFieldSrc = customFieldMedia.source_url;
-			} );
-
-			test.beforeEach( async ( { editor, page, requestUtils } ) => {
-				const postId = await editor.publishPost();
-				await requestUtils.rest( {
-					method: 'POST',
-					path: '/wp/v2/posts/' + postId,
-					data: {
-						meta: {
-							url_custom_field: imageCustomFieldSrc,
-						},
-					},
-				} );
-				await page.reload();
-			} );
-			test( 'should show the value of the custom field when url is bound', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-url-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-url-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'default alt value'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-
-			test( 'should show value of the custom field in the alt textarea when alt is bound', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-alt-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the placeholder.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-
-				// Alt textarea should have the custom field value.
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-alt-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'Value of the text_custom_field'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-
-			test( 'should show value of the custom field in the title input when title is bound', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-title-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								title: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the placeholder.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-
-				// Title input should have the custom field value.
-				const advancedButton = page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', {
-						name: 'Advanced',
-					} );
-				const isAdvancedPanelOpen =
-					await advancedButton.getAttribute( 'aria-expanded' );
-				if ( isAdvancedPanelOpen === 'false' ) {
-					await advancedButton.click();
-				}
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'Value of the text_custom_field' );
-
-				// Check the frontend uses the value of the custom field.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-title-binding img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imagePlaceholderSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'default alt value'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'Value of the text_custom_field'
-				);
-			} );
-
-			test( 'Multiple bindings should show the value of the custom fields', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-multiple-bindings',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Image src is the custom field value.
-				await expect( imageBlockImg ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-
-				// Alt textarea should have the custom field value.
-				const altValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' )
-					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
-
-				// Title input should have the original value.
-				const advancedButton = page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByRole( 'button', {
-						name: 'Advanced',
-					} );
-				const isAdvancedPanelOpen =
-					await advancedButton.getAttribute( 'aria-expanded' );
-				if ( isAdvancedPanelOpen === 'false' ) {
-					await advancedButton.click();
-				}
-				const titleValue = await page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Title attribute' )
-					.inputValue();
-				expect( titleValue ).toBe( 'default title value' );
-
-				// Check the frontend uses the values of the custom fields.
-				const previewPage = await editor.openPreviewPage();
-				const imageDom = previewPage.locator(
-					'#image-multiple-bindings img'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'src',
-					imageCustomFieldSrc
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'alt',
-					'Value of the text_custom_field'
-				);
-				await expect( imageDom ).toHaveAttribute(
-					'title',
-					'default title value'
-				);
-			} );
-			test( 'should show a selector for url, id, title and alt', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-				} );
-				await page
-					.getByRole( 'tabpanel', {
-						name: 'Settings',
-					} )
-					.getByLabel( 'Attributes options' )
-					.click();
-				const urlAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show url',
-				} );
-				await expect( urlAttribute ).toBeVisible();
-				const idAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show id',
-				} );
-				await expect( idAttribute ).toBeVisible();
-				const titleAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show title',
-				} );
-				await expect( titleAttribute ).toBeVisible();
-				const altAttribute = page.getByRole( 'menuitemcheckbox', {
-					name: 'Show alt',
-				} );
-				await expect( altAttribute ).toBeVisible();
-			} );
-		} );
-
-		test.describe( 'Edit custom fields', () => {
-			test( 'should be possible to edit the value of the custom field from the paragraph', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-				await paragraphBlock.fill( 'new value' );
-				// Check that the paragraph content attribute didn't change.
-				const [ paragraphBlockObject ] = await editor.getBlocks();
-				expect( paragraphBlockObject.attributes.content ).toBe(
-					'paragraph default content'
-				);
-				// Check the value of the custom field is being updated by visiting the frontend.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'new value' );
-			} );
-
-			// Related issue: https://github.com/WordPress/gutenberg/issues/62347
-			test( 'should be possible to use symbols and numbers as the custom field value', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						anchor: 'paragraph-binding',
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'true'
-				);
-				await paragraphBlock.fill( '$10.00' );
-				// Check the value of the custom field is being updated by visiting the frontend.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( '$10.00' );
-			} );
-
-			test( 'should be possible to edit the value of the url custom field from the button', async ( {
-				editor,
-				page,
-				pageUtils,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/buttons',
-					innerBlocks: [
-						{
-							name: 'core/button',
-							attributes: {
-								anchor: 'button-url-binding',
-								text: 'button default text',
-								url: '#default-url',
-								metadata: {
-									bindings: {
-										url: {
-											source: 'core/post-meta',
-											args: { key: 'url_custom_field' },
-										},
-									},
-								},
-							},
-						},
-					],
-				} );
-
-				// Edit the url.
-				const buttonBlock = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Button',
-						exact: true,
-					} )
-					.getByRole( 'textbox' );
-				await buttonBlock.click();
-				await page
-					.getByRole( 'button', { name: 'Edit link', exact: true } )
-					.click();
-				await page
-					.getByPlaceholder( 'Search or type URL' )
-					.fill( '#url-custom-field-modified' );
-				await pageUtils.pressKeys( 'Enter' );
-
-				// Check that the button url attribute didn't change.
-				const [ buttonsObject ] = await editor.getBlocks();
-				expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
-					'#default-url'
-				);
-				// Check the value of the custom field is being updated by visiting the frontend.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#button-url-binding a' )
-				).toHaveAttribute( 'href', '#url-custom-field-modified' );
-			} );
-
-			test( 'should be possible to edit the value of the url custom field from the image', async ( {
-				editor,
-				page,
-				pageUtils,
-				requestUtils,
-			} ) => {
-				const customFieldMedia = await requestUtils.uploadMedia(
-					path.join(
-						'./test/e2e/assets',
-						'1024x768_e2e_test_image_size.jpeg'
-					)
-				);
-				imageCustomFieldSrc = customFieldMedia.source_url;
-
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-url-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						title: 'default title value',
-						metadata: {
-							bindings: {
-								url: {
-									source: 'core/post-meta',
-									args: { key: 'url_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-
-				// Edit image url.
-				await page
-					.getByRole( 'toolbar', { name: 'Block tools' } )
-					.getByRole( 'button', {
-						name: 'Replace',
-					} )
-					.click();
-				await page
-					.getByRole( 'button', { name: 'Edit link', exact: true } )
-					.click();
-				await page
-					.getByPlaceholder( 'Search or type URL' )
-					.fill( imageCustomFieldSrc );
-				await pageUtils.pressKeys( 'Enter' );
-
-				// Check that the image url attribute didn't change and still uses the placeholder.
-				const [ imageBlockObject ] = await editor.getBlocks();
-				expect( imageBlockObject.attributes.url ).toBe(
-					imagePlaceholderSrc
-				);
-
-				// Check the value of the custom field is being updated by visiting the frontend.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#image-url-binding img' )
-				).toHaveAttribute( 'src', imageCustomFieldSrc );
-			} );
-
-			test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
-				editor,
-				page,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/image',
-					attributes: {
-						anchor: 'image-alt-binding',
-						url: imagePlaceholderSrc,
-						alt: 'default alt value',
-						metadata: {
-							bindings: {
-								alt: {
-									source: 'core/post-meta',
-									args: { key: 'text_custom_field' },
-								},
-							},
-						},
-					},
-				} );
-				const imageBlockImg = editor.canvas
-					.getByRole( 'document', {
-						name: 'Block: Image',
-					} )
-					.locator( 'img' );
-				await imageBlockImg.click();
-
-				// Edit the custom field value in the alt textarea.
-				const altInputArea = page
-					.getByRole( 'tabpanel', { name: 'Settings' } )
-					.getByLabel( 'Alternative text' );
-				await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
-				await altInputArea.fill( 'new value' );
-
-				// Check that the image alt attribute didn't change.
-				const [ imageBlockObject ] = await editor.getBlocks();
-				expect( imageBlockObject.attributes.alt ).toBe(
-					'default alt value'
-				);
-				// Check the value of the custom field is being updated by visiting the frontend.
-				const previewPage = await editor.openPreviewPage();
-				await expect(
-					previewPage.locator( '#image-alt-binding img' )
-				).toHaveAttribute( 'alt', 'new value' );
-			} );
-		} );
-	} );
-
-	test.describe( 'Sources registration', () => {
-		test.beforeEach( async ( { admin } ) => {
-			await admin.createNewPost( { title: 'Test bindings' } );
-		} );
-
-		test( 'should show the label of a source only registered in the server', async ( {
-			editor,
-			page,
-		} ) => {
-			await editor.insertBlock( {
-				name: 'core/paragraph',
-				attributes: {
-					metadata: {
-						bindings: {
-							content: {
-								source: 'core/server-source',
-							},
-						},
-					},
-				},
-			} );
-
-			const bindingsPanel = page.locator(
-				'.block-editor-bindings__panel'
-			);
-			await expect( bindingsPanel ).toContainText( 'Server Source' );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
new file mode 100644
index 00000000000000..d6563ce9cb5f5f
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
@@ -0,0 +1,1204 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Registered sources', () => {
+	let imagePlaceholderSrc;
+	let testingImgSrc;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+		await requestUtils.deleteAllMedia();
+		const placeholderMedia = await requestUtils.uploadMedia(
+			path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
+		);
+		imagePlaceholderSrc = placeholderMedia.source_url;
+
+		const testingImgMedia = await requestUtils.uploadMedia(
+			path.join(
+				'./test/e2e/assets',
+				'1024x768_e2e_test_image_size.jpeg'
+			)
+		);
+		testingImgSrc = testingImgMedia.source_url;
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( { title: 'Test bindings' } );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'getValues', () => {
+		test( 'should show the returned value in paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned value in heading content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'connected-heading',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await expect( headingBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-heading' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned values in button attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'connected-button',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+									url: {
+										source: 'testing/complete-source',
+										args: { key: 'url_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const buttonDom = previewPage.locator( '#connected-button a' );
+			await expect( buttonDom ).toHaveText( 'Text Field Value' );
+			await expect( buttonDom ).toHaveAttribute( 'href', testingImgSrc );
+		} );
+		test( 'should show the returned values in image attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'connected-image',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/complete-source',
+								args: { key: 'url_field' },
+							},
+							alt: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			await imageBlockImg.click();
+
+			// Image src is the custom field value.
+			await expect( imageBlockImg ).toHaveAttribute(
+				'src',
+				testingImgSrc
+			);
+
+			// Alt textarea should have the custom field value.
+			const altValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' )
+				.inputValue();
+			expect( altValue ).toBe( 'Text Field Value' );
+
+			// Title input should have the original value.
+			const advancedButton = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByRole( 'button', {
+					name: 'Advanced',
+				} );
+			const isAdvancedPanelOpen =
+				await advancedButton.getAttribute( 'aria-expanded' );
+			if ( isAdvancedPanelOpen === 'false' ) {
+				await advancedButton.click();
+			}
+			const titleValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Title attribute' )
+				.inputValue();
+			expect( titleValue ).toBe( 'default title value' );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const imageDom = previewPage.locator( '#connected-image img' );
+			await expect( imageDom ).toHaveAttribute( 'src', testingImgSrc );
+			await expect( imageDom ).toHaveAttribute(
+				'alt',
+				'Text Field Value'
+			);
+			await expect( imageDom ).toHaveAttribute(
+				'title',
+				'default title value'
+			);
+		} );
+		test( 'should fall back to source label when `getValues` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/server-only-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Server Source' );
+		} );
+		test( 'should fall back to null when `getValues` is undefined in URL attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/server-only-source',
+								args: { key: 'url_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Image',
+			} );
+			await expect(
+				imageBlock.locator( '.components-placeholder__fieldset' )
+			).toHaveText( 'Connected to Server Source' );
+		} );
+	} );
+
+	test.describe( 'should lock editing', () => {
+		// Logic reused accross all the tests that check paragraph editing is locked.
+		async function testParagraphControlsAreLocked( {
+			source,
+			editor,
+			page,
+		} ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source,
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await paragraphBlock.click();
+
+			// Alignment controls exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Align text' } )
+			).toBeVisible();
+
+			// Format controls don't exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', {
+						name: 'Bold',
+					} )
+			).toBeHidden();
+
+			// Paragraph is not editable.
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		}
+		test.describe( 'canUserEditValue returns false', () => {
+			test( 'paragraph', async ( { editor, page } ) => {
+				await testParagraphControlsAreLocked( {
+					source: 'testing/can-user-edit-false',
+					editor,
+					page,
+				} );
+			} );
+			test( 'heading', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'heading default content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const headingBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Heading',
+				} );
+				await headingBlock.click();
+
+				// Alignment controls exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Heading is not editable.
+				await expect( headingBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'button', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/buttons',
+					innerBlocks: [
+						{
+							name: 'core/button',
+							attributes: {
+								text: 'button default text',
+								url: '#default-url',
+								metadata: {
+									bindings: {
+										text: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'text_field' },
+										},
+										url: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'url_field' },
+										},
+									},
+								},
+							},
+						},
+					],
+				} );
+				const buttonBlock = editor.canvas
+					.getByRole( 'document', {
+						name: 'Block: Button',
+						exact: true,
+					} )
+					.getByRole( 'textbox' );
+				await buttonBlock.click();
+
+				// Alignment controls are visible.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Button is not editable.
+				await expect( buttonBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+
+				// Link controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Link' } )
+				).toBeHidden();
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Unlink' } )
+				).toBeHidden();
+			} );
+			test( 'image', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/image',
+					attributes: {
+						url: imagePlaceholderSrc,
+						alt: 'default alt value',
+						title: 'default title value',
+						metadata: {
+							bindings: {
+								url: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'url_field' },
+								},
+								alt: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+								title: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const imageBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Image',
+				} );
+				await imageBlock.click();
+
+				// Replace controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Replace',
+						} )
+				).toBeHidden();
+
+				// Image placeholder doesn't show the upload button.
+				await expect(
+					imageBlock.getByRole( 'button', { name: 'Upload' } )
+				).toBeHidden();
+
+				// Alt textarea is disabled and with the custom field value.
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Alternative text' )
+				).toHaveAttribute( 'readonly' );
+				const altValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Alternative text' )
+					.inputValue();
+				expect( altValue ).toBe( 'Text Field Value' );
+
+				// Title input is enabled and with the original value.
+				await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByRole( 'button', { name: 'Advanced' } )
+					.click();
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Title attribute' )
+				).toHaveAttribute( 'readonly' );
+				const titleValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Title attribute' )
+					.inputValue();
+				expect( titleValue ).toBe( 'Text Field Value' );
+			} );
+		} );
+		// The following tests just check the paragraph and assume is the case for the rest of the blocks.
+		test( 'canUserEditValue is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/can-user-edit-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'setValues is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/complete-source-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'source is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/undefined-source',
+				editor,
+				page,
+			} );
+		} );
+	} );
+
+	// Use `core/post-meta` source to test editing to avoid overcomplicating custom sources.
+	// It needs a source that can be consumed and edited from the server and the editor.
+	test.describe( 'setValues', () => {
+		test( 'should be possible to edit the value from paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'paragraph default content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		// Related issue: https://github.com/WordPress/gutenberg/issues/62347
+		test( 'should be possible to use symbols and numbers as the custom field value', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'paragraph-binding',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( '$10.00' );
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#paragraph-binding' )
+			).toHaveText( '$10.00' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the button', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-url-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									url: {
+										source: 'core/post-meta',
+										args: { key: 'url_custom_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Edit the url.
+			const buttonBlock = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' );
+			await buttonBlock.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( '#url-custom-field-modified' );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the button url attribute didn't change.
+			const [ buttonsObject ] = await editor.getBlocks();
+			expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
+				'#default-url'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#button-url-binding a' )
+			).toHaveAttribute( 'href', '#url-custom-field-modified' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the image', async ( {
+			editor,
+			page,
+			pageUtils,
+			requestUtils,
+		} ) => {
+			const customFieldMedia = await requestUtils.uploadMedia(
+				path.join(
+					'./test/e2e/assets',
+					'1024x768_e2e_test_image_size.jpeg'
+				)
+			);
+			testingImgSrc = customFieldMedia.source_url;
+
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-url-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/post-meta',
+								args: { key: 'url_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Edit image url.
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', {
+					name: 'Replace',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( testingImgSrc );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the image url attribute didn't change and still uses the placeholder.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.url ).toBe(
+				imagePlaceholderSrc
+			);
+
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-url-binding img' )
+			).toHaveAttribute( 'src', testingImgSrc );
+		} );
+		test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-alt-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					metadata: {
+						bindings: {
+							alt: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			await imageBlockImg.click();
+
+			// Edit the custom field value in the alt textarea.
+			const altInputArea = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' );
+			await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
+			await altInputArea.fill( 'new value' );
+
+			// Check that the image alt attribute didn't change.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.alt ).toBe(
+				'default alt value'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-alt-binding img' )
+			).toHaveAttribute( 'alt', 'new value' );
+		} );
+	} );
+
+	test.describe( 'getFieldsList', () => {
+		test( 'should be possible to update attribute value through bindings UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			await page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } )
+				.click();
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should be possible to connect the paragraph content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the heading content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the button supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const textAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show text',
+			} );
+			await expect( textAttribute ).toBeVisible();
+			const linkTargetAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkTarget',
+			} );
+			await expect( linkTargetAttribute ).toBeVisible();
+			const relAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show rel',
+			} );
+			await expect( relAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const tagNameAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show tagName',
+			} );
+			await expect( tagNameAttribute ).toBeHidden();
+		} );
+		test( 'should be possible to connect the image supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+			} );
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const idAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show id',
+			} );
+			await expect( idAttribute ).toBeVisible();
+			const titleAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show title',
+			} );
+			await expect( titleAttribute ).toBeVisible();
+			const altAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show alt',
+			} );
+			await expect( altAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const linkClassAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkClass',
+			} );
+			await expect( linkClassAttribute ).toBeHidden();
+		} );
+		test( 'should show all the available fields in the dropdown UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			const textField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( textField ).toBeVisible();
+			await expect( textField ).toBeChecked();
+			const urlField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'URL Field Label' } );
+			await expect( urlField ).toBeVisible();
+			await expect( urlField ).not.toBeChecked();
+		} );
+		test( 'should show the connected fields in the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const contentButton = page.getByRole( 'button', {
+				name: 'content',
+			} );
+			await expect( contentButton ).toContainText( 'Text Field Label' );
+		} );
+	} );
+
+	test.describe( 'RichText workflows', () => {
+		test( 'should add empty paragraph block when pressing enter in paragraph', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			// Select the paragraph and press Enter at the end of it.
+			const paragraph = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await editor.selectBlocks( paragraph );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialParagraph, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-type="core/paragraph"]' )
+				.all();
+			await expect( initialParagraph ).toHaveText( 'Text Field Value' );
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty paragraph block when pressing enter in heading', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'heading-binding',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Select the heading and press Enter at the end of it.
+			const heading = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await editor.selectBlocks( heading );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			// Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
+			const [ initialHeading, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-block]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialHeading ).toHaveAttribute(
+				'data-type',
+				'core/heading'
+			);
+			await expect( initialHeading ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyParagraph ).toHaveAttribute(
+				'data-type',
+				'core/paragraph'
+			);
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty button block when pressing enter in button', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-text-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialButton, newEmptyButton ] = await editor.canvas
+				.locator( '[data-type="core/button"]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialButton ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyButton ).toHaveText( '' );
+			await expect( newEmptyButton ).toBeEditable();
+		} );
+		test( 'should show placeholder prompt when value is empty and can edit', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'Empty empty_field; start writing to edit its value',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Add Empty Field Label'
+			);
+		} );
+		test( 'should show source label when value is empty, cannot edit, and `getFieldsList` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/can-user-edit-false',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+			await expect( paragraphBlock ).toBeEmpty();
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Can User Edit: False'
+			);
+		} );
+		test( 'should show placeholder attribute over bindings placeholder', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					placeholder: 'My custom placeholder',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'My custom placeholder'
+			);
+		} );
+	} );
+
+	test( 'should show the label of a source only registered in the server in blocks connected', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/server-only-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Server Source' );
+	} );
+	test( 'should show an "Invalid source" warning for not registered sources', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/undefined-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Invalid source' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
new file mode 100644
index 00000000000000..d82def6feb66bf
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
@@ -0,0 +1,551 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post Meta source', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'Movie CPT template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//single-movie',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test.describe( 'Block attributes values', () => {
+			test( 'should not be possible to edit connected blocks', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should fall back to the field label if the default value is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_with_only_label',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Field with only label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_without_label_or_default',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Attributes panel', () => {
+			test( 'should show the field label if it is defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'Movie field label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'field_without_label_or_default' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Fields list dropdown', () => {
+			// Insert block and open the dropdown for every test.
+			test.beforeEach( async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				await page
+					.getByRole( 'button', {
+						name: 'content',
+					} )
+					.click();
+			} );
+
+			test( 'should include movie fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const movieField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( movieField ).toBeVisible();
+			} );
+			test( 'should include global fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+			} );
+			test( 'should not include protected fields', async ( { page } ) => {
+				// Ensure the fields have loaded by checking the field is visible.
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+				// Check the protected fields are not visible.
+				const protectedField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: '_protected_field' } );
+				await expect( protectedField ).toBeHidden();
+				const showInRestFalseField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'show_in_rest_false_field' } );
+				await expect( showInRestFalseField ).toBeHidden();
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( fieldButton ).toContainText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should not show anything if the default value is not defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Field with only label' } );
+				// Check it only contains the field label.
+				await expect( fieldButton ).toHaveText(
+					'Field with only label'
+				);
+			} );
+		} );
+	} );
+
+	test.describe( 'Custom template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//custom-template',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test( 'should not include post meta fields in UI to connect attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			// Check the fields registered by other sources are there.
+			const customSourceField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( customSourceField ).toBeVisible();
+			// Check the post meta fields are not visible.
+			const globalField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'text_custom_field' } );
+			await expect( globalField ).toBeHidden();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeHidden();
+		} );
+		test( 'should show the key in attributes connected to post meta', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'text_custom_field' );
+		} );
+	} );
+
+	test.describe( 'Movie CPT post', () => {
+		test.beforeEach( async ( { admin } ) => {
+			// CHECK HOW TO CREATE A MOVIE.
+			await admin.createNewPost( {
+				postType: 'movie',
+				title: 'Test bindings',
+			} );
+		} );
+
+		test( 'should show the custom field value of that specific post', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Movie field default value' );
+		} );
+		test( 'should fall back to the key when custom field is not accessible', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'unaccessible_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'unaccessible_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a protected field', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: '_protected_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( '_protected_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a field with `show_in_rest` set to false', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'show_in_rest_false_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'show_in_rest_false_field'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should be possible to edit the value of the connected custom fields', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'fallback content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		test( 'should be possible to connect movie fields through the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeVisible();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
index 00b51a94668d50..9346412c46bcb2 100644
--- a/test/e2e/specs/editor/various/block-deletion.spec.js
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -287,16 +287,15 @@ test.describe( 'Block deletion', () => {
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{ name: 'core/paragraph', attributes: { content: 'First' } },
 			{ name: 'core/paragraph', attributes: { content: 'Second' } },
+			{ name: 'core/paragraph', attributes: { content: '' } },
 		] );
 
 		// Ensure that the newly created empty block is focused.
-		await expect.poll( editor.getBlocks ).toHaveLength( 2 );
+		await expect.poll( editor.getBlocks ).toHaveLength( 3 );
 		await expect(
-			editor.canvas
-				.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} )
-				.nth( 1 )
+			editor.canvas.getByRole( 'document', {
+				name: 'Empty block',
+			} )
 		).toBeFocused();
 	} );
 
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
deleted file mode 100644
index 5b8ef6bdcd051b..00000000000000
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block moving mode', () => {
-	test.beforeEach( async ( { admin } ) => {
-		await admin.createNewPost();
-	} );
-
-	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllPosts();
-	} );
-
-	test( 'can move block', async ( { editor, page } ) => {
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Second Paragraph' },
-		} );
-
-		// Move the second block in front of the first block.
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'Second Paragraph' },
-			},
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'First Paragraph' },
-			},
-		] );
-	} );
-
-	test( 'can move block in the nested block', async ( { editor, page } ) => {
-		// Create two group blocks with some blocks.
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'First Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second Paragraph' );
-
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Third Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Fourth Paragraph' );
-
-		// Move a paragraph block in the first group block into the second group block.
-		const paragraphBlock = editor.canvas.locator(
-			'text="First Paragraph"'
-		);
-		await paragraphBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowLeft' ); // Select the first group block.
-		await page.keyboard.press( 'ArrowDown' ); // Select the second group block.
-		await page.keyboard.press( 'ArrowRight' ); // Enter the second group block.
-		await page.keyboard.press( 'ArrowDown' ); // Move down in the second group block.
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Second Paragraph' },
-					},
-				],
-			},
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Third Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'First Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Fourth Paragraph' },
-					},
-				],
-			},
-		] );
-	} );
-
-	test( 'can not move inside its own block', async ( { editor, page } ) => {
-		// Create a paragraph block and a group block.
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Second Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Third Paragraph' );
-
-		// Trying to move the group block into its own.
-		const groupBlock = editor.canvas.locator(
-			'role=document[name="Block: Group"i]'
-		);
-		await groupBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowRight' );
-		await expect( groupBlock ).toHaveClass( /is-selected/ );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index 33a65e6f5a1195..bca062b06416a1 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -565,6 +565,27 @@ test.describe( 'Copy/cut/paste', () => {
 		] );
 	} );
 
+	test( 'should paste link to formatted text', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '<strong>test</strong>' },
+		} );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		pageUtils.setClipboardData( {
+			plainText: 'https://wordpress.org/gutenberg',
+			html: 'https://wordpress.org/gutenberg',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	test( 'should auto-link', async ( { pageUtils, editor } ) => {
 		await editor.insertBlock( {
 			name: 'core/paragraph',
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 6a7125d04f7a6a..e1ca121040b974 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
 		await editor.openDocumentSettingsSidebar();
 	} );
 
-	test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+	test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
 		editor,
 		KeyboardNavigableBlocks,
 		page,
+		pageUtils,
 	} ) => {
-		const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
-		// Create 3 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
+		// Insert three paragraph blocks.
+		for ( let i = 0; i < 3; i++ ) {
 			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
+			await page.keyboard.type( `Paragraph ${ i + 1 }` );
 		}
-
-		// Select the middle block.
+		// Select the middle paragraph block.
 		await page.keyboard.press( 'ArrowUp' );
 		await editor.showBlockToolbar();
-		await KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-
-		// Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
-		// This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
-		await KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-		pageUtils,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		// Put focus behind the block list.
-		await page.evaluate( () => {
-			document
-				.querySelector( '.interface-interface-skeleton__sidebar' )
-				.focus();
-		} );
-
-		await pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
 		await pageUtils.pressKeys( 'shift+Tab' );
+		await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+		await page.keyboard.press( 'Tab' );
 		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
+			'Block: Paragraph'
 		);
-
-		await pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
 	} );
 
 	test( 'should navigate correctly with multi selection', async ( {
@@ -208,31 +126,7 @@ class KeyboardNavigableBlocks {
 		expect( ariaLabel ).toBe( label );
 	}
 
-	async navigateToContentEditorTop() {
-		// Use 'Ctrl+`' to return to the top of the editor.
-		await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
-	}
-
-	async tabThroughParagraphBlock( paragraphText ) {
-		await this.tabThroughBlockToolbar();
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-
-		const activeElement = this.editor.canvas.locator( ':focus' );
-
-		await expect( activeElement ).toHaveText( paragraphText );
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block' );
-
-		// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
-		await this.pageUtils.pressKeys( 'shift+Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-	}
-
-	async tabThroughBlockToolbar() {
-		await this.page.keyboard.press( 'Tab' );
+	async navigateThroughBlockToolbar() {
 		await this.expectLabelToHaveFocus( 'Paragraph' );
 
 		await this.page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 83f2f880f3bf1b..5fbd0e66b5fd02 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -150,7 +150,7 @@ test.describe( 'Pattern Overrides', () => {
 				name: 'Block: Paragraph',
 			} );
 			// Ensure the first pattern is selected.
-			await editor.selectBlocks( patternBlocks.first() );
+			await patternBlocks.first().selectText();
 			await expect( paragraphs.first() ).not.toHaveAttribute(
 				'inert',
 				'true'
@@ -168,7 +168,7 @@ test.describe( 'Pattern Overrides', () => {
 			await page.keyboard.type( 'I would word it this way' );
 
 			// Ensure the second pattern is selected.
-			await editor.selectBlocks( patternBlocks.last() );
+			await patternBlocks.last().selectText();
 			await patternBlocks
 				.last()
 				.getByRole( 'document', {
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 534fea5289c9e1..1fe94ff334f3b2 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -58,7 +58,7 @@ test.describe( 'Post publish panel', () => {
 		).toBeFocused();
 	} );
 
-	test( 'should move focus to the publish button in the panel', async ( {
+	test( 'should move focus to the cancel button in the panel', async ( {
 		editor,
 		page,
 	} ) => {
@@ -74,7 +74,7 @@ test.describe( 'Post publish panel', () => {
 			page
 				.getByRole( 'region', { name: 'Editor publish' } )
 				.locator( ':focus' )
-		).toHaveText( 'Publish' );
+		).toHaveText( 'Cancel' );
 	} );
 
 	test( 'should focus on the post list after publishing', async ( {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index a8e49f7a6b84dd..cfaf4e0be9188f 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 		await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
 	} );
 
-	test( 'Focuses correct toolbar in default view options in select mode', async ( {
-		editor,
-		page,
-		toolbarUtils,
-	} ) => {
-		// Test: Focus the document toolbar from title
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
-		// Test: Focus the top level toolbar from empty block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
-		// Test: Focus the top level toolbar from paragraph block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await page.keyboard.type(
-			'Focus top level toolbar from paragraph block in select mode.'
-		);
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-	} );
-
 	test.describe( 'In Top Toolbar option:', () => {
 		test.beforeEach( async ( { editor } ) => {
 			// Ensure the fixed toolbar option is on
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 29e7e5d64522c9..eba9f1d3163fd5 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -373,6 +373,103 @@ test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
 		);
 	} );
 
+	// Fix for https://github.com/WordPress/gutenberg/issues/65174.
+	test( 'should handle unwrapping and merging blocks with empty contents', async ( {
+		editor,
+		page,
+	} ) => {
+		const emptyAlignedParagraph = {
+			name: 'core/paragraph',
+			attributes: { content: '', align: 'center', dropCap: false },
+			innerBlocks: [],
+		};
+		const emptyAlignedHeading = {
+			name: 'core/heading',
+			attributes: { content: '', textAlign: 'center', level: 2 },
+			innerBlocks: [],
+		};
+		const headingWithContent = {
+			name: 'core/heading',
+			attributes: { content: 'heading', level: 2 },
+			innerBlocks: [],
+		};
+		const placeholderBlock = { name: 'core/separator' };
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				emptyAlignedParagraph,
+				emptyAlignedHeading,
+				headingWithContent,
+				placeholderBlock,
+			],
+		} );
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.focus();
+
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Remove the default empty block' )
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedHeading,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+
+		// Move the caret to the beginning of the empty heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll(
+				editor.getBlocks,
+				'Convert the non-default empty block to a default block'
+			)
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedParagraph,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toEqual( [
+			{
+				name: 'core/group',
+				attributes: { tagName: 'div' },
+				innerBlocks: [
+					headingWithContent,
+					expect.objectContaining( placeholderBlock ),
+				],
+			},
+		] );
+
+		// Move the caret to the beginning of the "heading" heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Lift the non-empty non-default block' )
+			.toEqual( [
+				headingWithContent,
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+	} );
+
 	test.describe( 'test restore selection when merge produces more than one block', () => {
 		const snap1 = [
 			{
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index bd1552ad4cb66a..4077d6dcc58200 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		] );
 	} );
 
-	test( 'Should navigate between inner and root blocks in navigation mode', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await writingFlowUtils.addDemoContent();
-
-		// Switch to navigation mode.
-		await page.keyboard.press( 'Escape' );
-		// Arrow up to Columns block.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow right into Column block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow down to reach second Column block.
-		await page.keyboard.press( 'ArrowDown' );
-		// Arrow right again into Paragraph block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-		// Arrow left back to Column block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow left back to Columns block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow up to first paragraph.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-	} );
-
 	test( 'should navigate around inline boundaries', async ( {
 		editor,
 		page,
@@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 <!-- /wp:table -->` );
 	} );
 
-	test( 'escape should set select mode and then focus the canvas', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Random Paragraph' );
-
-		// First escape enters navigation mode.
-		await page.keyboard.press( 'Escape' );
-		const navigationButton = page.getByLabel(
-			'Paragraph Block. Row 1. Random Paragraph'
-		);
-		await expect( navigationButton ).toBeVisible();
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// Second escape should send focus to the canvas
-		await page.keyboard.press( 'Escape' );
-		// The navigation button should be hidden.
-		await expect( navigationButton ).toBeHidden();
-		await expect(
-			page.getByRole( 'region', { name: 'Editor content' } )
-		).toBeFocused();
-	} );
-
 	// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
 	test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
 		editor,
@@ -1222,11 +1154,11 @@ class WritingFlowUtils {
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);
 		await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
-
-		await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
-		await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
+		await this.editor.showBlockToolbar();
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the column block.
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
 		await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 		await this.page.keyboard.type( 'Second paragraph' );
 	}
diff --git a/test/e2e/specs/interactivity/get-sever-context.spec.ts b/test/e2e/specs/interactivity/get-sever-context.spec.ts
new file mode 100644
index 00000000000000..d7bc4075f97604
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-context.spec.ts
@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerContext()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		const parent = {
+			prop: 'parent',
+			nested: {
+				prop: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+			},
+		};
+
+		const parentModified = {
+			prop: 'parentModified',
+			nested: {
+				prop: 'parentModified',
+			},
+			inherited: {
+				prop: 'parentModified',
+			},
+		};
+
+		const parentNewProps = {
+			prop: 'parent',
+			newProp: 'parent',
+			nested: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+		};
+
+		const child = {
+			prop: 'child',
+			nested: {
+				prop: 'child',
+			},
+		};
+
+		const childModified = {
+			prop: 'childModified',
+			nested: {
+				prop: 'childModified',
+			},
+		};
+
+		const childNewProps = {
+			prop: 'child',
+			newProp: 'child',
+			nested: {
+				prop: 'child',
+				newProp: 'child',
+			},
+		};
+
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - modified',
+			attributes: {
+				parentContext: parentModified,
+				childContext: childModified,
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - new props',
+			attributes: {
+				parentContext: parentNewProps,
+				childContext: childNewProps,
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - main',
+			attributes: {
+				links: { modified: link1, newProps: link2 },
+				parentContext: parent,
+				childContext: child,
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerContext() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update modified props on navigation', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+		const inheritedProp = page.getByTestId( 'inherited.prop' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+
+		await page.getByTestId( 'modified' ).click();
+
+		await expect( prop ).toHaveText( 'childModified' );
+		await expect( nestedProp ).toHaveText( 'childModified' );
+		await expect( inheritedProp ).toHaveText( 'parentModified' );
+
+		await page.goBack();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should add new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+		await expect( inheritedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should keep new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+
+		await page.goBack();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerContext' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/get-sever-state.spec.ts b/test/e2e/specs/interactivity/get-sever-state.spec.ts
new file mode 100644
index 00000000000000..16406c1d824463
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-state.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerState()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 1',
+			attributes: {
+				state: {
+					prop: 'link 1',
+					newProp: 'link 1',
+					nested: {
+						prop: 'link 1',
+						newProp: 'link 1',
+					},
+				},
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 2',
+			attributes: {
+				state: {
+					prop: 'link 2',
+					newProp: 'link 2',
+					nested: {
+						prop: 'link 2',
+						newProp: 'link 2',
+					},
+				},
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - main',
+			attributes: {
+				title: 'Main',
+				links: [ link1, link2 ],
+				state: {
+					prop: 'main',
+					nested: {
+						prop: 'main',
+					},
+				},
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerState() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update existing state props on navigation', async ( {
+		page,
+	} ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( prop ).toHaveText( 'link 1' );
+		await expect( nestedProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( prop ).toHaveText( 'link 2' );
+		await expect( nestedProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should add new state props and keep them on navigation', async ( {
+		page,
+	} ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( newProp ).toHaveText( 'link 2' );
+		await expect( nestedNewProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerState' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index 5b049cda252a8b..19318081aa171b 100644
--- a/test/e2e/specs/site-editor/command-center.spec.js
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -28,10 +28,12 @@ test.describe( 'Site editor command palette', () => {
 		await page.keyboard.type( 'new page' );
 		await page.getByRole( 'option', { name: 'Add new page' } ).click();
 		await expect( page ).toHaveURL(
-			'/wp-admin/post-new.php?post_type=page'
+			/\/wp-admin\/site-editor.php\?postId=(\d+)&postType=page&canvas=edit/
 		);
 		await expect(
-			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+			editor.canvas
+				.getByLabel( 'Block: Title' )
+				.locator( '[data-rich-text-placeholder="No title"]' )
 		).toBeVisible();
 	} );
 
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 4db860b703892c..1b92ef2e850e67 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
 		// The button role should have been removed from the iframe.
 		await expect( editorCanvasButton ).toBeHidden();
 
-		// Test to make sure a Tab keypress works as expected.
-		// As of this writing, we are in select mode and a tab
-		// keypress will reveal the header template select mode
-		// button. This test is not documenting that we _want_
-		// that action, but checking that we are within the site
-		// editor and keypresses work as intened.
-		await pageUtils.pressKeys( 'Tab' );
-		await expect(
-			page.getByRole( 'button', {
-				name: 'Template Part Block. Row 1. header',
-			} )
-		).toBeFocused();
-
 		// Test: We can go back to the main navigation from the editor frame
 		// Move to the document toolbar
 		await pageUtils.pressKeys( 'alt+F10' );
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index c4e153e9b5e2fa..3f871d28ef941b 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -42,9 +42,6 @@ test.describe( 'Style Book', () => {
 	test( 'should have tabs containing block examples', async ( { page } ) => {
 		await expect( page.locator( 'role=tab[name="Text"i]' ) ).toBeVisible();
 		await expect( page.locator( 'role=tab[name="Media"i]' ) ).toBeVisible();
-		await expect(
-			page.locator( 'role=tab[name="Design"i]' )
-		).toBeVisible();
 		await expect(
 			page.locator( 'role=tab[name="Widgets"i]' )
 		).toBeVisible();
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 53b4da7be2d61f..38e9d3ee2c58ab 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -465,16 +465,6 @@ test.describe( 'Widgets Customizer', () => {
 		await expect( paragraphBlock ).toBeVisible();
 
 		await paragraphBlock.focus();
-
-		// Expect pressing the Escape key to enter navigation mode,
-		// but not close the editor.
-		await page.keyboard.press( 'Escape' );
-		await expect(
-			page.locator(
-				'css=.block-editor-block-list__layout.is-navigate-mode'
-			)
-		).toBeVisible();
-		await expect( paragraphBlock ).toBeVisible();
 	} );
 
 	test( 'should move (inner) blocks to another sidebar', async ( {
diff --git a/test/gutenberg-test-themes/block-bindings/index.php b/test/gutenberg-test-themes/block-bindings/index.php
new file mode 100644
index 00000000000000..0c6530acc1aaff
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
diff --git a/test/gutenberg-test-themes/block-bindings/style.css b/test/gutenberg-test-themes/block-bindings/style.css
new file mode 100644
index 00000000000000..a6b91a613da6e6
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Block Bindings
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: Block bindings test theme.
+Requires at least: 6.7
+Tested up to: 6.7
+Requires PHP: 7.2
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: block-bindings
+Block bindings WordPress Theme, (C) 2024 WordPress.org
+Block bindings is distributed under the terms of the GNU GPL.
+*/
diff --git a/test/gutenberg-test-themes/block-bindings/templates/custom-template.html b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
new file mode 100644
index 00000000000000..a8602b1c679a8c
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
@@ -0,0 +1,3 @@
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Custom template</h2>
+<!-- /wp:heading -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/index.html b/test/gutenberg-test-themes/block-bindings/templates/index.html
new file mode 100644
index 00000000000000..ab136ac8df9a7d
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/index.html
@@ -0,0 +1,8 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single-movie.html b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single.html b/test/gutenberg-test-themes/block-bindings/templates/single.html
new file mode 100644
index 00000000000000..cd05d5fe917fea
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/theme.json b/test/gutenberg-test-themes/block-bindings/theme.json
new file mode 100644
index 00000000000000..c996b014328398
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/theme.json
@@ -0,0 +1,18 @@
+{
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"contentSize": "840px",
+			"wideSize": "1100px"
+		}
+	},
+	"customTemplates": [
+		{
+			"name": "custom-template",
+			"title": "Custom",
+			"postTypes": [ "post", "movie" ]
+		}
+	]
+}
diff --git a/test/integration/fixtures/blocks/core__categories.json b/test/integration/fixtures/blocks/core__categories.json
index 5d271aa5c84990..698105d8921341 100644
--- a/test/integration/fixtures/blocks/core__categories.json
+++ b/test/integration/fixtures/blocks/core__categories.json
@@ -3,6 +3,7 @@
 		"name": "core/categories",
 		"isValid": true,
 		"attributes": {
+			"taxonomy": "category",
 			"displayAsDropdown": false,
 			"showHierarchy": false,
 			"showPostCounts": false,
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 30f94485396432..8564d4116691fd 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -19,7 +19,10 @@ module.exports = {
 		'<rootDir>/test/unit/config/global-mocks.js',
 		'<rootDir>/test/unit/config/gutenberg-env.js',
 	],
-	setupFilesAfterEnv: [ '<rootDir>/test/unit/config/testing-library.js' ],
+	setupFilesAfterEnv: [
+		'<rootDir>/test/unit/config/testing-library.js',
+		'<rootDir>/test/unit/mocks/match-media.js',
+	],
 	testEnvironmentOptions: {
 		url: 'http://localhost/',
 	},
diff --git a/test/unit/mocks/match-media.js b/test/unit/mocks/match-media.js
new file mode 100644
index 00000000000000..3a9ff7b901ff15
--- /dev/null
+++ b/test/unit/mocks/match-media.js
@@ -0,0 +1,22 @@
+// Mock `matchMedia` so that all animations are skipped,
+// since js-dom does not fully support CSS animations.
+// Example: https://github.com/jsdom/jsdom/issues/3239
+const originalMatchMedia = window.matchMedia;
+const mockedMatchMedia = jest.fn( ( query ) => {
+	if ( /prefers-reduced-motion/.test( query ) ) {
+		return {
+			...originalMatchMedia( query ),
+			matches: true,
+		};
+	}
+
+	return originalMatchMedia( query );
+} );
+
+beforeAll( () => {
+	window.matchMedia = jest.fn( mockedMatchMedia );
+} );
+
+afterAll( () => {
+	window.matchMedia = originalMatchMedia;
+} );
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index a1610d0a5ba54e..76d460cafc15d0 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -146,7 +146,7 @@ module.exports = {
 	},
 	plugins: [
 		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
 		new CopyWebpackPlugin( {
 			patterns: gutenbergPackages
 				.map( ( packageName ) => ( {
diff --git a/tools/webpack/script-modules.js b/tools/webpack/script-modules.js
index 18287c96d83c8a..021f11f5f5ed95 100644
--- a/tools/webpack/script-modules.js
+++ b/tools/webpack/script-modules.js
@@ -89,11 +89,11 @@ module.exports = {
 	},
 	output: {
 		devtoolNamespace: 'wp',
-		filename: './build-module/[name].min.js',
+		filename: '[name].min.js',
 		library: {
 			type: 'module',
 		},
-		path: join( __dirname, '..', '..' ),
+		path: join( __dirname, '..', '..', 'build-module' ),
 		environment: { module: true },
 		module: true,
 		chunkFormat: 'module',
@@ -102,7 +102,13 @@ module.exports = {
 	resolve: {
 		extensions: [ '.js', '.ts', '.tsx' ],
 	},
-	plugins: [ ...plugins, new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		...plugins,
+		new DependencyExtractionWebpackPlugin( {
+			combineAssets: true,
+			combinedOutputFile: `./assets.php`,
+		} ),
+	],
 	watchOptions: {
 		ignored: [ '**/node_modules' ],
 		aggregateTimeout: 500,
diff --git a/tsconfig.json b/tsconfig.json
index 3ab54f66019bca..8821ef4404e3b5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,7 @@
 		{ "path": "packages/i18n" },
 		{ "path": "packages/icons" },
 		{ "path": "packages/interactivity" },
+		{ "path": "packages/interactivity/tsconfig.test.json" },
 		{ "path": "packages/interactivity-router" },
 		{ "path": "packages/is-shallow-equal" },
 		{ "path": "packages/keycodes" },