diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index ce830c04f651d..0f813267b586b 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -72,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' }}
@@ -168,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
@@ -225,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 }}
@@ -314,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.
@@ -336,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 499a2c020255c..e24b30eea7ba7 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 366bad9fdbc24..cf07b1a3936b9 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 1f6863b4a486e..40fbfe22bea56 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -22,7 +22,7 @@ jobs:
             - name: 'Get PR commit count'
               run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml
index b43b0cc267314..11688a7cfba98 100644
--- a/.github/workflows/cherry-pick-wp-release.yml
+++ b/.github/workflows/cherry-pick-wp-release.yml
@@ -70,7 +70,7 @@ jobs:
 
             - name: Checkout repository
               if: env.cherry_pick == 'true'
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   fetch-depth: 0
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 0de1b9ee6566a..d20b3e353c31e 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 99166989cd68c..bbf033222a4b3 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -27,7 +27,7 @@ jobs:
                 totalParts: [8]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
@@ -102,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/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index 8cc11b9bd913b..4715e1e09c2b8 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -6,7 +6,7 @@ jobs:
         name: 'Validation'
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
             - uses: gradle/wrapper-validation-action@v3
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 98615b93b8a17..9c4bee3af473c 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -33,7 +33,7 @@ jobs:
             WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index a24e501247402..66f8130ece2f0 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -31,7 +31,7 @@ jobs:
         steps:
             - name: Checkout (for CLI)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: cli
                   ref: trunk
@@ -39,7 +39,7 @@ jobs:
 
             - name: Checkout (for publishing)
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   # Later, we switch this branch in the script that publishes packages.
@@ -49,7 +49,7 @@ jobs:
 
             - name: Checkout (for publishing WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   path: publish
                   ref: wp/${{ github.event.inputs.wp_version }}
@@ -67,7 +67,7 @@ jobs:
 
             - name: Setup Node.js
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/setup-node@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 996bb1667ada5..2006eafd81cc7 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -12,13 +12,13 @@ jobs:
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@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 2c3998c295280..917ee6144087e 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 2926e494b09f8..cf065ad1cdf7d 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -23,11 +23,11 @@ jobs:
                 native-test-name: [gutenberg-editor-rendering]
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
-            - uses: ruby/setup-ruby@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 1efd248bf7f30..1af2bb0ec7927 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -22,12 +22,12 @@ jobs:
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
-            - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+            - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@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 65dd46b3a7610..83f7fdb96f926 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -12,7 +12,7 @@ jobs:
 
         steps:
             - name: Checkout
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml
index bbc5663cf715b..b71d9440c38a1 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 b80804b824e3c..bfa35492589a4 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' }}
 
@@ -155,6 +155,7 @@ jobs:
                     - '8.0'
                     - '8.1'
                     - '8.2'
+                    - '8.3'
                 multisite: [false, true]
                 wordpress: [''] # Latest WordPress version.
                 include:
@@ -163,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:
@@ -172,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' }}
 
@@ -197,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
@@ -283,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' }}
 
@@ -353,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 81a9c4739ac19..d09e2af3dd213 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -96,7 +96,7 @@ jobs:
 
         steps:
             - name: Checkout code
-              uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+              uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
               with:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
diff --git a/composer.json b/composer.json
index 3571377bd58bd..982a71a975223 100644
--- a/composer.json
+++ b/composer.json
@@ -23,14 +23,15 @@
 		"allow-plugins": {
 			"dealerdirect/phpcodesniffer-composer-installer": true,
 			"composer/installers": true
-		}
+		},
+		"lock": false
 	},
 	"require-dev": {
 		"phpcompatibility/phpcompatibility-wp": "^2.1.3",
 		"wp-coding-standards/wpcs": "^3.0",
 		"sirbrillig/phpcs-variable-analysis": "^2.8",
 		"spatie/phpunit-watcher": "^1.23",
-		"yoast/phpunit-polyfills": "^1.0",
+		"yoast/phpunit-polyfills": "^1.1.0",
 		"gutenberg/gutenberg-coding-standards": "@dev"
 	},
 	"repositories": [
@@ -43,7 +44,7 @@
 		}
 	],
 	"require": {
-		"composer/installers": "~1.0"
+		"composer/installers": "^1.0 || ^2.0"
 	},
 	"scripts": {
 		"format": "phpcbf --standard=phpcs.xml.dist --report-summary --report-source",
diff --git a/docs/manifest.json b/docs/manifest.json
index d76717fbdedfc..8387b9079694c 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1098,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/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index 4b3ca78f74d29..956e8dd010581 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_
 
@@ -982,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_
 
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index 4fea2c51fa54f..a4c1a59f0c423 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/lib/compat/wordpress-6.7/script-modules.php b/lib/compat/wordpress-6.7/script-modules.php
index 0a440ec81688d..2282a3d4bd5ac 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/media/load.php b/lib/experimental/media/load.php
index 5cb16d84e1d8d..bcb02accf62a6 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 fe23786fc0362..5a14e1418ed6d 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -200,44 +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 );
 }
-
-/**
- * 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>';
-}
-add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
-add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 91017c8bb9932..65f98bf6f15bf 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,6 +1,74 @@
 @import "./functions";
 @import "./long-content-fade";
 
+/**
+ * Typography
+ */
+
+@mixin _text-heading() {
+	font-family: $font-family-headings;
+	font-weight: $font-weight-medium;
+}
+
+@mixin _text-body() {
+	font-family: $font-family-body;
+	font-weight: $font-weight-regular;
+}
+
+@mixin heading-small() {
+	@include _text-heading();
+	font-size: $font-size-x-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin heading-medium() {
+	@include _text-heading();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin heading-large() {
+	@include _text-heading();
+	font-size: $font-size-large;
+	line-height: $line-height-small;
+}
+
+@mixin heading-x-large() {
+	@include _text-heading();
+	font-size: $font-size-x-large;
+	line-height: $line-height-medium;
+}
+
+@mixin heading-2x-large() {
+	@include _text-heading();
+	font-size: $font-size-2x-large;
+	line-height: $font-line-height-2x-large;
+}
+
+@mixin body-small() {
+	@include _text-body();
+	font-size: $font-size-small;
+	line-height: $line-height-x-small;
+}
+
+@mixin body-medium() {
+	@include _text-body();
+	font-size: $font-size-medium;
+	line-height: $line-height-small;
+}
+
+@mixin body-large() {
+	@include _text-body();
+	font-size: $font-size-large;
+	line-height: $line-height-medium;
+}
+
+@mixin body-x-large() {
+	@include _text-body();
+	font-size: $font-size-x-large;
+	line-height: $line-height-x-large;
+}
+
 /**
  * Breakpoint mixins
  */
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 35092033c552b..ec0bdf91f2489 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.
@@ -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/block-directory/src/components/downloadable-block-list-item/style.scss b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
index fa5e5906cb1b9..6fce5e1b5b32a 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/style.scss
+++ b/packages/block-directory/src/components/downloadable-block-list-item/style.scss
@@ -69,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-editor/src/components/block-draggable/style.scss b/packages/block-editor/src/components/block-draggable/style.scss
index 349afa2c3563c..f716f2d32a1d4 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 71cb2ede989b5..6b9bad09978a5 100644
--- a/packages/block-editor/src/components/block-heading-level-dropdown/index.js
+++ b/packages/block-editor/src/components/block-heading-level-dropdown/index.js
@@ -40,12 +40,18 @@ export default function HeadingLevelDropdown( {
 	value,
 	onChange,
 } ) {
+	const validOptions = options
+		.filter(
+			( option ) => option === 0 || HEADING_LEVELS.includes( option )
+		)
+		.sort( ( a, b ) => a - b ); // Sorts numerically in ascending order;
+
 	return (
 		<ToolbarDropdownMenu
 			popoverProps={ POPOVER_PROPS }
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
-			controls={ options.map( ( targetLevel ) => {
+			controls={ validOptions.map( ( targetLevel ) => {
 				const isActive = targetLevel === value;
 				return {
 					icon: <HeadingLevelIcon level={ targetLevel } />,
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 90c39649319dc..2cecd941dfa3b 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();
 							}
 						}
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3e3865e689bea..c5fda109d8b67 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -411,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/zoom-out-separator.js b/packages/block-editor/src/components/block-list/zoom-out-separator.js
index be5af54963060..9e0d087c2267c 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 035a38604b029..0bf8fd0532018 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-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index c551c2e1632bc..d571e0fef5dcc 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -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 ce1fa8b93df73..e4d7ce49b90f3 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 f5f34d821233a..85d39f9a36577 100644
--- a/packages/block-editor/src/components/block-patterns-paging/style.scss
+++ b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -4,37 +4,20 @@
 		border-top: 1px solid $gray-800;
 		padding: $grid-unit-05;
 		justify-content: center;
-		.components-button.is-tertiary {
-			width: auto;
-			height: $button-size-compact;
-			justify-content: center;
-
-			&:disabled {
-				color: $gray-600;
-				background: none;
-			}
-
-			&:hover:not(:disabled) {
-				color: $white;
-				background-color: $gray-700;
-			}
-		}
 	}
 }
 
 .show-icon-labels {
-	.block-editor-patterns__grid-pagination {
-		.components-button {
-			width: auto;
-			// Hide the button icons when labels are set to display...
-			span {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+	.block-editor-patterns__grid-pagination-button {
+		width: auto;
+		// Hide the button icons when labels are set to display...
+		span {
+			display: none;
+		}
+		// ... and display labels.
+		// Uses ::before as ::after is already used for active tab styling.
+		&::before {
+			content: attr(aria-label);
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/block-quick-navigation/index.js b/packages/block-editor/src/components/block-quick-navigation/index.js
index 4f22c2a266722..fdb3475b3e180 100644
--- a/packages/block-editor/src/components/block-quick-navigation/index.js
+++ b/packages/block-editor/src/components/block-quick-navigation/index.js
@@ -59,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-tools/zoom-out-mode-inserters.js b/packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
index 79f8be3f9cfe9..4d47c136defab 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,7 +16,7 @@ function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
 		hasSelection,
-		blockInsertionPoint,
+		insertionPoint,
 		blockOrder,
 		blockInsertionPointVisible,
 		setInserterIsOpened,
@@ -26,20 +26,20 @@ function ZoomOutModeInserters() {
 	} = 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,
@@ -50,7 +50,8 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	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( () => {
@@ -68,7 +69,7 @@ function ZoomOutModeInserters() {
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
 		const shouldRenderInsertionPoint =
-			blockInsertionPointVisible && blockInsertionPoint.index === index;
+			blockInsertionPointVisible && insertionPoint?.index === index;
 
 		const previousClientId = clientId;
 		const nextClientId = blockOrder[ index ];
diff --git a/packages/block-editor/src/components/font-family/README.md b/packages/block-editor/src/components/font-family/README.md
index 63965f509ba53..57697f595cc80 100644
--- a/packages/block-editor/src/components/font-family/README.md
+++ b/packages/block-editor/src/components/font-family/README.md
@@ -1,5 +1,9 @@
 # FontFamilyControl
 
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
 FontFamilyControl is a React component that renders a UI that allows users to select a font family.
 The component renders a user interface that allows the user to select from a set of predefined font families as defined by the `typography.fontFamilies` presets.
 Optionally, you can provide a `fontFamilies` prop that overrides the predefined font families.
@@ -10,7 +14,7 @@ Optionally, you can provide a `fontFamilies` prop that overrides the predefined
 
 ```jsx
 import { useState } from 'react';
-import { FontFamilyControl } from '@wordpress/block-editor';
+import { __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 // ...
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 0cd71bf77b983..de814152c620b 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -83,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 );
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 a890e5fe8dc13..070a850d430cc 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
@@ -167,8 +168,13 @@ 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 ) ) {
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index f40af12feddf4..7c7f836842b41 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -87,10 +87,10 @@ export default function QuickInserter( {
 	// the insertion point can work as expected.
 	const onBrowseAll = () => {
 		setInserterIsOpened( {
-			rootClientId,
-			insertionIndex,
 			filterValue,
 			onSelect,
+			rootClientId,
+			insertionIndex,
 		} );
 	};
 
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
index 59633f4750ff9..ef1833bda88e6 100644
--- a/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
+++ b/packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js
@@ -28,8 +28,8 @@ export default ( props ) => ( element ) => {
 		} = props.current;
 
 		// The event listener is attached to the window, so we need to check if
-		// the target is the element.
-		if ( event.target !== element ) {
+		// the target is the element or inside the element.
+		if ( ! element.contains( event.target ) ) {
 			return;
 		}
 
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index 441a07202c42a..5571db0ce9106 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -359,6 +359,20 @@ export function expandBlock( clientId ) {
 	};
 }
 
+/**
+ * @param {Object} value
+ * @param {string} value.rootClientId The root client ID to insert at.
+ * @param {number} value.index        The index to insert at.
+ *
+ * @return {Object} Action object.
+ */
+export function setInsertionPoint( value ) {
+	return {
+		type: 'SET_INSERTION_POINT',
+		value,
+	};
+}
+
 /**
  * Temporarily modify/unlock the content-only block for editions.
  *
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 7af83bed44b0d..c322898031065 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -674,3 +674,13 @@ export function getClosestAllowedInsertionPointForPattern(
 	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 827a2141f44c1..f6445f8a3681c 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1601,7 +1601,7 @@ export function blocksMode( state = {}, action ) {
  *
  * @return {Object} Updated state.
  */
-export function insertionPoint( state = null, action ) {
+export function insertionCue( state = null, action ) {
 	switch ( action.type ) {
 		case 'SHOW_INSERTION_POINT': {
 			const {
@@ -2066,7 +2066,7 @@ export function hoveredBlockClientId( state = false, action ) {
  * @param {boolean} state  Current state.
  * @param {Object}  action Dispatched action.
  *
- * @return {boolean} Updated state.
+ * @return {number} Updated state.
  */
 export function zoomLevel( state = 100, action ) {
 	switch ( action.type ) {
@@ -2079,6 +2079,25 @@ export function zoomLevel( state = 100, action ) {
 	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,
@@ -2092,6 +2111,7 @@ const combinedReducers = combineReducers( {
 	blocksMode,
 	blockListSettings,
 	insertionPoint,
+	insertionCue,
 	template,
 	settings,
 	preferences,
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index a73785edfefd1..7bb002661565b 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1454,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.
  *
@@ -1466,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;
@@ -1485,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,
@@ -1493,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;
 }
 
 /**
diff --git a/packages/block-editor/src/store/test/private-actions.js b/packages/block-editor/src/store/test/private-actions.js
index 7576b95866306..d54a519c9056b 100644
--- a/packages/block-editor/src/store/test/private-actions.js
+++ b/packages/block-editor/src/store/test/private-actions.js
@@ -6,6 +6,7 @@ import {
 	showBlockInterface,
 	expandBlock,
 	__experimentalUpdateSettings,
+	setInsertionPoint,
 	setOpenedBlockSettingsMenu,
 	startDragging,
 	stopDragging,
@@ -123,4 +124,18 @@ describe( 'private actions', () => {
 			} );
 		} );
 	} );
+
+	describe( 'setInsertionPoint', () => {
+		it( 'should return the SET_INSERTION_POINT action', () => {
+			expect(
+				setInsertionPoint( {
+					rootClientId: '',
+					index: '123',
+				} )
+			).toEqual( {
+				type: 'SET_INSERTION_POINT',
+				value: { rootClientId: '', index: '123' },
+			} );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js
index cd472fa59ac72..1f1b9a9143d98 100644
--- a/packages/block-editor/src/store/test/reducer.js
+++ b/packages/block-editor/src/store/test/reducer.js
@@ -28,6 +28,7 @@ import {
 	isMultiSelecting,
 	preferences,
 	blocksMode,
+	insertionCue,
 	insertionPoint,
 	template,
 	blockListSettings,
@@ -2378,15 +2379,15 @@ describe( 'state', () => {
 		} );
 	} );
 
-	describe( 'insertionPoint', () => {
+	describe( 'insertionCue', () => {
 		it( 'should default to null', () => {
-			const state = insertionPoint( undefined, {} );
+			const state = insertionCue( undefined, {} );
 
 			expect( state ).toBe( null );
 		} );
 
 		it( 'should set insertion point', () => {
-			const state = insertionPoint( null, {
+			const state = insertionCue( null, {
 				type: 'SHOW_INSERTION_POINT',
 				rootClientId: 'clientId1',
 				index: 0,
@@ -2403,7 +2404,7 @@ describe( 'state', () => {
 				rootClientId: 'clientId1',
 				index: 0,
 			} );
-			const state = insertionPoint( original, {
+			const state = insertionCue( original, {
 				type: 'HIDE_INSERTION_POINT',
 			} );
 
@@ -3485,4 +3486,39 @@ describe( 'state', () => {
 			expect( state ).toBe( null );
 		} );
 	} );
+
+	describe( 'insertionPoint', () => {
+		it( 'should default to null', () => {
+			const state = insertionPoint( undefined, {} );
+
+			expect( state ).toBe( null );
+		} );
+
+		it( 'should set insertion point', () => {
+			const state = insertionPoint( null, {
+				type: 'SET_INSERTION_POINT',
+				value: {
+					rootClientId: 'clientId1',
+					index: 4,
+				},
+			} );
+
+			expect( state ).toEqual( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+		} );
+
+		it( 'should clear the insertion point on block selection', () => {
+			const original = deepFreeze( {
+				rootClientId: 'clientId1',
+				index: 4,
+			} );
+			const state = insertionPoint( original, {
+				type: 'SELECT_BLOCK',
+			} );
+
+			expect( state ).toBe( null );
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index ebf23789fec31..a08c2e0dde150 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -2425,7 +2425,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 0,
 				},
@@ -2466,7 +2466,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2504,7 +2504,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			const insertionPoint1 = getBlockInsertionPoint( state );
@@ -2546,7 +2546,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2588,7 +2588,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2630,7 +2630,7 @@ describe( 'selectors', () => {
 						} )
 					),
 				},
-				insertionPoint: null,
+				insertionCue: null,
 			};
 
 			expect( getBlockInsertionPoint( state ) ).toEqual( {
@@ -2643,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 );
@@ -2651,7 +2651,7 @@ describe( 'selectors', () => {
 
 		it( 'should return true if assigned insertion point', () => {
 			const state = {
-				insertionPoint: {
+				insertionCue: {
 					rootClientId: undefined,
 					index: 5,
 				},
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index dc95d5906d734..36c217c1bf0c7 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/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index e7ab69af71103..e23f347fe4fee 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -8,6 +8,7 @@ import {
 	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`
@@ -183,4 +184,5 @@ lock( privateApis, {
 	unregisterBlockBindingsSource,
 	getBlockBindingsSource,
 	getBlockBindingsSources,
+	isUnmodifiedBlockContent,
 } );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index 20f0f6a85ed09..7bace4ff84c29 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -30,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.
@@ -43,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 );
 		}
 	);
 }
@@ -73,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.
  *
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 94633ec707810..8ef1c7c3bd200 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,9 @@
 -   `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)
 
diff --git a/packages/components/src/border-control/border-control-dropdown/component.tsx b/packages/components/src/border-control/border-control-dropdown/component.tsx
index b2951054e624e..d84d6bea77335 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 2c77a2d21465d..a678b6f362308 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/guide/index.tsx b/packages/components/src/guide/index.tsx
index 0ca5957fd3a65..121c9f22330e8 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 200225148a0a4..cc3c0265c4220 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -131,7 +131,8 @@ export {
 	NavigatorBackButton as __experimentalNavigatorBackButton,
 	NavigatorToParentButton as __experimentalNavigatorToParentButton,
 	useNavigator as __experimentalUseNavigator,
-} from './navigator';
+} from './navigator/legacy';
+export { Navigator, useNavigator } from './navigator';
 export { default as Notice } from './notice';
 export { default as __experimentalNumberControl } from './number-control';
 export { default as NoticeList } from './notice/list';
diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
new file mode 100644
index 0000000000000..00b1cfaeebe0f
--- /dev/null
+++ b/packages/components/src/navigator/README.md
@@ -0,0 +1,168 @@
+# `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`
+
+###### `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`
+
+###### `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`
+
+###### `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.
+
+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 130edc2ae52eb..0000000000000
--- 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 0000000000000..1d9ae95441e01
--- /dev/null
+++ b/packages/components/src/navigator/index.tsx
@@ -0,0 +1,131 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as TopLevelNavigator } from './navigator/component';
+import { NavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton } from './navigator-back-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `Navigator` component allows rendering nested views/panels/menus
+ * (via the `Navigator.Screen` component) and navigate between them
+ * (via the `Navigator.Button` and `Navigator.BackButton` components).
+ *
+ * ```jsx
+ * import { Navigator } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <Navigator initialPath="/">
+ *     <Navigator.Screen path="/">
+ *       <p>This is the home screen.</p>
+ *        <Navigator.Button path="/child">
+ *          Navigate to child screen.
+ *       </Navigator.Button>
+ *     </Navigator.Screen>
+ *
+ *     <Navigator.Screen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <Navigator.BackButton>
+ *         Go back
+ *       </Navigator.BackButton>
+ *     </Navigator.Screen>
+ *   </Navigator>
+ * );
+ * ```
+ */
+export const Navigator = Object.assign( TopLevelNavigator, {
+	/**
+	 * The `Navigator.Screen` component represents a single view/screen/panel and
+	 * should be used in combination with the `Navigator`, the `Navigator.Button`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Screen: Object.assign( NavigatorScreen, {
+		displayName: 'Navigator.Screen',
+	} ),
+	/**
+	 * The `Navigator.Button` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.BackButton` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	Button: Object.assign( NavigatorButton, {
+		displayName: 'Navigator.Button',
+	} ),
+	/**
+	 * The `Navigator.BackButton` component can be used to navigate to a screen and
+	 * should be used in combination with the `Navigator`, the `Navigator.Screen`
+	 * and the `Navigator.Button` components.
+	 *
+	 * @example
+	 * ```jsx
+	 * import { Navigator } from '@wordpress/components';
+	 *
+	 * const MyNavigation = () => (
+	 *   <Navigator initialPath="/">
+	 *     <Navigator.Screen path="/">
+	 *       <p>This is the home screen.</p>
+	 *        <Navigator.Button path="/child">
+	 *          Navigate to child screen.
+	 *       </Navigator.Button>
+	 *     </Navigator.Screen>
+	 *
+	 *     <Navigator.Screen path="/child">
+	 *       <p>This is the child screen.</p>
+	 *       <Navigator.BackButton>
+	 *         Go back
+	 *       </Navigator.BackButton>
+	 *     </Navigator.Screen>
+	 *   </Navigator>
+	 * );
+	 * ```
+	 */
+	BackButton: Object.assign( NavigatorBackButton, {
+		displayName: 'Navigator.BackButton',
+	} ),
+} );
diff --git a/packages/components/src/navigator/legacy.ts b/packages/components/src/navigator/legacy.ts
new file mode 100644
index 0000000000000..1caa5380fc049
--- /dev/null
+++ b/packages/components/src/navigator/legacy.ts
@@ -0,0 +1,169 @@
+/**
+ * Internal dependencies
+ */
+import { Navigator as InternalNavigator } from './navigator/component';
+import { NavigatorScreen as InternalNavigatorScreen } from './navigator-screen/component';
+import { NavigatorButton as InternalNavigatorButton } from './navigator-button/component';
+import { NavigatorBackButton as InternalNavigatorBackButton } from './navigator-back-button/component';
+import { NavigatorToParentButton as InternalNavigatorToParentButton } from './navigator-to-parent-button/component';
+export { useNavigator } from './use-navigator';
+
+/**
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between them
+ * (via the `NavigatorButton` and `NavigatorBackButton` components).
+ *
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorProvider = Object.assign( InternalNavigator, {
+	displayName: 'NavigatorProvider',
+} );
+
+/**
+ * The `NavigatorScreen` component represents a single view/screen/panel and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorButton` and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorScreen = Object.assign( InternalNavigatorScreen, {
+	displayName: 'NavigatorScreen',
+} );
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorButton = Object.assign( InternalNavigatorButton, {
+	displayName: 'NavigatorButton',
+} );
+
+/**
+ * The `NavigatorBackButton` component can be used to navigate to a screen and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorScreen` and the `NavigatorButton` components.
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back (to parent)
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+export const NavigatorBackButton = Object.assign( InternalNavigatorBackButton, {
+	displayName: 'NavigatorBackButton',
+} );
+
+/**
+ * _Note: this component is deprecated. Please use the `NavigatorBackButton`
+ * component instead._
+ *
+ * @deprecated
+ */
+export const NavigatorToParentButton = Object.assign(
+	InternalNavigatorToParentButton,
+	{
+		displayName: 'NavigatorToParentButton',
+	}
+);
diff --git a/packages/components/src/navigator/navigator-back-button/README.md b/packages/components/src/navigator/navigator-back-button/README.md
deleted file mode 100644
index 01d4221be536e..0000000000000
--- a/packages/components/src/navigator/navigator-back-button/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# `NavigatorBackButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorBackButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-### Inherited props
-
-`NavigatorBackButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-back-button/component.tsx b/packages/components/src/navigator/navigator-back-button/component.tsx
index 88ed45b643a13..b5c4de7df78a8 100644
--- a/packages/components/src/navigator/navigator-back-button/component.tsx
+++ b/packages/components/src/navigator/navigator-back-button/component.tsx
@@ -21,43 +21,7 @@ function UnconnectedNavigatorBackButton(
 	return <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;
 }
 
-/**
- * The `NavigatorBackButton` component can be used to navigate to a screen and
- * should be used in combination with the `NavigatorProvider`, the
- * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
- * hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back (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 9ddc095292190..d6fcd39647bff 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 72154ec317da4..0000000000000
--- a/packages/components/src/navigator/navigator-button/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `NavigatorButton`
-
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-The `NavigatorButton` component can be used to navigate to a screen and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorScreen`](/packages/components/src/navigator/navigator-screen/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
-
-## Usage
-
-Refer to [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md#usage) for a usage example.
-
-## Props
-
-The component accepts the following props:
-
-### `attributeName`: `string`
-
-The HTML attribute used to identify the `NavigatorButton`, which is used by `Navigator` to restore focus.
-
--   Required: No
--   Default: `id`
-
-### `onClick`: `React.MouseEventHandler< HTMLElement >`
-
-The callback called in response to a `click` event.
-
--   Required: No
-
-### `path`: `string`
-
-The path of the screen to navigate to. The value of this prop needs to be [a valid value for an HTML attribute](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2).
-
--   Required: Yes
-
-### Inherited props
-
-`NavigatorButton` also inherits all of the [`Button` props](/packages/components/src/button/README.md#props), except for `href` and `target`.
diff --git a/packages/components/src/navigator/navigator-button/component.tsx b/packages/components/src/navigator/navigator-button/component.tsx
index 1b84a2315c04d..a6dc796337672 100644
--- a/packages/components/src/navigator/navigator-button/component.tsx
+++ b/packages/components/src/navigator/navigator-button/component.tsx
@@ -21,42 +21,7 @@ function UnconnectedNavigatorButton(
 	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
 }
 
-/**
- * The `NavigatorButton` component can be used to navigate to a screen and should
- * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
- * and the `NavigatorBackButton` components (or the `useNavigator` hook).
- *
- * @example
- * ```jsx
- * import {
- *   __experimentalNavigatorProvider as NavigatorProvider,
- *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalNavigatorButton as NavigatorButton,
- *   __experimentalNavigatorBackButton as NavigatorBackButton,
- * } from '@wordpress/components';
- *
- * const MyNavigation = () => (
- *   <NavigatorProvider initialPath="/">
- *     <NavigatorScreen path="/">
- *       <p>This is the home screen.</p>
- *        <NavigatorButton path="/child">
- *          Navigate to child screen.
- *       </NavigatorButton>
- *     </NavigatorScreen>
- *
- *     <NavigatorScreen path="/child">
- *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>
- *         Go back
- *       </NavigatorBackButton>
- *     </NavigatorScreen>
- *   </NavigatorProvider>
- * );
- * ```
- */
 export const NavigatorButton = contextConnect(
 	UnconnectedNavigatorButton,
-	'NavigatorButton'
+	'Navigator.Button'
 );
-
-export default NavigatorButton;
diff --git a/packages/components/src/navigator/navigator-button/hook.ts b/packages/components/src/navigator/navigator-button/hook.ts
index 3e39b05661e1b..59d2aaa65662d 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 b9bc8f0c6bcdc..0000000000000
--- a/packages/components/src/navigator/navigator-provider/README.md
+++ /dev/null
@@ -1,98 +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>
-);
-```
-
-### 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 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.
-
-### Height and animations
-
-Due to how `NavigatorScreen` animations work, it is recommended that the `NavigatorProvider` component is assigned a `height` to prevent some potential UI jumps while moving across screens.
-
-## 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 583da461cd3c2..0000000000000
--- 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 f2d2c26e576c2..fe0d81b90a17b 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -36,7 +36,7 @@ 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.'
 		);
 	}
 
@@ -48,7 +48,7 @@ function UnconnectedNavigatorScreen(
 		path,
 		onAnimationEnd: onAnimationEndProp,
 		...otherProps
-	} = useContextSystem( props, 'NavigatorScreen' );
+	} = useContextSystem( props, 'Navigator.Screen' );
 
 	const { location, match, addScreen, removeScreen } =
 		useContext( NavigatorContext );
@@ -153,43 +153,7 @@ function UnconnectedNavigatorScreen(
 	) : 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-to-parent-button/README.md b/packages/components/src/navigator/navigator-to-parent-button/README.md
deleted file mode 100644
index 0100ea9b8d2e1..0000000000000
--- 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 fcbadea03cf7b..f1c2d27e2284a 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 82%
rename from packages/components/src/navigator/navigator-provider/component.tsx
rename to packages/components/src/navigator/navigator/component.tsx
index 01254b743f87d..bd49b3682fb14 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,
@@ -213,8 +213,8 @@ function routerReducer(
 	};
 }
 
-function UnconnectedNavigatorProvider(
-	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
+function UnconnectedNavigator(
+	props: WordPressComponentProps< NavigatorProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
@@ -222,7 +222,7 @@ function UnconnectedNavigatorProvider(
 		children,
 		className,
 		...otherProps
-	} = useContextSystem( props, 'NavigatorProvider' );
+	} = useContextSystem( props, 'Navigator' );
 
 	const [ routerState, dispatch ] = useReducer(
 		routerReducer,
@@ -275,7 +275,7 @@ function UnconnectedNavigatorProvider(
 
 	const cx = useCx();
 	const classes = useMemo(
-		() => cx( styles.navigatorProviderWrapper, className ),
+		() => cx( styles.navigatorWrapper, className ),
 		[ className, cx ]
 	);
 
@@ -288,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 8edac7e7b8168..e9e342bb0d2ee 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 } },
@@ -40,10 +40,10 @@ const meta: Meta< typeof NavigatorProvider > = {
 						 * detail of the Navigator component. Do not use outside of
 						 * its source code.
 						 */
-						[data-wp-component="NavigatorProvider"] {
+						[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: (
@@ -170,19 +170,19 @@ export const SkipFocus: StoryObj< typeof NavigatorProvider > = {
 						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 fd355bf4dd48f..167d4ac07de3d 100644
--- a/packages/components/src/navigator/styles.ts
+++ b/packages/components/src/navigator/styles.ts
@@ -3,7 +3,7 @@
  */
 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: clip;
diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index 820942a22644b..cab6e9a4cdadf 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 855787b4d0a19..aeb5fd3b12c7f 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 7ac35d73150d3..1ea99f3f1c857 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/e2e-tests/plugins/block-bindings.php b/packages/e2e-tests/plugins/block-bindings.php
index 0629a39728602..ffbe50ab3cc90 100644
--- a/packages/e2e-tests/plugins/block-bindings.php
+++ b/packages/e2e-tests/plugins/block-bindings.php
@@ -8,67 +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',
-			'show_in_rest' => true,
-			'single'       => true,
-			'default'      => 'protected field value',
+			'default'        => 'Protected field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => true,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 	register_meta(
 		'post',
 		'show_in_rest_false_field',
 		array(
-			'show_in_rest' => false,
-			'type'         => 'string',
-			'single'       => true,
-			'default'      => 'show_in_rest false field value',
+			'default'        => 'show_in_rest false field value',
+			'object_subtype' => 'movie',
+			'show_in_rest'   => false,
+			'single'         => true,
+			'type'           => 'string',
 		)
 	);
 }
diff --git a/packages/e2e-tests/plugins/block-bindings/index.js b/packages/e2e-tests/plugins/block-bindings/index.js
new file mode 100644
index 0000000000000..dfdc706b69c64
--- /dev/null
+++ b/packages/e2e-tests/plugins/block-bindings/index.js
@@ -0,0 +1,55 @@
+const { unlock } =
+	wp.privateApis.__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/blocks'
+	);
+
+const { registerBlockBindingsSource } = unlock( wp.blocks.privateApis );
+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 = ( { registry, bindings } ) => {
+	Object.values( bindings ).forEach( ( { args, newValue } ) => {
+		// Example of what could be done.
+		registry.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/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index d00f7472382f8..1dc0401baf21c 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -8,7 +8,7 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import deprecated from '@wordpress/deprecated';
-import { addFilter } from '@wordpress/hooks';
+import { addAction } from '@wordpress/hooks';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -478,21 +478,14 @@ export const initializeMetaBoxes =
 		metaBoxesInitialized = true;
 
 		// Save metaboxes on save completion, except for autosaves.
-		addFilter(
-			'editor.__unstableSavePost',
+		addAction(
+			'editor.savePost',
 			'core/edit-post/save-metaboxes',
-			( previous, options ) =>
-				previous.then( () => {
-					if ( options.isAutosave ) {
-						return;
-					}
-
-					if ( ! select.hasMetaBoxes() ) {
-						return;
-					}
-
-					return dispatch.requestMetaBoxUpdates();
-				} )
+			async ( options ) => {
+				if ( ! options.isAutosave && select.hasMetaBoxes() ) {
+					await dispatch.requestMetaBoxUpdates();
+				}
+			}
 		);
 
 		dispatch( {
diff --git a/packages/edit-post/src/store/selectors.js b/packages/edit-post/src/store/selectors.js
index 5bea6e7d35eb6..8d85249e8100b 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/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index c55d6b188e1a2..ac1083e69abd7 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -125,7 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
-								__next40pxDefaultSize
+								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 7df2b0ceca552..80d6a909d0c95 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
+	top: $grid-unit-10;
 	z-index: 1;
 	background: $white;
 }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 72f796845c567..855225081236c 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
@@ -291,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 10efff92af643..a6cc508496694 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/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js
deleted file mode 100644
index ce754121dfe1b..0000000000000
--- 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 c23592c51a6a2..70acf9e7ae3d4 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() {
@@ -32,7 +32,7 @@ function ScreenTypography() {
 			/>
 			<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/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
deleted file mode 100644
index bcd450def06f8..0000000000000
--- 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 bc6906a769af4..b1550d2a24513 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -32,7 +32,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';
@@ -312,10 +311,6 @@ function GlobalStylesUI() {
 				<FontSize />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/typography/typeset">
-				<ScreenTypeset />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index b2d929a7943db..27a3f7b99bf7e 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/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 3f7bbea0be7d2..ddef4a71d0a91 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/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index 8c0d59573a44d..ba84ef2b392f5 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -128,11 +128,21 @@ export function EntitiesSavedStatesExtensible( {
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
+					size="compact"
 					disabled={ ! saveEnabled }
 					accessibleWhenDisabled
 					onClick={ () =>
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
 				>
 					{ saveLabel }
 				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">
diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss
index 981a0d92e5ff6..e2c320678c322 100644
--- a/packages/editor/src/components/entities-saved-states/style.scss
+++ b/packages/editor/src/components/entities-saved-states/style.scss
@@ -1,8 +1,8 @@
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 	height: $header-height;
 	border-bottom: $border-width solid $gray-300;
 }
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index b98770b7afe8f..5cace042fae58 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/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
index 8c8d757c58339..32ea69c425e0b 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js
@@ -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/store/actions.js b/packages/editor/src/store/actions.js
index 59faa6b5b7362..fa720e1fc7d34 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 357a7344f631d..9bc065436c10b 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 fae30c6fc271e..206c60a159d04 100644
--- a/packages/editor/src/store/test/actions.js
+++ b/packages/editor/src/store/test/actions.js
@@ -576,4 +576,80 @@ describe( 'Editor actions', () => {
 			).toBe( true );
 		} );
 	} );
+
+	describe( 'setIsInserterOpened', () => {
+		it( 'should open and close the inserter', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( false );
+
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the list view should close when the inserter is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+	} );
+
+	describe( 'setIsListViewOpened', () => {
+		it( 'should open and close the list view', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( false );
+
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+		} );
+
+		it( 'the inserter should close when the list view is opened', () => {
+			const registry = createRegistryWithStores();
+
+			registry.dispatch( editorStore ).setIsInserterOpened( true );
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				false
+			);
+
+			registry.dispatch( editorStore ).setIsListViewOpened( true );
+			expect( registry.select( editorStore ).isListViewOpened() ).toBe(
+				true
+			);
+			expect( registry.select( editorStore ).isInserterOpened() ).toBe(
+				false
+			);
+		} );
+	} );
 } );
diff --git a/packages/editor/src/store/test/reducer.js b/packages/editor/src/store/test/reducer.js
index b4fd013c6b4d4..3971ad30c9de7 100644
--- a/packages/editor/src/store/test/reducer.js
+++ b/packages/editor/src/store/test/reducer.js
@@ -18,7 +18,6 @@ import {
 	blockInserterPanel,
 	listViewPanel,
 } from '../reducer';
-import { setIsInserterOpened } from '../actions';
 
 describe( 'state', () => {
 	describe( 'hasSameKeys()', () => {
@@ -298,15 +297,6 @@ describe( 'state', () => {
 			expect( blockInserterPanel( true, {} ) ).toBe( true );
 		} );
 
-		it( 'should set the open state of the inserter panel', () => {
-			expect(
-				blockInserterPanel( false, setIsInserterOpened( true ) )
-			).toBe( true );
-			expect(
-				blockInserterPanel( true, setIsInserterOpened( false ) )
-			).toBe( false );
-		} );
-
 		it( 'should close the inserter when opening the list view panel', () => {
 			expect(
 				blockInserterPanel( true, {
@@ -349,17 +339,5 @@ describe( 'state', () => {
 				} )
 			).toBe( false );
 		} );
-
-		it( 'should close the list view when opening the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( true ) ) ).toBe(
-				false
-			);
-		} );
-
-		it( 'should not change the state when closing the inserter panel', () => {
-			expect( listViewPanel( true, setIsInserterOpened( false ) ) ).toBe(
-				true
-			);
-		} );
 	} );
 } );
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index 0e162b64513d2..060e061b5c284 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 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)
diff --git a/packages/hooks/README.md b/packages/hooks/README.md
index 3e9897c79952c..f80d2e63af37b 100644
--- a/packages/hooks/README.md
+++ b/packages/hooks/README.md
@@ -41,7 +41,9 @@ One notable difference between the JS and PHP hooks API is that in the JS versio
 -   `removeAllActions( 'hookName' )`
 -   `removeAllFilters( 'hookName' )`
 -   `doAction( 'hookName', arg1, arg2, moreArgs, finalArg )`
+-   `doActionAsync( 'hookName', arg1, arg2, moreArgs, finalArg )`
 -   `applyFilters( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
+-   `applyFiltersAsync( 'hookName', content, arg1, arg2, moreArgs, finalArg )`
 -   `doingAction( 'hookName' )`
 -   `doingFilter( 'hookName' )`
 -   `didAction( 'hookName' )`
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.js
index 634901fe55f63..3ada032249600 100644
--- a/packages/hooks/src/createCurrentHook.js
+++ b/packages/hooks/src/createCurrentHook.js
@@ -11,11 +11,8 @@
 function createCurrentHook( hooks, storeKey ) {
 	return function currentHook() {
 		const hooksStore = hooks[ storeKey ];
-
-		return (
-			hooksStore.__current[ hooksStore.__current.length - 1 ]?.name ??
-			null
-		);
+		const currentArray = Array.from( hooksStore.__current );
+		return currentArray.at( -1 )?.name ?? null;
 	};
 }
 
diff --git a/packages/hooks/src/createDoingHook.js b/packages/hooks/src/createDoingHook.js
index 652ab06b4ba72..9fccf38171f33 100644
--- a/packages/hooks/src/createDoingHook.js
+++ b/packages/hooks/src/createDoingHook.js
@@ -24,13 +24,13 @@ function createDoingHook( hooks, storeKey ) {
 
 		// If the hookName was not passed, check for any current hook.
 		if ( 'undefined' === typeof hookName ) {
-			return 'undefined' !== typeof hooksStore.__current[ 0 ];
+			return hooksStore.__current.size > 0;
 		}
 
-		// Return the __current hook.
-		return hooksStore.__current[ 0 ]
-			? hookName === hooksStore.__current[ 0 ].name
-			: false;
+		// Find if the `hookName` hook is in `__current`.
+		return Array.from( hooksStore.__current ).some(
+			( hook ) => hook.name === hookName
+		);
 	};
 }
 
diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.js
index 361383a3a97fc..1f9b1a8206b02 100644
--- a/packages/hooks/src/createHooks.js
+++ b/packages/hooks/src/createHooks.js
@@ -20,11 +20,11 @@ export class _Hooks {
 	constructor() {
 		/** @type {import('.').Store} actions */
 		this.actions = Object.create( null );
-		this.actions.__current = [];
+		this.actions.__current = new Set();
 
 		/** @type {import('.').Store} filters */
 		this.filters = Object.create( null );
-		this.filters.__current = [];
+		this.filters.__current = new Set();
 
 		this.addAction = createAddHook( this, 'actions' );
 		this.addFilter = createAddHook( this, 'filters' );
@@ -34,8 +34,10 @@ export class _Hooks {
 		this.hasFilter = createHasHook( this, 'filters' );
 		this.removeAllActions = createRemoveHook( this, 'actions', true );
 		this.removeAllFilters = createRemoveHook( this, 'filters', true );
-		this.doAction = createRunHook( this, 'actions' );
-		this.applyFilters = createRunHook( this, 'filters', true );
+		this.doAction = createRunHook( this, 'actions', false, false );
+		this.doActionAsync = createRunHook( this, 'actions', false, true );
+		this.applyFilters = createRunHook( this, 'filters', true, false );
+		this.applyFiltersAsync = createRunHook( this, 'filters', true, true );
 		this.currentAction = createCurrentHook( this, 'actions' );
 		this.currentFilter = createCurrentHook( this, 'filters' );
 		this.doingAction = createDoingHook( this, 'actions' );
diff --git a/packages/hooks/src/createRunHook.js b/packages/hooks/src/createRunHook.js
index c2bf6fd187ce0..f2a56dbdc0d71 100644
--- a/packages/hooks/src/createRunHook.js
+++ b/packages/hooks/src/createRunHook.js
@@ -3,15 +3,15 @@
  * registered to a hook of the specified type, optionally returning the final
  * value of the call chain.
  *
- * @param {import('.').Hooks}    hooks                  Hooks instance.
+ * @param {import('.').Hooks}    hooks          Hooks instance.
  * @param {import('.').StoreKey} storeKey
- * @param {boolean}              [returnFirstArg=false] Whether each hook callback is expected to
- *                                                      return its first argument.
+ * @param {boolean}              returnFirstArg Whether each hook callback is expected to return its first argument.
+ * @param {boolean}              async          Whether the hook callback should be run asynchronously
  *
  * @return {(hookName:string, ...args: unknown[]) => undefined|unknown} Function that runs hook callbacks.
  */
-function createRunHook( hooks, storeKey, returnFirstArg = false ) {
-	return function runHooks( hookName, ...args ) {
+function createRunHook( hooks, storeKey, returnFirstArg, async ) {
+	return function runHook( hookName, ...args ) {
 		const hooksStore = hooks[ storeKey ];
 
 		if ( ! hooksStore[ hookName ] ) {
@@ -42,26 +42,43 @@ function createRunHook( hooks, storeKey, returnFirstArg = false ) {
 			currentIndex: 0,
 		};
 
-		hooksStore.__current.push( hookInfo );
-
-		while ( hookInfo.currentIndex < handlers.length ) {
-			const handler = handlers[ hookInfo.currentIndex ];
-
-			const result = handler.callback.apply( null, args );
-			if ( returnFirstArg ) {
-				args[ 0 ] = result;
+		async function asyncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = await handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
 			}
-
-			hookInfo.currentIndex++;
 		}
 
-		hooksStore.__current.pop();
-
-		if ( returnFirstArg ) {
-			return args[ 0 ];
+		function syncRunner() {
+			try {
+				hooksStore.__current.add( hookInfo );
+				let result = returnFirstArg ? args[ 0 ] : undefined;
+				while ( hookInfo.currentIndex < handlers.length ) {
+					const handler = handlers[ hookInfo.currentIndex ];
+					result = handler.callback.apply( null, args );
+					if ( returnFirstArg ) {
+						args[ 0 ] = result;
+					}
+					hookInfo.currentIndex++;
+				}
+				return returnFirstArg ? result : undefined;
+			} finally {
+				hooksStore.__current.delete( hookInfo );
+			}
 		}
 
-		return undefined;
+		return ( async ? asyncRunner : syncRunner )();
 	};
 }
 
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.js
index 653a9537145d9..1d13397e406c6 100644
--- a/packages/hooks/src/index.js
+++ b/packages/hooks/src/index.js
@@ -25,7 +25,7 @@ import createHooks from './createHooks';
  */
 
 /**
- * @typedef {Record<string, Hook> & {__current: Current[]}} Store
+ * @typedef {Record<string, Hook> & {__current: Set<Current>}} Store
  */
 
 /**
@@ -48,7 +48,9 @@ const {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -70,7 +72,9 @@ export {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
diff --git a/packages/hooks/src/test/index.test.js b/packages/hooks/src/test/index.test.js
index 9b7eb3b8e0e22..5fdaf5fc7207a 100644
--- a/packages/hooks/src/test/index.test.js
+++ b/packages/hooks/src/test/index.test.js
@@ -12,7 +12,9 @@ import {
 	removeAllActions,
 	removeAllFilters,
 	doAction,
+	doActionAsync,
 	applyFilters,
+	applyFiltersAsync,
 	currentAction,
 	currentFilter,
 	doingAction,
@@ -943,3 +945,151 @@ test( 'checking hasFilter with named callbacks and removeAllActions', () => {
 	expect( hasFilter( 'test.filter', 'my_callback' ) ).toBe( false );
 	expect( hasFilter( 'test.filter', 'my_second_callback' ) ).toBe( false );
 } );
+
+describe( 'async filter', () => {
+	test( 'runs all registered handlers', async () => {
+		addFilter( 'test.async.filter', 'callback_plus1', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value + 1 ), 10 )
+			);
+		} );
+		addFilter( 'test.async.filter', 'callback_times2', ( value ) => {
+			return new Promise( ( r ) =>
+				setTimeout( () => r( value * 2 ), 10 )
+			);
+		} );
+
+		expect( await applyFiltersAsync( 'test.async.filter', 2 ) ).toBe( 6 );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const sqrt = jest.fn( async ( value ) => {
+			if ( value < 0 ) {
+				throw new Error( 'cannot pass negative value to sqrt' );
+			}
+			return Math.sqrt( value );
+		} );
+
+		const plus1 = jest.fn( async ( value ) => {
+			return value + 1;
+		} );
+
+		addFilter( 'test.async.filter', 'callback_sqrt', sqrt );
+		addFilter( 'test.async.filter', 'callback_plus1', plus1 );
+
+		await expect(
+			applyFiltersAsync( 'test.async.filter', -1 )
+		).rejects.toThrow( 'cannot pass negative value to sqrt' );
+		expect( sqrt ).toHaveBeenCalledTimes( 1 );
+		expect( plus1 ).not.toHaveBeenCalled();
+	} );
+
+	test( 'is correctly tracked by doingFilter and didFilter', async () => {
+		addFilter( 'test.async.filter', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter' ) ).toBe( true );
+			return value;
+		} );
+
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 0 );
+		await applyFiltersAsync( 'test.async.filter', 0 );
+		expect( doingFilter( 'test.async.filter' ) ).toBe( false );
+		expect( didFilter( 'test.async.filter' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple filters run at once', async () => {
+		addFilter( 'test.async.filter1', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+		addFilter( 'test.async.filter2', 'callback_doing', async ( value ) => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingFilter( 'test.async.filter2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			return value;
+		} );
+
+		await Promise.all( [
+			applyFiltersAsync( 'test.async.filter1', 0 ),
+			applyFiltersAsync( 'test.async.filter2', 0 ),
+		] );
+	} );
+} );
+
+describe( 'async action', () => {
+	test( 'runs all registered handlers sequentially', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			outputs.push( 1 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 2 );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await doActionAsync( 'test.async.action' );
+		expect( outputs ).toEqual( [ 1, 2, 3, 4 ] );
+	} );
+
+	test( 'aborts when handler throws an error', async () => {
+		const outputs = [];
+		const action1 = async () => {
+			throw new Error( 'aborting' );
+		};
+
+		const action2 = async () => {
+			outputs.push( 3 );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			outputs.push( 4 );
+		};
+
+		addAction( 'test.async.action', 'action1', action1 );
+		addAction( 'test.async.action', 'action2', action2 );
+
+		await expect( doActionAsync( 'test.async.action' ) ).rejects.toThrow(
+			'aborting'
+		);
+		expect( outputs ).toEqual( [] );
+	} );
+
+	test( 'is correctly tracked by doingAction and didAction', async () => {
+		addAction( 'test.async.action', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action' ) ).toBe( true );
+		} );
+
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 0 );
+		await doActionAsync( 'test.async.action', 0 );
+		expect( doingAction( 'test.async.action' ) ).toBe( false );
+		expect( didAction( 'test.async.action' ) ).toBe( 1 );
+	} );
+
+	test( 'is correctly tracked when multiple actions run at once', async () => {
+		addAction( 'test.async.action1', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action1' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+		addAction( 'test.async.action2', 'callback_doing', async () => {
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+			expect( doingAction( 'test.async.action2' ) ).toBe( true );
+			await new Promise( ( r ) => setTimeout( () => r(), 10 ) );
+		} );
+
+		await Promise.all( [
+			doActionAsync( 'test.async.action1', 0 ),
+			doActionAsync( 'test.async.action2', 0 ),
+		] );
+	} );
+} );
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 08c7ab95b4b4a..ddf850dd11681 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -9,6 +9,7 @@
 -   Add new `envelope` icon.
 
 -   Add new `bell` and `bell-unread` icons.
+-   Add new `arrowUpLeft` and `arrowDownRight` icons.
 
 ## 10.7.0 (2024-09-05)
 
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index e61be2cc86bcd..586911ffc746b 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -10,9 +10,11 @@ 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';
diff --git a/packages/icons/src/library/arrow-down-right.js b/packages/icons/src/library/arrow-down-right.js
new file mode 100644
index 0000000000000..3755b63873cef
--- /dev/null
+++ b/packages/icons/src/library/arrow-down-right.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowDownRight = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M10 18h8v-8h-1.5v5.5L7 6 6 7l9.5 9.5H10V18Z" />
+	</SVG>
+);
+
+export default arrowDownRight;
diff --git a/packages/icons/src/library/arrow-up-left.js b/packages/icons/src/library/arrow-up-left.js
new file mode 100644
index 0000000000000..1b3686f6ec1e6
--- /dev/null
+++ b/packages/icons/src/library/arrow-up-left.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const arrowUpLeft = (
+	<SVG width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M14 6H6v8h1.5V8.5L17 18l1-1-9.5-9.5H14V6Z" />
+	</SVG>
+);
+
+export default arrowUpLeft;
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index 3bd44c7aebd71..b2e8e2d4395dc 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -221,11 +221,6 @@ interface Store {
 		navigation: {
 			hasStarted: boolean;
 			hasFinished: boolean;
-			message: string;
-			texts?: {
-				loading?: string;
-				loaded?: string;
-			};
 		};
 	};
 	actions: {
@@ -240,7 +235,6 @@ export const { state, actions } = store< Store >( 'core/router', {
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			message: '',
 		},
 	},
 	actions: {
@@ -403,10 +397,16 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
 			} 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;
 			}
 		}
@@ -414,19 +414,11 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
 
 	const message = navigationTexts[ messageKey ];
 
-	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-		import( '@wordpress/a11y' ).then(
-			( { speak } ) => speak( message ),
-			// Ignore failures to load the a11y module.
-			() => {}
-		);
-	} else {
-		state.navigation.message =
-			// 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
-			message + ( state.navigation.message === message ? '\u00A0' : '' );
-	}
+	import( '@wordpress/a11y' ).then(
+		( { speak } ) => speak( message ),
+		// Ignore failures to load the a11y module.
+		() => {}
+	);
 }
 
 // Add click and prefetch to all links.
diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 3c3abc422fa5f..033a4f2c747ab 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -430,7 +430,7 @@ Create an HTML string from a Rich Text value.
 
 _Parameters_
 
--   _$1_ `Object`: Named argements.
+-   _$1_ `Object`: Named arguments.
 -   _$1.value_ `RichTextValue`: Rich text value.
 -   _$1.preserveWhiteSpace_ `[boolean]`: Preserves newlines if true.
 
diff --git a/packages/rich-text/src/to-html-string.js b/packages/rich-text/src/to-html-string.js
index 35089003f0b3f..f770dfdefc128 100644
--- a/packages/rich-text/src/to-html-string.js
+++ b/packages/rich-text/src/to-html-string.js
@@ -19,7 +19,7 @@ import { toTree } from './to-tree';
 /**
  * Create an HTML string from a Rich Text value.
  *
- * @param {Object}        $1                      Named argements.
+ * @param {Object}        $1                      Named arguments.
  * @param {RichTextValue} $1.value                Rich text value.
  * @param {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
  *
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index f3eaef1350921..8525e48fffa58 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -7,6 +7,7 @@
 			'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 0000000000000..73ed409054991
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Copy-cut-paste-should-paste-link-to-formatted-text-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p><strong>t<a href="https://wordpress.org/gutenberg">es</a>t</strong></p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
deleted file mode 100644
index f172a424bb172..0000000000000
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ /dev/null
@@ -1,2451 +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 always show the source label in server-only sources', 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( '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 prioritize the placeholder attribute over the placeholder generated by the bindings API', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						placeholder: 'My custom placeholder',
-						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: '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',
-					'My custom placeholder'
-				);
-			} );
-
-			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: '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'
-				);
-			} );
-
-			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( 'should not be possible to edit the value of the protected custom fields', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/post-meta',
-									args: { key: '_protected_field' },
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
-
-				await expect( paragraphBlock ).toHaveAttribute(
-					'contenteditable',
-					'false'
-				);
-			} );
-		} );
-	} );
-
-	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 0000000000000..d6563ce9cb5f5
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/custom-sources.spec.js
@@ -0,0 +1,1204 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Registered sources', () => {
+	let imagePlaceholderSrc;
+	let testingImgSrc;
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+		await requestUtils.deleteAllMedia();
+		const placeholderMedia = await requestUtils.uploadMedia(
+			path.join( './test/e2e/assets', '10x10_e2e_test_image_z9T8jK.png' )
+		);
+		imagePlaceholderSrc = placeholderMedia.source_url;
+
+		const testingImgMedia = await requestUtils.uploadMedia(
+			path.join(
+				'./test/e2e/assets',
+				'1024x768_e2e_test_image_size.jpeg'
+			)
+		);
+		testingImgSrc = testingImgMedia.source_url;
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost( { title: 'Test bindings' } );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'getValues', () => {
+		test( 'should show the returned value in paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned value in heading content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'connected-heading',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const headingBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await expect( headingBlock ).toHaveText( 'Text Field Value' );
+
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-heading' )
+			).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should show the returned values in button attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'connected-button',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+									url: {
+										source: 'testing/complete-source',
+										args: { key: 'url_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const buttonDom = previewPage.locator( '#connected-button a' );
+			await expect( buttonDom ).toHaveText( 'Text Field Value' );
+			await expect( buttonDom ).toHaveAttribute( 'href', testingImgSrc );
+		} );
+		test( 'should show the returned values in image attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'connected-image',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/complete-source',
+								args: { key: 'url_field' },
+							},
+							alt: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			await imageBlockImg.click();
+
+			// Image src is the custom field value.
+			await expect( imageBlockImg ).toHaveAttribute(
+				'src',
+				testingImgSrc
+			);
+
+			// Alt textarea should have the custom field value.
+			const altValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' )
+				.inputValue();
+			expect( altValue ).toBe( 'Text Field Value' );
+
+			// Title input should have the original value.
+			const advancedButton = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByRole( 'button', {
+					name: 'Advanced',
+				} );
+			const isAdvancedPanelOpen =
+				await advancedButton.getAttribute( 'aria-expanded' );
+			if ( isAdvancedPanelOpen === 'false' ) {
+				await advancedButton.click();
+			}
+			const titleValue = await page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Title attribute' )
+				.inputValue();
+			expect( titleValue ).toBe( 'default title value' );
+
+			// Check the frontend uses the values of the custom fields.
+			const previewPage = await editor.openPreviewPage();
+			const imageDom = previewPage.locator( '#connected-image img' );
+			await expect( imageDom ).toHaveAttribute( 'src', testingImgSrc );
+			await expect( imageDom ).toHaveAttribute(
+				'alt',
+				'Text Field Value'
+			);
+			await expect( imageDom ).toHaveAttribute(
+				'title',
+				'default title value'
+			);
+		} );
+		test( 'should fall back to source label when `getValues` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/server-only-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Server Source' );
+		} );
+		test( 'should fall back to null when `getValues` is undefined in URL attributes', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					metadata: {
+						bindings: {
+							url: {
+								source: 'testing/server-only-source',
+								args: { key: 'url_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Image',
+			} );
+			await expect(
+				imageBlock.locator( '.components-placeholder__fieldset' )
+			).toHaveText( 'Connected to Server Source' );
+		} );
+	} );
+
+	test.describe( 'should lock editing', () => {
+		// Logic reused accross all the tests that check paragraph editing is locked.
+		async function testParagraphControlsAreLocked( {
+			source,
+			editor,
+			page,
+		} ) {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source,
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await paragraphBlock.click();
+
+			// Alignment controls exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Align text' } )
+			).toBeVisible();
+
+			// Format controls don't exist.
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', {
+						name: 'Bold',
+					} )
+			).toBeHidden();
+
+			// Paragraph is not editable.
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		}
+		test.describe( 'canUserEditValue returns false', () => {
+			test( 'paragraph', async ( { editor, page } ) => {
+				await testParagraphControlsAreLocked( {
+					source: 'testing/can-user-edit-false',
+					editor,
+					page,
+				} );
+			} );
+			test( 'heading', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/heading',
+					attributes: {
+						content: 'heading default content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const headingBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Heading',
+				} );
+				await headingBlock.click();
+
+				// Alignment controls exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Heading is not editable.
+				await expect( headingBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'button', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/buttons',
+					innerBlocks: [
+						{
+							name: 'core/button',
+							attributes: {
+								text: 'button default text',
+								url: '#default-url',
+								metadata: {
+									bindings: {
+										text: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'text_field' },
+										},
+										url: {
+											source: 'testing/can-user-edit-false',
+											args: { key: 'url_field' },
+										},
+									},
+								},
+							},
+						},
+					],
+				} );
+				const buttonBlock = editor.canvas
+					.getByRole( 'document', {
+						name: 'Block: Button',
+						exact: true,
+					} )
+					.getByRole( 'textbox' );
+				await buttonBlock.click();
+
+				// Alignment controls are visible.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Align text' } )
+				).toBeVisible();
+
+				// Format controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Bold',
+						} )
+				).toBeHidden();
+
+				// Button is not editable.
+				await expect( buttonBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+
+				// Link controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Link' } )
+				).toBeHidden();
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', { name: 'Unlink' } )
+				).toBeHidden();
+			} );
+			test( 'image', async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/image',
+					attributes: {
+						url: imagePlaceholderSrc,
+						alt: 'default alt value',
+						title: 'default title value',
+						metadata: {
+							bindings: {
+								url: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'url_field' },
+								},
+								alt: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+								title: {
+									source: 'testing/can-user-edit-false',
+									args: { key: 'text_field' },
+								},
+							},
+						},
+					},
+				} );
+				const imageBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Image',
+				} );
+				await imageBlock.click();
+
+				// Replace controls don't exist.
+				await expect(
+					page
+						.getByRole( 'toolbar', { name: 'Block tools' } )
+						.getByRole( 'button', {
+							name: 'Replace',
+						} )
+				).toBeHidden();
+
+				// Image placeholder doesn't show the upload button.
+				await expect(
+					imageBlock.getByRole( 'button', { name: 'Upload' } )
+				).toBeHidden();
+
+				// Alt textarea is disabled and with the custom field value.
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Alternative text' )
+				).toHaveAttribute( 'readonly' );
+				const altValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Alternative text' )
+					.inputValue();
+				expect( altValue ).toBe( 'Text Field Value' );
+
+				// Title input is enabled and with the original value.
+				await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByRole( 'button', { name: 'Advanced' } )
+					.click();
+				await expect(
+					page
+						.getByRole( 'tabpanel', { name: 'Settings' } )
+						.getByLabel( 'Title attribute' )
+				).toHaveAttribute( 'readonly' );
+				const titleValue = await page
+					.getByRole( 'tabpanel', { name: 'Settings' } )
+					.getByLabel( 'Title attribute' )
+					.inputValue();
+				expect( titleValue ).toBe( 'Text Field Value' );
+			} );
+		} );
+		// The following tests just check the paragraph and assume is the case for the rest of the blocks.
+		test( 'canUserEditValue is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/can-user-edit-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'setValues is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/complete-source-undefined',
+				editor,
+				page,
+			} );
+		} );
+		test( 'source is not defined', async ( { editor, page } ) => {
+			await testParagraphControlsAreLocked( {
+				source: 'testing/undefined-source',
+				editor,
+				page,
+			} );
+		} );
+	} );
+
+	// Use `core/post-meta` source to test editing to avoid overcomplicating custom sources.
+	// It needs a source that can be consumed and edited from the server and the editor.
+	test.describe( 'setValues', () => {
+		test( 'should be possible to edit the value from paragraph content', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'paragraph default content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		// Related issue: https://github.com/WordPress/gutenberg/issues/62347
+		test( 'should be possible to use symbols and numbers as the custom field value', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'paragraph-binding',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( '$10.00' );
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#paragraph-binding' )
+			).toHaveText( '$10.00' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the button', async ( {
+			editor,
+			page,
+			pageUtils,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-url-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									url: {
+										source: 'core/post-meta',
+										args: { key: 'url_custom_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+
+			// Edit the url.
+			const buttonBlock = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' );
+			await buttonBlock.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( '#url-custom-field-modified' );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the button url attribute didn't change.
+			const [ buttonsObject ] = await editor.getBlocks();
+			expect( buttonsObject.innerBlocks[ 0 ].attributes.url ).toBe(
+				'#default-url'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#button-url-binding a' )
+			).toHaveAttribute( 'href', '#url-custom-field-modified' );
+		} );
+		test( 'should be possible to edit the value of the url custom field from the image', async ( {
+			editor,
+			page,
+			pageUtils,
+			requestUtils,
+		} ) => {
+			const customFieldMedia = await requestUtils.uploadMedia(
+				path.join(
+					'./test/e2e/assets',
+					'1024x768_e2e_test_image_size.jpeg'
+				)
+			);
+			testingImgSrc = customFieldMedia.source_url;
+
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-url-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					title: 'default title value',
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/post-meta',
+								args: { key: 'url_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Edit image url.
+			await page
+				.getByRole( 'toolbar', { name: 'Block tools' } )
+				.getByRole( 'button', {
+					name: 'Replace',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', { name: 'Edit link', exact: true } )
+				.click();
+			await page
+				.getByPlaceholder( 'Search or type URL' )
+				.fill( testingImgSrc );
+			await pageUtils.pressKeys( 'Enter' );
+
+			// Check that the image url attribute didn't change and still uses the placeholder.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.url ).toBe(
+				imagePlaceholderSrc
+			);
+
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-url-binding img' )
+			).toHaveAttribute( 'src', testingImgSrc );
+		} );
+		test( 'should be possible to edit the value of the text custom field from the image alt', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+				attributes: {
+					anchor: 'image-alt-binding',
+					url: imagePlaceholderSrc,
+					alt: 'default alt value',
+					metadata: {
+						bindings: {
+							alt: {
+								source: 'core/post-meta',
+								args: { key: 'text_custom_field' },
+							},
+						},
+					},
+				},
+			} );
+			const imageBlockImg = editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Image',
+				} )
+				.locator( 'img' );
+			await imageBlockImg.click();
+
+			// Edit the custom field value in the alt textarea.
+			const altInputArea = page
+				.getByRole( 'tabpanel', { name: 'Settings' } )
+				.getByLabel( 'Alternative text' );
+			await expect( altInputArea ).not.toHaveAttribute( 'readonly' );
+			await altInputArea.fill( 'new value' );
+
+			// Check that the image alt attribute didn't change.
+			const [ imageBlockObject ] = await editor.getBlocks();
+			expect( imageBlockObject.attributes.alt ).toBe(
+				'default alt value'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#image-alt-binding img' )
+			).toHaveAttribute( 'alt', 'new value' );
+		} );
+	} );
+
+	test.describe( 'getFieldsList', () => {
+		test( 'should be possible to update attribute value through bindings UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			await page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } )
+				.click();
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'Text Field Value' );
+		} );
+		test( 'should be possible to connect the paragraph content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the heading content', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			const contentAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show content',
+			} );
+			await expect( contentAttribute ).toBeVisible();
+		} );
+		test( 'should be possible to connect the button supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const textAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show text',
+			} );
+			await expect( textAttribute ).toBeVisible();
+			const linkTargetAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkTarget',
+			} );
+			await expect( linkTargetAttribute ).toBeVisible();
+			const relAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show rel',
+			} );
+			await expect( relAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const tagNameAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show tagName',
+			} );
+			await expect( tagNameAttribute ).toBeHidden();
+		} );
+		test( 'should be possible to connect the image supported attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/image',
+			} );
+			await page
+				.getByRole( 'tabpanel', {
+					name: 'Settings',
+				} )
+				.getByLabel( 'Attributes options' )
+				.click();
+			const urlAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show url',
+			} );
+			await expect( urlAttribute ).toBeVisible();
+			const idAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show id',
+			} );
+			await expect( idAttribute ).toBeVisible();
+			const titleAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show title',
+			} );
+			await expect( titleAttribute ).toBeVisible();
+			const altAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show alt',
+			} );
+			await expect( altAttribute ).toBeVisible();
+			// Check not supported attributes are not included.
+			const linkClassAttribute = page.getByRole( 'menuitemcheckbox', {
+				name: 'Show linkClass',
+			} );
+			await expect( linkClassAttribute ).toBeHidden();
+		} );
+		test( 'should show all the available fields in the dropdown UI', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			await page.getByRole( 'button', { name: 'content' } ).click();
+			const textField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( textField ).toBeVisible();
+			await expect( textField ).toBeChecked();
+			const urlField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'URL Field Label' } );
+			await expect( urlField ).toBeVisible();
+			await expect( urlField ).not.toBeChecked();
+		} );
+		test( 'should show the connected fields in the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'default value',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			const contentButton = page.getByRole( 'button', {
+				name: 'content',
+			} );
+			await expect( contentButton ).toContainText( 'Text Field Label' );
+		} );
+	} );
+
+	test.describe( 'RichText workflows', () => {
+		test( 'should add empty paragraph block when pressing enter in paragraph', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+			// Select the paragraph and press Enter at the end of it.
+			const paragraph = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await editor.selectBlocks( paragraph );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialParagraph, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-type="core/paragraph"]' )
+				.all();
+			await expect( initialParagraph ).toHaveText( 'Text Field Value' );
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty paragraph block when pressing enter in heading', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/heading',
+				attributes: {
+					anchor: 'heading-binding',
+					content: 'heading default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'text_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			// Select the heading and press Enter at the end of it.
+			const heading = editor.canvas.getByRole( 'document', {
+				name: 'Block: Heading',
+			} );
+			await editor.selectBlocks( heading );
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			// Can't use `editor.getBlocks` because it doesn't return the meta value shown in the editor.
+			const [ initialHeading, newEmptyParagraph ] = await editor.canvas
+				.locator( '[data-block]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialHeading ).toHaveAttribute(
+				'data-type',
+				'core/heading'
+			);
+			await expect( initialHeading ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyParagraph ).toHaveAttribute(
+				'data-type',
+				'core/paragraph'
+			);
+			await expect( newEmptyParagraph ).toHaveText( '' );
+			await expect( newEmptyParagraph ).toBeEditable();
+		} );
+		test( 'should add empty button block when pressing enter in button', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/buttons',
+				innerBlocks: [
+					{
+						name: 'core/button',
+						attributes: {
+							anchor: 'button-text-binding',
+							text: 'button default text',
+							url: '#default-url',
+							metadata: {
+								bindings: {
+									text: {
+										source: 'testing/complete-source',
+										args: { key: 'text_field' },
+									},
+								},
+							},
+						},
+					},
+				],
+			} );
+			await editor.canvas
+				.getByRole( 'document', {
+					name: 'Block: Button',
+					exact: true,
+				} )
+				.getByRole( 'textbox' )
+				.click();
+			await page.keyboard.press( 'End' );
+			await page.keyboard.press( 'Enter' );
+			const [ initialButton, newEmptyButton ] = await editor.canvas
+				.locator( '[data-type="core/button"]' )
+				.all();
+			// First block should be the original block.
+			await expect( initialButton ).toHaveText( 'Text Field Value' );
+			// Second block should be an empty paragraph block.
+			await expect( newEmptyButton ).toHaveText( '' );
+			await expect( newEmptyButton ).toBeEditable();
+		} );
+		test( 'should show placeholder prompt when value is empty and can edit', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'Empty empty_field; start writing to edit its value',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Add Empty Field Label'
+			);
+		} );
+		test( 'should show source label when value is empty, cannot edit, and `getFieldsList` is undefined', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/can-user-edit-false',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+			await expect( paragraphBlock ).toBeEmpty();
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'Can User Edit: False'
+			);
+		} );
+		test( 'should show placeholder attribute over bindings placeholder', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					placeholder: 'My custom placeholder',
+					content: 'paragraph default content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'testing/complete-source',
+								args: { key: 'empty_field' },
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				// Aria-label is changed for empty paragraphs.
+				name: 'empty_field',
+			} );
+
+			await expect( paragraphBlock ).toBeEmpty();
+
+			const placeholder = paragraphBlock.locator( 'span' );
+			await expect( placeholder ).toHaveAttribute(
+				'data-rich-text-placeholder',
+				'My custom placeholder'
+			);
+		} );
+	} );
+
+	test( 'should show the label of a source only registered in the server in blocks connected', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/server-only-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Server Source' );
+	} );
+	test( 'should show an "Invalid source" warning for not registered sources', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				metadata: {
+					bindings: {
+						content: {
+							source: 'testing/undefined-source',
+						},
+					},
+				},
+			},
+		} );
+
+		const contentButton = page.getByRole( 'button', {
+			name: 'content',
+		} );
+		await expect( contentButton ).toContainText( 'Invalid source' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
new file mode 100644
index 0000000000000..d82def6feb66b
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-bindings/post-meta.spec.js
@@ -0,0 +1,551 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Post Meta source', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme(
+			'gutenberg-test-themes/block-bindings'
+		);
+		await requestUtils.activatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+		await requestUtils.activateTheme( 'twentytwentyone' );
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-bindings' );
+	} );
+
+	test.describe( 'Movie CPT template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//single-movie',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test.describe( 'Block attributes values', () => {
+			test( 'should not be possible to edit connected blocks', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveAttribute(
+					'contenteditable',
+					'false'
+				);
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'movie_field',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should fall back to the field label if the default value is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_with_only_label',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'Field with only label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						content: 'fallback content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: {
+										key: 'field_without_label_or_default',
+									},
+								},
+							},
+						},
+					},
+				} );
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					name: 'Block: Paragraph',
+				} );
+				await expect( paragraphBlock ).toHaveText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Attributes panel', () => {
+			test( 'should show the field label if it is defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'Movie field label'
+				);
+			} );
+			test( 'should fall back to the field key if the field label is not defined', async ( {
+				editor,
+				page,
+			} ) => {
+				/**
+				 * Create connection manually until this issue is solved:
+				 * https://github.com/WordPress/gutenberg/pull/65604
+				 *
+				 * Once solved, block with the binding can be directly inserted.
+				 */
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				const contentBinding = page.getByRole( 'button', {
+					name: 'content',
+				} );
+				await contentBinding.click();
+				await page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'field_without_label_or_default' } )
+					.click();
+				await expect( contentBinding ).toContainText(
+					'field_without_label_or_default'
+				);
+			} );
+		} );
+
+		test.describe( 'Fields list dropdown', () => {
+			// Insert block and open the dropdown for every test.
+			test.beforeEach( async ( { editor, page } ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+				} );
+				await page.getByLabel( 'Attributes options' ).click();
+				await page
+					.getByRole( 'menuitemcheckbox', {
+						name: 'Show content',
+					} )
+					.click();
+				await page
+					.getByRole( 'button', {
+						name: 'content',
+					} )
+					.click();
+			} );
+
+			test( 'should include movie fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const movieField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( movieField ).toBeVisible();
+			} );
+			test( 'should include global fields in UI to connect attributes', async ( {
+				page,
+			} ) => {
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+			} );
+			test( 'should not include protected fields', async ( { page } ) => {
+				// Ensure the fields have loaded by checking the field is visible.
+				const globalField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'text_custom_field' } );
+				await expect( globalField ).toBeVisible();
+				// Check the protected fields are not visible.
+				const protectedField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: '_protected_field' } );
+				await expect( protectedField ).toBeHidden();
+				const showInRestFalseField = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'show_in_rest_false_field' } );
+				await expect( showInRestFalseField ).toBeHidden();
+			} );
+			test( 'should show the default value if it is defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Movie field label' } );
+				await expect( fieldButton ).toContainText(
+					'Movie field default value'
+				);
+			} );
+			test( 'should not show anything if the default value is not defined', async ( {
+				page,
+			} ) => {
+				const fieldButton = page
+					.getByRole( 'menuitemradio' )
+					.filter( { hasText: 'Field with only label' } );
+				// Check it only contains the field label.
+				await expect( fieldButton ).toHaveText(
+					'Field with only label'
+				);
+			} );
+		} );
+	} );
+
+	test.describe( 'Custom template', () => {
+		test.beforeEach( async ( { admin, editor } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'gutenberg-test-themes/block-bindings//custom-template',
+				postType: 'wp_template',
+				canvas: 'edit',
+			} );
+			await editor.openDocumentSettingsSidebar();
+		} );
+
+		test( 'should not include post meta fields in UI to connect attributes', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			// Check the fields registered by other sources are there.
+			const customSourceField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Text Field Label' } );
+			await expect( customSourceField ).toBeVisible();
+			// Check the post meta fields are not visible.
+			const globalField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'text_custom_field' } );
+			await expect( globalField ).toBeHidden();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeHidden();
+		} );
+		test( 'should show the key in attributes connected to post meta', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'text_custom_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'text_custom_field' );
+		} );
+	} );
+
+	test.describe( 'Movie CPT post', () => {
+		test.beforeEach( async ( { admin } ) => {
+			// CHECK HOW TO CREATE A MOVIE.
+			await admin.createNewPost( {
+				postType: 'movie',
+				title: 'Test bindings',
+			} );
+		} );
+
+		test( 'should show the custom field value of that specific post', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			// Check the frontend shows the value of the custom field.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'Movie field default value' );
+		} );
+		test( 'should fall back to the key when custom field is not accessible', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'unaccessible_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( 'unaccessible_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a protected field', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: '_protected_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText( '_protected_field' );
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should not show or edit the value of a field with `show_in_rest` set to false', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'show_in_rest_false_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'show_in_rest_false_field'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'false'
+			);
+		} );
+		test( 'should be possible to edit the value of the connected custom fields', async ( {
+			editor,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: {
+					anchor: 'connected-paragraph',
+					content: 'fallback content',
+					metadata: {
+						bindings: {
+							content: {
+								source: 'core/post-meta',
+								args: {
+									key: 'movie_field',
+								},
+							},
+						},
+					},
+				},
+			} );
+			const paragraphBlock = editor.canvas.getByRole( 'document', {
+				name: 'Block: Paragraph',
+			} );
+			await expect( paragraphBlock ).toHaveText(
+				'Movie field default value'
+			);
+			await expect( paragraphBlock ).toHaveAttribute(
+				'contenteditable',
+				'true'
+			);
+			await paragraphBlock.fill( 'new value' );
+			// Check that the paragraph content attribute didn't change.
+			const [ paragraphBlockObject ] = await editor.getBlocks();
+			expect( paragraphBlockObject.attributes.content ).toBe(
+				'fallback content'
+			);
+			// Check the value of the custom field is being updated by visiting the frontend.
+			const previewPage = await editor.openPreviewPage();
+			await expect(
+				previewPage.locator( '#connected-paragraph' )
+			).toHaveText( 'new value' );
+		} );
+		test( 'should be possible to connect movie fields through the attributes panel', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+			} );
+			await page.getByLabel( 'Attributes options' ).click();
+			await page
+				.getByRole( 'menuitemcheckbox', {
+					name: 'Show content',
+				} )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'content',
+				} )
+				.click();
+			const movieField = page
+				.getByRole( 'menuitemradio' )
+				.filter( { hasText: 'Movie field label' } );
+			await expect( movieField ).toBeVisible();
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
index 33a65e6f5a119..bca062b06416a 100644
--- a/test/e2e/specs/editor/various/copy-cut-paste.spec.js
+++ b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -565,6 +565,27 @@ test.describe( 'Copy/cut/paste', () => {
 		] );
 	} );
 
+	test( 'should paste link to formatted text', async ( {
+		page,
+		pageUtils,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: '<strong>test</strong>' },
+		} );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		await pageUtils.pressKeys( 'shift+ArrowRight' );
+		pageUtils.setClipboardData( {
+			plainText: 'https://wordpress.org/gutenberg',
+			html: 'https://wordpress.org/gutenberg',
+		} );
+		await pageUtils.pressKeys( 'primary+v' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
 	test( 'should auto-link', async ( { pageUtils, editor } ) => {
 		await editor.insertBlock( {
 			name: 'core/paragraph',
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
index 29e7e5d64522c..eba9f1d3163fd 100644
--- a/test/e2e/specs/editor/various/splitting-merging.spec.js
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -373,6 +373,103 @@ test.describe( 'splitting and merging blocks (@firefox, @webkit)', () => {
 		);
 	} );
 
+	// Fix for https://github.com/WordPress/gutenberg/issues/65174.
+	test( 'should handle unwrapping and merging blocks with empty contents', async ( {
+		editor,
+		page,
+	} ) => {
+		const emptyAlignedParagraph = {
+			name: 'core/paragraph',
+			attributes: { content: '', align: 'center', dropCap: false },
+			innerBlocks: [],
+		};
+		const emptyAlignedHeading = {
+			name: 'core/heading',
+			attributes: { content: '', textAlign: 'center', level: 2 },
+			innerBlocks: [],
+		};
+		const headingWithContent = {
+			name: 'core/heading',
+			attributes: { content: 'heading', level: 2 },
+			innerBlocks: [],
+		};
+		const placeholderBlock = { name: 'core/separator' };
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				emptyAlignedParagraph,
+				emptyAlignedHeading,
+				headingWithContent,
+				placeholderBlock,
+			],
+		} );
+		await editor.canvas
+			.getByRole( 'document', { name: 'Empty block' } )
+			.focus();
+
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Remove the default empty block' )
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedHeading,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+
+		// Move the caret to the beginning of the empty heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll(
+				editor.getBlocks,
+				'Convert the non-default empty block to a default block'
+			)
+			.toEqual( [
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						emptyAlignedParagraph,
+						headingWithContent,
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+		await page.keyboard.press( 'Backspace' );
+		await expect.poll( editor.getBlocks ).toEqual( [
+			{
+				name: 'core/group',
+				attributes: { tagName: 'div' },
+				innerBlocks: [
+					headingWithContent,
+					expect.objectContaining( placeholderBlock ),
+				],
+			},
+		] );
+
+		// Move the caret to the beginning of the "heading" heading block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'Backspace' );
+		await expect
+			.poll( editor.getBlocks, 'Lift the non-empty non-default block' )
+			.toEqual( [
+				headingWithContent,
+				{
+					name: 'core/group',
+					attributes: { tagName: 'div' },
+					innerBlocks: [
+						expect.objectContaining( placeholderBlock ),
+					],
+				},
+			] );
+	} );
+
 	test.describe( 'test restore selection when merge produces more than one block', () => {
 		const snap1 = [
 			{
diff --git a/test/gutenberg-test-themes/block-bindings/index.php b/test/gutenberg-test-themes/block-bindings/index.php
new file mode 100644
index 0000000000000..0c6530acc1aaf
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/index.php
@@ -0,0 +1,9 @@
+<?php
+/**
+ * Theme index.php file.
+ *
+ * @package Gutenberg
+ */
+
+// Silence is golden.
+return;
diff --git a/test/gutenberg-test-themes/block-bindings/style.css b/test/gutenberg-test-themes/block-bindings/style.css
new file mode 100644
index 0000000000000..a6b91a613da6e
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/style.css
@@ -0,0 +1,15 @@
+/*
+Theme Name: Block Bindings
+Theme URI: https://github.com/wordpress/gutenberg/
+Author: the WordPress team
+Description: Block bindings test theme.
+Requires at least: 6.7
+Tested up to: 6.7
+Requires PHP: 7.2
+Version: 1.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: block-bindings
+Block bindings WordPress Theme, (C) 2024 WordPress.org
+Block bindings is distributed under the terms of the GNU GPL.
+*/
diff --git a/test/gutenberg-test-themes/block-bindings/templates/custom-template.html b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
new file mode 100644
index 0000000000000..a8602b1c679a8
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/custom-template.html
@@ -0,0 +1,3 @@
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Custom template</h2>
+<!-- /wp:heading -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/index.html b/test/gutenberg-test-themes/block-bindings/templates/index.html
new file mode 100644
index 0000000000000..ab136ac8df9a7
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/index.html
@@ -0,0 +1,8 @@
+<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
+<div class="wp-block-query">
+	<!-- wp:post-template -->
+	<!-- wp:post-title {"isLink":true} /-->
+	<!-- wp:post-excerpt /-->
+	<!-- /wp:post-template -->
+</div>
+<!-- /wp:query -->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single-movie.html b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
new file mode 100644
index 0000000000000..cd05d5fe917fe
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single-movie.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/templates/single.html b/test/gutenberg-test-themes/block-bindings/templates/single.html
new file mode 100644
index 0000000000000..cd05d5fe917fe
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/templates/single.html
@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/gutenberg-test-themes/block-bindings/theme.json b/test/gutenberg-test-themes/block-bindings/theme.json
new file mode 100644
index 0000000000000..c996b01432839
--- /dev/null
+++ b/test/gutenberg-test-themes/block-bindings/theme.json
@@ -0,0 +1,18 @@
+{
+	"$schema": "../../../schemas/json/theme.json",
+	"version": 3,
+	"settings": {
+		"appearanceTools": true,
+		"layout": {
+			"contentSize": "840px",
+			"wideSize": "1100px"
+		}
+	},
+	"customTemplates": [
+		{
+			"name": "custom-template",
+			"title": "Custom",
+			"postTypes": [ "post", "movie" ]
+		}
+	]
+}