diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index f86afa25ae4bdc..461f3771fe1629 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -93,6 +93,7 @@
 /packages/base-styles
 /packages/icons
 /packages/primitives
+/packages/dataviews                              @oandregal
 
 # Utilities
 /packages/a11y
diff --git a/.github/ISSUE_TEMPLATE/New_release.md b/.github/ISSUE_TEMPLATE/New_release.md
index c07dcfa3c466c6..982b9a6dac263b 100644
--- a/.github/ISSUE_TEMPLATE/New_release.md
+++ b/.github/ISSUE_TEMPLATE/New_release.md
@@ -1,16 +1,17 @@
 ---
 name: Gutenberg Release
+title: "Gutenberg {VERSION_NUMBER} release checklist"
 about: A checklist for the Gutenberg plugin release process
 labels: Gutenberg Plugin, [Type] Project Management
 ---
 
 This issue is to provide visibility on the progress of the release process of Gutenberg VERSION_NUMBER and to centralize any conversations about it. The ultimate goal of this issue is to keep the reference of the steps, resources, work, and conversations about this release so it can be helpful for the next contributors releasing a new Gutenberg version.
 
--   Gutenberg version to release: VERSION_NUMBER ([milestone](ADD_LINK))
+-   Gutenberg version to release: {VERSION_NUMBER} ([milestone](https://github.com/WordPress/gutenberg/milestone/{MILESTONE_ID}?closed=1))
 -   Release Manager (a.k.a. Release Lead):
--   Release Date VERSION_NUMBER RC: ADD DATE
--   Release Date VERSION_NUMBER: ADD DATE
--   Previous version change log (as a reference): [15.3](https://github.com/WordPress/gutenberg/releases/tag/v15.3.0)
+-   Release Date {VERSION_NUMBER} RC: {ADD DATE}
+-   Release Date {VERSION_NUMBER}: {ADD DATE}
+-   Previous version change log (as a reference): [{PREVIOUS_VERSION_NUMBER}](https://github.com/WordPress/gutenberg/releases/tag/{PREVIOUS_TAG_NAME})
 
 ## Resources
 
@@ -21,33 +22,34 @@ This issue is to provide visibility on the progress of the release process of Gu
 
 ## Checklist
 
-### RC Day - {Weekday, Month, Date}
+### RC Day - {WEEKDAY}, {MONTH}, {DATE}
 
 -   [ ] Post a message in `#core-editor` channel to let folks know you are starting the RC release process
--   [ ] Organize and Label PRs on the relevant milestone
--   [ ] Start the release process by triggering the `rc` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
--   [ ] [Update the created Draft Release accordingly](https://developer.wordpress.org/block-editor/contributors/code/release/#view-the-release-draft)
--   [ ] [Curate the changelog](https://developer.wordpress.org/block-editor/contributors/code/release/#1-curating-the-changelog) before publishing
--   [ ] Publish Release
+-   [ ] [Organize and Label PRs](https://developer.wordpress.org/block-editor/contributors/code/release/#organizing-and-labeling-milestone-prs) on the relevant milestone
+-   [ ] Start the release process by triggering the `rc` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-the-release-workflow)
+-   [ ] [Update the created Draft Release accordingly](https://developer.wordpress.org/block-editor/contributors/code/release/#viewing-the-release-draft)
+-   [ ] [Curate the changelog](https://developer.wordpress.org/block-editor/contributors/code/release/#curating-the-release-changelog) before publishing
+-   [ ] [Publish Release](https://developer.wordpress.org/block-editor/contributors/code/release/#publishing-the-release)
 -   [ ] Announce in `#core-editor` channel that RC1 has been released and is ready for testing
 -   [ ] Ping any other relevant channels announcing that the RC is available
 -   [ ] Create Draft of Release post on Make Core blog _(initial draft in [Google doc](https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit))_
 
 ### Between RC and Release
 
--   [ ] Post a reminder in #core-editor for backporting PRs to RC (~Label Backport to Gutenberg RC)
+-   [ ] Post a reminder in `#core-editor` for backporting PRs to RC (~Label `Backport to Gutenberg RC`)
 -   [ ] If there are any PRs marked as [Backport to RC](https://github.com/WordPress/gutenberg/pulls?q=is%3Apr+label%3A%22Backport+to+Gutenberg+RC%22+is%3Aclosed), run the [cherry-pick command to apply them](https://developer.wordpress.org/block-editor/contributors/code/release/auto-cherry-picking/#how-can-i-use-it-for-a-gutenberg-plugin-release) to the release branch. **This needs to be run locally**
 -   [ ] [Draft Release Post Highlights and Change Log](https://docs.google.com/document/d/1D-MTOCmL9eMlP9TDTXqlzuKVOg_ghCPm9_whHFViqMk/edit)
--   [ ] Get assets from [Design Team](https://make.wordpress.org/design/) for the post
+-   [ ] Get assets from [Design Team](https://make.wordpress.org/design/) for the post if required
 -   [ ] Reach out to Highlight Authors to draft sections (if necessary)
 
 ### Release Day - {Weekday, Month, Date}
 
 -   [ ] Post a message in `#core-editor` channel to let folks know you are starting the release process
--   [ ] Start the release process by triggering the `stable` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-workflow)
+-   [ ] Start the release process by triggering the `stable` [workflow](https://developer.wordpress.org/block-editor/contributors/code/release/#running-the-release-workflow)
 -   [ ] Update the created Draft Release accordingly. Typically by copy/pasting the last RC release notes and add any changes/updates as needed.
--   [ ] Publish Release
+-   [ ] [Publish Release](https://developer.wordpress.org/block-editor/contributors/code/release/#publishing-the-release)
 -   [ ] Trigger the update to the plugin directory. _(Get approval from a member of [Gutenberg Release team](https://github.com/orgs/WordPress/teams/gutenberg-release/members) if necessary)_
 -   [ ] Announce in `#core-editor` channel that the plugin has been released
 -   [ ] Reach out to other contributors to help get the post reviewed
--   [ ] Publish Release post on Make Core blog
+-   [ ] [Publish Release post](https://developer.wordpress.org/block-editor/contributors/code/release/#publishing-the-release-post) on Make Core blog
+-   [ ] Post in the `#core-editor` channel [requesting a volunteer for the next Gutenberg release](https://developer.wordpress.org/block-editor/contributors/code/release/#call-for-volunteer-for-the-next-release).
diff --git a/.github/actionlint.yml b/.github/actionlint.yml
new file mode 100644
index 00000000000000..63f4c91333ac8d
--- /dev/null
+++ b/.github/actionlint.yml
@@ -0,0 +1,13 @@
+# This is the configuration file for actionlint, a static checker for GitHub Actions workflow files.
+# See https://github.com/rhysd/actionlint.
+
+# Path-specific configurations.
+paths:
+    .github/workflows/**/*.{yml,yaml}:
+        ignore:
+            # [SC2129](https://www.shellcheck.net/wiki/SC2129) is ignored because it is a stylistic issue.
+            - 'shellcheck reported issue in this script: SC2129:.+'
+    .github/workflows/end2end-test.yml:
+        ignore:
+            # This file gets created in the step prior.
+            - 'file "build/index.js" does not exist.+'
diff --git a/.github/setup-node/action.yml b/.github/setup-node/action.yml
index 4313639e78c062..ad6552cc91e96d 100644
--- a/.github/setup-node/action.yml
+++ b/.github/setup-node/action.yml
@@ -10,7 +10,7 @@ runs:
     using: 'composite'
     steps:
         - name: Use desired version of Node.js
-          uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+          uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
           with:
               node-version-file: '.nvmrc'
               node-version: ${{ inputs.node-version }}
@@ -20,12 +20,12 @@ runs:
         - name: Get Node.js and npm version
           id: node-version
           run: |
-              echo "NODE_VERSION=$(node -v)" >> $GITHUB_OUTPUT
+              echo "NODE_VERSION=$(node -v)" >> "$GITHUB_OUTPUT"
           shell: bash
 
         - name: Cache node_modules
           id: cache-node_modules
-          uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+          uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
           with:
               path: '**/node_modules'
               key: node_modules-${{ runner.os }}-${{ runner.arch }}-${{ steps.node-version.outputs.NODE_VERSION }}-${{ hashFiles('package-lock.json') }}
@@ -36,7 +36,7 @@ runs:
               npm ci
           shell: bash
         - name: Upload npm logs as an artifact on failure
-          uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+          uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
           if: failure()
           with:
               name: npm-logs
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 95e641accd18d7..4108e0c9b96495 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -20,10 +20,16 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     compute-stable-branches:
         name: Compute current and next stable release branches
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.event_name == 'workflow_dispatch' }}
         outputs:
             current_stable_branch: ${{ steps.get_branches.outputs.current_stable_branch }}
@@ -36,19 +42,22 @@ jobs:
                   curl \
                     -H "Accept: application/vnd.github.v3+json" \
                     -o latest.json \
-                    "https://api.github.com/repos/${{ github.repository }}/releases/latest"
-                  LATEST_STABLE_TAG=$(jq --raw-output '.tag_name' latest.json)
-                  IFS='.' read LATEST_STABLE_MAJOR LATEST_STABLE_MINOR LATEST_STABLE_PATCH <<< "${LATEST_STABLE_TAG#v}"
-                  echo "current_stable_branch=release/${LATEST_STABLE_MAJOR}.${LATEST_STABLE_MINOR}" >> $GITHUB_OUTPUT
-                  if [[ ${LATEST_STABLE_MINOR} == "9" ]]; then
-                    echo "next_stable_branch=release/$((LATEST_STABLE_MAJOR + 1)).0" >> $GITHUB_OUTPUT
+                    "https://api.github.com/repos/${GITHUB_REPOSITORY}/releases/latest"
+                  LATEST_STABLE_TAG="$(jq --raw-output '.tag_name' latest.json)"
+                  # shellcheck disable=SC2034
+                  IFS='.' read -r LATEST_STABLE_MAJOR LATEST_STABLE_MINOR LATEST_STABLE_PATCH <<< "${LATEST_STABLE_TAG#v}"
+                  echo "current_stable_branch=release/${LATEST_STABLE_MAJOR}.${LATEST_STABLE_MINOR}" >> "$GITHUB_OUTPUT"
+                  if [[ "${LATEST_STABLE_MINOR}" == "9" ]]; then
+                    echo "next_stable_branch=release/$((LATEST_STABLE_MAJOR + 1)).0" >> "$GITHUB_OUTPUT"
                   else
-                    echo "next_stable_branch=release/${LATEST_STABLE_MAJOR}.$((LATEST_STABLE_MINOR + 1))" >> $GITHUB_OUTPUT
+                    echo "next_stable_branch=release/${LATEST_STABLE_MAJOR}.$((LATEST_STABLE_MINOR + 1))" >> "$GITHUB_OUTPUT"
                   fi
 
     bump-version:
         name: Bump version
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         needs: compute-stable-branches
         if: |
             github.event_name == 'workflow_dispatch' && (
@@ -76,31 +85,34 @@ jobs:
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Compute old and new version
               id: get_version
+              env:
+                  VERSION: ${{ github.event.inputs.version }}
               run: |
-                  OLD_VERSION=$(jq --raw-output '.version' package.json)
-                  echo "old_version=${OLD_VERSION}" >> $GITHUB_OUTPUT
-                  if [[ ${{ github.event.inputs.version }} == 'stable' ]]; then
-                    NEW_VERSION=$(npx semver $OLD_VERSION -i patch)
+                  OLD_VERSION="$(jq --raw-output '.version' package.json)"
+                  echo "old_version=${OLD_VERSION}" >> "$GITHUB_OUTPUT"
+                  if [[ "$VERSION" == 'stable' ]]; then
+                    NEW_VERSION="$(npx semver "$OLD_VERSION" -i patch)"
                   else
-                    if [[ $OLD_VERSION == *"rc"* ]]; then
-                      NEW_VERSION=$(npx semver $OLD_VERSION -i prerelease)
+                    if [[ "$OLD_VERSION" == *"rc"* ]]; then
+                      NEW_VERSION="$(npx semver "$OLD_VERSION" -i prerelease)"
                     else
                       # WordPress version guidelines: If minor is 9, bump major instead.
                       IFS='.' read -r -a OLD_VERSION_ARRAY <<< "$OLD_VERSION"
                       if [[ ${OLD_VERSION_ARRAY[1]} == "9" ]]; then
-                        NEW_VERSION="$(npx semver $OLD_VERSION -i major)-rc.1"
+                        NEW_VERSION="$(npx semver "$OLD_VERSION" -i major)-rc.1"
                       else
-                        NEW_VERSION="$(npx semver $OLD_VERSION -i minor)-rc.1"
+                        NEW_VERSION="$(npx semver "$OLD_VERSION" -i minor)-rc.1"
                       fi
                     fi
                   fi
-                  echo "new_version=${NEW_VERSION}" >> $GITHUB_OUTPUT
+                  echo "new_version=${NEW_VERSION}" >> "$GITHUB_OUTPUT"
                   IFS='.' read -r -a NEW_VERSION_ARRAY <<< "$NEW_VERSION"
                   RELEASE_BRANCH="release/${NEW_VERSION_ARRAY[0]}.${NEW_VERSION_ARRAY[1]}"
-                  echo "release_branch=${RELEASE_BRANCH}" >> $GITHUB_OUTPUT
+                  echo "release_branch=${RELEASE_BRANCH}" >> "$GITHUB_OUTPUT"
 
             - name: Configure git user name and email
               run: |
@@ -111,31 +123,41 @@ jobs:
               if: |
                   github.event.inputs.version == 'rc' &&
                   ! contains( steps.get_version.outputs.old_version, 'rc' )
-              run: git checkout -b "${{ steps.get_version.outputs.release_branch }}"
+              env:
+                  TARGET_BRANCH: ${{ steps.get_version.outputs.release_branch }}
+              run: git checkout -b "$TARGET_BRANCH"
 
             - name: Switch to release branch
               if: |
                   github.event.inputs.version == 'stable' ||
                   contains( steps.get_version.outputs.old_version, 'rc' )
+              env:
+                  TARGET_BRANCH: ${{ steps.get_version.outputs.release_branch }}
               run: |
-                  git fetch --depth=1 origin "${{ steps.get_version.outputs.release_branch }}"
-                  git checkout "${{ steps.get_version.outputs.release_branch }}"
+                  git fetch --depth=1 origin "$TARGET_BRANCH"
+                  git checkout "$TARGET_BRANCH"
 
             - name: Update plugin version
               env:
                   VERSION: ${{ steps.get_version.outputs.new_version }}
+                  OLD_VERSION: ${{ steps.get_version.outputs.old_version }}
               run: |
-                  cat <<< $(jq --tab --arg version "${VERSION}" '.version = $version' package.json) > package.json
-                  cat <<< $(jq --tab --arg version "${VERSION}" '.version = $version | .packages[""].version = $version' package-lock.json) > package-lock.json
-                  sed -i "s/${{ steps.get_version.outputs.old_version }}/${VERSION}/g" gutenberg.php
+                  jq --tab --arg version "${VERSION}" '.version = $version' package.json > package.json.tmp
+                  mv package.json.tmp package.json
+                  jq --tab --arg version "${VERSION}" '.version = $version | .packages[""].version = $version' package-lock.json > package-lock.json.tmp
+                  mv package-lock.json.tmp package-lock.json
+                  sed -i "s/${OLD_VERSION}/${VERSION}/g" gutenberg.php
 
             - name: Commit the version bump to the release branch
               id: commit_version_bump_to_release_branch
+              env:
+                  TARGET_BRANCH: ${{ steps.get_version.outputs.release_branch }}
+                  VERSION: ${{ steps.get_version.outputs.new_version }}
               run: |
                   git add gutenberg.php package.json package-lock.json
-                  git commit -m "Bump plugin version to ${{ steps.get_version.outputs.new_version }}"
-                  git push --set-upstream origin "${{ steps.get_version.outputs.release_branch }}"
-                  echo "version_bump_commit=$(git rev-parse --verify --short HEAD)" >> $GITHUB_OUTPUT
+                  git commit -m "Bump plugin version to ${VERSION}"
+                  git push --set-upstream origin "$TARGET_BRANCH"
+                  echo "version_bump_commit=$(git rev-parse --verify --short HEAD)" >> "$GITHUB_OUTPUT"
 
             - name: Fetch trunk
               if: ${{ github.ref != 'refs/heads/trunk' }}
@@ -143,19 +165,24 @@ jobs:
 
             - name: Cherry-pick the version bump commit to trunk
               id: commit_version_bump_to_trunk
+              env:
+                  TARGET_BRANCH: ${{ steps.get_version.outputs.release_branch }}
+                  OLD_VERSION: ${{ steps.get_version.outputs.old_version }}
               run: |
                   git checkout trunk
                   git pull
-                  TRUNK_VERSION=$(jq --raw-output '.version' package.json)
-                  if [[ ${{ steps.get_version.outputs.old_version }} == "$TRUNK_VERSION" ]]; then
-                    git cherry-pick "${{ steps.get_version.outputs.release_branch }}"
+                  TRUNK_VERSION="$(jq --raw-output '.version' package.json)"
+                  if [[ "$OLD_VERSION" == "$TRUNK_VERSION" ]]; then
+                    git cherry-pick "$TARGET_BRANCH"
                     git push
-                    echo "version_bump_commit=$(git rev-parse --verify --short HEAD)" >> $GITHUB_OUTPUT
+                    echo "version_bump_commit=$(git rev-parse --verify --short HEAD)" >> "$GITHUB_OUTPUT"
                   fi
 
     build:
         name: Build Release Artifact
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         needs: bump-version
         if: |
             always() && (
@@ -172,13 +199,13 @@ jobs:
               with:
                   ref: ${{ needs.bump-version.outputs.release_branch || github.ref }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
-                  cache: npm
 
             - name: Build Gutenberg plugin ZIP file
               run: ./bin/build-plugin-zip.sh
@@ -200,7 +227,7 @@ jobs:
                   MILESTONE="Gutenberg ${VERSION_ARRAY[0]}.${VERSION_ARRAY[1]}"
                   npm run other:changelog -- --milestone="$MILESTONE" --unreleased > release-notes.txt
                   sed -ie '1,6d' release-notes.txt
-                  if [[ ${{ needs.bump-version.outputs.new_version }} != *"rc"* ]]; then
+                  if [[ "${VERSION}" != *"rc"* ]]; then
                     # Include previous RCs' release notes, if any
                     CHANGELOG_REGEX="=\s[0-9]+\.[0-9]+\.[0-9]+(-rc\.[0-9]+)?\s="
                     RC_REGEX="=\s${VERSION}(-rc\.[0-9]+)?\s="
@@ -218,6 +245,8 @@ jobs:
         name: Revert version bump if build failed
         needs: [bump-version, build]
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         if: |
             always() &&
             ( needs.build.outputs.job_status == 'failure' ) &&
@@ -231,6 +260,7 @@ jobs:
                   ref: ${{ needs.bump-version.outputs.release_branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Configure git user name and email
               run: |
@@ -241,44 +271,53 @@ jobs:
               if: |
                   github.event.inputs.version == 'stable' ||
                   contains( needs.bump-version.outputs.old_version, 'rc' )
+              env:
+                  RELEAD_BRANCH_COMMIT: ${{ needs.bump-version.outputs.release_branch_commit }}
+                  RELEASE_BRANCH: ${{ needs.bump-version.outputs.release_branch }}
               run: |
-                  git revert --no-edit ${{ needs.bump-version.outputs.release_branch_commit }}
-                  git push --set-upstream origin "${{ needs.bump-version.outputs.release_branch }}"
+                  git revert --no-edit "$RELEAD_BRANCH_COMMIT"
+                  git push --set-upstream origin "$RELEASE_BRANCH"
 
             - name: Delete release branch if it was only just created for the RC
               if: |
                   github.event.inputs.version == 'rc' &&
                   ! contains( needs.bump-version.outputs.old_version, 'rc' )
+              env:
+                  RELEASE_BRANCH: ${{ needs.bump-version.outputs.release_branch }}
               run: |
-                  git push origin :"${{ needs.bump-version.outputs.release_branch }}"
+                  git push origin :"$RELEASE_BRANCH"
 
             - name: Revert version bump on trunk
               if: ${{ needs.bump-version.outputs.trunk_commit }}
+              env:
+                  TRUNK_COMMIT: ${{ needs.bump-version.outputs.trunk_commit }}
               run: |
                   git fetch --depth=2 origin trunk
                   git checkout trunk
-                  git revert --no-edit ${{ needs.bump-version.outputs.trunk_commit }}
+                  git revert --no-edit "$TRUNK_COMMIT"
                   git push --set-upstream origin trunk
 
     create-release:
         name: Create Release Draft and Attach Asset
         needs: [bump-version, build]
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
 
         steps:
             - name: Set Release Version
               id: get_release_version
               env:
                   VERSION: ${{ needs.bump-version.outputs.new_version }}
-              run: echo "version=$(echo $VERSION | cut -d / -f 3 | sed 's/-rc./ RC/' )" >> $GITHUB_OUTPUT
+              run: echo "version=$(echo "$VERSION" | cut -d / -f 3 | sed 's/-rc./ RC/' )" >> "$GITHUB_OUTPUT"
 
             - name: Download Plugin Zip Artifact
-              uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4.1.9
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
               with:
                   name: gutenberg-plugin
 
             - name: Download Release Notes Artifact
-              uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4.1.9
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
               with:
                   name: release-notes
 
@@ -309,6 +348,8 @@ jobs:
     npm-publish:
         name: Publish WordPress packages to npm
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         environment: WordPress packages
         needs: [bump-version, build]
         if: ${{ endsWith( needs.bump-version.outputs.new_version, '-rc.1' ) }}
@@ -319,6 +360,7 @@ jobs:
                   path: main
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Checkout (for publishing)
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
@@ -328,6 +370,7 @@ jobs:
                   ref: trunk
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Configure git user name and email (for publishing)
               run: |
@@ -336,7 +379,7 @@ jobs:
                   git config user.email gutenberg@wordpress.org
 
             - name: Setup Node.js
-              uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               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 83b273b8fdca0c..063cf996529038 100644
--- a/.github/workflows/bundle-size.yml
+++ b/.github/workflows/bundle-size.yml
@@ -31,19 +31,27 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     build:
         name: Check
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            pull-requests: write
 
         steps:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   fetch-depth: 1
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               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 48fb56b425be39..85e36fb8e66713 100644
--- a/.github/workflows/check-backport-changelog.yml
+++ b/.github/workflows/check-backport-changelog.yml
@@ -15,17 +15,28 @@ on:
             - '!phpunit/blocks/**'
             - 'packages/**/*.php'
             - '!packages/block-library/**'
+            - '!packages/block-serialization-default-parser/**'
+            - '!packages/widgets/**'
             - '!packages/e2e-tests/**'
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     check:
         name: Check for a Core backport changelog entry
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ !contains(github.event.pull_request.labels.*.name, 'No Core Sync Required') && !contains(github.event.pull_request.labels.*.name, 'Backport from WordPress Core') }}
         steps:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   ref: ${{ github.event.pull_request.head.ref }}
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
+                  persist-credentials: false
+
             - name: Check the changelog folder
               env:
                   PR_NUMBER: ${{ github.event.number }}
@@ -44,7 +55,7 @@ jobs:
                     exit 1
                   fi
 
-                  core_pr_number=$(basename "${changelog_file}" .md)
+                  core_pr_number="$(basename "${changelog_file}" .md)"
                   core_pr_url="https://github\.com/WordPress/wordpress-develop/pull/${core_pr_number}"
 
                   # Confirm that the entry has the correct core backport PR URL.
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
index 373a782d5d6ddf..7e51425c0be5f6 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -14,13 +14,22 @@ on:
             - '!packages/components/src/**/*.native.js'
             - '!packages/components/src/**/*.native.scss'
             - '!packages/components/src/**/react-native-*'
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     check:
         name: Check CHANGELOG diff
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         steps:
             - name: 'Get PR commit count'
-              run: echo "PR_COMMIT_COUNT=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
+              env:
+                  PR_COUNT: ${{ github.event.pull_request.commits }}
+              run: echo "PR_COMMIT_COUNT=$(( PR_COUNT + 1 ))" >> "${GITHUB_ENV}"
             - name: Checkout code
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
@@ -28,17 +37,19 @@ jobs:
                   repository: ${{ github.event.pull_request.head.repo.full_name }}
                   fetch-depth: ${{ env.PR_COMMIT_COUNT }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
             - name: 'Fetch relevant history from origin'
-              run: git fetch origin ${{ github.event.pull_request.base.ref }}
+              run: git fetch origin "$GITHUB_BASE_REF"
             - name: Check CHANGELOG status
               env:
                   PR_NUMBER: ${{ github.event.number }}
+                  BASE_SHA: ${{ github.event.pull_request.base.sha }}
               run: |
                   changelog_path="packages/components/CHANGELOG.md"
                   optional_check_notice="This isn't a required check, so if you think your changes are small enough that they don't warrant a CHANGELOG entry, please go ahead and merge without one."
 
                   # Fail if the PR doesn't touch the changelog
-                  if git diff --quiet ${{ github.event.pull_request.base.sha }} HEAD -- "$changelog_path"; then
+                  if git diff --quiet "$BASE_SHA" HEAD -- "$changelog_path"; then
                     echo "Please add a CHANGELOG entry to $changelog_path"
                     echo
                     echo "${optional_check_notice}"
diff --git a/.github/workflows/cherry-pick-wp-release.yml b/.github/workflows/cherry-pick-wp-release.yml
index 14bee71c90c909..a703332b9edf68 100644
--- a/.github/workflows/cherry-pick-wp-release.yml
+++ b/.github/workflows/cherry-pick-wp-release.yml
@@ -16,9 +16,17 @@ concurrency:
     group: ${{ github.workflow }}
     cancel-in-progress: false
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     cherry-pick:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            issues: write
+            pull-requests: read
         # When in the context of a PR, ensure the PR is merged.
         if: github.event.pull_request == null || github.event.pull_request.merged == true
         steps:
@@ -74,6 +82,7 @@ jobs:
               with:
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   fetch-depth: 0
+                  persist-credentials: false
 
             - name: Set up Git
               if: env.cherry_pick == 'true'
@@ -85,20 +94,20 @@ jobs:
               id: cherry-pick
               if: env.cherry_pick == 'true'
               run: |
-                  TARGET_BRANCH="wp/${{ env.version }}"
-                  COMMIT_SHA="${{ env.commit_sha }}"
+                  TARGET_BRANCH="wp/${version}"
+                  COMMIT_SHA="${commit_sha}"
                   echo "Target branch: $TARGET_BRANCH"
                   echo "Commit SHA: $COMMIT_SHA"
-                  git checkout $TARGET_BRANCH
-                  git cherry-pick $COMMIT_SHA || echo "cherry-pick-failed" > result
+                  git checkout "$TARGET_BRANCH"
+                  git cherry-pick "$COMMIT_SHA" || echo "cherry-pick-failed" > result
                   if [ -f result ] && grep -q "cherry-pick-failed" result; then
-                    echo "conflict=true" >> $GITHUB_ENV
+                    echo "conflict=true" >> "$GITHUB_ENV"
                     git cherry-pick --abort
                   else
-                    CHERRY_PICK_SHA=$(git rev-parse HEAD)
-                    echo "conflict=false" >> $GITHUB_ENV
-                    echo "cherry_pick_sha=$CHERRY_PICK_SHA" >> $GITHUB_ENV
-                    git push origin $TARGET_BRANCH
+                    CHERRY_PICK_SHA="$(git rev-parse HEAD)"
+                    echo "conflict=false" >> "$GITHUB_ENV"
+                    echo "cherry_pick_sha=$CHERRY_PICK_SHA" >> "$GITHUB_ENV"
+                    git push origin "$TARGET_BRANCH"
                   fi
 
             - name: Remove cherry-pick label
diff --git a/.github/workflows/create-block.yml b/.github/workflows/create-block.yml
index 1cb40466abe1ef..ad63a563a93ba1 100644
--- a/.github/workflows/create-block.yml
+++ b/.github/workflows/create-block.yml
@@ -12,10 +12,16 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     checks:
         name: Checks w/Node.js ${{ matrix.node }} on ${{ matrix.os }}
         runs-on: ${{ matrix.os }}
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
@@ -27,6 +33,7 @@ jobs:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index ab6054f65ce967..9b154ef86f69f7 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -15,10 +15,16 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     e2e-playwright:
         name: Playwright - ${{ matrix.part }}
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
@@ -30,6 +36,7 @@ jobs:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -48,8 +55,10 @@ jobs:
             - name: Run the tests
               env:
                   PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+                  SHARD_PART: ${{ matrix.part }}
+                  SHARD_TOTAL: ${{ matrix.totalParts }}
               run: |
-                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e -- --shard=${{ matrix.part }}/${{ matrix.totalParts }}
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e -- --shard="${SHARD_PART}/${SHARD_TOTAL}"
 
             - name: Archive debug artifacts (screenshots, traces)
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
@@ -72,6 +81,7 @@ jobs:
         if: ${{ !cancelled() }}
         needs: [e2e-playwright]
         runs-on: ubuntu-latest
+        permissions: {}
         outputs:
             has-flaky-test-report: ${{ !!steps.merge-flaky-tests-reports.outputs.artifact-id }}
         steps:
@@ -99,6 +109,10 @@ jobs:
         needs: [merge-artifacts]
         if: ${{ needs.merge-artifacts.outputs.has-flaky-test-report == 'true' }}
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            issues: write
+            pull-requests: write
         steps:
             # Checkout defaults to using the branch which triggered the event, which
             # isn't necessarily `trunk` (e.g. in the case of a merge).
@@ -106,8 +120,9 @@ jobs:
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
-            - uses: actions/download-artifact@v4.1.9
+            - uses: actions/download-artifact@v4.3.0
               # Don't fail the job if there isn't any flaky tests report.
               continue-on-error: true
               with:
diff --git a/.github/workflows/enforce-pr-labels.yml b/.github/workflows/enforce-pr-labels.yml
index 7493459a6ff35c..b7f0c27a716331 100644
--- a/.github/workflows/enforce-pr-labels.yml
+++ b/.github/workflows/enforce-pr-labels.yml
@@ -2,6 +2,11 @@ name: Enforce labels on Pull Request
 on:
     pull_request_target:
         types: [labeled, unlabeled, ready_for_review, review_requested]
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     type-related-labels:
         runs-on: ubuntu-latest
diff --git a/.github/workflows/gradle-wrapper-validation.yml b/.github/workflows/gradle-wrapper-validation.yml
index c4c5eeba9c51a7..c4a289645104ec 100644
--- a/.github/workflows/gradle-wrapper-validation.yml
+++ b/.github/workflows/gradle-wrapper-validation.yml
@@ -1,14 +1,22 @@
 name: 'Validate Gradle Wrapper'
 on: [push, pull_request]
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     validation:
         name: 'Validation'
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         steps:
             - name: Checkout repository
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
+
             - name: Validate checksums
               uses: gradle/actions/wrapper-validation@0bdd871935719febd78681f197cd39af5b6e16a6 # v4.2.2
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 4a5b576b424b53..6a7be0419130ab 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -23,11 +23,17 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     performance:
         timeout-minutes: 60
         name: Run performance tests
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' }}
         env:
             WP_ARTIFACTS_PATH: ${{ github.workspace }}/artifacts
@@ -36,6 +42,7 @@ jobs:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -49,7 +56,7 @@ jobs:
 
             - name: Compare performance with base branch
               if: github.event_name == 'pull_request'
-              run: ./bin/plugin/cli.js perf $GITHUB_SHA ${{ github.base_ref }} --tests-branch $GITHUB_SHA
+              run: ./bin/plugin/cli.js perf "$GITHUB_SHA" "$GITHUB_BASE_REF" --tests-branch "$GITHUB_SHA"
 
             - name: Compare performance with current WordPress Core and previous Gutenberg versions
               if: github.event_name == 'release'
@@ -61,21 +68,22 @@ jobs:
                   CURRENT_RELEASE_BRANCH="release/${PLUGIN_VERSION_ARRAY[0]}.${PLUGIN_VERSION_ARRAY[1]}"
                   PREVIOUS_VERSION_BASE_10=$((PLUGIN_VERSION_ARRAY[0] * 10 + PLUGIN_VERSION_ARRAY[1] - 1))
                   PREVIOUS_RELEASE_BRANCH="release/$((PREVIOUS_VERSION_BASE_10 / 10)).$((PREVIOUS_VERSION_BASE_10 % 10))"
-                  WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
+                  WP_VERSION="$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)"
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --tests-branch "$GITHUB_SHA" --wp-version "$WP_MAJOR"
 
             - name: Compare performance with base branch
               if: github.event_name == 'push'
               # The base hash used here need to be a commit that is compatible with the current WP version
-              # The current one is c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 and it needs to be updated every WP major release.
+              # The current one is 1b8efa77d39f68fb3d963ea02ce6ea6a8201d521 and it needs to be updated every WP major release.
               # It is used as a base comparison point to avoid fluctuation in the performance metrics.
+              # See: https://developer.wordpress.org/block-editor/explanations/architecture/performance/#update-the-reference-commit.
               run: |
-                  WP_VERSION=$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)
+                  WP_VERSION="$(awk -F ': ' '/^Tested up to/{print $2}' readme.txt)"
                   IFS=. read -ra WP_VERSION_ARRAY <<< "$WP_VERSION"
                   WP_MAJOR="${WP_VERSION_ARRAY[0]}.${WP_VERSION_ARRAY[1]}"
-                  ./bin/plugin/cli.js perf $GITHUB_SHA c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 --tests-branch $GITHUB_SHA --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf "$GITHUB_SHA" 1b8efa77d39f68fb3d963ea02ce6ea6a8201d521 --tests-branch "$GITHUB_SHA" --wp-version "$WP_MAJOR"
 
             - name: Compare performance with custom branches
               if: github.event_name == 'workflow_dispatch'
@@ -83,10 +91,10 @@ jobs:
                   BRANCHES: ${{ github.event.inputs.branches }}
                   WP_VERSION: ${{ github.event.inputs.wpversion }}
               run: |
-                  ./bin/plugin/cli.js perf $(echo $BRANCHES | tr ',' ' ') --tests-branch $GITHUB_SHA --wp-version "$WP_VERSION"
+                  ./bin/plugin/cli.js perf "$(echo "$BRANCHES" | tr ',' ' ')" --tests-branch "$GITHUB_SHA" --wp-version "$WP_VERSION"
 
             - name: Add workflow summary
-              run: cat ${{ env.WP_ARTIFACTS_PATH }}/summary.md >> $GITHUB_STEP_SUMMARY
+              run: cat "${WP_ARTIFACTS_PATH}/summary.md" >> "$GITHUB_STEP_SUMMARY"
 
             - name: Archive performance results
               if: success()
@@ -100,8 +108,8 @@ jobs:
               env:
                   CODEHEALTH_PROJECT_TOKEN: ${{ secrets.CODEHEALTH_PROJECT_TOKEN }}
               run: |
-                  COMMITTED_AT=$(git show -s $GITHUB_SHA --format="%cI")
-                  ./bin/log-performance-results.js $CODEHEALTH_PROJECT_TOKEN trunk $GITHUB_SHA c7722262e65a3f4d0f1a2d1ad29eccb2069509e4 $COMMITTED_AT
+                  COMMITTED_AT="$(git show -s "$GITHUB_SHA" --format="%cI")"
+                  ./bin/log-performance-results.js "$CODEHEALTH_PROJECT_TOKEN" trunk "$GITHUB_SHA" 1b8efa77d39f68fb3d963ea02ce6ea6a8201d521 "$COMMITTED_AT"
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
diff --git a/.github/workflows/props-bot.yml b/.github/workflows/props-bot.yml
index b2332aabb816c7..574aea9f9ae948 100644
--- a/.github/workflows/props-bot.yml
+++ b/.github/workflows/props-bot.yml
@@ -76,6 +76,8 @@ jobs:
             - name: Remove the props-bot label
               uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
               if: ${{ github.event.action == 'labeled' && 'props-bot' == github.event.label.name }}
+              env:
+                  ISSUE_NUMBER: ${{ github.event.number }}
               with:
                   retries: 2
                   retry-exempt-status-codes: 418
@@ -83,6 +85,6 @@ jobs:
                       github.rest.issues.removeLabel({
                         owner: context.repo.owner,
                         repo: context.repo.repo,
-                        issue_number: '${{ github.event.number }}',
+                        issue_number: process.env.ISSUE_NUMBER,
                         name: 'props-bot'
                       });
diff --git a/.github/workflows/publish-npm-packages.yml b/.github/workflows/publish-npm-packages.yml
index 256c1e112a71ae..5e58eccdeee2ee 100644
--- a/.github/workflows/publish-npm-packages.yml
+++ b/.github/workflows/publish-npm-packages.yml
@@ -10,6 +10,7 @@ on:
                 default: 'development'
                 options:
                     - development
+                    - latest
                     - bugfix
                     - wp
             wp_version:
@@ -23,10 +24,16 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     release:
         name: Release - ${{ github.event.inputs.release_type }}
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         environment: WordPress packages
         steps:
             - name: Checkout (for CLI)
@@ -36,6 +43,7 @@ jobs:
                   path: cli
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Checkout (for publishing)
               if: ${{ github.event.inputs.release_type != 'wp' }}
@@ -46,6 +54,7 @@ jobs:
                   ref: trunk
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Checkout (for publishing WP major version)
               if: ${{ github.event.inputs.release_type == 'wp' && github.event.inputs.wp_version }}
@@ -58,6 +67,7 @@ jobs:
                   fetch-depth: 999
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Configure git user name and email (for publishing)
               run: |
@@ -67,7 +77,7 @@ jobs:
 
             - name: Setup Node.js
               if: ${{ github.event.inputs.release_type != 'wp' }}
-              uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               with:
                   node-version-file: 'cli/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
@@ -75,7 +85,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@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               with:
                   node-version-file: 'publish/.nvmrc'
                   registry-url: 'https://registry.npmjs.org'
@@ -90,6 +100,15 @@ jobs:
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+            - name: Publish packages based on the latest Gutenberg plugin to npm ("latest" dist-tag)
+              if: ${{ github.event.inputs.release_type == 'latest' }}
+              run: |
+                  cd cli
+                  npm ci
+                  ./bin/plugin/cli.js npm-latest --semver minor --ci --repository-path ../publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
             - name: Publish packages to npm with bug fixes ("latest" dist-tag)
               if: ${{ github.event.inputs.release_type == 'bugfix' }}
               run: |
@@ -104,6 +123,7 @@ jobs:
               run: |
                   cd publish
                   npm ci
-                  npx lerna publish patch --dist-tag wp-${{ github.event.inputs.wp_version }} --no-private --yes --no-verify-access
+                  npx lerna publish patch --dist-tag "wp-$WP_VERSION" --no-private --yes --no-verify-access
               env:
                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+                  WP_VERSION: ${{ github.event.inputs.wp_version }}
diff --git a/.github/workflows/pull-request-automation.yml b/.github/workflows/pull-request-automation.yml
index e1a3defc641aa3..1c6ecf90469201 100644
--- a/.github/workflows/pull-request-automation.yml
+++ b/.github/workflows/pull-request-automation.yml
@@ -4,9 +4,17 @@ on:
     push:
 name: Pull request automation
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     pull-request-automation:
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            issues: write
+            pull-requests: write
         if: ${{ github.repository == 'WordPress/gutenberg' }}
 
         steps:
@@ -16,6 +24,7 @@ jobs:
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
diff --git a/.github/workflows/reusable-workflow-lint.yml b/.github/workflows/reusable-workflow-lint.yml
new file mode 100644
index 00000000000000..fc2e7752211c19
--- /dev/null
+++ b/.github/workflows/reusable-workflow-lint.yml
@@ -0,0 +1,37 @@
+name: Lint GitHub Actions workflows
+on:
+    workflow_call:
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
+jobs:
+    # Runs the actionlint GitHub Action workflow file linter.
+    #
+    # This helps guard against common mistakes including strong type checking for expressions (${{ }}), security checks,
+    # `run:` script checking, glob syntax validation, and more.
+    #
+    # Performs the following steps:
+    # - Checks out the repository.
+    # - Runs actionlint.
+    actionlint:
+        name: Run actionlint
+        runs-on: ubuntu-24.04
+        permissions:
+            contents: read
+        timeout-minutes: 5
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+              with:
+                  persist-credentials: false
+                  show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+
+            # actionlint is static checker for GitHub Actions workflow files.
+            # See https://github.com/rhysd/actionlint.
+            # Configuration file: .github/actionlint.yml
+            - name: Run actionlint
+              uses: docker://rhysd/actionlint:1.7.7
+              with:
+                  args: '-color -verbose'
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index dbb17461fe8027..0637df1b7c2c63 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -12,9 +12,15 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     test:
         runs-on: macos-13
+        permissions:
+            contents: read
         if: false
         #if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
@@ -27,6 +33,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Use desired version of Java
               uses: actions/setup-java@7a6d8a8234af8eb26422e24e3006232cccaa061b # v4.6.0
@@ -38,7 +45,7 @@ jobs:
               uses: ./.github/setup-node
 
             - name: Restore tests setup cache
-              uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
               with:
                   path: |
                       ~/.appium
@@ -53,7 +60,7 @@ jobs:
             # AVD cache disabled as it caused emulator termination to hang indefinitely.
             # https://github.com/ReactiveCircus/android-emulator-runner/issues/385
             # - name: AVD cache
-            #   uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+            #   uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
             #   id: avd-cache
             #   with:
             #       path: |
@@ -75,6 +82,8 @@ jobs:
 
             - name: Run tests
               uses: reactivecircus/android-emulator-runner@62dbb605bba737720e10b196cb4220d374026a6d # v2.33.0
+              env:
+                  NATIVE_TEST_NAME: ${{ matrix.native-test-name }}
               with:
                   api-level: ${{ matrix.api-level }}
                   force-avd-creation: false
@@ -82,7 +91,7 @@ jobs:
                   disable-animations: true
                   arch: x86_64
                   profile: Nexus 6
-                  script: npm run native test:e2e:android:local ${{ matrix.native-test-name }}
+                  script: npm run native test:e2e:android:local "$NATIVE_TEST_NAME"
 
             - uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               if: always()
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index ab63603afd129c..2ba35cbe2da630 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -12,9 +12,15 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     test:
         runs-on: macos-13
+        permissions:
+            contents: read
         if: false
         #if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
@@ -27,6 +33,7 @@ jobs:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - uses: ruby/setup-ruby@1287d2b408066abada82d5ad1c63652e758428d9 # v1.214.0
               with:
@@ -34,16 +41,20 @@ jobs:
                   working-directory: packages/react-native-editor/ios
 
             - name: Switch Xcode version to ${{ matrix.xcode }}
-              run: sudo xcode-select --switch /Applications/Xcode_${{ matrix.xcode }}.app
+              env:
+                  VERSION: ${{ matrix.xcode }}
+              run: sudo xcode-select --switch "/Applications/Xcode_${VERSION}.app"
 
             - name: Launch simulator
-              run: (open -a Simulator && xcrun simctl boot '${{ matrix.device }}') &
+              env:
+                  DEVICE: ${{ matrix.device }}
+              run: (open -a Simulator && xcrun simctl boot "${DEVICE}") &
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
 
             - name: Restore tests setup cache
-              uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
               with:
                   path: |
                       ~/.appium
@@ -56,7 +67,7 @@ jobs:
               run: find package-lock.json packages/react-native-editor/ios packages/react-native-aztec/ios packages/react-native-bridge/ios -type f -print0 | sort -z | xargs -0 shasum | tee ios-checksums.txt
 
             - name: Restore build cache
-              uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
               with:
                   path: |
                       packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app
@@ -64,7 +75,7 @@ jobs:
                   key: ${{ runner.os }}-ios-build-${{ matrix.xcode }}-${{ matrix.device }}-${{ hashFiles('ios-checksums.txt') }}
 
             - name: Restore pods cache
-              uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
               with:
                   path: |
                       packages/react-native-editor/ios/Pods
@@ -83,7 +94,9 @@ jobs:
               run: test -d packages/react-native-editor/ios/build/WDA || npm run native test:e2e:build-wda
 
             - name: Run iOS Device Tests
-              run: TEST_RN_PLATFORM=ios npm run native device-tests:local  ${{ matrix.native-test-name }}
+              env:
+                  NATIVE_TEST_NAME: ${{ matrix.native-test-name }}
+              run: TEST_RN_PLATFORM=ios npm run native device-tests:local "$NATIVE_TEST_NAME"
 
             - name: Prepare build cache
               run: |
diff --git a/.github/workflows/stale-issue-gardening.yml b/.github/workflows/stale-issue-gardening.yml
index 6b8c7e82d1ca7b..5caeee49198dba 100644
--- a/.github/workflows/stale-issue-gardening.yml
+++ b/.github/workflows/stale-issue-gardening.yml
@@ -4,10 +4,17 @@ on:
     schedule:
         - cron: '0 0 * * *'
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     issue-gardening:
         name: ${{ matrix.name }}
         runs-on: ubuntu-latest
+        permissions:
+            issues: write
+            pull-requests: write
         if: ${{ github.repository == 'WordPress/gutenberg' }}
         strategy:
             matrix:
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index 46a7a22b323256..86cbacd6d960a9 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -15,19 +15,26 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     check:
         name: All
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Use desired version of Node.js
-              uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e # v4.3.0
+              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
               with:
                   node-version-file: '.nvmrc'
                   check-latest: true
diff --git a/.github/workflows/storybook-check.yml b/.github/workflows/storybook-check.yml
index dd710f96747128..97697b3f897cf9 100644
--- a/.github/workflows/storybook-check.yml
+++ b/.github/workflows/storybook-check.yml
@@ -1,4 +1,4 @@
-name: Check Storybook build
+name: Storybook build and Smoke Tests
 
 on: pull_request
 
@@ -9,19 +9,39 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     check:
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
+        timeout-minutes: 30
 
         steps:
             - name: Checkout
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
 
             - name: Build Storybook
               run: npm run storybook:build
+
+            # - name: Install Playwright dependencies
+            #   run: npx playwright install --with-deps
+
+            # - name: Serve Storybook and run tests
+            #   run: |
+            #       npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            #       "npx http-server ./storybook/build --port 50240 --silent" \
+            #       "npx wait-on tcp:127.0.0.1:50240 && \
+            #       NODE_PATH=./node_modules \
+            #       npx --package=@storybook/test-runner -- \
+            #       test-storybook --url http://localhost:50240 --config-dir ./storybook"
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 4af4934cf0325b..9defe8d0ef89d5 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -5,9 +5,15 @@ on:
         branches:
             - trunk
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     deploy:
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         if: ${{ github.repository == 'WordPress/gutenberg' }}
 
         steps:
@@ -16,6 +22,7 @@ jobs:
               with:
                   ref: trunk
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
diff --git a/.github/workflows/sync-assets-to-plugin-repo.yml b/.github/workflows/sync-assets-to-plugin-repo.yml
index c841b3ffc79579..745bf37c208bed 100644
--- a/.github/workflows/sync-assets-to-plugin-repo.yml
+++ b/.github/workflows/sync-assets-to-plugin-repo.yml
@@ -7,10 +7,16 @@ on:
         paths:
             - assets/**
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     sync-assets:
         name: Sync assets to WordPress.org plugin repo
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         environment: wp.org plugin
         env:
             PLUGIN_REPO_URL: 'https://plugins.svn.wordpress.org/gutenberg'
@@ -33,6 +39,7 @@ jobs:
                       assets
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
                   path: git
+                  persist-credentials: false
 
             - name: Copy files from git checkout to svn working copy
               run: cp -R git/assets/* assets
diff --git a/.github/workflows/sync-backport-changelog.yml b/.github/workflows/sync-backport-changelog.yml
index e530ca667de3d7..a42a2f1e8be7be 100644
--- a/.github/workflows/sync-backport-changelog.yml
+++ b/.github/workflows/sync-backport-changelog.yml
@@ -7,10 +7,17 @@ on:
     issues:
         types: [labeled]
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     sync-backport-changelog:
         name: Sync Core Backport Issue
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            issues: write
         if: >
             github.event_name == 'push' ||
             (
@@ -23,6 +30,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   fetch-depth: 2 # Fetch the last two commits to compare changes
+                  persist-credentials: false
             - name: Check for changes in backport-changelog
               if: github.event_name == 'push'
               run: |
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 621bba5b10b248..74344dd3cf6c21 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -19,10 +19,16 @@ concurrency:
     group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
     cancel-in-progress: true
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     unit-js:
         name: JavaScript (Node.js ${{ matrix.node }}) ${{ matrix.shard }}
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
@@ -35,6 +41,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -52,16 +59,21 @@ jobs:
               run: npx lerna run build
 
             - name: Running the tests
+              env:
+                  MAXWORKERS: ${{ steps.cpu-cores.outputs.count }}
+                  SHARD: ${{ matrix.shard }}
               run: |
                   npm run test:unit -- \
                     --ci \
-                    --maxWorkers="${{ steps.cpu-cores.outputs.count }}" \
-                    --shard="${{ matrix.shard }}" \
+                    --maxWorkers="$MAXWORKERS" \
+                    --shard="$SHARD" \
                     --cacheDirectory="$HOME/.jest-cache"
 
     unit-js-date:
         name: JavaScript Date Tests (Node.js ${{ matrix.node }})
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
             fail-fast: false
@@ -73,6 +85,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -90,11 +103,14 @@ jobs:
               run: npx lerna run build
 
             - name: Run the date tests
-              run: npm run test:unit:date -- --ci --maxWorkers=${{ steps.cpu-cores.outputs.count }} --cacheDirectory="$HOME/.jest-cache"
+              env:
+                  MAXWORKERS: ${{ steps.cpu-cores.outputs.count }}
+              run: npm run test:unit:date -- --ci --maxWorkers="$MAXWORKERS" --cacheDirectory="$HOME/.jest-cache"
 
     compute-previous-wordpress-version:
         name: Compute previous WordPress version
         runs-on: ubuntu-latest
+        permissions: {}
         outputs:
             previous-wordpress-version: ${{ steps.get-previous-wordpress-version.outputs.previous-wordpress-version }}
 
@@ -106,24 +122,28 @@ jobs:
                     -H "Accept: application/json" \
                     -o versions.json \
                     "http://api.wordpress.org/core/stable-check/1.0/"
-                  LATEST_WP_VERSION=$(jq --raw-output 'with_entries(select(.value=="latest"))|keys[]' versions.json)
-                  IFS='.' read LATEST_WP_MAJOR LATEST_WP_MINOR LATEST_WP_PATCH <<< "${LATEST_WP_VERSION}"
-                  if [[ ${LATEST_WP_MINOR} == "0" ]]; then
+                  LATEST_WP_VERSION="$(jq --raw-output 'with_entries(select(.value=="latest"))|keys[]' versions.json)"
+                  # shellcheck disable=SC2034
+                  IFS='.' read -r LATEST_WP_MAJOR LATEST_WP_MINOR LATEST_WP_PATCH <<< "${LATEST_WP_VERSION}"
+                  if [[ "${LATEST_WP_MINOR}" == "0" ]]; then
                     PREVIOUS_WP_SERIES="$((LATEST_WP_MAJOR - 1)).9"
                   else
                     PREVIOUS_WP_SERIES="${LATEST_WP_MAJOR}.$((LATEST_WP_MINOR - 1))"
                   fi
-                  PREVIOUS_WP_VERSION=$(jq --raw-output --arg series "${PREVIOUS_WP_SERIES}" 'with_entries(select(.key|startswith($series)))|keys[-1]' versions.json)
-                  echo "previous-wordpress-version=${PREVIOUS_WP_VERSION}" >> $GITHUB_OUTPUT
+                  PREVIOUS_WP_VERSION="$(jq --raw-output --arg series "${PREVIOUS_WP_SERIES}" 'with_entries(select(.key|startswith($series)))|keys[-1]' versions.json)"
+                  echo "previous-wordpress-version=${PREVIOUS_WP_VERSION}" >> "$GITHUB_OUTPUT"
                   rm versions.json
 
     build-assets:
         name: Build JavaScript assets for PHP unit tests
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         steps:
             - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -143,6 +163,8 @@ jobs:
         name: PHP ${{ matrix.php }}${{ matrix.multisite && ' multisite' || '' }}${{ matrix.wordpress != '' && format( ' (WP {0}) ', matrix.wordpress ) || '' }} on ubuntu-latest
         needs: [compute-previous-wordpress-version, build-assets]
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         timeout-minutes: 20
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
         strategy:
@@ -176,6 +198,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Setup Node.js and install dependencies
               uses: ./.github/setup-node
@@ -188,7 +211,7 @@ jobs:
             # dependency versions are installed and cached.
             ##
             - name: Set up PHP
-              uses: shivammathur/setup-php@9e72090525849c5e82e596468b86eb55e9cc5401 # v2.32.0
+              uses: shivammathur/setup-php@0f7f1d08e3e32076e51cae65eb0b0c871405b16e # v2.34.1
               with:
                   php-version: '${{ matrix.php }}'
                   ini-file: development
@@ -196,17 +219,19 @@ jobs:
 
             # Ensure that Composer installs the correct versions of packages.
             - name: Override PHP version in composer.json
-              run: composer config platform.php ${{ matrix.php }}
+              env:
+                  VERSION: ${{ matrix.php }}
+              run: composer config platform.php "$VERSION"
 
             # Since Composer dependencies are installed using `composer update` and no lock file is in version control,
             # passing a custom cache suffix ensures that the cache is flushed at least once per week.
             - name: Install Composer dependencies
-              uses: ramsey/composer-install@a2636af0004d1c0499ffca16ac0b4cc94df70565 # v3.1.0
+              uses: ramsey/composer-install@3cf229dc2919194e9e36783941438d17239e8520 # v3.1.1
               with:
                   custom-cache-suffix: $(/bin/date -u --date='last Mon' "+%F")
 
             - name: Download built JavaScript assets
-              uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4.1.9
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
               with:
                   name: build-assets
 
@@ -258,14 +283,14 @@ jobs:
               run: |
                   # Note: relies on PHPUnit execution to fail on test failure.
                   # Extract the number of executed tests from the log file.
-                  if ! num_tests=$(grep -Eo 'OK \([0-9]+ tests' phpunit.log) ; then
-                    if ! num_tests=$(grep -Eo 'Tests: [0-9]+, Assertions:' phpunit.log) ; then
+                  if ! num_tests="$(grep -Eo 'OK \([0-9]+ tests' phpunit.log)" ; then
+                    if ! num_tests="$(grep -Eo 'Tests: [0-9]+, Assertions:' phpunit.log)" ; then
                       echo "PHPUnit failed or did not run. Check the PHPUnit output in the previous step to debug." && exit 1
                     fi
                   fi
                   # Extract just the number of tests from the string.
-                  num_tests=$(echo "$num_tests" | grep -Eo '[0-9]+')
-                  if [ $num_tests -lt 500 ] ; then
+                  num_tests="$(echo "$num_tests" | grep -Eo '[0-9]+')"
+                  if [ "$num_tests" -lt 500 ] ; then
                     echo "Only $num_tests tests passed, which is much fewer than expected." && exit 1
                   fi
                   echo "$num_tests tests passed."
@@ -273,6 +298,8 @@ jobs:
     phpcs:
         name: PHP coding standards
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         timeout-minutes: 20
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
@@ -281,9 +308,10 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Set up PHP
-              uses: shivammathur/setup-php@9e72090525849c5e82e596468b86eb55e9cc5401 # v2.32.0
+              uses: shivammathur/setup-php@0f7f1d08e3e32076e51cae65eb0b0c871405b16e # v2.34.1
               with:
                   php-version: '7.4'
                   coverage: none
@@ -293,10 +321,10 @@ jobs:
             # http://man7.org/linux/man-pages/man1/date.1.html
             - name: "Get last Monday's date"
               id: get-date
-              run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> $GITHUB_OUTPUT
+              run: echo "date=$(/bin/date -u --date='last Mon' "+%F")" >> "$GITHUB_OUTPUT"
 
             - name: Cache PHPCS scan cache
-              uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
               with:
                   path: .cache/phpcs.json
                   key: ${{ runner.os }}-date-${{ steps.get-date.outputs.date }}-phpcs-cache-${{ hashFiles('**/composer.json', 'phpcs.xml.dist') }}
@@ -304,12 +332,12 @@ jobs:
             # Since Composer dependencies are installed using `composer update` and no lock file is in version control,
             # passing a custom cache suffix ensures that the cache is flushed at least once per week.
             - name: Install Composer dependencies
-              uses: ramsey/composer-install@a2636af0004d1c0499ffca16ac0b4cc94df70565 # v3.1.0
+              uses: ramsey/composer-install@3cf229dc2919194e9e36783941438d17239e8520 # v3.1.1
               with:
                   custom-cache-suffix: ${{ steps.get-date.outputs.date }}
 
             - name: Make Composer packages available globally
-              run: echo "${PWD}/vendor/bin" >> $GITHUB_PATH
+              run: echo "${PWD}/vendor/bin" >> "$GITHUB_PATH"
 
             - name: Run PHPCS on all Gutenberg files
               id: phpcs-gutenberg
@@ -326,6 +354,7 @@ jobs:
     unit-php:
         name: PHP
         runs-on: ubuntu-latest
+        permissions: {}
         needs: [test-php, phpcs]
         if: ${{ always() }}
         steps:
@@ -344,6 +373,8 @@ jobs:
     mobile-unit-js:
         name: Mobile
         runs-on: ubuntu-latest
+        permissions:
+            contents: read
         if: ${{ github.repository == 'WordPress/gutenberg' || github.event_name == 'pull_request' }}
 
         steps:
@@ -351,6 +382,7 @@ jobs:
               uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
               with:
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: false
 
             - name: Determine the number of CPU cores
               uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2.0.0
@@ -366,4 +398,6 @@ jobs:
               run: npx lerna run build
 
             - name: Running the tests
-              run: npm run test:native -- --ci --maxWorkers=${{ steps.cpu-cores.outputs.count }} --cacheDirectory="$HOME/.jest-cache"
+              env:
+                  MAXWORKERS: ${{ steps.cpu-cores.outputs.count }}
+              run: npm run test:native -- --ci --maxWorkers="$MAXWORKERS" --cacheDirectory="$HOME/.jest-cache"
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index 997b0cff9a44a1..1d5b607015859a 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -4,10 +4,15 @@ on:
     release:
         types: [published]
 
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
 jobs:
     compute-should-update-trunk:
         name: Decide if trunk or tag
         runs-on: ubuntu-latest
+        permissions: {}
         # Skip this job if the release is a release candidate. This will in turn skip
         # the upload jobs, which are only relevant for non-RC releases.
         # We first check if the release is a prerelease, and then if the ref contains
@@ -25,15 +30,15 @@ jobs:
               run: |
                   latest_version_in_core_repo=$(curl -s 'https://api.wordpress.org/plugins/info/1.2/?action=plugin_information&request\[slug\]=gutenberg' | jq -r '.version')
                   echo "Latest Core Repo version: $latest_version_in_core_repo"
-                  echo "version=$latest_version_in_core_repo" >> $GITHUB_OUTPUT
+                  echo "version=$latest_version_in_core_repo" >> "$GITHUB_OUTPUT"
 
             - name: Decide if it is a trunk or tag update
               id: compute_should_update_trunk
               env:
                   GITHUB_REF: ${{ github.ref }}
+                  LATEST_VERSION: ${{ steps.compute_latest_version_in_core_repo.outputs.version }}
               run: |
                   latestPublishedVersion=$(echo "$GITHUB_REF" | sed -E 's/refs\/tags\/(v?)([0-9.]+)/\2/')
-                  latestVersionInCoreRepo="${{ steps.compute_latest_version_in_core_repo.outputs.version }}"
 
                   # Determines if the first version string is greater than the second version string.
                   #
@@ -55,16 +60,17 @@ jobs:
                   # than the version currently published in the WP plugins repo. If not, then it
                   # will upload it as a new tag.
                   shouldUpdateTrunk=false
-                  if is_first_version_greater_than_second "$latestPublishedVersion" "$latestVersionInCoreRepo"; then
+                  if is_first_version_greater_than_second "$latestPublishedVersion" "$LATEST_VERSION"; then
                      shouldUpdateTrunk=true
                   fi
 
                   echo "Should update trunk: $shouldUpdateTrunk"
-                  echo "should_update_trunk=$shouldUpdateTrunk" >> $GITHUB_OUTPUT
+                  echo "should_update_trunk=$shouldUpdateTrunk" >> "$GITHUB_OUTPUT"
 
     get-release-branch:
         name: Get release branch name
         runs-on: ubuntu-latest
+        permissions: {}
         outputs:
             release_branch: ${{ steps.get_release_branch.outputs.release_branch }}
 
@@ -76,11 +82,13 @@ jobs:
               run: |
                   IFS='.' read -r -a VERSION_ARRAY <<< "${TAG#v}"
                   RELEASE_BRANCH="release/${VERSION_ARRAY[0]}.${VERSION_ARRAY[1]}"
-                  echo "release_branch=${RELEASE_BRANCH}" >> $GITHUB_OUTPUT
+                  echo "release_branch=${RELEASE_BRANCH}" >> "$GITHUB_OUTPUT"
 
     update-changelog:
         name: Update Changelog on ${{ matrix.branch }} branch
         runs-on: ubuntu-latest
+        permissions:
+            contents: write
         if: |
             github.event.release.assets[0]
         needs: get-release-branch
@@ -101,8 +109,11 @@ jobs:
                   ref: ${{ matrix.branch }}
                   token: ${{ secrets.GUTENBERG_TOKEN }}
                   show-progress: ${{ runner.debug == '1' && 'true' || 'false' }}
+                  persist-credentials: true
 
             - name: Update the Changelog to include the release notes
+              env:
+                  RELEASE_BODY: ${{ github.event.release.body }}
               run: |
                   # First, determine where to insert the new Changelog entry.
                   SERIES="${RELEASE_BRANCH#release/}"
@@ -119,9 +130,7 @@ jobs:
                   head -n $(( "${BEFORE}" - 1 )) changelog.txt > new_changelog.txt
                   printf '= %s =\n\n' "${TAG#v}" >> new_changelog.txt
                   # Need to use a heredoc in order to preserve special characters.
-                  cat <<- "EOF" > release_notes.txt
-                  ${{ github.event.release.body }}
-                  EOF
+                  echo "$RELEASE_BODY" > release_notes.txt
                   # Normalize empty lines: Trim them from beginning and end of file...
                   awk 'NF {p=1} p' <<< "$(< release_notes.txt)" >> new_changelog.txt
                   # ...then add two empty lines at the end.
@@ -135,6 +144,8 @@ jobs:
                   git config user.email gutenberg@wordpress.org
 
             - name: Commit the Changelog update
+              env:
+                  TARGET_BRANCH: ${{ matrix.branch }}
               run: |
                   git add changelog.txt
                   # Remove files that are not meant to be committed
@@ -143,7 +154,7 @@ jobs:
                   # Only attempt to commit changelog if it has been modified.
                   if ! git diff-index --quiet HEAD --; then
                     git commit -m "Update Changelog for ${TAG#v}"
-                    git push --set-upstream origin "${{ matrix.branch }}"
+                    git push --set-upstream origin "$TARGET_BRANCH"
                   fi
 
             - name: Upload Changelog artifact
@@ -155,6 +166,7 @@ jobs:
     upload:
         name: Publish as trunk (and tag)
         runs-on: ubuntu-latest
+        permissions: {}
         environment: wp.org plugin
         needs: [compute-should-update-trunk, update-changelog]
         if: |
@@ -184,7 +196,7 @@ jobs:
               env:
                   PLUGIN_URL: ${{ github.event.release.assets[0].browser_download_url }}
               run: |
-                  curl -L -o gutenberg.zip $PLUGIN_URL
+                  curl -L -o gutenberg.zip "$PLUGIN_URL"
                   unzip gutenberg.zip -d trunk
                   rm gutenberg.zip
 
@@ -195,7 +207,7 @@ jobs:
                   sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" ./trunk/readme.txt
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4.1.9
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
               with:
                   name: changelog trunk
                   path: trunk
@@ -214,6 +226,7 @@ jobs:
     upload-tag:
         name: Publish as tag
         runs-on: ubuntu-latest
+        permissions: {}
         environment: wp.org plugin
         needs: [compute-should-update-trunk, update-changelog]
         if: |
@@ -235,7 +248,7 @@ jobs:
                   PLUGIN_URL: ${{ github.event.release.assets[0].browser_download_url }}
               run: |
                   # do the magic here
-                  curl -L -o gutenberg.zip $PLUGIN_URL
+                  curl -L -o gutenberg.zip "$PLUGIN_URL"
                   unzip gutenberg.zip -d "$VERSION"
                   rm gutenberg.zip
 
@@ -246,7 +259,7 @@ jobs:
                   sed -i "s/$STABLE_TAG_PLACEHOLDER/Stable tag: $VERSION/g" "$VERSION/readme.txt"
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@cc203385981b70ca67e1cc392babf9cc229d5806 # v4.1.9
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
               with:
                   name: changelog trunk
                   path: ${{ github.event.release.name }}
diff --git a/.github/workflows/workflow-lint.yml b/.github/workflows/workflow-lint.yml
new file mode 100644
index 00000000000000..6789acb03785f8
--- /dev/null
+++ b/.github/workflows/workflow-lint.yml
@@ -0,0 +1,36 @@
+name: Lint GitHub Actions workflow files
+
+on:
+    push:
+        branches:
+            - trunk
+        paths:
+            # Only run when changes are made to workflow files.
+            - '.github/workflows/**'
+    pull_request:
+        branches:
+            - trunk
+        paths:
+            # Only run when changes are made to workflow files.
+            - '.github/workflows/**'
+    workflow_dispatch:
+
+# Cancels all previous workflow runs for pull requests that have not completed.
+concurrency:
+    # The concurrency group contains the workflow name and the branch name for pull requests
+    # or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
+
+# Disable permissions for all available scopes by default.
+# Any needed permissions should be configured at the job level.
+permissions: {}
+
+jobs:
+    lint:
+        name: Lint GitHub Action files
+        permissions:
+            security-events: write
+            actions: read
+            contents: read
+        uses: ./.github/workflows/reusable-workflow-lint.yml
diff --git a/.gitignore b/.gitignore
index 9e7e4333af8689..95a0bd7ead37d5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,3 +53,7 @@ test/gutenberg-test-themes/twentytwentyone
 test/gutenberg-test-themes/twentytwentythree
 test/gutenberg-test-themes/twentytwentyfour
 packages/react-native-editor/src/setup-local.js
+
+# Files related to applying patches
+*.rej
+*.orig
diff --git a/.stylelintrc.js b/.stylelintrc.js
new file mode 100644
index 00000000000000..12d1050cfbace8
--- /dev/null
+++ b/.stylelintrc.js
@@ -0,0 +1,52 @@
+/** @type {import('stylelint').Config} */
+module.exports = {
+	extends: '@wordpress/stylelint-config/scss-stylistic',
+	rules: {
+		'at-rule-empty-line-before': null,
+		'at-rule-no-unknown': null,
+		'comment-empty-line-before': null,
+		'declaration-property-value-allowed-list': [
+			{
+				'flex-direction': '/^(?!(row|column)-reverse).*$/',
+			},
+			{
+				message: ( property, value ) =>
+					`Avoid "${ value }" value for the "${ property }" property. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction.`,
+			},
+		],
+		'declaration-property-value-disallowed-list': [
+			{
+				'/.*/': [ '/--wp-components-color-/' ],
+			},
+			{
+				message: ( property, value ) =>
+					`Avoid using "${ value }" in "${ property }". --wp-components-color-* variables are not ready to be used outside of the components package.`,
+			},
+		],
+		'font-weight-notation': null,
+		'@stylistic/max-line-length': null,
+		'no-descending-specificity': null,
+		'property-disallowed-list': [
+			[ 'order' ],
+			{
+				message:
+					'Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction.',
+			},
+		],
+		'rule-empty-line-before': null,
+		'selector-class-pattern': null,
+		'value-keyword-case': null,
+		'scss/operator-no-unspaced': null,
+		'scss/selector-no-redundant-nesting-selector': null,
+		'scss/load-partial-extension': null,
+		'scss/no-global-function-names': null,
+		'scss/comment-no-empty': null,
+		'scss/at-extend-no-missing-placeholder': null,
+		'scss/operator-no-newline-after': null,
+		'scss/at-if-closing-brace-newline-after': null,
+		'scss/at-else-empty-line-before': null,
+		'scss/at-if-closing-brace-space-after': null,
+		'no-invalid-position-at-import-rule': null,
+	},
+	reportDescriptionlessDisables: true,
+};
diff --git a/.stylelintrc.json b/.stylelintrc.json
deleted file mode 100644
index 557376e02c4062..00000000000000
--- a/.stylelintrc.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-	"extends": "@wordpress/stylelint-config/scss-stylistic",
-	"rules": {
-		"at-rule-empty-line-before": null,
-		"at-rule-no-unknown": null,
-		"comment-empty-line-before": null,
-		"declaration-property-value-allowed-list": [
-			{
-				"flex-direction": "/^(?!(row|column)-reverse).*$/"
-			},
-			{
-				"message": "Avoid the flex-direction reverse values. For accessibility reasons, visual, reading, and DOM order must match. Only use the reverse values when they do not affect reading order, meaning, and interaction."
-			}
-		],
-		"declaration-property-value-disallowed-list": [
-			{
-				"/.*/": [ "/--wp-components-color-/" ]
-			},
-			{
-				"message": "--wp-components-color-* variables are not ready to be used outside of the components package."
-			}
-		],
-		"font-weight-notation": null,
-		"@stylistic/max-line-length": null,
-		"no-descending-specificity": null,
-		"property-disallowed-list": [
-			[ "order" ],
-			{
-				"message": "Avoid the order property. For accessibility reasons, visual, reading, and DOM order must match. Only use the order property when it does not affect reading order, meaning, and interaction."
-			}
-		],
-		"rule-empty-line-before": null,
-		"selector-class-pattern": null,
-		"value-keyword-case": null,
-		"scss/operator-no-unspaced": null,
-		"scss/selector-no-redundant-nesting-selector": null,
-		"scss/load-partial-extension": null,
-		"scss/no-global-function-names": null,
-		"scss/comment-no-empty": null,
-		"scss/at-extend-no-missing-placeholder": null,
-		"scss/operator-no-newline-after": null,
-		"scss/at-if-closing-brace-newline-after": null,
-		"scss/at-else-empty-line-before": null,
-		"scss/at-if-closing-brace-space-after": null,
-		"no-invalid-position-at-import-rule": null
-	},
-	"reportDescriptionlessDisables": true
-}
diff --git a/README.md b/README.md
index 87db481b5b6b4f..5008a39beb35e3 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Check out the [Keeping up with Gutenberg Index](https://make.wordpress.org/core/
 
 ## Getting Started
 
-Get hands on: check out the [block editor live demo](https://wordpress.org/gutenberg/) to play with a test instance of the editor.
+Get hands-on: check out the [block editor live demo](https://wordpress.org/gutenberg/) to play with a test instance of the editor.
 
 ### Using Gutenberg
 
diff --git a/backport-changelog/6.9/8770.md b/backport-changelog/6.9/8770.md
new file mode 100644
index 00000000000000..9346719b02ef22
--- /dev/null
+++ b/backport-changelog/6.9/8770.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/8770
+
+* https://github.com/WordPress/gutenberg/pull/69971
diff --git a/backport-changelog/6.9/9268.md b/backport-changelog/6.9/9268.md
new file mode 100644
index 00000000000000..127eb50707e65a
--- /dev/null
+++ b/backport-changelog/6.9/9268.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/9268
+
+* https://github.com/WordPress/gutenberg/pull/70676
\ No newline at end of file
diff --git a/changelog.txt b/changelog.txt
index 839fac53122066..58eae0e1c3ee88 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,7 +1,1020 @@
 == Changelog ==
 
-= 20.6.0-rc.1 =
+= 21.3.0-rc.1 =
 
+## Changelog
+
+### Features
+
+#### DataViews
+- Add groupByField support to grid layout. ([70752](https://github.com/WordPress/gutenberg/pull/70752))
+
+#### Components
+- Add ValidateControls components. ([70620](https://github.com/WordPress/gutenberg/pull/70620))
+
+
+### Enhancements
+
+- DataViews: Add `date` field type. ([70657](https://github.com/WordPress/gutenberg/pull/70657))
+- wp-env: Add wp-cli configuration when creating environment. ([70661](https://github.com/WordPress/gutenberg/pull/70661))
+
+#### Block Library
+- Cover: Enable support for adding posters over video. ([70816](https://github.com/WordPress/gutenberg/pull/70816))
+- Navigation Submenu Link: Add `Open in new tab` toggle to navigation block sidebar. ([70687](https://github.com/WordPress/gutenberg/pull/70687))
+- Post Content Block: Add tagName selector. ([70698](https://github.com/WordPress/gutenberg/pull/70698))
+- Video: Enable support for adding multiple tracks. ([70689](https://github.com/WordPress/gutenberg/pull/70689))
+- Site tagline: update block description. ([34473](https://github.com/WordPress/gutenberg/pull/34473))
+
+#### Write mode
+- Allow add before/after on block toolbar menu dropdown when in write mode. ([70827](https://github.com/WordPress/gutenberg/pull/70827))
+- Remove cover block content position and full height controls from write mode. ([70826](https://github.com/WordPress/gutenberg/pull/70826))
+
+#### Block API
+- Add attribute role-based filtering to 'isUnmodifiedBlock'. ([70764](https://github.com/WordPress/gutenberg/pull/70764))
+
+#### List View
+- Package blocks: Introduce a utility for getting the block image. ([68910](https://github.com/WordPress/gutenberg/pull/68910))
+
+#### Layout
+- Adds max limit to row span and column span in grid. ([64895](https://github.com/WordPress/gutenberg/pull/64895))
+
+
+### Bug Fixes
+
+- Update @tannin/sprintf to resolve CommonJS error. ([70799](https://github.com/WordPress/gutenberg/pull/70799))
+- wp-env: Don't overwrite wp-cli.yml if it already exists. ([70677](https://github.com/WordPress/gutenberg/pull/70677))
+- wp-env: Fix Docker build errors with Debian Buster repositories. ([70718](https://github.com/WordPress/gutenberg/pull/70718))
+
+#### Block Library
+- Archives: Update padding for archives block to remain consistent with `list`. ([69008](https://github.com/WordPress/gutenberg/pull/69008))
+- Fix: Preserve hasParallax when switching from video to image in Cover block. ([70703](https://github.com/WordPress/gutenberg/pull/70703))
+- Media & Text: Fixed resetAll to return image resolution to default value. ([70683](https://github.com/WordPress/gutenberg/pull/70683))
+- Navigation Block: Fix inconsistent padding in nested submenus when "Open on click" is enabled. ([70471](https://github.com/WordPress/gutenberg/pull/70471))
+- Navigation Link: Fix URL deletion in Inspector Controls. ([70749](https://github.com/WordPress/gutenberg/pull/70749))
+- Separator: Surfacing the HTML markup control. ([70455](https://github.com/WordPress/gutenberg/pull/70455))
+- Sever Nav Link item entity link on URL change if ID already exists. ([68143](https://github.com/WordPress/gutenberg/pull/68143))
+- Video: Fix track editor state saves without explicitly applying the changes. ([70628](https://github.com/WordPress/gutenberg/pull/70628))
+- [Block] Cover: Fix resize handler gets stuck on undo. ([70820](https://github.com/WordPress/gutenberg/pull/70820))
+
+#### Block Editor
+- Block Editor Components: Add missing style resets for fieldset elements. ([70685](https://github.com/WordPress/gutenberg/pull/70685))
+- Inserter: Fix focus style for disabled items. ([70691](https://github.com/WordPress/gutenberg/pull/70691))
+- Inserter: Restore styling for disabled blocks. ([70663](https://github.com/WordPress/gutenberg/pull/70663))
+
+#### Global Styles
+- Core/File: Reduce specificity of pseudo-selector styles for better override support via theme.json. ([70358](https://github.com/WordPress/gutenberg/pull/70358))
+- Make Button element inherit all typography styles on the frontend. ([70676](https://github.com/WordPress/gutenberg/pull/70676))
+
+#### Components
+- Update Icon component to support bundled dataviews package. ([70756](https://github.com/WordPress/gutenberg/pull/70756))
+
+#### CSS & Styling
+- Block Lock Modal: Add ul browser defaults CSS resets. ([70700](https://github.com/WordPress/gutenberg/pull/70700))
+
+#### Interactivity API
+- iAPI Router: Preserve media attribute on intial style sheets after client-side navigation. ([70668](https://github.com/WordPress/gutenberg/pull/70668))
+
+#### Font Library
+- Fix: Font Library Modal: Focus outline not displaying correctly. ([70667](https://github.com/WordPress/gutenberg/pull/70667))
+
+#### Post Editor
+- Match front-page link style to admin styles. ([70600](https://github.com/WordPress/gutenberg/pull/70600))
+
+
+### Accessibility
+
+#### Block Editor
+- Autocomplete: Prevent text cursor position loss when clicking to insert an item. ([70660](https://github.com/WordPress/gutenberg/pull/70660))
+- Components: Fix label and placeholder handling in `LinkControlSearchInput`. ([70096](https://github.com/WordPress/gutenberg/pull/70096))
+
+#### Block Library
+- a11y: Comments Pagination Nav Wrapper. ([70730](https://github.com/WordPress/gutenberg/pull/70730))
+
+
+### Performance
+
+- core-data: Try using cached permissions even when `_fields` is present in the query. ([70738](https://github.com/WordPress/gutenberg/pull/70738))
+
+#### Block Editor
+- Avoid unbound requests in inserter selectors. ([66817](https://github.com/WordPress/gutenberg/pull/66817))
+- Deprecate block hovered global state. ([70731](https://github.com/WordPress/gutenberg/pull/70731))
+
+#### Block Library
+- Fix: Avoid duplicate `get_the_title()` calls in `render_block_core_post_featured_image()`. ([70813](https://github.com/WordPress/gutenberg/pull/70813))
+
+#### List View
+- Delay block highlighting when moving the mouse over the items. ([70732](https://github.com/WordPress/gutenberg/pull/70732))
+
+
+### Documentation
+
+- Deprecated: Fix code example. ([70781](https://github.com/WordPress/gutenberg/pull/70781))
+- Docs: Update RichTextToolbarButton link in documentation. ([70804](https://github.com/WordPress/gutenberg/pull/70804))
+- Docs: Update WP Studio to WordPress Studio. ([70716](https://github.com/WordPress/gutenberg/pull/70716))
+
+
+### Code Quality
+
+- Convert packages to TypeScript:
+  - Migrate `@packages/url` package to TypeScript. ([70496](https://github.com/WordPress/gutenberg/pull/70496))
+  - Migrate `hooks` package to TypeScript. ([70488](https://github.com/WordPress/gutenberg/pull/70488))
+  - Migrate `lazy-import` package to `TypeScript`. ([70475](https://github.com/WordPress/gutenberg/pull/70475))
+  - Migrate `redux-routine` package to TS. ([70686](https://github.com/WordPress/gutenberg/pull/70686))
+  - Migrate plugins package to TS. ([70773](https://github.com/WordPress/gutenberg/pull/70773))
+  - Migrate Icons package to `TypeScript`. ([70456](https://github.com/WordPress/gutenberg/pull/70456))
+  - TypeScript: Fix types for core entity meta. ([70788](https://github.com/WordPress/gutenberg/pull/70788))
+  - TypeScript: Migrate `block-serialization-default-parser` to TS. (#70507). ([70766](https://github.com/WordPress/gutenberg/pull/70766))
+  - TypeScript: Migrate wordcount package to TypeScript. ([70501](https://github.com/WordPress/gutenberg/pull/70501))
+
+#### Block Library
+- Navigation Link: Add `opensInNewTab` to resetAll. ([70717](https://github.com/WordPress/gutenberg/pull/70717))
+- Video: Fix 'MediaUploadCheck' wrapper for Poster control. ([70830](https://github.com/WordPress/gutenberg/pull/70830))
+- Video: Reuse logic for uploaded  track selection. ([70675](https://github.com/WordPress/gutenberg/pull/70675))
+
+#### DataViews
+- Improve data in DataViews storybook. ([70817](https://github.com/WordPress/gutenberg/pull/70817))
+- filterSortAndPaginate: Extract sortBy and groupBy logic. ([70822](https://github.com/WordPress/gutenberg/pull/70822))
+
+#### Components
+- Reuse existing `useControlledValue` hook in Calendar components. ([70655](https://github.com/WordPress/gutenberg/pull/70655))
+- SelectControl: Move classnames to root. ([70643](https://github.com/WordPress/gutenberg/pull/70643))
+- `DateCalendar`, `DateRangeCalendar`: Move to private APIs. ([70681](https://github.com/WordPress/gutenberg/pull/70681))
+
+#### Layout
+- Dimensions support: Fix duplicate output of styling rules. ([70796](https://github.com/WordPress/gutenberg/pull/70796))
+
+#### Block API
+- Blocks: Set default 'apiVersion' for client-side registration. ([70750](https://github.com/WordPress/gutenberg/pull/70750))
+
+#### List View
+- Remove public APIs for getting images. ([70705](https://github.com/WordPress/gutenberg/pull/70705))
+
+### Tools
+
+- Improve plugin release checklist and documentation. ([70808](https://github.com/WordPress/gutenberg/pull/70808))
+- Improving Gitignore for files related to applying patches. ([70745](https://github.com/WordPress/gutenberg/pull/70745))
+- Update codeowners for `packages/dataviews`. ([70753](https://github.com/WordPress/gutenberg/pull/70753))
+- Update gutenberg release documentation. ([70772](https://github.com/WordPress/gutenberg/pull/70772))
+- Sync package-lock.json on latest NPM. ([70839](https://github.com/WordPress/gutenberg/pull/70839))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@Adi-ty @aduth @andrewserong @carolinan @chihsuan @ciampo @DAreRodz @dhruvikpatel18 @dmsnell @EliezerSPP @ellatrix @getdave @gigitux @im3dabasia @Infinite-Null @jeryj @jsnajdr @kellychoffman @Mamaduka @manzoorwanijk @mukeshpanchal27 @n2erjo00 @ndiego @oandregal @prasadkarmalkar @priethor @shimotmk @shrivastavanolo @SirLouen @t-hamano @talldan @vipul0425 @yogeshbhutkar @youknowriad
+
+
+= 21.2.0 =
+
+## Changelog
+
+### Enhancements
+
+- DataViews: Introduce `perPageSizes` to control the available sizes of the items per page. ([70604](https://github.com/WordPress/gutenberg/pull/70604))
+- ESLint: Enforce stricter translator comment placeholder matching. ([70458](https://github.com/WordPress/gutenberg/pull/70458))
+- Format Library: Improve inline image replacement workflow. ([70598](https://github.com/WordPress/gutenberg/pull/70598))
+- I18N: Use `@tannin/sprintf`. ([70434](https://github.com/WordPress/gutenberg/pull/70434))
+
+#### Block Library
+- Gallery: Refactor "Settings" panel of Gallery block to use `ToolsPanel` instead of `PanelBody`. ([67904](https://github.com/WordPress/gutenberg/pull/67904))
+- Navigation Link: Add "Open in new tab" toggle to navigation block sidebar. ([67262](https://github.com/WordPress/gutenberg/pull/67262))
+- Site Logo: Refactor the media panel to use ToolsPanel. ([70599](https://github.com/WordPress/gutenberg/pull/70599))
+
+#### Icons
+- Update circle icons to have a unified footprint. ([70581](https://github.com/WordPress/gutenberg/pull/70581))
+- Update icons: Help, PlusCircle, Typography. ([70299](https://github.com/WordPress/gutenberg/pull/70299))
+
+#### Block Editor
+- Use consistent sizing for the block locking modal. ([70593](https://github.com/WordPress/gutenberg/pull/70593))
+
+#### Post Editor
+- Editor: Allow replacing the 'PostLockedModal' component. ([70586](https://github.com/WordPress/gutenberg/pull/70586))
+
+#### Components
+- Add `DateCalendar` and `DateRangeCalendar` components. ([70578](https://github.com/WordPress/gutenberg/pull/70578))
+
+#### DataViews
+- More fields, controls and operators. ([70567](https://github.com/WordPress/gutenberg/pull/70567))
+
+#### Interactivity API
+- iAPI Router: Prioritize custom click event handlers when full-page navigation is enabled. ([70566](https://github.com/WordPress/gutenberg/pull/70566))
+
+#### Templates API
+- Site Editor: Sort post types alphabetically within the `Add Template` modal. ([70562](https://github.com/WordPress/gutenberg/pull/70562))
+
+
+### Bug Fixes
+
+- iAPI Router: Preserve media attribute on intial style sheets after client-side navigation (#70668)
+- wp-env: Fix Docker build errors with Debian Buster repositories (#70718)
+- Block Editor: Avoid unbound requests in inserter selectors (#66817)
+#### Block Library
+- Cover: Fixed resetAll to return image resolution to default value. ([70608](https://github.com/WordPress/gutenberg/pull/70608))
+- Featured Image: Fixed resetAll to return image resolution to default value. ([70514](https://github.com/WordPress/gutenberg/pull/70514))
+- Fix submenu border visibility in Navigation block. ([70520](https://github.com/WordPress/gutenberg/pull/70520))
+- Image Block: Preserve line breaks in media caption. ([70476](https://github.com/WordPress/gutenberg/pull/70476))
+- RSS Block: Decode HTML entities in feed titles before display. ([70491](https://github.com/WordPress/gutenberg/pull/70491))
+
+#### Icons
+- Fix plusCircleFilled size. ([70650](https://github.com/WordPress/gutenberg/pull/70650))
+
+#### DataViews
+- Correct padding for empty-state elements when <DataViews> is in a <Card>. ([70638](https://github.com/WordPress/gutenberg/pull/70638))
+
+#### Components
+- Remove the extra font-size override for the select control on medium layouts. ([70619](https://github.com/WordPress/gutenberg/pull/70619))
+
+#### Style Book
+- Enable support for showing individual block variations. ([70448](https://github.com/WordPress/gutenberg/pull/70448))
+
+
+### Accessibility
+
+#### Components
+- `FormTokenField`: Fix focus lost on tab when `__experimentalExpandOnFocus` is set. ([70591](https://github.com/WordPress/gutenberg/pull/70591))
+
+
+### Performance
+
+- usePostActions: Avoid fetching all templates (unbound request). ([70535](https://github.com/WordPress/gutenberg/pull/70535))
+
+#### Block Library
+- Post Author: Optimize and improve user control queries. ([70510](https://github.com/WordPress/gutenberg/pull/70510))
+
+
+### Documentation
+
+- Add `isPostAutosavingLocked` example to doc block. ([70640](https://github.com/WordPress/gutenberg/pull/70640))
+- Docs: Update Locking interface example image. ([70590](https://github.com/WordPress/gutenberg/pull/70590))
+- Media Upload: Correct wrapper reference in docstring. ([70651](https://github.com/WordPress/gutenberg/pull/70651))
+- RawHTML: Clarify the wrapper 'div' element behavior. ([70527](https://github.com/WordPress/gutenberg/pull/70527))
+- ServerSideRender: Remove the 'POST' method shim example. ([70577](https://github.com/WordPress/gutenberg/pull/70577))
+- Update nested-blocks-inner-blocks.md. ([70587](https://github.com/WordPress/gutenberg/pull/70587))
+- Updated support for MS Word Images. ([70564](https://github.com/WordPress/gutenberg/pull/70564))
+
+
+### Code Quality
+
+- I18n: Use more descriptive type arguments in i18n package. ([70606](https://github.com/WordPress/gutenberg/pull/70606))
+- ServerSideRender: Remove unnecessary props for default loading placeholder. ([70576](https://github.com/WordPress/gutenberg/pull/70576))
+- ServerSideRender: Use data hooks instead of HoC. ([70529](https://github.com/WordPress/gutenberg/pull/70529))
+
+#### Block Editor
+- Background panel: Remove unused props. ([70573](https://github.com/WordPress/gutenberg/pull/70573))
+- Background panel: Remove unused style. ([70556](https://github.com/WordPress/gutenberg/pull/70556))
+
+#### Block Library
+- List Block: Remove unused __unstableMultilineWrapperTags field from block.json. ([70209](https://github.com/WordPress/gutenberg/pull/70209))
+
+#### Components
+- Fix Floating UI packages dependencies. ([70553](https://github.com/WordPress/gutenberg/pull/70553))
+
+
+### Tools
+
+#### Testing
+- CodeVitals: Use a different SHA for the base branch. ([70565](https://github.com/WordPress/gutenberg/pull/70565))
+- Fix unit test for flaky filterSortAndPaginate function. ([70582](https://github.com/WordPress/gutenberg/pull/70582))
+- e2e: Re-enable skipped end-to-end tests related to the settings REST API. ([70551](https://github.com/WordPress/gutenberg/pull/70551))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @Adi-ty: e2e: Re-enable skipped end-to-end tests related to the settings REST API. ([70551](https://github.com/WordPress/gutenberg/pull/70551))
+- @chihsuan: Components: Add `DateCalendar` and `DateRangeCalendar` components. ([70578](https://github.com/WordPress/gutenberg/pull/70578))
+- @coderGtm:  ([70482](https://github.com/WordPress/gutenberg/pull/70482))
+- @mecskyverse: Updated support for MS Word Images. ([70564](https://github.com/WordPress/gutenberg/pull/70564))
+- @R1shabh-Gupta: Fix submenu border visibility in Navigation block. ([70520](https://github.com/WordPress/gutenberg/pull/70520))
+- @USERSATOSHI: ESLint: Enforce stricter translator comment placeholder matching. ([70458](https://github.com/WordPress/gutenberg/pull/70458))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@Adi-ty @arthur791004 @BugReportOnWeb @chihsuan @coderGtm @DAreRodz @ellatrix @himanshupathak95 @Infinite-Null @jameskoster @jasmussen @Lovor01 @Mamaduka @mecskyverse @p-jackson @R1shabh-Gupta @sejas @shimotmk @sirreal @Sukhendu2002 @swissspidy @t-hamano @USERSATOSHI @yogeshbhutkar @youknowriad
+
+
+
+
+= 21.1.1 =
+
+
+## Changelog
+
+### Bug Fixes
+
+#### Media
+- Media library modal: Fix plugin incompatibilities with MediaUpload filter. ([70648](https://github.com/WordPress/gutenberg/pull/70648))
+
+
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@talldan
+
+
+= 21.1.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Author Block: Refactor Settings panel to use Toolspanel. ([67965](https://github.com/WordPress/gutenberg/pull/67965))
+- Avatar: Refactor settings panel to use ToolsPanel. ([67952](https://github.com/WordPress/gutenberg/pull/67952))
+- Comments Pagination: Remove unwanted bottom margin from links. ([70360](https://github.com/WordPress/gutenberg/pull/70360))
+- Navigation Block: Flip submenu indicator icon on submenu expansion. ([70307](https://github.com/WordPress/gutenberg/pull/70307))
+- Navigation Block: Rotate submenu indicator icons on submenu expansion. ([70442](https://github.com/WordPress/gutenberg/pull/70442))
+- Navigation Link: Add `dropdownMenuProps` and a `resetAll` function. ([70505](https://github.com/WordPress/gutenberg/pull/70505))
+- Post Navigation Link: Refactor settings panel to use ToolsPanel. ([70276](https://github.com/WordPress/gutenberg/pull/70276))
+- Refactor Site Logo "Settings" Panel to Use ToolsPanel. ([67972](https://github.com/WordPress/gutenberg/pull/67972))
+- [ Experimental Form ]: Add example block previews. ([70436](https://github.com/WordPress/gutenberg/pull/70436))
+
+#### Interactivity API
+- iAPI Router: Add support for new router regions with `attachTo`. ([70421](https://github.com/WordPress/gutenberg/pull/70421))
+- iAPI Router: Support new styles and script modules on client-side navigation. ([70353](https://github.com/WordPress/gutenberg/pull/70353))
+- iAPI: Export `NavigateOptions` and `PrefetchOptions` types. ([70315](https://github.com/WordPress/gutenberg/pull/70315))
+- iAPI: Introduce `AsyncAction` and `TypeYield` type helpers. ([70422](https://github.com/WordPress/gutenberg/pull/70422))
+
+#### Extensibility
+- Social: Allow custom link icons using block variations. ([70261](https://github.com/WordPress/gutenberg/pull/70261))
+
+
+### Bug Fixes
+
+- Core data: getHomePage: Do not return object until resolved. ([70345](https://github.com/WordPress/gutenberg/pull/70345))
+
+#### Block Library
+- Fix : Calendar block: Colors do not change between global styles and `theme.json`. ([70184](https://github.com/WordPress/gutenberg/pull/70184))
+- Form Block: Apply class names correctly in the block editor. ([70394](https://github.com/WordPress/gutenberg/pull/70394))
+- FormFileUpload: Extend audio accept MIME types for iOS compatibility. ([70354](https://github.com/WordPress/gutenberg/pull/70354))
+- Image: Fix outdated accessibility hint on native component. ([70346](https://github.com/WordPress/gutenberg/pull/70346))
+- Image: Fixed resetAll to return image resolution to default value. ([70398](https://github.com/WordPress/gutenberg/pull/70398))
+- Revert "Flip submenu indicator icon on submenu expansion (#70307)". ([70427](https://github.com/WordPress/gutenberg/pull/70427))
+- Social Links: Allow icon size to be reset and honor theme.json styles. ([70380](https://github.com/WordPress/gutenberg/pull/70380))
+- Video Block: Guard against duplicate tracks. ([70295](https://github.com/WordPress/gutenberg/pull/70295))
+
+#### Interactivity API
+- Fix image lightbox issues in new full client-side navigation logic. ([70416](https://github.com/WordPress/gutenberg/pull/70416))
+- iAPI Router: Fix dynamic imports on new visited pages. ([70489](https://github.com/WordPress/gutenberg/pull/70489))
+- iAPI: Fix captured errors in `withScope` generators. ([70303](https://github.com/WordPress/gutenberg/pull/70303))
+- iAPI: Fix duplicated nested regions. ([70302](https://github.com/WordPress/gutenberg/pull/70302))
+- iAPI: Fix parsing of comments without siblings. ([70304](https://github.com/WordPress/gutenberg/pull/70304))
+
+#### Global Styles
+- Fix: Global styles affect all form elements ( Form Block ). ([70392](https://github.com/WordPress/gutenberg/pull/70392))
+- Implement uniform header layout. ([70464](https://github.com/WordPress/gutenberg/pull/70464))
+
+#### DataViews
+- Data forms: Achieve vertical spacing with vertical spacing rather than cell padding. ([70435](https://github.com/WordPress/gutenberg/pull/70435))
+
+#### Post Editor
+- Fix: Update post-publish panel to use taxonomy label instead of hardcoded "Tags". ([70410](https://github.com/WordPress/gutenberg/pull/70410))
+
+#### Media
+- Invalidate entities when new media is uploaded. ([70405](https://github.com/WordPress/gutenberg/pull/70405))
+
+#### Plugin
+- Fix: Incorrect style handle in RTL style registration for wp-list-reusable-blocks. ([70402](https://github.com/WordPress/gutenberg/pull/70402))
+
+#### Data Layer
+- Add private selector support to resolveSelect and suspendSelect. ([52036](https://github.com/WordPress/gutenberg/pull/52036))
+
+
+### Accessibility
+
+#### Templates API
+- Templates: Add back button & fix focus loss when navigating through template creation flow. ([70091](https://github.com/WordPress/gutenberg/pull/70091))
+
+
+### Performance
+
+#### Block Library
+- Avatar: Optimize user control query. ([70511](https://github.com/WordPress/gutenberg/pull/70511))
+
+
+### Documentation
+
+- Add `isPostSavingLocked ` example to doc block. ([70370](https://github.com/WordPress/gutenberg/pull/70370))
+- Commands: Add stylesheet requirements to README. ([70323](https://github.com/WordPress/gutenberg/pull/70323))
+- Create Block: Add documentation for custom block namespace. ([70215](https://github.com/WordPress/gutenberg/pull/70215))
+- Docs: Fix broken links on Developer.WordPress.org. ([70473](https://github.com/WordPress/gutenberg/pull/70473))
+- Fix some typos. ([70419](https://github.com/WordPress/gutenberg/pull/70419))
+- Fix typo folder-structure.md. ([70375](https://github.com/WordPress/gutenberg/pull/70375))
+- block-attributes: Add `role` attribute explanation. ([70361](https://github.com/WordPress/gutenberg/pull/70361))
+
+
+### Code Quality
+
+- Patterns: Delete unused property. ([70321](https://github.com/WordPress/gutenberg/pull/70321))
+- TypeScript: Converts HtmlEntities Package to TS. ([69326](https://github.com/WordPress/gutenberg/pull/69326))
+- TypeScript: Migrate deprecated package to TS. ([70362](https://github.com/WordPress/gutenberg/pull/70362))
+- TypeScript: Migrate is-shallow-equal package to TS. ([70407](https://github.com/WordPress/gutenberg/pull/70407))
+- iAPI: Fix the changelog to include PR 70296 in 6.25. ([70309](https://github.com/WordPress/gutenberg/pull/70309))
+
+#### Block Editor
+- Media List: Use 'placement' prop for popover positioning. ([70350](https://github.com/WordPress/gutenberg/pull/70350))
+- Refactor: `URLInputButton` component to functional react component. ([70384](https://github.com/WordPress/gutenberg/pull/70384))
+- Warning: Replace popoverProps.position to popoverProps.placement. ([70347](https://github.com/WordPress/gutenberg/pull/70347))
+
+#### Components
+- Circular Option Picker: Use 'placement' prop for popover positioning. ([70359](https://github.com/WordPress/gutenberg/pull/70359))
+- FormFileUpload: Remove temporary fix for selecting .heic file in Chromium browsers. ([70383](https://github.com/WordPress/gutenberg/pull/70383))
+
+#### Post Editor
+- PostAuthorCombobox: Simplify 'onFilterValueChange' debounced callback. ([70512](https://github.com/WordPress/gutenberg/pull/70512))
+
+#### Interactivity API
+- iAPI: Minor fixes to the Interactivity and Interactivity Router comments. ([70420](https://github.com/WordPress/gutenberg/pull/70420))
+
+#### Block Library
+- Social Link: Use `placement` prop for popover positioning. ([70348](https://github.com/WordPress/gutenberg/pull/70348))
+
+
+### Tools
+
+#### Testing
+- Test: Improve document settings sidebar locator. ([70331](https://github.com/WordPress/gutenberg/pull/70331))
+- Ensure the actual tests environment is used for end-to-end tests. ([70280](https://github.com/WordPress/gutenberg/pull/70280))
+- Skip falling end-to-end tests. ([70460](https://github.com/WordPress/gutenberg/pull/70460))
+- end-to-end Tests: Add test case for `Link` color support. ([69141](https://github.com/WordPress/gutenberg/pull/69141))
+- end-to-end Tests: Minor code quality improvement in some tests. ([70382](https://github.com/WordPress/gutenberg/pull/70382))
+
+
+### Various
+
+#### Block Library
+- Remove screencast.com embed block variation. ([70480](https://github.com/WordPress/gutenberg/pull/70480))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @alejandrogonzalvo: test: Improve document settings sidebar locator. ([70331](https://github.com/WordPress/gutenberg/pull/70331))
+- @BugReportOnWeb: FormFileUpload: Extend audio accept MIME types for iOS compatibility. ([70354](https://github.com/WordPress/gutenberg/pull/70354))
+- @iamsandeepdahiya: Fix: Incorrect style handle in RTL style registration for wp-list-reusable-blocks. ([70402](https://github.com/WordPress/gutenberg/pull/70402))
+- @kushagra-goyal-14: TypeScript: Migrate is-shallow-equal package to TS. ([70407](https://github.com/WordPress/gutenberg/pull/70407))
+- @NidhiDhandhukiya74: Refactor Site Logo "Settings" Panel to Use ToolsPanel. ([67972](https://github.com/WordPress/gutenberg/pull/67972))
+- @shrivastavanolo: Navigation Block: Flip submenu indicator icon on submenu expansion. ([70307](https://github.com/WordPress/gutenberg/pull/70307))
+- @USERSATOSHI: TypeScript: Migrate deprecated package to TS. ([70362](https://github.com/WordPress/gutenberg/pull/70362))
+- @yashjawale: Image: Fix outdated accessibility hint on native component. ([70346](https://github.com/WordPress/gutenberg/pull/70346))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@alejandrogonzalvo @BugReportOnWeb @DAreRodz @dd32 @ellatrix @himanshupathak95 @iamsandeepdahiya @im3dabasia @Infinite-Null @jsnajdr @karthikeya-io @kushagra-goyal-14 @Maikuolan @Mamaduka @Mayank-Tripathi32 @NidhiDhandhukiya74 @peterwilsoncc @ramonjd @Rishit30G @SainathPoojary @SantosGuillamot @shimotmk @shrivastavanolo @t-hamano @talldan @USERSATOSHI @vk17-starlord @Vrishabhsk @westonruter @yashjawale @yogeshbhutkar
+
+
+
+
+= 21.0.0 =
+
+## Changelog
+
+### Enhancements
+
+#### Block Library
+- Button Block: Add HTML Element selection in Advanced settings. ([70139](https://github.com/WordPress/gutenberg/pull/70139))
+- Comment Date: Convert Comment Date block settings to ToolsPanel. ([70248](https://github.com/WordPress/gutenberg/pull/70248))
+- Comment Author Name Block: Refactor setting panel to use ToolsPanel. ([69407](https://github.com/WordPress/gutenberg/pull/69407))
+- Comment Edit Link: Refactor settings panel to use ToolsPanel. ([70247](https://github.com/WordPress/gutenberg/pull/70247))
+- Comment Title: Refactor settings panel to use ToolsPanel. ([70246](https://github.com/WordPress/gutenberg/pull/70246))
+- Comments Pagination Block: Refactor settings panel to use ToolsPanel. ([70245](https://github.com/WordPress/gutenberg/pull/70245))
+- Embed Block: Refactor setting panel to use ToolsPanel. ([69636](https://github.com/WordPress/gutenberg/pull/69636))
+- File Block: Refactor setting panel to use ToolsPanel. ([70189](https://github.com/WordPress/gutenberg/pull/70189))
+- Form Input: Convert Form Input block settings to ToolsPanel. ([70249](https://github.com/WordPress/gutenberg/pull/70249))
+- Form: Convert Form block settings to ToolsPanel. ([70253](https://github.com/WordPress/gutenberg/pull/70253))
+- Latest posts: Change panel body to tools panel. ([70200](https://github.com/WordPress/gutenberg/pull/70200))
+- List Block: Refactor setting panel to use ToolsPanel. ([69387](https://github.com/WordPress/gutenberg/pull/69387))
+- Navigation Link, Navigation Submenu: Hide title UI controls while keeping attribute support. ([70234](https://github.com/WordPress/gutenberg/pull/70234))
+- Navigation: Refactor display panel to use ToolsPanel. ([68011](https://github.com/WordPress/gutenberg/pull/68011))
+- Post Title: Refactor settings panel to use ToolsPanel. ([70229](https://github.com/WordPress/gutenberg/pull/70229))
+- RSS: Refactor setting panel to use `ToolsPanel`. ([70213](https://github.com/WordPress/gutenberg/pull/70213))
+- Separator: Change html element option visibility. ([70185](https://github.com/WordPress/gutenberg/pull/70185))
+- Shortcode: Add role attribute to content in `block.json`. ([70164](https://github.com/WordPress/gutenberg/pull/70164))
+- Video: Add option to set a track as default. ([70227](https://github.com/WordPress/gutenberg/pull/70227))
+
+#### Components
+- ComboboxControl: Handle Unicode characters when matching values. ([70180](https://github.com/WordPress/gutenberg/pull/70180))
+- DropZone: Allow overriding the default icon. ([70236](https://github.com/WordPress/gutenberg/pull/70236))
+
+#### Block Transforms
+- Adds transforms functionality to Post comments link and post comments number. ([70287](https://github.com/WordPress/gutenberg/pull/70287))
+
+
+### Bug Fixes
+
+#### Block Library
+- Button: Avoid empty block control slot. ([70191](https://github.com/WordPress/gutenberg/pull/70191))
+- Fix: Click-through blur effect when gallery images have a caption. ([69067](https://github.com/WordPress/gutenberg/pull/69067))
+- Pullquote block: Cannot override cite element style via theme.json. ([70260](https://github.com/WordPress/gutenberg/pull/70260))
+- Social Link: Localize social service names for translations. ([70199](https://github.com/WordPress/gutenberg/pull/70199))
+- Social: Moves size settings to inspector controls. ([70186](https://github.com/WordPress/gutenberg/pull/70186))
+
+#### Components
+- Ensure SVG Images Without a Width Attribute Are Displayed Correctly in FocalPointPicker. ([70061](https://github.com/WordPress/gutenberg/pull/70061))
+- FormTokenField: Fix filtering with full-width string. ([70232](https://github.com/WordPress/gutenberg/pull/70232))
+
+#### Interactivity API
+- iAPI: Make storePart argument optional in overloads. ([70296](https://github.com/WordPress/gutenberg/pull/70296))
+
+#### Post Editor
+- Editor: Better normalize strings for hierarchical term filtering. ([70178](https://github.com/WordPress/gutenberg/pull/70178))
+
+#### Block Editor
+- Flex Layout: Fix incorrect default alignment values for `Vertical Alignment Control` component. ([68866](https://github.com/WordPress/gutenberg/pull/68866))
+
+### Accessibility
+
+#### Block Library
+- Button: Avoid focus loss when unlinking using keyboard. ([70192](https://github.com/WordPress/gutenberg/pull/70192))
+- Columns block: Don't use ToolsPanelItem for Columns setting. ([70210](https://github.com/WordPress/gutenberg/pull/70210))
+- Details Block: Fix keyboard accessibility issues and allow list view selection to show up inner blocks. ([70056](https://github.com/WordPress/gutenberg/pull/70056))
+
+#### Components
+- Toolbar: Adjust colors for dark mode support. ([69278](https://github.com/WordPress/gutenberg/pull/69278))
+
+### Experiments
+
+#### Interactivity API
+- iAPI: Remove the full-page client-side navigation experiment. ([70228](https://github.com/WordPress/gutenberg/pull/70228))
+
+### Documentation
+
+- Docs: Added the missing ALT attribute to all images. ([70225](https://github.com/WordPress/gutenberg/pull/70225))
+- Docs: Remove misleading section from curating the editor experience. ([70262](https://github.com/WordPress/gutenberg/pull/70262))
+- Fix parameter hint for `canInsertBlocks`. ([70305](https://github.com/WordPress/gutenberg/pull/70305))
+- Fix: Render_block_core_site_title function doc has missing return type. ([70269](https://github.com/WordPress/gutenberg/pull/70269))
+- Improve default ALT attribute value for images in documentation. ([70226](https://github.com/WordPress/gutenberg/pull/70226))
+- JSON schema: Clean reference URLs. ([70274](https://github.com/WordPress/gutenberg/pull/70274))
+- Removed Empty line and corrected typo in inline document. ([70203](https://github.com/WordPress/gutenberg/pull/70203))
+- Replace “sidebar” with “panel” in tutorial.md. ([70257](https://github.com/WordPress/gutenberg/pull/70257))
+- Small grammar fix in glossary.md. ([70292](https://github.com/WordPress/gutenberg/pull/70292))
+- The wp_admin_notice() function should be called instead of custom HTML for admin notice in docs/how-to-guides/notices/README.md. ([70231](https://github.com/WordPress/gutenberg/pull/70231))
+- Updated small typo in inline documentation. ([70187](https://github.com/WordPress/gutenberg/pull/70187))
+- `useDropZone`: Refactor documentation to use the correct function syntax. ([70286](https://github.com/WordPress/gutenberg/pull/70286))
+- `block.json` schema: Add role field. ([70272](https://github.com/WordPress/gutenberg/pull/70272))
+
+
+### Code Quality
+
+#### Block Editor
+- Clarify 'clientId' prop use for 'HTMLElementControl'. ([70258](https://github.com/WordPress/gutenberg/pull/70258))
+- ImageSizeControl: Use margin-free style. ([70202](https://github.com/WordPress/gutenberg/pull/70202))
+
+#### Components
+- Remove forced focus of `InputControl` on mousedown. ([41118](https://github.com/WordPress/gutenberg/pull/41118))
+- SuggestionsList: Remove unused code. ([70195](https://github.com/WordPress/gutenberg/pull/70195))
+
+#### Block Library
+- Video: Use a unique 'key' in the 'TrackList' component. ([70263](https://github.com/WordPress/gutenberg/pull/70263))
+
+### Tools
+
+#### Testing
+- Cover Block: Add `E2E` Test for `FocalPointPicker`. ([69077](https://github.com/WordPress/gutenberg/pull/69077))
+- E2E: Add general end-to-end tests for `templateLock` functionality. ([70160](https://github.com/WordPress/gutenberg/pull/70160))
+- Fix end-to-end test for block API / filtered blocks. ([51882](https://github.com/WordPress/gutenberg/pull/51882))
+- Format `.github` workflows `.yml` file. ([70219](https://github.com/WordPress/gutenberg/pull/70219))
+- Account for tests env port being overridden from 8889 in PHP unit tests. ([70267](https://github.com/WordPress/gutenberg/pull/70267))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @catgofire: Small grammar fix in glossary.md. ([70292](https://github.com/WordPress/gutenberg/pull/70292))
+- @Mukulsingh27: Pullquote block: Cannot override cite element style via theme.json. ([70260](https://github.com/WordPress/gutenberg/pull/70260))
+- @nani-samireddy: Comments Pagination Block: Refactor settings panel to use ToolsPanel. ([70245](https://github.com/WordPress/gutenberg/pull/70245))
+- @OpuRockey: Fix: Render_block_core_site_title function doc has missing return type. ([70269](https://github.com/WordPress/gutenberg/pull/70269))
+- @ravigadhiya007: Docs: Added the missing ALT attribute to all images. ([70225](https://github.com/WordPress/gutenberg/pull/70225))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aurooba @catgofire @DAreRodz @dhruvikpatel18 @himanshupathak95 @im3dabasia @Infinite-Null @Mamaduka @Mayank-Tripathi32 @Mukulsingh27 @nani-samireddy @OpuRockey @pmbaldha @ravigadhiya007 @Rishit30G @SainathPoojary @shail-mehta @shimotmk @stokesman @t-hamano @troychaplin @vipul0425 @vk17-starlord @westonruter @yogeshbhutkar
+
+
+= 20.9.0 =
+
+
+## Changelog
+
+### Enhancements
+
+- Base Styles: Update to modern Sass module system. ([70135](https://github.com/WordPress/gutenberg/pull/70135))
+- Post Publish Panel: Open view post links in a new tab. ([70127](https://github.com/WordPress/gutenberg/pull/70127))
+- Revert Admin bar: Update the Edit Site link. ([69974](https://github.com/WordPress/gutenberg/pull/69974))
+
+#### Block Library
+- Custom HTML: Add role attribute to content in `block.json`. ([70154](https://github.com/WordPress/gutenberg/pull/70154))
+- HTML Block: Remove space below textarea. ([70055](https://github.com/WordPress/gutenberg/pull/70055))
+- Post Navigation Link: Reverse order of variations. ([70149](https://github.com/WordPress/gutenberg/pull/70149))
+- RSS: Add role attribute to content in `block.json`. ([70166](https://github.com/WordPress/gutenberg/pull/70166))
+- Search Block: Move search setting to inspector. ([70144](https://github.com/WordPress/gutenberg/pull/70144))
+
+#### Write mode
+- Details block: Add role attribute to summary. ([70124](https://github.com/WordPress/gutenberg/pull/70124))
+- Enable Code block content editing in contentOnly. ([70111](https://github.com/WordPress/gutenberg/pull/70111))
+- Enable More block's "Read more" text editing in contentOnly mode. ([70100](https://github.com/WordPress/gutenberg/pull/70100))
+- Post blocks: Enhance contentOnly editing experience. ([70148](https://github.com/WordPress/gutenberg/pull/70148))
+- Table Block: Enhance contentOnly Editing Experience. ([70114](https://github.com/WordPress/gutenberg/pull/70114))
+
+#### Components
+- ColorPicker: Add a visual cue when the value is copied. ([70083](https://github.com/WordPress/gutenberg/pull/70083))
+- Snackbar: Add support to open links in new tab. ([69905](https://github.com/WordPress/gutenberg/pull/69905))
+
+#### Block Transforms
+- Block Library: Add missing transforms between Verse and Preformatted blocks. ([70101](https://github.com/WordPress/gutenberg/pull/70101))
+
+#### Global Styles
+- Remove "global" from styles variation in schema descriptions. ([70089](https://github.com/WordPress/gutenberg/pull/70089))
+
+#### Site Editor
+- Move `Styles` to top of sidebar navigation. ([68582](https://github.com/WordPress/gutenberg/pull/68582))
+
+
+### Bug Fixes
+
+- DOM: Add summary element to focusable elements. ([70051](https://github.com/WordPress/gutenberg/pull/70051))
+- Site Editor: Fix PHP warnings in `gutenberg_get_site_editor_redirection`. ([70062](https://github.com/WordPress/gutenberg/pull/70062))
+- URL: Handle HTML entities and ampersand in 'cleanForSlug'. ([70078](https://github.com/WordPress/gutenberg/pull/70078))
+- Workflows: Persist git credentials when publishing packages via Lerna. ([70058](https://github.com/WordPress/gutenberg/pull/70058))
+
+#### Block Library
+- Button: Limit scope of width style for link. ([70054](https://github.com/WordPress/gutenberg/pull/70054))
+- Image: Provide 'defaultValue' for 'ResolutionTool' component. ([70122](https://github.com/WordPress/gutenberg/pull/70122))
+- Post Template: Don't rely on the default 'ignore_sticky' REST API value. ([70020](https://github.com/WordPress/gutenberg/pull/70020))
+
+#### Components
+- Fix Styling for `TextControl`and `TextAreaControl` in dark themes. ([69640](https://github.com/WordPress/gutenberg/pull/69640))
+- Fix `URLPopover` input handling to properly update value. ([70156](https://github.com/WordPress/gutenberg/pull/70156))
+
+#### Post Editor
+- Editor: Honor rich/code editor settings when deriving the editor mode. ([70080](https://github.com/WordPress/gutenberg/pull/70080))
+- Hide "Create template part" menu from block settings dropdown for classic themes. ([65568](https://github.com/WordPress/gutenberg/pull/65568))
+
+#### Block Editor
+- MediaPlaceholder: Fix potential error in 'handleBlocksDrop'. ([70090](https://github.com/WordPress/gutenberg/pull/70090))
+
+
+### Accessibility
+
+- Editor: Add label in`TextareaControl` in CollabSidebar. ([70133](https://github.com/WordPress/gutenberg/pull/70133))
+
+#### Global Styles
+- Background Image Panel: Fix focus loss. ([69813](https://github.com/WordPress/gutenberg/pull/69813))
+- Move `Randomize colors` button to Edit Palette panel. ([70128](https://github.com/WordPress/gutenberg/pull/70128))
+
+
+### Documentation
+
+- Add example doc comment. ([70116](https://github.com/WordPress/gutenberg/pull/70116))
+- Docs: Clarify versions in WordPress page title. ([70112](https://github.com/WordPress/gutenberg/pull/70112))
+- Docs: Fix PEG.js link. ([70082](https://github.com/WordPress/gutenberg/pull/70082))
+- Docs: Interactivity API Block removed. ([69513](https://github.com/WordPress/gutenberg/pull/69513))
+- Modify the spinner example code. ([70084](https://github.com/WordPress/gutenberg/pull/70084))
+- Popover: Update Popover component documentation. ([70106](https://github.com/WordPress/gutenberg/pull/70106))
+- RichText Readme - Fix 404 URL To Mozilla documentation. ([70171](https://github.com/WordPress/gutenberg/pull/70171))
+- Updated backticks to quotes. ([70070](https://github.com/WordPress/gutenberg/pull/70070))
+
+
+### Code Quality
+
+- ServerSideRender: Colocate delayed spinner logic. ([70147](https://github.com/WordPress/gutenberg/pull/70147))
+- Stylelint: Customise warning for `CSS` variables used outside `components` package. ([70108](https://github.com/WordPress/gutenberg/pull/70108))
+- Stylelint: Customise warning message for `flex-direction` warning. ([70057](https://github.com/WordPress/gutenberg/pull/70057))
+
+#### Block Library
+- Blocks: Remove TODO for post comment block conversion. ([70110](https://github.com/WordPress/gutenberg/pull/70110))
+
+#### Components
+- `withIgnoreIMEEvents`: Update documentation for clarity. ([70098](https://github.com/WordPress/gutenberg/pull/70098))
+
+#### Font Library
+- Fix missing trailing period in user message. ([70132](https://github.com/WordPress/gutenberg/pull/70132))
+
+
+### Tools
+
+#### Build Tooling
+- Workflows: Add option for publishing the latest npm packages. ([70079](https://github.com/WordPress/gutenberg/pull/70079))
+
+#### Testing
+- end-to-end Tests: Add test suite for columns block template lock. ([69089](https://github.com/WordPress/gutenberg/pull/69089))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @jasalt: Docs: Fix PEG.js link. ([70082](https://github.com/WordPress/gutenberg/pull/70082))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@carolinan @himanshupathak95 @igorradovanov @im3dabasia @Infinite-Null @jasalt @karthikeya-io @Mamaduka @Mayank-Tripathi32 @peterwilsoncc @SainathPoojary @shimotmk @SirLouen @StevenDufresne @Sukhendu2002 @t-hamano @unscripted @yogeshbhutkar
+
+
+
+
+= 20.8.0 =
+
+## Changelog
+
+### Enhancements
+
+- Create Block: Add `--textdomain` flag to create block tool. ([69802](https://github.com/WordPress/gutenberg/pull/69802))
+
+#### Components
+- Guide: Make `next` and `previous` button text customizable. ([69907](https://github.com/WordPress/gutenberg/pull/69907))
+- Popover: Add virtual padding to prevent it from hitting the viewport edge. ([69555](https://github.com/WordPress/gutenberg/pull/69555))
+
+#### Document Settings
+- Editor: Add search functionality to template swapping modal. ([69667](https://github.com/WordPress/gutenberg/pull/69667))
+
+#### Block Editor
+- Widget Editor: Don't close the inserter when focusing outside it. ([67838](https://github.com/WordPress/gutenberg/pull/67838))
+
+#### Editor
+- Use split view for meta boxes only when canvas is iframed and “Desktop” view. ([69958](https://github.com/WordPress/gutenberg/pull/69958))
+
+
+### New APIs
+
+#### Widgets Editor
+- Edit Widgets: Save lock control via actions. ([69984](https://github.com/WordPress/gutenberg/pull/69984))
+
+
+### Bug Fixes
+
+- GitHub Actions: Fix components changelog CI check. ([70034](https://github.com/WordPress/gutenberg/pull/70034))
+- Persist git credentials when publishing via lerna. ([70007](https://github.com/WordPress/gutenberg/pull/70007))
+- Plugin: Fix deprecation for 'apply_block_hooks_to_content_from_post_object'. ([69909](https://github.com/WordPress/gutenberg/pull/69909))
+- ServerSideRender: Don't render the previous error response in loading state. ([69988](https://github.com/WordPress/gutenberg/pull/69988))
+- ServerSideRender: Refactor fetchData to use `useCallback` and `refs`. ([69237](https://github.com/WordPress/gutenberg/pull/69237))
+
+#### Block Library
+- Author, Author Name block: Fix PHP warning error when there is no context. ([69949](https://github.com/WordPress/gutenberg/pull/69949))
+- Block Editor: Allow editing invalid blocks as HTML. ([69902](https://github.com/WordPress/gutenberg/pull/69902))
+- Block Editor: Prevent negative width values in Spacer block when used inside a row block. ([68845](https://github.com/WordPress/gutenberg/pull/68845))
+- Calendar block: Disable edit as HTML support. ([69961](https://github.com/WordPress/gutenberg/pull/69961))
+- Image: Avoid stale URL when reselecting the same image from the library. ([69985](https://github.com/WordPress/gutenberg/pull/69985))
+- Latest Posts: Update content display labels to `Display post content` and `Content length`. ([69839](https://github.com/WordPress/gutenberg/pull/69839))
+- Navigation Link, Navigation Submenu: Fix undefined key warning. ([69951](https://github.com/WordPress/gutenberg/pull/69951))
+- fix: Update the logic of fetching current URL in loginout block. ([70031](https://github.com/WordPress/gutenberg/pull/70031))
+
+#### Block Editor
+- Block HTML: Add `box-sizing` property to prevent overflow. ([70014](https://github.com/WordPress/gutenberg/pull/70014))
+- Fix: Improve warning message and add spacing in HTMLElementControl. ([70002](https://github.com/WordPress/gutenberg/pull/70002))
+- MediaPlaceholder: Fix Regression with media URL input type to allow a local URL path. ([70043](https://github.com/WordPress/gutenberg/pull/70043))
+- Prevent block merging on blocks with the 'disabled' editing mode. ([69918](https://github.com/WordPress/gutenberg/pull/69918))
+
+#### Components
+- Don't mutate 'ALL_CSS_UNITS' default value in 'useCustomUnits'. ([70037](https://github.com/WordPress/gutenberg/pull/70037))
+- Fix double border in `ItemGroup` when last item is focused. ([70021](https://github.com/WordPress/gutenberg/pull/70021))
+- Fix: Duotone unset button. ([69981](https://github.com/WordPress/gutenberg/pull/69981))
+- ToggleGroupControl: Fix active background for empty string value. ([69969](https://github.com/WordPress/gutenberg/pull/69969))
+
+#### Site Editor
+- Check user permissions before rendering export menu item. ([69971](https://github.com/WordPress/gutenberg/pull/69971))
+
+#### Widgets Editor
+- Fix: Browser Warnings when closing keyboard shortcut modal. ([69929](https://github.com/WordPress/gutenberg/pull/69929))
+
+#### Block API
+- Fix: Missing conversion from json styled variable to CSS variable. ([69551](https://github.com/WordPress/gutenberg/pull/69551))
+
+#### Typography
+- Fix: Prevent `FontSizePicker` crash when no font size exists. ([68733](https://github.com/WordPress/gutenberg/pull/68733))
+
+#### Icons
+- Remove width / height attributes from svg element. ([43747](https://github.com/WordPress/gutenberg/pull/43747))
+
+
+### Accessibility
+
+- Keyboard Shortcuts: Revert delete shortcut to `access + z`. ([69931](https://github.com/WordPress/gutenberg/pull/69931))
+
+#### Block Library
+- Add new HTMLElementControl component. ([69904](https://github.com/WordPress/gutenberg/pull/69904))
+
+
+### Performance
+
+#### Block Library
+- Latest Posts: Delay inspector control queries until the block is selected. ([69898](https://github.com/WordPress/gutenberg/pull/69898))
+- Latest Posts: Embed author in response. ([69889](https://github.com/WordPress/gutenberg/pull/69889))
+
+#### Document Settings
+- Lazy load post authors' data. ([69950](https://github.com/WordPress/gutenberg/pull/69950))
+
+
+### Documentation
+
+- Add WP version note for 'setAttributes' updater function. ([69972](https://github.com/WordPress/gutenberg/pull/69972))
+- Create Block: Add `--textdomain`  in create-block README. ([69927](https://github.com/WordPress/gutenberg/pull/69927))
+- Docs: Add post meta limitations to Block Bindings API documentation. ([68583](https://github.com/WordPress/gutenberg/pull/68583))
+- Docs: Added copy and code for style_data. ([69920](https://github.com/WordPress/gutenberg/pull/69920))
+- Fix missing `CSS` import in data basics tutorial code. ([69914](https://github.com/WordPress/gutenberg/pull/69914))
+- Fix typos. ([69957](https://github.com/WordPress/gutenberg/pull/69957))
+- Fix: Remove an unnecessary `@return` tag from this filter docblock. ([69960](https://github.com/WordPress/gutenberg/pull/69960))
+
+
+### Code Quality
+
+- ServerSideRender: Use `useLayoutEffect` to update `latestPropsRef`. ([69999](https://github.com/WordPress/gutenberg/pull/69999))
+- Stylelint: Migrate configuration from `JSON` to `JavaScript` format. ([69590](https://github.com/WordPress/gutenberg/pull/69590))
+- theme.json: Unify property order. ([70033](https://github.com/WordPress/gutenberg/pull/70033))
+
+#### Themes
+- Simplify color specifications from `rgba` to `rgb`. ([70008](https://github.com/WordPress/gutenberg/pull/70008))
+
+#### Block Editor
+- Simplify condition selectors for 'useHasBlockToolbar'. ([69930](https://github.com/WordPress/gutenberg/pull/69930))
+
+#### Block Library
+- Latest Posts: Only fetch necessary fields for categories. ([69888](https://github.com/WordPress/gutenberg/pull/69888))
+
+#### Components
+- ColorPicker: Add tests for `ColorPicker` Alpha slider. ([69203](https://github.com/WordPress/gutenberg/pull/69203))
+
+
+### Tools
+
+#### Testing
+- Automated Testing: Skip storybook smoke test. ([69943](https://github.com/WordPress/gutenberg/pull/69943))
+- List View: Add end-to-end test to verify pasting block styles via keyboard. ([69979](https://github.com/WordPress/gutenberg/pull/69979))
+- Try: Fix 'wp-polyfill' script dependents unit test. ([69912](https://github.com/WordPress/gutenberg/pull/69912))
+- Workflows: Try different SHA. ([70048](https://github.com/WordPress/gutenberg/pull/70048))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @jrmd: Block Editor: Prevent block merging on blocks with the 'disabled' editing mode. ([69918](https://github.com/WordPress/gutenberg/pull/69918))
+- @Maikuolan: Navigation Link, Navigation Submenu: Fix undefined key warning. ([69951](https://github.com/WordPress/gutenberg/pull/69951))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@bph @Debarghya-Banerjee @georgestephanis @himanshupathak95 @im3dabasia @Infinite-Null @johnbillion @jrmd @karthikeya-io @Maikuolan @Mamaduka @Mayank-Tripathi32 @Rishit30G @SH4LIN @shimotmk @stokesman @Sukhendu2002 @t-hamano @yogeshbhutkar
+
+
+
+
+= 20.7.0 =
+
+## Changelog
+
+### Enhancements
+
+- Format Library: Add a feature to set the alpha value to Highlight. ([67525](https://github.com/WordPress/gutenberg/pull/67525))
+- Playwright end-to-end utils: Add new `emulateNetworkConditions` helper. ([69865](https://github.com/WordPress/gutenberg/pull/69865))
+
+#### Block Library
+- Details: Enable all non-interactive formats. ([68741](https://github.com/WordPress/gutenberg/pull/68741))
+- Heading: Add/correct typography examples. ([69812](https://github.com/WordPress/gutenberg/pull/69812))
+- Navigation in Site View: Automatically expand all options. ([69343](https://github.com/WordPress/gutenberg/pull/69343))
+- Remove experimental status from comments count and comment link blocks. ([69832](https://github.com/WordPress/gutenberg/pull/69832))
+- Table Block: Preserve Column Alignment when Pasting Markdown Tables. ([69322](https://github.com/WordPress/gutenberg/pull/69322))
+- Tag Cloud: Remove unnecessary full-width padding. ([69725](https://github.com/WordPress/gutenberg/pull/69725))
+
+#### Block Editor
+- Remove truncation from media tab preview tooltips. ([69741](https://github.com/WordPress/gutenberg/pull/69741))
+- Support passing updater function to 'setAttributes'. ([69709](https://github.com/WordPress/gutenberg/pull/69709))
+
+#### Media
+- Remove `@shopify/web-worker` Dependency from `packages/upload-media`. ([69816](https://github.com/WordPress/gutenberg/pull/69816))
+
+
+### Bug Fixes
+
+- DataViews: Ensure consistent display of primary ellipsis in list layout. ([69846](https://github.com/WordPress/gutenberg/pull/69846))
+- Scripts: Fix blocks manifest generation when directory name has space. ([69766](https://github.com/WordPress/gutenberg/pull/69766))
+
+#### Block Library
+- Enhance Featured Image Block: Don't include interactive elements within an element. ([69730](https://github.com/WordPress/gutenberg/pull/69730))
+- Featured Image: Don't render empty Resolution tools panel if media is not set. ([69805](https://github.com/WordPress/gutenberg/pull/69805))
+- Fix: Background wrapper for 'Button Inside' option. ([69624](https://github.com/WordPress/gutenberg/pull/69624))
+- Fix: Update the static text and make them translatable in the Blocks example. ([69859](https://github.com/WordPress/gutenberg/pull/69859))
+- Fixed Media & Text Block - Image not rendered properly on frontend when inside stack. ([68610](https://github.com/WordPress/gutenberg/pull/68610))
+- Query Loop: Don't overwrite the 'query.inherit' attribute value. ([69698](https://github.com/WordPress/gutenberg/pull/69698))
+- Query Loop: Fix 'undo trap' and improve debouncing for 'Keyword' control. ([69845](https://github.com/WordPress/gutenberg/pull/69845))
+- ToC: Fix condition for 'Limit heading levels'. ([69811](https://github.com/WordPress/gutenberg/pull/69811))
+- ToC: Fix related block attribute persistence. ([69734](https://github.com/WordPress/gutenberg/pull/69734))
+
+#### Block Editor
+- Block Tools: Prevent showing block toolbar when block interface is hidden. ([69795](https://github.com/WordPress/gutenberg/pull/69795))
+- Block drag & drop: Enable mouse click on input/textarea elements in Firefox. ([69781](https://github.com/WordPress/gutenberg/pull/69781))
+- Fix: Restore static properties on deprecated __experimentalLinkControl. ([69860](https://github.com/WordPress/gutenberg/pull/69860))
+- Fix: Space visualizer showing previous value. ([69747](https://github.com/WordPress/gutenberg/pull/69747))
+
+#### Post Editor
+- Fix: Save custom template with non-latin slug. ([69732](https://github.com/WordPress/gutenberg/pull/69732))
+- Iframe: Don't enable for block themes in core if v2 blocks exist. ([69778](https://github.com/WordPress/gutenberg/pull/69778))
+
+#### Document Settings
+- PostPublishPanel: Fix post title overflow. ([69804](https://github.com/WordPress/gutenberg/pull/69804))
+
+#### Patterns
+- Editor: Enable starter pattern modal for all post types. ([69753](https://github.com/WordPress/gutenberg/pull/69753))
+
+#### Components
+- UI Components: Add theme support for `FormTokenField` and `ComboboxControl`. ([69638](https://github.com/WordPress/gutenberg/pull/69638))
+
+
+### Accessibility
+
+- DataViews: Always show primary action for list layout if hover isn't supported. ([69876](https://github.com/WordPress/gutenberg/pull/69876))
+
+#### Block Library
+- Navigation Link, Navigation Submenu: Remove the title attribute controls. ([69689](https://github.com/WordPress/gutenberg/pull/69689))
+- Navigation block: Fix submenu Escape key behavior. ([69837](https://github.com/WordPress/gutenberg/pull/69837))
+- Social Icons: Remove custom placeholder state. ([69821](https://github.com/WordPress/gutenberg/pull/69821))
+
+#### Components
+- Button: Update hover styles to account for pressed state for `tertiary button`. ([68542](https://github.com/WordPress/gutenberg/pull/68542))
+- Global Styles: Fix incorrect usage of ItemGroup in the Background image panel. ([68631](https://github.com/WordPress/gutenberg/pull/68631))
+
+#### DataViews
+- ActionModal: Add support for customisable `focusOnMount`. ([69609](https://github.com/WordPress/gutenberg/pull/69609))
+
+
+### Documentation
+
+- Add WithCloseHandlers story. ([69688](https://github.com/WordPress/gutenberg/pull/69688))
+- Create Block: Improve support for blocks manifest and relevant Core APIs. ([69767](https://github.com/WordPress/gutenberg/pull/69767))
+- Docs: Improve document and parameters in render_block_core_* function. ([69856](https://github.com/WordPress/gutenberg/pull/69856))
+- Fix:  Incorrect Type of `wp_widget_factory` in `render_block_core_legacy_widget` Doc Block. ([69775](https://github.com/WordPress/gutenberg/pull/69775))
+- Fix: Expose TypeScript types for subcomponents. ([69619](https://github.com/WordPress/gutenberg/pull/69619))
+- Latest Posts block: Add missing @global PHP documentation. ([69763](https://github.com/WordPress/gutenberg/pull/69763))
+
+
+### Code Quality
+
+- Block Parser: Remove description for singular since tag. ([69799](https://github.com/WordPress/gutenberg/pull/69799))
+- Fix Documentation inconsistencies in `Block Parser` classes. ([69785](https://github.com/WordPress/gutenberg/pull/69785))
+- Stylelint-config: Add stylelint-scss as a peer dependency. ([69685](https://github.com/WordPress/gutenberg/pull/69685))
+
+#### Block Library
+- Query Loop: Remove unused 'Columns' control. ([69843](https://github.com/WordPress/gutenberg/pull/69843))
+- Search: `wp-block-search__inside-wrapper` classname trailing spaces. ([69405](https://github.com/WordPress/gutenberg/pull/69405))
+- Social Icons: Fix effect dependencies. ([69824](https://github.com/WordPress/gutenberg/pull/69824))
+- Social Icons: Remove unused editor style. ([69836](https://github.com/WordPress/gutenberg/pull/69836))
+
+#### Block Directory
+- Update metadata fields requested from server. ([69801](https://github.com/WordPress/gutenberg/pull/69801))
+
+#### Components
+- Update gradient-parser dependency from 0.1.5 to 1.0.2. ([69783](https://github.com/WordPress/gutenberg/pull/69783))
+
+
+### Tools
+
+#### Testing
+- Automated Testing: Add GitHub Actions workflow for Storybook smoke testing. ([69679](https://github.com/WordPress/gutenberg/pull/69679))
+- E2E: Split list view keyboard shortcuts into multiple tests. ([69231](https://github.com/WordPress/gutenberg/pull/69231))
+- Workflows: Ignore 'widgets' for manual backports. ([69792](https://github.com/WordPress/gutenberg/pull/69792))
+
+#### Build Tooling
+- Workflows: Ignore 'block-serialization-default-parser' for manual backports. ([69791](https://github.com/WordPress/gutenberg/pull/69791))
+
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @Debarghya-Banerjee: Fix:  Incorrect Type of `wp_widget_factory` in `render_block_core_legacy_widget` Doc Block. ([69775](https://github.com/WordPress/gutenberg/pull/69775))
+- @karthikeya-io: Fix: Space visualizer showing previous value. ([69747](https://github.com/WordPress/gutenberg/pull/69747))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@carolinan @Debarghya-Banerjee @dhruvikpatel18 @dilipbheda @himanshupathak95 @im3dabasia @Infinite-Null @jonathanbossenger @karthikeya-io @Mamaduka @Mayank-Tripathi32 @Rishit30G @SainathPoojary @shimotmk @snehapatil2001 @stokesman @Sukhendu2002 @swissspidy @t-hamano @timse201 @yogeshbhutkar
+
+
+
+
+= 20.6.0 =
 
 ## Changelog
 
@@ -142,6 +1155,8 @@ The following contributors merged PRs in this release:
 @bph @chrisbellboy @dhruvikpatel18 @felixarntz @gmovr @himanshupathak95 @im3dabasia @Infinite-Null @karthick-murugan @Mamaduka @Mayank-Tripathi32 @Rishit30G @SainathPoojary @shimotmk @Sourav61 @StevenDufresne @stokesman @t-hamano @westonruter @yogeshbhutkar
 
 
+
+
 = 20.5.0 =
 
 ## Changelog
diff --git a/docs/assets/Locking interface.png b/docs/assets/Locking interface.png
index afbc602400c047..8ada25b0279484 100644
Binary files a/docs/assets/Locking interface.png and b/docs/assets/Locking interface.png differ
diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md
index e8e55921f56fae..3c3977a6a599db 100644
--- a/docs/contributors/code/coding-guidelines.md
+++ b/docs/contributors/code/coding-guidelines.md
@@ -354,8 +354,8 @@ privateValidateBlocks( blocks, true );
 
 #### Private React component properties
 
-To add an private argument to a stable component you'll need
-to prepare a stable and an private version of that component.
+To add a private argument to a stable component you'll need
+to prepare a stable and a private version of that component.
 Then, export the stable function and `lock()` the unstable function
 inside it:
 
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index 1a3af716f5848a..b5ec50e4b68acc 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -4,7 +4,7 @@ The [Gutenberg repository](https://github.com/WordPress/gutenberg) on GitHub is
 
 Before you begin, there are some requirements that must be met in order to successfully release a stable version of the Gutenberg plugin. You will need to:
 
--   Be a member of the [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams). This gives you the ability to launch the GitHub actions that are related to the release process and to backport pull requests (PRs) to the release branch.
+-   Be a member of the [Gutenberg development team](https://developer.wordpress.org/block-editor/contributors/repository-management/#teams). This gives you the ability to launch the GitHub actions that are related to the release process and to backport pull requests (PRs) to the release branch.
 -   Have write permissions on the [Make WordPress Core](https://make.wordpress.org/core) blog. This allows you to draft the release post.
 -   Obtain approval from a member of the Gutenberg Core team in order to upload the new version Gutenberg to the WordPress.org plugin directory.
 
@@ -12,7 +12,7 @@ Similar requirements apply to releasing WordPress's [npm packages](https://devel
 
 ## Gutenberg plugin releases
 
-The first step in releasing a stable version of the Gutenberg plugin is to [create an issue](https://github.com/WordPress/gutenberg/issues/new?assignees=&labels=&projects=&template=New_release.md) in the Gutenberg repository. The issue template is called "Gutenberg Release," and it contains a checklist for the complete release process, from release candidate to changelog curation to cherry-picking, stable release, and release post. The issue for [Gutenberg 15.7](https://github.com/WordPress/gutenberg/issues/50092) is a good example.
+The first step in releasing a stable version of the Gutenberg plugin is to [create an issue](https://github.com/WordPress/gutenberg/issues/new?template=New_release.md) in the Gutenberg repository. The issue template is called "Gutenberg Release," and it contains a checklist for the complete release process, from release candidate to changelog curation to cherry-picking, stable release, and release post. The issue for [Gutenberg 21.2](https://github.com/WordPress/gutenberg/issues/70662) is a good example.
 
 The checklist helps you coordinate with developers and other teams involved in the release process. It ensures that all of the necessary steps are completed and that everyone is aware of the schedule and important milestones.
 
@@ -30,12 +30,12 @@ If critical bugs are discovered in stable versions of the plugin, patch versions
 
 ### Release management
 
-Each major Gutenberg release is run by a release manager, also known as a release lead. This individual, or small team of individuals, is responsible for the release of Gutenberg with support from the broader [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams).
+Each major Gutenberg release is run by a release manager, also known as a release lead. This individual, or small team of individuals, is responsible for the release of Gutenberg with support from the broader [Gutenberg development team](https://developer.wordpress.org/block-editor/contributors/repository-management/#teams).
 
 The release manager is responsible for initiating all release activities, and their approval is required for any changes to the release plan. In the event of an emergency or if the release manager is unavailable, other team members may take appropriate action, but they should keep the release manager informed.
 
 <div class="callout callout-tip">
-If you are a member of the <a href="https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> and are interested in leading a Gutenberg release, reach out in the <a href="https://wordpress.slack.com/messages/C02QB2JS7">#core-editor</a> Slack channel.</div>
+If you are a member of the <a href="https://developer.wordpress.org/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> and are interested in leading a Gutenberg release, reach out in the <a href="https://wordpress.slack.com/messages/C02QB2JS7">#core-editor</a> Slack channel.</div>
 
 ### Preparing a release
 
@@ -126,7 +126,7 @@ Here are some additional tips for preparing clear and concise changelogs:
 -   Move all entries under the `Various` section to a more appropriate section.
 -   Fix spelling errors or clarify wording. Phrasing should be easy to understand where the intended audience is those who use the plugin or are keeping up with ongoing development.
 -   Create new groupings as applicable, and move pull requests between.
--   When multiple PRs relate to the same task (such as a follow-up pull request), try to combine them into a single entry. Good examples for this are PRs around removing Lodash for performance purposes, replacement of Puppeteer E2D tests with Playwright or efforts to convert public components to TypeScript.
+-   When multiple PRs relate to the same task (such as a follow-up pull request), try to combine them into a single entry. Good examples for this are PRs around removing Lodash for performance purposes, replacement of Puppeteer E2E tests with Playwright or efforts to convert public components to TypeScript.
 -   If subtasks of a related set of PRs are substantial, consider organizing as entries in a nested list.
 -   Remove PRs that revert other PRs in the same release if the net change in code is zero.
 -   Remove all PRs that only update the mobile app. The only exception to this rule is if the mobile app pull request also updates functionality for the web.
@@ -139,7 +139,7 @@ Here are some additional tips for preparing clear and concise changelogs:
     <ul>
         <li>Ensure all PRs that need cherry-picking have the <code>Backport to Gutenberg RC</code> label.</li>
         <li>In your local clone of the Gutenberg repository, switch to the release branch: <code>git checkout release/X.Y</code></li>
-        <li>Cherry-pick all merged PRs using the automated script: </code>npm run other:cherry-pick "Backport to Gutenberg RC"</code></li>
+        <li>Cherry-pick all merged PRs using the automated script: <code>npm run other:cherry-pick "Backport to Gutenberg RC"</code></li>
     </ul>
 </div>
 
@@ -155,7 +155,7 @@ There are a couple of ways you might be made aware of these bugs as a release ma
 The cherry-picking process can be automated with the `npm run other:cherry-pick "[Insert Label]"` script, which is included in Gutenberg. You will need to use the label `Backport to Gutenberg RC` when running the command and ensure all PRs that need cherry-picking have the label assigned.
 
 <div class="callout callout-warning">
-To cherry-pick PRs, you must clone (not fork) the Gutenberg repository and have write access. Only members of the <a href="https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> have the necessary permissions to perform this action.</div>
+To cherry-pick PRs, you must clone (not fork) the Gutenberg repository and have write access. Only members of the <a href="https://developer.wordpress.org/block-editor/contributors/repository-management/#teams">Gutenberg development team</a> have the necessary permissions to perform this action.</div>
 
 Once you have cloned the Gutenberg repository to your local development environment, begin by switching to the release branch:
 
@@ -217,7 +217,7 @@ Publishing the release will create a `git` tag for the version, publish the rele
 1. Use the release notes that you just edited to update `changelog.txt`, and
 2. Upload the new plugin version to the WordPress.org plugin repository (SVN) (only if you’re releasing a stable version).
 
-The last step needs approval by a member of either the [Gutenberg Release](https://github.com/orgs/WordPress/teams/gutenberg-release), [Gutenberg Core](https://github.com/orgs/WordPress/teams/gutenberg-core), or the [WordPress Core](https://github.com/orgs/WordPress/teams/wordpress-core) teams. These teams get a notification email when the release is ready to be approved, but if time is of the essence, you can ask in the #core-editor Slack channel or ping the [Gutenberg Release team](https://github.com/orgs/WordPress/teams/gutenberg-release)) to accelerate the process. Reaching out before launching the release process so that somebody is ready to approve is recommended. Locate the [“Upload Gutenberg plugin to WordPress.org plugin repo” workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+The last step needs approval by a member of either the [Gutenberg Release](https://github.com/orgs/WordPress/teams/gutenberg-release), [Gutenberg Core](https://github.com/orgs/WordPress/teams/gutenberg-core), or the [WordPress Core](https://github.com/orgs/WordPress/teams/wordpress-core) teams. These teams get a notification email when the release is ready to be approved, but if time is of the essence, you can ask in the `#core-editor` Slack channel or ping the [Gutenberg Release team](https://github.com/orgs/WordPress/teams/gutenberg-release) to accelerate the process. Reaching out before launching the release process so that somebody is ready to approve is recommended. Locate the [“Upload Gutenberg plugin to WordPress.org plugin repo” workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/how-tos/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments#approving-or-rejecting-a-job).
 
 Once approved, the new Gutenberg version will be available to WordPress users all over the globe. Once uploaded, confirm that the latest version can be downloaded and updated from the WordPress plugin dashboard.
 
@@ -227,7 +227,7 @@ The final step is to write a release post on [make.wordpress.org/core](https://m
 
 > The plugin was published to the WordPress.org plugin directory but the workflow failed.
 
-This has happened occasionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/6955409957/job/18924124118) for example.
+This has happened occasionally, see [this one](https://github.com/WordPress/gutenberg/actions/runs/16325916698/job/46115920213) for example.
 
 It's important to check that:
 
@@ -237,9 +237,9 @@ It's important to check that:
   - the `trunk` folder should have "Committing version X.Y.Z"
   - there is a new `tags/X.Y.Z` folder with the same contents as `trunk` whose latest commit is "Tagging version X.Y.Z"
 
-Most likely, the tag folder couldn't be created. This is a [known issue](https://plugins.trac.wordpress.org/browser/gutenberg/) that [can be fixed manually](https://github.com/WordPress/gutenberg/issues/55295#issuecomment-1759292978).
+Most likely, the tag folder couldn't be created. This is a [known issue](https://github.com/WordPress/gutenberg/issues/55295) that [can be fixed manually](https://github.com/WordPress/gutenberg/issues/55295#issuecomment-1759292978).
 
-Either substitute SVN_USERNAME, SVN_PASSWORD, and VERSION for the proper values or set them as global environment variables first:
+Either substitute `SVN_USERNAME`, `SVN_PASSWORD`, and `VERSION` for the proper values or set them as global environment variables first:
 
 ```sh
 # CHECKOUT THE REPOSITORY
@@ -260,7 +260,7 @@ Ask around if you need help with any of this.
 
 ### Documenting the release
 
-Documenting the release is led by the release manager with the help of [Gutenberg development team](https://developer.wordpress.org/block-editor/block-editor/contributors/repository-management/#teams) members. This process is comprised of a series of sequential steps that, because of the number of people involved, and the coordination required, need to adhere to a timeline between the RC and stable releases. Stable Gutenberg releases happen on Wednesdays, one week after the initial RC.
+Documenting the release is led by the release manager with the help of [Gutenberg development team](https://developer.wordpress.org/block-editor/contributors/repository-management/#teams) members. This process is comprised of a series of sequential steps that, because of the number of people involved, and the coordination required, need to adhere to a timeline between the RC and stable releases. Stable Gutenberg releases happen on Wednesdays, one week after the initial RC.
 
 <div class="callout callout-info">
     <strong>Timeline</strong>
@@ -279,9 +279,13 @@ Once the changelog is cleaned up, the next step is to choose a few changes to hi
 
 Given the big scope of Gutenberg and the high number of PRs merged in each milestone, it is not uncommon to overlook impactful changes worth highlighting; because of this, this step is a collaborative effort between the release manager and other Gutenberg development team members. If you don’t know what to pick, reach out to others on the team for assistance.
 
-#### Requesting release assets
+#### Release assets
 
-After identifying the highlights of a new WordPress release, the release manager requests visual assets from the Design team. The request is made in the [#design](https://wordpress.slack.com/archives/C02S78ZAL) Slack channel, and an example post for 15.8 can be found [here](https://wordpress.slack.com/archives/C02S78ZAL/p1684161811926279). The assets will be provided in a [Google Drive folder](https://drive.google.com/drive/folders/1U8bVbjOc0MekWjpMjNaVFVhHFEzQkYLB) assigned to the specific release.
+The release post has a few visual assets that need to be organized. For the post's featured image, use the same image as the previous release used. It should already be in the media library called 'gb-featured'.
+
+There's also a banner in the post body, which can be added via a synced pattern called 'Gutenberg What's New Banner'. Insert this pattern and update the text to the correct version number.
+
+The highlighted features also require visual assets. For a high profile feature you can request visual assets from the Design team. For other features you can create the assets yourself if you're comfortable. To request assets from design, reach out in the [#design](https://wordpress.slack.com/archives/C02S78ZAL) Slack channel, and an example post for 15.8 can be found [here](https://wordpress.slack.com/archives/C02S78ZAL/p1684161811926279). The assets will be provided in a [Google Drive folder](https://drive.google.com/drive/folders/1U8bVbjOc0MekWjpMjNaVFVhHFEzQkYLB) assigned to the specific release.
 
 When creating visual assets for a WordPress release, use animations (video or GIF) or static images to showcase the highlights. Use [previous release posts](https://make.wordpress.org/core/tag/gutenberg-new/) as a guide, and keep in mind that animations are better for demonstrating workflows, while more direct highlights can be shown with an image. When creating assets, avoid using copyrighted material and disable browser plugins that can be seen in the browser canvas.
 
@@ -302,6 +306,12 @@ The author should then enable public preview on the post and ask for a final pee
 
 Finally, the post should be published after the stable version is released and is available on WordPress.org. This will help external media to echo and amplify the release.
 
+### Call for volunteer for the next release
+
+After you've completed the release, post in #core-editor slack channel asking for volunteers to handle the next Gutenberg release.
+
+See an example of that [here](https://wordpress.slack.com/archives/C02QB2JS7/p1751595983193709).
+
 ### Creating minor releases
 
 Occasionally it's necessary to create a minor release (i.e. X.Y.**Z**) of the Plugin. This is usually done to expedite fixes for bad regressions or bugs. The `Backport to Gutenberg Minor Release` is usually used to identify PRs that need to be included in a minor release, but as release coordinator you may also be notified more informally through slack. Even so, it's good to ensure all relevant PRs have the correct label.
@@ -315,7 +325,7 @@ The method for minor releases is nearly identical to the main Plugin release pro
 The minor release should only contain the _specific commits_ required. To do this you should checkout the previous _major_ stable (i.e. non-RC) release branch (e.g. `release/12.5`) locally and then cherry pick any commits that you require into that branch.
 
 <div class="callout callout-alert">
-If an RC already exists for a new version, you _need_ to cherry-pick the same commits in the respective release branch, as they will not be included automatically. E.g.: If you're about to release a new minor release for 12.5 and just cherry-picked into `release/12.5`, but 12.6.0-rc.1 is already out, then you need to cherry-pick the same commits into the `release/12.6` branch, or they won't be included in subsequent releases for 12.6! Usually it's best to coordinate this process with the release coordinator for the next release.
+If an RC already exists for a new version, you <strong>need</strong> to cherry-pick the same commits in the respective release branch, as they will not be included automatically. E.g.: If you're about to release a new minor release for 12.5 and just cherry-picked into <code>release/12.5</code>, but 12.6.0-rc.1 is already out, then you need to cherry-pick the same commits into the <code>release/12.6</code> branch, or they won't be included in subsequent releases for 12.6! Usually it's best to coordinate this process with the release coordinator for the next release.
 </div>
 
 The cherry-picking process can be automated with the [`npm run cherry-pick`](/docs/contributors/code/auto-cherry-picking.md) script, but be sure to use the `Backport to Gutenberg Minor Release` label when running the script.
@@ -344,7 +354,7 @@ To do this, when running the Workflow, select the appropriate `release/` branch
 
 It is possible to create a minor release for any release branch even after a more recent stable release has been published. This can be done for _any_ previous release branches, allowing more flexibility in delivering updates to users. In the past, users had to wait for the next stable release, potentially taking days. Now, fixes can be swiftly shipped to any previous release branches as required.
 
-The process is identical to the one documented above when an RC is already out: choose a previous release branch, type `stable`, and click "Run workflow". The release will be published on the GitHub releases page for Gutenberg and to the WordPress core repository SVN as a `tag` under https://plugins.svn.wordpress.org/gutenberg/tags/. The SVN `trunk` directory will not be touched.
+The process is identical to the one documented above when an RC is already out: choose a previous release branch, type `stable`, and click "Run workflow". The release will be published on the GitHub releases page for Gutenberg and to the WordPress core repository SVN as a `tag` under [https://plugins.svn.wordpress.org/gutenberg/tags/](https://plugins.svn.wordpress.org/gutenberg/tags/). The SVN `trunk` directory will not be touched.
 
 **IMPORTANT:** When publishing the draft created by the ["Build Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml), make sure to leave the "Set as last release" checkbox unchecked. If it is left checked by accident, the ["Upload Gutenberg plugin to WordPress.org plugin" workflow](https://github.com/WordPress/gutenberg/actions/workflows/upload-release-to-plugin-repo.yml) will still correctly upload it **as a tag (and will _not_ replace the `trunk` version)** to the WordPress plugin repository SVN - the workflow will perform some version arithmetic to determine how the plugin should be shipped - but you'll still need to fix the state on GitHub by setting the right release as `latest` on the [releases](https://github.com/WordPress/gutenberg/releases/) page!
 
@@ -382,7 +392,7 @@ The Gutenberg repository follows the [WordPress SVN repository's](https://make.w
 
 Release types and their schedule:
 
--   [Synchronizing Gutenberg Plugin](#synchronizing-gutenberg-plugin) (`latest` dist tag) – publishing happens automatically every two weeks based on the newly created `release/X.Y` (example `release/12.8`) branch with the RC1 version of the Gutenberg plugin.
+-   [Synchronizing Gutenberg Plugin](#synchronizing-the-gutenberg-plugin) (`latest` dist tag) – publishing happens automatically every two weeks based on the newly created `release/X.Y` (example `release/12.8`) branch with the RC1 version of the Gutenberg plugin.
 -   [WordPress Releases](#wordpress-releases) (`wp-X.Y` dist tag, example `wp-6.2`) – publishing gets triggered on demand from the `wp/X.Y` (example `wp/6.2`) branch. Once we reach the point in the WordPress major release cycle (shortly before Beta 1) where we only cherry-pick commits from the Gutenberg repository to the WordPress core, we use `wp/X.Y` branch (created from `release/X.Y` branch, example `release/15.1`) for npm publishing with the `wp-X.Y` dist-tag. It's also possible to use older branches to backport bug or security fixes to the corresponding older versions of WordPress Core.
 -   [Development Releases](#development-releases) (`next` dist tag) – it is also possible to perform development releases at any time when there is a need to test the upcoming changes.
 
@@ -390,7 +400,7 @@ There is also an option to perform [Standalone Bugfix Package Releases](#standal
 
 ### Synchronizing the Gutenberg plugin
 
-For each Gutenberg plugin release, we also publish to npm an updated version of WordPress packages. This is automated with the [Release Tool](#release-tool) that handles releases for the Gutenberg plugin. A successful RC1 release triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Build Gutenberg Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+For each Gutenberg plugin release, we also publish to npm an updated version of WordPress packages. This is automated with the [Release Tool](https://github.com/WordPress/gutenberg/blob/trunk/.github/workflows/build-plugin-zip.yml) that handles releases for the Gutenberg plugin. A successful RC1 release triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Build Gutenberg Plugin Zip" workflow](https://github.com/WordPress/gutenberg/actions/workflows/build-plugin-zip.yml) for the new version, and have it [approved](https://docs.github.com/en/actions/how-tos/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments#approving-or-rejecting-a-job).
 
 We deliberately update the `wp/latest` branch within the Gutenberg repo with the content from the Gutenberg release `release/X.Y` (example `release/12.7`) branch at the time of the Gutenberg RC1 release. This is done to ensure that the `wp/latest` branch is as close as possible to the latest version of the Gutenberg plugin. It also practically removes the chances of conflicts while backporting to `trunk` commits with updates applied during publishing to `package.json` and `CHANGELOG.md` files. In the past, we had many issues in that aspect when doing npm publishing after the regular Gutenberg release a week later. When publishing the new package versions to npm, we pick at least the `minor` version bump to account for future bugfix or security releases.
 
@@ -408,7 +418,7 @@ Behind the scenes, all steps are automated via `./bin/plugin/cli.js npm-latest`
 10. Run the script `npx lerna publish --no-private`.
     - When asked for the version numbers to choose for each package pick the values of the updated CHANGELOG files.
     - You'll be asked for your One-Time Password (OTP) a couple of times. This is the code from the 2FA authenticator app you use. Depending on how many packages are to be released you may be asked for more than one OTP, as they tend to expire before all packages are released.
-    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
+    - If the publishing process ends up incomplete (perhaps because it timed-out or a bad OTP was introduced) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
 11. Finally, now that the npm packages are published, cherry-pick the commits created by lerna ("Publish" and the CHANGELOG update) into the `trunk` branch of Gutenberg.
 
 ### WordPress releases
@@ -418,8 +428,8 @@ The following workflow is needed when bug or security fixes need to be backporte
 -   During the `beta` and `RC` periods of the WordPress release cycle when `wp/X.Y` (example `wp/5.7`) branch for the release is already present.
 -   For WordPress minor releases and WordPress security releases (example `5.1.1`).
 
-1. Check out the relevant WordPress major branch (If the minor release is 5.2.1, check out `wp/5.2`).
-2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it. The cherry-picking process can be automated with the [`npm run other:cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
+1. Check out the relevant WordPress major branch (If the minor release is `5.2.1`, check out `wp/5.2`).
+2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it. The cherry-picking process can be automated with the [`npm run other:cherry-pick`](/docs/contributors/code/auto-cherry-picking.md) script.
 3. Create a Pull Request from this branch targeting the WordPress major branch used above.
 4. Merge the Pull Request using the "Rebase and Merge" button to keep the history of the commits.
 
@@ -427,7 +437,7 @@ Now, the `wp/X.Y` branch is ready for publishing npm packages. In order to start
 
 ![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-2.png)
 
-To publish packages to npm for the WordPress major release, select `trunk` as the branch to run the workflow from (this means that the script used to run the workflow comes from the trunk branch, though the packages themselves will published from the release branch as long as the correct "Release type" is selected below), then select `wp` from the "Release type" dropdown and enter `X.Y` (example `5.2`) in the "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+To publish packages to npm for the WordPress major release, select `trunk` as the branch to run the workflow from (this means that the script used to run the workflow comes from the trunk branch, though the packages themselves will published from the release branch as long as the correct "Release type" is selected below), then select `wp` from the "Release type" dropdown and enter `X.Y` (example `5.2`) in the "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/how-tos/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments#approving-or-rejecting-a-job).
 
 For the record, the manual process would look like the following:
 
@@ -473,15 +483,14 @@ Whilst waiting for the GitHub actions build for `wp/latest`[branch to pass](http
 
 1. `git checkout wp/latest`
 2. `npx lerna updated`
-    > Example
-    >
-    > ```shell
-    > npx lerna updated
-    > @wordpress/e2e-tests
-    > @wordpress/jest-preset-default
-    > @wordpress/scripts
-    > lerna success found 3 packages ready to publish
-    > ```
+   Example:
+   ```shell
+   npx lerna updated
+   @wordpress/e2e-tests
+   @wordpress/jest-preset-default
+   @wordpress/scripts
+   lerna success found 3 packages ready to publish
+   ```
 
 Check the versions listed in the current `CHANGELOG.md` file, looking through the commit history of a package e.g [@wordpress/scripts](https://github.com/WordPress/gutenberg/commits/HEAD/packages/scripts) and look out for _"chore(release): publish"_ and _"Update changelogs"_ commits to determine recent version bumps, then looking at the commits since the most recent release should aid with discovering what changes have occurred since the last release.
 
@@ -491,7 +500,7 @@ Now, the `wp/latest` branch is ready for publishing npm packages. In order to st
 
 ![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-6.png)
 
-To publish packages to npm with bugfixes, select `bugfix` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+To publish packages to npm with bugfixes, select `bugfix` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/how-tos/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments#approving-or-rejecting-a-job).
 
 Behind the scenes, the rest of the process is automated with `./bin/plugin/cli.js npm-bugfix` command. For the record, the manual process would look very close to the following steps:
 
@@ -502,12 +511,12 @@ Behind the scenes, the rest of the process is automated with `./bin/plugin/cli.j
 5. Run the script `npx lerna publish --no-private`.
     - When asked for the version numbers to choose for each package pick the values of the updated CHANGELOG files.
     - You'll be asked for your One-Time Password (OTP) a couple of times. This is the code from the 2FA authenticator app you use. Depending on how many packages are to be released you may be asked for more than one OTP, as they tend to expire before all packages are released.
-    - If the publishing process ends up incomplete (perhaps because it timed-out or an bad OTP was introduce) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
+    - If the publishing process ends up incomplete (perhaps because it timed-out or a bad OTP was introduced) you can resume it via [`npx lerna publish from-package`](https://lerna.js.org/docs/features/version-and-publish#from-package).
 6. Finally, now that the npm packages are published, cherry-pick the commits created by lerna ("Publish" and the CHANGELOG update) into the `trunk` branch of Gutenberg.
 
 ### Development releases
 
-As noted in the [Synchronizing Gutenberg Plugin](#synchronizing-gutenberg-plugin) section, packages publishing happens every two weeks from the `wp/latest` branch. It's also possible to use the development release to test the upcoming changes present in the `trunk` branch at any time. We are taking advantage of [package distribution tags](https://docs.npmjs.com/cli/v7/commands/npm-dist-tag) that make it possible to consume the future version of the codebase according to npm guidelines:
+As noted in the [Synchronizing Gutenberg Plugin](#synchronizing-the-gutenberg-plugin) section, packages publishing happens every two weeks from the `wp/latest` branch. It's also possible to use the development release to test the upcoming changes present in the `trunk` branch at any time. We are taking advantage of [package distribution tags](https://docs.npmjs.com/cli/v7/commands/npm-dist-tag) that make it possible to consume the future version of the codebase according to npm guidelines:
 
 > By default, the `latest` tag is used by npm to identify the current version of a package, and `npm install <pkg>` (without any `@<version>` or `@<tag>` specifier) installs the `latest` tag. Typically, projects only use the `latest` tag for stable release versions, and use other tags for unstable versions such as prereleases.
 
@@ -521,7 +530,7 @@ In order to start the publishing process for development version of npm packages
 
 ![Run workflow dropdown for npm publishing](https://developer.wordpress.org/files/2023/07/image-4.png)
 
-To publish development packages to npm, select `development` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/managing-workflow-runs/reviewing-deployments#approving-or-rejecting-a-job).
+To publish development packages to npm, select `development` from the "Release type" dropdown and leave empty "WordPress major release" input field. Finally, press the green "Run workflow" button. It triggers the npm publishing job, and this needs to be approved by a Gutenberg Core team member. Locate the ["Publish npm packages" action](https://github.com/WordPress/gutenberg/actions/workflows/publish-npm-packages.yml) for the current publishing, and have it [approved](https://docs.github.com/en/actions/how-tos/managing-workflow-runs-and-deployments/managing-deployments/reviewing-deployments#approving-or-rejecting-a-job).
 
 Behind the scenes, the release process is fully automated via `./bin/plugin/cli.js npm-next` command. It ensures
 the `wp/next` branch is synchronized with the latest release branch (`release/X.Y`) created for the Gutenberg plugin. To avoid collisions in the versioning of packages, we always include the newest commit's `sha`, for example, `@wordpress/block-editor@5.2.10-next.645224df70.0`.
diff --git a/docs/contributors/folder-structure.md b/docs/contributors/folder-structure.md
index e20ba81708a064..6014f28614f518 100644
--- a/docs/contributors/folder-structure.md
+++ b/docs/contributors/folder-structure.md
@@ -15,7 +15,7 @@ The following snippet explains how the Gutenberg repository is structured omitti
     ├── .eslintignore
     ├── .prettierrc.js
     ├── .stylelintignore
-    ├── .stylelintrc.json
+    ├── .stylelintrc.js
     ├── .markdownlintignore
     ├── .npmpackagejsonlintrc.json
     ├── phpcs.xml.dist
@@ -76,8 +76,8 @@ The following snippet explains how the Gutenberg repository is structured omitti
     │   Set of documentation pages composing the [Block editor handbook](https://developer.wordpress.org/block-editor/).
     │
     ├── platform-docs
-    │   Documentation website targeted to non WordPress developers 
-    │   using Gutenberg in their own applications. 
+    │   Documentation website targeted to non WordPress developers
+    │   using Gutenberg in their own applications.
     │   Deployed on [https://wordpress.org/gutenberg-framework/](https://wordpress.org/gutenberg-framework/).
     │
     │
@@ -85,7 +85,7 @@ The following snippet explains how the Gutenberg repository is structured omitti
     │   PHP Source code of the Gutenberg plugin.
     │
     ├── lib/compact/wordpress-x.x
-    │   PHP code that was include in WordPress ont the WordPrexx X.X version.
+    │   PHP code that was include in WordPress ont the WordPress X.X version.
     │   It is kept to ensure plugin compatibility with older WordPress versions.
     │
     ├── packages
diff --git a/docs/contributors/versions-in-wordpress.md b/docs/contributors/versions-in-wordpress.md
index 751a82c5f319ff..27e8ced4a45f1c 100644
--- a/docs/contributors/versions-in-wordpress.md
+++ b/docs/contributors/versions-in-wordpress.md
@@ -1,4 +1,4 @@
-# Versions in WordPress
+# Gutenberg versions in WordPress
 
 With each major release of WordPress a new version of Gutenberg is included. This has caused confusion over time as people have tried to figure out how to best debug problems and report bugs appropriately. To make this easier we have made this document to serve as a canonical list of the Gutenberg versions integrated into each major WordPress release. Of note, during the beta period of a WordPress release, additional bug fixes from later Gutenberg releases than those noted are added into the WordPress release where it is needed. If you want details about what's in each Gutenberg release outside of the high level items shared as part of major WordPress releases, please review the [release notes shared on Make Core](https://make.wordpress.org/core/tag/gutenberg-new/).
 
diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index 4539dacbdf5047..adf55b11e75194 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -25,7 +25,7 @@ Node.js (`node`) is an open-source runtime environment that allows you to execut
 Node.js and its accompanying development tools allow you to:
 
 -   Install and run WordPress packages needed for Block Editor development, such as `wp-scripts`
--   Setup local WordPress environments with `wp-env` and `wp-now`
+-   Set up local WordPress environments with `wp-env` and `wp-now`
 -   Use the latest ECMAScript features and write code in ESNext
 -   Lint, format, and test JavaScript code
 -   Scaffold custom blocks with the `create-block` package
@@ -53,8 +53,8 @@ Refer to the [Get started with `wp-env`](/docs/getting-started/devenv/get-starte
 
 This list is not exhaustive, but here are several additional options to choose from if you prefer not to use `wp-env`:
 
+- [WordPress Studio](https://developer.wordpress.com/studio/)
 - [Local](https://localwp.com/)
-- [WP Studio](https://developer.wordpress.com/studio/)
 - [XAMPP](https://www.apachefriends.org/)
 - [MAMP](https://www.mamp.info/en/mamp/mac/)
 - [Varying Vagrant Vagrants](https://varyingvagrantvagrants.org/) (VVV)
diff --git a/docs/getting-started/glossary.md b/docs/getting-started/glossary.md
index 3c7ba7f722c445..068df51a77e59a 100644
--- a/docs/getting-started/glossary.md
+++ b/docs/getting-started/glossary.md
@@ -60,7 +60,7 @@ A block which embeds the TinyMCE editor as a block, TinyMCE was the base of the
 
 ## Dynamic block
 
-A type of block where the content of which may change and cannot be determined at the time of saving a post, instead calculated any time the post is shown on the front of a site. These blocks may save fallback content or no content at all in their JavaScript implementation, instead deferring to a PHP block implementation for runtime rendering.
+A type of block in which the content may change and cannot be determined at the time of saving a post, instead calculated any time the post is shown on the front of a site. These blocks may save fallback content or no content at all in their JavaScript implementation, instead deferring to a PHP block implementation for runtime rendering.
 
 ## Full Site Editing
 
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index 2a5dd979d3a569..e21ffded4df42b 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -150,7 +150,7 @@ Update the [`supports`](https://developer.wordpress.org/block-editor/getting-sta
 
 Note that when you enable text color support with `"text": true`, the background color is also enabled by default. You are welcome to keep it enabled, but it's not required for this tutorial, so you can manually set `"background": false`.
 
-Save the file and select the block in the Editor. You will now see both Color and Typography panels in the Settings Sidebar. Try modifying the settings and see what happens.
+Save the file and select the block in the Editor. You will now see both Color and Typography panels in the Settings Panel. Try modifying the settings and see what happens.
 
 ![The block in the Editor with block supports](https://developer.wordpress.org/files/2023/12/block-tutorial-5.png)
 
diff --git a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
index 3c75e1e82668f2..f935e51747fe6d 100644
--- a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
+++ b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
@@ -176,6 +176,8 @@ You can use a react hook called `useInnerBlocksProps` instead of the `InnerBlock
 
 The `useInnerBlocksProps` is exported from the `@wordpress/block-editor` package same as the `InnerBlocks` component itself and supports everything the component does. It also works like the `useBlockProps` hook.
 
+It is important to note that `useBlockProps` hook must be called *before* `useInnerBlocksProps`, otherwise `useBlockProps` will return empty object. 
+
 Here is the basic `useInnerBlocksProps` hook usage.
 
 
diff --git a/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md
index a20d2cf9d8b8a7..81d61921873eef 100644
--- a/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md
+++ b/docs/how-to-guides/curating-the-editor-experience/disable-editor-functionality.md
@@ -24,14 +24,14 @@ You can also use [block filters](/docs/reference-guides/filters/block-filters.md
 
 ```php
 function example_modify_heading_levels_globally( $args, $block_type ) {
-	
+
 	if ( 'core/heading' !== $block_type ) {
 		return $args;
 	}
 
 	// Remove H1, H2, and H6.
 	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
-	
+
 	return $args;
 }
 add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );
@@ -91,19 +91,6 @@ wp.domReady( () => {
 
 This JavaScript should be enqueued much like the block variation example above. Refer to the [block styles](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/) documentation for how to register and unregister styles using PHP.
 
-## Disable access to the Template Editor
-
-Whether you’re using theme.json in a Classic or Block theme, you can add the following to your `functions.php` file to remove access to the Template Editor that is available when editing posts or pages:
-
-```php
-function example_theme_support() {
-	remove_theme_support( 'block-templates');
-}
-add_action( 'after_setup_theme', 'example_theme_support' );
-```
-
-This prevents both the ability to create new block templates or edit them from within the Post Editor.
-
 ## Disable access to the Code Editor
 
 The Code Editor allows you to view the underlying block markup for a page or post. While this view is handy for experienced users, you can inadvertently break block markup by editing content. Add the following to your `functions.php` file to restrict access.
@@ -135,4 +122,4 @@ wp.domReady( () => {
 });
 ```
 
-This JavaScript should be enqueued much like the block variation example above.
\ No newline at end of file
+This JavaScript should be enqueued much like the block variation example above.
diff --git a/docs/how-to-guides/data-basics/1-data-basics-setup.md b/docs/how-to-guides/data-basics/1-data-basics-setup.md
index d3208ceb352b4b..d17c3966e0ea12 100644
--- a/docs/how-to-guides/data-basics/1-data-basics-setup.md
+++ b/docs/how-to-guides/data-basics/1-data-basics-setup.md
@@ -19,6 +19,7 @@ Go ahead and create these files using the following snippets:
 
 ```js
 import { createRoot } from 'react-dom';
+import './style.css';
 
 function MyFirstApp() {
 	return <span>Hello from JavaScript!</span>;
diff --git a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
index 955bc1f869ad85..dbd73e06c894c0 100644
--- a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
+++ b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
@@ -2,7 +2,7 @@
 
 In this part, we will build a filterable list of all WordPress pages. This is what the app will look like at the end of this section:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/part1-finished.jpg)
+![Searchable WordPress pages list](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/part1-finished.jpg)
 
 Let’s see how we can get there step by step.
 
@@ -31,7 +31,7 @@ function PagesList( { pages } ) {
 
 Note that this component does not fetch any data yet, only presents the hardcoded list of pages. When you refresh the page, you should see the following:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/simple-list.jpg)
+![WordPress pages list showing Sample page](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/simple-list.jpg)
 
 ## Step 2: Fetch the data
 
@@ -39,7 +39,7 @@ The hard-coded sample page isn’t very useful. We want to display your actual W
 
 Before we start, let’s confirm we actually have some pages to fetch. Within WPAdmin, Navigate to Pages using the sidebar menu and ensure it shows at least four or five Pages:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/pages-list.jpg)
+![WordPress admin Pages list](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/pages-list.jpg)
 
 If it doesn’t, go ahead and create a few pages – you can use the same titles as on the screenshot above. Be sure to _publish_ and not just _save_ them.
 
@@ -116,7 +116,7 @@ Note that post title may contain HTML entities like `&aacute;`, so we need to us
 
 Refreshing the page should display a list similar to this one:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/fetch-the-data.jpg)
+![List of website pages](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/fetch-the-data.jpg)
 
 ## Step 3: Turn it into a table
 
@@ -141,7 +141,7 @@ function PagesList( { pages } ) {
 }
 ```
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/make-a-table.jpg)
+![Table listing website page titles](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/make-a-table.jpg)
 
 ## Step 4: Add a search box
 
@@ -170,7 +170,7 @@ function MyFirstApp() {
 
 Note that instead of using an `input` tag, we took advantage of the [SearchControl](https://developer.wordpress.org/block-editor/reference-guides/components/search-control/) component. This is what it looks like:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter-field.jpg)
+![Searchable list of WordPress pages](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter-field.jpg)
 
 The field starts empty, and the contents are stored in the `searchTerm` state value. If you aren’t familiar with the [useState](https://react.dev/reference/react/useState) hook, you can learn more in [React’s documentation](https://react.dev/reference/react/useState).
 
@@ -241,7 +241,7 @@ function MyFirstApp() {
 
 Voila! We can now filter the results:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter.jpg)
+![Filtered WordPress pages list showing About us](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/filter.jpg)
 
 ### Using core-data instead vs calling the API directly
 
@@ -277,7 +277,7 @@ All in all, the utilities built into core-data are designed to solve the typical
 
 There is one problem with our search feature. We can’t be quite sure whether it’s still searching or showing no results:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/unclear-status.jpg)
+![No matching WordPress pages found for search query](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/unclear-status.jpg)
 
 A few messages like  _Loading…_ or _No results_ would clear it up. Let’s implement them! First,  `PagesList` has to be aware of the current status:
 
@@ -366,6 +366,7 @@ import { SearchControl, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import './style.css';
 
 function MyFirstApp() {
 	const [ searchTerm, setSearchTerm ] = useState( '' );
@@ -439,8 +440,8 @@ window.addEventListener(
 
 All that’s left is to refresh the page and enjoy the brand new status indicator:
 
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/indicator.jpg)
-![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/no-results.jpg)
+![Loading indicator shown while searching WordPress pages](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/indicator.jpg)
+![No results found for page search query in WordPress](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/list-of-pages/no-results.jpg)
 
 ## What's next?
 
diff --git a/docs/how-to-guides/format-api.md b/docs/how-to-guides/format-api.md
index 188bc1725c3633..c383222133d481 100644
--- a/docs/how-to-guides/format-api.md
+++ b/docs/how-to-guides/format-api.md
@@ -225,7 +225,7 @@ If you run into errors:
 Reference documentation used in this guide:
 
 -   RichText: [`registerFormatType`](/packages/rich-text/README.md#registerformattype)
--   Components: [`RichTextToolbarButton`](/packages/block-editor/src/components/rich-text#richtexttoolbarbutton)
+-   Components: [`RichTextToolbarButton`](/packages/block-editor/README.md#richtexttoolbarbutton)
 -   RichText: [`applyFormat`](/packages/rich-text/README.md#applyformat)
 -   RichText: [`removeFormat`](/packages/rich-text/README.md#removeformat)
 -   RichText: [`toggleFormat`](/packages/rich-text/README.md#toggleformat)
diff --git a/docs/how-to-guides/notices/README.md b/docs/how-to-guides/notices/README.md
index 15895e2bd32131..479d44889dd2d3 100644
--- a/docs/how-to-guides/notices/README.md
+++ b/docs/how-to-guides/notices/README.md
@@ -24,11 +24,13 @@ function myguten_admin_notice() {
 		return;
 	}
 	// Render the notice's HTML.
-	// Each notice should be wrapped in a <div>
-	// with a 'notice' class.
-	echo '<div class="notice notice-success is-dismissible"><p>';
-	echo sprintf( __( 'Post draft updated. <a href="%s" target="_blank">Preview post</a>' ), get_preview_post_link() );
-	echo '</p></div>';
+	wp_admin_notice(
+		sprintf( __( 'Post draft updated. <a href="%s" target="_blank">Preview post</a>' ), get_preview_post_link() ),
+		array(
+			'type'        => 'success',
+			'dismissible' => true,
+		)
+	);
 };
 add_action( 'admin_notices', 'myguten_admin_notice' );
 ```
diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
index e100820ea0e8b6..b376cc3a9569a4 100644
--- a/docs/how-to-guides/platform/custom-block-editor.md
+++ b/docs/how-to-guides/platform/custom-block-editor.md
@@ -4,7 +4,7 @@ The WordPress block editor is a powerful tool that allows you to create and form
 
 This package can also be used to create custom block editors for virtually any other web application. This means that you can use the same blocks and block editing experience outside of WordPress.
 
-![alt text](https://developer.wordpress.org/files/2023/07/custom-block-editor.png 'The Standalone Editor instance populated with example Blocks within a custom WordPress admin page.')
+![WordPress block editor showing content blocks and editing options](https://developer.wordpress.org/files/2023/07/custom-block-editor.png 'The Standalone Editor instance populated with example Blocks within a custom WordPress admin page.')
 
 This flexibility and interoperability makes blocks a powerful tool for building and managing content across multiple applications. It also makes it simpler for developers to create content editors that work best for their users.
 
@@ -46,7 +46,7 @@ The custom editor is going to be built as a WordPress plugin. To keep things sim
 
 The plugin file structure will look like this:
 
-![alt text](https://wordpress.org/gutenberg/files/2020/03/repo-files.png 'Screenshot showing file structure of the Plugin at https://github.com/getdave/standalone-block-editor.')
+![Project directory listing with configuration and source files](https://wordpress.org/gutenberg/files/2020/03/repo-files.png 'Screenshot showing file structure of the Plugin at https://github.com/getdave/standalone-block-editor.')
 
 Here is a brief summary of what's going on:
 
@@ -461,7 +461,7 @@ it display within the editor's sidebar. Exploring this component in more detail
 You have come a long way on your journey to create a custom block editor. But there is one major area left to touch upon - block persistence. In other words, having your
 blocks saved and available _between_ page refreshes.
 
-![alt text](https://developer.wordpress.org/files/2023/07/custom-block-editor-persistance.gif 'Screencapture showing blocks being restored between page refreshes.')
+![WordPress custom block editor interface with various content blocks and editing options](https://developer.wordpress.org/files/2023/07/custom-block-editor-persistance.gif 'Screencapture showing blocks being restored between page refreshes.')
 
 As this is only an _experiment_, this guide has opted to utilize the browser's `localStorage` API to handle saving block data. In a real-world scenario, you would likely choose a more reliable and robust system (e.g. a database).
 
diff --git a/docs/manifest.json b/docs/manifest.json
index 94610061e430b5..830c08c0108469 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -725,6 +725,18 @@
 		"markdown_source": "../packages/components/src/button/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "DateCalendar",
+		"slug": "date-calendar",
+		"markdown_source": "../packages/components/src/calendar/date-calendar/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "DateRangeCalendar",
+		"slug": "date-range-calendar",
+		"markdown_source": "../packages/components/src/calendar/date-range-calendar/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CardBody",
 		"slug": "card-body",
@@ -2388,7 +2400,7 @@
 		"parent": "contributors"
 	},
 	{
-		"title": "Versions in WordPress",
+		"title": "Gutenberg versions in WordPress",
 		"slug": "versions-in-wordpress",
 		"markdown_source": "../docs/contributors/versions-in-wordpress.md",
 		"parent": "contributors"
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index 544f35593106f1..52f4a8709f1f05 100644
--- a/docs/reference-guides/block-api/block-attributes.md
+++ b/docs/reference-guides/block-api/block-attributes.md
@@ -461,3 +461,36 @@ _Example_: Example `default` values.
 	}
 }
 ```
+
+## Role
+
+The `role` property designates an attribute as being of a particular conceptual type. This property can be applied to any attribute to provide semantic meaning about how the attribute should be handled.
+
+Use `content` to designate the attribute as user-editable content. Blocks with attributes marked as `content` may be enabled for privileged editing in special circumstances such as content only locking.
+Use `local` to mark the attribute as temporary and non-persistable. Attributes marked as `local` are ignored by the Block Serializer and never saved to post content.
+
+_Example_: `content` role used by the paragraph block
+
+```js
+{
+    content: {
+        type: 'string',
+        source: 'html',
+        selector: 'p',
+        role: 'content',
+    }
+}
+```
+
+_Example_: `local` role used for temporary data.
+
+```js
+{
+    blob: {
+        type: 'string',
+        role: 'local',
+    }
+}
+```
+
+Learn more in the [WordPress 6.7 dev note](https://make.wordpress.org/core/2024/10/20/miscellaneous-block-editor-changes-in-wordpress-6-7/#stabilized-role-property-for-block-attributes).
\ No newline at end of file
diff --git a/docs/reference-guides/block-api/block-bindings.md b/docs/reference-guides/block-api/block-bindings.md
index c26ade45e8b5e3..dc4e397f1a9d42 100644
--- a/docs/reference-guides/block-api/block-bindings.md
+++ b/docs/reference-guides/block-api/block-bindings.md
@@ -99,6 +99,10 @@ add_action(
 );
 ```
 
+<div class="callout callout-alert">
+<strong>Note:</strong> Post meta keys that begin with an underscore (e.g. `_example_key`) are protected and cannot be used with Block Bindings. Additionally, post meta must be registered with `show_in_rest = true` to be available through the Block Bindings API.
+</div>
+
 #### Block bindings source value filter
 
 _**Note:** Since WordPress 6.7._
diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md
index a50a17b75cb54d..a00d89afdf31d7 100644
--- a/docs/reference-guides/block-api/block-edit-save.md
+++ b/docs/reference-guides/block-api/block-edit-save.md
@@ -135,6 +135,24 @@ const addListItem = ( newListItem ) => {
 
 Why do this? In JavaScript, arrays and objects are passed by reference, so this practice ensures changes won't affect other code that might hold references to the same data. Furthermore, the Gutenberg project follows the philosophy of the Redux library that [state should be immutable](https://redux.js.org/faq/immutable-data#what-are-the-benefits-of-immutability)—data should not be changed directly, but instead a new version of the data created containing the changes.
 
+The `setAttribute` also supports an updater function as an argument. It must be a pure function, which takes current attributes as its only argument and returns updated attributes. This method is helpful when you want to update an value based on a previous state or when working with objects and arrays.
+
+_**Note:** Since WordPress 6.9._
+
+```js
+// Toggle a setting when the user clicks the button.
+const toggleSetting = () =>
+	setAttributes( ( currentAttr ) => ( {
+		mySetting: ! currentAttr.mySetting,
+	} ) );
+
+// Add item to the list.
+const addListItem = ( newListItem ) =>
+	setAttributes( ( currentAttr ) => ( {
+		list: [ ...currentAttr.list, newListItem ],
+	} ) );
+```
+
 ## Save
 
 The `save` function defines the way in which the different attributes should be combined into the final markup, which is then serialized into `post_content`.
diff --git a/docs/reference-guides/block-api/block-styles.md b/docs/reference-guides/block-api/block-styles.md
index b47b1a76a71f68..b2e9bdc2749f36 100644
--- a/docs/reference-guides/block-api/block-styles.md
+++ b/docs/reference-guides/block-api/block-styles.md
@@ -64,12 +64,13 @@ The properties of the style array must include `name` and `label`:
 -   `name`: The identifier of the style used to compute a CSS class.
 -   `label`: A human-readable label for the style.
 
-Besides the two mandatory properties, the styles properties array should also include an `inline_style` or a `style_handle` property:
+Besides the two mandatory properties, the styles properties array should also include an `inline_style` or a `style_handle` or a `style_data`property:
 
 -   `inline_style`: Contains inline CSS code that registers the CSS class required for the style.
 -   `style_handle`: Contains the handle to an already registered style that should be enqueued in places where block styles are needed.
+-   `style_data`: Contains a theme.json-like notation in an array of style properties.
 
-It is also possible to set the `is_default` property to `true` to mark one of the block styles as the default one.
+It is also possible to set the `is_default` property to `true` to mark one of the block styles as the default one, should one be missing.
 
 The following code sample registers a style for the quote block named "Blue Quote", and provides an inline style that makes quote blocks with the "Blue Quote" style have blue color:
 
@@ -102,6 +103,29 @@ register_block_style(
     )
 );
 ```
+Another way is using the `style_data`property, as in below code example. It adds a block style to the image block with an orange border and slightly rounded corners.
+
+```php
+register_block_style(
+       array( 'core/image' ),
+       array(
+           'name'         => 'orange-border',
+           'label'        => __( 'Orange Border', 'pauli' ),
+           'style_data'=> array(
+                           'border' => array(
+                           'color' => '#f5bc42',
+                           'style' => 'solid',
+                           'width' => '4px',
+                           'radius' => '15px'
+            )
+        )
+    )
+);
+```
+Using the `style_data` property empowers the user to change it with the Global Styles UI via the **Editor > Styles**. The `style_data`property was added in WordPress 6.6.
+
+More information via WordPress 6.6 Dev Note: [Section Styles](https://make.wordpress.org/core/2024/06/24/section-styles/).
+Also on the WordPress Developer Blog: [Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6](https://developer.wordpress.org/news/2024/06/styling-sections-nested-elements-and-more-with-block-style-variations-in-wordpress-6-6/)
 
 ### unregister_block_style
 
diff --git a/docs/reference-guides/block-api/block-templates.md b/docs/reference-guides/block-api/block-templates.md
index b664867eb5b67f..60af351bdea110 100644
--- a/docs/reference-guides/block-api/block-templates.md
+++ b/docs/reference-guides/block-api/block-templates.md
@@ -176,7 +176,7 @@ $template = array(
 		) ),
 		array( 'core/column', array(), array(
 			array( 'core/paragraph', array(
-				'placeholder' => 'Add a inner paragraph'
+				'placeholder' => 'Add an inner paragraph'
 			) ),
 		) ),
 	) )
diff --git a/docs/reference-guides/block-api/block-transforms.md b/docs/reference-guides/block-api/block-transforms.md
index 9055ed0a3b45b3..c78842f2b43c62 100644
--- a/docs/reference-guides/block-api/block-transforms.md
+++ b/docs/reference-guides/block-api/block-transforms.md
@@ -271,7 +271,7 @@ A transformation of type `shortcode` is an object that takes the following param
 -   **type** _(string)_: the value `shortcode`.
 -   **tag** _(string|array)_: the shortcode tag or list of shortcode aliases this transform can work with.
 -   **transform** _(function, optional)_: a callback that receives the shortcode attributes as the first argument and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as the second. It should return a block object or an array of block objects. When this parameter is defined, it will take precedence over the `attributes` parameter.
--   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](./block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
+-   **attributes** _(object, optional)_: object representing where the block attributes should be sourced from, according to the attributes shape defined by the [block configuration object](/docs/reference-guides/block-api/block-registration.md). If a particular attribute contains a `shortcode` key, it should be a function that receives the shortcode attributes as the first arguments and the [WPShortcodeMatch](/packages/shortcode/README.md#next) as second, and returns a value for the attribute that will be sourced in the block's comment.
 -   **isMatch** _(function, optional)_: a callback that receives the shortcode attributes per the [Shortcode API](https://codex.wordpress.org/Shortcode_API) and should return a boolean. Returning `false` from this function will prevent the shortcode to be transformed into this block.
 -   **priority** _(number, optional)_: controls the priority with which a transform is applied, where a lower value will take precedence over higher values. This behaves much like a [WordPress hook](https://developer.wordpress.org/reference/#Hook_to_WordPress). Like hooks, the default priority is `10` when not otherwise set.
 
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a548e5df8f28a8..259e40e859aaf3 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -69,7 +69,7 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 
 -	**Name:** core/calendar
 -	**Category:** widgets
--	**Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight)
+-	**Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** month, year
 
 ## Terms List
@@ -246,7 +246,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
 -	**Name:** core/cover
 -	**Category:** media
 -	**Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), filter (duotone), interactivity (clientNavigation), layout (~~allowJustification~~), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, sizeSlug, tagName, templateLock, url, useFeaturedImage
+-	**Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, poster, sizeSlug, tagName, templateLock, url, useFeaturedImage
 
 ## Details
 
@@ -586,7 +586,6 @@ This block is deprecated. Please use the Comments block instead. ([Source](https
 Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count))
 
 -	**Name:** core/post-comments-count
--	**Experimental:** fse
 -	**Category:** theme
 -	**Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
@@ -605,7 +604,6 @@ Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg
 Displays the link to the current post comments. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-link))
 
 -	**Name:** core/post-comments-link
--	**Experimental:** fse
 -	**Category:** theme
 -	**Supports:** color (background, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
@@ -617,6 +615,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
 -	**Name:** core/post-content
 -	**Category:** theme
 -	**Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradients, heading, link, text), dimensions (minHeight), layout, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** tagName
 
 ## Date
 
@@ -852,7 +851,7 @@ Display an image to represent this site. Update this block and the changes apply
 
 ## Site Tagline
 
-Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/site-tagline))
+Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/site-tagline))
 
 -	**Name:** core/site-tagline
 -	**Category:** theme
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index c7ea40d3a6ff11..c6b498bf160fa1 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -39,7 +39,7 @@ Determines if the given blocks are allowed to be inserted into the block list.
 _Parameters_
 
 -   _state_ `Object`: Editor state.
--   _clientIds_ `string`: The block client IDs to be inserted.
+-   _clientIds_ `string[]`: The block client IDs to be inserted.
 -   _rootClientId_ `?string`: Optional root client ID of block list.
 
 _Returns_
@@ -564,15 +564,9 @@ _Returns_
 
 ### getHoveredBlockClientId
 
-Returns the currently hovered block.
-
-_Parameters_
-
--   _state_ `Object`: Global application state.
-
-_Returns_
+> **Deprecated**
 
--   `Object`: Client Id of the hovered block.
+Returns the currently hovered block.
 
 ### getInserterItems
 
@@ -1298,15 +1292,9 @@ Action that hides the insertion point.
 
 ### hoverBlock
 
-Returns an action object used in signalling that the block with the specified client ID has been hovered.
-
-_Parameters_
-
--   _clientId_ `string`: Block client ID.
-
-_Returns_
+> **Deprecated**
 
--   `Object`: Action object.
+Returns an action object used in signalling that the block with the specified client ID has been hovered.
 
 ### insertAfterBlock
 
diff --git a/docs/reference-guides/data/data-core-edit-widgets.md b/docs/reference-guides/data/data-core-edit-widgets.md
index 2dde89bf69ad73..94b4af5a9f176d 100644
--- a/docs/reference-guides/data/data-core-edit-widgets.md
+++ b/docs/reference-guides/data/data-core-edit-widgets.md
@@ -136,6 +136,39 @@ _Returns_
 
 -   `boolean`: True if any widget area is currently being saved. False otherwise.
 
+### isWidgetSavingLocked
+
+Returns whether widget saving is locked.
+
+_Usage_
+
+```jsx
+import { __ } from '@wordpress/i18n';
+import { store as widgetStore } from '@wordpress/edit-widgets';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const isSavingLocked = useSelect(
+		( select ) => select( widgetStore ).isWidgetSavingLocked(),
+		[]
+	);
+
+	return isSavingLocked ? (
+		<p>{ __( 'Widget saving is locked' ) }</p>
+	) : (
+		<p>{ __( 'Widget saving is not locked' ) }</p>
+	);
+};
+```
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Is locked.
+
 <!-- END TOKEN(Autogenerated selectors|../../../packages/edit-widgets/src/store/selectors.js) -->
 
 ## Actions
@@ -150,6 +183,34 @@ _Returns_
 
 -   `Object`: Action creator.
 
+### lockWidgetSaving
+
+Returns an action object used to signal that widget saving is locked.
+
+_Usage_
+
+```js
+import { store as widgetStore } from '@wordpress/edit-widgets';
+import { useDispatch } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { lockWidgetSaving } = useDispatch( widgetStore );
+	return (
+		<Button onClick={ () => lockWidgetSaving( 'lockName' ) }>
+			{ __( 'Lock Widget Saving' ) }
+		</Button>
+	);
+};
+```
+
+_Parameters_
+
+-   _lockName_ `string`: The lock name.
+
+_Returns_
+
+-   `Object`: Action object
+
 ### moveBlockToWidgetArea
 
 Action that handles moving a block between widget areas
@@ -270,4 +331,32 @@ _Returns_
 
 -   `Object`: Action.
 
+### unlockWidgetSaving
+
+Returns an action object used to signal that widget saving is unlocked.
+
+_Usage_
+
+```js
+import { store as widgetStore } from '@wordpress/edit-widgets';
+import { useDispatch } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const { unlockWidgetSaving } = useDispatch( widgetStore );
+	return (
+		<Button onClick={ () => unlockWidgetSaving( 'lockName' ) }>
+			{ __( 'Unlock Widget Saving' ) }
+		</Button>
+	);
+};
+```
+
+_Parameters_
+
+-   _lockName_ `string`: The lock name.
+
+_Returns_
+
+-   `Object`: Action object
+
 <!-- END TOKEN(Autogenerated actions|../../../packages/edit-widgets/src/store/actions.js) -->
diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md
index a9f07104bd3b6e..714aabaaab6e14 100644
--- a/docs/reference-guides/data/data-core-editor.md
+++ b/docs/reference-guides/data/data-core-editor.md
@@ -1006,6 +1006,27 @@ _Returns_
 
 Returns whether post autosaving is locked.
 
+_Usage_
+
+```jsx
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const isAutoSavingLocked = useSelect(
+		( select ) => select( editorStore ).isPostAutosavingLocked(),
+		[]
+	);
+
+	return isAutoSavingLocked ? (
+		<p>{ __( 'Post auto saving is locked' ) }</p>
+	) : (
+		<p>{ __( 'Post auto saving is not locked' ) }</p>
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
@@ -1042,6 +1063,27 @@ _Returns_
 
 Returns whether post saving is locked.
 
+_Usage_
+
+```jsx
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+
+const ExampleComponent = () => {
+	const isSavingLocked = useSelect(
+		( select ) => select( editorStore ).isPostSavingLocked(),
+		[]
+	);
+
+	return isSavingLocked ? (
+		<p>{ __( 'Post saving is locked' ) }</p>
+	) : (
+		<p>{ __( 'Post saving is not locked' ) }</p>
+	);
+};
+```
+
 _Parameters_
 
 -   _state_ `Object`: Global application state.
diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md
index d36098429811dd..ca71b8430285d5 100644
--- a/docs/reference-guides/data/data-core-notices.md
+++ b/docs/reference-guides/data/data-core-notices.md
@@ -73,7 +73,7 @@ const ExampleComponent = () => {
 			}
 		>
 			{ __(
-				'Generate an snackbar error notice with explicit dismiss button.'
+				'Generate a snackbar error notice with explicit dismiss button.'
 			) }
 		</Button>
 	);
diff --git a/docs/reference-guides/interactivity-api/README.md b/docs/reference-guides/interactivity-api/README.md
index 5504f8fd19fafe..87070d6314fa76 100644
--- a/docs/reference-guides/interactivity-api/README.md
+++ b/docs/reference-guides/interactivity-api/README.md
@@ -115,7 +115,7 @@ Here you have some more resources to learn/read more about the Interactivity API
 -   [Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882), especially the [showcase](https://github.com/WordPress/gutenberg/discussions/55642#discussioncomment-9667164) discussions.
 -   [wpmovies.dev](https://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
 -   Examples using the Interactivity API at [block-development-examples](https://github.com/WordPress/block-development-examples):
-    -   [`interactivity-api-block-833d15`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-block-833d15)
+    -   [`my-first-interactive-block`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/my-first-interactive-block)
     -   [`interactivity-api-countdown-3cd73e`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-countdown-3cd73e)
     -   [`interactivity-api-quiz-1835fa`](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/interactivity-api-quiz-1835fa)
 
diff --git a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
index 075c2cb977bdfd..d28e8d67007ae5 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md
@@ -175,7 +175,7 @@ store( 'myFruitPlugin', {
 
 The derived state, regardless of whether it derives from the global state, local context, or both, can also be processed on the server by the Server Directive Processing.
 
-_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+_Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
 
 ### Derived state that can be defined statically
 
diff --git a/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
index 4e4ab7cb1038ed..256f00020f9b9d 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
@@ -269,7 +269,7 @@ That's it! Now you can access the context properties with the correct types.
 
 The derived state is data that is calculated based on the global state or local context. In the client store definition, it is defined using a getter in the `state` object.
 
-_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+_Please, visit the [Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
 
 Following our previous example, let's create a derived state that is the double of our counter.
 
@@ -471,7 +471,7 @@ type Store = {
 };
 ```
 
-There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
+There's something to keep in mind when using asynchronous actions. Just like with the derived state, if an asynchronous action uses `state` within a `yield` expression (for example, by passing `state` to an async function that is then yielded) or if its return value depends on `state`, TypeScript might not be able to infer the types correctly due to a potential circular reference.
 
     ```ts
     const { state, actions } = store( 'myCounterPlugin', {
@@ -479,31 +479,76 @@ There's something to keep in mind when when using asynchronous actions. Just lik
     		counter: 0,
     	},
     	actions: {
-    		*delayedReturn() {
-    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
-    			return state.counter; // TypeScript can't infer this return type.
+    		*delayedOperation() {
+    			// Example: state.counter is used as part of the yielded logic.
+    			yield fetchCounterData( state.counter );
+
+    			// And/or the final return value depends on state.
+    			return state.counter + 1;
     		},
     	},
     } );
     ```
 
-    In this case, just as we did with the derived state, we must manually type the return value of the generator.
+In such cases, TypeScript might issue a warning about a circular reference or default to `any`. To solve this, you need to manually type the generator function. The Interactivity API provides a helper type, `AsyncAction<ReturnType>`, for this purpose.
 
     ```ts
+    import { store, type AsyncAction } from '@wordpress/interactivity';
+
     const { state, actions } = store( 'myCounterPlugin', {
     	state: {
     		counter: 0,
     	},
     	actions: {
-    		*delayedReturn(): Generator< unknown, number, unknown > {
-    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
-    			return state.counter; // Now this is correctly inferred.
+    		*delayedOperation(): AsyncAction< number > {
+    			// Now, this doesn't cause a circular reference.
+    			yield fetchCounterData( state.counter );
+
+    			// Now, this is correctly typed.
+    			return state.counter + 1;
+    		},
+    	},
+    } );
+    ```
+
+That's it! The `AsyncAction<ReturnType>` helper is defined as `Generator<any, ReturnType, unknown>`. By using `any` for the type of values yielded by the generator, it helps break the circular reference, allowing TypeScript to correctly infer the types when `state` is involved in `yield` expressions or in the final return value. You only need to specify the final `ReturnType` of your asynchronous action.
+
+### Typing yielded values in asynchronous actions
+
+While `AsyncAction<ReturnType>` types the overall generator and its final return value, the value resolved by an individual `yield` expression within that generator might still be typed as `any`.
+
+If you need to ensure the correct type for a value that a `yield` expression resolves to (e.g., the result of a `fetch` call or another async operation), you can use the `TypeYield<T>` helper. This helper takes the type of the asynchronous function/operation being yielded (`T`) and resolves to the type of the value that the promise fulfills with.
+
+Suppose `fetchCounterData` returns a promise that resolves to an object:
+
+    ```ts
+    import { store, type AsyncAction, type TypeYield } from '@wordpress/interactivity';
+
+    // Assume this function is defined elsewhere and fetches specific data.
+    const fetchCounterData = async ( counterValue: number ): Promise< { current: number, next: number } > => {
+        // internal logic...
+    };
+
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*loadCounterData(): AsyncAction< void > {
+    			// Use TypeYield to correctly type the resolved value of the yield.
+    			const data = ( yield fetchCounterData( state.counter ) ) as TypeYield< typeof fetchCounterData >;
+
+    			// Now, `data` is correctly typed as { current: number, next: number }.
+    			console.log( data.current, data.next );
+
+    			// Update state based on the fetched data.
+    			state.counter = data.next;
     		},
     	},
     } );
     ```
 
-    That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.
+In this example, `( yield fetchCounterData( state.counter ) ) as TypeYield< typeof fetchCounterData >` ensures that the `data` constant is correctly typed as `{ current: number, next: number }`, matching the return type of `fetchCounterData`. This allows you to confidently access properties like `data.current` and `data.next` with type safety.
 
 ## Typing stores that are divided into multiple parts
 
diff --git a/gutenberg.php b/gutenberg.php
index f4c03c7e60bb73..6b74180c979e63 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -3,9 +3,9 @@
  * Plugin Name: Gutenberg
  * Plugin URI: https://github.com/WordPress/gutenberg
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
- * Requires at least: 6.6
+ * Requires at least: 6.7
  * Requires PHP: 7.2
- * Version: 20.6.0-rc.1
+ * Version: 21.3.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
@@ -15,7 +15,7 @@
 ### BEGIN AUTO-GENERATED DEFINES
 defined( 'GUTENBERG_DEVELOPMENT_MODE' ) or define( 'GUTENBERG_DEVELOPMENT_MODE', true );
 ### END AUTO-GENERATED DEFINES
-defined( 'GUTENBERG_MINIMUM_WP_VERSION' ) or define( 'GUTENBERG_MINIMUM_WP_VERSION', '6.6' );
+defined( 'GUTENBERG_MINIMUM_WP_VERSION' ) or define( 'GUTENBERG_MINIMUM_WP_VERSION', '6.7' );
 
 
 gutenberg_pre_init();
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 1980faba278175..008f67adeccdde 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -149,6 +149,7 @@ function gutenberg_render_dimensions_support( $block_content, $block ) {
 	return $block_content;
 }
 
+remove_filter( 'render_block', 'wp_render_dimensions_support', 10 );
 add_filter( 'render_block', 'gutenberg_render_dimensions_support', 10, 2 );
 
 // Register the block support.
diff --git a/lib/blocks.php b/lib/blocks.php
index 342cd25191e689..75ffd0a6c34a42 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -41,7 +41,6 @@ function gutenberg_reregister_core_block_types() {
 				'table-of-contents',
 				'text-columns',
 				'verse',
-				'video',
 				'embed',
 			),
 			'block_names'   => array(
@@ -120,6 +119,7 @@ function gutenberg_reregister_core_block_types() {
 				'tag-cloud.php'                    => 'core/tag-cloud',
 				'template-part.php'                => 'core/template-part',
 				'term-description.php'             => 'core/term-description',
+				'video.php'                        => 'core/video',
 			),
 		),
 		__DIR__ . '/../build/edit-widgets/blocks/'  => array(
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 4a94ca212c3422..e6f64106cbb323 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -404,7 +404,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		array( 'wp-components' ),
 		$version
 	);
-	$styles->add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
+	$styles->add_data( 'wp-list-reusable-blocks', 'rtl', 'replace' );
 
 	gutenberg_override_style(
 		$styles,
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
deleted file mode 100644
index 08608a8d394e72..00000000000000
--- a/lib/compat/wordpress-6.7/block-bindings.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-/**
- * Temporary compatibility code for new functionalities/changes related to block bindings APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Bootstrap the block bindings sources registered in the server.
- */
-function gutenberg_bootstrap_server_block_bindings_sources() {
-	$registered_sources = get_all_registered_block_bindings_sources();
-	if ( ! empty( $registered_sources ) ) {
-		$filtered_sources = array();
-		foreach ( $registered_sources as $source ) {
-			$filtered_sources[] = array(
-				'name'        => $source->name,
-				'label'       => $source->label,
-				'usesContext' => $source->uses_context,
-			);
-		}
-		$script = sprintf( 'for ( const source of %s ) { ! wp.blocks.getBlockBindingsSource( source.name ) && wp.blocks.registerBlockBindingsSource( source ); }', wp_json_encode( $filtered_sources ) );
-		wp_add_inline_script(
-			'wp-blocks',
-			$script
-		);
-	}
-}
-
-add_action( 'enqueue_block_editor_assets', 'gutenberg_bootstrap_server_block_bindings_sources', 5 );
-
-/**
- * Initialize `canUpdateBlockBindings` editor setting if it doesn't exist. By default, it is `true` only for admin users.
- *
- * @param array $editor_settings The block editor settings from the `block_editor_settings_all` filter.
- * @return array The editor settings including `canUpdateBlockBindings`.
- */
-function gutenberg_add_can_update_block_bindings_editor_setting( $editor_settings ) {
-	if ( empty( $editor_settings['canUpdateBlockBindings'] ) ) {
-		$editor_settings['canUpdateBlockBindings'] = current_user_can( 'manage_options' );
-	}
-	return $editor_settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 );
-
-/**
- * Add `label` to `register_meta`.
- *
- * @param array  $args Array of arguments for registering meta.
- * @return array Modified arguments array including `label`.
- */
-function gutenberg_update_meta_args_with_label( $args ) {
-	// Don't update schema when label isn't provided.
-	if ( ! isset( $args['label'] ) ) {
-		return $args;
-	}
-
-	// Don't update schema if not exposed to REST
-	if ( ! isset( $args['show_in_rest'] ) ) {
-		return $args;
-	}
-
-	$schema = array( 'title' => $args['label'] );
-	if ( ! is_array( $args['show_in_rest'] ) ) {
-		$args['show_in_rest'] = array(
-			'schema' => $schema,
-		);
-		return $args;
-	}
-
-	if ( ! empty( $args['show_in_rest']['schema'] ) ) {
-		$args['show_in_rest']['schema'] = array_merge( $args['show_in_rest']['schema'], $schema );
-	} else {
-		$args['show_in_rest']['schema'] = $schema;
-	}
-
-	return $args;
-}
-
-// Priority must be lower than 10 to ensure the label is not removed.
-add_filter( 'register_meta_args', 'gutenberg_update_meta_args_with_label', 5, 1 );
diff --git a/lib/compat/wordpress-6.7/block-templates.php b/lib/compat/wordpress-6.7/block-templates.php
deleted file mode 100644
index acbd0b4981fe29..00000000000000
--- a/lib/compat/wordpress-6.7/block-templates.php
+++ /dev/null
@@ -1,84 +0,0 @@
-<?php
-/**
- * Block template functions.
- *
- * @package gutenberg
- */
-
-if ( ! function_exists( 'register_block_template' ) ) {
-	/**
-	 * Register a template.
-	 *
-	 * @param string       $template_name  Template name in the form of `plugin_uri//template_name`.
-	 * @param array|string $args           {
-	 *     @type string        $title                 Optional. Title of the template as it will be shown in the Site Editor
-	 *                                                and other UI elements.
-	 *     @type string        $description           Optional. Description of the template as it will be shown in the Site
-	 *                                                Editor.
-	 *     @type string        $content               Optional. Default content of the template that will be used when the
-	 *                                                template is rendered or edited in the editor.
-	 *     @type string[]      $post_types            Optional. Array of post types to which the template should be available.
-	 *     @type string        $plugin                Uri of the plugin that registers the template.
-	 * }
-	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
-	 */
-	function register_block_template( $template_name, $args = array() ) {
-		return WP_Block_Templates_Registry::get_instance()->register( $template_name, $args );
-	}
-}
-
-if ( ! function_exists( 'unregister_block_template' ) ) {
-	/**
-	 * Unregister a template.
-	 *
-	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
-	 * @return WP_Block_Template|WP_Error The unregistered template object on success, WP_Error object on failure or if
-	 *                                    the template doesn't exist.
-	 */
-	function unregister_block_template( $template_name ) {
-		return WP_Block_Templates_Registry::get_instance()->unregister( $template_name );
-	}
-}
-
-if ( ! function_exists( 'wp_register_block_template' ) ) {
-	/**
-	 * Register a template.
-	 *
-	 * @deprecated 19.4.0 wp_register_block_template is deprecated. Please use register_block_template instead.
-	 *
-	 * @param string       $template_name Template name in the form of `plugin_uri//template_name`.
-	 * @param array|string $args {
-	 *     Optional. Array or string of arguments for registering a block template.
-	 *
-	 *     @type string   $title       Optional. Title of the template as it will be shown in the Site Editor
-	 *                                 and other UI elements.
-	 *     @type string   $description Optional. Description of the template as it will be shown in the Site
-	 *                                 Editor.
-	 *     @type string   $content     Optional. Default content of the template that will be used when the
-	 *                                 template is rendered or edited in the editor.
-	 *     @type string[] $post_types  Optional. Array of post types to which the template should be available.
-	 *     @type string   $plugin      Uri of the plugin that registers the template.
-	 * }
-	 * @return WP_Block_Template|WP_Error The registered template object on success, WP_Error object on failure.
-	 */
-	function wp_register_block_template( $template_name, $args = array() ) {
-		_deprecated_function( __FUNCTION__, 'Gutenberg 19.4.0', 'register_block_template' );
-		return register_block_template( $template_name, $args );
-	}
-}
-
-if ( ! function_exists( 'wp_unregister_block_template' ) ) {
-	/**
-	 * Unregister a template.
-	 *
-	 * @deprecated 19.4.0 wp_unregister_block_template is deprecated. Please use unregister_block_template instead.
-	 *
-	 * @param string $template_name Template name in the form of `plugin_uri//template_name`.
-	 * @return WP_Block_Template|WP_Error The unregistered template object on success, WP_Error object on failure or if
-	 *                                    the template doesn't exist.
-	 */
-	function wp_unregister_block_template( $template_name ) {
-		_deprecated_function( __FUNCTION__, 'Gutenberg 19.4.0', 'unregister_block_template' );
-		return unregister_block_template( $template_name );
-	}
-}
diff --git a/lib/compat/wordpress-6.7/blocks.php b/lib/compat/wordpress-6.7/blocks.php
deleted file mode 100644
index e739808000c5f3..00000000000000
--- a/lib/compat/wordpress-6.7/blocks.php
+++ /dev/null
@@ -1,139 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for block APIs present in Gutenberg.
- *
- * @package gutenberg
- */
-
-/**
- * Allow passing a PHP file as `variations` field for Core versions < 6.7
- *
- * @param array $settings Array of determined settings for registering a block type.
- * @param array $metadata Metadata provided for registering a block type.
- * @return array The block type settings
- */
-function gutenberg_filter_block_type_metadata_settings_allow_variations_php_file( $settings, $metadata ) {
-	// If `variations` is a string, it's the name of a PHP file that
-	// generates the variations.
-	if ( ! empty( $settings['variations'] ) && is_string( $settings['variations'] ) ) {
-		$variations_path = wp_normalize_path(
-			realpath(
-				dirname( $metadata['file'] ) . '/' .
-				remove_block_asset_path_prefix( $settings['variations'] )
-			)
-		);
-		if ( $variations_path ) {
-			/**
-			 * Generates the list of block variations.
-			 *
-			 * @since 6.7.0
-			 *
-			 * @return string Returns the list of block variations.
-			 */
-			$settings['variation_callback'] = static function () use ( $variations_path ) {
-				$variations = require $variations_path;
-				return $variations;
-			};
-			// The block instance's `variations` field is only allowed to be an array
-			// (of known block variations). We unset it so that the block instance will
-			// provide a getter that returns the result of the `variation_callback` instead.
-			unset( $settings['variations'] );
-		}
-	}
-	return $settings;
-}
-add_filter( 'block_type_metadata_settings', 'gutenberg_filter_block_type_metadata_settings_allow_variations_php_file', 10, 2 );
-
-/**
- * Adds post format query vars to the query loop block's WP_Query when the block's attributes call for them.
- *
- * @see 'query_loop_block_query_vars'
- *
- * @param array    $query The query vars.
- * @param WP_Block $block Block instance.
- * @return array   The filtered query vars.
- */
-function gutenberg_add_format_query_vars_to_query_loop_block( $query, $block ) {
-	// Return early if there is no format or if the format is not an array.
-	if ( empty( $block->context['query']['format'] ) || ! is_array( $block->context['query']['format'] ) ) {
-		return $query;
-	}
-
-	// Return early if the query already contains a post format. This is to avoid duplication if the
-	// WordPress core filter is already applied.
-	if ( ! empty( $query['tax_query'] ) ) {
-		foreach ( $query['tax_query'] as $taxquery ) {
-			if ( isset( $taxquery['taxonomy'] ) && 'post_format' === $taxquery['taxonomy'] ) {
-				return $query;
-			}
-		}
-	}
-
-	$formats = $block->context['query']['format'];
-	/*
-	 * Validate that the format is either `standard` or a supported post format.
-	 * - First, add `standard` to the array of valid formats.
-	 * - Then, remove any invalid formats.
-	 */
-	$valid_formats = array_merge( array( 'standard' ), get_post_format_slugs() );
-	$formats       = array_intersect( $formats, $valid_formats );
-
-	/*
-	 * The relation needs to be set to `OR` since the request can contain
-	 * two separate conditions. The user may be querying for items that have
-	 * either the `standard` format or a specific format.
-	 */
-	$formats_query = array( 'relation' => 'OR' );
-
-	/*
-	 * The default post format, `standard`, is not stored in the database.
-	 * If `standard` is part of the request, the query needs to exclude all post items that
-	 * have a format assigned.
-	 */
-	if ( in_array( 'standard', $formats, true ) ) {
-		$formats_query[] = array(
-			'taxonomy' => 'post_format',
-			'field'    => 'slug',
-			'operator' => 'NOT EXISTS',
-		);
-		// Remove the `standard` format, since it cannot be queried.
-		unset( $formats[ array_search( 'standard', $formats, true ) ] );
-	}
-	// Add any remaining formats to the formats query.
-	if ( ! empty( $formats ) ) {
-		// Add the `post-format-` prefix.
-		$terms           = array_map(
-			static function ( $format ) {
-				return "post-format-$format";
-			},
-			$formats
-		);
-		$formats_query[] = array(
-			'taxonomy' => 'post_format',
-			'field'    => 'slug',
-			'terms'    => $terms,
-			'operator' => 'IN',
-		);
-	}
-
-	/*
-	 * Add `$formats_query` to `$query`, as long as it contains more than one key:
-	 * If `$formats_query` only contains the initial `relation` key, there are no valid formats to query,
-	 * and the query should not be modified.
-	 */
-	if ( count( $formats_query ) > 1 ) {
-		// Enable filtering by both post formats and other taxonomies by combining them with `AND`.
-		if ( empty( $query['tax_query'] ) ) {
-			$query['tax_query'] = $formats_query;
-		} else {
-			$query['tax_query'] = array(
-				'relation' => 'AND',
-				$query['tax_query'],
-				$formats_query,
-			);
-		}
-	}
-
-	return $query;
-}
-add_filter( 'query_loop_block_query_vars', 'gutenberg_add_format_query_vars_to_query_loop_block', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php
deleted file mode 100644
index 5d3795cf68db76..00000000000000
--- a/lib/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php
+++ /dev/null
@@ -1,704 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Posts_Controller_6_7 class
- *
- * @package WordPress
- * @subpackage REST_API
- * @since 6.7.0
- */
-
-/**
- * Extend the core WP_REST_Posts_Controller class to add support for post formats.
- *
- * @see WP_REST_Controller
- */
-class Gutenberg_REST_Posts_Controller_6_7 extends WP_REST_Posts_Controller {
-	/**
-	 * Post type.
-	 *
-	 * @since 4.7.0
-	 * @var string
-	 */
-	protected $post_type;
-
-	/**
-	 * Retrieves a collection of posts.
-	 *
-	 * @since 4.7.0
-	 * @since 6.7.0 Added support for the `format` query parameter.
-	 *
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.
-	 */
-	public function get_items( $request ) {
-		// Ensure a search string is set in case the orderby is set to 'relevance'.
-		if ( ! empty( $request['orderby'] ) && 'relevance' === $request['orderby'] && empty( $request['search'] ) ) {
-			return new WP_Error(
-				'rest_no_search_term_defined',
-				__( 'You need to define a search term to order by relevance.' ),
-				array( 'status' => 400 )
-			);
-		}
-
-		// Ensure an include parameter is set in case the orderby is set to 'include'.
-		if ( ! empty( $request['orderby'] ) && 'include' === $request['orderby'] && empty( $request['include'] ) ) {
-			return new WP_Error(
-				'rest_orderby_include_missing_include',
-				__( 'You need to define an include parameter to order by include.' ),
-				array( 'status' => 400 )
-			);
-		}
-
-		// Retrieve the list of registered collection query parameters.
-		$registered = $this->get_collection_params();
-		$args       = array();
-
-		/*
-		 * This array defines mappings between public API query parameters whose
-		 * values are accepted as-passed, and their internal WP_Query parameter
-		 * name equivalents (some are the same). Only values which are also
-		 * present in $registered will be set.
-		 */
-		$parameter_mappings = array(
-			'author'         => 'author__in',
-			'author_exclude' => 'author__not_in',
-			'exclude'        => 'post__not_in',
-			'include'        => 'post__in',
-			'menu_order'     => 'menu_order',
-			'offset'         => 'offset',
-			'order'          => 'order',
-			'orderby'        => 'orderby',
-			'page'           => 'paged',
-			'parent'         => 'post_parent__in',
-			'parent_exclude' => 'post_parent__not_in',
-			'search'         => 's',
-			'search_columns' => 'search_columns',
-			'slug'           => 'post_name__in',
-			'status'         => 'post_status',
-		);
-
-		/*
-		 * For each known parameter which is both registered and present in the request,
-		 * set the parameter's value on the query $args.
-		 */
-		foreach ( $parameter_mappings as $api_param => $wp_param ) {
-			if ( isset( $registered[ $api_param ], $request[ $api_param ] ) ) {
-				$args[ $wp_param ] = $request[ $api_param ];
-			}
-		}
-
-		// Check for & assign any parameters which require special handling or setting.
-		$args['date_query'] = array();
-
-		if ( isset( $registered['before'], $request['before'] ) ) {
-			$args['date_query'][] = array(
-				'before' => $request['before'],
-				'column' => 'post_date',
-			);
-		}
-
-		if ( isset( $registered['modified_before'], $request['modified_before'] ) ) {
-			$args['date_query'][] = array(
-				'before' => $request['modified_before'],
-				'column' => 'post_modified',
-			);
-		}
-
-		if ( isset( $registered['after'], $request['after'] ) ) {
-			$args['date_query'][] = array(
-				'after'  => $request['after'],
-				'column' => 'post_date',
-			);
-		}
-
-		if ( isset( $registered['modified_after'], $request['modified_after'] ) ) {
-			$args['date_query'][] = array(
-				'after'  => $request['modified_after'],
-				'column' => 'post_modified',
-			);
-		}
-
-		// Ensure our per_page parameter overrides any provided posts_per_page filter.
-		if ( isset( $registered['per_page'] ) ) {
-			$args['posts_per_page'] = $request['per_page'];
-		}
-
-		if ( isset( $registered['sticky'], $request['sticky'] ) ) {
-			$sticky_posts = get_option( 'sticky_posts', array() );
-			if ( ! is_array( $sticky_posts ) ) {
-				$sticky_posts = array();
-			}
-			if ( $request['sticky'] ) {
-				/*
-				 * As post__in will be used to only get sticky posts,
-				 * we have to support the case where post__in was already
-				 * specified.
-				 */
-				$args['post__in'] = $args['post__in'] ? array_intersect( $sticky_posts, $args['post__in'] ) : $sticky_posts;
-
-				/*
-				 * If we intersected, but there are no post IDs in common,
-				 * WP_Query won't return "no posts" for post__in = array()
-				 * so we have to fake it a bit.
-				 */
-				if ( ! $args['post__in'] ) {
-					$args['post__in'] = array( 0 );
-				}
-			} elseif ( $sticky_posts ) {
-				/*
-				 * As post___not_in will be used to only get posts that
-				 * are not sticky, we have to support the case where post__not_in
-				 * was already specified.
-				 */
-				$args['post__not_in'] = array_merge( $args['post__not_in'], $sticky_posts );
-			}
-		}
-
-		$args = $this->prepare_tax_query( $args, $request );
-
-		if ( ! empty( $request['format'] ) ) {
-			$formats = $request['format'];
-			/*
-			 * The relation needs to be set to `OR` since the request can contain
-			 * two separate conditions. The user may be querying for items that have
-			 * either the `standard` format or a specific format.
-			 */
-			$formats_query = array( 'relation' => 'OR' );
-
-			/*
-			 * The default post format, `standard`, is not stored in the database.
-			 * If `standard` is part of the request, the query needs to exclude all post items that
-			 * have a format assigned.
-			 */
-			if ( in_array( 'standard', $formats, true ) ) {
-				$formats_query[] = array(
-					'taxonomy' => 'post_format',
-					'field'    => 'slug',
-					'operator' => 'NOT EXISTS',
-				);
-				// Remove the `standard` format, since it cannot be queried.
-				unset( $formats[ array_search( 'standard', $formats, true ) ] );
-			}
-
-			// Add any remaining formats to the formats query.
-			if ( ! empty( $formats ) ) {
-				// Add the `post-format-` prefix.
-				$terms = array_map(
-					static function ( $format ) {
-						return "post-format-$format";
-					},
-					$formats
-				);
-
-				$formats_query[] = array(
-					'taxonomy' => 'post_format',
-					'field'    => 'slug',
-					'terms'    => $terms,
-					'operator' => 'IN',
-				);
-			}
-
-			// Enable filtering by both post formats and other taxonomies by combining them with `AND`.
-			if ( isset( $args['tax_query'] ) ) {
-				$args['tax_query'][] = array(
-					'relation' => 'AND',
-					$formats_query,
-				);
-			} else {
-				$args['tax_query'] = $formats_query;
-			}
-		}
-
-		// Force the post_type argument, since it's not a user input variable.
-		$args['post_type'] = $this->post_type;
-
-		/**
-		 * Filters WP_Query arguments when querying posts via the REST API.
-		 *
-		 * The dynamic portion of the hook name, `$this->post_type`, refers to the post type slug.
-		 *
-		 * Possible hook names include:
-		 *
-		 *  - `rest_post_query`
-		 *  - `rest_page_query`
-		 *  - `rest_attachment_query`
-		 *
-		 * Enables adding extra arguments or setting defaults for a post collection request.
-		 *
-		 * @since 4.7.0
-		 * @since 5.7.0 Moved after the `tax_query` query arg is generated.
-		 *
-		 * @link https://developer.wordpress.org/reference/classes/wp_query/
-		 *
-		 * @param array           $args    Array of arguments for WP_Query.
-		 * @param WP_REST_Request $request The REST API request.
-		 */
-		$args       = apply_filters( "rest_{$this->post_type}_query", $args, $request );
-		$query_args = $this->prepare_items_query( $args, $request );
-
-		$posts_query  = new WP_Query();
-		$query_result = $posts_query->query( $query_args );
-
-		// Allow access to all password protected posts if the context is edit.
-		if ( 'edit' === $request['context'] ) {
-			add_filter( 'post_password_required', array( $this, 'check_password_required' ), 10, 2 );
-		}
-
-		$posts = array();
-
-		update_post_author_caches( $query_result );
-		update_post_parent_caches( $query_result );
-
-		if ( post_type_supports( $this->post_type, 'thumbnail' ) ) {
-			update_post_thumbnail_cache( $posts_query );
-		}
-
-		foreach ( $query_result as $post ) {
-			if ( ! $this->check_read_permission( $post ) ) {
-				continue;
-			}
-
-			$data    = $this->prepare_item_for_response( $post, $request );
-			$posts[] = $this->prepare_response_for_collection( $data );
-		}
-
-		// Reset filter.
-		if ( 'edit' === $request['context'] ) {
-			remove_filter( 'post_password_required', array( $this, 'check_password_required' ) );
-		}
-
-		$page        = (int) $query_args['paged'];
-		$total_posts = $posts_query->found_posts;
-
-		if ( $total_posts < 1 && $page > 1 ) {
-			// Out-of-bounds, run the query again without LIMIT for total count.
-			unset( $query_args['paged'] );
-
-			$count_query = new WP_Query();
-			$count_query->query( $query_args );
-			$total_posts = $count_query->found_posts;
-		}
-
-		$max_pages = (int) ceil( $total_posts / (int) $posts_query->query_vars['posts_per_page'] );
-
-		if ( $page > $max_pages && $total_posts > 0 ) {
-			return new WP_Error(
-				'rest_post_invalid_page_number',
-				__( 'The page number requested is larger than the number of pages available.' ),
-				array( 'status' => 400 )
-			);
-		}
-
-		$response = rest_ensure_response( $posts );
-
-		$response->header( 'X-WP-Total', (int) $total_posts );
-		$response->header( 'X-WP-TotalPages', (int) $max_pages );
-
-		$request_params = $request->get_query_params();
-		$collection_url = rest_url( rest_get_route_for_post_type_items( $this->post_type ) );
-		$base           = add_query_arg( urlencode_deep( $request_params ), $collection_url );
-
-		if ( $page > 1 ) {
-			$prev_page = $page - 1;
-
-			if ( $prev_page > $max_pages ) {
-				$prev_page = $max_pages;
-			}
-
-			$prev_link = add_query_arg( 'page', $prev_page, $base );
-			$response->link_header( 'prev', $prev_link );
-		}
-		if ( $max_pages > $page ) {
-			$next_page = $page + 1;
-			$next_link = add_query_arg( 'page', $next_page, $base );
-
-			$response->link_header( 'next', $next_link );
-		}
-
-		return $response;
-	}
-
-	/**
-	 * Retrieves the query params for the posts collection.
-	 *
-	 * @since 4.7.0
-	 * @since 5.4.0 The `tax_relation` query parameter was added.
-	 * @since 5.7.0 The `modified_after` and `modified_before` query parameters were added.
-	 * @since 6.7.0 The `format` query parameter was added.
-	 *
-	 * @return array Collection parameters.
-	 */
-	public function get_collection_params() {
-		$query_params = parent::get_collection_params();
-
-		$query_params['context']['default'] = 'view';
-
-		$query_params['after'] = array(
-			'description' => __( 'Limit response to posts published after a given ISO8601 compliant date.' ),
-			'type'        => 'string',
-			'format'      => 'date-time',
-		);
-
-		$query_params['modified_after'] = array(
-			'description' => __( 'Limit response to posts modified after a given ISO8601 compliant date.' ),
-			'type'        => 'string',
-			'format'      => 'date-time',
-		);
-
-		if ( post_type_supports( $this->post_type, 'author' ) ) {
-			$query_params['author']         = array(
-				'description' => __( 'Limit result set to posts assigned to specific authors.' ),
-				'type'        => 'array',
-				'items'       => array(
-					'type' => 'integer',
-				),
-				'default'     => array(),
-			);
-			$query_params['author_exclude'] = array(
-				'description' => __( 'Ensure result set excludes posts assigned to specific authors.' ),
-				'type'        => 'array',
-				'items'       => array(
-					'type' => 'integer',
-				),
-				'default'     => array(),
-			);
-		}
-
-		$query_params['before'] = array(
-			'description' => __( 'Limit response to posts published before a given ISO8601 compliant date.' ),
-			'type'        => 'string',
-			'format'      => 'date-time',
-		);
-
-		$query_params['modified_before'] = array(
-			'description' => __( 'Limit response to posts modified before a given ISO8601 compliant date.' ),
-			'type'        => 'string',
-			'format'      => 'date-time',
-		);
-
-		$query_params['exclude'] = array(
-			'description' => __( 'Ensure result set excludes specific IDs.' ),
-			'type'        => 'array',
-			'items'       => array(
-				'type' => 'integer',
-			),
-			'default'     => array(),
-		);
-
-		$query_params['include'] = array(
-			'description' => __( 'Limit result set to specific IDs.' ),
-			'type'        => 'array',
-			'items'       => array(
-				'type' => 'integer',
-			),
-			'default'     => array(),
-		);
-
-		if ( 'page' === $this->post_type || post_type_supports( $this->post_type, 'page-attributes' ) ) {
-			$query_params['menu_order'] = array(
-				'description' => __( 'Limit result set to posts with a specific menu_order value.' ),
-				'type'        => 'integer',
-			);
-		}
-
-		$query_params['offset'] = array(
-			'description' => __( 'Offset the result set by a specific number of items.' ),
-			'type'        => 'integer',
-		);
-
-		$query_params['order'] = array(
-			'description' => __( 'Order sort attribute ascending or descending.' ),
-			'type'        => 'string',
-			'default'     => 'desc',
-			'enum'        => array( 'asc', 'desc' ),
-		);
-
-		$query_params['orderby'] = array(
-			'description' => __( 'Sort collection by post attribute.' ),
-			'type'        => 'string',
-			'default'     => 'date',
-			'enum'        => array(
-				'author',
-				'date',
-				'id',
-				'include',
-				'modified',
-				'parent',
-				'relevance',
-				'slug',
-				'include_slugs',
-				'title',
-			),
-		);
-
-		if ( 'page' === $this->post_type || post_type_supports( $this->post_type, 'page-attributes' ) ) {
-			$query_params['orderby']['enum'][] = 'menu_order';
-		}
-
-		$post_type = get_post_type_object( $this->post_type );
-
-		if ( $post_type->hierarchical || 'attachment' === $this->post_type ) {
-			$query_params['parent']         = array(
-				'description' => __( 'Limit result set to items with particular parent IDs.' ),
-				'type'        => 'array',
-				'items'       => array(
-					'type' => 'integer',
-				),
-				'default'     => array(),
-			);
-			$query_params['parent_exclude'] = array(
-				'description' => __( 'Limit result set to all items except those of a particular parent ID.' ),
-				'type'        => 'array',
-				'items'       => array(
-					'type' => 'integer',
-				),
-				'default'     => array(),
-			);
-		}
-
-		$query_params['search_columns'] = array(
-			'default'     => array(),
-			'description' => __( 'Array of column names to be searched.' ),
-			'type'        => 'array',
-			'items'       => array(
-				'enum' => array( 'post_title', 'post_content', 'post_excerpt' ),
-				'type' => 'string',
-			),
-		);
-
-		$query_params['slug'] = array(
-			'description' => __( 'Limit result set to posts with one or more specific slugs.' ),
-			'type'        => 'array',
-			'items'       => array(
-				'type' => 'string',
-			),
-		);
-
-		$query_params['status'] = array(
-			'default'           => 'publish',
-			'description'       => __( 'Limit result set to posts assigned one or more statuses.' ),
-			'type'              => 'array',
-			'items'             => array(
-				'enum' => array_merge( array_keys( get_post_stati() ), array( 'any' ) ),
-				'type' => 'string',
-			),
-			'sanitize_callback' => array( $this, 'sanitize_post_statuses' ),
-		);
-
-		$query_params = $this->prepare_taxonomy_limit_schema( $query_params );
-
-		if ( 'post' === $this->post_type ) {
-			$query_params['sticky'] = array(
-				'description' => __( 'Limit result set to items that are sticky.' ),
-				'type'        => 'boolean',
-			);
-		}
-
-		if ( post_type_supports( $this->post_type, 'post-formats' ) ) {
-			$query_params['format'] = array(
-				'description' => __( 'Limit result set to items assigned one or more given formats.' ),
-				'type'        => 'array',
-				'uniqueItems' => true,
-				'items'       => array(
-					'enum' => array_values( get_post_format_slugs() ),
-					'type' => 'string',
-				),
-			);
-		}
-
-		/**
-		 * Filters collection parameters for the posts controller.
-		 *
-		 * The dynamic part of the filter `$this->post_type` refers to the post
-		 * type slug for the controller.
-		 *
-		 * This filter registers the collection parameter, but does not map the
-		 * collection parameter to an internal WP_Query parameter. Use the
-		 * `rest_{$this->post_type}_query` filter to set WP_Query parameters.
-		 *
-		 * @since 4.7.0
-		 *
-		 * @param array        $query_params JSON Schema-formatted collection parameters.
-		 * @param WP_Post_Type $post_type    Post type object.
-		 */
-		return apply_filters( "rest_{$this->post_type}_collection_params", $query_params, $post_type );
-	}
-
-	/**
-	 * Prepares the 'tax_query' for a collection of posts.
-	 *
-	 * @since 5.7.0
-	 *
-	 * @param array           $args    WP_Query arguments.
-	 * @param WP_REST_Request $request Full details about the request.
-	 * @return array Updated query arguments.
-	 */
-	private function prepare_tax_query( array $args, WP_REST_Request $request ) {
-		$relation = $request['tax_relation'];
-
-		if ( $relation ) {
-			$args['tax_query'] = array( 'relation' => $relation );
-		}
-
-		$taxonomies = wp_list_filter(
-			get_object_taxonomies( $this->post_type, 'objects' ),
-			array( 'show_in_rest' => true )
-		);
-
-		foreach ( $taxonomies as $taxonomy ) {
-			$base = ! empty( $taxonomy->rest_base ) ? $taxonomy->rest_base : $taxonomy->name;
-
-			$tax_include = $request[ $base ];
-			$tax_exclude = $request[ $base . '_exclude' ];
-
-			if ( $tax_include ) {
-				$terms            = array();
-				$include_children = false;
-				$operator         = 'IN';
-
-				if ( rest_is_array( $tax_include ) ) {
-					$terms = $tax_include;
-				} elseif ( rest_is_object( $tax_include ) ) {
-					$terms            = empty( $tax_include['terms'] ) ? array() : $tax_include['terms'];
-					$include_children = ! empty( $tax_include['include_children'] );
-
-					if ( isset( $tax_include['operator'] ) && 'AND' === $tax_include['operator'] ) {
-						$operator = 'AND';
-					}
-				}
-
-				if ( $terms ) {
-					$args['tax_query'][] = array(
-						'taxonomy'         => $taxonomy->name,
-						'field'            => 'term_id',
-						'terms'            => $terms,
-						'include_children' => $include_children,
-						'operator'         => $operator,
-					);
-				}
-			}
-
-			if ( $tax_exclude ) {
-				$terms            = array();
-				$include_children = false;
-
-				if ( rest_is_array( $tax_exclude ) ) {
-					$terms = $tax_exclude;
-				} elseif ( rest_is_object( $tax_exclude ) ) {
-					$terms            = empty( $tax_exclude['terms'] ) ? array() : $tax_exclude['terms'];
-					$include_children = ! empty( $tax_exclude['include_children'] );
-				}
-
-				if ( $terms ) {
-					$args['tax_query'][] = array(
-						'taxonomy'         => $taxonomy->name,
-						'field'            => 'term_id',
-						'terms'            => $terms,
-						'include_children' => $include_children,
-						'operator'         => 'NOT IN',
-					);
-				}
-			}
-		}
-
-		return $args;
-	}
-
-	/**
-	 * Prepares the collection schema for including and excluding items by terms.
-	 *
-	 * @since 5.7.0
-	 *
-	 * @param array $query_params Collection schema.
-	 * @return array Updated schema.
-	 */
-	private function prepare_taxonomy_limit_schema( array $query_params ) {
-		$taxonomies = wp_list_filter( get_object_taxonomies( $this->post_type, 'objects' ), array( 'show_in_rest' => true ) );
-
-		if ( ! $taxonomies ) {
-			return $query_params;
-		}
-
-		$query_params['tax_relation'] = array(
-			'description' => __( 'Limit result set based on relationship between multiple taxonomies.' ),
-			'type'        => 'string',
-			'enum'        => array( 'AND', 'OR' ),
-		);
-
-		$limit_schema = array(
-			'type'  => array( 'object', 'array' ),
-			'oneOf' => array(
-				array(
-					'title'       => __( 'Term ID List' ),
-					'description' => __( 'Match terms with the listed IDs.' ),
-					'type'        => 'array',
-					'items'       => array(
-						'type' => 'integer',
-					),
-				),
-				array(
-					'title'                => __( 'Term ID Taxonomy Query' ),
-					'description'          => __( 'Perform an advanced term query.' ),
-					'type'                 => 'object',
-					'properties'           => array(
-						'terms'            => array(
-							'description' => __( 'Term IDs.' ),
-							'type'        => 'array',
-							'items'       => array(
-								'type' => 'integer',
-							),
-							'default'     => array(),
-						),
-						'include_children' => array(
-							'description' => __( 'Whether to include child terms in the terms limiting the result set.' ),
-							'type'        => 'boolean',
-							'default'     => false,
-						),
-					),
-					'additionalProperties' => false,
-				),
-			),
-		);
-
-		$include_schema = array_merge(
-			array(
-				/* translators: %s: Taxonomy name. */
-				'description' => __( 'Limit result set to items with specific terms assigned in the %s taxonomy.' ),
-			),
-			$limit_schema
-		);
-		// 'operator' is supported only for 'include' queries.
-		$include_schema['oneOf'][1]['properties']['operator'] = array(
-			'description' => __( 'Whether items must be assigned all or any of the specified terms.' ),
-			'type'        => 'string',
-			'enum'        => array( 'AND', 'OR' ),
-			'default'     => 'OR',
-		);
-
-		$exclude_schema = array_merge(
-			array(
-				/* translators: %s: Taxonomy name. */
-				'description' => __( 'Limit result set to items except those with specific terms assigned in the %s taxonomy.' ),
-			),
-			$limit_schema
-		);
-
-		foreach ( $taxonomies as $taxonomy ) {
-			$base         = ! empty( $taxonomy->rest_base ) ? $taxonomy->rest_base : $taxonomy->name;
-			$base_exclude = $base . '_exclude';
-
-			$query_params[ $base ]                = $include_schema;
-			$query_params[ $base ]['description'] = sprintf( $query_params[ $base ]['description'], $base );
-
-			$query_params[ $base_exclude ]                = $exclude_schema;
-			$query_params[ $base_exclude ]['description'] = sprintf( $query_params[ $base_exclude ]['description'], $base );
-
-			if ( ! $taxonomy->hierarchical ) {
-				unset( $query_params[ $base ]['oneOf'][1]['properties']['include_children'] );
-				unset( $query_params[ $base_exclude ]['oneOf'][1]['properties']['include_children'] );
-			}
-		}
-
-		return $query_params;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
deleted file mode 100644
index efdc41289dfac2..00000000000000
--- a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
+++ /dev/null
@@ -1,185 +0,0 @@
-<?php
-/**
- * A custom REST server for Gutenberg.
- *
- * @package gutenberg
- * @since   6.7.0
- */
-
-class Gutenberg_REST_Server extends WP_REST_Server {
-	/**
-	 * Converts a response to data to send.
-	 *
-	 * @since 4.4.0
-	 * @since 5.4.0 The `$embed` parameter can now contain a list of link relations to include.
-	 *
-	 * @param WP_REST_Response $response Response object.
-	 * @param bool|string[]    $embed    Whether to embed all links, a filtered list of link relations, or no links.
-	 * @return array {
-	 *     Data with sub-requests embedded.
-	 *
-	 *     @type array $_links    Links.
-	 *     @type array $_embedded Embedded objects.
-	 * }
-	 */
-	// @core-merge: Do not merge. The method is copied here to fix the inheritance issue.
-	public function response_to_data( $response, $embed ) {
-		$data  = $response->get_data();
-		$links = static::get_compact_response_links( $response );
-
-		if ( ! empty( $links ) ) {
-			// Convert links to part of the data.
-			$data['_links'] = $links;
-		}
-
-		if ( $embed ) {
-			$this->embed_cache = array();
-			// Determine if this is a numeric array.
-			if ( wp_is_numeric_array( $data ) ) {
-				foreach ( $data as $key => $item ) {
-					$data[ $key ] = $this->embed_links( $item, $embed );
-				}
-			} else {
-				$data = $this->embed_links( $data, $embed );
-			}
-			$this->embed_cache = array();
-		}
-
-		return $data;
-	}
-
-	/**
-	 * Retrieves links from a response.
-	 *
-	 * Extracts the links from a response into a structured hash, suitable for
-	 * direct output.
-	 *
-	 * @since 4.4.0
-	 * @since 6.7.0 The `targetHints` property to the `self` link object was added.
-	 *
-	 * @param WP_REST_Response $response Response to extract links from.
-	 * @return array Map of link relation to list of link hashes.
-	 */
-	public static function get_response_links( $response ) {
-		$links = $response->get_links();
-
-		if ( empty( $links ) ) {
-			return array();
-		}
-
-		$server = rest_get_server();
-
-		// Convert links to part of the data.
-		$data = array();
-		foreach ( $links as $rel => $items ) {
-			$data[ $rel ] = array();
-
-			foreach ( $items as $item ) {
-				$attributes         = $item['attributes'];
-				$attributes['href'] = $item['href'];
-
-				if ( 'self' !== $rel ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				// Prefer targetHints that were specifically designated by the developer.
-				if ( isset( $attributes['targetHints']['allow'] ) ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				$request = WP_REST_Request::from_url( $item['href'] );
-				if ( ! $request ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				$matched = $server->match_request_to_handler( $request );
-
-				if ( is_wp_error( $matched ) ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				if ( is_wp_error( $request->has_valid_params() ) ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				if ( is_wp_error( $request->sanitize_params() ) ) {
-					$data[ $rel ][] = $attributes;
-					continue;
-				}
-
-				list( $route, $handler ) = $matched;
-
-				$response = new WP_REST_Response();
-				$response->set_matched_route( $route );
-				$response->set_matched_handler( $handler );
-				$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
-
-				foreach ( $headers as $name => $value ) {
-					$name                               = WP_REST_Request::canonicalize_header_name( $name );
-					$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
-				}
-
-				$data[ $rel ][] = $attributes;
-			}
-		}
-
-		return $data;
-	}
-
-	/**
-	 * Retrieves the CURIEs (compact URIs) used for relations.
-	 *
-	 * Extracts the links from a response into a structured hash, suitable for
-	 * direct output.
-	 *
-	 * @since 4.5.0
-	 *
-	 * @param WP_REST_Response $response Response to extract links from.
-	 * @return array Map of link relation to list of link hashes.
-	 */
-	// @core-merge: Do not merge. The method is copied here to fix the inheritance issue.
-	public static function get_compact_response_links( $response ) {
-		$links = static::get_response_links( $response );
-
-		if ( empty( $links ) ) {
-			return array();
-		}
-
-		$curies      = $response->get_curies();
-		$used_curies = array();
-
-		foreach ( $links as $rel => $items ) {
-
-			// Convert $rel URIs to their compact versions if they exist.
-			foreach ( $curies as $curie ) {
-				$href_prefix = substr( $curie['href'], 0, strpos( $curie['href'], '{rel}' ) );
-				if ( ! str_starts_with( $rel, $href_prefix ) ) {
-					continue;
-				}
-
-				// Relation now changes from '$uri' to '$curie:$relation'.
-				$rel_regex = str_replace( '\{rel\}', '(.+)', preg_quote( $curie['href'], '!' ) );
-				preg_match( '!' . $rel_regex . '!', $rel, $matches );
-				if ( $matches ) {
-					$new_rel                       = $curie['name'] . ':' . $matches[1];
-					$used_curies[ $curie['name'] ] = $curie;
-					$links[ $new_rel ]             = $items;
-					unset( $links[ $rel ] );
-					break;
-				}
-			}
-		}
-
-		// Push the curies onto the start of the links array.
-		if ( $used_curies ) {
-			$links['curies'] = array_values( $used_curies );
-		}
-
-		return $links;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
deleted file mode 100644
index e5f6eb126f2a6a..00000000000000
--- a/lib/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php
+++ /dev/null
@@ -1,203 +0,0 @@
-<?php
-/**
- * REST API: Gutenberg_REST_Templates_Controller_6_7 class
- *
- * @package    gutenberg
- */
-
-/**
- * Gutenberg_REST_Templates_Controller_6_7 class
- *
- */
-class Gutenberg_REST_Templates_Controller_6_7 extends WP_REST_Templates_Controller {
-	/**
-	 * Returns the given template
-	 *
-	 * @param WP_REST_Request $request The request instance.
-	 * @return WP_REST_Response|WP_Error
-	 */
-	public function get_item( $request ) {
-		if ( isset( $request['source'] ) && ( 'theme' === $request['source'] || 'plugin' === $request['source'] ) ) {
-			$template = get_block_file_template( $request['id'], $this->post_type );
-		} else {
-			$template = get_block_template( $request['id'], $this->post_type );
-		}
-
-		if ( ! $template ) {
-			return new WP_Error( 'rest_template_not_found', __( 'No templates exist with that id.' ), array( 'status' => 404 ) );
-		}
-
-		return $this->prepare_item_for_response( $template, $request );
-	}
-
-	/**
-	 * Prepare a single template output for response
-	 *
-	 * @param WP_Block_Template $item    Template instance.
-	 * @param WP_REST_Request   $request Request object.
-	 * @return WP_REST_Response Response object.
-	 */
-	// @core-merge: Fix wrong author in plugin templates.
-	public function prepare_item_for_response( $item, $request ) {
-		$template = $item;
-
-		$fields = $this->get_fields_for_response( $request );
-
-		if ( 'plugin' !== $item->origin ) {
-			return parent::prepare_item_for_response( $item, $request );
-		}
-		$cloned_item = clone $item;
-		// Set the origin as theme when calling the previous `prepare_item_for_response()` to prevent warnings when generating the author text.
-		$cloned_item->origin = 'theme';
-		$response            = parent::prepare_item_for_response( $cloned_item, $request );
-		$data                = $response->data;
-
-		if ( rest_is_field_included( 'origin', $fields ) ) {
-			$data['origin'] = 'plugin';
-		}
-
-		if ( rest_is_field_included( 'plugin', $fields ) ) {
-			$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $cloned_item->slug );
-			if ( $registered_template ) {
-				$data['plugin'] = $registered_template->plugin;
-			}
-		}
-
-		if ( rest_is_field_included( 'author_text', $fields ) ) {
-			$data['author_text'] = $this->get_wp_templates_author_text_field( $template );
-		}
-
-		if ( rest_is_field_included( 'original_source', $fields ) ) {
-			$data['original_source'] = $this->get_wp_templates_original_source_field( $template );
-		}
-
-		$response = rest_ensure_response( $data );
-
-		if ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {
-			$links = $this->prepare_links( $template->id );
-			$response->add_links( $links );
-			if ( ! empty( $links['self']['href'] ) ) {
-				$actions = $this->get_available_actions();
-				$self    = $links['self']['href'];
-				foreach ( $actions as $rel ) {
-					$response->add_link( $rel, $self );
-				}
-			}
-		}
-
-		return $response;
-	}
-
-	/**
-	 * Returns the source from where the template originally comes from.
-	 *
-	 * @param WP_Block_Template $template_object Template instance.
-	 * @return string                            Original source of the template one of theme, plugin, site, or user.
-	 */
-	// @core-merge: Changed the comments format (from inline to multi-line) in the entire function.
-	private static function get_wp_templates_original_source_field( $template_object ) {
-		if ( 'wp_template' === $template_object->type || 'wp_template_part' === $template_object->type ) {
-			/*
-			 * Added by theme.
-			 * Template originally provided by a theme, but customized by a user.
-			 * Templates originally didn't have the 'origin' field so identify
-			 * older customized templates by checking for no origin and a 'theme'
-			 * or 'custom' source.
-			 */
-			if ( $template_object->has_theme_file &&
-			( 'theme' === $template_object->origin || (
-				empty( $template_object->origin ) && in_array(
-					$template_object->source,
-					array(
-						'theme',
-						'custom',
-					),
-					true
-				) )
-			)
-			) {
-				return 'theme';
-			}
-
-			// Added by plugin.
-			// @core-merge: Removed `$template_object->has_theme_file` check from this if clause.
-			if ( 'plugin' === $template_object->origin ) {
-				return 'plugin';
-			}
-
-			/*
-			 * Added by site.
-			 * Template was created from scratch, but has no author. Author support
-			 * was only added to templates in WordPress 5.9. Fallback to showing the
-			 * site logo and title.
-			 */
-			if ( empty( $template_object->has_theme_file ) && 'custom' === $template_object->source && empty( $template_object->author ) ) {
-				return 'site';
-			}
-		}
-
-		// Added by user.
-		return 'user';
-	}
-
-	/**
-	 * Returns a human readable text for the author of the template.
-	 *
-	 * @param WP_Block_Template $template_object Template instance.
-	 * @return string                            Human readable text for the author.
-	 */
-	private static function get_wp_templates_author_text_field( $template_object ) {
-		$original_source = self::get_wp_templates_original_source_field( $template_object );
-		switch ( $original_source ) {
-			case 'theme':
-				$theme_name = wp_get_theme( $template_object->theme )->get( 'Name' );
-				return empty( $theme_name ) ? $template_object->theme : $theme_name;
-			case 'plugin':
-				// @core-merge: Prioritize plugin name instead of theme name for plugin-registered templates.
-				if ( ! function_exists( 'get_plugins' ) || ! function_exists( 'get_plugin_data' ) ) {
-					require_once ABSPATH . 'wp-admin/includes/plugin.php';
-				}
-				if ( isset( $template_object->plugin ) ) {
-					$plugins = wp_get_active_and_valid_plugins();
-
-					foreach ( $plugins as $plugin_file ) {
-						$plugin_basename = plugin_basename( $plugin_file );
-						// Split basename by '/' to get the plugin slug.
-						list( $plugin_slug, ) = explode( '/', $plugin_basename );
-
-						if ( $plugin_slug === $template_object->plugin ) {
-							$plugin_data = get_plugin_data( $plugin_file );
-
-							if ( ! empty( $plugin_data['Name'] ) ) {
-								return $plugin_data['Name'];
-							}
-
-							break;
-						}
-					}
-				}
-
-				/*
-				 * Fall back to the theme name if the plugin is not defined. That's needed to keep backwards
-				 * compatibility with templates that were registered before the plugin attribute was added.
-				 */
-				$plugins         = get_plugins();
-				$plugin_basename = plugin_basename( sanitize_text_field( $template_object->theme . '.php' ) );
-				if ( isset( $plugins[ $plugin_basename ] ) && isset( $plugins[ $plugin_basename ]['Name'] ) ) {
-					return $plugins[ $plugin_basename ]['Name'];
-				}
-				return isset( $template_object->plugin ) ?
-					$template_object->plugin :
-					$template_object->theme;
-				// @core-merge: End of changes to merge in core.
-			case 'site':
-				return get_bloginfo( 'name' );
-			case 'user':
-				$author = get_user_by( 'id', $template_object->author );
-				if ( ! $author ) {
-					return __( 'Unknown author' );
-				}
-				return $author->get( 'display_name' );
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php b/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php
deleted file mode 100644
index a2142171ddc14f..00000000000000
--- a/lib/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php
+++ /dev/null
@@ -1,820 +0,0 @@
-<?php
-
-/**
- * Class for efficiently looking up and mapping string keys to string values, with limits.
- *
- * @package    WordPress
- * @since      6.6.0
- */
-
-/**
- * WP_Token_Map class.
- *
- * Use this class in specific circumstances with a static set of lookup keys which map to
- * a static set of transformed values. For example, this class is used to map HTML named
- * character references to their equivalent UTF-8 values.
- *
- * This class works differently than code calling `in_array()` and other methods. It
- * internalizes lookup logic and provides helper interfaces to optimize lookup and
- * transformation. It provides a method for precomputing the lookup tables and storing
- * them as PHP source code.
- *
- * All tokens and substitutions must be shorter than 256 bytes.
- *
- * Example:
- *
- *     $smilies = WP_Token_Map::from_array( array(
- *         '8O' => '😯',
- *         ':(' => '🙁',
- *         ':)' => '🙂',
- *         ':?' => '😕',
- *      ) );
- *
- *      true  === $smilies->contains( ':)' );
- *      false === $smilies->contains( 'simile' );
- *
- *      '😕' === $smilies->read_token( 'Not sure :?.', 9, $length_of_smily_syntax );
- *      2    === $length_of_smily_syntax;
- *
- * ## Precomputing the Token Map.
- *
- * Creating the class involves some work sorting and organizing the tokens and their
- * replacement values. In order to skip this, it's possible for the class to export
- * its state and be used as actual PHP source code.
- *
- * Example:
- *
- *      // Export with four spaces as the indent, only for the sake of this docblock.
- *      // The default indent is a tab character.
- *      $indent = '    ';
- *      echo $smilies->precomputed_php_source_table( $indent );
- *
- *      // Output, to be pasted into a PHP source file:
- *      WP_Token_Map::from_precomputed_table(
- *          array(
- *              "storage_version" => "6.6.0",
- *              "key_length" => 2,
- *              "groups" => "",
- *              "long_words" => array(),
- *              "small_words" => "8O\x00:)\x00:(\x00:?\x00",
- *              "small_mappings" => array( "😯", "🙂", "🙁", "😕" )
- *          )
- *      );
- *
- * ## Large vs. small words.
- *
- * This class uses a short prefix called the "key" to optimize lookup of its tokens.
- * This means that some tokens may be shorter than or equal in length to that key.
- * Those words that are longer than the key are called "large" while those shorter
- * than or equal to the key length are called "small."
- *
- * This separation of large and small words is incidental to the way this class
- * optimizes lookup, and should be considered an internal implementation detail
- * of the class. It may still be important to be aware of it, however.
- *
- * ## Determining Key Length.
- *
- * The choice of the size of the key length should be based on the data being stored in
- * the token map. It should divide the data as evenly as possible, but should not create
- * so many groups that a large fraction of the groups only contain a single token.
- *
- * For the HTML5 named character references, a key length of 2 was found to provide a
- * sufficient spread and should be a good default for relatively large sets of tokens.
- *
- * However, for some data sets this might be too long. For example, a list of smilies
- * may be too small for a key length of 2. Perhaps 1 would be more appropriate. It's
- * best to experiment and determine empirically which values are appropriate.
- *
- * ## Generate Pre-Computed Source Code.
- *
- * Since the `WP_Token_Map` is designed for relatively static lookups, it can be
- * advantageous to precompute the values and instantiate a table that has already
- * sorted and grouped the tokens and built the lookup strings.
- *
- * This can be done with `WP_Token_Map::precomputed_php_source_table()`.
- *
- * Note that if there is a leading character that all tokens need, such as `&` for
- * HTML named character references, it can be beneficial to exclude this from the
- * token map. Instead, find occurrences of the leading character and then use the
- * token map to see if the following characters complete the token.
- *
- * Example:
- *
- *     $map = WP_Token_Map::from_array( array( 'simple_smile:' => '🙂', 'sob:' => '😭', 'soba:' => '🍜' ) );
- *     echo $map->precomputed_php_source_table();
- *     // Output
- *     WP_Token_Map::from_precomputed_table(
- *         array(
- *             "storage_version" => "6.6.0",
- *             "key_length" => 2,
- *             "groups" => "si\x00so\x00",
- *             "long_words" => array(
- *                 // simple_smile:[🙂].
- *                 "\x0bmple_smile:\x04🙂",
- *                 // soba:[🍜] sob:[😭].
- *                 "\x03ba:\x04🍜\x02b:\x04😭",
- *             ),
- *             "short_words" => "",
- *             "short_mappings" => array()
- *         }
- *     );
- *
- * This precomputed value can be stored directly in source code and will skip the
- * startup cost of generating the lookup strings. See `$html5_named_character_entities`.
- *
- * Note that any updates to the precomputed format should update the storage version
- * constant. It would also be best to provide an update function to take older known
- * versions and upgrade them in place when loading into `from_precomputed_table()`.
- *
- * ## Future Direction.
- *
- * It may be viable to dynamically increase the length limits such that there's no need to impose them.
- * The limit appears because of the packing structure, which indicates how many bytes each segment of
- * text in the lookup tables spans. If, however, care were taken to track the longest word length, then
- * the packing structure could change its representation to allow for that. Each additional byte storing
- * length, however, increases the memory overhead and lookup runtime.
- *
- * An alternative approach could be to borrow the UTF-8 variable-length encoding and store lengths of less
- * than 127 as a single byte with the high bit unset, storing longer lengths as the combination of
- * continuation bytes.
- *
- * Since it has not been shown during the development of this class that longer strings are required, this
- * update is deferred until such a need is clear.
- *
- * @since 6.6.0
- */
-class Gutenberg_Token_Map_6_7 {
-	/**
-	 * Denotes the version of the code which produces pre-computed source tables.
-	 *
-	 * This version will be used not only to verify pre-computed data, but also
-	 * to upgrade pre-computed data from older versions. Choosing a name that
-	 * corresponds to the WordPress release will help people identify where an
-	 * old copy of data came from.
-	 */
-	const STORAGE_VERSION = '6.6.0-trunk';
-
-	/**
-	 * Maximum length for each key and each transformed value in the table (in bytes).
-	 *
-	 * @since 6.6.0
-	 */
-	const MAX_LENGTH = 256;
-
-	/**
-	 * How many bytes of each key are used to form a group key for lookup.
-	 * This also determines whether a word is considered short or long.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var int
-	 */
-	private $key_length = 2;
-
-	/**
-	 * Stores an optimized form of the word set, where words are grouped
-	 * by a prefix of the `$key_length` and then collapsed into a string.
-	 *
-	 * In each group, the keys and lookups form a packed data structure.
-	 * The keys in the string are stripped of their "group key," which is
-	 * the prefix of length `$this->key_length` shared by all of the items
-	 * in the group. Each word in the string is prefixed by a single byte
-	 * whose raw unsigned integer value represents how many bytes follow.
-	 *
-	 *     ┌────────────────┬───────────────┬─────────────────┬────────┐
-	 *     │ Length of rest │ Rest of key   │ Length of value │ Value  │
-	 *     │ of key (bytes) │               │ (bytes)         │        │
-	 *     ├────────────────┼───────────────┼─────────────────┼────────┤
-	 *     │ 0x08           │ nterDot;      │ 0x02            │ ·      │
-	 *     └────────────────┴───────────────┴─────────────────┴────────┘
-	 *
-	 * In this example, the key `CenterDot;` has a group key `Ce`, leaving
-	 * eight bytes for the rest of the key, `nterDot;`, and two bytes for
-	 * the transformed value `·` (or U+B7 or "\xC2\xB7").
-	 *
-	 * Example:
-	 *
-	 *    // Stores array( 'CenterDot;' => '·', 'Cedilla;' => '¸' ).
-	 *    $groups      = "Ce\x00";
-	 *    $large_words = array( "\x08nterDot;\x02·\x06dilla;\x02¸" )
-	 *
-	 * The prefixes appear in the `$groups` string, each followed by a null
-	 * byte. This makes for quick lookup of where in the group string the key
-	 * is found, and then a simple division converts that offset into the index
-	 * in the `$large_words` array where the group string is to be found.
-	 *
-	 * This lookup data structure is designed to optimize cache locality and
-	 * minimize indirect memory reads when matching strings in the set.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var array
-	 */
-	private $large_words = array();
-
-	/**
-	 * Stores the group keys for sequential string lookup.
-	 *
-	 * The offset into this string where the group key appears corresponds with the index
-	 * into the group array where the rest of the group string appears. This is an optimization
-	 * to improve cache locality while searching and minimize indirect memory accesses.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var string
-	 */
-	private $groups = '';
-
-	/**
-	 * Stores an optimized row of small words, where every entry is
-	 * `$this->key_size + 1` bytes long and zero-extended.
-	 *
-	 * This packing allows for direct lookup of a short word followed
-	 * by the null byte, if extended to `$this->key_size + 1`.
-	 *
-	 * Example:
-	 *
-	 *     // Stores array( 'GT', 'LT', 'gt', 'lt' ).
-	 *     "GT\x00LT\x00gt\x00lt\x00"
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var string
-	 */
-	private $small_words = '';
-
-	/**
-	 * Replacements for the small words, in the same order they appear.
-	 *
-	 * With the position of a small word it's possible to index the translation
-	 * directly, as its position in the `$small_words` string corresponds to
-	 * the index of the replacement in the `$small_mapping` array.
-	 *
-	 * Example:
-	 *
-	 *     array( '>', '<', '>', '<' )
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var string[]
-	 */
-	private $small_mappings = array();
-
-	/**
-	 * Create a token map using an associative array of key/value pairs as the input.
-	 *
-	 * Example:
-	 *
-	 *     $smilies = WP_Token_Map::from_array( array(
-	 *          '8O' => '😯',
-	 *          ':(' => '🙁',
-	 *          ':)' => '🙂',
-	 *          ':?' => '😕',
-	 *       ) );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param array $mappings   The keys transform into the values, both are strings.
-	 * @param int   $key_length Determines the group key length. Leave at the default value
-	 *                          of 2 unless there's an empirical reason to change it.
-	 *
-	 * @return WP_Token_Map|null Token map, unless unable to create it.
-	 */
-	public static function from_array( array $mappings, int $key_length = 2 ): ?WP_Token_Map {
-		$map             = new WP_Token_Map();
-		$map->key_length = $key_length;
-
-		// Start by grouping words.
-
-		$groups = array();
-		$shorts = array();
-		foreach ( $mappings as $word => $mapping ) {
-			if (
-				self::MAX_LENGTH <= strlen( $word ) ||
-				self::MAX_LENGTH <= strlen( $mapping )
-			) {
-				_doing_it_wrong(
-					__METHOD__,
-					sprintf(
-						/* translators: 1: maximum byte length (a count) */
-						__( 'Token Map tokens and substitutions must all be shorter than %1$d bytes.' ),
-						self::MAX_LENGTH
-					),
-					'6.6.0'
-				);
-				return null;
-			}
-
-			$length = strlen( $word );
-
-			if ( $key_length >= $length ) {
-				$shorts[] = $word;
-			} else {
-				$group = substr( $word, 0, $key_length );
-
-				if ( ! isset( $groups[ $group ] ) ) {
-					$groups[ $group ] = array();
-				}
-
-				$groups[ $group ][] = array( substr( $word, $key_length ), $mapping );
-			}
-		}
-
-		/*
-		 * Sort the words to ensure that no smaller substring of a match masks the full match.
-		 * For example, `Cap` should not match before `CapitalDifferentialD`.
-		 */
-		usort( $shorts, 'WP_Token_Map::longest_first_then_alphabetical' );
-		foreach ( $groups as $group_key => $group ) {
-			usort(
-				$groups[ $group_key ],
-				static function ( array $a, array $b ): int {
-					return self::longest_first_then_alphabetical( $a[0], $b[0] );
-				}
-			);
-		}
-
-		// Finally construct the optimized lookups.
-
-		foreach ( $shorts as $word ) {
-			$map->small_words     .= str_pad( $word, $key_length + 1, "\x00", STR_PAD_RIGHT );
-			$map->small_mappings[] = $mappings[ $word ];
-		}
-
-		$group_keys = array_keys( $groups );
-		sort( $group_keys );
-
-		foreach ( $group_keys as $group ) {
-			$map->groups .= "{$group}\x00";
-
-			$group_string = '';
-
-			foreach ( $groups[ $group ] as $group_word ) {
-				list( $word, $mapping ) = $group_word;
-
-				$word_length    = pack( 'C', strlen( $word ) );
-				$mapping_length = pack( 'C', strlen( $mapping ) );
-				$group_string  .= "{$word_length}{$word}{$mapping_length}{$mapping}";
-			}
-
-			$map->large_words[] = $group_string;
-		}
-
-		return $map;
-	}
-
-	/**
-	 * Creates a token map from a pre-computed table.
-	 * This skips the initialization cost of generating the table.
-	 *
-	 * This function should only be used to load data created with
-	 * WP_Token_Map::precomputed_php_source_tag().
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param array $state {
-	 *     Stores pre-computed state for directly loading into a Token Map.
-	 *
-	 *     @type string $storage_version Which version of the code produced this state.
-	 *     @type int    $key_length      Group key length.
-	 *     @type string $groups          Group lookup index.
-	 *     @type array  $large_words     Large word groups and packed strings.
-	 *     @type string $small_words     Small words packed string.
-	 *     @type array  $small_mappings  Small word mappings.
-	 * }
-	 *
-	 * @return WP_Token_Map Map with precomputed data loaded.
-	 */
-	public static function from_precomputed_table( $state ): ?WP_Token_Map {
-		$has_necessary_state = isset(
-			$state['storage_version'],
-			$state['key_length'],
-			$state['groups'],
-			$state['large_words'],
-			$state['small_words'],
-			$state['small_mappings']
-		);
-
-		if ( ! $has_necessary_state ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Missing required inputs to pre-computed WP_Token_Map.' ),
-				'6.6.0'
-			);
-			return null;
-		}
-
-		if ( self::STORAGE_VERSION !== $state['storage_version'] ) {
-			_doing_it_wrong(
-				__METHOD__,
-				/* translators: 1: version string, 2: version string. */
-				sprintf( __( 'Loaded version \'%1$s\' incompatible with expected version \'%2$s\'.' ), $state['storage_version'], self::STORAGE_VERSION ),
-				'6.6.0'
-			);
-			return null;
-		}
-
-		$map = new WP_Token_Map();
-
-		$map->key_length     = $state['key_length'];
-		$map->groups         = $state['groups'];
-		$map->large_words    = $state['large_words'];
-		$map->small_words    = $state['small_words'];
-		$map->small_mappings = $state['small_mappings'];
-
-		return $map;
-	}
-
-	/**
-	 * Indicates if a given word is a lookup key in the map.
-	 *
-	 * Example:
-	 *
-	 *     true  === $smilies->contains( ':)' );
-	 *     false === $smilies->contains( 'simile' );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $word             Determine if this word is a lookup key in the map.
-	 * @param string $case_sensitivity Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
-	 * @return bool Whether there's an entry for the given word in the map.
-	 */
-	public function contains( string $word, string $case_sensitivity = 'case-sensitive' ): bool {
-		$ignore_case = 'ascii-case-insensitive' === $case_sensitivity;
-
-		if ( $this->key_length >= strlen( $word ) ) {
-			if ( 0 === strlen( $this->small_words ) ) {
-				return false;
-			}
-
-			$term    = str_pad( $word, $this->key_length + 1, "\x00", STR_PAD_RIGHT );
-			$word_at = $ignore_case ? stripos( $this->small_words, $term ) : strpos( $this->small_words, $term );
-			if ( false === $word_at ) {
-				return false;
-			}
-
-			return true;
-		}
-
-		$group_key = substr( $word, 0, $this->key_length );
-		$group_at  = $ignore_case ? stripos( $this->groups, $group_key ) : strpos( $this->groups, $group_key );
-		if ( false === $group_at ) {
-			return false;
-		}
-		$group        = $this->large_words[ $group_at / ( $this->key_length + 1 ) ];
-		$group_length = strlen( $group );
-		$slug         = substr( $word, $this->key_length );
-		$length       = strlen( $slug );
-		$at           = 0;
-
-		while ( $at < $group_length ) {
-			$token_length   = unpack( 'C', $group[ $at++ ] )[1];
-			$token_at       = $at;
-			$at            += $token_length;
-			$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
-			$mapping_at     = $at;
-
-			if ( $token_length === $length && 0 === substr_compare( $group, $slug, $token_at, $token_length, $ignore_case ) ) {
-				return true;
-			}
-
-			$at = $mapping_at + $mapping_length;
-		}
-
-		return false;
-	}
-
-	/**
-	 * If the text starting at a given offset is a lookup key in the map,
-	 * return the corresponding transformation from the map, else `false`.
-	 *
-	 * This function returns the translated string, but accepts an optional
-	 * parameter `$matched_token_byte_length`, which communicates how many
-	 * bytes long the lookup key was, if it found one. This can be used to
-	 * advance a cursor in calling code if a lookup key was found.
-	 *
-	 * Example:
-	 *
-	 *     false === $smilies->read_token( 'Not sure :?.', 0, $token_byte_length );
-	 *     '😕'  === $smilies->read_token( 'Not sure :?.', 9, $token_byte_length );
-	 *     2     === $token_byte_length;
-	 *
-	 * Example:
-	 *
-	 *     while ( $at < strlen( $input ) ) {
-	 *         $next_at = strpos( $input, ':', $at );
-	 *         if ( false === $next_at ) {
-	 *             break;
-	 *         }
-	 *
-	 *         $smily = $smilies->read_token( $input, $next_at, $token_byte_length );
-	 *         if ( false === $next_at ) {
-	 *             ++$at;
-	 *             continue;
-	 *         }
-	 *
-	 *         $prefix  = substr( $input, $at, $next_at - $at );
-	 *         $at     += $token_byte_length;
-	 *         $output .= "{$prefix}{$smily}";
-	 *     }
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string   $text                       String in which to search for a lookup key.
-	 * @param int      $offset                     Optional. How many bytes into the string where the lookup key ought to start. Default 0.
-	 * @param int|null &$matched_token_byte_length Optional. Holds byte-length of found token matched, otherwise not set. Default null.
-	 * @param string   $case_sensitivity           Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
-	 *
-	 * @return string|null Mapped value of lookup key if found, otherwise `null`.
-	 */
-	public function read_token( string $text, int $offset = 0, &$matched_token_byte_length = null, $case_sensitivity = 'case-sensitive' ): ?string {
-		$ignore_case = 'ascii-case-insensitive' === $case_sensitivity;
-		$text_length = strlen( $text );
-
-		// Search for a long word first, if the text is long enough, and if that fails, a short one.
-		if ( $text_length > $this->key_length ) {
-			$group_key = substr( $text, $offset, $this->key_length );
-
-			$group_at = $ignore_case ? stripos( $this->groups, $group_key ) : strpos( $this->groups, $group_key );
-			if ( false === $group_at ) {
-				// Perhaps a short word then.
-				return strlen( $this->small_words ) > 0
-					? $this->read_small_token( $text, $offset, $matched_token_byte_length, $case_sensitivity )
-					: null;
-			}
-
-			$group        = $this->large_words[ $group_at / ( $this->key_length + 1 ) ];
-			$group_length = strlen( $group );
-			$at           = 0;
-			while ( $at < $group_length ) {
-				$token_length   = unpack( 'C', $group[ $at++ ] )[1];
-				$token          = substr( $group, $at, $token_length );
-				$at            += $token_length;
-				$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
-				$mapping_at     = $at;
-
-				if ( 0 === substr_compare( $text, $token, $offset + $this->key_length, $token_length, $ignore_case ) ) {
-					$matched_token_byte_length = $this->key_length + $token_length;
-					return substr( $group, $mapping_at, $mapping_length );
-				}
-
-				$at = $mapping_at + $mapping_length;
-			}
-		}
-
-		// Perhaps a short word then.
-		return strlen( $this->small_words ) > 0
-			? $this->read_small_token( $text, $offset, $matched_token_byte_length, $case_sensitivity )
-			: null;
-	}
-
-	/**
-	 * Finds a match for a short word at the index.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string   $text                       String in which to search for a lookup key.
-	 * @param int      $offset                     Optional. How many bytes into the string where the lookup key ought to start. Default 0.
-	 * @param int|null &$matched_token_byte_length Optional. Holds byte-length of found lookup key if matched, otherwise not set. Default null.
-	 * @param string   $case_sensitivity           Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching. Default 'case-sensitive'.
-	 *
-	 * @return string|null Mapped value of lookup key if found, otherwise `null`.
-	 */
-	private function read_small_token( string $text, int $offset = 0, &$matched_token_byte_length = null, $case_sensitivity = 'case-sensitive' ): ?string {
-		$ignore_case  = 'ascii-case-insensitive' === $case_sensitivity;
-		$small_length = strlen( $this->small_words );
-		$search_text  = substr( $text, $offset, $this->key_length );
-		if ( $ignore_case ) {
-			$search_text = strtoupper( $search_text );
-		}
-		$starting_char = $search_text[0];
-
-		$at = 0;
-		while ( $at < $small_length ) {
-			if (
-				$starting_char !== $this->small_words[ $at ] &&
-				( ! $ignore_case || strtoupper( $this->small_words[ $at ] ) !== $starting_char )
-			) {
-				$at += $this->key_length + 1;
-				continue;
-			}
-
-			for ( $adjust = 1; $adjust < $this->key_length; $adjust++ ) {
-				if ( "\x00" === $this->small_words[ $at + $adjust ] ) {
-					$matched_token_byte_length = $adjust;
-					return $this->small_mappings[ $at / ( $this->key_length + 1 ) ];
-				}
-
-				if (
-					$search_text[ $adjust ] !== $this->small_words[ $at + $adjust ] &&
-					( ! $ignore_case || strtoupper( $this->small_words[ $at + $adjust ] !== $search_text[ $adjust ] ) )
-				) {
-					$at += $this->key_length + 1;
-					continue 2;
-				}
-			}
-
-			$matched_token_byte_length = $adjust;
-			return $this->small_mappings[ $at / ( $this->key_length + 1 ) ];
-		}
-
-		return null;
-	}
-
-	/**
-	 * Exports the token map into an associate array of key/value pairs.
-	 *
-	 * Example:
-	 *
-	 *     $smilies->to_array() === array(
-	 *         '8O' => '😯',
-	 *         ':(' => '🙁',
-	 *         ':)' => '🙂',
-	 *         ':?' => '😕',
-	 *     );
-	 *
-	 * @return array The lookup key/substitution values as an associate array.
-	 */
-	public function to_array(): array {
-		$tokens = array();
-
-		$at            = 0;
-		$small_mapping = 0;
-		$small_length  = strlen( $this->small_words );
-		while ( $at < $small_length ) {
-			$key            = rtrim( substr( $this->small_words, $at, $this->key_length + 1 ), "\x00" );
-			$value          = $this->small_mappings[ $small_mapping++ ];
-			$tokens[ $key ] = $value;
-
-			$at += $this->key_length + 1;
-		}
-
-		foreach ( $this->large_words as $index => $group ) {
-			$prefix       = substr( $this->groups, $index * ( $this->key_length + 1 ), 2 );
-			$group_length = strlen( $group );
-			$at           = 0;
-			while ( $at < $group_length ) {
-				$length = unpack( 'C', $group[ $at++ ] )[1];
-				$key    = $prefix . substr( $group, $at, $length );
-
-				$at    += $length;
-				$length = unpack( 'C', $group[ $at++ ] )[1];
-				$value  = substr( $group, $at, $length );
-
-				$tokens[ $key ] = $value;
-				$at            += $length;
-			}
-		}
-
-		return $tokens;
-	}
-
-	/**
-	 * Export the token map for quick loading in PHP source code.
-	 *
-	 * This function has a specific purpose, to make loading of static token maps fast.
-	 * It's used to ensure that the HTML character reference lookups add a minimal cost
-	 * to initializing the PHP process.
-	 *
-	 * Example:
-	 *
-	 *     echo $smilies->precomputed_php_source_table();
-	 *
-	 *     // Output.
-	 *     WP_Token_Map::from_precomputed_table(
-	 *         array(
-	 *             "storage_version" => "6.6.0",
-	 *             "key_length" => 2,
-	 *             "groups" => "",
-	 *             "long_words" => array(),
-	 *             "small_words" => "8O\x00:)\x00:(\x00:?\x00",
-	 *             "small_mappings" => array( "😯", "🙂", "🙁", "😕" )
-	 *         )
-	 *     );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $indent Optional. Use this string for indentation, or rely on the default horizontal tab character. Default "\t".
-	 * @return string Value which can be pasted into a PHP source file for quick loading of table.
-	 */
-	public function precomputed_php_source_table( string $indent = "\t" ): string {
-		$i1 = $indent;
-		$i2 = $i1 . $indent;
-		$i3 = $i2 . $indent;
-
-		$class_version = self::STORAGE_VERSION;
-
-		$output  = self::class . "::from_precomputed_table(\n";
-		$output .= "{$i1}array(\n";
-		$output .= "{$i2}\"storage_version\" => \"{$class_version}\",\n";
-		$output .= "{$i2}\"key_length\" => {$this->key_length},\n";
-
-		$group_line = str_replace( "\x00", "\\x00", $this->groups );
-		$output    .= "{$i2}\"groups\" => \"{$group_line}\",\n";
-
-		$output .= "{$i2}\"large_words\" => array(\n";
-
-		$prefixes = explode( "\x00", $this->groups );
-		foreach ( $prefixes as $index => $prefix ) {
-			if ( '' === $prefix ) {
-				break;
-			}
-			$group        = $this->large_words[ $index ];
-			$group_length = strlen( $group );
-			$comment_line = "{$i3}//";
-			$data_line    = "{$i3}\"";
-			$at           = 0;
-			while ( $at < $group_length ) {
-				$token_length   = unpack( 'C', $group[ $at++ ] )[1];
-				$token          = substr( $group, $at, $token_length );
-				$at            += $token_length;
-				$mapping_length = unpack( 'C', $group[ $at++ ] )[1];
-				$mapping        = substr( $group, $at, $mapping_length );
-				$at            += $mapping_length;
-
-				$token_digits   = str_pad( dechex( $token_length ), 2, '0', STR_PAD_LEFT );
-				$mapping_digits = str_pad( dechex( $mapping_length ), 2, '0', STR_PAD_LEFT );
-
-				$mapping = preg_replace_callback(
-					"~[\\x00-\\x1f\\x22\\x5c]~",
-					static function ( $match_result ) {
-						switch ( $match_result[0] ) {
-							case '"':
-								return '\\"';
-
-							case '\\':
-								return '\\\\';
-
-							default:
-								$hex = dechex( ord( $match_result[0] ) );
-								return "\\x{$hex}";
-						}
-					},
-					$mapping
-				);
-
-				$comment_line .= " {$prefix}{$token}[{$mapping}]";
-				$data_line    .= "\\x{$token_digits}{$token}\\x{$mapping_digits}{$mapping}";
-			}
-			$comment_line .= ".\n";
-			$data_line    .= "\",\n";
-
-			$output .= $comment_line;
-			$output .= $data_line;
-		}
-
-		$output .= "{$i2}),\n";
-
-		$small_words  = array();
-		$small_length = strlen( $this->small_words );
-		$at           = 0;
-		while ( $at < $small_length ) {
-			$small_words[] = substr( $this->small_words, $at, $this->key_length + 1 );
-			$at           += $this->key_length + 1;
-		}
-
-		$small_text = str_replace( "\x00", '\x00', implode( '', $small_words ) );
-		$output    .= "{$i2}\"small_words\" => \"{$small_text}\",\n";
-
-		$output .= "{$i2}\"small_mappings\" => array(\n";
-		foreach ( $this->small_mappings as $mapping ) {
-			$output .= "{$i3}\"{$mapping}\",\n";
-		}
-		$output .= "{$i2})\n";
-		$output .= "{$i1})\n";
-		$output .= ')';
-
-		return $output;
-	}
-
-	/**
-	 * Compares two strings, returning the longest, or whichever
-	 * is first alphabetically if they are the same length.
-	 *
-	 * This is an important sort when building the token map because
-	 * it should not form a match on a substring of a longer potential
-	 * match. For example, it should not detect `Cap` when matching
-	 * against the string `CapitalDifferentialD`.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $a First string to compare.
-	 * @param string $b Second string to compare.
-	 * @return int -1 or lower if `$a` is less than `$b`; 1 or greater if `$a` is greater than `$b`, and 0 if they are equal.
-	 */
-	private static function longest_first_then_alphabetical( string $a, string $b ): int {
-		if ( $a === $b ) {
-			return 0;
-		}
-
-		$length_a = strlen( $a );
-		$length_b = strlen( $b );
-
-		// Longer strings are less-than for comparison's sake.
-		if ( $length_a !== $length_b ) {
-			return $length_b - $length_a;
-		}
-
-		return strcmp( $a, $b );
-	}
-}
diff --git a/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php b/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
deleted file mode 100644
index 92673c0bf50f90..00000000000000
--- a/lib/compat/wordpress-6.7/class-wp-block-templates-registry.php
+++ /dev/null
@@ -1,256 +0,0 @@
-<?php
-/**
- * Templates registry functions.
- *
- * @package Gutenberg
- * @since 6.7.0
- */
-
-if ( ! class_exists( 'WP_Block_Templates_Registry' ) ) {
-	/**
-	 * Core class used for interacting with templates.
-	 *
-	 * @since 6.7.0
-	 */
-	final class WP_Block_Templates_Registry {
-		/**
-		 * Registered templates, as `$name => $instance` pairs.
-		 *
-		 * @since 6.7.0
-		 * @var WP_Block_Template[] $registered_block_templates Registered templates.
-		 */
-		private $registered_templates = array();
-
-		/**
-		 * Container for the main instance of the class.
-		 *
-		 * @since 6.7.0
-		 * @var WP_Block_Templates_Registry|null
-		 */
-		private static $instance = null;
-
-		/**
-		 * Registers a template.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param string $template_name Template name including namespace.
-		 * @param array  $args          Optional. Array of template arguments.
-		 * @return WP_Block_Template|WP_Error The registered template on success, or WP_Error on failure.
-		 */
-		public function register( $template_name, $args = array() ) {
-
-			$template = null;
-
-			$error_message = '';
-			$error_code    = '';
-			if ( ! is_string( $template_name ) ) {
-				$error_message = __( 'Template names must be strings.', 'gutenberg' );
-				$error_code    = 'template_name_no_string';
-			} elseif ( preg_match( '/[A-Z]+/', $template_name ) ) {
-				$error_message = __( 'Template names must not contain uppercase characters.', 'gutenberg' );
-				$error_code    = 'template_name_no_uppercase';
-			} elseif ( ! preg_match( '/^[a-z0-9-]+\/\/[a-z0-9-]+$/', $template_name ) ) {
-				$error_message = __( 'Template names must contain a namespace prefix. Example: my-plugin//my-custom-template', 'gutenberg' );
-				$error_code    = 'template_no_prefix';
-			} elseif ( $this->is_registered( $template_name ) ) {
-				/* translators: %s: Template name. */
-				$error_message = sprintf( __( 'Template "%s" is already registered.', 'gutenberg' ), $template_name );
-				$error_code    = 'template_already_registered';
-			}
-
-			if ( $error_message ) {
-				_doing_it_wrong(
-					__METHOD__,
-					$error_message,
-					'6.7.0'
-				);
-				return new WP_Error( $error_code, $error_message );
-			}
-
-			if ( ! $template ) {
-				$theme_name             = get_stylesheet();
-				list( $plugin, $slug )  = explode( '//', $template_name );
-				$default_template_types = get_default_block_template_types();
-
-				$template              = new WP_Block_Template();
-				$template->id          = $theme_name . '//' . $slug;
-				$template->theme       = $theme_name;
-				$template->plugin      = $plugin;
-				$template->author      = null;
-				$template->content     = isset( $args['content'] ) ? $args['content'] : '';
-				$template->source      = 'plugin';
-				$template->slug        = $slug;
-				$template->type        = 'wp_template';
-				$template->title       = isset( $args['title'] ) ? $args['title'] : $template_name;
-				$template->description = isset( $args['description'] ) ? $args['description'] : '';
-				$template->status      = 'publish';
-				$template->origin      = 'plugin';
-				$template->is_custom   = ! isset( $default_template_types[ $template_name ] );
-				$template->post_types  = isset( $args['post_types'] ) ? $args['post_types'] : array();
-			}
-
-			$this->registered_templates[ $template_name ] = $template;
-
-			return $template;
-		}
-
-		/**
-		 * Retrieves all registered templates.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @return WP_Block_Template[] Associative array of `$template_name => $template` pairs.
-		 */
-		public function get_all_registered() {
-			return $this->registered_templates;
-		}
-
-		/**
-		 * Retrieves a registered template by its name.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param string $template_name Template name including namespace.
-		 * @return WP_Block_Template|null The registered template, or null if it is not registered.
-		 */
-		public function get_registered( $template_name ) {
-			if ( ! $this->is_registered( $template_name ) ) {
-				return null;
-			}
-
-			return $this->registered_templates[ $template_name ];
-		}
-
-		/**
-		 * Retrieves a registered template by its slug.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param string $template_slug Slug of the template.
-		 * @return WP_Block_Template|null The registered template, or null if it is not registered.
-		 */
-		public function get_by_slug( $template_slug ) {
-			$all_templates = $this->get_all_registered();
-
-			if ( ! $all_templates ) {
-				return null;
-			}
-
-			foreach ( $all_templates as $template ) {
-				if ( $template->slug === $template_slug ) {
-					return $template;
-				}
-			}
-
-			return null;
-		}
-
-		/**
-		 * Retrieves registered templates matching a query.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param array  $query {
-		 *     Arguments to retrieve templates. Optional, empty by default.
-		 *
-		 *     @type string[] $slug__in     List of slugs to include.
-		 *     @type string[] $slug__not_in List of slugs to skip.
-		 *     @type string   $post_type    Post type to get the templates for.
-		 * }
-		 */
-		public function get_by_query( $query = array() ) {
-			$all_templates = $this->get_all_registered();
-
-			if ( ! $all_templates ) {
-				return array();
-			}
-
-			$query            = wp_parse_args(
-				$query,
-				array(
-					'slug__in'     => array(),
-					'slug__not_in' => array(),
-					'post_type'    => '',
-				)
-			);
-			$slugs_to_include = $query['slug__in'];
-			$slugs_to_skip    = $query['slug__not_in'];
-			$post_type        = $query['post_type'];
-
-			$matching_templates = array();
-			foreach ( $all_templates as $template_name => $template ) {
-				if ( $slugs_to_include && ! in_array( $template->slug, $slugs_to_include, true ) ) {
-					continue;
-				}
-
-				if ( $slugs_to_skip && in_array( $template->slug, $slugs_to_skip, true ) ) {
-					continue;
-				}
-
-				if ( $post_type && ! in_array( $post_type, $template->post_types, true ) ) {
-					continue;
-				}
-
-				$matching_templates[ $template_name ] = $template;
-			}
-
-			return $matching_templates;
-		}
-
-		/**
-		 * Checks if a template is registered.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param string $template_name Template name.
-		 * @return bool True if the template is registered, false otherwise.
-		 */
-		public function is_registered( $template_name ) {
-			return isset( $this->registered_templates[ $template_name ] );
-		}
-
-		/**
-		 * Unregisters a template.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @param string $template_name Template name including namespace.
-		 * @return WP_Block_Template|WP_Error The unregistered template on success, or WP_Error on failure.
-		 */
-		public function unregister( $template_name ) {
-			if ( ! $this->is_registered( $template_name ) ) {
-				_doing_it_wrong(
-					__METHOD__,
-					/* translators: %s: Template name. */
-					sprintf( __( 'Template "%s" is not registered.', 'gutenberg' ), $template_name ),
-					'6.7.0'
-				);
-				/* translators: %s: Template name. */
-				return new WP_Error( 'template_not_registered', __( 'Template "%s" is not registered.', 'gutenberg' ) );
-			}
-
-			$unregistered_template = $this->registered_templates[ $template_name ];
-			unset( $this->registered_templates[ $template_name ] );
-
-			return $unregistered_template;
-		}
-
-		/**
-		 * Utility method to retrieve the main instance of the class.
-		 *
-		 * The instance will be created if it does not exist yet.
-		 *
-		 * @since 6.7.0
-		 *
-		 * @return WP_Block_Templates_Registry The main instance.
-		 */
-		public static function get_instance() {
-			if ( null === self::$instance ) {
-				self::$instance = new self();
-			}
-
-			return self::$instance;
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.7/compat.php b/lib/compat/wordpress-6.7/compat.php
deleted file mode 100644
index 98ea34c813ae43..00000000000000
--- a/lib/compat/wordpress-6.7/compat.php
+++ /dev/null
@@ -1,126 +0,0 @@
-<?php
-/**
- * WordPress 6.7 compatibility functions.
- *
- * @package gutenberg
- */
-
-/**
- * Hooks into `get_block_templates` so templates from the registry are also returned, as long as there
- * isn't a theme template with the same slug.
- *
- * @param WP_Block_Template[] $query_result Array of found block templates.
- * @param array               $query {
- *     Arguments to retrieve templates. All arguments are optional.
- *
- *     @type string[] $slug__in  List of slugs to include.
- *     @type int      $wp_id     Post ID of customized template.
- *     @type string   $area      A 'wp_template_part_area' taxonomy value to filter by (for 'wp_template_part' template type only).
- *     @type string   $post_type Post type to get the templates for.
- * }
- * @param string              $template_type wp_template or wp_template_part.
- * @return WP_Block_Template[] The same $query_result but might contain some additional templates from
- * the registry.
- */
-function _gutenberg_add_block_templates_from_registry( $query_result, $query, $template_type ) {
-	// Add `plugin` property to templates registered by a plugin.
-	foreach ( $query_result as $key => $value ) {
-		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $query_result[ $key ]->slug );
-		if ( $registered_template ) {
-			$query_result[ $key ]->plugin      = $registered_template->plugin;
-			$query_result[ $key ]->origin      =
-				'theme' !== $query_result[ $key ]->origin && 'theme' !== $query_result[ $key ]->source ?
-				'plugin' :
-				$query_result[ $key ]->origin;
-			$query_result[ $key ]->title       =
-				empty( $query_result[ $key ]->title ) || $query_result[ $key ]->title === $query_result[ $key ]->slug ?
-				$registered_template->title : $query_result[ $key ]->title;
-			$query_result[ $key ]->description = empty( $query_result[ $key ]->description ) ? $registered_template->description : $query_result[ $key ]->description;
-		}
-	}
-
-	if ( ! isset( $query['wp_id'] ) ) {
-		// We need to unset the post_type query param because some templates
-		// would be excluded otherwise, like `page.html` when looking for
-		// `page` templates.
-		// See: https://github.com/WordPress/gutenberg/issues/65584
-		$template_files_query = $query;
-		unset( $template_files_query['post_type'] );
-		$template_files = _get_block_templates_files( $template_type, $template_files_query );
-
-		/*
-		 * Add templates registered in the template registry. Filtering out the ones which have a theme file.
-		 */
-		$registered_templates          = WP_Block_Templates_Registry::get_instance()->get_by_query( $query );
-		$matching_registered_templates = array_filter(
-			$registered_templates,
-			function ( $registered_template ) use ( $template_files ) {
-				foreach ( $template_files as $template_file ) {
-					if ( $template_file['slug'] === $registered_template->slug ) {
-						return false;
-					}
-				}
-				return true;
-			}
-		);
-		$query_result                  = array_merge( $query_result, $matching_registered_templates );
-	}
-
-	return $query_result;
-}
-add_filter( 'get_block_templates', '_gutenberg_add_block_templates_from_registry', 10, 3 );
-
-/**
- * Hooks into `get_block_template` to add the `plugin` property when necessary.
- *
- * @param WP_Block_Template|null $block_template The found block template, or null if there isn’t one.
- * @return WP_Block_Template|null The block template that was already found with the plugin property defined if it was registered by a plugin.
- */
-function _gutenberg_add_block_template_plugin_attribute( $block_template ) {
-	if ( $block_template ) {
-		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
-		if ( $registered_template ) {
-			$block_template->plugin      = $registered_template->plugin;
-			$block_template->origin      =
-				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
-				'plugin' :
-				$block_template->origin;
-			$block_template->title       = empty( $block_template->title ) || $block_template->title === $block_template->slug ? $registered_template->title : $block_template->title;
-			$block_template->description = empty( $block_template->description ) ? $registered_template->description : $block_template->description;
-		}
-	}
-
-	return $block_template;
-}
-add_filter( 'get_block_template', '_gutenberg_add_block_template_plugin_attribute', 10, 1 );
-
-/**
- * Hooks into `get_block_file_template` so templates from the registry are also returned.
- *
- * @param WP_Block_Template|null $block_template The found block template, or null if there is none.
- * @param string                 $id             Template unique identifier (example: 'theme_slug//template_slug').
- * @return WP_Block_Template|null The block template that was already found or from the registry. In case the template was already found, add the necessary details from the registry.
- */
-function _gutenberg_add_block_file_templates_from_registry( $block_template, $id ) {
-	if ( $block_template ) {
-		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
-		if ( $registered_template ) {
-			$block_template->plugin = $registered_template->plugin;
-			$block_template->origin =
-				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
-				'plugin' :
-				$block_template->origin;
-		}
-		return $block_template;
-	}
-
-	$parts = explode( '//', $id, 2 );
-
-	if ( count( $parts ) < 2 ) {
-		return $block_template;
-	}
-
-	list( , $slug ) = $parts;
-	return WP_Block_Templates_Registry::get_instance()->get_by_slug( $slug );
-}
-add_filter( 'get_block_file_template', '_gutenberg_add_block_file_templates_from_registry', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php
deleted file mode 100644
index 10f53fe82ce4e0..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php
+++ /dev/null
@@ -1,187 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Active_Formatting_Elements class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used by the HTML processor during HTML parsing
- * for managing the stack of active formatting elements.
- *
- * This class is designed for internal use by the HTML processor.
- *
- * > Initially, the list of active formatting elements is empty.
- * > It is used to handle mis-nested formatting element tags.
- * >
- * > The list contains elements in the formatting category, and markers.
- * > The markers are inserted when entering applet, object, marquee,
- * > template, td, th, and caption elements, and are used to prevent
- * > formatting from "leaking" into applet, object, marquee, template,
- * > td, th, and caption elements.
- * >
- * > In addition, each element in the list of active formatting elements
- * > is associated with the token for which it was created, so that
- * > further elements can be created for that token if necessary.
- *
- * @since 6.4.0
- *
- * @access private
- *
- * @see https://html.spec.whatwg.org/#list-of-active-formatting-elements
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Active_Formatting_Elements_6_7 {
-	/**
-	 * Holds the stack of active formatting element references.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var WP_HTML_Token[]
-	 */
-	private $stack = array();
-
-	/**
-	 * Reports if a specific node is in the stack of active formatting elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $token Look for this node in the stack.
-	 * @return bool Whether the referenced node is in the stack of active formatting elements.
-	 */
-	public function contains_node( Gutenberg_HTML_Token_6_7 $token ) {
-		foreach ( $this->walk_up() as $item ) {
-			if ( $token->bookmark_name === $item->bookmark_name ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Returns how many nodes are currently in the stack of active formatting elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return int How many node are in the stack of active formatting elements.
-	 */
-	public function count() {
-		return count( $this->stack );
-	}
-
-	/**
-	 * Returns the node at the end of the stack of active formatting elements,
-	 * if one exists. If the stack is empty, returns null.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return WP_HTML_Token|null Last node in the stack of active formatting elements, if one exists, otherwise null.
-	 */
-	public function current_node() {
-		$current_node = end( $this->stack );
-
-		return $current_node ? $current_node : null;
-	}
-
-	/**
-	 * Pushes a node onto the stack of active formatting elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#push-onto-the-list-of-active-formatting-elements
-	 *
-	 * @param WP_HTML_Token $token Push this node onto the stack.
-	 */
-	public function push( Gutenberg_HTML_Token_6_7 $token ) {
-		/*
-		 * > If there are already three elements in the list of active formatting elements after the last marker,
-		 * > if any, or anywhere in the list if there are no markers, that have the same tag name, namespace, and
-		 * > attributes as element, then remove the earliest such element from the list of active formatting
-		 * > elements. For these purposes, the attributes must be compared as they were when the elements were
-		 * > created by the parser; two elements have the same attributes if all their parsed attributes can be
-		 * > paired such that the two attributes in each pair have identical names, namespaces, and values
-		 * > (the order of the attributes does not matter).
-		 *
-		 * @todo Implement the "Noah's Ark clause" to only add up to three of any given kind of formatting elements to the stack.
-		 */
-		// > Add element to the list of active formatting elements.
-		$this->stack[] = $token;
-	}
-
-	/**
-	 * Removes a node from the stack of active formatting elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $token Remove this node from the stack, if it's there already.
-	 * @return bool Whether the node was found and removed from the stack of active formatting elements.
-	 */
-	public function remove_node( Gutenberg_HTML_Token_6_7 $token ) {
-		foreach ( $this->walk_up() as $position_from_end => $item ) {
-			if ( $token->bookmark_name !== $item->bookmark_name ) {
-				continue;
-			}
-
-			$position_from_start = $this->count() - $position_from_end - 1;
-			array_splice( $this->stack, $position_from_start, 1 );
-			return true;
-		}
-
-		return false;
-	}
-
-	/**
-	 * Steps through the stack of active formatting elements, starting with the
-	 * top element (added first) and walking downwards to the one added last.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $html = '<em><strong><a>We are here';
-	 *     foreach ( $stack->walk_down() as $node ) {
-	 *         echo "{$node->node_name} -> ";
-	 *     }
-	 *     > EM -> STRONG -> A ->
-	 *
-	 * To start with the most-recently added element and walk towards the top,
-	 * see WP_HTML_Active_Formatting_Elements::walk_up().
-	 *
-	 * @since 6.4.0
-	 */
-	public function walk_down() {
-		$count = count( $this->stack );
-
-		for ( $i = 0; $i < $count; $i++ ) {
-			yield $this->stack[ $i ];
-		}
-	}
-
-	/**
-	 * Steps through the stack of active formatting elements, starting with the
-	 * bottom element (added last) and walking upwards to the one added first.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $html = '<em><strong><a>We are here';
-	 *     foreach ( $stack->walk_up() as $node ) {
-	 *         echo "{$node->node_name} -> ";
-	 *     }
-	 *     > A -> STRONG -> EM ->
-	 *
-	 * To start with the first added element and walk towards the bottom,
-	 * see WP_HTML_Active_Formatting_Elements::walk_down().
-	 *
-	 * @since 6.4.0
-	 */
-	public function walk_up() {
-		for ( $i = count( $this->stack ) - 1; $i >= 0; $i-- ) {
-			yield $this->stack[ $i ];
-		}
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php
deleted file mode 100644
index 4ee369b795c84c..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Attribute_Token class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.2.0
- */
-
-/**
- * Core class used by the HTML tag processor as a data structure for the attribute token,
- * allowing to drastically improve performance.
- *
- * This class is for internal usage of the WP_HTML_Tag_Processor class.
- *
- * @access private
- * @since 6.2.0
- * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
- *
- * @see WP_HTML_Tag_Processor
- */
-class Gutenberg_HTML_Attribute_Token_6_7 {
-	/**
-	 * Attribute name.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var string
-	 */
-	public $name;
-
-	/**
-	 * Attribute value.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int
-	 */
-	public $value_starts_at;
-
-	/**
-	 * How many bytes the value occupies in the input HTML.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int
-	 */
-	public $value_length;
-
-	/**
-	 * The string offset where the attribute name starts.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int
-	 */
-	public $start;
-
-	/**
-	 * Byte length of text spanning the attribute inside a tag.
-	 *
-	 * This span starts at the first character of the attribute name
-	 * and it ends after one of three cases:
-	 *
-	 *  - at the end of the attribute name for boolean attributes.
-	 *  - at the end of the value for unquoted attributes.
-	 *  - at the final single or double quote for quoted attributes.
-	 *
-	 * Example:
-	 *
-	 *     <div class="post">
-	 *          ------------ length is 12, including quotes
-	 *
-	 *     <input type="checked" checked id="selector">
-	 *                           ------- length is 6
-	 *
-	 *     <a rel=noopener>
-	 *        ------------ length is 11
-	 *
-	 * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
-	 *
-	 * @var int
-	 */
-	public $length;
-
-	/**
-	 * Whether the attribute is a boolean attribute with value `true`.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var bool
-	 */
-	public $is_true;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 * @since 6.5.0 Replaced `end` with `length` to more closely match `substr()`.
-	 *
-	 * @param string $name         Attribute name.
-	 * @param int    $value_start  Attribute value.
-	 * @param int    $value_length Number of bytes attribute value spans.
-	 * @param int    $start        The string offset where the attribute name starts.
-	 * @param int    $length       Byte length of the entire attribute name or name and value pair expression.
-	 * @param bool   $is_true      Whether the attribute is a boolean attribute with true value.
-	 */
-	public function __construct( $name, $value_start, $value_length, $start, $length, $is_true ) {
-		$this->name            = $name;
-		$this->value_starts_at = $value_start;
-		$this->value_length    = $value_length;
-		$this->start           = $start;
-		$this->length          = $length;
-		$this->is_true         = $is_true;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php
deleted file mode 100644
index c745904865b1f8..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php
+++ /dev/null
@@ -1,463 +0,0 @@
-<?php
-
-/**
- * HTML API: WP_HTML_Decoder class
- *
- * Decodes spans of raw text found inside HTML content.
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.6.0
- */
-class Gutenberg_HTML_Decoder_6_7 {
-	/**
-	 * Indicates if an attribute value starts with a given raw string value.
-	 *
-	 * Use this method to determine if an attribute value starts with a given string, regardless
-	 * of how it might be encoded in HTML. For instance, `http:` could be represented as `http:`
-	 * or as `http&colon;` or as `&#x68;ttp:` or as `h&#116;tp&colon;`, or in many other ways.
-	 *
-	 * Example:
-	 *
-	 *     $value = 'http&colon;//wordpress.org/';
-	 *     true   === WP_HTML_Decoder::attribute_starts_with( $value, 'http:', 'ascii-case-insensitive' );
-	 *     false  === WP_HTML_Decoder::attribute_starts_with( $value, 'https:', 'ascii-case-insensitive' );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $haystack         String containing the raw non-decoded attribute value.
-	 * @param string $search_text      Does the attribute value start with this plain string.
-	 * @param string $case_sensitivity Optional. Pass 'ascii-case-insensitive' to ignore ASCII case when matching.
-	 *                                 Default 'case-sensitive'.
-	 * @return bool Whether the attribute value starts with the given string.
-	 */
-	public static function attribute_starts_with( $haystack, $search_text, $case_sensitivity = 'case-sensitive' ): bool {
-		$search_length = strlen( $search_text );
-		$loose_case    = 'ascii-case-insensitive' === $case_sensitivity;
-		$haystack_end  = strlen( $haystack );
-		$search_at     = 0;
-		$haystack_at   = 0;
-
-		while ( $search_at < $search_length && $haystack_at < $haystack_end ) {
-			$chars_match = $loose_case
-				? strtolower( $haystack[ $haystack_at ] ) === strtolower( $search_text[ $search_at ] )
-				: $haystack[ $haystack_at ] === $search_text[ $search_at ];
-
-			$is_introducer = '&' === $haystack[ $haystack_at ];
-			$next_chunk    = $is_introducer
-				? self::read_character_reference( 'attribute', $haystack, $haystack_at, $token_length )
-				: null;
-
-			// If there's no character reference and the characters don't match, the match fails.
-			if ( null === $next_chunk && ! $chars_match ) {
-				return false;
-			}
-
-			// If there's no character reference but the character do match, then it could still match.
-			if ( null === $next_chunk && $chars_match ) {
-				++$haystack_at;
-				++$search_at;
-				continue;
-			}
-
-			// If there is a character reference, then the decoded value must exactly match what follows in the search string.
-			if ( 0 !== substr_compare( $search_text, $next_chunk, $search_at, strlen( $next_chunk ), $loose_case ) ) {
-				return false;
-			}
-
-			// The character reference matched, so continue checking.
-			$haystack_at += $token_length;
-			$search_at   += strlen( $next_chunk );
-		}
-
-		return true;
-	}
-
-	/**
-	 * Returns a string containing the decoded value of a given HTML text node.
-	 *
-	 * Text nodes appear in HTML DATA sections, which are the text segments inside
-	 * and around tags, excepting SCRIPT and STYLE elements (and some others),
-	 * whose inner text is not decoded. Use this function to read the decoded
-	 * value of such a text span in an HTML document.
-	 *
-	 * Example:
-	 *
-	 *     '“😄”' === WP_HTML_Decode::decode_text_node( '&#x93;&#x1f604;&#x94' );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $text Text containing raw and non-decoded text node to decode.
-	 * @return string Decoded UTF-8 value of given text node.
-	 */
-	public static function decode_text_node( $text ): string {
-		return static::decode( 'data', $text );
-	}
-
-	/**
-	 * Returns a string containing the decoded value of a given HTML attribute.
-	 *
-	 * Text found inside an HTML attribute has different parsing rules than for
-	 * text found inside other markup, or DATA segments. Use this function to
-	 * read the decoded value of an HTML string inside a quoted attribute.
-	 *
-	 * Example:
-	 *
-	 *     '“😄”' === WP_HTML_Decode::decode_attribute( '&#x93;&#x1f604;&#x94' );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param string $text Text containing raw and non-decoded attribute value to decode.
-	 * @return string Decoded UTF-8 value of given attribute value.
-	 */
-	public static function decode_attribute( $text ): string {
-		return static::decode( 'attribute', $text );
-	}
-
-	/**
-	 * Decodes a span of HTML text, depending on the context in which it's found.
-	 *
-	 * This is a low-level method; prefer calling WP_HTML_Decoder::decode_attribute() or
-	 * WP_HTML_Decoder::decode_text_node() instead. It's provided for cases where this
-	 * may be difficult to do from calling code.
-	 *
-	 * Example:
-	 *
-	 *     '©' = WP_HTML_Decoder::decode( 'data', '&copy;' );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @access private
-	 *
-	 * @param string $context `attribute` for decoding attribute values, `data` otherwise.
-	 * @param string $text    Text document containing span of text to decode.
-	 * @return string Decoded UTF-8 string.
-	 */
-	public static function decode( $context, $text ): string {
-		$decoded = '';
-		$end     = strlen( $text );
-		$at      = 0;
-		$was_at  = 0;
-
-		while ( $at < $end ) {
-			$next_character_reference_at = strpos( $text, '&', $at );
-			if ( false === $next_character_reference_at ) {
-				break;
-			}
-
-			$character_reference = self::read_character_reference( $context, $text, $next_character_reference_at, $token_length );
-			if ( isset( $character_reference ) ) {
-				$at       = $next_character_reference_at;
-				$decoded .= substr( $text, $was_at, $at - $was_at );
-				$decoded .= $character_reference;
-				$at      += $token_length;
-				$was_at   = $at;
-				continue;
-			}
-
-			++$at;
-		}
-
-		if ( 0 === $was_at ) {
-			return $text;
-		}
-
-		if ( $was_at < $end ) {
-			$decoded .= substr( $text, $was_at, $end - $was_at );
-		}
-
-		return $decoded;
-	}
-
-	/**
-	 * Attempt to read a character reference at the given location in a given string,
-	 * depending on the context in which it's found.
-	 *
-	 * If a character reference is found, this function will return the translated value
-	 * that the reference maps to. It will then set `$match_byte_length` the
-	 * number of bytes of input it read while consuming the character reference. This
-	 * gives calling code the opportunity to advance its cursor when traversing a string
-	 * and decoding.
-	 *
-	 * Example:
-	 *
-	 *     null === WP_HTML_Decoder::read_character_reference( 'attribute', 'Ships&hellip;', 0 );
-	 *     '…'  === WP_HTML_Decoder::read_character_reference( 'attribute', 'Ships&hellip;', 5, $token_length );
-	 *     8    === $token_length; // `&hellip;`
-	 *
-	 *     null === WP_HTML_Decoder::read_character_reference( 'attribute', '&notin', 0 );
-	 *     '∉'  === WP_HTML_Decoder::read_character_reference( 'attribute', '&notin;', 0, $token_length );
-	 *     7    === $token_length; // `&notin;`
-	 *
-	 *     '¬'  === WP_HTML_Decoder::read_character_reference( 'data', '&notin', 0, $token_length );
-	 *     4    === $token_length; // `&not`
-	 *     '∉'  === WP_HTML_Decoder::read_character_reference( 'data', '&notin;', 0, $token_length );
-	 *     7    === $token_length; // `&notin;`
-	 *
-	 * @since 6.6.0
-	 *
-	 * @global WP_Token_Map $html5_named_character_references
-	 *
-	 * @param string $context            `attribute` for decoding attribute values, `data` otherwise.
-	 * @param string $text               Text document containing span of text to decode.
-	 * @param int    $at                 Optional. Byte offset into text where span begins, defaults to the beginning (0).
-	 * @param int    &$match_byte_length Optional. Set to byte-length of character reference if provided and if a match
-	 *                                   is found, otherwise not set. Default null.
-	 * @return string|false Decoded character reference in UTF-8 if found, otherwise `false`.
-	 */
-	public static function read_character_reference( $context, $text, $at = 0, &$match_byte_length = null ) {
-		/**
-		 * Mappings for HTML5 named character references.
-		 *
-		 * @var WP_Token_Map $html5_named_character_references
-		 */
-		global $html5_named_character_references;
-
-		$length = strlen( $text );
-		if ( $at + 1 >= $length ) {
-			return null;
-		}
-
-		if ( '&' !== $text[ $at ] ) {
-			return null;
-		}
-
-		/*
-		 * Numeric character references.
-		 *
-		 * When truncated, these will encode the code point found by parsing the
-		 * digits that are available. For example, when `&#x1f170;` is truncated
-		 * to `&#x1f1` it will encode `DZ`. It does not:
-		 *  - know how to parse the original `🅰`.
-		 *  - fail to parse and return plaintext `&#x1f1`.
-		 *  - fail to parse and return the replacement character `�`
-		 */
-		if ( '#' === $text[ $at + 1 ] ) {
-			if ( $at + 2 >= $length ) {
-				return null;
-			}
-
-			/** Tracks inner parsing within the numeric character reference. */
-			$digits_at = $at + 2;
-
-			if ( 'x' === $text[ $digits_at ] || 'X' === $text[ $digits_at ] ) {
-				$numeric_base   = 16;
-				$numeric_digits = '0123456789abcdefABCDEF';
-				$max_digits     = 6; // &#x10FFFF;
-				++$digits_at;
-			} else {
-				$numeric_base   = 10;
-				$numeric_digits = '0123456789';
-				$max_digits     = 7; // &#1114111;
-			}
-
-			// Cannot encode invalid Unicode code points. Max is to U+10FFFF.
-			$zero_count    = strspn( $text, '0', $digits_at );
-			$digit_count   = strspn( $text, $numeric_digits, $digits_at + $zero_count );
-			$after_digits  = $digits_at + $zero_count + $digit_count;
-			$has_semicolon = $after_digits < $length && ';' === $text[ $after_digits ];
-			$end_of_span   = $has_semicolon ? $after_digits + 1 : $after_digits;
-
-			// `&#` or `&#x` without digits returns into plaintext.
-			if ( 0 === $digit_count && 0 === $zero_count ) {
-				return null;
-			}
-
-			// Whereas `&#` and only zeros is invalid.
-			if ( 0 === $digit_count ) {
-				$match_byte_length = $end_of_span - $at;
-				return '�';
-			}
-
-			// If there are too many digits then it's not worth parsing. It's invalid.
-			if ( $digit_count > $max_digits ) {
-				$match_byte_length = $end_of_span - $at;
-				return '�';
-			}
-
-			$digits     = substr( $text, $digits_at + $zero_count, $digit_count );
-			$code_point = intval( $digits, $numeric_base );
-
-			/*
-			 * Noncharacters, 0x0D, and non-ASCII-whitespace control characters.
-			 *
-			 * > A noncharacter is a code point that is in the range U+FDD0 to U+FDEF,
-			 * > inclusive, or U+FFFE, U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF,
-			 * > U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE,
-			 * > U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF,
-			 * > U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF, U+DFFFE,
-			 * > U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE, or U+10FFFF.
-			 *
-			 * A C0 control is a code point that is in the range of U+00 to U+1F,
-			 * but ASCII whitespace includes U+09, U+0A, U+0C, and U+0D.
-			 *
-			 * These characters are invalid but still decode as any valid character.
-			 * This comment is here to note and explain why there's no check to
-			 * remove these characters or replace them.
-			 *
-			 * @see https://infra.spec.whatwg.org/#noncharacter
-			 */
-
-			/*
-			 * Code points in the C1 controls area need to be remapped as if they
-			 * were stored in Windows-1252. Note! This transformation only happens
-			 * for numeric character references. The raw code points in the byte
-			 * stream are not translated.
-			 *
-			 * > If the number is one of the numbers in the first column of
-			 * > the following table, then find the row with that number in
-			 * > the first column, and set the character reference code to
-			 * > the number in the second column of that row.
-			 */
-			if ( $code_point >= 0x80 && $code_point <= 0x9F ) {
-				$windows_1252_mapping = array(
-					0x20AC, // 0x80 -> EURO SIGN (€).
-					0x81,   // 0x81 -> (no change).
-					0x201A, // 0x82 -> SINGLE LOW-9 QUOTATION MARK (‚).
-					0x0192, // 0x83 -> LATIN SMALL LETTER F WITH HOOK (ƒ).
-					0x201E, // 0x84 -> DOUBLE LOW-9 QUOTATION MARK („).
-					0x2026, // 0x85 -> HORIZONTAL ELLIPSIS (…).
-					0x2020, // 0x86 -> DAGGER (†).
-					0x2021, // 0x87 -> DOUBLE DAGGER (‡).
-					0x02C6, // 0x88 -> MODIFIER LETTER CIRCUMFLEX ACCENT (ˆ).
-					0x2030, // 0x89 -> PER MILLE SIGN (‰).
-					0x0160, // 0x8A -> LATIN CAPITAL LETTER S WITH CARON (Š).
-					0x2039, // 0x8B -> SINGLE LEFT-POINTING ANGLE QUOTATION MARK (‹).
-					0x0152, // 0x8C -> LATIN CAPITAL LIGATURE OE (Œ).
-					0x8D,   // 0x8D -> (no change).
-					0x017D, // 0x8E -> LATIN CAPITAL LETTER Z WITH CARON (Ž).
-					0x8F,   // 0x8F -> (no change).
-					0x90,   // 0x90 -> (no change).
-					0x2018, // 0x91 -> LEFT SINGLE QUOTATION MARK (‘).
-					0x2019, // 0x92 -> RIGHT SINGLE QUOTATION MARK (’).
-					0x201C, // 0x93 -> LEFT DOUBLE QUOTATION MARK (“).
-					0x201D, // 0x94 -> RIGHT DOUBLE QUOTATION MARK (”).
-					0x2022, // 0x95 -> BULLET (•).
-					0x2013, // 0x96 -> EN DASH (–).
-					0x2014, // 0x97 -> EM DASH (—).
-					0x02DC, // 0x98 -> SMALL TILDE (˜).
-					0x2122, // 0x99 -> TRADE MARK SIGN (™).
-					0x0161, // 0x9A -> LATIN SMALL LETTER S WITH CARON (š).
-					0x203A, // 0x9B -> SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (›).
-					0x0153, // 0x9C -> LATIN SMALL LIGATURE OE (œ).
-					0x9D,   // 0x9D -> (no change).
-					0x017E, // 0x9E -> LATIN SMALL LETTER Z WITH CARON (ž).
-					0x0178, // 0x9F -> LATIN CAPITAL LETTER Y WITH DIAERESIS (Ÿ).
-				);
-
-				$code_point = $windows_1252_mapping[ $code_point - 0x80 ];
-			}
-
-			$match_byte_length = $end_of_span - $at;
-			return self::code_point_to_utf8_bytes( $code_point );
-		}
-
-		/** Tracks inner parsing within the named character reference. */
-		$name_at = $at + 1;
-		// Minimum named character reference is two characters. E.g. `GT`.
-		if ( $name_at + 2 > $length ) {
-			return null;
-		}
-
-		$name_length = 0;
-		$replacement = $html5_named_character_references->read_token( $text, $name_at, $name_length );
-		if ( false === $replacement ) {
-			return null;
-		}
-
-		$after_name = $name_at + $name_length;
-
-		// If the match ended with a semicolon then it should always be decoded.
-		if ( ';' === $text[ $name_at + $name_length - 1 ] ) {
-			$match_byte_length = $after_name - $at;
-			return $replacement;
-		}
-
-		/*
-		 * At this point though there's a match for an entry in the named
-		 * character reference table but the match doesn't end in `;`.
-		 * It may be allowed if it's followed by something unambiguous.
-		 */
-		$ambiguous_follower = (
-			$after_name < $length &&
-			$name_at < $length &&
-			(
-				ctype_alnum( $text[ $after_name ] ) ||
-				'=' === $text[ $after_name ]
-			)
-		);
-
-		// It's non-ambiguous, safe to leave it in.
-		if ( ! $ambiguous_follower ) {
-			$match_byte_length = $after_name - $at;
-			return $replacement;
-		}
-
-		// It's ambiguous, which isn't allowed inside attributes.
-		if ( 'attribute' === $context ) {
-			return null;
-		}
-
-		$match_byte_length = $after_name - $at;
-		return $replacement;
-	}
-
-	/**
-	 * Encode a code point number into the UTF-8 encoding.
-	 *
-	 * This encoder implements the UTF-8 encoding algorithm for converting
-	 * a code point into a byte sequence. If it receives an invalid code
-	 * point it will return the Unicode Replacement Character U+FFFD `�`.
-	 *
-	 * Example:
-	 *
-	 *     '🅰' === WP_HTML_Decoder::code_point_to_utf8_bytes( 0x1f170 );
-	 *
-	 *     // Half of a surrogate pair is an invalid code point.
-	 *     '�' === WP_HTML_Decoder::code_point_to_utf8_bytes( 0xd83c );
-	 *
-	 * @since 6.6.0
-	 *
-	 * @see https://www.rfc-editor.org/rfc/rfc3629 For the UTF-8 standard.
-	 *
-	 * @param int $code_point Which code point to convert.
-	 * @return string Converted code point, or `�` if invalid.
-	 */
-	public static function code_point_to_utf8_bytes( $code_point ): string {
-		// Pre-check to ensure a valid code point.
-		if (
-			$code_point <= 0 ||
-			( $code_point >= 0xD800 && $code_point <= 0xDFFF ) ||
-			$code_point > 0x10FFFF
-		) {
-			return '�';
-		}
-
-		if ( $code_point <= 0x7F ) {
-			return chr( $code_point );
-		}
-
-		if ( $code_point <= 0x7FF ) {
-			$byte1 = chr( ( $code_point >> 6 ) | 0xC0 );
-			$byte2 = chr( $code_point & 0x3F | 0x80 );
-
-			return "{$byte1}{$byte2}";
-		}
-
-		if ( $code_point <= 0xFFFF ) {
-			$byte1 = chr( ( $code_point >> 12 ) | 0xE0 );
-			$byte2 = chr( ( $code_point >> 6 ) & 0x3F | 0x80 );
-			$byte3 = chr( $code_point & 0x3F | 0x80 );
-
-			return "{$byte1}{$byte2}{$byte3}";
-		}
-
-		// Any values above U+10FFFF are eliminated above in the pre-check.
-		$byte1 = chr( ( $code_point >> 18 ) | 0xF0 );
-		$byte2 = chr( ( $code_point >> 12 ) & 0x3F | 0x80 );
-		$byte3 = chr( ( $code_point >> 6 ) & 0x3F | 0x80 );
-		$byte4 = chr( $code_point & 0x3F | 0x80 );
-
-		return "{$byte1}{$byte2}{$byte3}{$byte4}";
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php
deleted file mode 100644
index fd2b252432455e..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php
+++ /dev/null
@@ -1,598 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Open_Elements class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used by the HTML processor during HTML parsing
- * for managing the stack of open elements.
- *
- * This class is designed for internal use by the HTML processor.
- *
- * > Initially, the stack of open elements is empty. The stack grows
- * > downwards; the topmost node on the stack is the first one added
- * > to the stack, and the bottommost node of the stack is the most
- * > recently added node in the stack (notwithstanding when the stack
- * > is manipulated in a random access fashion as part of the handling
- * > for misnested tags).
- *
- * @since 6.4.0
- *
- * @access private
- *
- * @see https://html.spec.whatwg.org/#stack-of-open-elements
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Open_Elements_6_7 {
-	/**
-	 * Holds the stack of open element references.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var WP_HTML_Token[]
-	 */
-	public $stack = array();
-
-	/**
-	 * Whether a P element is in button scope currently.
-	 *
-	 * This class optimizes scope lookup by pre-calculating
-	 * this value when elements are added and removed to the
-	 * stack of open elements which might change its value.
-	 * This avoids frequent iteration over the stack.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var bool
-	 */
-	private $has_p_in_button_scope = false;
-
-	/**
-	 * A function that will be called when an item is popped off the stack of open elements.
-	 *
-	 * The function will be called with the popped item as its argument.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var Closure|null
-	 */
-	private $pop_handler = null;
-
-	/**
-	 * A function that will be called when an item is pushed onto the stack of open elements.
-	 *
-	 * The function will be called with the pushed item as its argument.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var Closure|null
-	 */
-	private $push_handler = null;
-
-	/**
-	 * Sets a pop handler that will be called when an item is popped off the stack of
-	 * open elements.
-	 *
-	 * The function will be called with the pushed item as its argument.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param Closure $handler The handler function.
-	 */
-	public function set_pop_handler( Closure $handler ): void {
-		$this->pop_handler = $handler;
-	}
-
-	/**
-	 * Sets a push handler that will be called when an item is pushed onto the stack of
-	 * open elements.
-	 *
-	 * The function will be called with the pushed item as its argument.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param Closure $handler The handler function.
-	 */
-	public function set_push_handler( Closure $handler ): void {
-		$this->push_handler = $handler;
-	}
-
-	/**
-	 * Reports if a specific node is in the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $token Look for this node in the stack.
-	 * @return bool Whether the referenced node is in the stack of open elements.
-	 */
-	public function contains_node( Gutenberg_HTML_Token_6_7 $token ): bool {
-		foreach ( $this->walk_up() as $item ) {
-			if ( $token->bookmark_name === $item->bookmark_name ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Returns how many nodes are currently in the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return int How many node are in the stack of open elements.
-	 */
-	public function count(): int {
-		return count( $this->stack );
-	}
-
-	/**
-	 * Returns the node at the end of the stack of open elements,
-	 * if one exists. If the stack is empty, returns null.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return WP_HTML_Token|null Last node in the stack of open elements, if one exists, otherwise null.
-	 */
-	public function current_node(): ?Gutenberg_HTML_Token_6_7 {
-		$current_node = end( $this->stack );
-
-		return $current_node ? $current_node : null;
-	}
-
-	/**
-	 * Indicates if the current node is of a given type or name.
-	 *
-	 * It's possible to pass either a node type or a node name to this function.
-	 * In the case there is no current element it will always return `false`.
-	 *
-	 * Example:
-	 *
-	 *     // Is the current node a text node?
-	 *     $stack->current_node_is( '#text' );
-	 *
-	 *     // Is the current node a DIV element?
-	 *     $stack->current_node_is( 'DIV' );
-	 *
-	 *     // Is the current node any element/tag?
-	 *     $stack->current_node_is( '#tag' );
-	 *
-	 * @see WP_HTML_Tag_Processor::get_token_type
-	 * @see WP_HTML_Tag_Processor::get_token_name
-	 *
-	 * @since 6.7.0
-	 *
-	 * @access private
-	 *
-	 * @param string $identity Check if the current node has this name or type (depending on what is provided).
-	 * @return bool Whether there is a current element that matches the given identity, whether a token name or type.
-	 */
-	public function current_node_is( string $identity ): bool {
-		$current_node = end( $this->stack );
-		if ( false === $current_node ) {
-			return false;
-		}
-
-		$current_node_name = $current_node->node_name;
-
-		return (
-			$current_node_name === $identity ||
-			( '#doctype' === $identity && 'html' === $current_node_name ) ||
-			( '#tag' === $identity && ctype_upper( $current_node_name ) )
-		);
-	}
-
-	/**
-	 * Returns whether an element is in a specific scope.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-the-specific-scope
-	 *
-	 * @param string   $tag_name         Name of tag check.
-	 * @param string[] $termination_list List of elements that terminate the search.
-	 * @return bool Whether the element was found in a specific scope.
-	 */
-	public function has_element_in_specific_scope( string $tag_name, $termination_list ): bool {
-		foreach ( $this->walk_up() as $node ) {
-			if ( $node->node_name === $tag_name ) {
-				return true;
-			}
-
-			if (
-				'(internal: H1 through H6 - do not use)' === $tag_name &&
-				in_array( $node->node_name, array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ), true )
-			) {
-				return true;
-			}
-
-			switch ( $node->node_name ) {
-				case 'HTML':
-					return false;
-			}
-
-			if ( in_array( $node->node_name, $termination_list, true ) ) {
-				return false;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Returns whether a particular element is in scope.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-scope
-	 *
-	 * @param string $tag_name Name of tag to check.
-	 * @return bool Whether given element is in scope.
-	 */
-	public function has_element_in_scope( string $tag_name ): bool {
-		return $this->has_element_in_specific_scope(
-			$tag_name,
-			array(
-
-				/*
-				 * Because it's not currently possible to encounter
-				 * one of the termination elements, they don't need
-				 * to be listed here. If they were, they would be
-				 * unreachable and only waste CPU cycles while
-				 * scanning through HTML.
-				 */
-			)
-		);
-	}
-
-	/**
-	 * Returns whether a particular element is in list item scope.
-	 *
-	 * @since 6.4.0
-	 * @since 6.5.0 Implemented: no longer throws on every invocation.
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-list-item-scope
-	 *
-	 * @param string $tag_name Name of tag to check.
-	 * @return bool Whether given element is in scope.
-	 */
-	public function has_element_in_list_item_scope( string $tag_name ): bool {
-		return $this->has_element_in_specific_scope(
-			$tag_name,
-			array(
-				// There are more elements that belong here which aren't currently supported.
-				'OL',
-				'UL',
-			)
-		);
-	}
-
-	/**
-	 * Returns whether a particular element is in button scope.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-button-scope
-	 *
-	 * @param string $tag_name Name of tag to check.
-	 * @return bool Whether given element is in scope.
-	 */
-	public function has_element_in_button_scope( string $tag_name ): bool {
-		return $this->has_element_in_specific_scope( $tag_name, array( 'BUTTON' ) );
-	}
-
-	/**
-	 * Returns whether a particular element is in table scope.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-table-scope
-	 *
-	 * @throws WP_HTML_Unsupported_Exception Always until this function is implemented.
-	 *
-	 * @param string $tag_name Name of tag to check.
-	 * @return bool Whether given element is in scope.
-	 */
-	public function has_element_in_table_scope( string $tag_name ): bool {
-		throw new Gutenberg_HTML_Unsupported_Exception_6_7( 'Cannot process elements depending on table scope.' );
-
-		return false; // The linter requires this unreachable code until the function is implemented and can return.
-	}
-
-	/**
-	 * Returns whether a particular element is in select scope.
-	 *
-	 * This test differs from the others like it, in that its rules are inverted.
-	 * Instead of arriving at a match when one of any tag in a termination group
-	 * is reached, this one terminates if any other tag is reached.
-	 *
-	 * > The stack of open elements is said to have a particular element in select scope when it has
-	 * > that element in the specific scope consisting of all element types except the following:
-	 * >   - optgroup in the HTML namespace
-	 * >   - option in the HTML namespace
-	 *
-	 * @since 6.4.0 Stub implementation (throws).
-	 * @since 6.7.0 Full implementation.
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-select-scope
-	 *
-	 * @param string $tag_name Name of tag to check.
-	 * @return bool Whether the given element is in SELECT scope.
-	 */
-	public function has_element_in_select_scope( string $tag_name ): bool {
-		foreach ( $this->walk_up() as $node ) {
-			if ( $node->node_name === $tag_name ) {
-				return true;
-			}
-
-			if (
-				'OPTION' !== $node->node_name &&
-				'OPTGROUP' !== $node->node_name
-			) {
-				return false;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Returns whether a P is in BUTTON scope.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#has-an-element-in-button-scope
-	 *
-	 * @return bool Whether a P is in BUTTON scope.
-	 */
-	public function has_p_in_button_scope(): bool {
-		return $this->has_p_in_button_scope;
-	}
-
-	/**
-	 * Pops a node off of the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
-	 *
-	 * @return bool Whether a node was popped off of the stack.
-	 */
-	public function pop(): bool {
-		$item = array_pop( $this->stack );
-		if ( null === $item ) {
-			return false;
-		}
-
-		if ( 'context-node' === $item->bookmark_name ) {
-			$this->stack[] = $item;
-			return false;
-		}
-
-		$this->after_element_pop( $item );
-		return true;
-	}
-
-	/**
-	 * Pops nodes off of the stack of open elements until one with the given tag name has been popped.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see WP_HTML_Open_Elements::pop
-	 *
-	 * @param string $tag_name Name of tag that needs to be popped off of the stack of open elements.
-	 * @return bool Whether a tag of the given name was found and popped off of the stack of open elements.
-	 */
-	public function pop_until( string $tag_name ): bool {
-		foreach ( $this->walk_up() as $item ) {
-			if ( 'context-node' === $item->bookmark_name ) {
-				return true;
-			}
-
-			$this->pop();
-
-			if (
-				'(internal: H1 through H6 - do not use)' === $tag_name &&
-				in_array( $item->node_name, array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ), true )
-			) {
-				return true;
-			}
-
-			if ( $tag_name === $item->node_name ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Pushes a node onto the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
-	 *
-	 * @param WP_HTML_Token $stack_item Item to add onto stack.
-	 */
-	public function push( Gutenberg_HTML_Token_6_7 $stack_item ): void {
-		$this->stack[] = $stack_item;
-		$this->after_element_push( $stack_item );
-	}
-
-	/**
-	 * Removes a specific node from the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $token The node to remove from the stack of open elements.
-	 * @return bool Whether the node was found and removed from the stack of open elements.
-	 */
-	public function remove_node( Gutenberg_HTML_Token_6_7 $token ): bool {
-		if ( 'context-node' === $token->bookmark_name ) {
-			return false;
-		}
-
-		foreach ( $this->walk_up() as $position_from_end => $item ) {
-			if ( $token->bookmark_name !== $item->bookmark_name ) {
-				continue;
-			}
-
-			$position_from_start = $this->count() - $position_from_end - 1;
-			array_splice( $this->stack, $position_from_start, 1 );
-			$this->after_element_pop( $item );
-			return true;
-		}
-
-		return false;
-	}
-
-
-	/**
-	 * Steps through the stack of open elements, starting with the top element
-	 * (added first) and walking downwards to the one added last.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $html = '<em><strong><a>We are here';
-	 *     foreach ( $stack->walk_down() as $node ) {
-	 *         echo "{$node->node_name} -> ";
-	 *     }
-	 *     > EM -> STRONG -> A ->
-	 *
-	 * To start with the most-recently added element and walk towards the top,
-	 * see WP_HTML_Open_Elements::walk_up().
-	 *
-	 * @since 6.4.0
-	 */
-	public function walk_down() {
-		$count = count( $this->stack );
-
-		for ( $i = 0; $i < $count; $i++ ) {
-			yield $this->stack[ $i ];
-		}
-	}
-
-	/**
-	 * Steps through the stack of open elements, starting with the bottom element
-	 * (added last) and walking upwards to the one added first.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $html = '<em><strong><a>We are here';
-	 *     foreach ( $stack->walk_up() as $node ) {
-	 *         echo "{$node->node_name} -> ";
-	 *     }
-	 *     > A -> STRONG -> EM ->
-	 *
-	 * To start with the first added element and walk towards the bottom,
-	 * see WP_HTML_Open_Elements::walk_down().
-	 *
-	 * @since 6.4.0
-	 * @since 6.5.0 Accepts $above_this_node to start traversal above a given node, if it exists.
-	 *
-	 * @param WP_HTML_Token|null $above_this_node Optional. Start traversing above this node,
-	 *                                            if provided and if the node exists.
-	 */
-	public function walk_up( ?Gutenberg_HTML_Token_6_7 $above_this_node = null ) {
-		$has_found_node = null === $above_this_node;
-
-		for ( $i = count( $this->stack ) - 1; $i >= 0; $i-- ) {
-			$node = $this->stack[ $i ];
-
-			if ( ! $has_found_node ) {
-				$has_found_node = $node === $above_this_node;
-				continue;
-			}
-
-			yield $node;
-		}
-	}
-
-	/*
-	 * Internal helpers.
-	 */
-
-	/**
-	 * Updates internal flags after adding an element.
-	 *
-	 * Certain conditions (such as "has_p_in_button_scope") are maintained here as
-	 * flags that are only modified when adding and removing elements. This allows
-	 * the HTML Processor to quickly check for these conditions instead of iterating
-	 * over the open stack elements upon each new tag it encounters. These flags,
-	 * however, need to be maintained as items are added and removed from the stack.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $item Element that was added to the stack of open elements.
-	 */
-	public function after_element_push( Gutenberg_HTML_Token_6_7 $item ): void {
-		/*
-		 * When adding support for new elements, expand this switch to trap
-		 * cases where the precalculated value needs to change.
-		 */
-		switch ( $item->node_name ) {
-			case 'BUTTON':
-				$this->has_p_in_button_scope = false;
-				break;
-
-			case 'P':
-				$this->has_p_in_button_scope = true;
-				break;
-		}
-
-		if ( null !== $this->push_handler ) {
-			( $this->push_handler )( $item );
-		}
-	}
-
-	/**
-	 * Updates internal flags after removing an element.
-	 *
-	 * Certain conditions (such as "has_p_in_button_scope") are maintained here as
-	 * flags that are only modified when adding and removing elements. This allows
-	 * the HTML Processor to quickly check for these conditions instead of iterating
-	 * over the open stack elements upon each new tag it encounters. These flags,
-	 * however, need to be maintained as items are added and removed from the stack.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param WP_HTML_Token $item Element that was removed from the stack of open elements.
-	 */
-	public function after_element_pop( Gutenberg_HTML_Token_6_7 $item ): void {
-		/*
-		 * When adding support for new elements, expand this switch to trap
-		 * cases where the precalculated value needs to change.
-		 */
-		switch ( $item->node_name ) {
-			case 'BUTTON':
-				$this->has_p_in_button_scope = $this->has_element_in_button_scope( 'P' );
-				break;
-
-			case 'P':
-				$this->has_p_in_button_scope = $this->has_element_in_button_scope( 'P' );
-				break;
-		}
-
-		if ( null !== $this->pop_handler ) {
-			( $this->pop_handler )( $item );
-		}
-	}
-
-	/**
-	 * Wakeup magic method.
-	 *
-	 * @since 6.6.0
-	 */
-	public function __wakeup() {
-		throw new \LogicException( __CLASS__ . ' should never be unserialized' );
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php
deleted file mode 100644
index 15cbbdc6adda8c..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php
+++ /dev/null
@@ -1,3402 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Processor class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used to safely parse and modify an HTML document.
- *
- * The HTML Processor class properly parses and modifies HTML5 documents.
- *
- * It supports a subset of the HTML5 specification, and when it encounters
- * unsupported markup, it aborts early to avoid unintentionally breaking
- * the document. The HTML Processor should never break an HTML document.
- *
- * While the `WP_HTML_Tag_Processor` is a valuable tool for modifying
- * attributes on individual HTML tags, the HTML Processor is more capable
- * and useful for the following operations:
- *
- *  - Querying based on nested HTML structure.
- *
- * Eventually the HTML Processor will also support:
- *  - Wrapping a tag in surrounding HTML.
- *  - Unwrapping a tag by removing its parent.
- *  - Inserting and removing nodes.
- *  - Reading and changing inner content.
- *  - Navigating up or around HTML structure.
- *
- * ## Usage
- *
- * Use of this class requires three steps:
- *
- *   1. Call a static creator method with your input HTML document.
- *   2. Find the location in the document you are looking for.
- *   3. Request changes to the document at that location.
- *
- * Example:
- *
- *     $processor = WP_HTML_Processor::create_fragment( $html );
- *     if ( $processor->next_tag( array( 'breadcrumbs' => array( 'DIV', 'FIGURE', 'IMG' ) ) ) ) {
- *         $processor->add_class( 'responsive-image' );
- *     }
- *
- * #### Breadcrumbs
- *
- * Breadcrumbs represent the stack of open elements from the root
- * of the document or fragment down to the currently-matched node,
- * if one is currently selected. Call WP_HTML_Processor::get_breadcrumbs()
- * to inspect the breadcrumbs for a matched tag.
- *
- * Breadcrumbs can specify nested HTML structure and are equivalent
- * to a CSS selector comprising tag names separated by the child
- * combinator, such as "DIV > FIGURE > IMG".
- *
- * Since all elements find themselves inside a full HTML document
- * when parsed, the return value from `get_breadcrumbs()` will always
- * contain any implicit outermost elements. For example, when parsing
- * with `create_fragment()` in the `BODY` context (the default), any
- * tag in the given HTML document will contain `array( 'HTML', 'BODY', … )`
- * in its breadcrumbs.
- *
- * Despite containing the implied outermost elements in their breadcrumbs,
- * tags may be found with the shortest-matching breadcrumb query. That is,
- * `array( 'IMG' )` matches all IMG elements and `array( 'P', 'IMG' )`
- * matches all IMG elements directly inside a P element. To ensure that no
- * partial matches erroneously match it's possible to specify in a query
- * the full breadcrumb match all the way down from the root HTML element.
- *
- * Example:
- *
- *     $html = '<figure><img><figcaption>A <em>lovely</em> day outside</figcaption></figure>';
- *     //               ----- Matches here.
- *     $processor->next_tag( array( 'breadcrumbs' => array( 'FIGURE', 'IMG' ) ) );
- *
- *     $html = '<figure><img><figcaption>A <em>lovely</em> day outside</figcaption></figure>';
- *     //                                  ---- Matches here.
- *     $processor->next_tag( array( 'breadcrumbs' => array( 'FIGURE', 'FIGCAPTION', 'EM' ) ) );
- *
- *     $html = '<div><img></div><img>';
- *     //                       ----- Matches here, because IMG must be a direct child of the implicit BODY.
- *     $processor->next_tag( array( 'breadcrumbs' => array( 'BODY', 'IMG' ) ) );
- *
- * ## HTML Support
- *
- * This class implements a small part of the HTML5 specification.
- * It's designed to operate within its support and abort early whenever
- * encountering circumstances it can't properly handle. This is
- * the principle way in which this class remains as simple as possible
- * without cutting corners and breaking compliance.
- *
- * ### Supported elements
- *
- * If any unsupported element appears in the HTML input the HTML Processor
- * will abort early and stop all processing. This draconian measure ensures
- * that the HTML Processor won't break any HTML it doesn't fully understand.
- *
- * The following list specifies the HTML tags that _are_ supported:
- *
- *  - Containers: ADDRESS, BLOCKQUOTE, DETAILS, DIALOG, DIV, FOOTER, HEADER, MAIN, MENU, SPAN, SUMMARY.
- *  - Custom elements: All custom elements are supported. :)
- *  - Form elements: BUTTON, DATALIST, FIELDSET, INPUT, LABEL, LEGEND, METER, OPTGROUP, OPTION, PROGRESS, SEARCH, SELECT.
- *  - Formatting elements: B, BIG, CODE, EM, FONT, I, PRE, SMALL, STRIKE, STRONG, TT, U, WBR.
- *  - Heading elements: H1, H2, H3, H4, H5, H6, HGROUP.
- *  - Links: A.
- *  - Lists: DD, DL, DT, LI, OL, UL.
- *  - Media elements: AUDIO, CANVAS, EMBED, FIGCAPTION, FIGURE, IMG, MAP, PICTURE, SOURCE, TRACK, VIDEO.
- *  - Paragraph: BR, P.
- *  - Phrasing elements: ABBR, AREA, BDI, BDO, CITE, DATA, DEL, DFN, INS, MARK, OUTPUT, Q, SAMP, SUB, SUP, TIME, VAR.
- *  - Sectioning elements: ARTICLE, ASIDE, HR, NAV, SECTION.
- *  - Templating elements: SLOT.
- *  - Text decoration: RUBY.
- *  - Deprecated elements: ACRONYM, BLINK, CENTER, DIR, ISINDEX, KEYGEN, LISTING, MULTICOL, NEXTID, PARAM, SPACER.
- *
- * ### Supported markup
- *
- * Some kinds of non-normative HTML involve reconstruction of formatting elements and
- * re-parenting of mis-nested elements. For example, a DIV tag found inside a TABLE
- * may in fact belong _before_ the table in the DOM. If the HTML Processor encounters
- * such a case it will stop processing.
- *
- * The following list specifies HTML markup that _is_ supported:
- *
- *  - Markup involving only those tags listed above.
- *  - Fully-balanced and non-overlapping tags.
- *  - HTML with unexpected tag closers.
- *  - Some unbalanced or overlapping tags.
- *  - P tags after unclosed P tags.
- *  - BUTTON tags after unclosed BUTTON tags.
- *  - A tags after unclosed A tags that don't involve any active formatting elements.
- *
- * @since 6.4.0
- *
- * @see WP_HTML_Tag_Processor
- * @see https://html.spec.whatwg.org/
- */
-class Gutenberg_HTML_Processor_6_7 extends Gutenberg_HTML_Tag_Processor_6_7 {
-	/**
-	 * The maximum number of bookmarks allowed to exist at any given time.
-	 *
-	 * HTML processing requires more bookmarks than basic tag processing,
-	 * so this class constant from the Tag Processor is overwritten.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var int
-	 */
-	const MAX_BOOKMARKS = 100;
-
-	/**
-	 * Holds the working state of the parser, including the stack of
-	 * open elements and the stack of active formatting elements.
-	 *
-	 * Initialized in the constructor.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var WP_HTML_Processor_State
-	 */
-	private $state;
-
-	/**
-	 * Used to create unique bookmark names.
-	 *
-	 * This class sets a bookmark for every tag in the HTML document that it encounters.
-	 * The bookmark name is auto-generated and increments, starting with `1`. These are
-	 * internal bookmarks and are automatically released when the referring WP_HTML_Token
-	 * goes out of scope and is garbage-collected.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see WP_HTML_Processor::$release_internal_bookmark_on_destruct
-	 *
-	 * @var int
-	 */
-	private $bookmark_counter = 0;
-
-	/**
-	 * Stores an explanation for why something failed, if it did.
-	 *
-	 * @see self::get_last_error
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string|null
-	 */
-	private $last_error = null;
-
-	/**
-	 * Stores context for why the parser bailed on unsupported HTML, if it did.
-	 *
-	 * @see self::get_unsupported_exception
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var WP_HTML_Unsupported_Exception|null
-	 */
-	private $unsupported_exception = null;
-
-	/**
-	 * Releases a bookmark when PHP garbage-collects its wrapping WP_HTML_Token instance.
-	 *
-	 * This function is created inside the class constructor so that it can be passed to
-	 * the stack of open elements and the stack of active formatting elements without
-	 * exposing it as a public method on the class.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var Closure|null
-	 */
-	private $release_internal_bookmark_on_destruct = null;
-
-	/**
-	 * Stores stack events which arise during parsing of the
-	 * HTML document, which will then supply the "match" events.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var WP_HTML_Stack_Event[]
-	 */
-	private $element_queue = array();
-
-	/**
-	 * Stores the current breadcrumbs.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var string[]
-	 */
-	private $breadcrumbs = array();
-
-	/**
-	 * Current stack event, if set, representing a matched token.
-	 *
-	 * Because the parser may internally point to a place further along in a document
-	 * than the nodes which have already been processed (some "virtual" nodes may have
-	 * appeared while scanning the HTML document), this will point at the "current" node
-	 * being processed. It comes from the front of the element queue.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var WP_HTML_Stack_Event|null
-	 */
-	private $current_element = null;
-
-	/**
-	 * Context node if created as a fragment parser.
-	 *
-	 * @var WP_HTML_Token|null
-	 */
-	private $context_node = null;
-
-	/**
-	 * Whether the parser has yet processed the context node,
-	 * if created as a fragment parser.
-	 *
-	 * The context node will be initially pushed onto the stack of open elements,
-	 * but when created as a fragment parser, this context element (and the implicit
-	 * HTML document node above it) should not be exposed as a matched token or node.
-	 *
-	 * This boolean indicates whether the processor should skip over the current
-	 * node in its initial search for the first node created from the input HTML.
-	 *
-	 * @var bool
-	 */
-	private $has_seen_context_node = false;
-
-	/*
-	 * Public Interface Functions
-	 */
-
-	/**
-	 * Creates an HTML processor in the fragment parsing mode.
-	 *
-	 * Use this for cases where you are processing chunks of HTML that
-	 * will be found within a bigger HTML document, such as rendered
-	 * block output that exists within a post, `the_content` inside a
-	 * rendered site layout.
-	 *
-	 * Fragment parsing occurs within a context, which is an HTML element
-	 * that the document will eventually be placed in. It becomes important
-	 * when special elements have different rules than others, such as inside
-	 * a TEXTAREA or a TITLE tag where things that look like tags are text,
-	 * or inside a SCRIPT tag where things that look like HTML syntax are JS.
-	 *
-	 * The context value should be a representation of the tag into which the
-	 * HTML is found. For most cases this will be the body element. The HTML
-	 * form is provided because a context element may have attributes that
-	 * impact the parse, such as with a SCRIPT tag and its `type` attribute.
-	 *
-	 * ## Current HTML Support
-	 *
-	 *  - The only supported context is `<body>`, which is the default value.
-	 *  - The only supported document encoding is `UTF-8`, which is the default value.
-	 *
-	 * @since 6.4.0
-	 * @since 6.6.0 Returns `static` instead of `self` so it can create subclass instances.
-	 *
-	 * @param string $html     Input HTML fragment to process.
-	 * @param string $context  Context element for the fragment, must be default of `<body>`.
-	 * @param string $encoding Text encoding of the document; must be default of 'UTF-8'.
-	 * @return static|null The created processor if successful, otherwise null.
-	 */
-	public static function create_fragment( $html, $context = '<body>', $encoding = 'UTF-8' ) {
-		if ( '<body>' !== $context || 'UTF-8' !== $encoding ) {
-			return null;
-		}
-
-		$processor                        = new static( $html, self::CONSTRUCTOR_UNLOCK_CODE );
-		$processor->state->context_node   = array( 'BODY', array() );
-		$processor->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
-
-		// @todo Create "fake" bookmarks for non-existent but implied nodes.
-		$processor->bookmarks['root-node']    = new Gutenberg_HTML_Span_6_7( 0, 0 );
-		$processor->bookmarks['context-node'] = new Gutenberg_HTML_Span_6_7( 0, 0 );
-
-		$processor->state->stack_of_open_elements->push(
-			new Gutenberg_HTML_Token_6_7(
-				'root-node',
-				'HTML',
-				false
-			)
-		);
-
-		$context_node = new Gutenberg_HTML_Token_6_7(
-			'context-node',
-			$processor->state->context_node[0],
-			false
-		);
-
-		$processor->context_node = $context_node;
-		$processor->breadcrumbs  = array( 'HTML', $context_node->node_name );
-
-		return $processor;
-	}
-
-	/**
-	 * Constructor.
-	 *
-	 * Do not use this method. Use the static creator methods instead.
-	 *
-	 * @access private
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see WP_HTML_Processor::create_fragment()
-	 *
-	 * @param string      $html                                  HTML to process.
-	 * @param string|null $use_the_static_create_methods_instead This constructor should not be called manually.
-	 */
-	public function __construct( $html, $use_the_static_create_methods_instead = null ) {
-		parent::__construct( $html );
-
-		if ( self::CONSTRUCTOR_UNLOCK_CODE !== $use_the_static_create_methods_instead ) {
-			_doing_it_wrong(
-				__METHOD__,
-				sprintf(
-					/* translators: %s: WP_HTML_Processor::create_fragment(). */
-					__( 'Call %s to create an HTML Processor instead of calling the constructor directly.' ),
-					'<code>WP_HTML_Processor::create_fragment()</code>'
-				),
-				'6.4.0'
-			);
-		}
-
-		$this->state = new Gutenberg_HTML_Processor_State_6_7();
-
-		$this->state->stack_of_open_elements->set_push_handler(
-			function ( Gutenberg_HTML_Token_6_7 $token ): void {
-				$is_virtual            = ! isset( $this->state->current_token ) || $this->is_tag_closer();
-				$same_node             = isset( $this->state->current_token ) && $token->node_name === $this->state->current_token->node_name;
-				$provenance            = ( ! $same_node || $is_virtual ) ? 'virtual' : 'real';
-				$this->element_queue[] = new Gutenberg_HTML_Stack_Event_6_7( $token, Gutenberg_HTML_Stack_Event_6_7::PUSH, $provenance );
-			}
-		);
-
-		$this->state->stack_of_open_elements->set_pop_handler(
-			function ( Gutenberg_HTML_Token_6_7 $token ): void {
-				$is_virtual            = ! isset( $this->state->current_token ) || ! $this->is_tag_closer();
-				$same_node             = isset( $this->state->current_token ) && $token->node_name === $this->state->current_token->node_name;
-				$provenance            = ( ! $same_node || $is_virtual ) ? 'virtual' : 'real';
-				$this->element_queue[] = new Gutenberg_HTML_Stack_Event_6_7( $token, Gutenberg_HTML_Stack_Event_6_7::POP, $provenance );
-			}
-		);
-
-		/*
-		 * Create this wrapper so that it's possible to pass
-		 * a private method into WP_HTML_Token classes without
-		 * exposing it to any public API.
-		 */
-		$this->release_internal_bookmark_on_destruct = function ( string $name ): void {
-			parent::release_bookmark( $name );
-		};
-	}
-
-	/**
-	 * Stops the parser and terminates its execution when encountering unsupported markup.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception Halts execution of the parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @param string $message Explains support is missing in order to parse the current node.
-	 */
-	private function bail( string $message ) {
-		$here  = $this->bookmarks[ $this->state->current_token->bookmark_name ];
-		$token = substr( $this->html, $here->start, $here->length );
-
-		$open_elements = array();
-		foreach ( $this->state->stack_of_open_elements->stack as $item ) {
-			$open_elements[] = $item->node_name;
-		}
-
-		$active_formats = array();
-		foreach ( $this->state->active_formatting_elements->walk_down() as $item ) {
-			$active_formats[] = $item->node_name;
-		}
-
-		$this->last_error = self::ERROR_UNSUPPORTED;
-
-		$this->unsupported_exception = new Gutenberg_HTML_Unsupported_Exception_6_7(
-			$message,
-			$this->state->current_token->node_name,
-			$here->start,
-			$token,
-			$open_elements,
-			$active_formats
-		);
-
-		throw $this->unsupported_exception;
-	}
-
-	/**
-	 * Returns the last error, if any.
-	 *
-	 * Various situations lead to parsing failure but this class will
-	 * return `false` in all those cases. To determine why something
-	 * failed it's possible to request the last error. This can be
-	 * helpful to know to distinguish whether a given tag couldn't
-	 * be found or if content in the document caused the processor
-	 * to give up and abort processing.
-	 *
-	 * Example
-	 *
-	 *     $processor = WP_HTML_Processor::create_fragment( '<template><strong><button><em><p><em>' );
-	 *     false === $processor->next_tag();
-	 *     WP_HTML_Processor::ERROR_UNSUPPORTED === $processor->get_last_error();
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see self::ERROR_UNSUPPORTED
-	 * @see self::ERROR_EXCEEDED_MAX_BOOKMARKS
-	 *
-	 * @return string|null The last error, if one exists, otherwise null.
-	 */
-	public function get_last_error(): ?string {
-		return $this->last_error;
-	}
-
-	/**
-	 * Returns context for why the parser aborted due to unsupported HTML, if it did.
-	 *
-	 * This is meant for debugging purposes, not for production use.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see self::$unsupported_exception
-	 *
-	 * @return WP_HTML_Unsupported_Exception|null
-	 */
-	public function get_unsupported_exception() {
-		return $this->unsupported_exception;
-	}
-
-	/**
-	 * Finds the next tag matching the $query.
-	 *
-	 * @todo Support matching the class name and tag name.
-	 *
-	 * @since 6.4.0
-	 * @since 6.6.0 Visits all tokens, including virtual ones.
-	 *
-	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
-	 *
-	 * @param array|string|null $query {
-	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
-	 *
-	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
-	 *     @type string      $tag_closers  'visit' to pause at tag closers, 'skip' or unset to only visit openers.
-	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
-	 *                                     1 for "first" tag, 3 for "third," etc.
-	 *                                     Defaults to first tag.
-	 *     @type string|null $class_name   Tag must contain this whole class name to match.
-	 *     @type string[]    $breadcrumbs  DOM sub-path at which element is found, e.g. `array( 'FIGURE', 'IMG' )`.
-	 *                                     May also contain the wildcard `*` which matches a single element, e.g. `array( 'SECTION', '*' )`.
-	 * }
-	 * @return bool Whether a tag was matched.
-	 */
-	public function next_tag( $query = null ): bool {
-		$visit_closers = isset( $query['tag_closers'] ) && 'visit' === $query['tag_closers'];
-
-		if ( null === $query ) {
-			while ( $this->next_token() ) {
-				if ( '#tag' !== $this->get_token_type() ) {
-					continue;
-				}
-
-				if ( ! $this->is_tag_closer() || $visit_closers ) {
-					return true;
-				}
-			}
-
-			return false;
-		}
-
-		if ( is_string( $query ) ) {
-			$query = array( 'breadcrumbs' => array( $query ) );
-		}
-
-		if ( ! is_array( $query ) ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Please pass a query array to this function.' ),
-				'6.4.0'
-			);
-			return false;
-		}
-
-		$needs_class = ( isset( $query['class_name'] ) && is_string( $query['class_name'] ) )
-			? $query['class_name']
-			: null;
-
-		if ( ! ( array_key_exists( 'breadcrumbs', $query ) && is_array( $query['breadcrumbs'] ) ) ) {
-			while ( $this->next_token() ) {
-				if ( '#tag' !== $this->get_token_type() ) {
-					continue;
-				}
-
-				if ( isset( $query['tag_name'] ) && $query['tag_name'] !== $this->get_token_name() ) {
-					continue;
-				}
-
-				if ( isset( $needs_class ) && ! $this->has_class( $needs_class ) ) {
-					continue;
-				}
-
-				if ( ! $this->is_tag_closer() || $visit_closers ) {
-					return true;
-				}
-			}
-
-			return false;
-		}
-
-		$breadcrumbs  = $query['breadcrumbs'];
-		$match_offset = isset( $query['match_offset'] ) ? (int) $query['match_offset'] : 1;
-
-		while ( $match_offset > 0 && $this->next_token() ) {
-			if ( '#tag' !== $this->get_token_type() || $this->is_tag_closer() ) {
-				continue;
-			}
-
-			if ( isset( $needs_class ) && ! $this->has_class( $needs_class ) ) {
-				continue;
-			}
-
-			if ( $this->matches_breadcrumbs( $breadcrumbs ) && 0 === --$match_offset ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Ensures internal accounting is maintained for HTML semantic rules while
-	 * the underlying Tag Processor class is seeking to a bookmark.
-	 *
-	 * This doesn't currently have a way to represent non-tags and doesn't process
-	 * semantic rules for text nodes. For access to the raw tokens consider using
-	 * WP_HTML_Tag_Processor instead.
-	 *
-	 * @since 6.5.0 Added for internal support; do not use.
-	 *
-	 * @access private
-	 *
-	 * @return bool
-	 */
-	public function next_token(): bool {
-		$this->current_element = null;
-
-		if ( isset( $this->last_error ) ) {
-			return false;
-		}
-
-		/*
-		 * Prime the events if there are none.
-		 *
-		 * @todo In some cases, probably related to the adoption agency
-		 *       algorithm, this call to step() doesn't create any new
-		 *       events. Calling it again creates them. Figure out why
-		 *       this is and if it's inherent or if it's a bug. Looping
-		 *       until there are events or until there are no more
-		 *       tokens works in the meantime and isn't obviously wrong.
-		 */
-		while ( empty( $this->element_queue ) && $this->step() ) {
-			continue;
-		}
-
-		// Process the next event on the queue.
-		$this->current_element = array_shift( $this->element_queue );
-		if ( ! isset( $this->current_element ) ) {
-			return false;
-		}
-
-		$is_pop = Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation;
-
-		/*
-		 * The root node only exists in the fragment parser, and closing it
-		 * indicates that the parse is complete. Stop before popping if from
-		 * the breadcrumbs.
-		 */
-		if ( 'root-node' === $this->current_element->token->bookmark_name ) {
-			return ! $is_pop && $this->next_token();
-		}
-
-		// Adjust the breadcrumbs for this event.
-		if ( $is_pop ) {
-			array_pop( $this->breadcrumbs );
-		} else {
-			$this->breadcrumbs[] = $this->current_element->token->node_name;
-		}
-
-		// Avoid sending close events for elements which don't expect a closing.
-		if ( $is_pop && ! static::expects_closer( $this->current_element->token ) ) {
-			return $this->next_token();
-		}
-
-		return true;
-	}
-
-	/**
-	 * Indicates if the current tag token is a tag closer.
-	 *
-	 * Example:
-	 *
-	 *     $p = WP_HTML_Processor::create_fragment( '<div></div>' );
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === false;
-	 *
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === true;
-	 *
-	 * @since 6.6.0 Subclassed for HTML Processor.
-	 *
-	 * @return bool Whether the current tag is a tag closer.
-	 */
-	public function is_tag_closer(): bool {
-		return $this->is_virtual()
-			? ( Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation && '#tag' === $this->get_token_type() )
-			: parent::is_tag_closer();
-	}
-
-	/**
-	 * Indicates if the currently-matched token is virtual, created by a stack operation
-	 * while processing HTML, rather than a token found in the HTML text itself.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @return bool Whether the current token is virtual.
-	 */
-	private function is_virtual(): bool {
-		return (
-			isset( $this->current_element->provenance ) &&
-			'virtual' === $this->current_element->provenance
-		);
-	}
-
-	/**
-	 * Indicates if the currently-matched tag matches the given breadcrumbs.
-	 *
-	 * A "*" represents a single tag wildcard, where any tag matches, but not no tags.
-	 *
-	 * At some point this function _may_ support a `**` syntax for matching any number
-	 * of unspecified tags in the breadcrumb stack. This has been intentionally left
-	 * out, however, to keep this function simple and to avoid introducing backtracking,
-	 * which could open up surprising performance breakdowns.
-	 *
-	 * Example:
-	 *
-	 *     $processor = WP_HTML_Processor::create_fragment( '<div><span><figure><img></figure></span></div>' );
-	 *     $processor->next_tag( 'img' );
-	 *     true  === $processor->matches_breadcrumbs( array( 'figure', 'img' ) );
-	 *     true  === $processor->matches_breadcrumbs( array( 'span', 'figure', 'img' ) );
-	 *     false === $processor->matches_breadcrumbs( array( 'span', 'img' ) );
-	 *     true  === $processor->matches_breadcrumbs( array( 'span', '*', 'img' ) );
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string[] $breadcrumbs DOM sub-path at which element is found, e.g. `array( 'FIGURE', 'IMG' )`.
-	 *                              May also contain the wildcard `*` which matches a single element, e.g. `array( 'SECTION', '*' )`.
-	 * @return bool Whether the currently-matched tag is found at the given nested structure.
-	 */
-	public function matches_breadcrumbs( $breadcrumbs ): bool {
-		// Everything matches when there are zero constraints.
-		if ( 0 === count( $breadcrumbs ) ) {
-			return true;
-		}
-
-		// Start at the last crumb.
-		$crumb = end( $breadcrumbs );
-
-		if ( '*' !== $crumb && $this->get_tag() !== strtoupper( $crumb ) ) {
-			return false;
-		}
-
-		for ( $i = count( $this->breadcrumbs ) - 1; $i >= 0; $i-- ) {
-			$node  = $this->breadcrumbs[ $i ];
-			$crumb = strtoupper( current( $breadcrumbs ) );
-
-			if ( '*' !== $crumb && $node !== $crumb ) {
-				return false;
-			}
-
-			if ( false === prev( $breadcrumbs ) ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Indicates if the currently-matched node expects a closing
-	 * token, or if it will self-close on the next step.
-	 *
-	 * Most HTML elements expect a closer, such as a P element or
-	 * a DIV element. Others, like an IMG element are void and don't
-	 * have a closing tag. Special elements, such as SCRIPT and STYLE,
-	 * are treated just like void tags. Text nodes and self-closing
-	 * foreign content will also act just like a void tag, immediately
-	 * closing as soon as the processor advances to the next token.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @todo When adding support for foreign content, ensure that
-	 *       this returns false for self-closing elements in the
-	 *       SVG and MathML namespace.
-	 *
-	 * @param WP_HTML_Token|null $node Optional. Node to examine, if provided.
-	 *                                 Default is to examine current node.
-	 * @return bool|null Whether to expect a closer for the currently-matched node,
-	 *                   or `null` if not matched on any token.
-	 */
-	public function expects_closer( $node = null ): ?bool {
-		$token_name = $node->node_name ?? $this->get_token_name();
-		if ( ! isset( $token_name ) ) {
-			return null;
-		}
-
-		return ! (
-			// Comments, text nodes, and other atomic tokens.
-			'#' === $token_name[0] ||
-			// Doctype declarations.
-			'html' === $token_name ||
-			// Void elements.
-			self::is_void( $token_name ) ||
-			// Special atomic elements.
-			in_array( $token_name, array( 'IFRAME', 'NOEMBED', 'NOFRAMES', 'SCRIPT', 'STYLE', 'TEXTAREA', 'TITLE', 'XMP' ), true )
-		);
-	}
-
-	/**
-	 * Steps through the HTML document and stop at the next tag, if any.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
-	 *
-	 * @see self::PROCESS_NEXT_NODE
-	 * @see self::REPROCESS_CURRENT_NODE
-	 *
-	 * @param string $node_to_process Whether to parse the next node or reprocess the current node.
-	 * @return bool Whether a tag was matched.
-	 */
-	public function step( $node_to_process = self::PROCESS_NEXT_NODE ): bool {
-		// Refuse to proceed if there was a previous error.
-		if ( null !== $this->last_error ) {
-			return false;
-		}
-
-		if ( self::REPROCESS_CURRENT_NODE !== $node_to_process ) {
-			/*
-			 * Void elements still hop onto the stack of open elements even though
-			 * there's no corresponding closing tag. This is important for managing
-			 * stack-based operations such as "navigate to parent node" or checking
-			 * on an element's breadcrumbs.
-			 *
-			 * When moving on to the next node, therefore, if the bottom-most element
-			 * on the stack is a void element, it must be closed.
-			 *
-			 * @todo Once self-closing foreign elements and BGSOUND are supported,
-			 *        they must also be implicitly closed here too. BGSOUND is
-			 *        special since it's only self-closing if the self-closing flag
-			 *        is provided in the opening tag, otherwise it expects a tag closer.
-			 */
-			$top_node = $this->state->stack_of_open_elements->current_node();
-			if ( isset( $top_node ) && ! static::expects_closer( $top_node ) ) {
-				$this->state->stack_of_open_elements->pop();
-			}
-		}
-
-		if ( self::PROCESS_NEXT_NODE === $node_to_process ) {
-			parent::next_token();
-		}
-
-		// Finish stepping when there are no more tokens in the document.
-		if (
-			Gutenberg_HTML_Tag_Processor_6_7::STATE_INCOMPLETE_INPUT === $this->parser_state ||
-			Gutenberg_HTML_Tag_Processor_6_7::STATE_COMPLETE === $this->parser_state
-		) {
-			return false;
-		}
-
-		$this->state->current_token = new Gutenberg_HTML_Token_6_7(
-			$this->bookmark_token(),
-			$this->get_token_name(),
-			$this->has_self_closing_flag(),
-			$this->release_internal_bookmark_on_destruct
-		);
-
-		try {
-			switch ( $this->state->insertion_mode ) {
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_INITIAL:
-					return $this->step_initial();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HTML:
-					return $this->step_before_html();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HEAD:
-					return $this->step_before_head();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD:
-					return $this->step_in_head();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD_NOSCRIPT:
-					return $this->step_in_head_noscript();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_HEAD:
-					return $this->step_after_head();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY:
-					return $this->step_in_body();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE:
-					return $this->step_in_table();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_TEXT:
-					return $this->step_in_table_text();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION:
-					return $this->step_in_caption();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_COLUMN_GROUP:
-					return $this->step_in_column_group();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY:
-					return $this->step_in_table_body();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW:
-					return $this->step_in_row();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL:
-					return $this->step_in_cell();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT:
-					return $this->step_in_select();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE:
-					return $this->step_in_select_in_table();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TEMPLATE:
-					return $this->step_in_template();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_BODY:
-					return $this->step_after_body();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FRAMESET:
-					return $this->step_in_frameset();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_FRAMESET:
-					return $this->step_after_frameset();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_AFTER_BODY:
-					return $this->step_after_after_body();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_AFTER_FRAMESET:
-					return $this->step_after_after_frameset();
-
-				case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FOREIGN_CONTENT:
-					return $this->step_in_foreign_content();
-
-				// This should be unreachable but PHP doesn't have total type checking on switch.
-				default:
-					$this->bail( "Unaware of the requested parsing mode: '{$this->state->insertion_mode}'." );
-			}
-		} catch ( Gutenberg_HTML_Unsupported_Exception_6_7 $e ) {
-			/*
-			 * Exceptions are used in this class to escape deep call stacks that
-			 * otherwise might involve messier calling and return conventions.
-			 */
-			return false;
-		}
-	}
-
-	/**
-	 * Computes the HTML breadcrumbs for the currently-matched node, if matched.
-	 *
-	 * Breadcrumbs start at the outermost parent and descend toward the matched element.
-	 * They always include the entire path from the root HTML node to the matched element.
-	 *
-	 * @todo It could be more efficient to expose a generator-based version of this function
-	 *       to avoid creating the array copy on tag iteration. If this is done, it would likely
-	 *       be more useful to walk up the stack when yielding instead of starting at the top.
-	 *
-	 * Example
-	 *
-	 *     $processor = WP_HTML_Processor::create_fragment( '<p><strong><em><img></em></strong></p>' );
-	 *     $processor->next_tag( 'IMG' );
-	 *     $processor->get_breadcrumbs() === array( 'HTML', 'BODY', 'P', 'STRONG', 'EM', 'IMG' );
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return string[]|null Array of tag names representing path to matched node, if matched, otherwise NULL.
-	 */
-	public function get_breadcrumbs(): ?array {
-		return $this->breadcrumbs;
-	}
-
-	/**
-	 * Returns the nesting depth of the current location in the document.
-	 *
-	 * Example:
-	 *
-	 *     $processor = WP_HTML_Processor::create_fragment( '<div><p></p></div>' );
-	 *     // The processor starts in the BODY context, meaning it has depth from the start: HTML > BODY.
-	 *     2 === $processor->get_current_depth();
-	 *
-	 *     // Opening the DIV element increases the depth.
-	 *     $processor->next_token();
-	 *     3 === $processor->get_current_depth();
-	 *
-	 *     // Opening the P element increases the depth.
-	 *     $processor->next_token();
-	 *     4 === $processor->get_current_depth();
-	 *
-	 *     // The P element is closed during `next_token()` so the depth is decreased to reflect that.
-	 *     $processor->next_token();
-	 *     3 === $processor->get_current_depth();
-	 *
-	 * @since 6.6.0
-	 *
-	 * @return int Nesting-depth of current location in the document.
-	 */
-	public function get_current_depth(): int {
-		return count( $this->breadcrumbs );
-	}
-
-	/**
-	 * Parses next element in the 'initial' insertion mode.
-	 *
-	 * This internal function performs the 'initial' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-initial-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_initial(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'before html' insertion mode.
-	 *
-	 * This internal function performs the 'before html' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-before-html-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_before_html(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'before head' insertion mode.
-	 *
-	 * This internal function performs the 'before head' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-before-head-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_before_head(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in head' insertion mode.
-	 *
-	 * This internal function performs the 'in head' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inhead
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_head(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in head noscript' insertion mode.
-	 *
-	 * This internal function performs the 'in head noscript' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inheadnoscript
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_head_noscript(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'after head' insertion mode.
-	 *
-	 * This internal function performs the 'after head' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-after-head-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_after_head(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in body' insertion mode.
-	 *
-	 * This internal function performs the 'in body' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inbody
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_body(): bool {
-		$token_name = $this->get_token_name();
-		$token_type = $this->get_token_type();
-		$op_sigil   = '#tag' === $token_type ? ( parent::is_tag_closer() ? '-' : '+' ) : '';
-		$op         = "{$op_sigil}{$token_name}";
-
-		switch ( $op ) {
-			case '#comment':
-			case '#funky-comment':
-			case '#presumptuous-tag':
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			case '#text':
-				$this->reconstruct_active_formatting_elements();
-
-				$current_token = $this->bookmarks[ $this->state->current_token->bookmark_name ];
-
-				/*
-				 * > A character token that is U+0000 NULL
-				 *
-				 * Any successive sequence of NULL bytes is ignored and won't
-				 * trigger active format reconstruction. Therefore, if the text
-				 * only comprises NULL bytes then the token should be ignored
-				 * here, but if there are any other characters in the stream
-				 * the active formats should be reconstructed.
-				 */
-				if (
-					1 <= $current_token->length &&
-					"\x00" === $this->html[ $current_token->start ] &&
-					strspn( $this->html, "\x00", $current_token->start, $current_token->length ) === $current_token->length
-				) {
-					// Parse error: ignore the token.
-					return $this->step();
-				}
-
-				/*
-				 * Whitespace-only text does not affect the frameset-ok flag.
-				 * It is probably inter-element whitespace, but it may also
-				 * contain character references which decode only to whitespace.
-				 */
-				$text = $this->get_modifiable_text();
-				if ( strlen( $text ) !== strspn( $text, " \t\n\f\r" ) ) {
-					$this->state->frameset_ok = false;
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			case 'html':
-				/*
-				 * > A DOCTYPE token
-				 * > Parse error. Ignore the token.
-				 */
-				return $this->step();
-
-			/*
-			 * > A start tag whose tag name is "button"
-			 */
-			case '+BUTTON':
-				if ( $this->state->stack_of_open_elements->has_element_in_scope( 'BUTTON' ) ) {
-					// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
-					$this->generate_implied_end_tags();
-					$this->state->stack_of_open_elements->pop_until( 'BUTTON' );
-				}
-
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->frameset_ok = false;
-
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "address", "article", "aside",
-			 * > "blockquote", "center", "details", "dialog", "dir", "div", "dl",
-			 * > "fieldset", "figcaption", "figure", "footer", "header", "hgroup",
-			 * > "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"
-			 */
-			case '+ADDRESS':
-			case '+ARTICLE':
-			case '+ASIDE':
-			case '+BLOCKQUOTE':
-			case '+CENTER':
-			case '+DETAILS':
-			case '+DIALOG':
-			case '+DIR':
-			case '+DIV':
-			case '+DL':
-			case '+FIELDSET':
-			case '+FIGCAPTION':
-			case '+FIGURE':
-			case '+FOOTER':
-			case '+HEADER':
-			case '+HGROUP':
-			case '+MAIN':
-			case '+MENU':
-			case '+NAV':
-			case '+OL':
-			case '+P':
-			case '+SEARCH':
-			case '+SECTION':
-			case '+SUMMARY':
-			case '+UL':
-				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->close_a_p_element();
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > An end tag whose tag name is one of: "address", "article", "aside", "blockquote",
-			 * > "button", "center", "details", "dialog", "dir", "div", "dl", "fieldset",
-			 * > "figcaption", "figure", "footer", "header", "hgroup", "listing", "main",
-			 * > "menu", "nav", "ol", "pre", "search", "section", "summary", "ul"
-			 */
-			case '-ADDRESS':
-			case '-ARTICLE':
-			case '-ASIDE':
-			case '-BLOCKQUOTE':
-			case '-BUTTON':
-			case '-CENTER':
-			case '-DETAILS':
-			case '-DIALOG':
-			case '-DIR':
-			case '-DIV':
-			case '-DL':
-			case '-FIELDSET':
-			case '-FIGCAPTION':
-			case '-FIGURE':
-			case '-FOOTER':
-			case '-HEADER':
-			case '-HGROUP':
-			case '-LISTING':
-			case '-MAIN':
-			case '-MENU':
-			case '-NAV':
-			case '-OL':
-			case '-PRE':
-			case '-SEARCH':
-			case '-SECTION':
-			case '-SUMMARY':
-			case '-UL':
-				if ( ! $this->state->stack_of_open_elements->has_element_in_scope( $token_name ) ) {
-					// @todo Report parse error.
-					// Ignore the token.
-					return $this->step();
-				}
-
-				$this->generate_implied_end_tags();
-				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
-					// @todo Record parse error: this error doesn't impact parsing.
-				}
-				$this->state->stack_of_open_elements->pop_until( $token_name );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"
-			 */
-			case '+H1':
-			case '+H2':
-			case '+H3':
-			case '+H4':
-			case '+H5':
-			case '+H6':
-				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->close_a_p_element();
-				}
-
-				if (
-					in_array(
-						$this->state->stack_of_open_elements->current_node()->node_name,
-						array( 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ),
-						true
-					)
-				) {
-					// @todo Indicate a parse error once it's possible.
-					$this->state->stack_of_open_elements->pop();
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "pre", "listing"
-			 */
-			case '+PRE':
-			case '+LISTING':
-				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->close_a_p_element();
-				}
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->frameset_ok = false;
-				return true;
-
-			/*
-			 * > An end tag whose tag name is one of: "h1", "h2", "h3", "h4", "h5", "h6"
-			 */
-			case '-H1':
-			case '-H2':
-			case '-H3':
-			case '-H4':
-			case '-H5':
-			case '-H6':
-				if ( ! $this->state->stack_of_open_elements->has_element_in_scope( '(internal: H1 through H6 - do not use)' ) ) {
-					/*
-					 * This is a parse error; ignore the token.
-					 *
-					 * @todo Indicate a parse error once it's possible.
-					 */
-					return $this->step();
-				}
-
-				$this->generate_implied_end_tags();
-
-				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
-					// @todo Record parse error: this error doesn't impact parsing.
-				}
-
-				$this->state->stack_of_open_elements->pop_until( '(internal: H1 through H6 - do not use)' );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is "li"
-			 * > A start tag whose tag name is one of: "dd", "dt"
-			 */
-			case '+DD':
-			case '+DT':
-			case '+LI':
-				$this->state->frameset_ok = false;
-				$node                     = $this->state->stack_of_open_elements->current_node();
-				$is_li                    = 'LI' === $token_name;
-
-				in_body_list_loop:
-				/*
-				 * The logic for LI and DT/DD is the same except for one point: LI elements _only_
-				 * close other LI elements, but a DT or DD element closes _any_ open DT or DD element.
-				 */
-				if ( $is_li ? 'LI' === $node->node_name : ( 'DD' === $node->node_name || 'DT' === $node->node_name ) ) {
-					$node_name = $is_li ? 'LI' : $node->node_name;
-					$this->generate_implied_end_tags( $node_name );
-					if ( ! $this->state->stack_of_open_elements->current_node_is( $node_name ) ) {
-						// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
-					}
-
-					$this->state->stack_of_open_elements->pop_until( $node_name );
-					goto in_body_list_done;
-				}
-
-				if (
-					'ADDRESS' !== $node->node_name &&
-					'DIV' !== $node->node_name &&
-					'P' !== $node->node_name &&
-					$this->is_special( $node->node_name )
-				) {
-					/*
-					 * > If node is in the special category, but is not an address, div,
-					 * > or p element, then jump to the step labeled done below.
-					 */
-					goto in_body_list_done;
-				} else {
-					/*
-					 * > Otherwise, set node to the previous entry in the stack of open elements
-					 * > and return to the step labeled loop.
-					 */
-					foreach ( $this->state->stack_of_open_elements->walk_up( $node ) as $item ) {
-						$node = $item;
-						break;
-					}
-					goto in_body_list_loop;
-				}
-
-				in_body_list_done:
-				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->close_a_p_element();
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > An end tag whose tag name is "li"
-			 * > An end tag whose tag name is one of: "dd", "dt"
-			 */
-			case '-DD':
-			case '-DT':
-			case '-LI':
-				if (
-					/*
-					 * An end tag whose tag name is "li":
-					 * If the stack of open elements does not have an li element in list item scope,
-					 * then this is a parse error; ignore the token.
-					 */
-					(
-						'LI' === $token_name &&
-						! $this->state->stack_of_open_elements->has_element_in_list_item_scope( 'LI' )
-					) ||
-					/*
-					 * An end tag whose tag name is one of: "dd", "dt":
-					 * If the stack of open elements does not have an element in scope that is an
-					 * HTML element with the same tag name as that of the token, then this is a
-					 * parse error; ignore the token.
-					 */
-					(
-						'LI' !== $token_name &&
-						! $this->state->stack_of_open_elements->has_element_in_scope( $token_name )
-					)
-				) {
-					/*
-					 * This is a parse error, ignore the token.
-					 *
-					 * @todo Indicate a parse error once it's possible.
-					 */
-					return $this->step();
-				}
-
-				$this->generate_implied_end_tags( $token_name );
-
-				if ( ! $this->state->stack_of_open_elements->current_node_is( $token_name ) ) {
-					// @todo Indicate a parse error once it's possible. This error does not impact the logic here.
-				}
-
-				$this->state->stack_of_open_elements->pop_until( $token_name );
-				return true;
-
-			/*
-			 * > An end tag whose tag name is "p"
-			 */
-			case '-P':
-				if ( ! $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->insert_html_element( $this->state->current_token );
-				}
-
-				$this->close_a_p_element();
-				return true;
-
-			// > A start tag whose tag name is "a"
-			case '+A':
-				foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
-					switch ( $item->node_name ) {
-						case 'marker':
-							break;
-
-						case 'A':
-							$this->run_adoption_agency_algorithm();
-							$this->state->active_formatting_elements->remove_node( $item );
-							$this->state->stack_of_open_elements->remove_node( $item );
-							break;
-					}
-				}
-
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->active_formatting_elements->push( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "b", "big", "code", "em", "font", "i",
-			 * > "s", "small", "strike", "strong", "tt", "u"
-			 */
-			case '+B':
-			case '+BIG':
-			case '+CODE':
-			case '+EM':
-			case '+FONT':
-			case '+I':
-			case '+S':
-			case '+SMALL':
-			case '+STRIKE':
-			case '+STRONG':
-			case '+TT':
-			case '+U':
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->active_formatting_elements->push( $this->state->current_token );
-				return true;
-
-			/*
-			 * > An end tag whose tag name is one of: "a", "b", "big", "code", "em", "font", "i",
-			 * > "nobr", "s", "small", "strike", "strong", "tt", "u"
-			 */
-			case '-A':
-			case '-B':
-			case '-BIG':
-			case '-CODE':
-			case '-EM':
-			case '-FONT':
-			case '-I':
-			case '-S':
-			case '-SMALL':
-			case '-STRIKE':
-			case '-STRONG':
-			case '-TT':
-			case '-U':
-				$this->run_adoption_agency_algorithm();
-				return true;
-
-			/*
-			 * > An end tag whose tag name is "br"
-			 * >   Parse error. Drop the attributes from the token, and act as described in the next
-			 * >   entry; i.e. act as if this was a "br" start tag token with no attributes, rather
-			 * >   than the end tag token that it actually is.
-			 */
-			case '-BR':
-				$this->bail( 'Closing BR tags require unimplemented special handling.' );
-				// This return required because PHPCS can't determine that the call to bail() throws.
-				return false;
-
-			/*
-			 * > A start tag whose tag name is one of: "area", "br", "embed", "img", "keygen", "wbr"
-			 */
-			case '+AREA':
-			case '+BR':
-			case '+EMBED':
-			case '+IMG':
-			case '+KEYGEN':
-			case '+WBR':
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->frameset_ok = false;
-				return true;
-
-			/*
-			 * > A start tag whose tag name is "input"
-			 */
-			case '+INPUT':
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$type_attribute = $this->get_attribute( 'type' );
-				/*
-				 * > If the token does not have an attribute with the name "type", or if it does,
-				 * > but that attribute's value is not an ASCII case-insensitive match for the
-				 * > string "hidden", then: set the frameset-ok flag to "not ok".
-				 */
-				if ( ! is_string( $type_attribute ) || 'hidden' !== strtolower( $type_attribute ) ) {
-					$this->state->frameset_ok = false;
-				}
-				return true;
-
-			/*
-			 * > A start tag whose tag name is "hr"
-			 */
-			case '+HR':
-				if ( $this->state->stack_of_open_elements->has_p_in_button_scope() ) {
-					$this->close_a_p_element();
-				}
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->frameset_ok = false;
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "param", "source", "track"
-			 */
-			case '+PARAM':
-			case '+SOURCE':
-			case '+TRACK':
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is "select"
-			 */
-			case '+SELECT':
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				$this->state->frameset_ok = false;
-
-				switch ( $this->state->insertion_mode ) {
-					/*
-					 * > If the insertion mode is one of "in table", "in caption", "in table body", "in row",
-					 * > or "in cell", then switch the insertion mode to "in select in table".
-					 */
-					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE:
-					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION:
-					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY:
-					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW:
-					case Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL:
-						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE;
-						break;
-
-					/*
-					 * > Otherwise, switch the insertion mode to "in select".
-					 */
-					default:
-						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT;
-						break;
-				}
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "optgroup", "option"
-			 */
-			case '+OPTGROUP':
-			case '+OPTION':
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
-					$this->state->stack_of_open_elements->pop();
-				}
-				$this->reconstruct_active_formatting_elements();
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-		}
-
-		/*
-		 * These tags require special handling in the 'in body' insertion mode
-		 * but that handling hasn't yet been implemented.
-		 *
-		 * As the rules for each tag are implemented, the corresponding tag
-		 * name should be removed from this list. An accompanying test should
-		 * help ensure this list is maintained.
-		 *
-		 * @see Tests_HtmlApi_WpHtmlProcessor::test_step_in_body_fails_on_unsupported_tags
-		 *
-		 * Since this switch structure throws a WP_HTML_Unsupported_Exception, it's
-		 * possible to handle "any other start tag" and "any other end tag" below,
-		 * as that guarantees execution doesn't proceed for the unimplemented tags.
-		 *
-		 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody
-		 */
-		switch ( $token_name ) {
-			case 'APPLET':
-			case 'BASE':
-			case 'BASEFONT':
-			case 'BGSOUND':
-			case 'BODY':
-			case 'CAPTION':
-			case 'COL':
-			case 'COLGROUP':
-			case 'FORM':
-			case 'FRAME':
-			case 'FRAMESET':
-			case 'HEAD':
-			case 'HTML':
-			case 'IFRAME':
-			case 'LINK':
-			case 'MARQUEE':
-			case 'MATH':
-			case 'META':
-			case 'NOBR':
-			case 'NOEMBED':
-			case 'NOFRAMES':
-			case 'NOSCRIPT':
-			case 'OBJECT':
-			case 'PLAINTEXT':
-			case 'RB':
-			case 'RP':
-			case 'RT':
-			case 'RTC':
-			case 'SARCASM':
-			case 'SCRIPT':
-			case 'STYLE':
-			case 'SVG':
-			case 'TABLE':
-			case 'TBODY':
-			case 'TD':
-			case 'TEMPLATE':
-			case 'TEXTAREA':
-			case 'TFOOT':
-			case 'TH':
-			case 'THEAD':
-			case 'TITLE':
-			case 'TR':
-			case 'XMP':
-				$this->bail( "Cannot process {$token_name} element." );
-		}
-
-		if ( ! parent::is_tag_closer() ) {
-			/*
-			 * > Any other start tag
-			 */
-			$this->reconstruct_active_formatting_elements();
-			$this->insert_html_element( $this->state->current_token );
-			return true;
-		} else {
-			/*
-			 * > Any other end tag
-			 */
-
-			/*
-			 * Find the corresponding tag opener in the stack of open elements, if
-			 * it exists before reaching a special element, which provides a kind
-			 * of boundary in the stack. For example, a `</custom-tag>` should not
-			 * close anything beyond its containing `P` or `DIV` element.
-			 */
-			foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
-				if ( $token_name === $node->node_name ) {
-					break;
-				}
-
-				if ( self::is_special( $node->node_name ) ) {
-					// This is a parse error, ignore the token.
-					return $this->step();
-				}
-			}
-
-			$this->generate_implied_end_tags( $token_name );
-			if ( $node !== $this->state->stack_of_open_elements->current_node() ) {
-				// @todo Record parse error: this error doesn't impact parsing.
-			}
-
-			foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
-				$this->state->stack_of_open_elements->pop();
-				if ( $node === $item ) {
-					return true;
-				}
-			}
-		}
-	}
-
-	/**
-	 * Parses next element in the 'in table' insertion mode.
-	 *
-	 * This internal function performs the 'in table' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intable
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_table(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in table text' insertion mode.
-	 *
-	 * This internal function performs the 'in table text' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intabletext
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_table_text(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in caption' insertion mode.
-	 *
-	 * This internal function performs the 'in caption' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-incaption
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_caption(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in column group' insertion mode.
-	 *
-	 * This internal function performs the 'in column group' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-incolgroup
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_column_group(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in table body' insertion mode.
-	 *
-	 * This internal function performs the 'in table body' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intbody
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_table_body(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in row' insertion mode.
-	 *
-	 * This internal function performs the 'in row' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intr
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_row(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in cell' insertion mode.
-	 *
-	 * This internal function performs the 'in cell' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intd
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_cell(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in select' insertion mode.
-	 *
-	 * This internal function performs the 'in select' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inselect
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_select(): bool {
-		$token_name = $this->get_token_name();
-		$token_type = $this->get_token_type();
-		$op_sigil   = '#tag' === $token_type ? ( parent::is_tag_closer() ? '-' : '+' ) : '';
-		$op         = "{$op_sigil}{$token_name}";
-
-		switch ( $op ) {
-			/*
-			 * > Any other character token
-			 */
-			case '#text':
-				$current_token = $this->bookmarks[ $this->state->current_token->bookmark_name ];
-
-				/*
-				 * > A character token that is U+0000 NULL
-				 *
-				 * If a text node only comprises null bytes then it should be
-				 * entirely ignored and should not return to calling code.
-				 */
-				if (
-					1 <= $current_token->length &&
-					"\x00" === $this->html[ $current_token->start ] &&
-					strspn( $this->html, "\x00", $current_token->start, $current_token->length ) === $current_token->length
-				) {
-					// Parse error: ignore the token.
-					return $this->step();
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A comment token
-			 */
-			case '#comment':
-			case '#funky-comment':
-			case '#presumptuous-tag':
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A DOCTYPE token
-			 */
-			case 'html':
-				// Parse error: ignore the token.
-				return $this->step();
-
-			/*
-			 * > A start tag whose tag name is "html"
-			 */
-			case '+HTML':
-				return $this->step_in_body();
-
-			/*
-			 * > A start tag whose tag name is "option"
-			 */
-			case '+OPTION':
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
-					$this->state->stack_of_open_elements->pop();
-				}
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > A start tag whose tag name is "optgroup"
-			 * > A start tag whose tag name is "hr"
-			 *
-			 * These rules are identical except for the treatment of the self-closing flag and
-			 * the subsequent pop of the HR void element, all of which is handled elsewhere in the processor.
-			 */
-			case '+OPTGROUP':
-			case '+HR':
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
-					$this->state->stack_of_open_elements->pop();
-				}
-
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTGROUP' ) ) {
-					$this->state->stack_of_open_elements->pop();
-				}
-
-				$this->insert_html_element( $this->state->current_token );
-				return true;
-
-			/*
-			 * > An end tag whose tag name is "optgroup"
-			 */
-			case '-OPTGROUP':
-				$current_node = $this->state->stack_of_open_elements->current_node();
-				if ( $current_node && 'OPTION' === $current_node->node_name ) {
-					foreach ( $this->state->stack_of_open_elements->walk_up( $current_node ) as $parent ) {
-						break;
-					}
-					if ( $parent && 'OPTGROUP' === $parent->node_name ) {
-						$this->state->stack_of_open_elements->pop();
-					}
-				}
-
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTGROUP' ) ) {
-					$this->state->stack_of_open_elements->pop();
-					return true;
-				}
-
-				// Parse error: ignore the token.
-				return $this->step();
-
-			/*
-			 * > An end tag whose tag name is "option"
-			 */
-			case '-OPTION':
-				if ( $this->state->stack_of_open_elements->current_node_is( 'OPTION' ) ) {
-					$this->state->stack_of_open_elements->pop();
-					return true;
-				}
-
-				// Parse error: ignore the token.
-				return $this->step();
-
-			/*
-			 * > An end tag whose tag name is "select"
-			 * > A start tag whose tag name is "select"
-			 *
-			 * > It just gets treated like an end tag.
-			 */
-			case '-SELECT':
-			case '+SELECT':
-				if ( ! $this->state->stack_of_open_elements->has_element_in_select_scope( 'SELECT' ) ) {
-					// Parse error: ignore the token.
-					return $this->step();
-				}
-				$this->state->stack_of_open_elements->pop_until( 'SELECT' );
-				$this->reset_insertion_mode();
-				return true;
-
-			/*
-			 * > A start tag whose tag name is one of: "input", "keygen", "textarea"
-			 *
-			 * All three of these tags are considered a parse error when found in this insertion mode.
-			 */
-			case '+INPUT':
-			case '+KEYGEN':
-			case '+TEXTAREA':
-				if ( ! $this->state->stack_of_open_elements->has_element_in_select_scope( 'SELECT' ) ) {
-					// Ignore the token.
-					return $this->step();
-				}
-				$this->state->stack_of_open_elements->pop_until( 'SELECT' );
-				$this->reset_insertion_mode();
-				return $this->step( self::REPROCESS_CURRENT_NODE );
-
-			/*
-			 * > A start tag whose tag name is one of: "script", "template"
-			 * > An end tag whose tag name is "template"
-			 */
-			case '+SCRIPT':
-			case '+TEMPLATE':
-			case '-TEMPLATE':
-				return $this->step_in_head();
-		}
-
-		/*
-		 * > Anything else
-		 * >   Parse error: ignore the token.
-		 */
-		return $this->step();
-	}
-
-	/**
-	 * Parses next element in the 'in select in table' insertion mode.
-	 *
-	 * This internal function performs the 'in select in table' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inselectintable
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_select_in_table(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in template' insertion mode.
-	 *
-	 * This internal function performs the 'in template' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intemplate
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_template(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'after body' insertion mode.
-	 *
-	 * This internal function performs the 'after body' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-afterbody
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_after_body(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in frameset' insertion mode.
-	 *
-	 * This internal function performs the 'in frameset' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inframeset
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_frameset(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'after frameset' insertion mode.
-	 *
-	 * This internal function performs the 'after frameset' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-afterframeset
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_after_frameset(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'after after body' insertion mode.
-	 *
-	 * This internal function performs the 'after after body' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-after-after-body-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_after_after_body(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'after after frameset' insertion mode.
-	 *
-	 * This internal function performs the 'after after frameset' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-after-after-frameset-insertion-mode
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_after_after_frameset(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/**
-	 * Parses next element in the 'in foreign content' insertion mode.
-	 *
-	 * This internal function performs the 'in foreign content' insertion mode
-	 * logic for the generalized WP_HTML_Processor::step() function.
-	 *
-	 * @since 6.7.0 Stub implementation.
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inforeign
-	 * @see WP_HTML_Processor::step
-	 *
-	 * @return bool Whether an element was found.
-	 */
-	private function step_in_foreign_content(): bool {
-		$this->bail( "No support for parsing in the '{$this->state->insertion_mode}' state." );
-	}
-
-	/*
-	 * Internal helpers
-	 */
-
-	/**
-	 * Creates a new bookmark for the currently-matched token and returns the generated name.
-	 *
-	 * @since 6.4.0
-	 * @since 6.5.0 Renamed from bookmark_tag() to bookmark_token().
-	 *
-	 * @throws Exception When unable to allocate requested bookmark.
-	 *
-	 * @return string|false Name of created bookmark, or false if unable to create.
-	 */
-	private function bookmark_token() {
-		if ( ! parent::set_bookmark( ++$this->bookmark_counter ) ) {
-			$this->last_error = self::ERROR_EXCEEDED_MAX_BOOKMARKS;
-			throw new Exception( 'could not allocate bookmark' );
-		}
-
-		return "{$this->bookmark_counter}";
-	}
-
-	/*
-	 * HTML semantic overrides for Tag Processor
-	 */
-
-	/**
-	 * Returns the uppercase name of the matched tag.
-	 *
-	 * The semantic rules for HTML specify that certain tags be reprocessed
-	 * with a different tag name. Because of this, the tag name presented
-	 * by the HTML Processor may differ from the one reported by the HTML
-	 * Tag Processor, which doesn't apply these semantic rules.
-	 *
-	 * Example:
-	 *
-	 *     $processor = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-	 *     $processor->next_tag() === true;
-	 *     $processor->get_tag() === 'DIV';
-	 *
-	 *     $processor->next_tag() === false;
-	 *     $processor->get_tag() === null;
-	 *
-	 * @since 6.4.0
-	 *
-	 * @return string|null Name of currently matched tag in input HTML, or `null` if none found.
-	 */
-	public function get_tag(): ?string {
-		if ( null !== $this->last_error ) {
-			return null;
-		}
-
-		if ( $this->is_virtual() ) {
-			return $this->current_element->token->node_name;
-		}
-
-		$tag_name = parent::get_tag();
-
-		switch ( $tag_name ) {
-			case 'IMAGE':
-				/*
-				 * > A start tag whose tag name is "image"
-				 * > Change the token's tag name to "img" and reprocess it. (Don't ask.)
-				 */
-				return 'IMG';
-
-			default:
-				return $tag_name;
-		}
-	}
-
-	/**
-	 * Indicates if the currently matched tag contains the self-closing flag.
-	 *
-	 * No HTML elements ought to have the self-closing flag and for those, the self-closing
-	 * flag will be ignored. For void elements this is benign because they "self close"
-	 * automatically. For non-void HTML elements though problems will appear if someone
-	 * intends to use a self-closing element in place of that element with an empty body.
-	 * For HTML foreign elements and custom elements the self-closing flag determines if
-	 * they self-close or not.
-	 *
-	 * This function does not determine if a tag is self-closing,
-	 * but only if the self-closing flag is present in the syntax.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @return bool Whether the currently matched tag contains the self-closing flag.
-	 */
-	public function has_self_closing_flag(): bool {
-		return $this->is_virtual() ? false : parent::has_self_closing_flag();
-	}
-
-	/**
-	 * Returns the node name represented by the token.
-	 *
-	 * This matches the DOM API value `nodeName`. Some values
-	 * are static, such as `#text` for a text node, while others
-	 * are dynamically generated from the token itself.
-	 *
-	 * Dynamic names:
-	 *  - Uppercase tag name for tag matches.
-	 *  - `html` for DOCTYPE declarations.
-	 *
-	 * Note that if the Tag Processor is not matched on a token
-	 * then this function will return `null`, either because it
-	 * hasn't yet found a token or because it reached the end
-	 * of the document without matching a token.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @return string|null Name of the matched token.
-	 */
-	public function get_token_name(): ?string {
-		return $this->is_virtual()
-			? $this->current_element->token->node_name
-			: parent::get_token_name();
-	}
-
-	/**
-	 * Indicates the kind of matched token, if any.
-	 *
-	 * This differs from `get_token_name()` in that it always
-	 * returns a static string indicating the type, whereas
-	 * `get_token_name()` may return values derived from the
-	 * token itself, such as a tag name or processing
-	 * instruction tag.
-	 *
-	 * Possible values:
-	 *  - `#tag` when matched on a tag.
-	 *  - `#text` when matched on a text node.
-	 *  - `#cdata-section` when matched on a CDATA node.
-	 *  - `#comment` when matched on a comment.
-	 *  - `#doctype` when matched on a DOCTYPE declaration.
-	 *  - `#presumptuous-tag` when matched on an empty tag closer.
-	 *  - `#funky-comment` when matched on a funky comment.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @return string|null What kind of token is matched, or null.
-	 */
-	public function get_token_type(): ?string {
-		if ( $this->is_virtual() ) {
-			/*
-			 * This logic comes from the Tag Processor.
-			 *
-			 * @todo It would be ideal not to repeat this here, but it's not clearly
-			 *       better to allow passing a token name to `get_token_type()`.
-			 */
-			$node_name     = $this->current_element->token->node_name;
-			$starting_char = $node_name[0];
-			if ( 'A' <= $starting_char && 'Z' >= $starting_char ) {
-				return '#tag';
-			}
-
-			if ( 'html' === $node_name ) {
-				return '#doctype';
-			}
-
-			return $node_name;
-		}
-
-		return parent::get_token_type();
-	}
-
-	/**
-	 * Returns the value of a requested attribute from a matched tag opener if that attribute exists.
-	 *
-	 * Example:
-	 *
-	 *     $p = WP_HTML_Processor::create_fragment( '<div enabled class="test" data-test-id="14">Test</div>' );
-	 *     $p->next_token() === true;
-	 *     $p->get_attribute( 'data-test-id' ) === '14';
-	 *     $p->get_attribute( 'enabled' ) === true;
-	 *     $p->get_attribute( 'aria-label' ) === null;
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute( 'class' ) === null;
-	 *
-	 * @since 6.6.0 Subclassed for HTML Processor.
-	 *
-	 * @param string $name Name of attribute whose value is requested.
-	 * @return string|true|null Value of attribute or `null` if not available. Boolean attributes return `true`.
-	 */
-	public function get_attribute( $name ) {
-		return $this->is_virtual() ? null : parent::get_attribute( $name );
-	}
-
-	/**
-	 * Updates or creates a new attribute on the currently matched tag with the passed value.
-	 *
-	 * For boolean attributes special handling is provided:
-	 *  - When `true` is passed as the value, then only the attribute name is added to the tag.
-	 *  - When `false` is passed, the attribute gets removed if it existed before.
-	 *
-	 * For string attributes, the value is escaped using the `esc_attr` function.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @param string      $name  The attribute name to target.
-	 * @param string|bool $value The new attribute value.
-	 * @return bool Whether an attribute value was set.
-	 */
-	public function set_attribute( $name, $value ): bool {
-		return $this->is_virtual() ? false : parent::set_attribute( $name, $value );
-	}
-
-	/**
-	 * Remove an attribute from the currently-matched tag.
-	 *
-	 * @since 6.6.0 Subclassed for HTML Processor.
-	 *
-	 * @param string $name The attribute name to remove.
-	 * @return bool Whether an attribute was removed.
-	 */
-	public function remove_attribute( $name ): bool {
-		return $this->is_virtual() ? false : parent::remove_attribute( $name );
-	}
-
-	/**
-	 * Gets lowercase names of all attributes matching a given prefix in the current tag.
-	 *
-	 * Note that matching is case-insensitive. This is in accordance with the spec:
-	 *
-	 * > There must never be two or more attributes on
-	 * > the same start tag whose names are an ASCII
-	 * > case-insensitive match for each other.
-	 *     - HTML 5 spec
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-	 *
-	 * @param string $prefix Prefix of requested attribute names.
-	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
-	 */
-	public function get_attribute_names_with_prefix( $prefix ): ?array {
-		return $this->is_virtual() ? null : parent::get_attribute_names_with_prefix( $prefix );
-	}
-
-	/**
-	 * Adds a new class name to the currently matched tag.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @param string $class_name The class name to add.
-	 * @return bool Whether the class was set to be added.
-	 */
-	public function add_class( $class_name ): bool {
-		return $this->is_virtual() ? false : parent::add_class( $class_name );
-	}
-
-	/**
-	 * Removes a class name from the currently matched tag.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @param string $class_name The class name to remove.
-	 * @return bool Whether the class was set to be removed.
-	 */
-	public function remove_class( $class_name ): bool {
-		return $this->is_virtual() ? false : parent::remove_class( $class_name );
-	}
-
-	/**
-	 * Returns if a matched tag contains the given ASCII case-insensitive class name.
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @param string $wanted_class Look for this CSS class name, ASCII case-insensitive.
-	 * @return bool|null Whether the matched tag contains the given class name, or null if not matched.
-	 */
-	public function has_class( $wanted_class ): ?bool {
-		return $this->is_virtual() ? null : parent::has_class( $wanted_class );
-	}
-
-	/**
-	 * Generator for a foreach loop to step through each class name for the matched tag.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $p = WP_HTML_Processor::create_fragment( "<div class='free &lt;egg&lt;\tlang-en'>" );
-	 *     $p->next_tag();
-	 *     foreach ( $p->class_list() as $class_name ) {
-	 *         echo "{$class_name} ";
-	 *     }
-	 *     // Outputs: "free <egg> lang-en "
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 */
-	public function class_list() {
-		return $this->is_virtual() ? null : parent::class_list();
-	}
-
-	/**
-	 * Returns the modifiable text for a matched token, or an empty string.
-	 *
-	 * Modifiable text is text content that may be read and changed without
-	 * changing the HTML structure of the document around it. This includes
-	 * the contents of `#text` nodes in the HTML as well as the inner
-	 * contents of HTML comments, Processing Instructions, and others, even
-	 * though these nodes aren't part of a parsed DOM tree. They also contain
-	 * the contents of SCRIPT and STYLE tags, of TEXTAREA tags, and of any
-	 * other section in an HTML document which cannot contain HTML markup (DATA).
-	 *
-	 * If a token has no modifiable text then an empty string is returned to
-	 * avoid needless crashing or type errors. An empty string does not mean
-	 * that a token has modifiable text, and a token with modifiable text may
-	 * have an empty string (e.g. a comment with no contents).
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @return string
-	 */
-	public function get_modifiable_text(): string {
-		return $this->is_virtual() ? '' : parent::get_modifiable_text();
-	}
-
-	/**
-	 * Indicates what kind of comment produced the comment node.
-	 *
-	 * Because there are different kinds of HTML syntax which produce
-	 * comments, the Tag Processor tracks and exposes this as a type
-	 * for the comment. Nominally only regular HTML comments exist as
-	 * they are commonly known, but a number of unrelated syntax errors
-	 * also produce comments.
-	 *
-	 * @see self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT
-	 * @see self::COMMENT_AS_CDATA_LOOKALIKE
-	 * @see self::COMMENT_AS_INVALID_HTML
-	 * @see self::COMMENT_AS_HTML_COMMENT
-	 * @see self::COMMENT_AS_PI_NODE_LOOKALIKE
-	 *
-	 * @since 6.6.0 Subclassed for the HTML Processor.
-	 *
-	 * @return string|null
-	 */
-	public function get_comment_type(): ?string {
-		return $this->is_virtual() ? null : parent::get_comment_type();
-	}
-
-	/**
-	 * Removes a bookmark that is no longer needed.
-	 *
-	 * Releasing a bookmark frees up the small
-	 * performance overhead it requires.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string $bookmark_name Name of the bookmark to remove.
-	 * @return bool Whether the bookmark already existed before removal.
-	 */
-	public function release_bookmark( $bookmark_name ): bool {
-		return parent::release_bookmark( "_{$bookmark_name}" );
-	}
-
-	/**
-	 * Moves the internal cursor in the HTML Processor to a given bookmark's location.
-	 *
-	 * Be careful! Seeking backwards to a previous location resets the parser to the
-	 * start of the document and reparses the entire contents up until it finds the
-	 * sought-after bookmarked location.
-	 *
-	 * In order to prevent accidental infinite loops, there's a
-	 * maximum limit on the number of times seek() can be called.
-	 *
-	 * @throws Exception When unable to allocate a bookmark for the next token in the input HTML document.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string $bookmark_name Jump to the place in the document identified by this bookmark name.
-	 * @return bool Whether the internal cursor was successfully moved to the bookmark's location.
-	 */
-	public function seek( $bookmark_name ): bool {
-		// Flush any pending updates to the document before beginning.
-		$this->get_updated_html();
-
-		$actual_bookmark_name = "_{$bookmark_name}";
-		$processor_started_at = $this->state->current_token
-			? $this->bookmarks[ $this->state->current_token->bookmark_name ]->start
-			: 0;
-		$bookmark_starts_at   = $this->bookmarks[ $actual_bookmark_name ]->start;
-		$direction            = $bookmark_starts_at > $processor_started_at ? 'forward' : 'backward';
-
-		/*
-		 * If seeking backwards, it's possible that the sought-after bookmark exists within an element
-		 * which has been closed before the current cursor; in other words, it has already been removed
-		 * from the stack of open elements. This means that it's insufficient to simply pop off elements
-		 * from the stack of open elements which appear after the bookmarked location and then jump to
-		 * that location, as the elements which were open before won't be re-opened.
-		 *
-		 * In order to maintain consistency, the HTML Processor rewinds to the start of the document
-		 * and reparses everything until it finds the sought-after bookmark.
-		 *
-		 * There are potentially better ways to do this: cache the parser state for each bookmark and
-		 * restore it when seeking; store an immutable and idempotent register of where elements open
-		 * and close.
-		 *
-		 * If caching the parser state it will be essential to properly maintain the cached stack of
-		 * open elements and active formatting elements when modifying the document. This could be a
-		 * tedious and time-consuming process as well, and so for now will not be performed.
-		 *
-		 * It may be possible to track bookmarks for where elements open and close, and in doing so
-		 * be able to quickly recalculate breadcrumbs for any element in the document. It may even
-		 * be possible to remove the stack of open elements and compute it on the fly this way.
-		 * If doing this, the parser would need to track the opening and closing locations for all
-		 * tokens in the breadcrumb path for any and all bookmarks. By utilizing bookmarks themselves
-		 * this list could be automatically maintained while modifying the document. Finding the
-		 * breadcrumbs would then amount to traversing that list from the start until the token
-		 * being inspected. Once an element closes, if there are no bookmarks pointing to locations
-		 * within that element, then all of these locations may be forgotten to save on memory use
-		 * and computation time.
-		 */
-		if ( 'backward' === $direction ) {
-			/*
-			 * Instead of clearing the parser state and starting fresh, calling the stack methods
-			 * maintains the proper flags in the parser.
-			 */
-			foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
-				if ( 'context-node' === $item->bookmark_name ) {
-					break;
-				}
-
-				$this->state->stack_of_open_elements->remove_node( $item );
-			}
-
-			foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
-				if ( 'context-node' === $item->bookmark_name ) {
-					break;
-				}
-
-				$this->state->active_formatting_elements->remove_node( $item );
-			}
-
-			parent::seek( 'context-node' );
-			$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
-			$this->state->frameset_ok    = true;
-			$this->element_queue         = array();
-			$this->current_element       = null;
-
-			if ( isset( $this->context_node ) ) {
-				$this->breadcrumbs = array_slice( $this->breadcrumbs, 0, 2 );
-			} else {
-				$this->breadcrumbs = array();
-			}
-		}
-
-		// When moving forwards, reparse the document until reaching the same location as the original bookmark.
-		if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
-			return true;
-		}
-
-		while ( $this->next_token() ) {
-			if ( $bookmark_starts_at === $this->bookmarks[ $this->state->current_token->bookmark_name ]->start ) {
-				while ( isset( $this->current_element ) && Gutenberg_HTML_Stack_Event_6_7::POP === $this->current_element->operation ) {
-					$this->current_element = array_shift( $this->element_queue );
-				}
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Sets a bookmark in the HTML document.
-	 *
-	 * Bookmarks represent specific places or tokens in the HTML
-	 * document, such as a tag opener or closer. When applying
-	 * edits to a document, such as setting an attribute, the
-	 * text offsets of that token may shift; the bookmark is
-	 * kept updated with those shifts and remains stable unless
-	 * the entire span of text in which the token sits is removed.
-	 *
-	 * Release bookmarks when they are no longer needed.
-	 *
-	 * Example:
-	 *
-	 *     <main><h2>Surprising fact you may not know!</h2></main>
-	 *           ^  ^
-	 *            \-|-- this `H2` opener bookmark tracks the token
-	 *
-	 *     <main class="clickbait"><h2>Surprising fact you may no…
-	 *                             ^  ^
-	 *                              \-|-- it shifts with edits
-	 *
-	 * Bookmarks provide the ability to seek to a previously-scanned
-	 * place in the HTML document. This avoids the need to re-scan
-	 * the entire document.
-	 *
-	 * Example:
-	 *
-	 *     <ul><li>One</li><li>Two</li><li>Three</li></ul>
-	 *                                 ^^^^
-	 *                                 want to note this last item
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( $html );
-	 *     $in_list = false;
-	 *     while ( $p->next_tag( array( 'tag_closers' => $in_list ? 'visit' : 'skip' ) ) ) {
-	 *         if ( 'UL' === $p->get_tag() ) {
-	 *             if ( $p->is_tag_closer() ) {
-	 *                 $in_list = false;
-	 *                 $p->set_bookmark( 'resume' );
-	 *                 if ( $p->seek( 'last-li' ) ) {
-	 *                     $p->add_class( 'last-li' );
-	 *                 }
-	 *                 $p->seek( 'resume' );
-	 *                 $p->release_bookmark( 'last-li' );
-	 *                 $p->release_bookmark( 'resume' );
-	 *             } else {
-	 *                 $in_list = true;
-	 *             }
-	 *         }
-	 *
-	 *         if ( 'LI' === $p->get_tag() ) {
-	 *             $p->set_bookmark( 'last-li' );
-	 *         }
-	 *     }
-	 *
-	 * Bookmarks intentionally hide the internal string offsets
-	 * to which they refer. They are maintained internally as
-	 * updates are applied to the HTML document and therefore
-	 * retain their "position" - the location to which they
-	 * originally pointed. The inability to use bookmarks with
-	 * functions like `substr` is therefore intentional to guard
-	 * against accidentally breaking the HTML.
-	 *
-	 * Because bookmarks allocate memory and require processing
-	 * for every applied update, they are limited and require
-	 * a name. They should not be created with programmatically-made
-	 * names, such as "li_{$index}" with some loop. As a general
-	 * rule they should only be created with string-literal names
-	 * like "start-of-section" or "last-paragraph".
-	 *
-	 * Bookmarks are a powerful tool to enable complicated behavior.
-	 * Consider double-checking that you need this tool if you are
-	 * reaching for it, as inappropriate use could lead to broken
-	 * HTML structure or unwanted processing overhead.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string $bookmark_name Identifies this particular bookmark.
-	 * @return bool Whether the bookmark was successfully created.
-	 */
-	public function set_bookmark( $bookmark_name ): bool {
-		return parent::set_bookmark( "_{$bookmark_name}" );
-	}
-
-	/**
-	 * Checks whether a bookmark with the given name exists.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @param string $bookmark_name Name to identify a bookmark that potentially exists.
-	 * @return bool Whether that bookmark exists.
-	 */
-	public function has_bookmark( $bookmark_name ): bool {
-		return parent::has_bookmark( "_{$bookmark_name}" );
-	}
-
-	/*
-	 * HTML Parsing Algorithms
-	 */
-
-	/**
-	 * Closes a P element.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#close-a-p-element
-	 */
-	private function close_a_p_element(): void {
-		$this->generate_implied_end_tags( 'P' );
-		$this->state->stack_of_open_elements->pop_until( 'P' );
-	}
-
-	/**
-	 * Closes elements that have implied end tags.
-	 *
-	 * @since 6.4.0
-	 * @since 6.7.0 Full spec support.
-	 *
-	 * @see https://html.spec.whatwg.org/#generate-implied-end-tags
-	 *
-	 * @param string|null $except_for_this_element Perform as if this element doesn't exist in the stack of open elements.
-	 */
-	private function generate_implied_end_tags( ?string $except_for_this_element = null ): void {
-		$elements_with_implied_end_tags = array(
-			'DD',
-			'DT',
-			'LI',
-			'OPTGROUP',
-			'OPTION',
-			'P',
-			'RB',
-			'RP',
-			'RT',
-			'RTC',
-		);
-
-		$no_exclusions = ! isset( $except_for_this_element );
-
-		while (
-			( $no_exclusions || ! $this->state->stack_of_open_elements->current_node_is( $except_for_this_element ) ) &&
-			in_array( $this->state->stack_of_open_elements->current_node()->node_name, $elements_with_implied_end_tags, true )
-		) {
-			$this->state->stack_of_open_elements->pop();
-		}
-	}
-
-	/**
-	 * Closes elements that have implied end tags, thoroughly.
-	 *
-	 * See the HTML specification for an explanation why this is
-	 * different from generating end tags in the normal sense.
-	 *
-	 * @since 6.4.0
-	 * @since 6.7.0 Full spec support.
-	 *
-	 * @see WP_HTML_Processor::generate_implied_end_tags
-	 * @see https://html.spec.whatwg.org/#generate-implied-end-tags
-	 */
-	private function generate_implied_end_tags_thoroughly(): void {
-		$elements_with_implied_end_tags = array(
-			'CAPTION',
-			'COLGROUP',
-			'DD',
-			'DT',
-			'LI',
-			'OPTGROUP',
-			'OPTION',
-			'P',
-			'RB',
-			'RP',
-			'RT',
-			'RTC',
-			'TBODY',
-			'TD',
-			'TFOOT',
-			'TH',
-			'THEAD',
-			'TR',
-		);
-
-		while ( in_array( $this->state->stack_of_open_elements->current_node()->node_name, $elements_with_implied_end_tags, true ) ) {
-			$this->state->stack_of_open_elements->pop();
-		}
-	}
-
-	/**
-	 * Reconstructs the active formatting elements.
-	 *
-	 * > This has the effect of reopening all the formatting elements that were opened
-	 * > in the current body, cell, or caption (whichever is youngest) that haven't
-	 * > been explicitly closed.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#reconstruct-the-active-formatting-elements
-	 *
-	 * @return bool Whether any formatting elements needed to be reconstructed.
-	 */
-	private function reconstruct_active_formatting_elements(): bool {
-		/*
-		 * > If there are no entries in the list of active formatting elements, then there is nothing
-		 * > to reconstruct; stop this algorithm.
-		 */
-		if ( 0 === $this->state->active_formatting_elements->count() ) {
-			return false;
-		}
-
-		$last_entry = $this->state->active_formatting_elements->current_node();
-		if (
-
-			/*
-			 * > If the last (most recently added) entry in the list of active formatting elements is a marker;
-			 * > stop this algorithm.
-			 */
-			'marker' === $last_entry->node_name ||
-
-			/*
-			 * > If the last (most recently added) entry in the list of active formatting elements is an
-			 * > element that is in the stack of open elements, then there is nothing to reconstruct;
-			 * > stop this algorithm.
-			 */
-			$this->state->stack_of_open_elements->contains_node( $last_entry )
-		) {
-			return false;
-		}
-
-		$this->bail( 'Cannot reconstruct active formatting elements when advancing and rewinding is required.' );
-	}
-
-	/**
-	 * Runs the reset the insertion mode appropriately algorithm.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#reset-the-insertion-mode-appropriately
-	 */
-	public function reset_insertion_mode(): void {
-		// Set the first node.
-		$first_node = null;
-		foreach ( $this->state->stack_of_open_elements->walk_down() as $first_node ) {
-			break;
-		}
-
-		/*
-		 * > 1. Let _last_ be false.
-		 */
-		$last = false;
-		foreach ( $this->state->stack_of_open_elements->walk_up() as $node ) {
-			/*
-			 * > 2. Let _node_ be the last node in the stack of open elements.
-			 * > 3. _Loop_: If _node_ is the first node in the stack of open elements, then set _last_
-			 * >            to true, and, if the parser was created as part of the HTML fragment parsing
-			 * >            algorithm (fragment case), set node to the context element passed to
-			 * >            that algorithm.
-			 * > …
-			 */
-			if ( $node === $first_node ) {
-				$last = true;
-				if ( isset( $this->context_node ) ) {
-					$node = $this->context_node;
-				}
-			}
-
-			switch ( $node->node_name ) {
-				/*
-				 * > 4. If node is a `select` element, run these substeps:
-				 * >   1. If _last_ is true, jump to the step below labeled done.
-				 * >   2. Let _ancestor_ be _node_.
-				 * >   3. _Loop_: If _ancestor_ is the first node in the stack of open elements,
-				 * >      jump to the step below labeled done.
-				 * >   4. Let ancestor be the node before ancestor in the stack of open elements.
-				 * >   …
-				 * >   7. Jump back to the step labeled _loop_.
-				 * >   8. _Done_: Switch the insertion mode to "in select" and return.
-				 */
-				case 'SELECT':
-					if ( ! $last ) {
-						foreach ( $this->state->stack_of_open_elements->walk_up( $node ) as $ancestor ) {
-							switch ( $ancestor->node_name ) {
-								/*
-								 * > 5. If _ancestor_ is a `template` node, jump to the step below
-								 * >    labeled _done_.
-								 */
-								case 'TEMPLATE':
-									break 2;
-
-								/*
-								 * > 6. If _ancestor_ is a `table` node, switch the insertion mode to
-								 * >    "in select in table" and return.
-								 */
-								case 'TABLE':
-									$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT_IN_TABLE;
-									return;
-							}
-						}
-					}
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_SELECT;
-					return;
-
-				/*
-				 * > 5. If _node_ is a `td` or `th` element and _last_ is false, then switch the
-				 * >    insertion mode to "in cell" and return.
-				 */
-				case 'TD':
-				case 'TH':
-					if ( ! $last ) {
-						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CELL;
-						return;
-					}
-					break;
-
-					/*
-					* > 6. If _node_ is a `tr` element, then switch the insertion mode to "in row"
-					* >    and return.
-					*/
-				case 'TR':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_ROW;
-					return;
-
-				/*
-				 * > 7. If _node_ is a `tbody`, `thead`, or `tfoot` element, then switch the
-				 * >    insertion mode to "in table body" and return.
-				 */
-				case 'TBODY':
-				case 'THEAD':
-				case 'TFOOT':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE_BODY;
-					return;
-
-				/*
-				 * > 8. If _node_ is a `caption` element, then switch the insertion mode to
-				 * >    "in caption" and return.
-				 */
-				case 'CAPTION':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_CAPTION;
-					return;
-
-				/*
-				 * > 9. If _node_ is a `colgroup` element, then switch the insertion mode to
-				 * >    "in column group" and return.
-				 */
-				case 'COLGROUP':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_COLUMN_GROUP;
-					return;
-
-				/*
-				 * > 10. If _node_ is a `table` element, then switch the insertion mode to
-				 * >     "in table" and return.
-				 */
-				case 'TABLE':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_TABLE;
-					return;
-
-				/*
-				 * > 11. If _node_ is a `template` element, then switch the insertion mode to the
-				 * >     current template insertion mode and return.
-				 */
-				case 'TEMPLATE':
-					$this->state->insertion_mode = end( $this->state->stack_of_template_insertion_modes );
-					return;
-
-				/*
-				 * > 12. If _node_ is a `head` element and _last_ is false, then switch the
-				 * >     insertion mode to "in head" and return.
-				 */
-				case 'HEAD':
-					if ( ! $last ) {
-						$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_HEAD;
-						return;
-					}
-					break;
-
-				/*
-				 * > 13. If _node_ is a `body` element, then switch the insertion mode to "in body"
-				 * >     and return.
-				 */
-				case 'BODY':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
-					return;
-
-				/*
-				 * > 14. If _node_ is a `frameset` element, then switch the insertion mode to
-				 * >     "in frameset" and return. (fragment case)
-				 */
-				case 'FRAMESET':
-					$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_FRAMESET;
-					return;
-
-				/*
-				 * > 15. If _node_ is an `html` element, run these substeps:
-				 * >     1. If the head element pointer is null, switch the insertion mode to
-				 * >        "before head" and return. (fragment case)
-				 * >     2. Otherwise, the head element pointer is not null, switch the insertion
-				 * >        mode to "after head" and return.
-				 */
-				case 'HTML':
-					$this->state->insertion_mode = isset( $this->state->head_element )
-						? Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_AFTER_HEAD
-						: Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_BEFORE_HEAD;
-					return;
-			}
-		}
-
-		/*
-		 * > 16. If _last_ is true, then switch the insertion mode to "in body"
-		 * >     and return. (fragment case)
-		 *
-		 * This is only reachable if `$last` is true, as per the fragment parsing case.
-		 */
-		$this->state->insertion_mode = Gutenberg_HTML_Processor_State_6_7::INSERTION_MODE_IN_BODY;
-	}
-
-	/**
-	 * Runs the adoption agency algorithm.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @throws WP_HTML_Unsupported_Exception When encountering unsupported HTML input.
-	 *
-	 * @see https://html.spec.whatwg.org/#adoption-agency-algorithm
-	 */
-	private function run_adoption_agency_algorithm(): void {
-		$budget       = 1000;
-		$subject      = $this->get_tag();
-		$current_node = $this->state->stack_of_open_elements->current_node();
-
-		if (
-			// > If the current node is an HTML element whose tag name is subject
-			$current_node && $subject === $current_node->node_name &&
-			// > the current node is not in the list of active formatting elements
-			! $this->state->active_formatting_elements->contains_node( $current_node )
-		) {
-			$this->state->stack_of_open_elements->pop();
-			return;
-		}
-
-		$outer_loop_counter = 0;
-		while ( $budget-- > 0 ) {
-			if ( $outer_loop_counter++ >= 8 ) {
-				return;
-			}
-
-			/*
-			 * > Let formatting element be the last element in the list of active formatting elements that:
-			 * >   - is between the end of the list and the last marker in the list,
-			 * >     if any, or the start of the list otherwise,
-			 * >   - and has the tag name subject.
-			 */
-			$formatting_element = null;
-			foreach ( $this->state->active_formatting_elements->walk_up() as $item ) {
-				if ( 'marker' === $item->node_name ) {
-					break;
-				}
-
-				if ( $subject === $item->node_name ) {
-					$formatting_element = $item;
-					break;
-				}
-			}
-
-			// > If there is no such element, then return and instead act as described in the "any other end tag" entry above.
-			if ( null === $formatting_element ) {
-				$this->bail( 'Cannot run adoption agency when "any other end tag" is required.' );
-			}
-
-			// > If formatting element is not in the stack of open elements, then this is a parse error; remove the element from the list, and return.
-			if ( ! $this->state->stack_of_open_elements->contains_node( $formatting_element ) ) {
-				$this->state->active_formatting_elements->remove_node( $formatting_element );
-				return;
-			}
-
-			// > If formatting element is in the stack of open elements, but the element is not in scope, then this is a parse error; return.
-			if ( ! $this->state->stack_of_open_elements->has_element_in_scope( $formatting_element->node_name ) ) {
-				return;
-			}
-
-			/*
-			 * > Let furthest block be the topmost node in the stack of open elements that is lower in the stack
-			 * > than formatting element, and is an element in the special category. There might not be one.
-			 */
-			$is_above_formatting_element = true;
-			$furthest_block              = null;
-			foreach ( $this->state->stack_of_open_elements->walk_down() as $item ) {
-				if ( $is_above_formatting_element && $formatting_element->bookmark_name !== $item->bookmark_name ) {
-					continue;
-				}
-
-				if ( $is_above_formatting_element ) {
-					$is_above_formatting_element = false;
-					continue;
-				}
-
-				if ( self::is_special( $item->node_name ) ) {
-					$furthest_block = $item;
-					break;
-				}
-			}
-
-			/*
-			 * > If there is no furthest block, then the UA must first pop all the nodes from the bottom of the
-			 * > stack of open elements, from the current node up to and including formatting element, then
-			 * > remove formatting element from the list of active formatting elements, and finally return.
-			 */
-			if ( null === $furthest_block ) {
-				foreach ( $this->state->stack_of_open_elements->walk_up() as $item ) {
-					$this->state->stack_of_open_elements->pop();
-
-					if ( $formatting_element->bookmark_name === $item->bookmark_name ) {
-						$this->state->active_formatting_elements->remove_node( $formatting_element );
-						return;
-					}
-				}
-			}
-
-			$this->bail( 'Cannot extract common ancestor in adoption agency algorithm.' );
-		}
-
-		$this->bail( 'Cannot run adoption agency when looping required.' );
-	}
-
-	/**
-	 * Inserts an HTML element on the stack of open elements.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#insert-a-foreign-element
-	 *
-	 * @param WP_HTML_Token $token Name of bookmark pointing to element in original input HTML.
-	 */
-	private function insert_html_element( Gutenberg_HTML_Token_6_7 $token ): void {
-		$this->state->stack_of_open_elements->push( $token );
-	}
-
-	/*
-	 * HTML Specification Helpers
-	 */
-
-	/**
-	 * Returns whether an element of a given name is in the HTML special category.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#special
-	 *
-	 * @param string $tag_name Name of element to check.
-	 * @return bool Whether the element of the given name is in the special category.
-	 */
-	public static function is_special( $tag_name ): bool {
-		$tag_name = strtoupper( $tag_name );
-
-		return (
-			'ADDRESS' === $tag_name ||
-			'APPLET' === $tag_name ||
-			'AREA' === $tag_name ||
-			'ARTICLE' === $tag_name ||
-			'ASIDE' === $tag_name ||
-			'BASE' === $tag_name ||
-			'BASEFONT' === $tag_name ||
-			'BGSOUND' === $tag_name ||
-			'BLOCKQUOTE' === $tag_name ||
-			'BODY' === $tag_name ||
-			'BR' === $tag_name ||
-			'BUTTON' === $tag_name ||
-			'CAPTION' === $tag_name ||
-			'CENTER' === $tag_name ||
-			'COL' === $tag_name ||
-			'COLGROUP' === $tag_name ||
-			'DD' === $tag_name ||
-			'DETAILS' === $tag_name ||
-			'DIR' === $tag_name ||
-			'DIV' === $tag_name ||
-			'DL' === $tag_name ||
-			'DT' === $tag_name ||
-			'EMBED' === $tag_name ||
-			'FIELDSET' === $tag_name ||
-			'FIGCAPTION' === $tag_name ||
-			'FIGURE' === $tag_name ||
-			'FOOTER' === $tag_name ||
-			'FORM' === $tag_name ||
-			'FRAME' === $tag_name ||
-			'FRAMESET' === $tag_name ||
-			'H1' === $tag_name ||
-			'H2' === $tag_name ||
-			'H3' === $tag_name ||
-			'H4' === $tag_name ||
-			'H5' === $tag_name ||
-			'H6' === $tag_name ||
-			'HEAD' === $tag_name ||
-			'HEADER' === $tag_name ||
-			'HGROUP' === $tag_name ||
-			'HR' === $tag_name ||
-			'HTML' === $tag_name ||
-			'IFRAME' === $tag_name ||
-			'IMG' === $tag_name ||
-			'INPUT' === $tag_name ||
-			'KEYGEN' === $tag_name ||
-			'LI' === $tag_name ||
-			'LINK' === $tag_name ||
-			'LISTING' === $tag_name ||
-			'MAIN' === $tag_name ||
-			'MARQUEE' === $tag_name ||
-			'MENU' === $tag_name ||
-			'META' === $tag_name ||
-			'NAV' === $tag_name ||
-			'NOEMBED' === $tag_name ||
-			'NOFRAMES' === $tag_name ||
-			'NOSCRIPT' === $tag_name ||
-			'OBJECT' === $tag_name ||
-			'OL' === $tag_name ||
-			'P' === $tag_name ||
-			'PARAM' === $tag_name ||
-			'PLAINTEXT' === $tag_name ||
-			'PRE' === $tag_name ||
-			'SCRIPT' === $tag_name ||
-			'SEARCH' === $tag_name ||
-			'SECTION' === $tag_name ||
-			'SELECT' === $tag_name ||
-			'SOURCE' === $tag_name ||
-			'STYLE' === $tag_name ||
-			'SUMMARY' === $tag_name ||
-			'TABLE' === $tag_name ||
-			'TBODY' === $tag_name ||
-			'TD' === $tag_name ||
-			'TEMPLATE' === $tag_name ||
-			'TEXTAREA' === $tag_name ||
-			'TFOOT' === $tag_name ||
-			'TH' === $tag_name ||
-			'THEAD' === $tag_name ||
-			'TITLE' === $tag_name ||
-			'TR' === $tag_name ||
-			'TRACK' === $tag_name ||
-			'UL' === $tag_name ||
-			'WBR' === $tag_name ||
-			'XMP' === $tag_name ||
-
-			// MathML.
-			'MI' === $tag_name ||
-			'MO' === $tag_name ||
-			'MN' === $tag_name ||
-			'MS' === $tag_name ||
-			'MTEXT' === $tag_name ||
-			'ANNOTATION-XML' === $tag_name ||
-
-			// SVG.
-			'FOREIGNOBJECT' === $tag_name ||
-			'DESC' === $tag_name ||
-			'TITLE' === $tag_name
-		);
-	}
-
-	/**
-	 * Returns whether a given element is an HTML Void Element
-	 *
-	 * > area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#void-elements
-	 *
-	 * @param string $tag_name Name of HTML tag to check.
-	 * @return bool Whether the given tag is an HTML Void Element.
-	 */
-	public static function is_void( $tag_name ): bool {
-		$tag_name = strtoupper( $tag_name );
-
-		return (
-			'AREA' === $tag_name ||
-			'BASE' === $tag_name ||
-			'BASEFONT' === $tag_name || // Obsolete but still treated as void.
-			'BGSOUND' === $tag_name || // Obsolete but still treated as void.
-			'BR' === $tag_name ||
-			'COL' === $tag_name ||
-			'EMBED' === $tag_name ||
-			'FRAME' === $tag_name ||
-			'HR' === $tag_name ||
-			'IMG' === $tag_name ||
-			'INPUT' === $tag_name ||
-			'KEYGEN' === $tag_name || // Obsolete but still treated as void.
-			'LINK' === $tag_name ||
-			'META' === $tag_name ||
-			'PARAM' === $tag_name || // Obsolete but still treated as void.
-			'SOURCE' === $tag_name ||
-			'TRACK' === $tag_name ||
-			'WBR' === $tag_name
-		);
-	}
-
-	/*
-	 * Constants that would pollute the top of the class if they were found there.
-	 */
-
-	/**
-	 * Indicates that the next HTML token should be parsed and processed.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string
-	 */
-	const PROCESS_NEXT_NODE = 'process-next-node';
-
-	/**
-	 * Indicates that the current HTML token should be reprocessed in the newly-selected insertion mode.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string
-	 */
-	const REPROCESS_CURRENT_NODE = 'reprocess-current-node';
-
-	/**
-	 * Indicates that the current HTML token should be processed without advancing the parser.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var string
-	 */
-	const PROCESS_CURRENT_NODE = 'process-current-node';
-
-	/**
-	 * Indicates that the parser encountered unsupported markup and has bailed.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string
-	 */
-	const ERROR_UNSUPPORTED = 'unsupported';
-
-	/**
-	 * Indicates that the parser encountered more HTML tokens than it
-	 * was able to process and has bailed.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string
-	 */
-	const ERROR_EXCEEDED_MAX_BOOKMARKS = 'exceeded-max-bookmarks';
-
-	/**
-	 * Unlock code that must be passed into the constructor to create this class.
-	 *
-	 * This class extends the WP_HTML_Tag_Processor, which has a public class
-	 * constructor. Therefore, it's not possible to have a private constructor here.
-	 *
-	 * This unlock code is used to ensure that anyone calling the constructor is
-	 * doing so with a full understanding that it's intended to be a private API.
-	 *
-	 * @access private
-	 */
-	const CONSTRUCTOR_UNLOCK_CODE = 'Use WP_HTML_Processor::create_fragment() instead of calling the class constructor directly.';
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php
deleted file mode 100644
index 5a3941c415dd79..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php
+++ /dev/null
@@ -1,417 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Processor_State class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used by the HTML processor during HTML parsing
- * for managing the internal parsing state.
- *
- * This class is designed for internal use by the HTML processor.
- *
- * @since 6.4.0
- *
- * @access private
- *
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Processor_State_6_7 {
-	/*
-	 * Insertion mode constants.
-	 *
-	 * These constants exist and are named to make it easier to
-	 * discover and recognize the supported insertion modes in
-	 * the parser.
-	 *
-	 * Out of all the possible insertion modes, only those
-	 * supported by the parser are listed here. As support
-	 * is added to the parser for more modes, add them here
-	 * following the same naming and value pattern.
-	 *
-	 * @see https://html.spec.whatwg.org/#the-insertion-mode
-	 */
-
-	/**
-	 * Initial insertion mode for full HTML parser.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#the-initial-insertion-mode
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_INITIAL = 'insertion-mode-initial';
-
-	/**
-	 * Before HTML insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#the-before-html-insertion-mode
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_BEFORE_HTML = 'insertion-mode-before-html';
-
-	/**
-	 * Before head insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-beforehead
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_BEFORE_HEAD = 'insertion-mode-before-head';
-
-	/**
-	 * In head insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inhead
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_HEAD = 'insertion-mode-in-head';
-
-	/**
-	 * In head noscript insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inheadnoscript
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_HEAD_NOSCRIPT = 'insertion-mode-in-head-noscript';
-
-	/**
-	 * After head insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-afterhead
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_AFTER_HEAD = 'insertion-mode-after-head';
-
-	/**
-	 * In body insertion mode for full HTML parser.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inbody
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_BODY = 'insertion-mode-in-body';
-
-	/**
-	 * In table insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intable
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_TABLE = 'insertion-mode-in-table';
-
-	/**
-	 * In table text insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intabletext
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_TABLE_TEXT = 'insertion-mode-in-table-text';
-
-	/**
-	 * In caption insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-incaption
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_CAPTION = 'insertion-mode-in-caption';
-
-	/**
-	 * In column group insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-incolumngroup
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_COLUMN_GROUP = 'insertion-mode-in-column-group';
-
-	/**
-	 * In table body insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intablebody
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_TABLE_BODY = 'insertion-mode-in-table-body';
-
-	/**
-	 * In row insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inrow
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_ROW = 'insertion-mode-in-row';
-
-	/**
-	 * In cell insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-incell
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_CELL = 'insertion-mode-in-cell';
-
-	/**
-	 * In select insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inselect
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_SELECT = 'insertion-mode-in-select';
-
-	/**
-	 * In select in table insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inselectintable
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_SELECT_IN_TABLE = 'insertion-mode-in-select-in-table';
-
-	/**
-	 * In template insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-intemplate
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_TEMPLATE = 'insertion-mode-in-template';
-
-	/**
-	 * After body insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-afterbody
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_AFTER_BODY = 'insertion-mode-after-body';
-
-	/**
-	 * In frameset insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inframeset
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_FRAMESET = 'insertion-mode-in-frameset';
-
-	/**
-	 * After frameset insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-afterframeset
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_AFTER_FRAMESET = 'insertion-mode-after-frameset';
-
-	/**
-	 * After after body insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#the-after-after-body-insertion-mode
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_AFTER_AFTER_BODY = 'insertion-mode-after-after-body';
-
-	/**
-	 * After after frameset insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#the-after-after-frameset-insertion-mode
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_AFTER_AFTER_FRAMESET = 'insertion-mode-after-after-frameset';
-
-	/**
-	 * In foreign content insertion mode for full HTML parser.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#parsing-main-inforeign
-	 * @see WP_HTML_Processor_State::$insertion_mode
-	 *
-	 * @var string
-	 */
-	const INSERTION_MODE_IN_FOREIGN_CONTENT = 'insertion-mode-in-foreign-content';
-
-	/**
-	 * The stack of template insertion modes.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/#the-insertion-mode:stack-of-template-insertion-modes
-	 *
-	 * @var array<string>
-	 */
-	public $stack_of_template_insertion_modes = array();
-
-	/**
-	 * Tracks open elements while scanning HTML.
-	 *
-	 * This property is initialized in the constructor and never null.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#stack-of-open-elements
-	 *
-	 * @var WP_HTML_Open_Elements
-	 */
-	public $stack_of_open_elements;
-
-	/**
-	 * Tracks open formatting elements, used to handle mis-nested formatting element tags.
-	 *
-	 * This property is initialized in the constructor and never null.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#list-of-active-formatting-elements
-	 *
-	 * @var WP_HTML_Active_Formatting_Elements
-	 */
-	public $active_formatting_elements;
-
-	/**
-	 * Refers to the currently-matched tag, if any.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var WP_HTML_Token|null
-	 */
-	public $current_token = null;
-
-	/**
-	 * Tree construction insertion mode.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#insertion-mode
-	 *
-	 * @var string
-	 */
-	public $insertion_mode = self::INSERTION_MODE_INITIAL;
-
-	/**
-	 * Context node initializing fragment parser, if created as a fragment parser.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#concept-frag-parse-context
-	 *
-	 * @var [string, array]|null
-	 */
-	public $context_node = null;
-
-	/**
-	 * HEAD element pointer.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#head-element-pointer
-	 *
-	 * @var WP_HTML_Token|null
-	 */
-	public $head_element = null;
-
-	/**
-	 * The frameset-ok flag indicates if a `FRAMESET` element is allowed in the current state.
-	 *
-	 * > The frameset-ok flag is set to "ok" when the parser is created. It is set to "not ok" after certain tokens are seen.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#frameset-ok-flag
-	 *
-	 * @var bool
-	 */
-	public $frameset_ok = true;
-
-	/**
-	 * Constructor - creates a new and empty state value.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see WP_HTML_Processor
-	 */
-	public function __construct() {
-		$this->stack_of_open_elements     = new Gutenberg_HTML_Open_Elements_6_7();
-		$this->active_formatting_elements = new Gutenberg_HTML_Active_Formatting_Elements_6_7();
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php
deleted file mode 100644
index 5a55d9f5568746..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php
+++ /dev/null
@@ -1,56 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Span class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.2.0
- */
-
-/**
- * Core class used by the HTML tag processor to represent a textual span
- * inside an HTML document.
- *
- * This is a two-tuple in disguise, used to avoid the memory overhead
- * involved in using an array for the same purpose.
- *
- * This class is for internal usage of the WP_HTML_Tag_Processor class.
- *
- * @access private
- * @since 6.2.0
- * @since 6.5.0 Replaced `end` with `length` to more closely align with `substr()`.
- *
- * @see WP_HTML_Tag_Processor
- */
-class Gutenberg_HTML_Span_6_7 {
-	/**
-	 * Byte offset into document where span begins.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int
-	 */
-	public $start;
-
-	/**
-	 * Byte length of this span.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var int
-	 */
-	public $length;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param int $start  Byte offset into document where replacement span begins.
-	 * @param int $length Byte length of span.
-	 */
-	public function __construct( int $start, int $length ) {
-		$this->start  = $start;
-		$this->length = $length;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php
deleted file mode 100644
index 30a8024b1c07c5..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Stack_Event class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.6.0
- */
-
-/**
- * Core class used by the HTML Processor as a record for stack operations.
- *
- * This class is for internal usage of the WP_HTML_Processor class.
- *
- * @access private
- * @since 6.6.0
- *
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Stack_Event_6_7 {
-	/**
-	 * Refers to popping an element off of the stack of open elements.
-	 *
-	 * @since 6.6.0
-	 */
-	const POP = 'pop';
-
-	/**
-	 * Refers to pushing an element onto the stack of open elements.
-	 *
-	 * @since 6.6.0
-	 */
-	const PUSH = 'push';
-
-	/**
-	 * References the token associated with the stack push event,
-	 * even if this is a pop event for that element.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var WP_HTML_Token
-	 */
-	public $token;
-
-	/**
-	 * Indicates which kind of stack operation this event represents.
-	 *
-	 * May be one of the class constants.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @see self::POP
-	 * @see self::PUSH
-	 *
-	 * @var string
-	 */
-	public $operation;
-
-	/**
-	 * Indicates if the stack element is a real or virtual node.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @var string
-	 */
-	public $provenance;
-
-	/**
-	 * Constructor function.
-	 *
-	 * @since 6.6.0
-	 *
-	 * @param WP_HTML_Token $token      Token associated with stack event, always an opening token.
-	 * @param string        $operation  One of self::PUSH or self::POP.
-	 * @param string        $provenance "virtual" or "real".
-	 */
-	public function __construct( Gutenberg_HTML_Token_6_7 $token, string $operation, string $provenance ) {
-		$this->token      = $token;
-		$this->operation  = $operation;
-		$this->provenance = $provenance;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php
deleted file mode 100644
index 0377706d5eaa63..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php
+++ /dev/null
@@ -1,3521 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Tag_Processor class
- *
- * Scans through an HTML document to find specific tags, then
- * transforms those tags by adding, removing, or updating the
- * values of the HTML attributes within that tag (opener).
- *
- * Does not fully parse HTML or _recurse_ into the HTML structure
- * Instead this scans linearly through a document and only parses
- * the HTML tag openers.
- *
- * ### Possible future direction for this module
- *
- *  - Prune the whitespace when removing classes/attributes: e.g. "a b c" -> "c" not " c".
- *    This would increase the size of the changes for some operations but leave more
- *    natural-looking output HTML.
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.2.0
- */
-
-/**
- * Core class used to modify attributes in an HTML document for tags matching a query.
- *
- * ## Usage
- *
- * Use of this class requires three steps:
- *
- *  1. Create a new class instance with your input HTML document.
- *  2. Find the tag(s) you are looking for.
- *  3. Request changes to the attributes in those tag(s).
- *
- * Example:
- *
- *     $tags = new WP_HTML_Tag_Processor( $html );
- *     if ( $tags->next_tag( 'option' ) ) {
- *         $tags->set_attribute( 'selected', true );
- *     }
- *
- * ### Finding tags
- *
- * The `next_tag()` function moves the internal cursor through
- * your input HTML document until it finds a tag meeting any of
- * the supplied restrictions in the optional query argument. If
- * no argument is provided then it will find the next HTML tag,
- * regardless of what kind it is.
- *
- * If you want to _find whatever the next tag is_:
- *
- *     $tags->next_tag();
- *
- * | Goal                                                      | Query                                                                           |
- * |-----------------------------------------------------------|---------------------------------------------------------------------------------|
- * | Find any tag.                                             | `$tags->next_tag();`                                                            |
- * | Find next image tag.                                      | `$tags->next_tag( array( 'tag_name' => 'img' ) );`                              |
- * | Find next image tag (without passing the array).          | `$tags->next_tag( 'img' );`                                                     |
- * | Find next tag containing the `fullwidth` CSS class.       | `$tags->next_tag( array( 'class_name' => 'fullwidth' ) );`                      |
- * | Find next image tag containing the `fullwidth` CSS class. | `$tags->next_tag( array( 'tag_name' => 'img', 'class_name' => 'fullwidth' ) );` |
- *
- * If a tag was found meeting your criteria then `next_tag()`
- * will return `true` and you can proceed to modify it. If it
- * returns `false`, however, it failed to find the tag and
- * moved the cursor to the end of the file.
- *
- * Once the cursor reaches the end of the file the processor
- * is done and if you want to reach an earlier tag you will
- * need to recreate the processor and start over, as it's
- * unable to back up or move in reverse.
- *
- * See the section on bookmarks for an exception to this
- * no-backing-up rule.
- *
- * #### Custom queries
- *
- * Sometimes it's necessary to further inspect an HTML tag than
- * the query syntax here permits. In these cases one may further
- * inspect the search results using the read-only functions
- * provided by the processor or external state or variables.
- *
- * Example:
- *
- *     // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
- *     $remaining_count = 5;
- *     while ( $remaining_count > 0 && $tags->next_tag() ) {
- *         if (
- *              ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
- *              'jazzy' === $tags->get_attribute( 'data-style' )
- *         ) {
- *             $tags->add_class( 'theme-style-everest-jazz' );
- *             $remaining_count--;
- *         }
- *     }
- *
- * `get_attribute()` will return `null` if the attribute wasn't present
- * on the tag when it was called. It may return `""` (the empty string)
- * in cases where the attribute was present but its value was empty.
- * For boolean attributes, those whose name is present but no value is
- * given, it will return `true` (the only way to set `false` for an
- * attribute is to remove it).
- *
- * #### When matching fails
- *
- * When `next_tag()` returns `false` it could mean different things:
- *
- *  - The requested tag wasn't found in the input document.
- *  - The input document ended in the middle of an HTML syntax element.
- *
- * When a document ends in the middle of a syntax element it will pause
- * the processor. This is to make it possible in the future to extend the
- * input document and proceed - an important requirement for chunked
- * streaming parsing of a document.
- *
- * Example:
- *
- *     $processor = new WP_HTML_Tag_Processor( 'This <div is="a" partial="token' );
- *     false === $processor->next_tag();
- *
- * If a special element (see next section) is encountered but no closing tag
- * is found it will count as an incomplete tag. The parser will pause as if
- * the opening tag were incomplete.
- *
- * Example:
- *
- *     $processor = new WP_HTML_Tag_Processor( '<style>// there could be more styling to come' );
- *     false === $processor->next_tag();
- *
- *     $processor = new WP_HTML_Tag_Processor( '<style>// this is everything</style><div>' );
- *     true === $processor->next_tag( 'DIV' );
- *
- * #### Special elements
- *
- * Some HTML elements are handled in a special way; their start and end tags
- * act like a void tag. These are special because their contents can't contain
- * HTML markup. Everything inside these elements is handled in a special way
- * and content that _appears_ like HTML tags inside of them isn't. There can
- * be no nesting in these elements.
- *
- * In the following list, "raw text" means that all of the content in the HTML
- * until the matching closing tag is treated verbatim without any replacements
- * and without any parsing.
- *
- *  - IFRAME allows no content but requires a closing tag.
- *  - NOEMBED (deprecated) content is raw text.
- *  - NOFRAMES (deprecated) content is raw text.
- *  - SCRIPT content is plaintext apart from legacy rules allowing `</script>` inside an HTML comment.
- *  - STYLE content is raw text.
- *  - TITLE content is plain text but character references are decoded.
- *  - TEXTAREA content is plain text but character references are decoded.
- *  - XMP (deprecated) content is raw text.
- *
- * ### Modifying HTML attributes for a found tag
- *
- * Once you've found the start of an opening tag you can modify
- * any number of the attributes on that tag. You can set a new
- * value for an attribute, remove the entire attribute, or do
- * nothing and move on to the next opening tag.
- *
- * Example:
- *
- *     if ( $tags->next_tag( array( 'class_name' => 'wp-group-block' ) ) ) {
- *         $tags->set_attribute( 'title', 'This groups the contained content.' );
- *         $tags->remove_attribute( 'data-test-id' );
- *     }
- *
- * If `set_attribute()` is called for an existing attribute it will
- * overwrite the existing value. Similarly, calling `remove_attribute()`
- * for a non-existing attribute has no effect on the document. Both
- * of these methods are safe to call without knowing if a given attribute
- * exists beforehand.
- *
- * ### Modifying CSS classes for a found tag
- *
- * The tag processor treats the `class` attribute as a special case.
- * Because it's a common operation to add or remove CSS classes, this
- * interface adds helper methods to make that easier.
- *
- * As with attribute values, adding or removing CSS classes is a safe
- * operation that doesn't require checking if the attribute or class
- * exists before making changes. If removing the only class then the
- * entire `class` attribute will be removed.
- *
- * Example:
- *
- *     // from `<span>Yippee!</span>`
- *     //   to `<span class="is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<span class="excited">Yippee!</span>`
- *     //   to `<span class="excited is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<span class="is-active heavy-accent">Yippee!</span>`
- *     //   to `<span class="is-active heavy-accent">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
- *
- *     // from `<input type="text" class="is-active rugby not-disabled" length="24">`
- *     //   to `<input type="text" class="is-active not-disabled" length="24">
- *     $tags->remove_class( 'rugby' );
- *
- *     // from `<input type="text" class="rugby" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
- *
- *     // from `<input type="text" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
- *
- * When class changes are enqueued but a direct change to `class` is made via
- * `set_attribute` then the changes to `set_attribute` (or `remove_attribute`)
- * will take precedence over those made through `add_class` and `remove_class`.
- *
- * ### Bookmarks
- *
- * While scanning through the input HTMl document it's possible to set
- * a named bookmark when a particular tag is found. Later on, after
- * continuing to scan other tags, it's possible to `seek` to one of
- * the set bookmarks and then proceed again from that point forward.
- *
- * Because bookmarks create processing overhead one should avoid
- * creating too many of them. As a rule, create only bookmarks
- * of known string literal names; avoid creating "mark_{$index}"
- * and so on. It's fine from a performance standpoint to create a
- * bookmark and update it frequently, such as within a loop.
- *
- *     $total_todos = 0;
- *     while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
- *         $p->set_bookmark( 'list-start' );
- *         while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
- *             if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
- *                 $p->set_bookmark( 'list-end' );
- *                 $p->seek( 'list-start' );
- *                 $p->set_attribute( 'data-contained-todos', (string) $total_todos );
- *                 $total_todos = 0;
- *                 $p->seek( 'list-end' );
- *                 break;
- *             }
- *
- *             if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
- *                 $total_todos++;
- *             }
- *         }
- *     }
- *
- * ## Tokens and finer-grained processing.
- *
- * It's possible to scan through every lexical token in the
- * HTML document using the `next_token()` function. This
- * alternative form takes no argument and provides no built-in
- * query syntax.
- *
- * Example:
- *
- *      $title = '(untitled)';
- *      $text  = '';
- *      while ( $processor->next_token() ) {
- *          switch ( $processor->get_token_name() ) {
- *              case '#text':
- *                  $text .= $processor->get_modifiable_text();
- *                  break;
- *
- *              case 'BR':
- *                  $text .= "\n";
- *                  break;
- *
- *              case 'TITLE':
- *                  $title = $processor->get_modifiable_text();
- *                  break;
- *          }
- *      }
- *      return trim( "# {$title}\n\n{$text}" );
- *
- * ### Tokens and _modifiable text_.
- *
- * #### Special "atomic" HTML elements.
- *
- * Not all HTML elements are able to contain other elements inside of them.
- * For instance, the contents inside a TITLE element are plaintext (except
- * that character references like &amp; will be decoded). This means that
- * if the string `<img>` appears inside a TITLE element, then it's not an
- * image tag, but rather it's text describing an image tag. Likewise, the
- * contents of a SCRIPT or STYLE element are handled entirely separately in
- * a browser than the contents of other elements because they represent a
- * different language than HTML.
- *
- * For these elements the Tag Processor treats the entire sequence as one,
- * from the opening tag, including its contents, through its closing tag.
- * This means that the it's not possible to match the closing tag for a
- * SCRIPT element unless it's unexpected; the Tag Processor already matched
- * it when it found the opening tag.
- *
- * The inner contents of these elements are that element's _modifiable text_.
- *
- * The special elements are:
- *  - `SCRIPT` whose contents are treated as raw plaintext but supports a legacy
- *    style of including JavaScript inside of HTML comments to avoid accidentally
- *    closing the SCRIPT from inside a JavaScript string. E.g. `console.log( '</script>' )`.
- *  - `TITLE` and `TEXTAREA` whose contents are treated as plaintext and then any
- *    character references are decoded. E.g. `1 &lt; 2 < 3` becomes `1 < 2 < 3`.
- *  - `IFRAME`, `NOSCRIPT`, `NOEMBED`, `NOFRAME`, `STYLE` whose contents are treated as
- *    raw plaintext and left as-is. E.g. `1 &lt; 2 < 3` remains `1 &lt; 2 < 3`.
- *
- * #### Other tokens with modifiable text.
- *
- * There are also non-elements which are void/self-closing in nature and contain
- * modifiable text that is part of that individual syntax token itself.
- *
- *  - `#text` nodes, whose entire token _is_ the modifiable text.
- *  - HTML comments and tokens that become comments due to some syntax error. The
- *    text for these tokens is the portion of the comment inside of the syntax.
- *    E.g. for `<!-- comment -->` the text is `" comment "` (note the spaces are included).
- *  - `CDATA` sections, whose text is the content inside of the section itself. E.g. for
- *    `<![CDATA[some content]]>` the text is `"some content"` (with restrictions [1]).
- *  - "Funky comments," which are a special case of invalid closing tags whose name is
- *    invalid. The text for these nodes is the text that a browser would transform into
- *    an HTML comment when parsing. E.g. for `</%post_author>` the text is `%post_author`.
- *  - `DOCTYPE` declarations like `<DOCTYPE html>` which have no closing tag.
- *  - XML Processing instruction nodes like `<?wp __( "Like" ); ?>` (with restrictions [2]).
- *  - The empty end tag `</>` which is ignored in the browser and DOM.
- *
- * [1]: There are no CDATA sections in HTML. When encountering `<![CDATA[`, everything
- *      until the next `>` becomes a bogus HTML comment, meaning there can be no CDATA
- *      section in an HTML document containing `>`. The Tag Processor will first find
- *      all valid and bogus HTML comments, and then if the comment _would_ have been a
- *      CDATA section _were they to exist_, it will indicate this as the type of comment.
- *
- * [2]: XML allows a broader range of characters in a processing instruction's target name
- *      and disallows "xml" as a name, since it's special. The Tag Processor only recognizes
- *      target names with an ASCII-representable subset of characters. It also exhibits the
- *      same constraint as with CDATA sections, in that `>` cannot exist within the token
- *      since Processing Instructions do no exist within HTML and their syntax transforms
- *      into a bogus comment in the DOM.
- *
- * ## Design and limitations
- *
- * The Tag Processor is designed to linearly scan HTML documents and tokenize
- * HTML tags and their attributes. It's designed to do this as efficiently as
- * possible without compromising parsing integrity. Therefore it will be
- * slower than some methods of modifying HTML, such as those incorporating
- * over-simplified PCRE patterns, but will not introduce the defects and
- * failures that those methods bring in, which lead to broken page renders
- * and often to security vulnerabilities. On the other hand, it will be faster
- * than full-blown HTML parsers such as DOMDocument and use considerably
- * less memory. It requires a negligible memory overhead, enough to consider
- * it a zero-overhead system.
- *
- * The performance characteristics are maintained by avoiding tree construction
- * and semantic cleanups which are specified in HTML5. Because of this, for
- * example, it's not possible for the Tag Processor to associate any given
- * opening tag with its corresponding closing tag, or to return the inner markup
- * inside an element. Systems may be built on top of the Tag Processor to do
- * this, but the Tag Processor is and should be constrained so it can remain an
- * efficient, low-level, and reliable HTML scanner.
- *
- * The Tag Processor's design incorporates a "garbage-in-garbage-out" philosophy.
- * HTML5 specifies that certain invalid content be transformed into different forms
- * for display, such as removing null bytes from an input document and replacing
- * invalid characters with the Unicode replacement character `U+FFFD` (visually "�").
- * Where errors or transformations exist within the HTML5 specification, the Tag Processor
- * leaves those invalid inputs untouched, passing them through to the final browser
- * to handle. While this implies that certain operations will be non-spec-compliant,
- * such as reading the value of an attribute with invalid content, it also preserves a
- * simplicity and efficiency for handling those error cases.
- *
- * Most operations within the Tag Processor are designed to minimize the difference
- * between an input and output document for any given change. For example, the
- * `add_class` and `remove_class` methods preserve whitespace and the class ordering
- * within the `class` attribute; and when encountering tags with duplicated attributes,
- * the Tag Processor will leave those invalid duplicate attributes where they are but
- * update the proper attribute which the browser will read for parsing its value. An
- * exception to this rule is that all attribute updates store their values as
- * double-quoted strings, meaning that attributes on input with single-quoted or
- * unquoted values will appear in the output with double-quotes.
- *
- * ### Scripting Flag
- *
- * The Tag Processor parses HTML with the "scripting flag" disabled. This means
- * that it doesn't run any scripts while parsing the page. In a browser with
- * JavaScript enabled, for example, the script can change the parse of the
- * document as it loads. On the server, however, evaluating JavaScript is not
- * only impractical, but also unwanted.
- *
- * Practically this means that the Tag Processor will descend into NOSCRIPT
- * elements and process its child tags. Were the scripting flag enabled, such
- * as in a typical browser, the contents of NOSCRIPT are skipped entirely.
- *
- * This allows the HTML API to process the content that will be presented in
- * a browser when scripting is disabled, but it offers a different view of a
- * page than most browser sessions will experience. E.g. the tags inside the
- * NOSCRIPT disappear.
- *
- * ### Text Encoding
- *
- * The Tag Processor assumes that the input HTML document is encoded with a
- * text encoding compatible with 7-bit ASCII's '<', '>', '&', ';', '/', '=',
- * "'", '"', 'a' - 'z', 'A' - 'Z', and the whitespace characters ' ', tab,
- * carriage-return, newline, and form-feed.
- *
- * In practice, this includes almost every single-byte encoding as well as
- * UTF-8. Notably, however, it does not include UTF-16. If providing input
- * that's incompatible, then convert the encoding beforehand.
- *
- * @since 6.2.0
- * @since 6.2.1 Fix: Support for various invalid comments; attribute updates are case-insensitive.
- * @since 6.3.2 Fix: Skip HTML-like content inside rawtext elements such as STYLE.
- * @since 6.5.0 Pauses processor when input ends in an incomplete syntax token.
- *              Introduces "special" elements which act like void elements, e.g. TITLE, STYLE.
- *              Allows scanning through all tokens and processing modifiable text, where applicable.
- */
-class Gutenberg_HTML_Tag_Processor_6_7 {
-	/**
-	 * The maximum number of bookmarks allowed to exist at
-	 * any given time.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 *
-	 * @see WP_HTML_Tag_Processor::set_bookmark()
-	 */
-	const MAX_BOOKMARKS = 10;
-
-	/**
-	 * Maximum number of times seek() can be called.
-	 * Prevents accidental infinite loops.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 *
-	 * @see WP_HTML_Tag_Processor::seek()
-	 */
-	const MAX_SEEK_OPS = 1000;
-
-	/**
-	 * The HTML document to parse.
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	protected $html;
-
-	/**
-	 * The last query passed to next_tag().
-	 *
-	 * @since 6.2.0
-	 * @var array|null
-	 */
-	private $last_query;
-
-	/**
-	 * The tag name this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var string|null
-	 */
-	private $sought_tag_name;
-
-	/**
-	 * The CSS class name this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var string|null
-	 */
-	private $sought_class_name;
-
-	/**
-	 * The match offset this processor currently scans for.
-	 *
-	 * @since 6.2.0
-	 * @var int|null
-	 */
-	private $sought_match_offset;
-
-	/**
-	 * Whether to visit tag closers, e.g. </div>, when walking an input document.
-	 *
-	 * @since 6.2.0
-	 * @var bool
-	 */
-	private $stop_on_tag_closers;
-
-	/**
-	 * Specifies mode of operation of the parser at any given time.
-	 *
-	 * | State           | Meaning                                                              |
-	 * | ----------------|----------------------------------------------------------------------|
-	 * | *Ready*         | The parser is ready to run.                                          |
-	 * | *Complete*      | There is nothing left to parse.                                      |
-	 * | *Incomplete*    | The HTML ended in the middle of a token; nothing more can be parsed. |
-	 * | *Matched tag*   | Found an HTML tag; it's possible to modify its attributes.           |
-	 * | *Text node*     | Found a #text node; this is plaintext and modifiable.                |
-	 * | *CDATA node*    | Found a CDATA section; this is modifiable.                           |
-	 * | *Comment*       | Found a comment or bogus comment; this is modifiable.                |
-	 * | *Presumptuous*  | Found an empty tag closer: `</>`.                                    |
-	 * | *Funky comment* | Found a tag closer with an invalid tag name; this is modifiable.     |
-	 *
-	 * @since 6.5.0
-	 *
-	 * @see WP_HTML_Tag_Processor::STATE_READY
-	 * @see WP_HTML_Tag_Processor::STATE_COMPLETE
-	 * @see WP_HTML_Tag_Processor::STATE_INCOMPLETE_INPUT
-	 * @see WP_HTML_Tag_Processor::STATE_MATCHED_TAG
-	 * @see WP_HTML_Tag_Processor::STATE_TEXT_NODE
-	 * @see WP_HTML_Tag_Processor::STATE_CDATA_NODE
-	 * @see WP_HTML_Tag_Processor::STATE_COMMENT
-	 * @see WP_HTML_Tag_Processor::STATE_DOCTYPE
-	 * @see WP_HTML_Tag_Processor::STATE_PRESUMPTUOUS_TAG
-	 * @see WP_HTML_Tag_Processor::STATE_FUNKY_COMMENT
-	 *
-	 * @var string
-	 */
-	protected $parser_state = self::STATE_READY;
-
-	/**
-	 * What kind of syntax token became an HTML comment.
-	 *
-	 * Since there are many ways in which HTML syntax can create an HTML comment,
-	 * this indicates which of those caused it. This allows the Tag Processor to
-	 * represent more from the original input document than would appear in the DOM.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var string|null
-	 */
-	protected $comment_type = null;
-
-	/**
-	 * How many bytes from the original HTML document have been read and parsed.
-	 *
-	 * This value points to the latest byte offset in the input document which
-	 * has been already parsed. It is the internal cursor for the Tag Processor
-	 * and updates while scanning through the HTML tokens.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	private $bytes_already_parsed = 0;
-
-	/**
-	 * Byte offset in input document where current token starts.
-	 *
-	 * Example:
-	 *
-	 *     <div id="test">...
-	 *     01234
-	 *     - token starts at 0
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var int|null
-	 */
-	private $token_starts_at;
-
-	/**
-	 * Byte length of current token.
-	 *
-	 * Example:
-	 *
-	 *     <div id="test">...
-	 *     012345678901234
-	 *     - token length is 14 - 0 = 14
-	 *
-	 *     a <!-- comment --> is a token.
-	 *     0123456789 123456789 123456789
-	 *     - token length is 17 - 2 = 15
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var int|null
-	 */
-	private $token_length;
-
-	/**
-	 * Byte offset in input document where current tag name starts.
-	 *
-	 * Example:
-	 *
-	 *     <div id="test">...
-	 *     01234
-	 *      - tag name starts at 1
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int|null
-	 */
-	private $tag_name_starts_at;
-
-	/**
-	 * Byte length of current tag name.
-	 *
-	 * Example:
-	 *
-	 *     <div id="test">...
-	 *     01234
-	 *      --- tag name length is 3
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int|null
-	 */
-	private $tag_name_length;
-
-	/**
-	 * Byte offset into input document where current modifiable text starts.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var int
-	 */
-	private $text_starts_at;
-
-	/**
-	 * Byte length of modifiable text.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var string
-	 */
-	private $text_length;
-
-	/**
-	 * Whether the current tag is an opening tag, e.g. <div>, or a closing tag, e.g. </div>.
-	 *
-	 * @var bool
-	 */
-	private $is_closing_tag;
-
-	/**
-	 * Lazily-built index of attributes found within an HTML tag, keyed by the attribute name.
-	 *
-	 * Example:
-	 *
-	 *     // Supposing the parser is working through this content
-	 *     // and stops after recognizing the `id` attribute.
-	 *     // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
-	 *     //                 ^ parsing will continue from this point.
-	 *     $this->attributes = array(
-	 *         'id' => new WP_HTML_Attribute_Token( 'id', 9, 6, 5, 11, false )
-	 *     );
-	 *
-	 *     // When picking up parsing again, or when asking to find the
-	 *     // `class` attribute we will continue and add to this array.
-	 *     $this->attributes = array(
-	 *         'id'    => new WP_HTML_Attribute_Token( 'id', 9, 6, 5, 11, false ),
-	 *         'class' => new WP_HTML_Attribute_Token( 'class', 23, 7, 17, 13, false )
-	 *     );
-	 *
-	 *     // Note that only the `class` attribute value is stored in the index.
-	 *     // That's because it is the only value used by this class at the moment.
-	 *
-	 * @since 6.2.0
-	 * @var WP_HTML_Attribute_Token[]
-	 */
-	private $attributes = array();
-
-	/**
-	 * Tracks spans of duplicate attributes on a given tag, used for removing
-	 * all copies of an attribute when calling `remove_attribute()`.
-	 *
-	 * @since 6.3.2
-	 *
-	 * @var (WP_HTML_Span[])[]|null
-	 */
-	private $duplicate_attributes = null;
-
-	/**
-	 * Which class names to add or remove from a tag.
-	 *
-	 * These are tracked separately from attribute updates because they are
-	 * semantically distinct, whereas this interface exists for the common
-	 * case of adding and removing class names while other attributes are
-	 * generally modified as with DOM `setAttribute` calls.
-	 *
-	 * When modifying an HTML document these will eventually be collapsed
-	 * into a single `set_attribute( 'class', $changes )` call.
-	 *
-	 * Example:
-	 *
-	 *     // Add the `wp-block-group` class, remove the `wp-group` class.
-	 *     $classname_updates = array(
-	 *         // Indexed by a comparable class name.
-	 *         'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
-	 *         'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
-	 *     );
-	 *
-	 * @since 6.2.0
-	 * @var bool[]
-	 */
-	private $classname_updates = array();
-
-	/**
-	 * Tracks a semantic location in the original HTML which
-	 * shifts with updates as they are applied to the document.
-	 *
-	 * @since 6.2.0
-	 * @var WP_HTML_Span[]
-	 */
-	protected $bookmarks = array();
-
-	const ADD_CLASS    = true;
-	const REMOVE_CLASS = false;
-	const SKIP_CLASS   = null;
-
-	/**
-	 * Lexical replacements to apply to input HTML document.
-	 *
-	 * "Lexical" in this class refers to the part of this class which
-	 * operates on pure text _as text_ and not as HTML. There's a line
-	 * between the public interface, with HTML-semantic methods like
-	 * `set_attribute` and `add_class`, and an internal state that tracks
-	 * text offsets in the input document.
-	 *
-	 * When higher-level HTML methods are called, those have to transform their
-	 * operations (such as setting an attribute's value) into text diffing
-	 * operations (such as replacing the sub-string from indices A to B with
-	 * some given new string). These text-diffing operations are the lexical
-	 * updates.
-	 *
-	 * As new higher-level methods are added they need to collapse their
-	 * operations into these lower-level lexical updates since that's the
-	 * Tag Processor's internal language of change. Any code which creates
-	 * these lexical updates must ensure that they do not cross HTML syntax
-	 * boundaries, however, so these should never be exposed outside of this
-	 * class or any classes which intentionally expand its functionality.
-	 *
-	 * These are enqueued while editing the document instead of being immediately
-	 * applied to avoid processing overhead, string allocations, and string
-	 * copies when applying many updates to a single document.
-	 *
-	 * Example:
-	 *
-	 *     // Replace an attribute stored with a new value, indices
-	 *     // sourced from the lazily-parsed HTML recognizer.
-	 *     $start  = $attributes['src']->start;
-	 *     $length = $attributes['src']->length;
-	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $length, $new_value );
-	 *
-	 *     // Correspondingly, something like this will appear in this array.
-	 *     $lexical_updates = array(
-	 *         WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
-	 *     );
-	 *
-	 * @since 6.2.0
-	 * @var WP_HTML_Text_Replacement[]
-	 */
-	protected $lexical_updates = array();
-
-	/**
-	 * Tracks and limits `seek()` calls to prevent accidental infinite loops.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 *
-	 * @see WP_HTML_Tag_Processor::seek()
-	 */
-	protected $seek_count = 0;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $html HTML to process.
-	 */
-	public function __construct( $html ) {
-		$this->html = $html;
-	}
-
-	/**
-	 * Finds the next tag matching the $query.
-	 *
-	 * @since 6.2.0
-	 * @since 6.5.0 No longer processes incomplete tokens at end of document; pauses the processor at start of token.
-	 *
-	 * @param array|string|null $query {
-	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
-	 *
-	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
-	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
-	 *                                     1 for "first" tag, 3 for "third," etc.
-	 *                                     Defaults to first tag.
-	 *     @type string|null $class_name   Tag must contain this whole class name to match.
-	 *     @type string|null $tag_closers  "visit" or "skip": whether to stop on tag closers, e.g. </div>.
-	 * }
-	 * @return bool Whether a tag was matched.
-	 */
-	public function next_tag( $query = null ): bool {
-		$this->parse_query( $query );
-		$already_found = 0;
-
-		do {
-			if ( false === $this->next_token() ) {
-				return false;
-			}
-
-			if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-				continue;
-			}
-
-			if ( $this->matches() ) {
-				++$already_found;
-			}
-		} while ( $already_found < $this->sought_match_offset );
-
-		return true;
-	}
-
-	/**
-	 * Finds the next token in the HTML document.
-	 *
-	 * An HTML document can be viewed as a stream of tokens,
-	 * where tokens are things like HTML tags, HTML comments,
-	 * text nodes, etc. This method finds the next token in
-	 * the HTML document and returns whether it found one.
-	 *
-	 * If it starts parsing a token and reaches the end of the
-	 * document then it will seek to the start of the last
-	 * token and pause, returning `false` to indicate that it
-	 * failed to find a complete token.
-	 *
-	 * Possible token types, based on the HTML specification:
-	 *
-	 *  - an HTML tag, whether opening, closing, or void.
-	 *  - a text node - the plaintext inside tags.
-	 *  - an HTML comment.
-	 *  - a DOCTYPE declaration.
-	 *  - a processing instruction, e.g. `<?xml version="1.0" ?>`.
-	 *
-	 * The Tag Processor currently only supports the tag token.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return bool Whether a token was parsed.
-	 */
-	public function next_token(): bool {
-		return $this->base_class_next_token();
-	}
-
-	/**
-	 * Internal method which finds the next token in the HTML document.
-	 *
-	 * This method is a protected internal function which implements the logic for
-	 * finding the next token in a document. It exists so that the parser can update
-	 * its state without affecting the location of the cursor in the document and
-	 * without triggering subclass methods for things like `next_token()`, e.g. when
-	 * applying patches before searching for the next token.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 *
-	 * @return bool Whether a token was parsed.
-	 */
-	private function base_class_next_token(): bool {
-		$was_at = $this->bytes_already_parsed;
-		$this->after_tag();
-
-		// Don't proceed if there's nothing more to scan.
-		if (
-			self::STATE_COMPLETE === $this->parser_state ||
-			self::STATE_INCOMPLETE_INPUT === $this->parser_state
-		) {
-			return false;
-		}
-
-		/*
-		 * The next step in the parsing loop determines the parsing state;
-		 * clear it so that state doesn't linger from the previous step.
-		 */
-		$this->parser_state = self::STATE_READY;
-
-		if ( $this->bytes_already_parsed >= strlen( $this->html ) ) {
-			$this->parser_state = self::STATE_COMPLETE;
-			return false;
-		}
-
-		// Find the next tag if it exists.
-		if ( false === $this->parse_next_tag() ) {
-			if ( self::STATE_INCOMPLETE_INPUT === $this->parser_state ) {
-				$this->bytes_already_parsed = $was_at;
-			}
-
-			return false;
-		}
-
-		/*
-		 * For legacy reasons the rest of this function handles tags and their
-		 * attributes. If the processor has reached the end of the document
-		 * or if it matched any other token then it should return here to avoid
-		 * attempting to process tag-specific syntax.
-		 */
-		if (
-			self::STATE_INCOMPLETE_INPUT !== $this->parser_state &&
-			self::STATE_COMPLETE !== $this->parser_state &&
-			self::STATE_MATCHED_TAG !== $this->parser_state
-		) {
-			return true;
-		}
-
-		// Parse all of its attributes.
-		while ( $this->parse_next_attribute() ) {
-			continue;
-		}
-
-		// Ensure that the tag closes before the end of the document.
-		if (
-			self::STATE_INCOMPLETE_INPUT === $this->parser_state ||
-			$this->bytes_already_parsed >= strlen( $this->html )
-		) {
-			// Does this appropriately clear state (parsed attributes)?
-			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
-			$this->bytes_already_parsed = $was_at;
-
-			return false;
-		}
-
-		$tag_ends_at = strpos( $this->html, '>', $this->bytes_already_parsed );
-		if ( false === $tag_ends_at ) {
-			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
-			$this->bytes_already_parsed = $was_at;
-
-			return false;
-		}
-		$this->parser_state         = self::STATE_MATCHED_TAG;
-		$this->bytes_already_parsed = $tag_ends_at + 1;
-		$this->token_length         = $this->bytes_already_parsed - $this->token_starts_at;
-
-		/*
-		 * For non-DATA sections which might contain text that looks like HTML tags but
-		 * isn't, scan with the appropriate alternative mode. Looking at the first letter
-		 * of the tag name as a pre-check avoids a string allocation when it's not needed.
-		 */
-		$t = $this->html[ $this->tag_name_starts_at ];
-		if (
-			$this->is_closing_tag ||
-			! (
-				'i' === $t || 'I' === $t ||
-				'n' === $t || 'N' === $t ||
-				's' === $t || 'S' === $t ||
-				't' === $t || 'T' === $t ||
-				'x' === $t || 'X' === $t
-			)
-		) {
-			return true;
-		}
-
-		$tag_name = $this->get_tag();
-
-		/*
-		 * Preserve the opening tag pointers, as these will be overwritten
-		 * when finding the closing tag. They will be reset after finding
-		 * the closing to tag to point to the opening of the special atomic
-		 * tag sequence.
-		 */
-		$tag_name_starts_at   = $this->tag_name_starts_at;
-		$tag_name_length      = $this->tag_name_length;
-		$tag_ends_at          = $this->token_starts_at + $this->token_length;
-		$attributes           = $this->attributes;
-		$duplicate_attributes = $this->duplicate_attributes;
-
-		// Find the closing tag if necessary.
-		$found_closer = false;
-		switch ( $tag_name ) {
-			case 'SCRIPT':
-				$found_closer = $this->skip_script_data();
-				break;
-
-			case 'TEXTAREA':
-			case 'TITLE':
-				$found_closer = $this->skip_rcdata( $tag_name );
-				break;
-
-			/*
-			 * In the browser this list would include the NOSCRIPT element,
-			 * but the Tag Processor is an environment with the scripting
-			 * flag disabled, meaning that it needs to descend into the
-			 * NOSCRIPT element to be able to properly process what will be
-			 * sent to a browser.
-			 *
-			 * Note that this rule makes HTML5 syntax incompatible with XML,
-			 * because the parsing of this token depends on client application.
-			 * The NOSCRIPT element cannot be represented in the XHTML syntax.
-			 */
-			case 'IFRAME':
-			case 'NOEMBED':
-			case 'NOFRAMES':
-			case 'STYLE':
-			case 'XMP':
-				$found_closer = $this->skip_rawtext( $tag_name );
-				break;
-
-			// No other tags should be treated in their entirety here.
-			default:
-				return true;
-		}
-
-		if ( ! $found_closer ) {
-			$this->parser_state         = self::STATE_INCOMPLETE_INPUT;
-			$this->bytes_already_parsed = $was_at;
-			return false;
-		}
-
-		/*
-		 * The values here look like they reference the opening tag but they reference
-		 * the closing tag instead. This is why the opening tag values were stored
-		 * above in a variable. It reads confusingly here, but that's because the
-		 * functions that skip the contents have moved all the internal cursors past
-		 * the inner content of the tag.
-		 */
-		$this->token_starts_at      = $was_at;
-		$this->token_length         = $this->bytes_already_parsed - $this->token_starts_at;
-		$this->text_starts_at       = $tag_ends_at;
-		$this->text_length          = $this->tag_name_starts_at - $this->text_starts_at;
-		$this->tag_name_starts_at   = $tag_name_starts_at;
-		$this->tag_name_length      = $tag_name_length;
-		$this->attributes           = $attributes;
-		$this->duplicate_attributes = $duplicate_attributes;
-
-		return true;
-	}
-
-	/**
-	 * Whether the processor paused because the input HTML document ended
-	 * in the middle of a syntax element, such as in the middle of a tag.
-	 *
-	 * Example:
-	 *
-	 *     $processor = new WP_HTML_Tag_Processor( '<input type="text" value="Th' );
-	 *     false      === $processor->get_next_tag();
-	 *     true       === $processor->paused_at_incomplete_token();
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return bool Whether the parse paused at the start of an incomplete token.
-	 */
-	public function paused_at_incomplete_token(): bool {
-		return self::STATE_INCOMPLETE_INPUT === $this->parser_state;
-	}
-
-	/**
-	 * Generator for a foreach loop to step through each class name for the matched tag.
-	 *
-	 * This generator function is designed to be used inside a "foreach" loop.
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( "<div class='free &lt;egg&lt;\tlang-en'>" );
-	 *     $p->next_tag();
-	 *     foreach ( $p->class_list() as $class_name ) {
-	 *         echo "{$class_name} ";
-	 *     }
-	 *     // Outputs: "free <egg> lang-en "
-	 *
-	 * @since 6.4.0
-	 */
-	public function class_list() {
-		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-			return;
-		}
-
-		/** @var string $class contains the string value of the class attribute, with character references decoded. */
-		$class = $this->get_attribute( 'class' );
-
-		if ( ! is_string( $class ) ) {
-			return;
-		}
-
-		$seen = array();
-
-		$at = 0;
-		while ( $at < strlen( $class ) ) {
-			// Skip past any initial boundary characters.
-			$at += strspn( $class, " \t\f\r\n", $at );
-			if ( $at >= strlen( $class ) ) {
-				return;
-			}
-
-			// Find the byte length until the next boundary.
-			$length = strcspn( $class, " \t\f\r\n", $at );
-			if ( 0 === $length ) {
-				return;
-			}
-
-			/*
-			 * CSS class names are case-insensitive in the ASCII range.
-			 *
-			 * @see https://www.w3.org/TR/CSS2/syndata.html#x1
-			 */
-			$name = strtolower( substr( $class, $at, $length ) );
-			$at  += $length;
-
-			/*
-			 * It's expected that the number of class names for a given tag is relatively small.
-			 * Given this, it is probably faster overall to scan an array for a value rather
-			 * than to use the class name as a key and check if it's a key of $seen.
-			 */
-			if ( in_array( $name, $seen, true ) ) {
-				continue;
-			}
-
-			$seen[] = $name;
-			yield $name;
-		}
-	}
-
-
-	/**
-	 * Returns if a matched tag contains the given ASCII case-insensitive class name.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string $wanted_class Look for this CSS class name, ASCII case-insensitive.
-	 * @return bool|null Whether the matched tag contains the given class name, or null if not matched.
-	 */
-	public function has_class( $wanted_class ): ?bool {
-		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-			return null;
-		}
-
-		$wanted_class = strtolower( $wanted_class );
-
-		foreach ( $this->class_list() as $class_name ) {
-			if ( $class_name === $wanted_class ) {
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-
-	/**
-	 * Sets a bookmark in the HTML document.
-	 *
-	 * Bookmarks represent specific places or tokens in the HTML
-	 * document, such as a tag opener or closer. When applying
-	 * edits to a document, such as setting an attribute, the
-	 * text offsets of that token may shift; the bookmark is
-	 * kept updated with those shifts and remains stable unless
-	 * the entire span of text in which the token sits is removed.
-	 *
-	 * Release bookmarks when they are no longer needed.
-	 *
-	 * Example:
-	 *
-	 *     <main><h2>Surprising fact you may not know!</h2></main>
-	 *           ^  ^
-	 *            \-|-- this `H2` opener bookmark tracks the token
-	 *
-	 *     <main class="clickbait"><h2>Surprising fact you may no…
-	 *                             ^  ^
-	 *                              \-|-- it shifts with edits
-	 *
-	 * Bookmarks provide the ability to seek to a previously-scanned
-	 * place in the HTML document. This avoids the need to re-scan
-	 * the entire document.
-	 *
-	 * Example:
-	 *
-	 *     <ul><li>One</li><li>Two</li><li>Three</li></ul>
-	 *                                 ^^^^
-	 *                                 want to note this last item
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( $html );
-	 *     $in_list = false;
-	 *     while ( $p->next_tag( array( 'tag_closers' => $in_list ? 'visit' : 'skip' ) ) ) {
-	 *         if ( 'UL' === $p->get_tag() ) {
-	 *             if ( $p->is_tag_closer() ) {
-	 *                 $in_list = false;
-	 *                 $p->set_bookmark( 'resume' );
-	 *                 if ( $p->seek( 'last-li' ) ) {
-	 *                     $p->add_class( 'last-li' );
-	 *                 }
-	 *                 $p->seek( 'resume' );
-	 *                 $p->release_bookmark( 'last-li' );
-	 *                 $p->release_bookmark( 'resume' );
-	 *             } else {
-	 *                 $in_list = true;
-	 *             }
-	 *         }
-	 *
-	 *         if ( 'LI' === $p->get_tag() ) {
-	 *             $p->set_bookmark( 'last-li' );
-	 *         }
-	 *     }
-	 *
-	 * Bookmarks intentionally hide the internal string offsets
-	 * to which they refer. They are maintained internally as
-	 * updates are applied to the HTML document and therefore
-	 * retain their "position" - the location to which they
-	 * originally pointed. The inability to use bookmarks with
-	 * functions like `substr` is therefore intentional to guard
-	 * against accidentally breaking the HTML.
-	 *
-	 * Because bookmarks allocate memory and require processing
-	 * for every applied update, they are limited and require
-	 * a name. They should not be created with programmatically-made
-	 * names, such as "li_{$index}" with some loop. As a general
-	 * rule they should only be created with string-literal names
-	 * like "start-of-section" or "last-paragraph".
-	 *
-	 * Bookmarks are a powerful tool to enable complicated behavior.
-	 * Consider double-checking that you need this tool if you are
-	 * reaching for it, as inappropriate use could lead to broken
-	 * HTML structure or unwanted processing overhead.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name Identifies this particular bookmark.
-	 * @return bool Whether the bookmark was successfully created.
-	 */
-	public function set_bookmark( $name ): bool {
-		// It only makes sense to set a bookmark if the parser has paused on a concrete token.
-		if (
-			self::STATE_COMPLETE === $this->parser_state ||
-			self::STATE_INCOMPLETE_INPUT === $this->parser_state
-		) {
-			return false;
-		}
-
-		if ( ! array_key_exists( $name, $this->bookmarks ) && count( $this->bookmarks ) >= static::MAX_BOOKMARKS ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Too many bookmarks: cannot create any more.' ),
-				'6.2.0'
-			);
-			return false;
-		}
-
-		$this->bookmarks[ $name ] = new Gutenberg_HTML_Span_6_7( $this->token_starts_at, $this->token_length );
-
-		return true;
-	}
-
-
-	/**
-	 * Removes a bookmark that is no longer needed.
-	 *
-	 * Releasing a bookmark frees up the small
-	 * performance overhead it requires.
-	 *
-	 * @param string $name Name of the bookmark to remove.
-	 * @return bool Whether the bookmark already existed before removal.
-	 */
-	public function release_bookmark( $name ): bool {
-		if ( ! array_key_exists( $name, $this->bookmarks ) ) {
-			return false;
-		}
-
-		unset( $this->bookmarks[ $name ] );
-
-		return true;
-	}
-
-	/**
-	 * Skips contents of generic rawtext elements.
-	 *
-	 * @since 6.3.2
-	 *
-	 * @see https://html.spec.whatwg.org/#generic-raw-text-element-parsing-algorithm
-	 *
-	 * @param string $tag_name The uppercase tag name which will close the RAWTEXT region.
-	 * @return bool Whether an end to the RAWTEXT region was found before the end of the document.
-	 */
-	private function skip_rawtext( string $tag_name ): bool {
-		/*
-		 * These two functions distinguish themselves on whether character references are
-		 * decoded, and since functionality to read the inner markup isn't supported, it's
-		 * not necessary to implement these two functions separately.
-		 */
-		return $this->skip_rcdata( $tag_name );
-	}
-
-	/**
-	 * Skips contents of RCDATA elements, namely title and textarea tags.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
-	 *
-	 * @param string $tag_name The uppercase tag name which will close the RCDATA region.
-	 * @return bool Whether an end to the RCDATA region was found before the end of the document.
-	 */
-	private function skip_rcdata( string $tag_name ): bool {
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$tag_length = strlen( $tag_name );
-
-		$at = $this->bytes_already_parsed;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at                       = strpos( $this->html, '</', $at );
-			$this->tag_name_starts_at = $at;
-
-			// Fail if there is no possible tag closer.
-			if ( false === $at || ( $at + $tag_length ) >= $doc_length ) {
-				return false;
-			}
-
-			$at += 2;
-
-			/*
-			 * Find a case-insensitive match to the tag name.
-			 *
-			 * Because tag names are limited to US-ASCII there is no
-			 * need to perform any kind of Unicode normalization when
-			 * comparing; any character which could be impacted by such
-			 * normalization could not be part of a tag name.
-			 */
-			for ( $i = 0; $i < $tag_length; $i++ ) {
-				$tag_char  = $tag_name[ $i ];
-				$html_char = $html[ $at + $i ];
-
-				if ( $html_char !== $tag_char && strtoupper( $html_char ) !== $tag_char ) {
-					$at += $i;
-					continue 2;
-				}
-			}
-
-			$at                        += $tag_length;
-			$this->bytes_already_parsed = $at;
-
-			if ( $at >= strlen( $html ) ) {
-				return false;
-			}
-
-			/*
-			 * Ensure that the tag name terminates to avoid matching on
-			 * substrings of a longer tag name. For example, the sequence
-			 * "</textarearug" should not match for "</textarea" even
-			 * though "textarea" is found within the text.
-			 */
-			$c = $html[ $at ];
-			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
-				continue;
-			}
-
-			while ( $this->parse_next_attribute() ) {
-				continue;
-			}
-
-			$at = $this->bytes_already_parsed;
-			if ( $at >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			if ( '>' === $html[ $at ] ) {
-				$this->bytes_already_parsed = $at + 1;
-				return true;
-			}
-
-			if ( $at + 1 >= strlen( $this->html ) ) {
-				return false;
-			}
-
-			if ( '/' === $html[ $at ] && '>' === $html[ $at + 1 ] ) {
-				$this->bytes_already_parsed = $at + 2;
-				return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Skips contents of script tags.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return bool Whether the script tag was closed before the end of the document.
-	 */
-	private function skip_script_data(): bool {
-		$state      = 'unescaped';
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$at         = $this->bytes_already_parsed;
-
-		while ( false !== $at && $at < $doc_length ) {
-			$at += strcspn( $html, '-<', $at );
-
-			/*
-			 * For all script states a "-->"  transitions
-			 * back into the normal unescaped script mode,
-			 * even if that's the current state.
-			 */
-			if (
-				$at + 2 < $doc_length &&
-				'-' === $html[ $at ] &&
-				'-' === $html[ $at + 1 ] &&
-				'>' === $html[ $at + 2 ]
-			) {
-				$at   += 3;
-				$state = 'unescaped';
-				continue;
-			}
-
-			// Everything of interest past here starts with "<".
-			if ( $at + 1 >= $doc_length || '<' !== $html[ $at++ ] ) {
-				continue;
-			}
-
-			/*
-			 * Unlike with "-->", the "<!--" only transitions
-			 * into the escaped mode if not already there.
-			 *
-			 * Inside the escaped modes it will be ignored; and
-			 * should never break out of the double-escaped
-			 * mode and back into the escaped mode.
-			 *
-			 * While this requires a mode change, it does not
-			 * impact the parsing otherwise, so continue
-			 * parsing after updating the state.
-			 */
-			if (
-				$at + 2 < $doc_length &&
-				'!' === $html[ $at ] &&
-				'-' === $html[ $at + 1 ] &&
-				'-' === $html[ $at + 2 ]
-			) {
-				$at   += 3;
-				$state = 'unescaped' === $state ? 'escaped' : $state;
-				continue;
-			}
-
-			if ( '/' === $html[ $at ] ) {
-				$closer_potentially_starts_at = $at - 1;
-				$is_closing                   = true;
-				++$at;
-			} else {
-				$is_closing = false;
-			}
-
-			/*
-			 * At this point the only remaining state-changes occur with the
-			 * <script> and </script> tags; unless one of these appears next,
-			 * proceed scanning to the next potential token in the text.
-			 */
-			if ( ! (
-				$at + 6 < $doc_length &&
-				( 's' === $html[ $at ] || 'S' === $html[ $at ] ) &&
-				( 'c' === $html[ $at + 1 ] || 'C' === $html[ $at + 1 ] ) &&
-				( 'r' === $html[ $at + 2 ] || 'R' === $html[ $at + 2 ] ) &&
-				( 'i' === $html[ $at + 3 ] || 'I' === $html[ $at + 3 ] ) &&
-				( 'p' === $html[ $at + 4 ] || 'P' === $html[ $at + 4 ] ) &&
-				( 't' === $html[ $at + 5 ] || 'T' === $html[ $at + 5 ] )
-			) ) {
-				++$at;
-				continue;
-			}
-
-			/*
-			 * Ensure that the script tag terminates to avoid matching on
-			 * substrings of a non-match. For example, the sequence
-			 * "<script123" should not end a script region even though
-			 * "<script" is found within the text.
-			 */
-			if ( $at + 6 >= $doc_length ) {
-				continue;
-			}
-			$at += 6;
-			$c   = $html[ $at ];
-			if ( ' ' !== $c && "\t" !== $c && "\r" !== $c && "\n" !== $c && '/' !== $c && '>' !== $c ) {
-				++$at;
-				continue;
-			}
-
-			if ( 'escaped' === $state && ! $is_closing ) {
-				$state = 'double-escaped';
-				continue;
-			}
-
-			if ( 'double-escaped' === $state && $is_closing ) {
-				$state = 'escaped';
-				continue;
-			}
-
-			if ( $is_closing ) {
-				$this->bytes_already_parsed = $closer_potentially_starts_at;
-				$this->tag_name_starts_at   = $closer_potentially_starts_at;
-				if ( $this->bytes_already_parsed >= $doc_length ) {
-					return false;
-				}
-
-				while ( $this->parse_next_attribute() ) {
-					continue;
-				}
-
-				if ( $this->bytes_already_parsed >= $doc_length ) {
-					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-					return false;
-				}
-
-				if ( '>' === $html[ $this->bytes_already_parsed ] ) {
-					++$this->bytes_already_parsed;
-					return true;
-				}
-			}
-
-			++$at;
-		}
-
-		return false;
-	}
-
-	/**
-	 * Parses the next tag.
-	 *
-	 * This will find and start parsing the next tag, including
-	 * the opening `<`, the potential closer `/`, and the tag
-	 * name. It does not parse the attributes or scan to the
-	 * closing `>`; these are left for other methods.
-	 *
-	 * @since 6.2.0
-	 * @since 6.2.1 Support abruptly-closed comments, invalid-tag-closer-comments, and empty elements.
-	 *
-	 * @return bool Whether a tag was found before the end of the document.
-	 */
-	private function parse_next_tag(): bool {
-		$this->after_tag();
-
-		$html       = $this->html;
-		$doc_length = strlen( $html );
-		$was_at     = $this->bytes_already_parsed;
-		$at         = $was_at;
-
-		while ( $at < $doc_length ) {
-			$at = strpos( $html, '<', $at );
-			if ( false === $at ) {
-				break;
-			}
-
-			if ( $at > $was_at ) {
-				/*
-				 * A "<" normally starts a new HTML tag or syntax token, but in cases where the
-				 * following character can't produce a valid token, the "<" is instead treated
-				 * as plaintext and the parser should skip over it. This avoids a problem when
-				 * following earlier practices of typing emoji with text, e.g. "<3". This
-				 * should be a heart, not a tag. It's supposed to be rendered, not hidden.
-				 *
-				 * At this point the parser checks if this is one of those cases and if it is
-				 * will continue searching for the next "<" in search of a token boundary.
-				 *
-				 * @see https://html.spec.whatwg.org/#tag-open-state
-				 */
-				if ( 1 !== strspn( $html, '!/?abcdefghijklmnopqrstuvwxyzABCEFGHIJKLMNOPQRSTUVWXYZ', $at + 1, 1 ) ) {
-					++$at;
-					continue;
-				}
-
-				$this->parser_state         = self::STATE_TEXT_NODE;
-				$this->token_starts_at      = $was_at;
-				$this->token_length         = $at - $was_at;
-				$this->text_starts_at       = $was_at;
-				$this->text_length          = $this->token_length;
-				$this->bytes_already_parsed = $at;
-				return true;
-			}
-
-			$this->token_starts_at = $at;
-
-			if ( $at + 1 < $doc_length && '/' === $this->html[ $at + 1 ] ) {
-				$this->is_closing_tag = true;
-				++$at;
-			} else {
-				$this->is_closing_tag = false;
-			}
-
-			/*
-			 * HTML tag names must start with [a-zA-Z] otherwise they are not tags.
-			 * For example, "<3" is rendered as text, not a tag opener. If at least
-			 * one letter follows the "<" then _it is_ a tag, but if the following
-			 * character is anything else it _is not a tag_.
-			 *
-			 * It's not uncommon to find non-tags starting with `<` in an HTML
-			 * document, so it's good for performance to make this pre-check before
-			 * continuing to attempt to parse a tag name.
-			 *
-			 * Reference:
-			 * * https://html.spec.whatwg.org/multipage/parsing.html#data-state
-			 * * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-			 */
-			$tag_name_prefix_length = strspn( $html, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', $at + 1 );
-			if ( $tag_name_prefix_length > 0 ) {
-				++$at;
-				$this->parser_state         = self::STATE_MATCHED_TAG;
-				$this->tag_name_starts_at   = $at;
-				$this->tag_name_length      = $tag_name_prefix_length + strcspn( $html, " \t\f\r\n/>", $at + $tag_name_prefix_length );
-				$this->bytes_already_parsed = $at + $this->tag_name_length;
-				return true;
-			}
-
-			/*
-			 * Abort if no tag is found before the end of
-			 * the document. There is nothing left to parse.
-			 */
-			if ( $at + 1 >= $doc_length ) {
-				$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-				return false;
-			}
-
-			/*
-			 * `<!` transitions to markup declaration open state
-			 * https://html.spec.whatwg.org/multipage/parsing.html#markup-declaration-open-state
-			 */
-			if ( ! $this->is_closing_tag && '!' === $html[ $at + 1 ] ) {
-				/*
-				 * `<!--` transitions to a comment state – apply further comment rules.
-				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				 */
-				if ( 0 === substr_compare( $html, '--', $at + 2, 2 ) ) {
-					$closer_at = $at + 4;
-					// If it's not possible to close the comment then there is nothing more to scan.
-					if ( $doc_length <= $closer_at ) {
-						$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-						return false;
-					}
-
-					// Abruptly-closed empty comments are a sequence of dashes followed by `>`.
-					$span_of_dashes = strspn( $html, '-', $closer_at );
-					if ( '>' === $html[ $closer_at + $span_of_dashes ] ) {
-						/*
-						 * @todo When implementing `set_modifiable_text()` ensure that updates to this token
-						 *       don't break the syntax for short comments, e.g. `<!--->`. Unlike other comment
-						 *       and bogus comment syntax, these leave no clear insertion point for text and
-						 *       they need to be modified specially in order to contain text. E.g. to store
-						 *       `?` as the modifiable text, the `<!--->` needs to become `<!--?-->`, which
-						 *       involves inserting an additional `-` into the token after the modifiable text.
-						 */
-						$this->parser_state = self::STATE_COMMENT;
-						$this->comment_type = self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT;
-						$this->token_length = $closer_at + $span_of_dashes + 1 - $this->token_starts_at;
-
-						// Only provide modifiable text if the token is long enough to contain it.
-						if ( $span_of_dashes >= 2 ) {
-							$this->comment_type   = self::COMMENT_AS_HTML_COMMENT;
-							$this->text_starts_at = $this->token_starts_at + 4;
-							$this->text_length    = $span_of_dashes - 2;
-						}
-
-						$this->bytes_already_parsed = $closer_at + $span_of_dashes + 1;
-						return true;
-					}
-
-					/*
-					 * Comments may be closed by either a --> or an invalid --!>.
-					 * The first occurrence closes the comment.
-					 *
-					 * See https://html.spec.whatwg.org/#parse-error-incorrectly-closed-comment
-					 */
-					--$closer_at; // Pre-increment inside condition below reduces risk of accidental infinite looping.
-					while ( ++$closer_at < $doc_length ) {
-						$closer_at = strpos( $html, '--', $closer_at );
-						if ( false === $closer_at ) {
-							$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-							return false;
-						}
-
-						if ( $closer_at + 2 < $doc_length && '>' === $html[ $closer_at + 2 ] ) {
-							$this->parser_state         = self::STATE_COMMENT;
-							$this->comment_type         = self::COMMENT_AS_HTML_COMMENT;
-							$this->token_length         = $closer_at + 3 - $this->token_starts_at;
-							$this->text_starts_at       = $this->token_starts_at + 4;
-							$this->text_length          = $closer_at - $this->text_starts_at;
-							$this->bytes_already_parsed = $closer_at + 3;
-							return true;
-						}
-
-						if (
-							$closer_at + 3 < $doc_length &&
-							'!' === $html[ $closer_at + 2 ] &&
-							'>' === $html[ $closer_at + 3 ]
-						) {
-							$this->parser_state         = self::STATE_COMMENT;
-							$this->comment_type         = self::COMMENT_AS_HTML_COMMENT;
-							$this->token_length         = $closer_at + 4 - $this->token_starts_at;
-							$this->text_starts_at       = $this->token_starts_at + 4;
-							$this->text_length          = $closer_at - $this->text_starts_at;
-							$this->bytes_already_parsed = $closer_at + 4;
-							return true;
-						}
-					}
-				}
-
-				/*
-				 * `<!DOCTYPE` transitions to DOCTYPE state – skip to the nearest >
-				 * These are ASCII-case-insensitive.
-				 * https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-				 */
-				if (
-					$doc_length > $at + 8 &&
-					( 'D' === $html[ $at + 2 ] || 'd' === $html[ $at + 2 ] ) &&
-					( 'O' === $html[ $at + 3 ] || 'o' === $html[ $at + 3 ] ) &&
-					( 'C' === $html[ $at + 4 ] || 'c' === $html[ $at + 4 ] ) &&
-					( 'T' === $html[ $at + 5 ] || 't' === $html[ $at + 5 ] ) &&
-					( 'Y' === $html[ $at + 6 ] || 'y' === $html[ $at + 6 ] ) &&
-					( 'P' === $html[ $at + 7 ] || 'p' === $html[ $at + 7 ] ) &&
-					( 'E' === $html[ $at + 8 ] || 'e' === $html[ $at + 8 ] )
-				) {
-					$closer_at = strpos( $html, '>', $at + 9 );
-					if ( false === $closer_at ) {
-						$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-						return false;
-					}
-
-					$this->parser_state         = self::STATE_DOCTYPE;
-					$this->token_length         = $closer_at + 1 - $this->token_starts_at;
-					$this->text_starts_at       = $this->token_starts_at + 9;
-					$this->text_length          = $closer_at - $this->text_starts_at;
-					$this->bytes_already_parsed = $closer_at + 1;
-					return true;
-				}
-
-				/*
-				 * Anything else here is an incorrectly-opened comment and transitions
-				 * to the bogus comment state - skip to the nearest >. If no closer is
-				 * found then the HTML was truncated inside the markup declaration.
-				 */
-				$closer_at = strpos( $html, '>', $at + 1 );
-				if ( false === $closer_at ) {
-					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-					return false;
-				}
-
-				$this->parser_state         = self::STATE_COMMENT;
-				$this->comment_type         = self::COMMENT_AS_INVALID_HTML;
-				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
-				$this->text_starts_at       = $this->token_starts_at + 2;
-				$this->text_length          = $closer_at - $this->text_starts_at;
-				$this->bytes_already_parsed = $closer_at + 1;
-
-				/*
-				 * Identify nodes that would be CDATA if HTML had CDATA sections.
-				 *
-				 * This section must occur after identifying the bogus comment end
-				 * because in an HTML parser it will span to the nearest `>`, even
-				 * if there's no `]]>` as would be required in an XML document. It
-				 * is therefore not possible to parse a CDATA section containing
-				 * a `>` in the HTML syntax.
-				 *
-				 * Inside foreign elements there is a discrepancy between browsers
-				 * and the specification on this.
-				 *
-				 * @todo Track whether the Tag Processor is inside a foreign element
-				 *       and require the proper closing `]]>` in those cases.
-				 */
-				if (
-					$this->token_length >= 10 &&
-					'[' === $html[ $this->token_starts_at + 2 ] &&
-					'C' === $html[ $this->token_starts_at + 3 ] &&
-					'D' === $html[ $this->token_starts_at + 4 ] &&
-					'A' === $html[ $this->token_starts_at + 5 ] &&
-					'T' === $html[ $this->token_starts_at + 6 ] &&
-					'A' === $html[ $this->token_starts_at + 7 ] &&
-					'[' === $html[ $this->token_starts_at + 8 ] &&
-					']' === $html[ $closer_at - 1 ] &&
-					']' === $html[ $closer_at - 2 ]
-				) {
-					$this->parser_state    = self::STATE_COMMENT;
-					$this->comment_type    = self::COMMENT_AS_CDATA_LOOKALIKE;
-					$this->text_starts_at += 7;
-					$this->text_length    -= 9;
-				}
-
-				return true;
-			}
-
-			/*
-			 * </> is a missing end tag name, which is ignored.
-			 *
-			 * This was also known as the "presumptuous empty tag"
-			 * in early discussions as it was proposed to close
-			 * the nearest previous opening tag.
-			 *
-			 * See https://html.spec.whatwg.org/#parse-error-missing-end-tag-name
-			 */
-			if ( '>' === $html[ $at + 1 ] ) {
-				// `<>` is interpreted as plaintext.
-				if ( ! $this->is_closing_tag ) {
-					++$at;
-					continue;
-				}
-
-				$this->parser_state         = self::STATE_PRESUMPTUOUS_TAG;
-				$this->token_length         = $at + 2 - $this->token_starts_at;
-				$this->bytes_already_parsed = $at + 2;
-				return true;
-			}
-
-			/*
-			 * `<?` transitions to a bogus comment state – skip to the nearest >
-			 * See https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
-			 */
-			if ( ! $this->is_closing_tag && '?' === $html[ $at + 1 ] ) {
-				$closer_at = strpos( $html, '>', $at + 2 );
-				if ( false === $closer_at ) {
-					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-					return false;
-				}
-
-				$this->parser_state         = self::STATE_COMMENT;
-				$this->comment_type         = self::COMMENT_AS_INVALID_HTML;
-				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
-				$this->text_starts_at       = $this->token_starts_at + 2;
-				$this->text_length          = $closer_at - $this->text_starts_at;
-				$this->bytes_already_parsed = $closer_at + 1;
-
-				/*
-				 * Identify a Processing Instruction node were HTML to have them.
-				 *
-				 * This section must occur after identifying the bogus comment end
-				 * because in an HTML parser it will span to the nearest `>`, even
-				 * if there's no `?>` as would be required in an XML document. It
-				 * is therefore not possible to parse a Processing Instruction node
-				 * containing a `>` in the HTML syntax.
-				 *
-				 * XML allows for more target names, but this code only identifies
-				 * those with ASCII-representable target names. This means that it
-				 * may identify some Processing Instruction nodes as bogus comments,
-				 * but it will not misinterpret the HTML structure. By limiting the
-				 * identification to these target names the Tag Processor can avoid
-				 * the need to start parsing UTF-8 sequences.
-				 *
-				 * > NameStartChar ::= ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] |
-				 *                     [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] |
-				 *                     [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] |
-				 *                     [#x10000-#xEFFFF]
-				 * > NameChar      ::= NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
-				 *
-				 * @see https://www.w3.org/TR/2006/REC-xml11-20060816/#NT-PITarget
-				 */
-				if ( $this->token_length >= 5 && '?' === $html[ $closer_at - 1 ] ) {
-					$comment_text     = substr( $html, $this->token_starts_at + 2, $this->token_length - 4 );
-					$pi_target_length = strspn( $comment_text, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ:_' );
-
-					if ( 0 < $pi_target_length ) {
-						$pi_target_length += strspn( $comment_text, 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789:_-.', $pi_target_length );
-
-						$this->comment_type       = self::COMMENT_AS_PI_NODE_LOOKALIKE;
-						$this->tag_name_starts_at = $this->token_starts_at + 2;
-						$this->tag_name_length    = $pi_target_length;
-						$this->text_starts_at    += $pi_target_length;
-						$this->text_length       -= $pi_target_length + 1;
-					}
-				}
-
-				return true;
-			}
-
-			/*
-			 * If a non-alpha starts the tag name in a tag closer it's a comment.
-			 * Find the first `>`, which closes the comment.
-			 *
-			 * This parser classifies these particular comments as special "funky comments"
-			 * which are made available for further processing.
-			 *
-			 * See https://html.spec.whatwg.org/#parse-error-invalid-first-character-of-tag-name
-			 */
-			if ( $this->is_closing_tag ) {
-				// No chance of finding a closer.
-				if ( $at + 3 > $doc_length ) {
-					return false;
-				}
-
-				$closer_at = strpos( $html, '>', $at + 2 );
-				if ( false === $closer_at ) {
-					$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-					return false;
-				}
-
-				$this->parser_state         = self::STATE_FUNKY_COMMENT;
-				$this->token_length         = $closer_at + 1 - $this->token_starts_at;
-				$this->text_starts_at       = $this->token_starts_at + 2;
-				$this->text_length          = $closer_at - $this->text_starts_at;
-				$this->bytes_already_parsed = $closer_at + 1;
-				return true;
-			}
-
-			++$at;
-		}
-
-		/*
-		 * This does not imply an incomplete parse; it indicates that there
-		 * can be nothing left in the document other than a #text node.
-		 */
-		$this->parser_state         = self::STATE_TEXT_NODE;
-		$this->token_starts_at      = $was_at;
-		$this->token_length         = $doc_length - $was_at;
-		$this->text_starts_at       = $was_at;
-		$this->text_length          = $this->token_length;
-		$this->bytes_already_parsed = $doc_length;
-		return true;
-	}
-
-	/**
-	 * Parses the next attribute.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return bool Whether an attribute was found before the end of the document.
-	 */
-	private function parse_next_attribute(): bool {
-		$doc_length = strlen( $this->html );
-
-		// Skip whitespace and slashes.
-		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n/", $this->bytes_already_parsed );
-		if ( $this->bytes_already_parsed >= $doc_length ) {
-			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-			return false;
-		}
-
-		/*
-		 * Treat the equal sign as a part of the attribute
-		 * name if it is the first encountered byte.
-		 *
-		 * @see https://html.spec.whatwg.org/multipage/parsing.html#before-attribute-name-state
-		 */
-		$name_length = '=' === $this->html[ $this->bytes_already_parsed ]
-			? 1 + strcspn( $this->html, "=/> \t\f\r\n", $this->bytes_already_parsed + 1 )
-			: strcspn( $this->html, "=/> \t\f\r\n", $this->bytes_already_parsed );
-
-		// No attribute, just tag closer.
-		if ( 0 === $name_length || $this->bytes_already_parsed + $name_length >= $doc_length ) {
-			return false;
-		}
-
-		$attribute_start             = $this->bytes_already_parsed;
-		$attribute_name              = substr( $this->html, $attribute_start, $name_length );
-		$this->bytes_already_parsed += $name_length;
-		if ( $this->bytes_already_parsed >= $doc_length ) {
-			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-			return false;
-		}
-
-		$this->skip_whitespace();
-		if ( $this->bytes_already_parsed >= $doc_length ) {
-			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-			return false;
-		}
-
-		$has_value = '=' === $this->html[ $this->bytes_already_parsed ];
-		if ( $has_value ) {
-			++$this->bytes_already_parsed;
-			$this->skip_whitespace();
-			if ( $this->bytes_already_parsed >= $doc_length ) {
-				$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-				return false;
-			}
-
-			switch ( $this->html[ $this->bytes_already_parsed ] ) {
-				case "'":
-				case '"':
-					$quote                      = $this->html[ $this->bytes_already_parsed ];
-					$value_start                = $this->bytes_already_parsed + 1;
-					$end_quote_at               = strpos( $this->html, $quote, $value_start );
-					$end_quote_at               = false === $end_quote_at ? $doc_length : $end_quote_at;
-					$value_length               = $end_quote_at - $value_start;
-					$attribute_end              = $end_quote_at + 1;
-					$this->bytes_already_parsed = $attribute_end;
-					break;
-
-				default:
-					$value_start                = $this->bytes_already_parsed;
-					$value_length               = strcspn( $this->html, "> \t\f\r\n", $value_start );
-					$attribute_end              = $value_start + $value_length;
-					$this->bytes_already_parsed = $attribute_end;
-			}
-		} else {
-			$value_start   = $this->bytes_already_parsed;
-			$value_length  = 0;
-			$attribute_end = $attribute_start + $name_length;
-		}
-
-		if ( $attribute_end >= $doc_length ) {
-			$this->parser_state = self::STATE_INCOMPLETE_INPUT;
-
-			return false;
-		}
-
-		if ( $this->is_closing_tag ) {
-			return true;
-		}
-
-		/*
-		 * > There must never be two or more attributes on
-		 * > the same start tag whose names are an ASCII
-		 * > case-insensitive match for each other.
-		 *     - HTML 5 spec
-		 *
-		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-		 */
-		$comparable_name = strtolower( $attribute_name );
-
-		// If an attribute is listed many times, only use the first declaration and ignore the rest.
-		if ( ! isset( $this->attributes[ $comparable_name ] ) ) {
-			$this->attributes[ $comparable_name ] = new Gutenberg_HTML_Attribute_Token_6_7(
-				$attribute_name,
-				$value_start,
-				$value_length,
-				$attribute_start,
-				$attribute_end - $attribute_start,
-				! $has_value
-			);
-
-			return true;
-		}
-
-		/*
-		 * Track the duplicate attributes so if we remove it, all disappear together.
-		 *
-		 * While `$this->duplicated_attributes` could always be stored as an `array()`,
-		 * which would simplify the logic here, storing a `null` and only allocating
-		 * an array when encountering duplicates avoids needless allocations in the
-		 * normative case of parsing tags with no duplicate attributes.
-		 */
-		$duplicate_span = new Gutenberg_HTML_Span_6_7( $attribute_start, $attribute_end - $attribute_start );
-		if ( null === $this->duplicate_attributes ) {
-			$this->duplicate_attributes = array( $comparable_name => array( $duplicate_span ) );
-		} elseif ( ! isset( $this->duplicate_attributes[ $comparable_name ] ) ) {
-			$this->duplicate_attributes[ $comparable_name ] = array( $duplicate_span );
-		} else {
-			$this->duplicate_attributes[ $comparable_name ][] = $duplicate_span;
-		}
-
-		return true;
-	}
-
-	/**
-	 * Move the internal cursor past any immediate successive whitespace.
-	 *
-	 * @since 6.2.0
-	 */
-	private function skip_whitespace(): void {
-		$this->bytes_already_parsed += strspn( $this->html, " \t\f\r\n", $this->bytes_already_parsed );
-	}
-
-	/**
-	 * Applies attribute updates and cleans up once a tag is fully parsed.
-	 *
-	 * @since 6.2.0
-	 */
-	private function after_tag(): void {
-		/*
-		 * There could be lexical updates enqueued for an attribute that
-		 * also exists on the next tag. In order to avoid conflating the
-		 * attributes across the two tags, lexical updates with names
-		 * need to be flushed to raw lexical updates.
-		 */
-		$this->class_name_updates_to_attributes_updates();
-
-		/*
-		 * Purge updates if there are too many. The actual count isn't
-		 * scientific, but a few values from 100 to a few thousand were
-		 * tests to find a practically-useful limit.
-		 *
-		 * If the update queue grows too big, then the Tag Processor
-		 * will spend more time iterating through them and lose the
-		 * efficiency gains of deferring applying them.
-		 */
-		if ( 1000 < count( $this->lexical_updates ) ) {
-			$this->get_updated_html();
-		}
-
-		foreach ( $this->lexical_updates as $name => $update ) {
-			/*
-			 * Any updates appearing after the cursor should be applied
-			 * before proceeding, otherwise they may be overlooked.
-			 */
-			if ( $update->start >= $this->bytes_already_parsed ) {
-				$this->get_updated_html();
-				break;
-			}
-
-			if ( is_int( $name ) ) {
-				continue;
-			}
-
-			$this->lexical_updates[] = $update;
-			unset( $this->lexical_updates[ $name ] );
-		}
-
-		$this->token_starts_at      = null;
-		$this->token_length         = null;
-		$this->tag_name_starts_at   = null;
-		$this->tag_name_length      = null;
-		$this->text_starts_at       = 0;
-		$this->text_length          = 0;
-		$this->is_closing_tag       = null;
-		$this->attributes           = array();
-		$this->comment_type         = null;
-		$this->duplicate_attributes = null;
-	}
-
-	/**
-	 * Converts class name updates into tag attributes updates
-	 * (they are accumulated in different data formats for performance).
-	 *
-	 * @since 6.2.0
-	 *
-	 * @see WP_HTML_Tag_Processor::$lexical_updates
-	 * @see WP_HTML_Tag_Processor::$classname_updates
-	 */
-	private function class_name_updates_to_attributes_updates(): void {
-		if ( count( $this->classname_updates ) === 0 ) {
-			return;
-		}
-
-		$existing_class = $this->get_enqueued_attribute_value( 'class' );
-		if ( null === $existing_class || true === $existing_class ) {
-			$existing_class = '';
-		}
-
-		if ( false === $existing_class && isset( $this->attributes['class'] ) ) {
-			$existing_class = substr(
-				$this->html,
-				$this->attributes['class']->value_starts_at,
-				$this->attributes['class']->value_length
-			);
-		}
-
-		if ( false === $existing_class ) {
-			$existing_class = '';
-		}
-
-		/**
-		 * Updated "class" attribute value.
-		 *
-		 * This is incrementally built while scanning through the existing class
-		 * attribute, skipping removed classes on the way, and then appending
-		 * added classes at the end. Only when finished processing will the
-		 * value contain the final new value.
-
-		 * @var string $class
-		 */
-		$class = '';
-
-		/**
-		 * Tracks the cursor position in the existing
-		 * class attribute value while parsing.
-		 *
-		 * @var int $at
-		 */
-		$at = 0;
-
-		/**
-		 * Indicates if there's any need to modify the existing class attribute.
-		 *
-		 * If a call to `add_class()` and `remove_class()` wouldn't impact
-		 * the `class` attribute value then there's no need to rebuild it.
-		 * For example, when adding a class that's already present or
-		 * removing one that isn't.
-		 *
-		 * This flag enables a performance optimization when none of the enqueued
-		 * class updates would impact the `class` attribute; namely, that the
-		 * processor can continue without modifying the input document, as if
-		 * none of the `add_class()` or `remove_class()` calls had been made.
-		 *
-		 * This flag is set upon the first change that requires a string update.
-		 *
-		 * @var bool $modified
-		 */
-		$modified = false;
-
-		// Remove unwanted classes by only copying the new ones.
-		$existing_class_length = strlen( $existing_class );
-		while ( $at < $existing_class_length ) {
-			// Skip to the first non-whitespace character.
-			$ws_at     = $at;
-			$ws_length = strspn( $existing_class, " \t\f\r\n", $ws_at );
-			$at       += $ws_length;
-
-			// Capture the class name – it's everything until the next whitespace.
-			$name_length = strcspn( $existing_class, " \t\f\r\n", $at );
-			if ( 0 === $name_length ) {
-				// If no more class names are found then that's the end.
-				break;
-			}
-
-			$name = substr( $existing_class, $at, $name_length );
-			$at  += $name_length;
-
-			// If this class is marked for removal, start processing the next one.
-			$remove_class = (
-				isset( $this->classname_updates[ $name ] ) &&
-				self::REMOVE_CLASS === $this->classname_updates[ $name ]
-			);
-
-			// If a class has already been seen then skip it; it should not be added twice.
-			if ( ! $remove_class ) {
-				$this->classname_updates[ $name ] = self::SKIP_CLASS;
-			}
-
-			if ( $remove_class ) {
-				$modified = true;
-				continue;
-			}
-
-			/*
-			 * Otherwise, append it to the new "class" attribute value.
-			 *
-			 * There are options for handling whitespace between tags.
-			 * Preserving the existing whitespace produces fewer changes
-			 * to the HTML content and should clarify the before/after
-			 * content when debugging the modified output.
-			 *
-			 * This approach contrasts normalizing the inter-class
-			 * whitespace to a single space, which might appear cleaner
-			 * in the output HTML but produce a noisier change.
-			 */
-			if ( '' !== $class ) {
-				$class .= substr( $existing_class, $ws_at, $ws_length );
-			}
-			$class .= $name;
-		}
-
-		// Add new classes by appending those which haven't already been seen.
-		foreach ( $this->classname_updates as $name => $operation ) {
-			if ( self::ADD_CLASS === $operation ) {
-				$modified = true;
-
-				$class .= strlen( $class ) > 0 ? ' ' : '';
-				$class .= $name;
-			}
-		}
-
-		$this->classname_updates = array();
-		if ( ! $modified ) {
-			return;
-		}
-
-		if ( strlen( $class ) > 0 ) {
-			$this->set_attribute( 'class', $class );
-		} else {
-			$this->remove_attribute( 'class' );
-		}
-	}
-
-	/**
-	 * Applies attribute updates to HTML document.
-	 *
-	 * @since 6.2.0
-	 * @since 6.2.1 Accumulates shift for internal cursor and passed pointer.
-	 * @since 6.3.0 Invalidate any bookmarks whose targets are overwritten.
-	 *
-	 * @param int $shift_this_point Accumulate and return shift for this position.
-	 * @return int How many bytes the given pointer moved in response to the updates.
-	 */
-	private function apply_attributes_updates( int $shift_this_point ): int {
-		if ( ! count( $this->lexical_updates ) ) {
-			return 0;
-		}
-
-		$accumulated_shift_for_given_point = 0;
-
-		/*
-		 * Attribute updates can be enqueued in any order but updates
-		 * to the document must occur in lexical order; that is, each
-		 * replacement must be made before all others which follow it
-		 * at later string indices in the input document.
-		 *
-		 * Sorting avoid making out-of-order replacements which
-		 * can lead to mangled output, partially-duplicated
-		 * attributes, and overwritten attributes.
-		 */
-		usort( $this->lexical_updates, array( self::class, 'sort_start_ascending' ) );
-
-		$bytes_already_copied = 0;
-		$output_buffer        = '';
-		foreach ( $this->lexical_updates as $diff ) {
-			$shift = strlen( $diff->text ) - $diff->length;
-
-			// Adjust the cursor position by however much an update affects it.
-			if ( $diff->start < $this->bytes_already_parsed ) {
-				$this->bytes_already_parsed += $shift;
-			}
-
-			// Accumulate shift of the given pointer within this function call.
-			if ( $diff->start <= $shift_this_point ) {
-				$accumulated_shift_for_given_point += $shift;
-			}
-
-			$output_buffer       .= substr( $this->html, $bytes_already_copied, $diff->start - $bytes_already_copied );
-			$output_buffer       .= $diff->text;
-			$bytes_already_copied = $diff->start + $diff->length;
-		}
-
-		$this->html = $output_buffer . substr( $this->html, $bytes_already_copied );
-
-		/*
-		 * Adjust bookmark locations to account for how the text
-		 * replacements adjust offsets in the input document.
-		 */
-		foreach ( $this->bookmarks as $bookmark_name => $bookmark ) {
-			$bookmark_end = $bookmark->start + $bookmark->length;
-
-			/*
-			 * Each lexical update which appears before the bookmark's endpoints
-			 * might shift the offsets for those endpoints. Loop through each change
-			 * and accumulate the total shift for each bookmark, then apply that
-			 * shift after tallying the full delta.
-			 */
-			$head_delta = 0;
-			$tail_delta = 0;
-
-			foreach ( $this->lexical_updates as $diff ) {
-				$diff_end = $diff->start + $diff->length;
-
-				if ( $bookmark->start < $diff->start && $bookmark_end < $diff->start ) {
-					break;
-				}
-
-				if ( $bookmark->start >= $diff->start && $bookmark_end < $diff_end ) {
-					$this->release_bookmark( $bookmark_name );
-					continue 2;
-				}
-
-				$delta = strlen( $diff->text ) - $diff->length;
-
-				if ( $bookmark->start >= $diff->start ) {
-					$head_delta += $delta;
-				}
-
-				if ( $bookmark_end >= $diff_end ) {
-					$tail_delta += $delta;
-				}
-			}
-
-			$bookmark->start  += $head_delta;
-			$bookmark->length += $tail_delta - $head_delta;
-		}
-
-		$this->lexical_updates = array();
-
-		return $accumulated_shift_for_given_point;
-	}
-
-	/**
-	 * Checks whether a bookmark with the given name exists.
-	 *
-	 * @since 6.3.0
-	 *
-	 * @param string $bookmark_name Name to identify a bookmark that potentially exists.
-	 * @return bool Whether that bookmark exists.
-	 */
-	public function has_bookmark( $bookmark_name ): bool {
-		return array_key_exists( $bookmark_name, $this->bookmarks );
-	}
-
-	/**
-	 * Move the internal cursor in the Tag Processor to a given bookmark's location.
-	 *
-	 * In order to prevent accidental infinite loops, there's a
-	 * maximum limit on the number of times seek() can be called.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $bookmark_name Jump to the place in the document identified by this bookmark name.
-	 * @return bool Whether the internal cursor was successfully moved to the bookmark's location.
-	 */
-	public function seek( $bookmark_name ): bool {
-		if ( ! array_key_exists( $bookmark_name, $this->bookmarks ) ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Unknown bookmark name.' ),
-				'6.2.0'
-			);
-			return false;
-		}
-
-		if ( ++$this->seek_count > static::MAX_SEEK_OPS ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Too many calls to seek() - this can lead to performance issues.' ),
-				'6.2.0'
-			);
-			return false;
-		}
-
-		// Flush out any pending updates to the document.
-		$this->get_updated_html();
-
-		// Point this tag processor before the sought tag opener and consume it.
-		$this->bytes_already_parsed = $this->bookmarks[ $bookmark_name ]->start;
-		$this->parser_state         = self::STATE_READY;
-		return $this->next_token();
-	}
-
-	/**
-	 * Compare two WP_HTML_Text_Replacement objects.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param WP_HTML_Text_Replacement $a First attribute update.
-	 * @param WP_HTML_Text_Replacement $b Second attribute update.
-	 * @return int Comparison value for string order.
-	 */
-	private static function sort_start_ascending( Gutenberg_HTML_Text_Replacement_6_7 $a, Gutenberg_HTML_Text_Replacement_6_7 $b ): int {
-		$by_start = $a->start - $b->start;
-		if ( 0 !== $by_start ) {
-			return $by_start;
-		}
-
-		$by_text = isset( $a->text, $b->text ) ? strcmp( $a->text, $b->text ) : 0;
-		if ( 0 !== $by_text ) {
-			return $by_text;
-		}
-
-		/*
-		 * This code should be unreachable, because it implies the two replacements
-		 * start at the same location and contain the same text.
-		 */
-		return $a->length - $b->length;
-	}
-
-	/**
-	 * Return the enqueued value for a given attribute, if one exists.
-	 *
-	 * Enqueued updates can take different data types:
-	 *  - If an update is enqueued and is boolean, the return will be `true`
-	 *  - If an update is otherwise enqueued, the return will be the string value of that update.
-	 *  - If an attribute is enqueued to be removed, the return will be `null` to indicate that.
-	 *  - If no updates are enqueued, the return will be `false` to differentiate from "removed."
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $comparable_name The attribute name in its comparable form.
-	 * @return string|boolean|null Value of enqueued update if present, otherwise false.
-	 */
-	private function get_enqueued_attribute_value( string $comparable_name ) {
-		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-			return false;
-		}
-
-		if ( ! isset( $this->lexical_updates[ $comparable_name ] ) ) {
-			return false;
-		}
-
-		$enqueued_text = $this->lexical_updates[ $comparable_name ]->text;
-
-		// Removed attributes erase the entire span.
-		if ( '' === $enqueued_text ) {
-			return null;
-		}
-
-		/*
-		 * Boolean attribute updates are just the attribute name without a corresponding value.
-		 *
-		 * This value might differ from the given comparable name in that there could be leading
-		 * or trailing whitespace, and that the casing follows the name given in `set_attribute`.
-		 *
-		 * Example:
-		 *
-		 *     $p->set_attribute( 'data-TEST-id', 'update' );
-		 *     'update' === $p->get_enqueued_attribute_value( 'data-test-id' );
-		 *
-		 * Detect this difference based on the absence of the `=`, which _must_ exist in any
-		 * attribute containing a value, e.g. `<input type="text" enabled />`.
-		 *                                            ¹           ²
-		 *                                       1. Attribute with a string value.
-		 *                                       2. Boolean attribute whose value is `true`.
-		 */
-		$equals_at = strpos( $enqueued_text, '=' );
-		if ( false === $equals_at ) {
-			return true;
-		}
-
-		/*
-		 * Finally, a normal update's value will appear after the `=` and
-		 * be double-quoted, as performed incidentally by `set_attribute`.
-		 *
-		 * e.g. `type="text"`
-		 *           ¹²    ³
-		 *        1. Equals is here.
-		 *        2. Double-quoting starts one after the equals sign.
-		 *        3. Double-quoting ends at the last character in the update.
-		 */
-		$enqueued_value = substr( $enqueued_text, $equals_at + 2, -1 );
-		return Gutenberg_HTML_Decoder_6_7::decode_attribute( $enqueued_value );
-	}
-
-	/**
-	 * Returns the value of a requested attribute from a matched tag opener if that attribute exists.
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute( 'data-test-id' ) === '14';
-	 *     $p->get_attribute( 'enabled' ) === true;
-	 *     $p->get_attribute( 'aria-label' ) === null;
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute( 'class' ) === null;
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name Name of attribute whose value is requested.
-	 * @return string|true|null Value of attribute or `null` if not available. Boolean attributes return `true`.
-	 */
-	public function get_attribute( $name ) {
-		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-			return null;
-		}
-
-		$comparable = strtolower( $name );
-
-		/*
-		 * For every attribute other than `class` it's possible to perform a quick check if
-		 * there's an enqueued lexical update whose value takes priority over what's found in
-		 * the input document.
-		 *
-		 * The `class` attribute is special though because of the exposed helpers `add_class`
-		 * and `remove_class`. These form a builder for the `class` attribute, so an additional
-		 * check for enqueued class changes is required in addition to the check for any enqueued
-		 * attribute values. If any exist, those enqueued class changes must first be flushed out
-		 * into an attribute value update.
-		 */
-		if ( 'class' === $name ) {
-			$this->class_name_updates_to_attributes_updates();
-		}
-
-		// Return any enqueued attribute value updates if they exist.
-		$enqueued_value = $this->get_enqueued_attribute_value( $comparable );
-		if ( false !== $enqueued_value ) {
-			return $enqueued_value;
-		}
-
-		if ( ! isset( $this->attributes[ $comparable ] ) ) {
-			return null;
-		}
-
-		$attribute = $this->attributes[ $comparable ];
-
-		/*
-		 * This flag distinguishes an attribute with no value
-		 * from an attribute with an empty string value. For
-		 * unquoted attributes this could look very similar.
-		 * It refers to whether an `=` follows the name.
-		 *
-		 * e.g. <div boolean-attribute empty-attribute=></div>
-		 *           ¹                 ²
-		 *        1. Attribute `boolean-attribute` is `true`.
-		 *        2. Attribute `empty-attribute` is `""`.
-		 */
-		if ( true === $attribute->is_true ) {
-			return true;
-		}
-
-		$raw_value = substr( $this->html, $attribute->value_starts_at, $attribute->value_length );
-
-		return Gutenberg_HTML_Decoder_6_7::decode_attribute( $raw_value );
-	}
-
-	/**
-	 * Gets lowercase names of all attributes matching a given prefix in the current tag.
-	 *
-	 * Note that matching is case-insensitive. This is in accordance with the spec:
-	 *
-	 * > There must never be two or more attributes on
-	 * > the same start tag whose names are an ASCII
-	 * > case-insensitive match for each other.
-	 *     - HTML 5 spec
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
-	 *
-	 * @since 6.2.0
-	 *
-	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-	 *
-	 * @param string $prefix Prefix of requested attribute names.
-	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
-	 */
-	public function get_attribute_names_with_prefix( $prefix ): ?array {
-		if (
-			self::STATE_MATCHED_TAG !== $this->parser_state ||
-			$this->is_closing_tag
-		) {
-			return null;
-		}
-
-		$comparable = strtolower( $prefix );
-
-		$matches = array();
-		foreach ( array_keys( $this->attributes ) as $attr_name ) {
-			if ( str_starts_with( $attr_name, $comparable ) ) {
-				$matches[] = $attr_name;
-			}
-		}
-		return $matches;
-	}
-
-	/**
-	 * Returns the uppercase name of the matched tag.
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
-	 *     $p->next_tag() === true;
-	 *     $p->get_tag() === 'DIV';
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_tag() === null;
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return string|null Name of currently matched tag in input HTML, or `null` if none found.
-	 */
-	public function get_tag(): ?string {
-		if ( null === $this->tag_name_starts_at ) {
-			return null;
-		}
-
-		$tag_name = substr( $this->html, $this->tag_name_starts_at, $this->tag_name_length );
-
-		if ( self::STATE_MATCHED_TAG === $this->parser_state ) {
-			return strtoupper( $tag_name );
-		}
-
-		if (
-			self::STATE_COMMENT === $this->parser_state &&
-			self::COMMENT_AS_PI_NODE_LOOKALIKE === $this->get_comment_type()
-		) {
-			return $tag_name;
-		}
-
-		return null;
-	}
-
-	/**
-	 * Indicates if the currently matched tag contains the self-closing flag.
-	 *
-	 * No HTML elements ought to have the self-closing flag and for those, the self-closing
-	 * flag will be ignored. For void elements this is benign because they "self close"
-	 * automatically. For non-void HTML elements though problems will appear if someone
-	 * intends to use a self-closing element in place of that element with an empty body.
-	 * For HTML foreign elements and custom elements the self-closing flag determines if
-	 * they self-close or not.
-	 *
-	 * This function does not determine if a tag is self-closing,
-	 * but only if the self-closing flag is present in the syntax.
-	 *
-	 * @since 6.3.0
-	 *
-	 * @return bool Whether the currently matched tag contains the self-closing flag.
-	 */
-	public function has_self_closing_flag(): bool {
-		if ( self::STATE_MATCHED_TAG !== $this->parser_state ) {
-			return false;
-		}
-
-		/*
-		 * The self-closing flag is the solidus at the _end_ of the tag, not the beginning.
-		 *
-		 * Example:
-		 *
-		 *     <figure />
-		 *             ^ this appears one character before the end of the closing ">".
-		 */
-		return '/' === $this->html[ $this->token_starts_at + $this->token_length - 2 ];
-	}
-
-	/**
-	 * Indicates if the current tag token is a tag closer.
-	 *
-	 * Example:
-	 *
-	 *     $p = new WP_HTML_Tag_Processor( '<div></div>' );
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === false;
-	 *
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === true;
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return bool Whether the current tag is a tag closer.
-	 */
-	public function is_tag_closer(): bool {
-		return (
-			self::STATE_MATCHED_TAG === $this->parser_state &&
-			$this->is_closing_tag
-		);
-	}
-
-	/**
-	 * Indicates the kind of matched token, if any.
-	 *
-	 * This differs from `get_token_name()` in that it always
-	 * returns a static string indicating the type, whereas
-	 * `get_token_name()` may return values derived from the
-	 * token itself, such as a tag name or processing
-	 * instruction tag.
-	 *
-	 * Possible values:
-	 *  - `#tag` when matched on a tag.
-	 *  - `#text` when matched on a text node.
-	 *  - `#cdata-section` when matched on a CDATA node.
-	 *  - `#comment` when matched on a comment.
-	 *  - `#doctype` when matched on a DOCTYPE declaration.
-	 *  - `#presumptuous-tag` when matched on an empty tag closer.
-	 *  - `#funky-comment` when matched on a funky comment.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return string|null What kind of token is matched, or null.
-	 */
-	public function get_token_type(): ?string {
-		switch ( $this->parser_state ) {
-			case self::STATE_MATCHED_TAG:
-				return '#tag';
-
-			case self::STATE_DOCTYPE:
-				return '#doctype';
-
-			default:
-				return $this->get_token_name();
-		}
-	}
-
-	/**
-	 * Returns the node name represented by the token.
-	 *
-	 * This matches the DOM API value `nodeName`. Some values
-	 * are static, such as `#text` for a text node, while others
-	 * are dynamically generated from the token itself.
-	 *
-	 * Dynamic names:
-	 *  - Uppercase tag name for tag matches.
-	 *  - `html` for DOCTYPE declarations.
-	 *
-	 * Note that if the Tag Processor is not matched on a token
-	 * then this function will return `null`, either because it
-	 * hasn't yet found a token or because it reached the end
-	 * of the document without matching a token.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return string|null Name of the matched token.
-	 */
-	public function get_token_name(): ?string {
-		switch ( $this->parser_state ) {
-			case self::STATE_MATCHED_TAG:
-				return $this->get_tag();
-
-			case self::STATE_TEXT_NODE:
-				return '#text';
-
-			case self::STATE_CDATA_NODE:
-				return '#cdata-section';
-
-			case self::STATE_COMMENT:
-				return '#comment';
-
-			case self::STATE_DOCTYPE:
-				return 'html';
-
-			case self::STATE_PRESUMPTUOUS_TAG:
-				return '#presumptuous-tag';
-
-			case self::STATE_FUNKY_COMMENT:
-				return '#funky-comment';
-		}
-
-		return null;
-	}
-
-	/**
-	 * Indicates what kind of comment produced the comment node.
-	 *
-	 * Because there are different kinds of HTML syntax which produce
-	 * comments, the Tag Processor tracks and exposes this as a type
-	 * for the comment. Nominally only regular HTML comments exist as
-	 * they are commonly known, but a number of unrelated syntax errors
-	 * also produce comments.
-	 *
-	 * @see self::COMMENT_AS_ABRUPTLY_CLOSED_COMMENT
-	 * @see self::COMMENT_AS_CDATA_LOOKALIKE
-	 * @see self::COMMENT_AS_INVALID_HTML
-	 * @see self::COMMENT_AS_HTML_COMMENT
-	 * @see self::COMMENT_AS_PI_NODE_LOOKALIKE
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return string|null
-	 */
-	public function get_comment_type(): ?string {
-		if ( self::STATE_COMMENT !== $this->parser_state ) {
-			return null;
-		}
-
-		return $this->comment_type;
-	}
-
-	/**
-	 * Returns the modifiable text for a matched token, or an empty string.
-	 *
-	 * Modifiable text is text content that may be read and changed without
-	 * changing the HTML structure of the document around it. This includes
-	 * the contents of `#text` nodes in the HTML as well as the inner
-	 * contents of HTML comments, Processing Instructions, and others, even
-	 * though these nodes aren't part of a parsed DOM tree. They also contain
-	 * the contents of SCRIPT and STYLE tags, of TEXTAREA tags, and of any
-	 * other section in an HTML document which cannot contain HTML markup (DATA).
-	 *
-	 * If a token has no modifiable text then an empty string is returned to
-	 * avoid needless crashing or type errors. An empty string does not mean
-	 * that a token has modifiable text, and a token with modifiable text may
-	 * have an empty string (e.g. a comment with no contents).
-	 *
-	 * @since 6.5.0
-	 *
-	 * @return string
-	 */
-	public function get_modifiable_text(): string {
-		if ( null === $this->text_starts_at ) {
-			return '';
-		}
-
-		$text = substr( $this->html, $this->text_starts_at, $this->text_length );
-
-		// Comment data is not decoded.
-		if (
-			self::STATE_CDATA_NODE === $this->parser_state ||
-			self::STATE_COMMENT === $this->parser_state ||
-			self::STATE_DOCTYPE === $this->parser_state ||
-			self::STATE_FUNKY_COMMENT === $this->parser_state
-		) {
-			return $text;
-		}
-
-		$tag_name = $this->get_tag();
-		if (
-			// Script data is not decoded.
-			'SCRIPT' === $tag_name ||
-
-			// RAWTEXT data is not decoded.
-			'IFRAME' === $tag_name ||
-			'NOEMBED' === $tag_name ||
-			'NOFRAMES' === $tag_name ||
-			'STYLE' === $tag_name ||
-			'XMP' === $tag_name
-		) {
-			return $text;
-		}
-
-		$decoded = Gutenberg_HTML_Decoder_6_7::decode_text_node( $text );
-
-		/*
-		 * TEXTAREA skips a leading newline, but this newline may appear not only as the
-		 * literal character `\n`, but also as a character reference, such as in the
-		 * following markup: `<textarea>&#x0a;Content</textarea>`.
-		 *
-		 * For these cases it's important to first decode the text content before checking
-		 * for a leading newline and removing it.
-		 */
-		if (
-			self::STATE_MATCHED_TAG === $this->parser_state &&
-			'TEXTAREA' === $tag_name &&
-			strlen( $decoded ) > 0 &&
-			"\n" === $decoded[0]
-		) {
-			return substr( $decoded, 1 );
-		}
-
-		return $decoded;
-	}
-
-	/**
-	 * Updates or creates a new attribute on the currently matched tag with the passed value.
-	 *
-	 * For boolean attributes special handling is provided:
-	 *  - When `true` is passed as the value, then only the attribute name is added to the tag.
-	 *  - When `false` is passed, the attribute gets removed if it existed before.
-	 *
-	 * For string attributes, the value is escaped using the `esc_attr` function.
-	 *
-	 * @since 6.2.0
-	 * @since 6.2.1 Fix: Only create a single update for multiple calls with case-variant attribute names.
-	 *
-	 * @param string      $name  The attribute name to target.
-	 * @param string|bool $value The new attribute value.
-	 * @return bool Whether an attribute value was set.
-	 */
-	public function set_attribute( $name, $value ): bool {
-		if (
-			self::STATE_MATCHED_TAG !== $this->parser_state ||
-			$this->is_closing_tag
-		) {
-			return false;
-		}
-
-		/*
-		 * WordPress rejects more characters than are strictly forbidden
-		 * in HTML5. This is to prevent additional security risks deeper
-		 * in the WordPress and plugin stack. Specifically the
-		 * less-than (<) greater-than (>) and ampersand (&) aren't allowed.
-		 *
-		 * The use of a PCRE match enables looking for specific Unicode
-		 * code points without writing a UTF-8 decoder. Whereas scanning
-		 * for one-byte characters is trivial (with `strcspn`), scanning
-		 * for the longer byte sequences would be more complicated. Given
-		 * that this shouldn't be in the hot path for execution, it's a
-		 * reasonable compromise in efficiency without introducing a
-		 * noticeable impact on the overall system.
-		 *
-		 * @see https://html.spec.whatwg.org/#attributes-2
-		 *
-		 * @todo As the only regex pattern maybe we should take it out?
-		 *       Are Unicode patterns available broadly in Core?
-		 */
-		if ( preg_match(
-			'~[' .
-				// Syntax-like characters.
-				'"\'>&</ =' .
-				// Control characters.
-				'\x{00}-\x{1F}' .
-				// HTML noncharacters.
-				'\x{FDD0}-\x{FDEF}' .
-				'\x{FFFE}\x{FFFF}\x{1FFFE}\x{1FFFF}\x{2FFFE}\x{2FFFF}\x{3FFFE}\x{3FFFF}' .
-				'\x{4FFFE}\x{4FFFF}\x{5FFFE}\x{5FFFF}\x{6FFFE}\x{6FFFF}\x{7FFFE}\x{7FFFF}' .
-				'\x{8FFFE}\x{8FFFF}\x{9FFFE}\x{9FFFF}\x{AFFFE}\x{AFFFF}\x{BFFFE}\x{BFFFF}' .
-				'\x{CFFFE}\x{CFFFF}\x{DFFFE}\x{DFFFF}\x{EFFFE}\x{EFFFF}\x{FFFFE}\x{FFFFF}' .
-				'\x{10FFFE}\x{10FFFF}' .
-			']~Ssu',
-			$name
-		) ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'Invalid attribute name.' ),
-				'6.2.0'
-			);
-
-			return false;
-		}
-
-		/*
-		 * > The values "true" and "false" are not allowed on boolean attributes.
-		 * > To represent a false value, the attribute has to be omitted altogether.
-		 *     - HTML5 spec, https://html.spec.whatwg.org/#boolean-attributes
-		 */
-		if ( false === $value ) {
-			return $this->remove_attribute( $name );
-		}
-
-		if ( true === $value ) {
-			$updated_attribute = $name;
-		} else {
-			$comparable_name = strtolower( $name );
-
-			/*
-			 * Escape URL attributes.
-			 *
-			 * @see https://html.spec.whatwg.org/#attributes-3
-			 */
-			$escaped_new_value = in_array( $comparable_name, wp_kses_uri_attributes() ) ? esc_url( $value ) : esc_attr( $value );
-			$updated_attribute = "{$name}=\"{$escaped_new_value}\"";
-		}
-
-		/*
-		 * > There must never be two or more attributes on
-		 * > the same start tag whose names are an ASCII
-		 * > case-insensitive match for each other.
-		 *     - HTML 5 spec
-		 *
-		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-		 */
-		$comparable_name = strtolower( $name );
-
-		if ( isset( $this->attributes[ $comparable_name ] ) ) {
-			/*
-			 * Update an existing attribute.
-			 *
-			 * Example – set attribute id to "new" in <div id="initial_id" />:
-			 *
-			 *     <div id="initial_id"/>
-			 *          ^-------------^
-			 *          start         end
-			 *     replacement: `id="new"`
-			 *
-			 *     Result: <div id="new"/>
-			 */
-			$existing_attribute                        = $this->attributes[ $comparable_name ];
-			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_7(
-				$existing_attribute->start,
-				$existing_attribute->length,
-				$updated_attribute
-			);
-		} else {
-			/*
-			 * Create a new attribute at the tag's name end.
-			 *
-			 * Example – add attribute id="new" to <div />:
-			 *
-			 *     <div/>
-			 *         ^
-			 *         start and end
-			 *     replacement: ` id="new"`
-			 *
-			 *     Result: <div id="new"/>
-			 */
-			$this->lexical_updates[ $comparable_name ] = new Gutenberg_HTML_Text_Replacement_6_7(
-				$this->tag_name_starts_at + $this->tag_name_length,
-				0,
-				' ' . $updated_attribute
-			);
-		}
-
-		/*
-		 * Any calls to update the `class` attribute directly should wipe out any
-		 * enqueued class changes from `add_class` and `remove_class`.
-		 */
-		if ( 'class' === $comparable_name && ! empty( $this->classname_updates ) ) {
-			$this->classname_updates = array();
-		}
-
-		return true;
-	}
-
-	/**
-	 * Remove an attribute from the currently-matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $name The attribute name to remove.
-	 * @return bool Whether an attribute was removed.
-	 */
-	public function remove_attribute( $name ): bool {
-		if (
-			self::STATE_MATCHED_TAG !== $this->parser_state ||
-			$this->is_closing_tag
-		) {
-			return false;
-		}
-
-		/*
-		 * > There must never be two or more attributes on
-		 * > the same start tag whose names are an ASCII
-		 * > case-insensitive match for each other.
-		 *     - HTML 5 spec
-		 *
-		 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-		 */
-		$name = strtolower( $name );
-
-		/*
-		 * Any calls to update the `class` attribute directly should wipe out any
-		 * enqueued class changes from `add_class` and `remove_class`.
-		 */
-		if ( 'class' === $name && count( $this->classname_updates ) !== 0 ) {
-			$this->classname_updates = array();
-		}
-
-		/*
-		 * If updating an attribute that didn't exist in the input
-		 * document, then remove the enqueued update and move on.
-		 *
-		 * For example, this might occur when calling `remove_attribute()`
-		 * after calling `set_attribute()` for the same attribute
-		 * and when that attribute wasn't originally present.
-		 */
-		if ( ! isset( $this->attributes[ $name ] ) ) {
-			if ( isset( $this->lexical_updates[ $name ] ) ) {
-				unset( $this->lexical_updates[ $name ] );
-			}
-			return false;
-		}
-
-		/*
-		 * Removes an existing tag attribute.
-		 *
-		 * Example – remove the attribute id from <div id="main"/>:
-		 *    <div id="initial_id"/>
-		 *         ^-------------^
-		 *         start         end
-		 *    replacement: ``
-		 *
-		 *    Result: <div />
-		 */
-		$this->lexical_updates[ $name ] = new Gutenberg_HTML_Text_Replacement_6_7(
-			$this->attributes[ $name ]->start,
-			$this->attributes[ $name ]->length,
-			''
-		);
-
-		// Removes any duplicated attributes if they were also present.
-		foreach ( $this->duplicate_attributes[ $name ] ?? array() as $attribute_token ) {
-			$this->lexical_updates[] = new Gutenberg_HTML_Text_Replacement_6_7(
-				$attribute_token->start,
-				$attribute_token->length,
-				''
-			);
-		}
-
-		return true;
-	}
-
-	/**
-	 * Adds a new class name to the currently matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $class_name The class name to add.
-	 * @return bool Whether the class was set to be added.
-	 */
-	public function add_class( $class_name ): bool {
-		if (
-			self::STATE_MATCHED_TAG !== $this->parser_state ||
-			$this->is_closing_tag
-		) {
-			return false;
-		}
-
-		$this->classname_updates[ $class_name ] = self::ADD_CLASS;
-
-		return true;
-	}
-
-	/**
-	 * Removes a class name from the currently matched tag.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param string $class_name The class name to remove.
-	 * @return bool Whether the class was set to be removed.
-	 */
-	public function remove_class( $class_name ): bool {
-		if (
-			self::STATE_MATCHED_TAG !== $this->parser_state ||
-			$this->is_closing_tag
-		) {
-			return false;
-		}
-
-		if ( null !== $this->tag_name_starts_at ) {
-			$this->classname_updates[ $class_name ] = self::REMOVE_CLASS;
-		}
-
-		return true;
-	}
-
-	/**
-	 * Returns the string representation of the HTML Tag Processor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @see WP_HTML_Tag_Processor::get_updated_html()
-	 *
-	 * @return string The processed HTML.
-	 */
-	public function __toString(): string {
-		return $this->get_updated_html();
-	}
-
-	/**
-	 * Returns the string representation of the HTML Tag Processor.
-	 *
-	 * @since 6.2.0
-	 * @since 6.2.1 Shifts the internal cursor corresponding to the applied updates.
-	 * @since 6.4.0 No longer calls subclass method `next_tag()` after updating HTML.
-	 *
-	 * @return string The processed HTML.
-	 */
-	public function get_updated_html(): string {
-		$requires_no_updating = 0 === count( $this->classname_updates ) && 0 === count( $this->lexical_updates );
-
-		/*
-		 * When there is nothing more to update and nothing has already been
-		 * updated, return the original document and avoid a string copy.
-		 */
-		if ( $requires_no_updating ) {
-			return $this->html;
-		}
-
-		/*
-		 * Keep track of the position right before the current tag. This will
-		 * be necessary for reparsing the current tag after updating the HTML.
-		 */
-		$before_current_tag = $this->token_starts_at ?? 0;
-
-		/*
-		 * 1. Apply the enqueued edits and update all the pointers to reflect those changes.
-		 */
-		$this->class_name_updates_to_attributes_updates();
-		$before_current_tag += $this->apply_attributes_updates( $before_current_tag );
-
-		/*
-		 * 2. Rewind to before the current tag and reparse to get updated attributes.
-		 *
-		 * At this point the internal cursor points to the end of the tag name.
-		 * Rewind before the tag name starts so that it's as if the cursor didn't
-		 * move; a call to `next_tag()` will reparse the recently-updated attributes
-		 * and additional calls to modify the attributes will apply at this same
-		 * location, but in order to avoid issues with subclasses that might add
-		 * behaviors to `next_tag()`, the internal methods should be called here
-		 * instead.
-		 *
-		 * It's important to note that in this specific place there will be no change
-		 * because the processor was already at a tag when this was called and it's
-		 * rewinding only to the beginning of this very tag before reprocessing it
-		 * and its attributes.
-		 *
-		 * <p>Previous HTML<em>More HTML</em></p>
-		 *                 ↑  │ back up by the length of the tag name plus the opening <
-		 *                 └←─┘ back up by strlen("em") + 1 ==> 3
-		 */
-		$this->bytes_already_parsed = $before_current_tag;
-		$this->base_class_next_token();
-
-		return $this->html;
-	}
-
-	/**
-	 * Parses tag query input into internal search criteria.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param array|string|null $query {
-	 *     Optional. Which tag name to find, having which class, etc. Default is to find any tag.
-	 *
-	 *     @type string|null $tag_name     Which tag to find, or `null` for "any tag."
-	 *     @type int|null    $match_offset Find the Nth tag matching all search criteria.
-	 *                                     1 for "first" tag, 3 for "third," etc.
-	 *                                     Defaults to first tag.
-	 *     @type string|null $class_name   Tag must contain this class name to match.
-	 *     @type string      $tag_closers  "visit" or "skip": whether to stop on tag closers, e.g. </div>.
-	 * }
-	 */
-	private function parse_query( $query ) {
-		if ( null !== $query && $query === $this->last_query ) {
-			return;
-		}
-
-		$this->last_query          = $query;
-		$this->sought_tag_name     = null;
-		$this->sought_class_name   = null;
-		$this->sought_match_offset = 1;
-		$this->stop_on_tag_closers = false;
-
-		// A single string value means "find the tag of this name".
-		if ( is_string( $query ) ) {
-			$this->sought_tag_name = $query;
-			return;
-		}
-
-		// An empty query parameter applies no restrictions on the search.
-		if ( null === $query ) {
-			return;
-		}
-
-		// If not using the string interface, an associative array is required.
-		if ( ! is_array( $query ) ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( 'The query argument must be an array or a tag name.' ),
-				'6.2.0'
-			);
-			return;
-		}
-
-		if ( isset( $query['tag_name'] ) && is_string( $query['tag_name'] ) ) {
-			$this->sought_tag_name = $query['tag_name'];
-		}
-
-		if ( isset( $query['class_name'] ) && is_string( $query['class_name'] ) ) {
-			$this->sought_class_name = $query['class_name'];
-		}
-
-		if ( isset( $query['match_offset'] ) && is_int( $query['match_offset'] ) && 0 < $query['match_offset'] ) {
-			$this->sought_match_offset = $query['match_offset'];
-		}
-
-		if ( isset( $query['tag_closers'] ) ) {
-			$this->stop_on_tag_closers = 'visit' === $query['tag_closers'];
-		}
-	}
-
-
-	/**
-	 * Checks whether a given tag and its attributes match the search criteria.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @return bool Whether the given tag and its attribute match the search criteria.
-	 */
-	private function matches(): bool {
-		if ( $this->is_closing_tag && ! $this->stop_on_tag_closers ) {
-			return false;
-		}
-
-		// Does the tag name match the requested tag name in a case-insensitive manner?
-		if ( isset( $this->sought_tag_name ) && 0 !== substr_compare( $this->html, $this->sought_tag_name, $this->tag_name_starts_at, $this->tag_name_length, true ) ) {
-			return false;
-		}
-
-		if ( null !== $this->sought_class_name && ! $this->has_class( $this->sought_class_name ) ) {
-			return false;
-		}
-
-		return true;
-	}
-
-	/**
-	 * Parser Ready State.
-	 *
-	 * Indicates that the parser is ready to run and waiting for a state transition.
-	 * It may not have started yet, or it may have just finished parsing a token and
-	 * is ready to find the next one.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_READY = 'STATE_READY';
-
-	/**
-	 * Parser Complete State.
-	 *
-	 * Indicates that the parser has reached the end of the document and there is
-	 * nothing left to scan. It finished parsing the last token completely.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_COMPLETE = 'STATE_COMPLETE';
-
-	/**
-	 * Parser Incomplete Input State.
-	 *
-	 * Indicates that the parser has reached the end of the document before finishing
-	 * a token. It started parsing a token but there is a possibility that the input
-	 * HTML document was truncated in the middle of a token.
-	 *
-	 * The parser is reset at the start of the incomplete token and has paused. There
-	 * is nothing more than can be scanned unless provided a more complete document.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_INCOMPLETE_INPUT = 'STATE_INCOMPLETE_INPUT';
-
-	/**
-	 * Parser Matched Tag State.
-	 *
-	 * Indicates that the parser has found an HTML tag and it's possible to get
-	 * the tag name and read or modify its attributes (if it's not a closing tag).
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_MATCHED_TAG = 'STATE_MATCHED_TAG';
-
-	/**
-	 * Parser Text Node State.
-	 *
-	 * Indicates that the parser has found a text node and it's possible
-	 * to read and modify that text.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_TEXT_NODE = 'STATE_TEXT_NODE';
-
-	/**
-	 * Parser CDATA Node State.
-	 *
-	 * Indicates that the parser has found a CDATA node and it's possible
-	 * to read and modify its modifiable text. Note that in HTML there are
-	 * no CDATA nodes outside of foreign content (SVG and MathML). Outside
-	 * of foreign content, they are treated as HTML comments.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_CDATA_NODE = 'STATE_CDATA_NODE';
-
-	/**
-	 * Indicates that the parser has found an HTML comment and it's
-	 * possible to read and modify its modifiable text.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_COMMENT = 'STATE_COMMENT';
-
-	/**
-	 * Indicates that the parser has found a DOCTYPE node and it's
-	 * possible to read and modify its modifiable text.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_DOCTYPE = 'STATE_DOCTYPE';
-
-	/**
-	 * Indicates that the parser has found an empty tag closer `</>`.
-	 *
-	 * Note that in HTML there are no empty tag closers, and they
-	 * are ignored. Nonetheless, the Tag Processor still
-	 * recognizes them as they appear in the HTML stream.
-	 *
-	 * These were historically discussed as a "presumptuous tag
-	 * closer," which would close the nearest open tag, but were
-	 * dismissed in favor of explicitly-closing tags.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_PRESUMPTUOUS_TAG = 'STATE_PRESUMPTUOUS_TAG';
-
-	/**
-	 * Indicates that the parser has found a "funky comment"
-	 * and it's possible to read and modify its modifiable text.
-	 *
-	 * Example:
-	 *
-	 *     </%url>
-	 *     </{"wp-bit":"query/post-author"}>
-	 *     </2>
-	 *
-	 * Funky comments are tag closers with invalid tag names. Note
-	 * that in HTML these are turn into bogus comments. Nonetheless,
-	 * the Tag Processor recognizes them in a stream of HTML and
-	 * exposes them for inspection and modification.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @access private
-	 */
-	const STATE_FUNKY_COMMENT = 'STATE_WP_FUNKY';
-
-	/**
-	 * Indicates that a comment was created when encountering abruptly-closed HTML comment.
-	 *
-	 * Example:
-	 *
-	 *     <!-->
-	 *     <!--->
-	 *
-	 * @since 6.5.0
-	 */
-	const COMMENT_AS_ABRUPTLY_CLOSED_COMMENT = 'COMMENT_AS_ABRUPTLY_CLOSED_COMMENT';
-
-	/**
-	 * Indicates that a comment would be parsed as a CDATA node,
-	 * were HTML to allow CDATA nodes outside of foreign content.
-	 *
-	 * Example:
-	 *
-	 *     <![CDATA[This is a CDATA node.]]>
-	 *
-	 * This is an HTML comment, but it looks like a CDATA node.
-	 *
-	 * @since 6.5.0
-	 */
-	const COMMENT_AS_CDATA_LOOKALIKE = 'COMMENT_AS_CDATA_LOOKALIKE';
-
-	/**
-	 * Indicates that a comment was created when encountering
-	 * normative HTML comment syntax.
-	 *
-	 * Example:
-	 *
-	 *     <!-- this is a comment -->
-	 *
-	 * @since 6.5.0
-	 */
-	const COMMENT_AS_HTML_COMMENT = 'COMMENT_AS_HTML_COMMENT';
-
-	/**
-	 * Indicates that a comment would be parsed as a Processing
-	 * Instruction node, were they to exist within HTML.
-	 *
-	 * Example:
-	 *
-	 *     <?wp __( 'Like' ) ?>
-	 *
-	 * This is an HTML comment, but it looks like a CDATA node.
-	 *
-	 * @since 6.5.0
-	 */
-	const COMMENT_AS_PI_NODE_LOOKALIKE = 'COMMENT_AS_PI_NODE_LOOKALIKE';
-
-	/**
-	 * Indicates that a comment was created when encountering invalid
-	 * HTML input, a so-called "bogus comment."
-	 *
-	 * Example:
-	 *
-	 *     <?nothing special>
-	 *     <!{nothing special}>
-	 *
-	 * @since 6.5.0
-	 */
-	const COMMENT_AS_INVALID_HTML = 'COMMENT_AS_INVALID_HTML';
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php
deleted file mode 100644
index 1be784e6e84a53..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php
+++ /dev/null
@@ -1,64 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Text_Replacement class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.2.0
- */
-
-/**
- * Core class used by the HTML tag processor as a data structure for replacing
- * existing content from start to end, allowing to drastically improve performance.
- *
- * This class is for internal usage of the WP_HTML_Tag_Processor class.
- *
- * @access private
- * @since 6.2.0
- * @since 6.5.0 Replace `end` with `length` to more closely match `substr()`.
- *
- * @see WP_HTML_Tag_Processor
- */
-class Gutenberg_HTML_Text_Replacement_6_7 {
-	/**
-	 * Byte offset into document where replacement span begins.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var int
-	 */
-	public $start;
-
-	/**
-	 * Byte length of span being replaced.
-	 *
-	 * @since 6.5.0
-	 *
-	 * @var int
-	 */
-	public $length;
-
-	/**
-	 * Span of text to insert in document to replace existing content from start to end.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @var string
-	 */
-	public $text;
-
-	/**
-	 * Constructor.
-	 *
-	 * @since 6.2.0
-	 *
-	 * @param int    $start  Byte offset into document where replacement span begins.
-	 * @param int    $length Byte length of span in document being replaced.
-	 * @param string $text   Span of text to insert in document to replace existing content from start to end.
-	 */
-	public function __construct( int $start, int $length, string $text ) {
-		$this->start  = $start;
-		$this->length = $length;
-		$this->text   = $text;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php
deleted file mode 100644
index 95adb54f69b081..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Token class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used by the HTML processor during HTML parsing
- * for referring to tokens in the input HTML string.
- *
- * This class is designed for internal use by the HTML processor.
- *
- * @since 6.4.0
- *
- * @access private
- *
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Token_6_7 {
-	/**
-	 * Name of bookmark corresponding to source of token in input HTML string.
-	 *
-	 * Having a bookmark name does not imply that the token still exists. It
-	 * may be that the source token and underlying bookmark was wiped out by
-	 * some modification to the source HTML.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @var string
-	 */
-	public $bookmark_name = null;
-
-	/**
-	 * Name of node; lowercase names such as "marker" are not HTML elements.
-	 *
-	 * For HTML elements/tags this value should come from WP_HTML_Processor::get_tag().
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see WP_HTML_Processor::get_tag()
-	 *
-	 * @var string
-	 */
-	public $node_name = null;
-
-	/**
-	 * Whether node contains the self-closing flag.
-	 *
-	 * A node may have a self-closing flag when it shouldn't. This value
-	 * only reports if the flag is present in the original HTML.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @see https://html.spec.whatwg.org/#self-closing-flag
-	 *
-	 * @var bool
-	 */
-	public $has_self_closing_flag = false;
-
-	/**
-	 * Called when token is garbage-collected or otherwise destroyed.
-	 *
-	 * @var callable|null
-	 */
-	public $on_destroy = null;
-
-	/**
-	 * Constructor - creates a reference to a token in some external HTML string.
-	 *
-	 * @since 6.4.0
-	 *
-	 * @param string        $bookmark_name         Name of bookmark corresponding to location in HTML where token is found.
-	 * @param string        $node_name             Name of node token represents; if uppercase, an HTML element; if lowercase, a special value like "marker".
-	 * @param bool          $has_self_closing_flag Whether the source token contains the self-closing flag, regardless of whether it's valid.
-	 * @param callable|null $on_destroy            Optional. Function to call when destroying token, useful for releasing the bookmark.
-	 */
-	public function __construct( string $bookmark_name, string $node_name, bool $has_self_closing_flag, ?callable $on_destroy = null ) {
-		$this->bookmark_name         = $bookmark_name;
-		$this->node_name             = $node_name;
-		$this->has_self_closing_flag = $has_self_closing_flag;
-		$this->on_destroy            = $on_destroy;
-	}
-
-	/**
-	 * Destructor.
-	 *
-	 * @since 6.4.0
-	 */
-	public function __destruct() {
-		if ( is_callable( $this->on_destroy ) ) {
-			call_user_func( $this->on_destroy, $this->bookmark_name );
-		}
-	}
-
-	/**
-	 * Wakeup magic method.
-	 *
-	 * @since 6.4.2
-	 */
-	public function __wakeup() {
-		throw new \LogicException( __CLASS__ . ' should never be unserialized' );
-	}
-}
diff --git a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php b/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php
deleted file mode 100644
index 2de4c0b98d746c..00000000000000
--- a/lib/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php
+++ /dev/null
@@ -1,115 +0,0 @@
-<?php
-/**
- * HTML API: WP_HTML_Unsupported_Exception class
- *
- * @package WordPress
- * @subpackage HTML-API
- * @since 6.4.0
- */
-
-/**
- * Core class used by the HTML processor during HTML parsing
- * for indicating that a given operation is unsupported.
- *
- * This class is designed for internal use by the HTML processor.
- *
- * The HTML API aims to operate in compliance with the HTML5
- * specification, but does not implement the full specification.
- * In cases where it lacks support it should not cause breakage
- * or unexpected behavior. In the cases where it recognizes that
- * it cannot proceed, this class is used to abort from any
- * operation and signify that the given HTML cannot be processed.
- *
- * @since 6.4.0
- * @since 6.7.0 Gained contextual information for use in debugging parse failures.
- *
- * @access private
- *
- * @see WP_HTML_Processor
- */
-class Gutenberg_HTML_Unsupported_Exception_6_7 extends Exception {
-	/**
-	 * Name of the matched token when the exception was raised,
-	 * if matched on a token.
-	 *
-	 * This does not imply that the token itself was unsupported, but it
-	 * may have been the case that the token triggered part of the HTML
-	 * parsing that isn't supported, such as the adoption agency algorithm.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var string
-	 */
-	public $token_name;
-
-	/**
-	 * Number of bytes into the input HTML document where the parser was
-	 * parsing when the exception was raised.
-	 *
-	 * Use this to reconstruct context for the failure.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var int
-	 */
-	public $token_at;
-
-	/**
-	 * Full raw text of the matched token when the exception was raised,
-	 * if matched on a token.
-	 *
-	 * Whereas the `$token_name` will be normalized, this contains the full
-	 * raw text of the token, including original casing, duplicated attributes,
-	 * and other syntactic variations that are normally abstracted in the HTML API.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var string
-	 */
-	public $token;
-
-	/**
-	 * Stack of open elements when the exception was raised.
-	 *
-	 * Use this to trace the parsing circumstances which led to the exception.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var string[]
-	 */
-	public $stack_of_open_elements = array();
-
-	/**
-	 * List of active formatting elements when the exception was raised.
-	 *
-	 * Use this to trace the parsing circumstances which led to the exception.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @var string[]
-	 */
-	public $active_formatting_elements = array();
-
-	/**
-	 * Constructor function.
-	 *
-	 * @since 6.7.0
-	 *
-	 * @param string   $message                    Brief message explaining what is unsupported, the reason this exception was raised.
-	 * @param string   $token_name                 Normalized name of matched token when this exception was raised.
-	 * @param int      $token_at                   Number of bytes into source HTML document where matched token starts.
-	 * @param string   $token                      Full raw text of matched token when this exception was raised.
-	 * @param string[] $stack_of_open_elements     Stack of open elements when this exception was raised.
-	 * @param string[] $active_formatting_elements List of active formatting elements when this exception was raised.
-	 */
-	public function __construct( string $message, string $token_name, int $token_at, string $token, array $stack_of_open_elements, array $active_formatting_elements ) {
-		parent::__construct( $message );
-
-		$this->token_name = $token_name;
-		$this->token_at   = $token_at;
-		$this->token      = $token;
-
-		$this->stack_of_open_elements     = $stack_of_open_elements;
-		$this->active_formatting_elements = $active_formatting_elements;
-	}
-}
diff --git a/lib/compat/wordpress-6.7/post-formats.php b/lib/compat/wordpress-6.7/post-formats.php
deleted file mode 100644
index d3de5b83957e29..00000000000000
--- a/lib/compat/wordpress-6.7/post-formats.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<?php
-/**
- * Shims for changes to post formats until they are merged in all
- * versions of WordPress which Gutenberg supports.
- *
- * @package gutenberg
- */
-
-/**
- * Registers the extension of the WP_REST_Posts_Controller class,
- * to add support for post formats.
- */
-function gutenberg_post_format_rest_posts_controller( $args ) {
-	/**
-	 * This hook runs before support values are available via `post_type_supports`.
-	 * Check registration arguments for REST API controller override.
-	 */
-	if ( ! empty( $args['supports'] ) && in_array( 'post-formats', $args['supports'], true ) ) {
-		$args['rest_controller_class'] = 'Gutenberg_REST_Posts_Controller_6_7';
-	}
-
-	return $args;
-}
-add_filter( 'register_post_type_args', 'gutenberg_post_format_rest_posts_controller', 10 );
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
deleted file mode 100644
index 2b53e6865dfa9b..00000000000000
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ /dev/null
@@ -1,161 +0,0 @@
-<?php
-/**
- * PHP and WordPress configuration compatibility functions for the Gutenberg
- * editor plugin changes related to REST API.
- *
- * @package gutenberg
- */
-
-if ( ! defined( 'ABSPATH' ) ) {
-	die( 'Silence is golden.' );
-}
-
-/**
- * Update the preload paths registered in Core (`site-editor.php` or `edit-form-blocks.php`).
- *
- * @param array                   $paths REST API paths to preload.
- * @param WP_Block_Editor_Context $context Current block editor context.
- * @return array Filtered preload paths.
- */
-function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
-	if ( 'core/edit-site' === $context->name ) {
-		// Fixes post type name. It should be `type/wp_template_part`.
-		$parts_key = array_search( '/wp/v2/types/wp_template-part?context=edit', $paths, true );
-		if ( false !== $parts_key ) {
-			$paths[ $parts_key ] = '/wp/v2/types/wp_template_part?context=edit';
-		}
-
-		$page_options_path = array( rest_get_route_for_post_type_items( 'page' ), 'OPTIONS' );
-		$page_options_key  = array_search( $page_options_path, $paths, true );
-		if ( false === $page_options_key ) {
-			$paths[] = $page_options_path;
-		}
-	}
-
-	if ( 'core/edit-post' === $context->name ) {
-		$reusable_blocks_key = array_search(
-			add_query_arg(
-				array(
-					'context'  => 'edit',
-					'per_page' => -1,
-				),
-				rest_get_route_for_post_type_items( 'wp_block' )
-			),
-			$paths,
-			true
-		);
-
-		if ( false !== $reusable_blocks_key ) {
-			unset( $paths[ $reusable_blocks_key ] );
-		}
-	}
-
-	// Preload theme and global styles paths.
-	if ( 'core/edit-site' === $context->name || 'core/edit-post' === $context->name ) {
-		$active_theme     = get_stylesheet();
-		$global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
-		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '?context=view';
-		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '/variations?context=view';
-		$paths[]          = array( '/wp/v2/global-styles/' . $global_styles_id, 'OPTIONS' );
-
-		// Remove duplicate or unnecessary global styles paths.
-		$excluded_paths   = array();
-		$excluded_paths[] = '/wp/v2/global-styles/themes/' . $active_theme;
-		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id;
-		foreach ( $paths as $key => $path ) {
-			if ( in_array( $path, $excluded_paths, true ) ) {
-				unset( $paths[ $key ] );
-			}
-		}
-	}
-
-	return $paths;
-}
-add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );
-
-if ( ! function_exists( 'wp_api_template_registry' ) ) {
-	/**
-	 * Hook in to the template and template part post types and modify the rest
-	 * endpoint to include modifications to read templates from the
-	 * BlockTemplatesRegistry.
-	 *
-	 * @param array  $args Current registered post type args.
-	 * @param string $post_type Name of post type.
-	 *
-	 * @return array
-	 */
-	function wp_api_template_registry( $args, $post_type ) {
-		if ( 'wp_template' === $post_type || 'wp_template_part' === $post_type ) {
-			$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_7';
-		}
-		return $args;
-	}
-}
-add_filter( 'register_post_type_args', 'wp_api_template_registry', 10, 2 );
-
-/**
- * Adds `plugin` fields to WP_REST_Templates_Controller class.
- */
-function gutenberg_register_wp_rest_templates_controller_plugin_field() {
-
-	register_rest_field(
-		'wp_template',
-		'plugin',
-		array(
-			'get_callback'    => function ( $template_object ) {
-				if ( $template_object ) {
-					$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $template_object['slug'] );
-					if ( $registered_template ) {
-						return $registered_template->plugin;
-					}
-				}
-
-				return;
-			},
-			'update_callback' => null,
-			'schema'          => array(
-				'type'        => 'string',
-				'description' => __( 'Plugin that registered the template.', 'gutenberg' ),
-				'readonly'    => true,
-				'context'     => array( 'view', 'edit', 'embed' ),
-			),
-		)
-	);
-}
-add_action( 'rest_api_init', 'gutenberg_register_wp_rest_templates_controller_plugin_field' );
-
-// The `get_user` function was introduced in WP 6.7.
-if ( ! function_exists( 'get_user' ) ) {
-	/**
-	 * Overrides the default 'WP_REST_Server' class.
-	 *
-	 * @return string The name of the custom server class.
-	 */
-	function gutenberg_override_default_rest_server() {
-		return 'Gutenberg_REST_Server';
-	}
-	add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );
-}
-
-
-/**
- * Filters the arguments for registering a wp_global_styles post type.
- * Note when syncing to Core: the capabilities should be updates for `wp_global_styles` in the wp-includes/post.php.
- *
- * @since 6.7.0
- *
- * @param array  $args      Array of arguments for registering a post type.
- *                          See the register_post_type() function for accepted arguments.
- * @param string $post_type Post type key.
- *
- * @return array Array of arguments for registering a post type.
- */
-function gutenberg_register_post_type_args_for_wp_global_styles( $args, $post_type ) {
-	if ( 'wp_global_styles' === $post_type ) {
-		$args['capabilities']['read'] = 'edit_posts';
-	}
-
-	return $args;
-}
-
-add_filter( 'register_post_type_args', 'gutenberg_register_post_type_args_for_wp_global_styles', 10, 2 );
diff --git a/lib/compat/wordpress-6.7/script-modules.php b/lib/compat/wordpress-6.7/script-modules.php
deleted file mode 100644
index 2282a3d4bd5acd..00000000000000
--- a/lib/compat/wordpress-6.7/script-modules.php
+++ /dev/null
@@ -1,147 +0,0 @@
-<?php
-
-/**
- * Print data associated with Script Modules in Script tags.
- *
- * This embeds data in the page HTML so that it is available on page load.
- *
- * Data can be associated with a given Script Module by using the
- * `script_module_data_{$module_id}` filter.
- *
- * The data for a given Script Module will be JSON serialized in a script tag with an ID
- * like `wp-script-module-data-{$module_id}`.
- */
-function gutenberg_print_script_module_data(): void {
-	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
-	$get_marked_for_enqueue->setAccessible( true );
-	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
-	$get_import_map->setAccessible( true );
-
-	$modules = array();
-	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
-		$modules[ $id ] = true;
-	}
-	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
-		$modules[ $id ] = true;
-	}
-
-	foreach ( array_keys( $modules ) as $module_id ) {
-		/**
-		 * Filters data associated with a given Script Module.
-		 *
-		 * Script Modules may require data that is required for initialization or is essential to
-		 * have immediately available on page load. These are suitable use cases for this data.
-		 *
-		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
-		 *
-		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
-		 *
-		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
-		 * with an ID like `wp-script-module-data-{$module_id}`.
-		 *
-		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
-		 * the data is associated with.
-		 *
-		 * @param array $data The data that should be associated with the array.
-		 */
-		$data = apply_filters( "script_module_data_{$module_id}", array() );
-
-		if ( is_array( $data ) && ! empty( $data ) ) {
-			/*
-			 * This data will be printed as JSON inside a script tag like this:
-			 *   <script type="application/json"></script>
-			 *
-			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
-			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
-			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
-			 *
-			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
-			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
-			 *
-			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
-			 *
-			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
-			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
-			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
-			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
-			 *
-			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
-			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
-			 * be escaped to avoid encoding issues.
-			 *
-			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
-			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
-			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
-			 */
-			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
-			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
-				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
-			}
-
-			wp_print_inline_script_tag(
-				wp_json_encode( $data, $json_encode_flags ),
-				array(
-					'type' => 'application/json',
-					'id'   => "wp-script-module-data-{$module_id}",
-				)
-			);
-		}
-	}
-}
-
-add_action(
-	'after_setup_theme',
-	function () {
-		if ( ! has_action( 'wp_footer', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
-			add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
-		}
-
-		if ( ! has_action( 'admin_print_footer_scripts', array( wp_script_modules(), 'print_script_module_data' ) ) ) {
-			add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );
-		}
-	},
-	20
-);
-
-/**
- * Prints HTML for the a11y Script Module.
- *
- * a11y relies on some DOM elements to use as ARIA live regions.
- * Ideally, these elements are part of the initial HTML of the page
- * so that accessibility tools can find them and observe updates.
- */
-function gutenberg_a11y_script_module_html() {
-	$a11y_module_available = false;
-
-	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
-	$get_marked_for_enqueue->setAccessible( true );
-	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
-	$get_import_map->setAccessible( true );
-
-	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
-		if ( '@wordpress/a11y' === $id ) {
-			$a11y_module_available = true;
-			break;
-		}
-	}
-	if ( ! $a11y_module_available ) {
-		foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
-			if ( '@wordpress/a11y' === $id ) {
-				$a11y_module_available = true;
-				break;
-			}
-		}
-	}
-	if ( ! $a11y_module_available ) {
-		return;
-	}
-	echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
-		. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications', 'default' ) . '</p>'
-		. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
-		. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
-		. '</div>';
-}
-if ( ! method_exists( 'WP_Script_Modules', 'print_a11y_script_module_html' ) ) {
-	add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
-	add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );
-}
diff --git a/lib/compat/wordpress-6.8/admin-bar.php b/lib/compat/wordpress-6.8/admin-bar.php
deleted file mode 100644
index 9fbc840d9fa084..00000000000000
--- a/lib/compat/wordpress-6.8/admin-bar.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-/**
- * Updates the Edit Site link in the admin bar to point to the top level of the Site Editor.
- * Removes the use of the $_wp_current_template_id global and the query args.
- * Displays the link while in the admin area.
- * Changes the capitalization of the link text to match WP 6.8: https://core.trac.wordpress.org/ticket/62971
- *
- * Note: Backports into wp-includes\admin-bar.php wp_admin_bar_edit_site_menu()
- *
- * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
- */
-function gutenberg_wp_admin_bar_edit_site_menu( $wp_admin_bar ) {
-	// Don't show if a block theme is not activated.
-	if ( ! wp_is_block_theme() ) {
-		return;
-	}
-
-	// Don't show for users who can't edit theme options.
-	if ( ! current_user_can( 'edit_theme_options' ) ) {
-		return;
-	}
-
-	$wp_admin_bar->add_node(
-		array(
-			'id'    => 'site-editor',
-			'title' => __( 'Edit Site' ),
-			'href'  => admin_url( 'site-editor.php' ),
-		)
-	);
-}
-
-add_action( 'admin_bar_menu', 'gutenberg_wp_admin_bar_edit_site_menu', 41 );
diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php
index ba6d23b2486b84..34f2a16947d785 100644
--- a/lib/compat/wordpress-6.8/blocks.php
+++ b/lib/compat/wordpress-6.8/blocks.php
@@ -26,7 +26,7 @@
 	 *                               Default: 'insert_hooked_blocks'.
 	 * @return string The serialized markup.
 	 */
-	function apply_block_hooks_to_content_from_post_object( $content, WP_Post $post = null, $callback = 'insert_hooked_blocks' ) {
+	function apply_block_hooks_to_content_from_post_object( $content, $post = null, $callback = 'insert_hooked_blocks' ) {
 		// Default to the current post if no context is provided.
 		if ( null === $post ) {
 			$post = get_post();
diff --git a/lib/compat/wordpress-6.8/site-editor.php b/lib/compat/wordpress-6.8/site-editor.php
index 82ac118b013c16..91c6ddfac7040a 100644
--- a/lib/compat/wordpress-6.8/site-editor.php
+++ b/lib/compat/wordpress-6.8/site-editor.php
@@ -27,7 +27,7 @@ function ( $settings ) {
  */
 function gutenberg_get_site_editor_redirection() {
 	global $pagenow;
-	if ( 'site-editor.php' !== $pagenow || isset( $_REQUEST['p'] ) || ! $_SERVER['QUERY_STRING'] ) {
+	if ( 'site-editor.php' !== $pagenow || isset( $_REQUEST['p'] ) || empty( $_SERVER['QUERY_STRING'] ) ) {
 		return false;
 	}
 
diff --git a/lib/compat/wordpress-6.9/rest-api.php b/lib/compat/wordpress-6.9/rest-api.php
new file mode 100644
index 00000000000000..d363f5fc7b6df4
--- /dev/null
+++ b/lib/compat/wordpress-6.9/rest-api.php
@@ -0,0 +1,31 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds export theme link relation to the block theme responses.
+ *
+ * @param WP_REST_Response $response The response object.
+ * @param WP_Theme         $theme    Theme object used to create response.
+ * @return WP_REST_Response Modified response object.
+ */
+function gutenberg_rest_theme_export_link_rel( $response, $theme ) {
+	if ( ! empty( $response->get_links() ) && $theme->is_block_theme() ) {
+		$response->add_link(
+			'https://api.w.org/export-theme',
+			rest_url( 'wp-block-editor/v1/export' ),
+			array(
+				'targetHints' => array(
+					'allow' => current_user_can( 'export' ) ? array( 'GET' ) : array(),
+				),
+			)
+		);
+	}
+
+	return $response;
+}
+add_filter( 'rest_prepare_theme', 'gutenberg_rest_theme_export_link_rel', 10, 2 );
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 5b36c32b3c8296..7c7c8ff88176e5 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -25,9 +25,6 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}
-	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
-		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-comment', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockComment = true', 'before' );
 	}
diff --git a/lib/experimental/full-page-client-side-navigation.php b/lib/experimental/full-page-client-side-navigation.php
deleted file mode 100644
index 621502912a668a..00000000000000
--- a/lib/experimental/full-page-client-side-navigation.php
+++ /dev/null
@@ -1,101 +0,0 @@
-<?php
-/**
- * Registers full page client-side navigation option using the Interactivity API and adds the necessary directives.
- */
-
-/**
- * Enqueue the interactivity router script.
- */
-function _gutenberg_enqueue_interactivity_router() {
-	// Set the navigation mode to full page client-side navigation.
-	wp_interactivity_config( 'core/router', array( 'navigationMode' => 'fullPage' ) );
-	wp_enqueue_script_module( '@wordpress/interactivity-router' );
-}
-
-add_action( 'wp_enqueue_scripts', '_gutenberg_enqueue_interactivity_router' );
-
-/**
- * Set enhancedPagination attribute for query loop when the experiment is enabled.
- *
- * @param array $parsed_block The parsed block.
- *
- * @return array The same parsed block with the modified attribute.
- */
-function _gutenberg_add_enhanced_pagination_to_query_block( $parsed_block ) {
-	if ( 'core/query' !== $parsed_block['blockName'] ) {
-		return $parsed_block;
-	}
-
-	$parsed_block['attrs']['enhancedPagination'] = true;
-	return $parsed_block;
-}
-
-add_filter( 'render_block_data', '_gutenberg_add_enhanced_pagination_to_query_block' );
-
-/**
- * Adds client-side navigation directives to BODY tag.
- *
- * Note: This should probably be done per site, not by default when this option is enabled.
- *
- * @param string $response_body The response body.
- *
- * @return string The rendered template with modified BODY attributes.
- */
-function _gutenberg_add_client_side_navigation_directives( $response_body ) {
-	$is_html_content_type = false;
-	foreach ( headers_list() as $header ) {
-		$header_parts = preg_split( '/\s*[:;]\s*/', strtolower( $header ) );
-		if ( count( $header_parts ) >= 2 && 'content-type' === $header_parts[0] ) {
-			$is_html_content_type = in_array( $header_parts[1], array( 'text/html', 'application/xhtml+xml' ), true );
-		}
-	}
-	if ( ! $is_html_content_type ) {
-		return $response_body;
-	}
-
-	$p = new WP_HTML_Tag_Processor( $response_body );
-	if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
-		$p->set_attribute( 'data-wp-interactive', 'core/experimental' );
-		$p->set_attribute( 'data-wp-context', '{}' );
-		$response_body = $p->get_updated_html();
-	}
-	return $response_body;
-}
-
-// TODO: Explore moving this to the server directive processing.
-add_filter( 'gutenberg_template_output_buffer', '_gutenberg_add_client_side_navigation_directives' );
-
-/**
- * Starts output buffering at the end of the 'template_include' filter.
- *
- * This is to implement #43258 in core.
- *
- * This is a hack which would eventually be replaced with something like this in wp-includes/template-loader.php:
- *
- *          $template = apply_filters( 'template_include', $template );
- *     +    ob_start( 'wp_template_output_buffer_callback' );
- *          if ( $template ) {
- *              include $template;
- *          } elseif ( current_user_can( 'switch_themes' ) ) {
- *
- * @link https://core.trac.wordpress.org/ticket/43258
- *
- * @param string $passthrough Value for the template_include filter which is passed through.
- *
- * @return string Unmodified value of $passthrough.
- */
-function _gutenberg_buffer_template_output( string $passthrough ): string {
-	ob_start(
-		static function ( string $output ): string {
-			/**
-			 * Filters the template output buffer prior to sending to the client.
-			 *
-			 * @param string $output Output buffer.
-			 * @return string Filtered output buffer.
-			 */
-			return (string) apply_filters( 'gutenberg_template_output_buffer', $output );
-		}
-	);
-	return $passthrough;
-}
-add_filter( 'template_include', '_gutenberg_buffer_template_output', PHP_INT_MAX );
diff --git a/lib/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php b/lib/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php
new file mode 100644
index 00000000000000..8dcef326b0e35d
--- /dev/null
+++ b/lib/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php
@@ -0,0 +1,78 @@
+<?php
+/**
+ * Interactivity API: Experimental full-page client-side navigation.
+ *
+ * @package    Gutenberg
+ * @subpackage Interactivity API
+ */
+
+if ( ! class_exists( 'Gutenberg_Interactivity_API_Full_Page_Navigation' ) ) {
+
+	/**
+	 * Class Gutenberg_Interactivity_API_Full_Page_Navigation.
+	 */
+	class Gutenberg_Interactivity_API_Full_Page_Navigation {
+
+		private static $instance = null;
+
+		public static function instance() {
+			if ( null === self::$instance ) {
+				self::$instance = new Gutenberg_Interactivity_API_Full_Page_Navigation();
+			}
+			return self::$instance;
+		}
+
+		public function __construct() {
+			add_action( 'wp_head', array( $this, 'buffer_start' ) );
+			add_action( 'wp_footer', array( $this, 'buffer_end' ), 8 );
+			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_script_modules' ) );
+		}
+
+		/**
+		 * Enqueues the required script modules.
+		 */
+		public function enqueue_script_modules() {
+			wp_enqueue_script_module(
+				'@wordpress/interactivity-router/full-page'
+			);
+		}
+
+		/**
+		 * Starts output buffering at the end of the 'wp_head' action, adding the
+		 * required directives for client-side navigation to the BODY tags when the
+		 * buffer is flushed.
+		 */
+		public function buffer_start() {
+			ob_start( array( $this, 'add_directives_to_body' ) );
+		}
+
+		/**
+		 * Flushes the output buffer at the end of the 'wp_footer' action.
+		 */
+		public function buffer_end() {
+			ob_end_flush();
+		}
+
+		/**
+		 * Adds client-side navigation directives to BODY tag in the passed output
+		 * buffer.
+		 *
+		 * Note: This should probably be done per site, not by default when this option
+		 * is enabled.
+		 *
+		 * @param string $buffer Passed output buffer.
+		 *
+		 * @return string The same HTML with modified BODY attributes.
+		 */
+		public function add_directives_to_body( $buffer ) {
+			$p = new WP_HTML_Tag_Processor( $buffer );
+			if ( $p->next_tag( array( 'tag_name' => 'BODY' ) ) ) {
+				$p->set_attribute( 'data-wp-interactive', true );
+				$p->set_attribute( 'data-wp-router-region', 'core/body' );
+				return $p->get_updated_html();
+			} else {
+				return $buffer;
+			}
+		}
+	}
+}
diff --git a/lib/experimental/navigation-theme-opt-in.php b/lib/experimental/navigation-theme-opt-in.php
index 27dbabaf234486..b0c1157e4b733f 100644
--- a/lib/experimental/navigation-theme-opt-in.php
+++ b/lib/experimental/navigation-theme-opt-in.php
@@ -179,7 +179,7 @@ static function ( $menu_item ) {
  *
  * @param array $menu_items The menu items to convert, sorted by each menu item's menu order.
  * @param array $menu_items_by_parent_id All menu items, indexed by their parent's ID.
-
+ *
  * @return array Updated menu items, sorted by each menu item's menu order.
  */
 function gutenberg_convert_menu_items_to_blocks(
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 9f55d50ea554aa..a2032eb99abdc5 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -176,26 +176,26 @@ function gutenberg_initialize_experiments_settings() {
 	);
 
 	add_settings_field(
-		'gutenberg-full-page-client-side-navigation',
-		__( 'iAPI: full page client side navigation', 'gutenberg' ),
+		'gutenberg-editor-write-mode',
+		__( 'Simplified site editing', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Enables full-page client-side navigation with the Interactivity API, updating HTML while preserving application state.', 'gutenberg' ),
-			'id'    => 'gutenberg-full-page-client-side-navigation',
+			'label' => __( 'Enables Write mode in the Site Editor for a simplified editing experience.', 'gutenberg' ),
+			'id'    => 'gutenberg-editor-write-mode',
 		)
 	);
 
 	add_settings_field(
-		'gutenberg-editor-write-mode',
-		__( 'Simplified site editing', 'gutenberg' ),
+		'gutenberg-full-page-client-side-navigation',
+		__( 'Interactivity API: Full-page client-side navigation', 'gutenberg' ),
 		'gutenberg_display_experiment_field',
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Enables Write mode in the Site Editor for a simplified editing experience.', 'gutenberg' ),
-			'id'    => 'gutenberg-editor-write-mode',
+			'label' => __( 'Enables full-page client-side navigation, powered by the Interactivity API.', 'gutenberg' ),
+			'id'    => 'gutenberg-full-page-client-side-navigation',
 		)
 	);
 
diff --git a/lib/load.php b/lib/load.php
index ffc0f6692ee0e6..fe896202319b24 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -35,16 +35,11 @@ function gutenberg_is_experiment_enabled( $name ) {
 		require_once __DIR__ . '/experimental/class-wp-rest-block-editor-settings-controller.php';
 	}
 
-	// WordPress 6.7 compat.
-	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-posts-controller-6-7.php';
-	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-templates-controller-6-7.php';
-	require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-rest-server.php';
-	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
-
 	// WordPress 6.8 compat.
 	require __DIR__ . '/compat/wordpress-6.8/rest-api.php';
 
 	// WordPress 6.9 compat.
+	require __DIR__ . '/compat/wordpress-6.9/rest-api.php';
 	require __DIR__ . '/compat/wordpress-6.9/class-gutenberg-hierarchical-sort.php';
 
 	// Plugin specific code.
@@ -73,34 +68,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';
 require __DIR__ . '/compat/plugin/fonts.php';
 
-// The Token Map was created to support the HTML API. It must be loaded before it.
-require __DIR__ . '/compat/wordpress-6.7/class-gutenberg-token-map-6-7.php';
-
-// Type annotations were added in 6.7 so every file is updated.
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-active-formatting-elements-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-attribute-token-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-decoder-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-open-elements-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-span-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-stack-event-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-text-replacement-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-token-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-unsupported-exception-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-tag-processor-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-state-6-7.php';
-require __DIR__ . '/compat/wordpress-6.7/html-api/class-gutenberg-html-processor-6-7.php';
-
-// WordPress 6.7 compat.
-require __DIR__ . '/compat/wordpress-6.7/block-templates.php';
-require __DIR__ . '/compat/wordpress-6.7/blocks.php';
-require __DIR__ . '/compat/wordpress-6.7/block-bindings.php';
-require __DIR__ . '/compat/wordpress-6.7/script-modules.php';
-require __DIR__ . '/compat/wordpress-6.7/class-wp-block-templates-registry.php';
-require __DIR__ . '/compat/wordpress-6.7/compat.php';
-require __DIR__ . '/compat/wordpress-6.7/post-formats.php';
-
 // WordPress 6.8 compat.
-require __DIR__ . '/compat/wordpress-6.8/admin-bar.php';
+// Note: admin-bar.php (69271) was reverted in Gutenberg 20.8.0. See https://github.com/WordPress/gutenberg/pull/69974.
 require __DIR__ . '/compat/wordpress-6.8/preload.php';
 require __DIR__ . '/compat/wordpress-6.8/blocks.php';
 require __DIR__ . '/compat/wordpress-6.8/functions.php';
@@ -153,9 +122,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experiments-page.php';
 require __DIR__ . '/interactivity-api.php';
 require __DIR__ . '/block-template-utils.php';
-if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
-	require __DIR__ . '/experimental/full-page-client-side-navigation.php';
-}
 
 // Copied package PHP files.
 if ( is_dir( __DIR__ . '/../build/style-engine' ) ) {
@@ -190,3 +156,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( gutenberg_is_experiment_enabled( 'gutenberg-media-processing' ) ) {
 	require_once __DIR__ . '/experimental/media/load.php';
 }
+
+// Interactivity API full-page client-side navigation.
+if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
+	require __DIR__ . '/experimental/interactivity-api/class-gutenberg-interactivity-api-full-page-navigation.php';
+	Gutenberg_Interactivity_API_Full_Page_Navigation::instance();
+}
diff --git a/lib/theme.json b/lib/theme.json
index f638d9722ef67c..1fb6e895f27da1 100644
--- a/lib/theme.json
+++ b/lib/theme.json
@@ -65,7 +65,7 @@
 			"gradients": [
 				{
 					"name": "Vivid cyan blue to vivid purple",
-					"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+					"gradient": "linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)",
 					"slug": "vivid-cyan-blue-to-vivid-purple"
 				},
 				{
@@ -75,12 +75,12 @@
 				},
 				{
 					"name": "Luminous vivid amber to luminous vivid orange",
-					"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+					"gradient": "linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)",
 					"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
 				},
 				{
 					"name": "Luminous vivid orange to vivid red",
-					"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+					"gradient": "linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)",
 					"slug": "luminous-vivid-orange-to-vivid-red"
 				},
 				{
@@ -251,12 +251,12 @@
 				{
 					"name": "Outlined",
 					"slug": "outlined",
-					"shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
+					"shadow": "6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)"
 				},
 				{
 					"name": "Crisp",
 					"slug": "crisp",
-					"shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
+					"shadow": "6px 6px 0px rgb(0, 0, 0)"
 				}
 			]
 		},
@@ -333,6 +333,40 @@
 		}
 	},
 	"styles": {
+		"blocks": {
+			"core/button": {
+				"variations": {
+					"outline": {
+						"border": {
+							"width": "2px",
+							"style": "solid",
+							"color": "currentColor"
+						},
+						"color": {
+							"text": "currentColor",
+							"gradient": "transparent none"
+						},
+						"spacing": {
+							"padding": {
+								"top": "0.667em",
+								"right": "1.33em",
+								"bottom": "0.667em",
+								"left": "1.33em"
+							}
+						}
+					}
+				}
+			},
+			"core/site-logo": {
+				"variations": {
+					"rounded": {
+						"border": {
+							"radius": "9999px"
+						}
+					}
+				}
+			}
+		},
 		"elements": {
 			"button": {
 				"color": {
@@ -350,6 +384,10 @@
 				"typography": {
 					"fontSize": "inherit",
 					"fontFamily": "inherit",
+					"fontStyle": "inherit",
+					"fontWeight": "inherit",
+					"letterSpacing": "inherit",
+					"textTransform": "inherit",
 					"lineHeight": "inherit",
 					"textDecoration": "none"
 				},
@@ -371,40 +409,6 @@
 				"bottom": "0px",
 				"left": "0px"
 			}
-		},
-		"blocks": {
-			"core/button": {
-				"variations": {
-					"outline": {
-						"border": {
-							"width": "2px",
-							"style": "solid",
-							"color": "currentColor"
-						},
-						"color": {
-							"text": "currentColor",
-							"gradient": "transparent none"
-						},
-						"spacing": {
-							"padding": {
-								"top": "0.667em",
-								"right": "1.33em",
-								"bottom": "0.667em",
-								"left": "1.33em"
-							}
-						}
-					}
-				}
-			},
-			"core/site-logo": {
-				"variations": {
-					"rounded": {
-						"border": {
-							"radius": "9999px"
-						}
-					}
-				}
-			}
 		}
 	}
 }
diff --git a/package-lock.json b/package-lock.json
index 90b8a9fd716984..7a38e265981116 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "20.6.0-rc.1",
+	"version": "21.3.0-rc.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "20.6.0-rc.1",
+			"version": "21.3.0-rc.1",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"workspaces": [
@@ -4316,6 +4316,11 @@
 				"kuler": "^2.0.0"
 			}
 		},
+		"node_modules/@date-fns/tz": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+			"integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
+		},
 		"node_modules/@discoveryjs/json-ext": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -5124,32 +5129,42 @@
 			}
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz",
-			"integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==",
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
+			"integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/utils": "^0.1.1"
+				"@floating-ui/utils": "^0.2.10"
 			}
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.6.3",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
-			"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
+			"integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/core": "^1.0.0",
-				"@floating-ui/utils": "^0.2.0"
+				"@floating-ui/core": "^1.7.2",
+				"@floating-ui/utils": "^0.2.10"
 			}
 		},
-		"node_modules/@floating-ui/dom/node_modules/@floating-ui/utils": {
-			"version": "0.2.8",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
-			"license": "MIT"
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+			"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.1"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
 		},
 		"node_modules/@floating-ui/utils": {
-			"version": "0.1.6",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-			"integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+			"license": "MIT"
 		},
 		"node_modules/@formatjs/ecma402-abstract": {
 			"version": "2.2.4",
@@ -11331,12 +11346,6 @@
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
 			}
 		},
-		"node_modules/@remote-ui/rpc": {
-			"version": "1.4.5",
-			"resolved": "https://registry.npmjs.org/@remote-ui/rpc/-/rpc-1.4.5.tgz",
-			"integrity": "sha512-Cr+06niG/vmE4A9YsmaKngRuuVSWKMY42NMwtZfy+gctRWGu6Wj9BWuMJg5CEp+JTkRBPToqT5rqnrg1G/Wvow==",
-			"license": "MIT"
-		},
 		"node_modules/@samverschueren/stream-to-observable": {
 			"version": "0.3.1",
 			"resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz",
@@ -11436,34 +11445,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/@shopify/web-worker": {
-			"version": "6.4.0",
-			"resolved": "https://registry.npmjs.org/@shopify/web-worker/-/web-worker-6.4.0.tgz",
-			"integrity": "sha512-RvY1mgRyAqawFiYBvsBkek2pVK4GVpV9mmhWFCZXwx01usxXd2HMhKNTFeRYhSp29uoUcfBlKZAwCwQzt826tg==",
-			"license": "MIT",
-			"dependencies": {
-				"@remote-ui/rpc": "^1.2.5"
-			},
-			"engines": {
-				"node": ">=18.12.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0",
-				"webpack": "^5.38.0",
-				"webpack-virtual-modules": "^0.4.3 || ^0.5.0 || ^0.6.0"
-			},
-			"peerDependenciesMeta": {
-				"@babel/core": {
-					"optional": true
-				},
-				"webpack": {
-					"optional": true
-				},
-				"webpack-virtual-modules": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/@sideway/address": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -13225,6 +13206,12 @@
 			"resolved": "https://registry.npmjs.org/@tannin/postfix/-/postfix-1.1.0.tgz",
 			"integrity": "sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw=="
 		},
+		"node_modules/@tannin/sprintf": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@tannin/sprintf/-/sprintf-1.3.1.tgz",
+			"integrity": "sha512-3auu6Wqm4TR6gvOh1Dgh1d2k9+arNmu3T0JLiUJoJMgayeHr450OuWeZIMTE4CUuq51rwn/NI9S5InT0JuTxQw==",
+			"license": "MIT"
+		},
 		"node_modules/@testing-library/dom": {
 			"version": "9.3.4",
 			"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
@@ -19802,7 +19789,8 @@
 		"node_modules/colord": {
 			"version": "2.9.3",
 			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+			"license": "MIT"
 		},
 		"node_modules/colorette": {
 			"version": "1.4.0",
@@ -21762,6 +21750,11 @@
 				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
+		"node_modules/date-fns-jalali": {
+			"version": "4.1.0-0",
+			"resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+			"integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="
+		},
 		"node_modules/dateformat": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
@@ -22549,6 +22542,30 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/docker-compose": {
+			"version": "0.24.8",
+			"resolved": "https://registry.npmjs.org/docker-compose/-/docker-compose-0.24.8.tgz",
+			"integrity": "sha512-plizRs/Vf15H+GCVxq2EUvyPK7ei9b/cVesHvjnX4xaXjM9spHe2Ytq0BitndFgvTJ3E3NljPNUEl7BAN43iZw==",
+			"license": "MIT",
+			"dependencies": {
+				"yaml": "^2.2.2"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
+		"node_modules/docker-compose/node_modules/yaml": {
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+			"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+			"license": "ISC",
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14.6"
+			}
+		},
 		"node_modules/doctrine": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -26572,9 +26589,9 @@
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
 		},
 		"node_modules/gradient-parser": {
-			"version": "0.1.5",
-			"resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz",
-			"integrity": "sha512-+uPlcVbjrKOnTzvz0MjTj7BfACj8OmxIa1moIjJV7btvhUMSJk0D47RfDCgDrZE3dYMz9Cf5xKJwnrKLjUq0KQ==",
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-1.0.2.tgz",
+			"integrity": "sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -27266,9 +27283,9 @@
 			}
 		},
 		"node_modules/http-proxy-middleware": {
-			"version": "2.0.7",
-			"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-			"integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+			"integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
 			"license": "MIT",
 			"dependencies": {
 				"@types/http-proxy": "^1.17.8",
@@ -27427,9 +27444,10 @@
 			}
 		},
 		"node_modules/image-size": {
-			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
-			"integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/image-size/-/image-size-1.2.1.tgz",
+			"integrity": "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==",
+			"license": "MIT",
 			"dependencies": {
 				"queue": "6.0.2"
 			},
@@ -29754,17 +29772,6 @@
 				"querystring": "^0.2.0"
 			}
 		},
-		"node_modules/jsdom/node_modules/agent-base": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
-			"integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
-			"dependencies": {
-				"debug": "^4.3.4"
-			},
-			"engines": {
-				"node": ">= 14"
-			}
-		},
 		"node_modules/jsdom/node_modules/https-proxy-agent": {
 			"version": "7.0.5",
 			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
@@ -39498,6 +39505,35 @@
 				"react-dom": ">=16.8.0"
 			}
 		},
+		"node_modules/react-day-picker": {
+			"version": "9.7.0",
+			"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.7.0.tgz",
+			"integrity": "sha512-urlK4C9XJZVpQ81tmVgd2O7lZ0VQldZeHzNejbwLWZSkzHH498KnArT0EHNfKBOWwKc935iMLGZdxXPRISzUxQ==",
+			"dependencies": {
+				"@date-fns/tz": "1.2.0",
+				"date-fns": "4.1.0",
+				"date-fns-jalali": "4.1.0-0"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/sponsors/gpbl"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
+			}
+		},
+		"node_modules/react-day-picker/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
+			}
+		},
 		"node_modules/react-devtools-core": {
 			"version": "4.28.5",
 			"resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.5.tgz",
@@ -42957,7 +42993,8 @@
 		"node_modules/sprintf-js": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.1.tgz",
-			"integrity": "sha512-h/U+VScR2Ft+aXDjGTLtguUEIrYuOjTj79BAOElUvdahYMaaa7SNLjJpOIn+Uzt0hsgHfYvlbcno3e9yXOSo8Q=="
+			"integrity": "sha512-h/U+VScR2Ft+aXDjGTLtguUEIrYuOjTj79BAOElUvdahYMaaa7SNLjJpOIn+Uzt0hsgHfYvlbcno3e9yXOSo8Q==",
+			"dev": true
 		},
 		"node_modules/ssri": {
 			"version": "6.0.2",
@@ -45276,9 +45313,9 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.28.5",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.28.5.tgz",
-			"integrity": "sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==",
+			"version": "5.29.0",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz",
+			"integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==",
 			"license": "MIT",
 			"dependencies": {
 				"@fastify/busboy": "^2.0.0"
@@ -48659,7 +48696,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -48673,7 +48710,7 @@
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -48691,17 +48728,9 @@
 				"react": "^18.0.0"
 			}
 		},
-		"packages/annotations/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -48715,7 +48744,7 @@
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -48727,7 +48756,7 @@
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -48739,7 +48768,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"deepmerge": "^4.3.0",
@@ -48756,7 +48785,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "8.21.0",
+			"version": "8.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/core": "7.25.7",
@@ -48776,19 +48805,6 @@
 				"npm": ">=8.19.2"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.25.7.tgz",
-			"integrity": "sha512-12xfNeKNH7jubQNm7PAkzlLwEmCs1tfuX3UjIw6vP6QXi+leKh6+LyC/+Ed4EIQermwd58wsyh070yjDHFlNGg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/traverse": "^7.25.7",
-				"@babel/types": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/helper-create-class-features-plugin": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.7.tgz",
@@ -48865,84 +48881,6 @@
 				"node": ">=6.9.0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.7.tgz",
-			"integrity": "sha512-wxyWg2RYaSUYgmd9MR0FyRGyeOMQE/Uzr1wzd/g5cf5bwi9A4v6HFdDm7y1MgDtod/fLOSTZY6jDgV0xU9d5bA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.7.tgz",
-			"integrity": "sha512-Xwg6tZpLxc4iQjorYsyGMyfJE7nP5MV8t/Ka58BgiA7Jw0fRqQNcANlLfdJ/yvBt9z9LD2We+BEkT7vLqZRWng==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
-				"@babel/plugin-transform-optional-chaining": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.13.0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.7.tgz",
-			"integrity": "sha512-UVATLMidXrnH+GMUIuxq55nejlj02HP7F5ETyBONzP6G87fPBogG4CH6kxrSrdIuAjdwNO9VzyaYsrZPscWUrw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/traverse": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-import-assertions": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.7.tgz",
-			"integrity": "sha512-ZvZQRmME0zfJnDQnVBKYzHxXT7lYBB3Revz1GuS7oLXWMgqUPX4G+DDbT30ICClht9WKV34QVrZhSw6WdklwZQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-import-attributes": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.7.tgz",
-			"integrity": "sha512-AqVo+dguCgmpi/3mYBdu9lkngOBlQ2w2vnNpa6gfiCxQZLzV4ZbhsXitJ2Yblkoe1VQwtHSaNmIaGll/26YWRw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-syntax-typescript": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.7.tgz",
@@ -49020,39 +48958,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-class-properties": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.7.tgz",
-			"integrity": "sha512-mhyfEW4gufjIqYFo9krXHJ3ElbFLIze5IDp+wQTxoPd+mwFb1NxatNAwmv8Q8Iuxv7Zc+q8EkiMQwc9IhyGf4g==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-create-class-features-plugin": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-class-static-block": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.25.7.tgz",
-			"integrity": "sha512-rvUUtoVlkDWtDWxGAiiQj0aNktTPn3eFynBcMC2IhsXweehwgdI9ODe+XjWw515kEmv22sSOTp/rxIRuTiB7zg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-create-class-features-plugin": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-class-static-block": "^7.14.5"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.12.0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-classes": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.7.tgz",
@@ -49104,69 +49009,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-dotall-regex": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.7.tgz",
-			"integrity": "sha512-kXzXMMRzAtJdDEgQBLF4oaiT6ZCU3oWHgpARnTKDAqPkDJ+bs3NrZb310YYevR5QlRo3Kn7dzzIdHbZm1VzJdQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-duplicate-keys": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.7.tgz",
-			"integrity": "sha512-by+v2CjoL3aMnWDOyCIg+yxU9KXSRa9tN6MbqggH5xvymmr9p4AMjYkNlQy4brMceBnUyHZ9G8RnpvT8wP7Cfg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-dynamic-import": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.7.tgz",
-			"integrity": "sha512-UvcLuual4h7/GfylKm2IAA3aph9rwvAM2XBA0uPKU3lca+Maai4jBjjEVUS568ld6kJcgbouuumCBhMd/Yz17w==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-dynamic-import": "^7.8.3"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-exponentiation-operator": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.25.7.tgz",
-			"integrity": "sha512-yjqtpstPfZ0h/y40fAXRv2snciYr0OAoMXY/0ClC7tm4C/nG5NJKmIItlaYlLbIVAWNfrYuy9dq1bE0SbX0PEg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-builder-binary-assignment-operator-visitor": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-for-of": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.7.tgz",
@@ -49200,22 +49042,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-json-strings": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.7.tgz",
-			"integrity": "sha512-Ot43PrL9TEAiCe8C/2erAjXMeVSnE/BLEx6eyrKLNFCCw5jvhTHKyHxdI1pA0kz5njZRYAnMO2KObGqOCRDYSA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-json-strings": "^7.8.3"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-literals": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.7.tgz",
@@ -49231,22 +49057,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-logical-assignment-operators": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.7.tgz",
-			"integrity": "sha512-iImzbA55BjiovLyG2bggWS+V+OLkaBorNvc/yJoeeDQGztknRnDdYfp2d/UPmunZYEnZi6Lg8QcTmNMHOB0lGA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-member-expression-literals": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.7.tgz",
@@ -49262,22 +49072,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-amd": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.7.tgz",
-			"integrity": "sha512-CgselSGCGzjQvKzghCvDTxKHP3iooenLpJDO842ehn5D2G5fJB222ptnDwQho0WjEvg7zyoxb9P+wiYxiJX5yA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-module-transforms": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-commonjs": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.25.7.tgz",
@@ -49295,40 +49089,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-systemjs": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.7.tgz",
-			"integrity": "sha512-t9jZIvBmOXJsiuyOwhrIGs8dVcD6jDyg2icw1VL4A/g+FnWyJKwUfSSU2nwJuMV2Zqui856El9u+ElB+j9fV1g==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-module-transforms": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/helper-validator-identifier": "^7.25.7",
-				"@babel/traverse": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-modules-umd": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.7.tgz",
-			"integrity": "sha512-p88Jg6QqsaPh+EB7I9GJrIqi1Zt4ZBHUQtjw3z1bzEXcLh6GfPqzZJ6G+G1HBGKUNukT58MnKG7EN7zXQBCODw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-module-transforms": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.7.tgz",
@@ -49345,71 +49105,6 @@
 				"@babel/core": "^7.0.0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-new-target": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.7.tgz",
-			"integrity": "sha512-CfCS2jDsbcZaVYxRFo2qtavW8SpdzmBXC2LOI4oO0rP+JSRDxxF3inF4GcPsLgfb5FjkhXG5/yR/lxuRs2pySA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.7.tgz",
-			"integrity": "sha512-FbuJ63/4LEL32mIxrxwYaqjJxpbzxPVQj5a+Ebrc8JICV6YX8nE53jY+K0RZT3um56GoNWgkS2BQ/uLGTjtwfw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-numeric-separator": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.7.tgz",
-			"integrity": "sha512-8CbutzSSh4hmD+jJHIA8vdTNk15kAzOnFLVVgBSMGr28rt85ouT01/rezMecks9pkU939wDInImwCKv4ahU4IA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-numeric-separator": "^7.10.4"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-object-rest-spread": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.7.tgz",
-			"integrity": "sha512-1JdVKPhD7Y5PvgfFy0Mv2brdrolzpzSoUq2pr6xsR+m+3viGGeHEokFKsCgOkbeFOQxfB1Vt2F0cPJLRpFI4Zg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-compilation-targets": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-				"@babel/plugin-transform-parameters": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-object-super": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.7.tgz",
@@ -49426,39 +49121,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-optional-catch-binding": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.7.tgz",
-			"integrity": "sha512-m9obYBA39mDPN7lJzD5WkGGb0GO54PPLXsbcnj1Hyeu8mSRz7Gb4b1A6zxNX32ZuUySDK4G6it8SDFWD1nCnqg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-optional-chaining": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.7.tgz",
-			"integrity": "sha512-h39agClImgPWg4H8mYVAbD1qP9vClFbEjqoJmt87Zen8pjqK8FTPUwrOXAvqu5soytwxrLMd2fx2KSCp2CHcNg==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"@babel/helper-skip-transparent-expression-wrappers": "^7.25.7",
-				"@babel/plugin-syntax-optional-chaining": "^7.8.3"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-parameters": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.7.tgz",
@@ -49542,37 +49204,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-regenerator": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.7.tgz",
-			"integrity": "sha512-mgDoQCRjrY3XK95UuV60tZlFCQGXEtMg8H+IsW72ldw1ih1jZhzYXbJvghmAEpg5UVhhnCeia1CkGttUvCkiMQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7",
-				"regenerator-transform": "^0.15.2"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-reserved-words": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.7.tgz",
-			"integrity": "sha512-3OfyfRRqiGeOvIWSagcwUTVk2hXBsr/ww7bLn6TRTuXnexA+Udov2icFOxFX9abaj4l96ooYkcNN1qi2Zvqwng==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-runtime": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.7.tgz",
@@ -49654,21 +49285,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-typeof-symbol": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.7.tgz",
-			"integrity": "sha512-OmWmQtTHnO8RSUbL0NTdtpbZHeNTnm68Gj5pA4Y2blFNh+V4iZR68V1qL9cI37J21ZN7AaCnkfdHtLExQPf2uA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-typescript": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.25.7.tgz",
@@ -49688,37 +49304,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-escapes": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.7.tgz",
-			"integrity": "sha512-BN87D7KpbdiABA+t3HbVqHzKWUDN3dymLaTnPFAMyc8lV+KN3+YzNhVRNdinaCPA4AUqx7ubXbQ9shRjYBl3SQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-property-regex": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.7.tgz",
-			"integrity": "sha512-IWfR89zcEPQGB/iB408uGtSPlQd3Jpq11Im86vUgcmSTcoWAiQMCTOa2K2yNNqFJEBVICKhayctee65Ka8OB0w==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0-0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-regex": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.7.tgz",
@@ -49735,22 +49320,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"packages/babel-preset-default/node_modules/@babel/plugin-transform-unicode-sets-regex": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.7.tgz",
-			"integrity": "sha512-YRW8o9vzImwmh4Q3Rffd09bH5/hvY0pxg+1H1i0f7APoUeg12G7+HhLj9ZFNIrYkgBXhIijPJ+IXypN0hLTIbw==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/helper-create-regexp-features-plugin": "^7.25.7",
-				"@babel/helper-plugin-utils": "^7.25.7"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.0.0"
-			}
-		},
 		"packages/babel-preset-default/node_modules/@babel/preset-env": {
 			"version": "7.25.7",
 			"resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.7.tgz",
@@ -49887,7 +49456,7 @@
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "5.21.0",
+			"version": "6.3.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -49896,7 +49465,7 @@
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -49908,7 +49477,7 @@
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -49944,7 +49513,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "14.16.0",
+			"version": "15.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50045,7 +49614,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "9.21.0",
+			"version": "9.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50101,17 +49670,9 @@
 				"react-dom": "^18.0.0"
 			}
 		},
-		"packages/block-library/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -50123,7 +49684,7 @@
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
@@ -50136,7 +49697,7 @@
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "14.10.0",
+			"version": "15.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50180,17 +49741,9 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
 			"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
 		},
-		"packages/blocks/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -50199,7 +49752,7 @@
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50438,7 +49991,7 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "29.7.0",
+			"version": "30.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.15",
@@ -50449,7 +50002,7 @@
 				"@emotion/serialize": "^1.0.2",
 				"@emotion/styled": "^11.6.0",
 				"@emotion/utils": "^1.0.0",
-				"@floating-ui/react-dom": "^2.0.8",
+				"@floating-ui/react-dom": "2.0.8",
 				"@types/gradient-parser": "0.1.3",
 				"@types/highlight-words-core": "1.2.1",
 				"@use-gesture/react": "^10.3.1",
@@ -50477,13 +50030,14 @@
 				"deepmerge": "^4.3.0",
 				"fast-deep-equal": "^3.1.3",
 				"framer-motion": "^11.1.9",
-				"gradient-parser": "^0.1.5",
+				"gradient-parser": "1.0.2",
 				"highlight-words-core": "^1.2.2",
 				"is-plain-object": "^5.0.0",
 				"memize": "^2.1.0",
 				"path-to-regexp": "^6.2.1",
 				"re-resizable": "^6.4.0",
 				"react-colorful": "^5.3.1",
+				"react-day-picker": "^9.7.0",
 				"remove-accents": "^0.5.0",
 				"uuid": "^9.0.1"
 			},
@@ -50496,18 +50050,6 @@
 				"react-dom": "^18.0.0"
 			}
 		},
-		"packages/components/node_modules/@floating-ui/react-dom": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz",
-			"integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==",
-			"dependencies": {
-				"@floating-ui/dom": "^1.3.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
 		"packages/components/node_modules/@types/gradient-parser": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/@types/gradient-parser/-/gradient-parser-0.1.3.tgz",
@@ -50519,17 +50061,9 @@
 			"integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
 			"license": "MIT"
 		},
-		"packages/components/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50566,7 +50100,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50595,7 +50129,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50630,17 +50164,9 @@
 				"react-dom": "^18.0.0"
 			}
 		},
-		"packages/core-data/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.64.0",
+			"version": "4.70.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@inquirer/prompts": "^7.2.0",
@@ -50667,7 +50193,7 @@
 		},
 		"packages/create-block-interactive-template": {
 			"name": "@wordpress/create-block-interactive-template",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -50676,7 +50202,7 @@
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -50685,7 +50211,7 @@
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50723,7 +50249,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "10.21.0",
+			"version": "10.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50752,7 +50278,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50770,21 +50296,26 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "4.17.0",
+			"version": "5.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.15",
 				"@babel/runtime": "7.25.7",
+				"@wordpress/base-styles": "file:../base-styles",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
 				"@wordpress/data": "file:../data",
+				"@wordpress/date": "file:../date",
 				"@wordpress/element": "file:../element",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/primitives": "file:../primitives",
 				"@wordpress/private-apis": "file:../private-apis",
+				"@wordpress/url": "file:../url",
 				"@wordpress/warning": "file:../warning",
 				"clsx": "^2.1.1",
+				"date-fns": "^4.1.0",
+				"fast-deep-equal": "^3.1.3",
 				"remove-accents": "^0.5.0"
 			},
 			"engines": {
@@ -50792,12 +50323,23 @@
 				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
-				"react": "^18.0.0"
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			}
+		},
+		"packages/dataviews/node_modules/date-fns": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+			"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/kossnocorp"
 			}
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50812,7 +50354,7 @@
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"json2php": "^0.0.7"
@@ -50827,7 +50369,7 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50840,7 +50382,7 @@
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/core": "7.25.7",
@@ -50861,7 +50403,7 @@
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50874,7 +50416,7 @@
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -50886,7 +50428,7 @@
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "11.21.0",
+			"version": "11.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -50908,7 +50450,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"change-case": "^4.1.2",
@@ -50934,7 +50476,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "8.21.0",
+			"version": "8.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
@@ -50962,17 +50504,9 @@
 				"react-dom": "^18.0.0"
 			}
 		},
-		"packages/e2e-tests/node_modules/uuid": {
-			"version": "8.3.2",
-			"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-			"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-			"bin": {
-				"uuid": "dist/bin/uuid"
-			}
-		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "8.21.0",
+			"version": "8.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51019,7 +50553,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51082,7 +50616,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51125,7 +50659,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "14.21.0",
+			"version": "14.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51187,7 +50721,7 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51206,7 +50740,7 @@
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "10.21.0",
+			"version": "10.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@inquirer/prompts": "^7.2.0",
@@ -51230,32 +50764,9 @@
 				"npm": ">=8.19.2"
 			}
 		},
-		"packages/env/node_modules/docker-compose": {
-			"version": "0.24.2",
-			"resolved": "https://registry.npmjs.org/docker-compose/-/docker-compose-0.24.2.tgz",
-			"integrity": "sha512-2/WLvA7UZ6A2LDLQrYW0idKipmNBWhtfvrn2yzjC5PnHDzuFVj1zAZN6MJxVMKP0zZH8uzAK6OwVZYHGuyCmTw==",
-			"dependencies": {
-				"yaml": "^2.2.2"
-			},
-			"engines": {
-				"node": ">= 6.0.0"
-			}
-		},
-		"packages/env/node_modules/yaml": {
-			"version": "2.6.0",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
-			"integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
-			"license": "ISC",
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14"
-			}
-		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -51267,7 +50778,7 @@
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "22.7.0",
+			"version": "22.13.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/eslint-parser": "7.25.7",
@@ -51336,7 +50847,7 @@
 		},
 		"packages/fields": {
 			"name": "@wordpress/fields",
-			"version": "0.13.0",
+			"version": "0.19.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51378,7 +50889,7 @@
 		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51406,7 +50917,7 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -51418,7 +50929,7 @@
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -51430,14 +50941,14 @@
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "5.21.0",
+			"version": "6.0.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
+				"@tannin/sprintf": "^1.3.1",
 				"@wordpress/hooks": "file:../hooks",
 				"gettext-parser": "^1.3.1",
 				"memize": "^2.1.0",
-				"sprintf-js": "^1.1.1",
 				"tannin": "^1.2.0"
 			},
 			"bin": {
@@ -51450,7 +50961,7 @@
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "10.21.0",
+			"version": "10.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51464,7 +50975,7 @@
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.3.0",
@@ -51477,11 +50988,12 @@
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/a11y": "file:../a11y",
-				"@wordpress/interactivity": "file:../interactivity"
+				"@wordpress/interactivity": "file:../interactivity",
+				"es-module-lexer": "^1.5.4"
 			},
 			"engines": {
 				"node": ">=18.12.0",
@@ -51490,7 +51002,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "9.6.0",
+			"version": "9.12.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51518,7 +51030,7 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -51530,7 +51042,7 @@
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "8.21.0",
+			"version": "8.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51546,7 +51058,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "12.21.0",
+			"version": "12.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/jest-console": "file:../jest-console",
@@ -51563,7 +51075,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@axe-core/puppeteer": "^4.0.0",
@@ -51585,7 +51097,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51603,7 +51115,7 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51616,7 +51128,7 @@
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"execa": "^4.0.2",
@@ -51630,7 +51142,7 @@
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51653,7 +51165,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51670,7 +51182,7 @@
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51687,7 +51199,7 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -51699,7 +51211,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "9.21.0",
+			"version": "9.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51722,7 +51234,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51752,7 +51264,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51776,7 +51288,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/base-styles": "file:../base-styles",
@@ -51845,7 +51357,7 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -51857,7 +51369,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51883,7 +51395,7 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51896,7 +51408,7 @@
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -51908,7 +51420,7 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51925,7 +51437,7 @@
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -51938,7 +51450,7 @@
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -51950,7 +51462,7 @@
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@actions/core": "1.9.1",
@@ -51978,7 +51490,7 @@
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52134,7 +51646,7 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -52146,7 +51658,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52189,7 +51701,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "5.21.0",
+			"version": "5.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52216,7 +51728,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "7.21.0",
+			"version": "7.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52228,6 +51740,7 @@
 				"@wordpress/escape-html": "file:../escape-html",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/keycodes": "file:../keycodes",
+				"colord": "2.9.3",
 				"memize": "^2.1.0"
 			},
 			"engines": {
@@ -52240,7 +51753,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52261,7 +51774,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "30.14.0",
+			"version": "30.20.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/core": "7.25.7",
@@ -52334,8 +51847,14 @@
 			},
 			"peerDependencies": {
 				"@playwright/test": "^1.51.1",
+				"@wordpress/env": "^10.0.0",
 				"react": "^18.0.0",
 				"react-dom": "^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@wordpress/env": {
+					"optional": true
+				}
 			}
 		},
 		"packages/scripts/node_modules/ajv": {
@@ -52399,7 +51918,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "5.21.0",
+			"version": "6.3.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52425,7 +51944,7 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52438,7 +51957,7 @@
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "2.21.0",
+			"version": "2.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52451,7 +51970,7 @@
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "23.13.0",
+			"version": "23.19.0",
 			"license": "MIT",
 			"dependencies": {
 				"@stylistic/stylelint-plugin": "^3.0.1",
@@ -52463,7 +51982,8 @@
 				"npm": ">=8.19.2"
 			},
 			"peerDependencies": {
-				"stylelint": "^16.8.2"
+				"stylelint": "^16.8.2",
+				"stylelint-scss": "^6.4.0"
 			}
 		},
 		"packages/stylelint-config/node_modules/css-tree": {
@@ -52562,7 +52082,7 @@
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52583,7 +52103,7 @@
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
@@ -52595,7 +52115,7 @@
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "1.21.0",
+			"version": "1.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52608,11 +52128,10 @@
 		},
 		"packages/upload-media": {
 			"name": "@wordpress/upload-media",
-			"version": "0.6.0",
+			"version": "0.12.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@shopify/web-worker": "^6.4.0",
 				"@wordpress/api-fetch": "file:../api-fetch",
 				"@wordpress/blob": "file:../blob",
 				"@wordpress/compose": "file:../compose",
@@ -52635,7 +52154,7 @@
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52648,7 +52167,7 @@
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "6.21.0",
+			"version": "6.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52678,7 +52197,7 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "3.21.0",
+			"version": "3.27.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -52687,7 +52206,7 @@
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
@@ -52715,7 +52234,7 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "4.21.0",
+			"version": "4.27.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7"
diff --git a/package.json b/package.json
index dd9239d0cf8d4e..307fc82690b3c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "20.6.0-rc.1",
+	"version": "21.3.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 2026df10764622..35580b3e54eadf 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 559036b98b9c65..dffb9eb2a3c137 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index cce816675b74f2..54730b23b9b0fa 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index e956a7835b3918..6011c0fef07350 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index 36324fa1d52080..67ac2c369e129f 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 2a6cf47301a21e..d3c8e1c3f0091e 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index eca77af9d81cf2..dd1391b4f00200 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index f96cf663069698..078de39742479d 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index 2060303f5e816c..102f7a0b968264 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index d629bde9ebd915..356be403f2fb3a 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index 4ec1a22a336b13..ea8efd7bf39f3b 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index 92b77b737f0446..d0236e2c7dc6ff 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index d836fb0fbb3199..df70ee5a7435b5 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 8.27.0 (2025-07-23)
+
+## 8.26.0 (2025-06-25)
+
+## 8.25.0 (2025-06-04)
+
+## 8.24.0 (2025-05-22)
+
+## 8.23.0 (2025-05-07)
+
+## 8.22.0 (2025-04-11)
+
 ## 8.21.0 (2025-03-27)
 
 ## 8.20.0 (2025-03-13)
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index f41394d3a04e15..bba9ccf2a51f26 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.21.0",
+	"version": "8.27.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index 42cb2665888724..2e5430f817cc29 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 6.3.0 (2025-07-23)
+
+## 6.2.0 (2025-06-25)
+
+## 6.1.0 (2025-06-04)
+
+## 6.0.0 (2025-05-22)
+
+### Breaking Changes
+
+-   This package now requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. Legacy Sass compilers like [LibSass](https://sass-lang.com/blog/libsass-is-deprecated/) ([`node-sass`](https://www.npmjs.com/package/node-sass)) and [Ruby Sass](https://sass-lang.com/blog/ruby-sass-is-unsupported/) are no longer supported ([#70135](https://github.com/WordPress/gutenberg/pull/70135)).
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/base-styles/README.md b/packages/base-styles/README.md
index 25034c13a977b0..e01f9bedc30495 100644
--- a/packages/base-styles/README.md
+++ b/packages/base-styles/README.md
@@ -2,6 +2,8 @@
 
 Base SCSS utilities and variables for WordPress.
 
+Note: This package requires [Dart Sass](https://www.npmjs.com/package/sass) to compile. When using this package, make sure you are using Sass version 1.23.0 or later, which is based on Dart Sass.
+
 ## Installation
 
 Install the module
@@ -10,33 +12,29 @@ Install the module
 npm install @wordpress/base-styles --save-dev
 ```
 
-## Use
-
-### SCSS utilities and variables
+## Usage
 
 In your application's SCSS file, include styles like so:
 
 ```scss
-@import 'node_modules/@wordpress/base-styles/colors';
-@import 'node_modules/@wordpress/base-styles/variables';
-@import 'node_modules/@wordpress/base-styles/mixins';
-@import 'node_modules/@wordpress/base-styles/breakpoints';
-@import 'node_modules/@wordpress/base-styles/animations';
-@import 'node_modules/@wordpress/base-styles/z-index';
-@import 'node_modules/@wordpress/base-styles/default-custom-properties';
+@use '@wordpress/base-styles/colors';
+@use '@wordpress/base-styles/variables';
+@use '@wordpress/base-styles/mixins';
+@use '@wordpress/base-styles/breakpoints';
+@use '@wordpress/base-styles/animations';
+@use '@wordpress/base-styles/z-index';
+@use '@wordpress/base-styles/default-custom-properties';
 ```
 
-If you use [Webpack](https://webpack.js.org/) for your SCSS pipeline, you can use `~` to resolve to `node_modules`:
+Make sure to use namespaces when accessing utilities, variables, functions, etc. For example:
 
 ```scss
-@import '~@wordpress/base-styles/colors';
-```
-
-To make that work with [`sass`](https://www.npmjs.com/package/sass) or [`node-sass`](https://www.npmjs.com/package/node-sass) NPM modules without Webpack, you'd have to use [includePaths option](https://sass-lang.com/documentation/js-api#includepaths):
+.selector {
+	color: colors.$gray-300;
 
-```json
-{
-	"includePaths": [ "node_modules" ]
+	@include mixins.break-medium() {
+		font-size: variables.$font-size-large;
+	}
 }
 ```
 
diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
index 644562a1876707..721541a81f8ff1 100644
--- a/packages/base-styles/_colors.native.scss
+++ b/packages/base-styles/_colors.native.scss
@@ -1,5 +1,7 @@
 /** @format */
 
+@use "sass:color";
+
 // Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
 $black: #000;
 $white: #fff;
@@ -41,23 +43,23 @@ $blue-30: #5198d9;
 
 // Grays
 $gray: #87a6bc;
-$gray-light: lighten($gray, 33%); //#f3f6f8
-$gray-dark: darken($gray, 38%); //#2e4453
+$gray-light: color.adjust($gray, $lightness: 33%); //#f3f6f8
+$gray-dark: color.adjust($gray, $lightness: -38%); //#2e4453
 $gray-900: #1a1a1a;
 $gray-700: #757575;
 
 // $gray-text: ideal for standard, non placeholder text
 // $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
 $gray-text: $gray-dark;
-$gray-text-min: darken($gray, 18%); //#537994
+$gray-text-min: color.adjust($gray, $lightness: -18%); //#537994
 
 // Shades of gray
-$gray-lighten-10: lighten($gray, 10%); // #a8bece
-$gray-lighten-20: lighten($gray, 20%); // #c8d7e1
-$gray-lighten-30: lighten($gray, 30%); // #e9eff3
-$gray-darken-10: darken($gray, 10%);
-$gray-darken-20: darken($gray, 20%); // #4f748e
-$gray-darken-30: darken($gray, 30%); // #3d596d
+$gray-lighten-10: color.adjust($gray, $lightness: 10%); // #a8bece
+$gray-lighten-20: color.adjust($gray, $lightness: 20%); // #c8d7e1
+$gray-lighten-30: color.adjust($gray, $lightness: 30%); // #e9eff3
+$gray-darken-10: color.adjust($gray, $lightness: -10%);
+$gray-darken-20: color.adjust($gray, $lightness: -20%); // #4f748e
+$gray-darken-30: color.adjust($gray, $lightness: -30%); // #3d596d
 
 // Custom
 $toolbar-button: #7b9ab1;
diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss
index bba7fd5c8ec141..1322f70e9ab110 100644
--- a/packages/base-styles/_colors.scss
+++ b/packages/base-styles/_colors.scss
@@ -1,5 +1,3 @@
-@import "./functions";
-
 /**
  * Colors
  */
diff --git a/packages/base-styles/_default-custom-properties.scss b/packages/base-styles/_default-custom-properties.scss
index 98bb9ae75ea674..8364c2ec3cf191 100644
--- a/packages/base-styles/_default-custom-properties.scss
+++ b/packages/base-styles/_default-custom-properties.scss
@@ -1,11 +1,14 @@
+@use "./mixins";
+@use "./functions";
+
 // It is important to include these styles in all built stylesheets.
 // This allows to CSS variables post CSS plugin to generate fallbacks.
 // It also provides default CSS variables for npm package consumers.
 :root {
-	@include admin-scheme(#007cba);
 	--wp-block-synced-color: #7a00df;
-	--wp-block-synced-color--rgb: #{hex-to-rgb(#7a00df)};
+	--wp-block-synced-color--rgb: #{functions.hex-to-rgb(#7a00df)};
 	// This CSS variable is not used in Gutenberg project,
 	// but is maintained for backwards compatibility.
 	--wp-bound-block-color: var(--wp-block-synced-color);
+	@include mixins.admin-scheme(#007cba);
 }
diff --git a/packages/base-styles/_functions.scss b/packages/base-styles/_functions.scss
index 734506d456d974..6a8c801cddb151 100644
--- a/packages/base-styles/_functions.scss
+++ b/packages/base-styles/_functions.scss
@@ -4,6 +4,21 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+
+@use "sass:color";
+@use "sass:meta";
+
 @function hex-to-rgb($hex) {
-	@return red($hex), green($hex), blue($hex);
+	/*
+	 * TODO: `color.{red|green|blue}` will trigger a deprecation warning in Dart Sass,
+	 * but the Sass used by the Gutenberg project doesn't support `color.channel()` yet,
+	 * so we can't migrate to it at this time.
+	 * In the future, after the Gutenberg project has been fully migrated to Dart Sass,
+	 * Remove this conditional statement and use only `color.channel()`.
+	 */
+	@if meta.function-exists("channel", "color") {
+		@return color.channel($hex, "red"), color.channel($hex, "green"), color.channel($hex, "blue");
+	} @else {
+		@return color.red($hex), color.green($hex), color.blue($hex);
+	}
 }
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index e61541f0270570..814aba4c317590 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,72 +1,77 @@
-@import "./functions";
-@import "./long-content-fade";
-
 /**
  * Typography
  */
 
+@use "sass:color";
+@use "sass:math";
+@use "./variables";
+@use "./colors";
+@use "./breakpoints";
+@use "./functions";
+@use "./long-content-fade";
+
 @mixin _text-heading() {
-	font-family: $font-family-headings;
-	font-weight: $font-weight-medium;
+	font-family: variables.$font-family-headings;
+	font-weight: variables.$font-weight-medium;
 }
 
 @mixin _text-body() {
-	font-family: $font-family-body;
-	font-weight: $font-weight-regular;
+	font-family: variables.$font-family-body;
+	font-weight: variables.$font-weight-regular;
 }
 
 @mixin heading-small() {
 	@include _text-heading();
-	font-size: $font-size-x-small;
-	line-height: $font-line-height-x-small;
+	font-size: variables.$font-size-x-small;
+	line-height: variables.$font-line-height-x-small;
 }
 
 @mixin heading-medium() {
 	@include _text-heading();
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-medium;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin heading-large() {
 	@include _text-heading();
-	font-size: $font-size-large;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-large;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin heading-x-large() {
 	@include _text-heading();
-	font-size: $font-size-x-large;
-	line-height: $font-line-height-medium;
+	font-size: variables.$font-size-x-large;
+	line-height: variables.$font-line-height-medium;
 }
 
 @mixin heading-2x-large() {
 	@include _text-heading();
-	font-size: $font-size-2x-large;
-	line-height: $font-line-height-2x-large;
+	font-size: variables.$font-size-2x-large;
+	line-height: variables.$font-line-height-2x-large;
 }
 
 @mixin body-small() {
 	@include _text-body();
-	font-size: $font-size-small;
-	line-height: $font-line-height-x-small;
+	font-size: variables.$font-size-small;
+	line-height: variables.$font-line-height-x-small;
 }
 
 @mixin body-medium() {
 	@include _text-body();
-	font-size: $font-size-medium;
-	line-height: $font-line-height-small;
+	font-size: variables.$font-size-medium;
+	line-height: variables.$font-line-height-small;
 }
 
 @mixin body-large() {
 	@include _text-body();
-	font-size: $font-size-large;
-	line-height: $font-line-height-medium;
+	font-size: variables.$font-size-large;
+	line-height: variables.$font-line-height-medium;
 }
 
 @mixin body-x-large() {
 	@include _text-body();
-	font-size: $font-size-x-large;
-	line-height: $font-line-height-x-large;
+	font-size: variables.$font-size-x-large;
+	line-height: variables.$font-line-height-x-large;
 }
 
 /**
@@ -74,55 +79,55 @@
  */
 
 @mixin break-xhuge() {
-	@media (min-width: #{ ($break-xhuge) }) {
+	@media (min-width: #{ (breakpoints.$break-xhuge) }) {
 		@content;
 	}
 }
 
 @mixin break-huge() {
-	@media (min-width: #{ ($break-huge) }) {
+	@media (min-width: #{ (breakpoints.$break-huge) }) {
 		@content;
 	}
 }
 
 @mixin break-wide() {
-	@media (min-width: #{ ($break-wide) }) {
+	@media (min-width: #{ (breakpoints.$break-wide) }) {
 		@content;
 	}
 }
 
 @mixin break-xlarge() {
-	@media (min-width: #{ ($break-xlarge) }) {
+	@media (min-width: #{ (breakpoints.$break-xlarge) }) {
 		@content;
 	}
 }
 
 @mixin break-large() {
-	@media (min-width: #{ ($break-large) }) {
+	@media (min-width: #{ (breakpoints.$break-large) }) {
 		@content;
 	}
 }
 
 @mixin break-medium() {
-	@media (min-width: #{ ($break-medium) }) {
+	@media (min-width: #{ (breakpoints.$break-medium) }) {
 		@content;
 	}
 }
 
 @mixin break-small() {
-	@media (min-width: #{ ($break-small) }) {
+	@media (min-width: #{ (breakpoints.$break-small) }) {
 		@content;
 	}
 }
 
 @mixin break-mobile() {
-	@media (min-width: #{ ($break-mobile) }) {
+	@media (min-width: #{ (breakpoints.$break-mobile) }) {
 		@content;
 	}
 }
 
 @mixin break-zoomed-in() {
-	@media (min-width: #{ ($break-zoomed-in) }) {
+	@media (min-width: #{ (breakpoints.$break-zoomed-in) }) {
 		@content;
 	}
 }
@@ -132,7 +137,7 @@
  */
 
 @mixin block-toolbar-button-style__focus() {
-	box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	box-shadow: inset 0 0 0 variables.$border-width colors.$white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -141,20 +146,19 @@
 // Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
+	border-radius: variables.$radius-small;
+	border: variables.$border-width solid colors.$gray-600;
 
 	@media not (prefers-reduced-motion) {
 		transition: box-shadow 0.1s linear;
 	}
-
-	border-radius: $radius-small;
-	border: $border-width solid $gray-600;
 }
 
 
-@mixin input-style__focus() {
-	border-color: var(--wp-admin-theme-color);
+@mixin input-style__focus($accent-color: var(--wp-admin-theme-color)) {
+	border-color: $accent-color;
 	// Expand the default border focus style by .5px to be a total of 1.5px.
-	box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 0.5px $accent-color;
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 }
@@ -168,7 +172,7 @@
 
 
 @mixin button-style-outset__focus($focus-color) {
-	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) colors.$white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
@@ -184,18 +188,18 @@
 	#{$selector} { /* Set left position when auto-fold is not on the body element. */
 		left: 0;
 
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width;
 		}
 	}
 
 	.auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width-collapsed;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width-collapsed;
 		}
 
-		@media (min-width: #{ ($break-large + 1) }) {
-			left: $admin-sidebar-width;
+		@media (min-width: #{ (breakpoints.$break-large + 1) }) {
+			left: variables.$admin-sidebar-width;
 		}
 	}
 
@@ -203,8 +207,8 @@
 	.folded #{$selector} {
 		left: 0;
 
-		@media (min-width: #{ ($break-medium + 1) }) {
-			left: $admin-sidebar-width-collapsed;
+		@media (min-width: #{ (breakpoints.$break-medium + 1) }) {
+			left: variables.$admin-sidebar-width-collapsed;
 		}
 	}
 
@@ -225,11 +229,11 @@
 
 @mixin caption-style-theme() {
 	color: #555;
-	font-size: $default-font-size;
+	font-size: variables.$default-font-size;
 	text-align: center;
 
 	.is-dark-theme & {
-		color: $light-gray-placeholder;
+		color: colors.$light-gray-placeholder;
 	}
 }
 
@@ -259,48 +263,48 @@
 	}
 }
 
-@mixin input-control {
-	font-family: $default-font;
+@mixin input-control($accent-color: var(--wp-admin-theme-color)) {
+	font-family: variables.$default-font;
 	padding: 6px 8px;
-	@include input-style__neutral();
-
 	/* Fonts smaller than 16px causes mobile safari to zoom. */
-	font-size: $mobile-text-min-font-size;
+	font-size: variables.$mobile-text-min-font-size;
 	/* Override core line-height. To be reviewed. */
 	line-height: normal;
+	@include input-style__neutral();
+
 	@include break-small {
-		font-size: $default-font-size;
+		font-size: variables.$default-font-size;
 		/* Override core line-height. To be reviewed. */
 		line-height: normal;
 	}
 
 	&:focus {
-		@include input-style__focus();
+		@include input-style__focus($accent-color);
 	}
 
 	// Use opacity to work in various editor styles.
 	&::-webkit-input-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 
 	&::-moz-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 
 	&:-ms-input-placeholder {
-		color: $dark-gray-placeholder;
+		color: colors.$dark-gray-placeholder;
 	}
 }
 
 @mixin checkbox-control {
-	@include input-control;
-	border: $border-width solid $gray-900;
-	margin-right: $grid-unit-15;
+	border: variables.$border-width solid colors.$gray-900;
+	margin-right: variables.$grid-unit-15;
 	transition: none;
-	border-radius: $radius-small;
+	border-radius: variables.$radius-small;
+	@include input-control;
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -319,7 +323,7 @@
 	&:checked::before,
 	&[aria-checked="mixed"]::before {
 		margin: -3px -5px;
-		color: $white;
+		color: colors.$white;
 
 		@include break-medium() {
 			margin: -4px 0 0 -5px;
@@ -353,8 +357,8 @@
 
 	&[aria-disabled="true"],
 	&:disabled {
-		background: $gray-100;
-		border-color: $gray-300;
+		background: colors.$gray-100;
+		border-color: colors.$gray-300;
 		cursor: default;
 
 		// Override style inherited from wp-admin. Required to avoid degraded appearance on different backgrounds.
@@ -363,46 +367,49 @@
 }
 
 @mixin radio-control {
-	@include input-control;
-	border: $border-width solid $gray-900;
-	margin-right: $grid-unit-15;
+	border: variables.$border-width solid colors.$gray-900;
+	margin-right: variables.$grid-unit-15;
 	transition: none;
-	border-radius: $radius-round;
-	width: $radio-input-size-sm;
-	height: $radio-input-size-sm;
-	min-width: $radio-input-size-sm;
-	max-width: $radio-input-size-sm;
+	border-radius: variables.$radius-round;
+	width: variables.$radio-input-size-sm;
+	height: variables.$radio-input-size-sm;
+	min-width: variables.$radio-input-size-sm;
+	max-width: variables.$radio-input-size-sm;
 	position: relative;
 
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	@include break-small() {
-		height: $radio-input-size;
-		width: $radio-input-size;
-		min-width: $radio-input-size;
-		max-width: $radio-input-size;
+		height: variables.$radio-input-size;
+		width: variables.$radio-input-size;
+		min-width: variables.$radio-input-size;
+		max-width: variables.$radio-input-size;
 	}
 
 	&:checked::before {
 		box-sizing: inherit;
-		width: math.div($radio-input-size-sm, 2);
-		height: math.div($radio-input-size-sm, 2);
+		width: math.div(variables.$radio-input-size-sm, 2);
+		height: math.div(variables.$radio-input-size-sm, 2);
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		margin: 0;
-		background-color: $white;
+		background-color: colors.$white;
 
 		// This border serves as a background color in Windows High Contrast mode.
-		border: 4px solid $white;
+		border: 4px solid colors.$white;
 
 		@include break-small() {
-			width: math.div($radio-input-size, 2);
-			height: math.div($radio-input-size, 2);
+			width: math.div(variables.$radio-input-size, 2);
+			height: math.div(variables.$radio-input-size, 2);
 		}
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 (variables.$border-width * 2) colors.$white, 0 0 0 (variables.$border-width * 2 + variables.$border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -433,29 +440,29 @@
 	&:focus {
 		color: var(--wp-admin-theme-color--rgb);
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
-		border-radius: $radius-small;
+		border-radius: variables.$radius-small;
 	}
 }
 
 // The editor input reset with increased specificity to avoid theme styles bleeding in.
 @mixin editor-input-reset() {
-	font-family: $editor-html-font !important;
-	color: $gray-900 !important;
-	background: $white !important;
-	padding: $grid-unit-15 !important;
-	border: $border-width solid $gray-900 !important;
+	font-family: variables.$editor-html-font !important;
+	color: colors.$gray-900 !important;
+	background: colors.$white !important;
+	padding: variables.$grid-unit-15 !important;
+	border: variables.$border-width solid colors.$gray-900 !important;
 	box-shadow: none !important;
-	border-radius: $radius-small !important;
+	border-radius: variables.$radius-small !important;
 
 	// Fonts smaller than 16px causes mobile safari to zoom.
-	font-size: $mobile-text-min-font-size !important;
+	font-size: variables.$mobile-text-min-font-size !important;
 	@include break-small {
-		font-size: $default-font-size !important;
+		font-size: variables.$default-font-size !important;
 	}
 
 	&:focus {
 		border-color: var(--wp-admin-theme-color) !important;
-		box-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 (variables.$border-width-focus-fallback - variables.$border-width) var(--wp-admin-theme-color) !important;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent !important;
@@ -467,7 +474,7 @@
  */
 
 @mixin wp-admin-reset( $content-container ) {
-	background: $white;
+	background: colors.$white;
 
 	#wpcontent {
 		padding-left: 0;
@@ -494,7 +501,7 @@
 
 	ul#adminmenu a.wp-has-current-submenu::after,
 	ul#adminmenu > li.current > a.current::after {
-		border-right-color: $white;
+		border-right-color: colors.$white;
 	}
 
 	.media-frame select.attachment-filters:last-of-type {
@@ -507,12 +514,12 @@
 	// Define RGB equivalents for use in rgba function.
 	// Hexadecimal css vars do not work in the rgba function.
 	--wp-admin-theme-color: #{$color-primary};
-	--wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
+	--wp-admin-theme-color--rgb: #{functions.hex-to-rgb($color-primary)};
 	// Darker shades.
-	--wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
-	--wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-primary, 5%))};
-	--wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
-	--wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-primary, 10%))};
+	--wp-admin-theme-color-darker-10: #{color.adjust($color-primary, $lightness: -5%)};
+	--wp-admin-theme-color-darker-10--rgb: #{functions.hex-to-rgb(color.adjust($color-primary, $lightness: -5%))};
+	--wp-admin-theme-color-darker-20: #{color.adjust($color-primary, $lightness: -10%)};
+	--wp-admin-theme-color-darker-20--rgb: #{functions.hex-to-rgb(color.adjust($color-primary, $lightness: -10%))};
 
 	// Focus style width.
 	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 562a568084c812..505a930ab3d30f 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -6,7 +6,7 @@
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
 
-@import "./colors";
+@use "./colors";
 
 /**
  * Fonts & basic variables.
@@ -77,16 +77,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
+$elevation-x-small: 0 1px 1px rgba(colors.$black, 0.03), 0 1px 2px rgba(colors.$black, 0.02), 0 3px 3px rgba(colors.$black, 0.02), 0 4px 4px rgba(colors.$black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
+$elevation-small: 0 1px 2px rgba(colors.$black, 0.05), 0 2px 3px rgba(colors.$black, 0.04), 0 6px 6px rgba(colors.$black, 0.03), 0 8px 8px rgba(colors.$black, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
+$elevation-medium: 0 2px 3px rgba(colors.$black, 0.05), 0 4px 5px rgba(colors.$black, 0.04), 0 12px 12px rgba(colors.$black, 0.03), 0 16px 16px rgba(colors.$black, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
+$elevation-large: 0 5px 15px rgba(colors.$black, 0.08), 0 15px 27px rgba(colors.$black, 0.07), 0 30px 36px rgba(colors.$black, 0.04), 0 50px 43px rgba(colors.$black, 0.02);
 
 /**
  * Dimensions.
@@ -97,7 +97,7 @@ $button-size: 36px;
 $button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
 $button-size-compact: 32px;
-$header-height: 60px;
+$header-height: 64px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 300px;
 $admin-bar-height: 32px;
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 9fe2d4453c92ca..28f6f1465e6322 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 // Stores a list of z-index values in a central location.  For clarity, when a
 // specific value is needed, add a comment explaining why (what other rules the
 // value is designed to work with).
@@ -14,6 +16,7 @@ $z-layers: (
 	// These next three share a stacking context
 	".block-library-template-part__selection-search": 2, // higher sticky element
 	".block-library-query-pattern__selection-search": 2, // higher sticky element
+	".editor-post-template__swap-template-search": 2, // higher sticky element
 
 	// These next two share a stacking context
 	".interface-complementary-area .components-panel" : 0, // lower scrolling content
@@ -216,8 +219,8 @@ $z-layers: (
 );
 
 @function z-index( $key ) {
-	@if map-has-key( $z-layers, $key ) {
-		@return map-get( $z-layers, $key );
+	@if map.has-key( $z-layers, $key ) {
+		@return map.get( $z-layers, $key );
 	}
 
 	@error "Error: Specified z-index `#{$key}` does not exist in the mapping";
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 41a933969961da..237b802321e2ee 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.21.0",
+	"version": "6.3.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index 0eab3294e7e45c..0a0382331ada26 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 2ed28bd0a89ef1..467aea0b89526d 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index cec9a16dc663ec..7780b40f12121a 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 4b0b6d98dc946f..26d64e31063245 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/src/store/actions.js b/packages/block-directory/src/store/actions.js
index 6e8ec13002acb4..f062ff2b9feced 100644
--- a/packages/block-directory/src/store/actions.js
+++ b/packages/block-directory/src/store/actions.js
@@ -91,16 +91,20 @@ export const installBlockType =
 				'title',
 				'category',
 				'parent',
+				'ancestor',
 				'icon',
 				'description',
 				'keywords',
 				'attributes',
 				'provides_context',
 				'uses_context',
+				'selectors',
 				'supports',
 				'styles',
 				'example',
 				'variations',
+				'allowed_blocks',
+				'block_hooks',
 			];
 			await apiFetch( {
 				path: addQueryArgs( `/wp/v2/block-types/${ name }`, {
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index d73360dbe033d5..15373b00fd2ecb 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 15.0.0 (2025-07-23)
+
+### Breaking Changes
+
+-   Store: Deprecate the block hovered global state and related action/selector ([#70731](https://github.com/WordPress/gutenberg/pull/70731))
+
+## 14.21.0 (2025-06-25)
+
+## 14.20.0 (2025-06-04)
+
+## 14.19.0 (2025-05-22)
+
+## 14.18.0 (2025-05-07)
+
+## 14.17.0 (2025-04-11)
+
 ## 14.16.0 (2025-03-27)
 
 ## 14.15.0 (2025-03-13)
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 7d4e2a4e5c5cb6..ff0bd7d0de48c8 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.16.0",
+	"version": "15.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
index 20cdd4d02cb44a..78457271ca930c 100644
--- a/packages/block-editor/src/components/background-image-control/index.js
+++ b/packages/block-editor/src/components/background-image-control/index.js
@@ -115,7 +115,6 @@ function InspectorImagePreviewItem( {
 	toggleProps = {},
 	filename,
 	label,
-	className,
 	onToggleCallback = noop,
 } ) {
 	const { isOpen, ...restToggleProps } = toggleProps;
@@ -168,12 +167,7 @@ function InspectorImagePreviewItem( {
 	};
 
 	return as === 'button' ? (
-		<Button
-			__next40pxDefaultSize
-			className={ className }
-			{ ...restToggleProps }
-			aria-expanded={ isOpen }
-		>
+		<Button __next40pxDefaultSize { ...restToggleProps }>
 			{ renderPreviewContent() }
 		</Button>
 	) : (
@@ -249,6 +243,7 @@ function BackgroundImageControls( {
 	onResetImage = noop,
 	displayInPanel,
 	defaultValues,
+	containerRef,
 } ) {
 	const [ isUploading, setIsUploading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
@@ -256,7 +251,6 @@ function BackgroundImageControls( {
 	const { id, title, url } = style?.background?.backgroundImage || {
 		...inheritedValue?.background?.backgroundImage,
 	};
-	const replaceContainerRef = useRef();
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -324,6 +318,8 @@ function BackgroundImageControls( {
 			} )
 		);
 		setIsUploading( false );
+		// Close the dropdown and focus the toggle button.
+		closeAndFocus();
 	};
 
 	// Drag and drop callback, restricting image to one.
@@ -342,14 +338,19 @@ function BackgroundImageControls( {
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
-		const [ toggleButton ] = focus.tabbable.find(
-			replaceContainerRef.current
-		);
-		// Focus the toggle button and close the dropdown menu.
-		// This ensures similar behaviour as to selecting an image, where the dropdown is
-		// closed and focus is redirected to the dropdown toggle button.
-		toggleButton?.focus();
-		toggleButton?.click();
+		// Use requestAnimationFrame to ensure DOM updates are complete
+		window.requestAnimationFrame( () => {
+			const [ toggleButton ] = focus.tabbable.find(
+				containerRef?.current
+			);
+			if ( ! toggleButton ) {
+				return;
+			}
+			// Focus the toggle button and close the dropdown menu.
+			// This ensures similar behaviour as to selecting an image, where the dropdown is
+			// closed and focus is redirected to the dropdown toggle button.
+			toggleButton.focus();
+		} );
 	};
 
 	const onRemove = () =>
@@ -363,10 +364,7 @@ function BackgroundImageControls( {
 		title || getFilename( url ) || __( 'Add background image' );
 
 	return (
-		<div
-			ref={ replaceContainerRef }
-			className="block-editor-global-styles-background-panel__image-tools-panel-item"
-		>
+		<div className="block-editor-global-styles-background-panel__image-tools-panel-item">
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
 				mediaId={ id }
@@ -382,7 +380,6 @@ function BackgroundImageControls( {
 				} }
 				name={
 					<InspectorImagePreviewItem
-						className="block-editor-global-styles-background-panel__image-preview"
 						imgUrl={ url }
 						filename={ title }
 						label={ imgLabel }
@@ -697,9 +694,11 @@ export default function BackgroundImagePanel( {
 			settings?.background?.backgroundRepeat );
 
 	const [ isDropDownOpen, setIsDropDownOpen ] = useState( false );
+	const containerRef = useRef();
 
 	return (
 		<div
+			ref={ containerRef }
 			className={ clsx(
 				'block-editor-global-styles-background-panel__inspector-media-replace-container',
 				{
@@ -727,6 +726,7 @@ export default function BackgroundImagePanel( {
 							} }
 							onRemoveImage={ () => setIsDropDownOpen( false ) }
 							defaultValues={ defaultValues }
+							containerRef={ containerRef }
 						/>
 						<BackgroundSizeControls
 							onChange={ onChange }
@@ -747,6 +747,7 @@ export default function BackgroundImagePanel( {
 						resetBackground();
 					} }
 					onRemoveImage={ () => setIsDropDownOpen( false ) }
+					containerRef={ containerRef }
 				/>
 			) }
 		</div>
diff --git a/packages/block-editor/src/components/background-image-control/style.scss b/packages/block-editor/src/components/background-image-control/style.scss
index b9c94916039c44..0e295047794a49 100644
--- a/packages/block-editor/src/components/background-image-control/style.scss
+++ b/packages/block-editor/src/components/background-image-control/style.scss
@@ -76,17 +76,13 @@
 	}
 }
 
-.block-editor-global-styles-background-panel__image-preview-content,
-.block-editor-global-styles-background-panel__dropdown-toggle {
-	height: 100%;
-	width: 100%;
-	padding-left: $grid-unit-15;
-}
-
 .block-editor-global-styles-background-panel__dropdown-toggle {
 	cursor: pointer;
 	background: transparent;
 	border: none;
+	height: 100%;
+	width: 100%;
+	padding-left: $grid-unit-15;
 }
 
 .block-editor-global-styles-background-panel__inspector-media-replace-title {
diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index 36aca7fa1c7220..c399f38054ed4d 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -56,8 +56,7 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				className="block-editor-block-canvas"
-				style={ { height } }
+				style={ { height, display: 'flex' } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -68,6 +67,10 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
+					style={ {
+						height: '100%',
+						width: '100%',
+					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -78,7 +81,6 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index dd9d8f254ff76b..c00b5322a1081e 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/src/components/block-inspector/style.scss
@@ -11,7 +11,9 @@
 	}
 
 	.components-base-control,
-	.components-radio-control {
+	.components-radio-control,
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		&:where(:not(:last-child)) {
 			margin-bottom: $grid-unit-20;
 		}
@@ -20,7 +22,9 @@
 	// Reset unwanted margin-bottom from being applied to BaseControls within certain components.
 	.components-focal-point-picker-control,
 	.components-query-controls,
-	.components-range-control {
+	.components-range-control,
+	.block-editor-html-element-control,
+	.block-editor-image-size-control {
 		.components-base-control {
 			margin-bottom: 0;
 		}
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
index 8734f6f8804f03..6e0ba41b5be206 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
@@ -36,7 +36,7 @@ export default function BlockInvalidWarning( { clientId } ) {
 	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
 
 	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		/* translators: accessibility text for blocks with invalid content. %s: localized block title */
 		__( '%s block. This block has invalid content' ),
 		blockTitle
 	);
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index 29f8a97b031ce2..0839ffb71a8e37 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -262,15 +262,19 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	// Do not add new properties here, use `useDispatch` instead to avoid
 	// leaking new props to the public API (editor.BlockListBlock filter).
 	return {
-		setAttributes( newAttributes ) {
+		setAttributes( nextAttributes ) {
 			const { getMultiSelectedBlockClientIds } =
 				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
-			const { clientId } = ownProps;
+			const { clientId, attributes } = ownProps;
 			const clientIds = multiSelectedBlockClientIds.length
 				? multiSelectedBlockClientIds
 				: [ clientId ];
+			const newAttributes =
+				typeof nextAttributes === 'function'
+					? nextAttributes( attributes )
+					: nextAttributes;
 
 			updateBlockAttributes( clientIds, newAttributes );
 		},
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index b39e9b144bbc9e..7d427ff9adb296 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -365,6 +365,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	border: none;
 	outline: none;
 	border-radius: $radius-small;
+	box-sizing: border-box;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	resize: none;
 	overflow: hidden;
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 14cda82fe7cd26..8d9e952c5929b5 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -114,7 +114,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useIsHovered( { clientId } ),
+		useIsHovered(),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js
index a53983b95954ad..40414b28559365 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js
@@ -41,12 +41,15 @@ function restore( node ) {
 
 function down( event ) {
 	const { target } = event;
-	const { ownerDocument, isContentEditable } = target;
+	const { ownerDocument, isContentEditable, tagName } = target;
+	const isInputOrTextArea = [ 'INPUT', 'TEXTAREA' ].includes( tagName );
+
 	const nodes = nodesByDocument.get( ownerDocument );
 
-	if ( isContentEditable ) {
-		// Whenever an editable element is clicked, check which draggable
-		// blocks contain this element, and temporarily disable draggability.
+	if ( isContentEditable || isInputOrTextArea ) {
+		// Whenever an editable element or an input or textarea is clicked,
+		// check which draggable blocks contain this element, and temporarily
+		// disable draggability.
 		for ( const node of nodes ) {
 			if (
 				node.getAttribute( 'draggable' ) === 'true' &&
@@ -57,8 +60,8 @@ function down( event ) {
 			}
 		}
 	} else {
-		// Whenever a non-editable element is clicked, re-enable draggability
-		// for any blocks that were previously disabled.
+		// Whenever a non-editable element or an input or textarea is clicked,
+		// re-enable draggability for any blocks that were previously disabled.
 		for ( const node of nodes ) {
 			restore( node );
 		}
@@ -66,11 +69,11 @@ function down( event ) {
 }
 
 /**
- * In Firefox, the `draggable` and `contenteditable` attributes don't play well
- * together. When `contenteditable` is within a `draggable` element, selection
- * doesn't get set in the right place. The only solution is to temporarily
- * remove the `draggable` attribute clicking inside `contenteditable` elements.
- *
+ * In Firefox, the `draggable` and `contenteditable` or `input` or `textarea`
+ * elements don't play well together. When these elements are within a
+ * `draggable` element, selection doesn't get set in the right place. The only
+ * solution is to temporarily remove the `draggable` attribute clicking inside
+ * these elements.
  * @return {Function} Cleanup function.
  */
 export function useFirefoxDraggableCompatibility() {
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
index 7c4b4aae8a70a1..72032c0b0c6931 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js
@@ -2,37 +2,24 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
+function listener( event ) {
+	if ( event.defaultPrevented ) {
+		return;
+	}
+
+	event.preventDefault();
+	event.currentTarget.classList.toggle(
+		'is-hovered',
+		event.type === 'mouseover'
+	);
+}
 
 /*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered( { clientId } ) {
-	const { hoverBlock } = useDispatch( blockEditorStore );
-
-	function listener( event ) {
-		if ( event.defaultPrevented ) {
-			return;
-		}
-
-		const action = event.type === 'mouseover' ? 'add' : 'remove';
-
-		event.preventDefault();
-		event.currentTarget.classList[ action ]( 'is-hovered' );
-
-		if ( action === 'add' ) {
-			hoverBlock( clientId );
-		} else {
-			hoverBlock( null );
-		}
-	}
-
+export function useIsHovered() {
 	return useRefEffect( ( node ) => {
 		node.addEventListener( 'mouseout', listener );
 		node.addEventListener( 'mouseover', listener );
@@ -43,7 +30,6 @@ export function useIsHovered( { clientId } ) {
 
 			// Remove class in case it lingers.
 			node.classList.remove( 'is-hovered' );
-			hoverBlock( null );
 		};
 	}, [] );
 }
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 86191c1e4ce32c..052de64a7c942a 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
@@ -49,7 +49,6 @@ export function ZoomOutSeparator( {
 		return {
 			sectionRootClientId: root,
 			sectionClientIds: sectionRootClientIds,
-			blockOrder: getBlockOrder( root ),
 			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
index df267e97165e36..848ca3f3904abc 100644
--- a/packages/block-editor/src/components/block-lock/modal.js
+++ b/packages/block-editor/src/components/block-lock/modal.js
@@ -84,6 +84,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 			) }
 			overlayClassName="block-editor-block-lock-modal"
 			onRequestClose={ onClose }
+			size="small"
 		>
 			<form
 				onSubmit={ ( event ) => {
diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
index ad59030a8f4405..63e999b8dc95cd 100644
--- a/packages/block-editor/src/components/block-lock/style.scss
+++ b/packages/block-editor/src/components/block-lock/style.scss
@@ -1,11 +1,12 @@
 .block-editor-block-lock-modal {
 	z-index: z-index(".block-editor-block-lock-modal");
+}
 
-	.components-modal__frame {
-		@include break-small() {
-			max-width: $break-mobile;
-		}
-	}
+.block-editor-block-lock-modal__options {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
 }
 
 .block-editor-block-lock-modal__options legend {
@@ -14,6 +15,9 @@
 }
 
 .block-editor-block-lock-modal__checklist {
+	// Reset `ul` browser defaults.
+	list-style: none;
+	padding: 0;
 	margin: 0;
 }
 
diff --git a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
index 7ca294a2894158..2655e3b140fd11 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
 const noop = () => {};
 
 export default function BlockModeToggle( { clientId, onToggle = noop } ) {
-	const { blockType, mode, isCodeEditingEnabled } = useSelect(
+	const { blockType, mode, enabled } = useSelect(
 		( select ) => {
 			const { getBlock, getBlockMode, getSettings } =
 				select( blockEditorStore );
@@ -23,7 +23,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 			return {
 				mode: getBlockMode( clientId ),
 				blockType: block ? getBlockType( block.name ) : null,
-				isCodeEditingEnabled: getSettings().codeEditingEnabled,
+				enabled: getSettings().codeEditingEnabled && !! block?.isValid,
 			};
 		},
 		[ clientId ]
@@ -33,7 +33,7 @@ export default function BlockModeToggle( { clientId, onToggle = noop } ) {
 	if (
 		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
-		! isCodeEditingEnabled
+		! enabled
 	) {
 		return null;
 	}
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 7fa9e1d1a21963..b94d7fb008aadf 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -88,6 +88,7 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
+		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -98,6 +99,7 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -122,6 +124,7 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
+				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -301,7 +304,7 @@ export function BlockSettingsDropdown( {
 											{ __( 'Duplicate' ) }
 										</MenuItem>
 									) }
-									{ canInsertBlock && ! isContentOnly && (
+									{ canInsertBlock && ! isZoomOut && (
 										<>
 											<MenuItem
 												onClick={ pipe(
diff --git a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
index 67d88125e3429c..b4d9622f0c14e5 100644
--- a/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/block-editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -20,7 +20,7 @@ function setupUseSelectMock( mode, blockType, codeEditingEnabled = true ) {
 		return {
 			mode,
 			blockType,
-			isCodeEditingEnabled: codeEditingEnabled,
+			enabled: codeEditingEnabled,
 		};
 	} );
 }
diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
index 80ce3691147834..de63d67cb391ea 100644
--- a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
+++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
@@ -14,7 +14,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+	const enabled = useSelect( ( select ) => {
 		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
 			select( blockEditorStore );
 
@@ -27,18 +27,12 @@ export function useHasBlockToolbar() {
 			selectedBlockClientId &&
 			getBlockType( getBlockName( selectedBlockClientId ) );
 
-		return {
-			isToolbarEnabled:
-				blockType &&
-				hasBlockSupport( blockType, '__experimentalToolbar', true ),
-			isBlockDisabled:
-				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
-		};
+		return (
+			blockType &&
+			hasBlockSupport( blockType, '__experimentalToolbar', true ) &&
+			getBlockEditingMode( selectedBlockClientId ) !== 'disabled'
+		);
 	}, [] );
 
-	if ( ! isToolbarEnabled || isBlockDisabled ) {
-		return false;
-	}
-
-	return true;
+	return enabled;
 }
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index db651bce00fec7..0b36786f54d5cf 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -25,6 +25,7 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
+			isBlockInterfaceHidden,
 		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
@@ -45,6 +46,7 @@ export function useShowBlockTools() {
 			editorMode !== 'navigation' &&
 			isEmptyDefaultBlock;
 		const _showBlockToolbarPopover =
+			! isBlockInterfaceHidden() &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
diff --git a/packages/block-editor/src/components/block-variation-transforms/style.scss b/packages/block-editor/src/components/block-variation-transforms/style.scss
index b8d2a1d4649fa0..9aa6873f768e30 100644
--- a/packages/block-editor/src/components/block-variation-transforms/style.scss
+++ b/packages/block-editor/src/components/block-variation-transforms/style.scss
@@ -1,3 +1,10 @@
+.block-editor-block-variation-transforms:where(fieldset) {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-block-variation-transforms {
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 	width: 100%;
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
index 18360cf3162ab1..cf7ae921712198 100644
--- a/packages/block-editor/src/components/border-radius-control/style.scss
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -1,4 +1,9 @@
 .components-border-radius-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	margin-bottom: $grid-unit-15;
 
 	legend {
diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
index 20791d9751bcd4..27a9bbfd1e9617 100644
--- a/packages/block-editor/src/components/child-layout-control/index.js
+++ b/packages/block-editor/src/components/child-layout-control/index.js
@@ -6,7 +6,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
-	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -188,6 +187,7 @@ function FlexControls( {
 						} );
 					} }
 					value={ flexSize }
+					min={ 0 }
 					label={ flexResetLabel }
 					hideLabelFromVision
 				/>
@@ -209,7 +209,7 @@ function GridControls( {
 	panelId,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
-	const { columnCount = 3, rowCount } = parentLayout ?? {};
+	const { columnCount, rowCount } = parentLayout ?? {};
 	const rootClientId = useSelect( ( select ) =>
 		select( blockEditorStore ).getBlockRootClientId( panelId )
 	);
@@ -217,7 +217,7 @@ function GridControls( {
 		useDispatch( blockEditorStore );
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		rootClientId,
-		columnCount
+		columnCount || 3
 	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
@@ -234,9 +234,20 @@ function GridControls( {
 		} );
 	};
 
+	// Calculate max column span based on current position and grid width
+	const maxColumnSpan = columnCount
+		? columnCount - ( columnStart ?? 1 ) + 1
+		: undefined;
+
+	// Calculate max row span based on current position and grid height
+	const maxRowSpan =
+		window.__experimentalEnableGridInteractivity && rowCount
+			? rowCount - ( rowStart ?? 1 ) + 1
+			: undefined;
+
 	return (
 		<>
-			<HStack
+			<Flex
 				as={ ToolsPanelItem }
 				hasValue={ hasSpanValue }
 				label={ __( 'Grid span' ) }
@@ -244,44 +255,58 @@ function GridControls( {
 				isShownByDefault={ isShownByDefault }
 				panelId={ panelId }
 			>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Column span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newColumnSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							rowSpan,
-							columnSpan: newColumnSpan,
-						} );
-					} }
-					value={ columnSpan ?? 1 }
-					min={ 1 }
-				/>
-				<InputControl
-					size="__unstable-large"
-					label={ __( 'Row span' ) }
-					type="number"
-					onChange={ ( value ) => {
-						// Don't allow unsetting.
-						const newRowSpan =
-							value === '' ? 1 : parseInt( value, 10 );
-						onChange( {
-							columnStart,
-							rowStart,
-							columnSpan,
-							rowSpan: newRowSpan,
-						} );
-					} }
-					value={ rowSpan ?? 1 }
-					min={ 1 }
-				/>
-			</HStack>
-			{ window.__experimentalEnableGridInteractivity && columnCount && (
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Column span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							// Don't allow unsetting.
+							const newColumnSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxColumnSpan
+								? Math.min( newColumnSpan, maxColumnSpan )
+								: newColumnSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								rowSpan,
+								columnSpan: constrainedValue,
+							} );
+						} }
+						value={ columnSpan ?? 1 }
+						min={ 1 }
+						max={ maxColumnSpan }
+					/>
+				</FlexItem>
+				<FlexItem style={ { width: '50%' } }>
+					<InputControl
+						size="__unstable-large"
+						label={ __( 'Row span' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const newRowSpan =
+								value === '' ? 1 : parseInt( value, 10 );
+							const constrainedValue = maxRowSpan
+								? Math.min( newRowSpan, maxRowSpan )
+								: newRowSpan;
+
+							onChange( {
+								columnStart,
+								rowStart,
+								columnSpan,
+								rowSpan: constrainedValue,
+							} );
+						} }
+						value={ rowSpan ?? 1 }
+						min={ 1 }
+						max={ maxRowSpan }
+					/>
+				</FlexItem>
+			</Flex>
+
+			{ window.__experimentalEnableGridInteractivity && (
 				// Use Flex with an explicit width on the FlexItem instead of HStack to
 				// work around an issue in webkit where inputs with a max attribute are
 				// sized incorrectly.
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 6a882c4b1883ce..056c8be3dac817 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -10,6 +10,11 @@ $swatch-gap: 12px;
 }
 
 .block-editor-color-gradient-control__fieldset {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	// Prevents the `fieldset` from growing beyond its parent's size
 	// in order to fit its content.
 	min-width: 0;
diff --git a/packages/block-editor/src/components/grid/style.scss b/packages/block-editor/src/components/grid/style.scss
index ab36ed12984bd7..45a15de68744f8 100644
--- a/packages/block-editor/src/components/grid/style.scss
+++ b/packages/block-editor/src/components/grid/style.scss
@@ -176,11 +176,12 @@
 
 .editor-collapsible-block-toolbar {
 	.block-editor-grid-item-mover__move-vertical-button-container {
-		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		// Reduce height and move up a little to prevent the toolbar
+		// shift when focus is on the vertical movers.
 		@include break-small() {
 			height: $grid-unit-50;
 			position: relative;
-			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+			top: #{$grid-unit-05 * -1};
 		}
 	}
 }
diff --git a/packages/block-editor/src/components/html-element-control/index.js b/packages/block-editor/src/components/html-element-control/index.js
new file mode 100644
index 00000000000000..a4ca6bcbe60512
--- /dev/null
+++ b/packages/block-editor/src/components/html-element-control/index.js
@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	SelectControl,
+	Notice,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { htmlElementMessages } from './messages';
+
+/**
+ * Renders a SelectControl for choosing HTML elements with validation
+ * to prevent duplicate <main> elements.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.tagName  The current HTML tag name.
+ * @param {Function} props.onChange Function to call when the tag is changed.
+ * @param {string}   props.clientId Optional. The client ID of the block. Used to check for existing <main> elements.
+ * @param {Array}    props.options  SelectControl options (optional).
+ *
+ * @return {Component} The HTML element select control with validation.
+ */
+export default function HTMLElementControl( {
+	tagName,
+	onChange,
+	clientId,
+	options = [
+		{ label: __( 'Default (<div>)' ), value: 'div' },
+		{ label: '<header>', value: 'header' },
+		{ label: '<main>', value: 'main' },
+		{ label: '<section>', value: 'section' },
+		{ label: '<article>', value: 'article' },
+		{ label: '<aside>', value: 'aside' },
+		{ label: '<footer>', value: 'footer' },
+	],
+} ) {
+	const checkForMainTag =
+		!! clientId && options.some( ( option ) => option.value === 'main' );
+
+	const hasMainElementElsewhere = useSelect(
+		( select ) => {
+			if ( ! checkForMainTag ) {
+				return false;
+			}
+
+			const { getClientIdsWithDescendants, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return getClientIdsWithDescendants().some( ( id ) => {
+				// Skip the current block.
+				if ( id === clientId ) {
+					return false;
+				}
+
+				return getBlockAttributes( id )?.tagName === 'main';
+			} );
+		},
+		[ clientId, checkForMainTag ]
+	);
+
+	// Create a modified options array that disables the main option if needed.
+	const modifiedOptions = options.map( ( option ) => {
+		if (
+			option.value === 'main' &&
+			hasMainElementElsewhere &&
+			tagName !== 'main'
+		) {
+			return {
+				...option,
+				disabled: true,
+				label: sprintf(
+					/* translators: %s: HTML element name */
+					__( '%s (Already in use)' ),
+					option.label
+				),
+			};
+		}
+		return option;
+	} );
+
+	return (
+		<VStack spacing={ 2 } className="block-editor-html-element-control">
+			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'HTML element' ) }
+				options={ modifiedOptions }
+				value={ tagName }
+				onChange={ onChange }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+
+			{ tagName === 'main' && hasMainElementElsewhere && (
+				<Notice status="warning" isDismissible={ false }>
+					{ __(
+						'Multiple <main> elements detected. The duplicate may be in your content or template. This is not valid HTML and may cause accessibility issues. Please change this HTML element.'
+					) }
+				</Notice>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/block-library/src/utils/messages.js b/packages/block-editor/src/components/html-element-control/messages.js
similarity index 75%
rename from packages/block-library/src/utils/messages.js
rename to packages/block-editor/src/components/html-element-control/messages.js
index 564bb32ee951eb..ff826fffecbd27 100644
--- a/packages/block-library/src/utils/messages.js
+++ b/packages/block-editor/src/components/html-element-control/messages.js
@@ -3,13 +3,22 @@
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Messages providing helpful descriptions for HTML elements.
+ */
 export const htmlElementMessages = {
+	a: __(
+		'The <a> element should be used for links that navigate to a different page or to a different section within the same page.'
+	),
 	article: __(
 		'The <article> element should represent a self-contained, syndicatable portion of the document.'
 	),
 	aside: __(
 		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
 	),
+	button: __(
+		'The <button> element should be used for interactive controls that perform an action on the current page, such as opening a modal or toggling content visibility.'
+	),
 	div: __(
 		'The <div> element should only be used if the block is a design element with no semantic meaning.'
 	),
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 8411430dfbdadd..cec4769bfa33f7 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -131,6 +131,22 @@ function Iframe( {
 		function preventFileDropDefault( event ) {
 			event.preventDefault();
 		}
+		// Prevent clicks on link fragments from navigating away. Note that links
+		// inside `contenteditable` are already disabled by the browser, so
+		// this is for links in blocks outside of `contenteditable`.
+		function interceptLinkClicks( event ) {
+			if (
+				event.target.tagName === 'A' &&
+				event.target.getAttribute( 'href' )?.startsWith( '#' )
+			) {
+				event.preventDefault();
+				// Manually handle link fragment navigation within the iframe to prevent page reloads.
+				// This ensures smooth scrolling to anchor links (e.g., footnotes) despite the iframe's different base URL.
+				iFrameDocument.defaultView.location.hash = event.target
+					.getAttribute( 'href' )
+					.slice( 1 );
+			}
+		}
 
 		const { ownerDocument } = node;
 
@@ -185,22 +201,7 @@ function Iframe( {
 				preventFileDropDefault,
 				false
 			);
-			// Prevent clicks on links from navigating away. Note that links
-			// inside `contenteditable` are already disabled by the browser, so
-			// this is for links in blocks outside of `contenteditable`.
-			iFrameDocument.addEventListener( 'click', ( event ) => {
-				if ( event.target.tagName === 'A' ) {
-					event.preventDefault();
-
-					// Appending a hash to the current URL will not reload the
-					// page. This is useful for e.g. footnotes.
-					const href = event.target.getAttribute( 'href' );
-					if ( href?.startsWith( '#' ) ) {
-						iFrameDocument.defaultView.location.hash =
-							href.slice( 1 );
-					}
-				}
-			} );
+			iFrameDocument.addEventListener( 'click', interceptLinkClicks );
 		}
 
 		node.addEventListener( 'load', onLoad );
@@ -216,6 +217,7 @@ function Iframe( {
 				'drop',
 				preventFileDropDefault
 			);
+			iFrameDocument?.removeEventListener( 'click', interceptLinkClicks );
 		};
 	}, [] );
 
diff --git a/packages/block-editor/src/components/image-size-control/index.js b/packages/block-editor/src/components/image-size-control/index.js
index 1cd2b51054e7ee..b1ea92c82aab87 100644
--- a/packages/block-editor/src/components/image-size-control/index.js
+++ b/packages/block-editor/src/components/image-size-control/index.js
@@ -5,6 +5,7 @@ import {
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
@@ -87,7 +88,7 @@ export default function ImageSizeControl( {
 	} );
 
 	return (
-		<>
+		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
 					__nextHasNoMarginBottom
@@ -100,10 +101,9 @@ export default function ImageSizeControl( {
 				/>
 			) }
 			{ isResizable && (
-				<div className="block-editor-image-size-control">
-					<HStack align="baseline" spacing="3">
+				<>
+					<HStack align="baseline" spacing="4">
 						<NumberControl
-							className="block-editor-image-size-control__width"
 							label={ __( 'Width' ) }
 							value={ currentWidth }
 							min={ 1 }
@@ -113,7 +113,6 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 						<NumberControl
-							className="block-editor-image-size-control__height"
 							label={ __( 'Height' ) }
 							value={ currentHeight }
 							min={ 1 }
@@ -138,7 +137,7 @@ export default function ImageSizeControl( {
 									key={ scale }
 									value={ scale }
 									label={ sprintf(
-										/* translators: Percentage value. */
+										/* translators: %d: Percentage value. */
 										__( '%d%%' ),
 										scale
 									) }
@@ -146,8 +145,8 @@ export default function ImageSizeControl( {
 							);
 						} ) }
 					</ToggleGroupControl>
-				</div>
+				</>
 			) }
-		</>
+		</VStack>
 	);
 }
diff --git a/packages/block-editor/src/components/image-size-control/style.scss b/packages/block-editor/src/components/image-size-control/style.scss
deleted file mode 100644
index d01bfc5929fbe3..00000000000000
--- a/packages/block-editor/src/components/image-size-control/style.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.block-editor-image-size-control {
-	margin-bottom: 1em;
-
-	.block-editor-image-size-control__width,
-	.block-editor-image-size-control__height {
-		margin-bottom: 1.115em;
-	}
-}
diff --git a/packages/block-editor/src/components/inserter-button/index.native.js b/packages/block-editor/src/components/inserter-button/index.native.js
index d9147b2f4d95bd..09cacf2408dcb5 100644
--- a/packages/block-editor/src/components/inserter-button/index.native.js
+++ b/packages/block-editor/src/components/inserter-button/index.native.js
@@ -6,7 +6,7 @@ import { View, TouchableHighlight, Text } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -17,93 +17,82 @@ import { __, sprintf } from '@wordpress/i18n';
 import { BlockIcon } from '../block-icon';
 import styles from './style.scss';
 import sparkles from './sparkles';
-class MenuItem extends Component {
-	constructor() {
-		super( ...arguments );
 
-		this.onPress = this.onPress.bind( this );
-	}
-
-	onPress() {
-		const { onSelect, item } = this.props;
+function MenuItem( {
+	getStylesFromColorScheme,
+	item,
+	itemWidth,
+	maxWidth,
+	onSelect,
+} ) {
+	const onPress = useCallback( () => {
 		onSelect( item );
-	}
-
-	render() {
-		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
-			this.props;
+	}, [ onSelect, item ] );
 
-		const modalIconWrapperStyle = getStylesFromColorScheme(
-			styles.modalIconWrapper,
-			styles.modalIconWrapperDark
-		);
-		const modalIconStyle = styles.modalIcon;
-		const modalItemLabelStyle = getStylesFromColorScheme(
-			styles.modalItemLabel,
-			styles.modalItemLabelDark
-		);
+	const modalIconWrapperStyle = getStylesFromColorScheme(
+		styles.modalIconWrapper,
+		styles.modalIconWrapperDark
+	);
+	const modalIconStyle = styles.modalIcon;
+	const modalItemLabelStyle = getStylesFromColorScheme(
+		styles.modalItemLabel,
+		styles.modalItemLabelDark
+	);
 
-		const clipboardBlockStyles = getStylesFromColorScheme(
-			styles.clipboardBlock,
-			styles.clipboardBlockDark
-		);
+	const clipboardBlockStyles = getStylesFromColorScheme(
+		styles.clipboardBlock,
+		styles.clipboardBlockDark
+	);
 
-		const isClipboardBlock = item.id === 'clipboard';
-		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
-		const blockIsNew = item.isNew === true;
-		const accessibilityLabelFormat = blockIsNew
-			? // translators: Newly available block name. %s: The localized block name
-			  __( '%s block, newly available' )
-			: // translators: %s: Block name e.g. "Image block"
-			  __( '%s block' );
-		const accessibilityLabel = sprintf(
-			accessibilityLabelFormat,
-			item.title
-		);
+	const isClipboardBlock = item.id === 'clipboard';
+	const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
+	const blockIsNew = item.isNew === true;
+	const accessibilityLabelFormat = blockIsNew
+		? // translators: Newly available block name. %s: The localized block name
+		  __( '%s block, newly available' )
+		: // translators: %s: Block name e.g. "Image block"
+		  __( '%s block' );
+	const accessibilityLabel = sprintf( accessibilityLabelFormat, item.title );
 
-		return (
-			<TouchableHighlight
-				style={ [
-					styles.touchableArea,
-					item.isDisabled ? styles.disabled : null,
-				] }
-				underlayColor="transparent"
-				activeOpacity={ 0.5 }
-				accessibilityRole="button"
-				accessibilityLabel={ accessibilityLabel }
-				onPress={ this.onPress }
-				disabled={ item.isDisabled }
-			>
-				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
-					<View
-						style={ [
-							modalIconWrapperStyle,
-							itemWidth && {
-								width: itemWidth,
-							},
-							isClipboardBlock && clipboardBlockStyles,
-						] }
-					>
-						{ blockIsNew && (
-							<Icon
-								icon={ sparkles }
-								style={ styles.newIndicator }
-							/>
-						) }
-						<View style={ modalIconStyle }>
-							<BlockIcon
-								icon={ item.icon }
-								size={ modalIconStyle.width }
-							/>
-						</View>
+	return (
+		<TouchableHighlight
+			style={ [
+				styles.touchableArea,
+				item.isDisabled ? styles.disabled : null,
+			] }
+			underlayColor="transparent"
+			activeOpacity={ 0.5 }
+			accessibilityRole="button"
+			accessibilityLabel={ accessibilityLabel }
+			onPress={ onPress }
+			disabled={ item.isDisabled }
+		>
+			<View style={ [ styles.modalItem, { width: maxWidth } ] }>
+				<View
+					style={ [
+						modalIconWrapperStyle,
+						itemWidth && {
+							width: itemWidth,
+						},
+						isClipboardBlock && clipboardBlockStyles,
+					] }
+				>
+					{ blockIsNew && (
+						<Icon icon={ sparkles } style={ styles.newIndicator } />
+					) }
+					<View style={ modalIconStyle }>
+						<BlockIcon
+							icon={ item.icon }
+							size={ modalIconStyle.width }
+						/>
 					</View>
-					<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
-						{ blockTitle }
-					</Text>
 				</View>
-			</TouchableHighlight>
-		);
-	}
+				<Text numberOfLines={ 3 } style={ modalItemLabelStyle }>
+					{ blockTitle }
+				</Text>
+			</View>
+		</TouchableHighlight>
+	);
 }
 
 const InserterButton = withPreferredColorScheme( MenuItem );
diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss
index 68d4059340f5c9..41e302fef041ec 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -49,12 +49,13 @@
 	position: relative;
 	height: auto;
 
-	&:disabled {
+	&:disabled,
+	&[aria-disabled="true"] {
 		opacity: 0.6;
 		cursor: default;
 	}
 
-	&:not(:disabled) {
+	&:not(:disabled, [aria-disabled="true"]) {
 		&:hover {
 			.block-editor-block-types-list__item-title {
 				color: var(--wp-admin-theme-color) !important;
@@ -80,10 +81,6 @@
 			}
 		}
 
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-
 		&.is-active {
 			color: $white;
 			background: $gray-900;
@@ -93,6 +90,12 @@
 			outline-offset: -2px;
 		}
 	}
+
+	&:not(:disabled) {
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
 }
 
 .block-editor-block-types-list__item-icon {
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 2b746d411214e9..e1765e5bfda275 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
@@ -37,7 +37,7 @@ import { store as blockEditorStore } from '../../../store';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MEDIA_OPTIONS_POPOVER_PROPS = {
-	position: 'bottom left',
+	placement: 'bottom-end',
 	className:
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 204b4c9ade1edc..1f651f71f8b3ae 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -373,7 +373,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-15;
+		top: $header-height + $grid-unit-10;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
index 2ee73fb9f97eca..ca8e3afa3f8776 100644
--- a/packages/block-editor/src/components/keyboard-shortcuts/index.js
+++ b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -59,8 +59,8 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'backspace',
+				modifier: 'access',
+				character: 'z',
 			},
 		} );
 
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index c08daae0f8728d..635054e14c6ae4 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -501,7 +501,7 @@ function LinkControl( {
 LinkControl.ViewerFill = ViewerFill;
 LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 
-export const DeprecatedExperimentalLinkControl = ( props ) => {
+const DeprecatedExperimentalLinkControl = ( props ) => {
 	deprecated( 'wp.blockEditor.__experimentalLinkControl', {
 		since: '6.8',
 		alternative: 'wp.blockEditor.LinkControl',
@@ -510,4 +510,9 @@ export const DeprecatedExperimentalLinkControl = ( props ) => {
 	return <LinkControl { ...props } />;
 };
 
+DeprecatedExperimentalLinkControl.ViewerFill = LinkControl.ViewerFill;
+DeprecatedExperimentalLinkControl.DEFAULT_LINK_SETTINGS =
+	LinkControl.DEFAULT_LINK_SETTINGS;
+
+export { DeprecatedExperimentalLinkControl };
 export default LinkControl;
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 8b8092f4b9748e..06322843f41b7b 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -114,16 +114,23 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const _placeholder = placeholder ?? __( 'Search or type URL' );
+
+		const label =
+			hideLabelFromVision && placeholder !== ''
+				? _placeholder
+				: __( 'Link' );
+
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
-					label={ __( 'Link' ) }
+					label={ label }
 					hideLabelFromVision={ hideLabelFromVision }
 					className={ className }
 					value={ value }
 					onChange={ onInputChange }
-					placeholder={ placeholder ?? __( 'Search or type URL' ) }
+					placeholder={ _placeholder }
 					__experimentalRenderSuggestions={
 						showSuggestions ? handleRenderSuggestions : null
 					}
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index c10135f8e441a7..1d09aa94f6109f 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -345,6 +345,13 @@ $block-editor-link-control-number-of-actions: 1;
 	position: relative;
 }
 
+.block-editor-link-control__settings {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
 .block-editor-link-control__setting {
 	margin-bottom: 0;
 	flex: 1;
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 4d1fa11fb9226b..d1b2158938158b 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -139,7 +139,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -150,7 +150,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		expect( searchInput ).toBeVisible();
@@ -175,7 +175,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -290,7 +290,7 @@ describe( 'Basic rendering', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -304,7 +304,7 @@ describe( 'Basic rendering', () => {
 			render( <LinkControl value={ { url: 'https://example.com' } } /> );
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Link' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -317,7 +317,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 		} );
 
@@ -335,7 +335,7 @@ describe( 'Basic rendering', () => {
 			await user.click( editButton );
 
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 
 			// If passed `forceIsEditingLink` of `false` while editing, should
@@ -348,7 +348,7 @@ describe( 'Basic rendering', () => {
 			);
 
 			expect(
-				screen.queryByRole( 'combobox', { name: 'Link' } )
+				screen.queryByRole( 'combobox', { name: 'Search or type URL' } )
 			).not.toBeInTheDocument();
 		} );
 
@@ -438,7 +438,7 @@ describe( 'Basic rendering', () => {
 
 			// Should revert back to editing mode.
 			expect(
-				screen.getByRole( 'combobox', { name: 'Link' } )
+				screen.getByRole( 'combobox', { name: 'Search or type URL' } )
 			).toBeVisible();
 		} );
 	} );
@@ -461,7 +461,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -487,7 +487,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -538,7 +538,7 @@ describe( 'Searching for a link', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -571,7 +571,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -616,7 +616,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -635,7 +635,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -667,7 +667,7 @@ describe( 'Searching for a link', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -699,7 +699,7 @@ describe( 'Manual link entry', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -735,7 +735,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				if ( searchString.length ) {
@@ -769,7 +769,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Remove the existing link.
@@ -937,7 +937,7 @@ describe( 'Manual link entry', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -973,7 +973,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const submitButton = screen.getByRole( 'button', {
@@ -1012,7 +1012,7 @@ describe( 'Link submission', () => {
 		render( <LinkControlConsumer /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const createSubmitButton = screen.queryByRole( 'button', {
@@ -1059,9 +1059,9 @@ describe( 'Default search suggestions', () => {
 		// Verify input has no value has default suggestions should only show
 		// when this does not have a value.
 		// Search Input UI.
-		expect( screen.getByRole( 'combobox', { name: 'Link' } ) ).toHaveValue(
-			''
-		);
+		expect(
+			screen.getByRole( 'combobox', { name: 'Search or type URL' } )
+		).toHaveValue( '' );
 
 		// Ensure only called once as a guard against potential infinite
 		// re-render loop within `componentDidUpdate` calling `updateSuggestions`
@@ -1091,7 +1091,7 @@ describe( 'Default search suggestions', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Search input is set to the URL value.
@@ -1115,7 +1115,7 @@ describe( 'Default search suggestions', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1155,7 +1155,7 @@ describe( 'Default search suggestions', () => {
 		render( <LinkControl showInitialSuggestions /> );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		const searchResultsField = screen.queryByRole( 'listbox', {
@@ -1215,7 +1215,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -1285,7 +1285,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1338,7 +1338,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1385,7 +1385,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -1410,7 +1410,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1431,7 +1431,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			const searchResultsField = screen.queryByRole( 'listbox' );
@@ -1455,7 +1455,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1490,7 +1490,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 
 			// Search Input UI.
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
@@ -1507,7 +1507,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => {
 			await user.click( createButton );
 
 			searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			const errorNotice = screen.getAllByText(
@@ -1586,7 +1586,7 @@ describe( 'Selecting links', () => {
 		await user.click( currentLinkBtn );
 
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 		currentLinkUI = screen.queryByRole( 'group', {
 			name: 'Manage link',
@@ -1630,7 +1630,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1692,7 +1692,7 @@ describe( 'Selecting links', () => {
 
 				// Search Input UI.
 				const searchInput = screen.getByRole( 'combobox', {
-					name: 'Link',
+					name: 'Search or type URL',
 				} );
 
 				// Simulate searching for a term.
@@ -1783,7 +1783,7 @@ describe( 'Selecting links', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Step down into the search results, highlighting the first result item.
@@ -1841,7 +1841,7 @@ describe( 'Selecting links', () => {
 
 			// focus the search input
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			fireEvent.focus( searchInput );
@@ -2064,7 +2064,7 @@ describe( 'Post types', () => {
 
 		// Search Input UI.
 		const searchInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Simulate searching for a term.
@@ -2093,7 +2093,7 @@ describe( 'Post types', () => {
 
 			// Search Input UI.
 			const searchInput = screen.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} );
 
 			// Simulate searching for a term.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 9e005b91c06929..d7ecbe3fb1fb68 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -15,7 +15,7 @@ import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useDebounce } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
 import {
 	useCallback,
@@ -97,6 +97,10 @@ function ListViewBlock( {
 		insertBeforeBlock,
 		setOpenedBlockSettingsMenu,
 	} = unlock( useDispatch( blockEditorStore ) );
+	const debouncedToggleBlockHighlight = useDebounce(
+		toggleBlockHighlight,
+		50
+	);
 
 	const {
 		canInsertBlockType,
@@ -363,12 +367,12 @@ function ListViewBlock( {
 
 	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+		debouncedToggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, debouncedToggleBlockHighlight ] );
 	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+		debouncedToggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, debouncedToggleBlockHighlight ] );
 
 	const selectEditorBlock = useCallback(
 		( event ) => {
diff --git a/packages/block-editor/src/components/list-view/use-list-view-images.js b/packages/block-editor/src/components/list-view/use-list-view-images.js
index 97633349b6b028..63cf0b61cd6c87 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-images.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-images.js
@@ -11,47 +11,70 @@ import { store as blockEditorStore } from '../../store';
 
 // Maximum number of images to display in a list view row.
 const MAX_IMAGES = 3;
+const IMAGE_GETTERS = {
+	'core/image': ( { clientId, attributes } ) => {
+		if ( attributes.url ) {
+			return {
+				url: attributes.url,
+				alt: attributes.alt || '',
+				clientId,
+			};
+		}
+	},
+	'core/cover': ( { clientId, attributes } ) => {
+		if ( attributes.backgroundType === 'image' && attributes.url ) {
+			return {
+				url: attributes.url,
+				alt: attributes.alt || '',
+				clientId,
+			};
+		}
+	},
+	'core/media-text': ( { clientId, attributes } ) => {
+		if ( attributes.mediaType === 'image' && attributes.mediaUrl ) {
+			return {
+				url: attributes.mediaUrl,
+				alt: attributes.mediaAlt || '',
+				clientId,
+			};
+		}
+	},
+	'core/gallery': ( { innerBlocks } ) => {
+		const images = [];
+		const getValues = !! innerBlocks?.length
+			? IMAGE_GETTERS[ innerBlocks[ 0 ].name ]
+			: undefined;
+		if ( ! getValues ) {
+			return images;
+		}
 
-function getImage( block ) {
-	if ( block.name !== 'core/image' ) {
-		return;
-	}
+		for ( const innerBlock of innerBlocks ) {
+			const img = getValues( innerBlock );
+			if ( img ) {
+				images.push( img );
+			}
+			if ( images.length >= MAX_IMAGES ) {
+				return images;
+			}
+		}
 
-	if ( block.attributes?.url ) {
-		return {
-			url: block.attributes.url,
-			alt: block.attributes.alt,
-			clientId: block.clientId,
-		};
-	}
-}
+		return images;
+	},
+};
+
+function getImagesFromBlock( block, isExpanded ) {
+	const getImages = IMAGE_GETTERS[ block.name ];
+	const images = !! getImages ? getImages( block ) : undefined;
 
-function getImagesFromGallery( block ) {
-	if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
+	if ( ! images ) {
 		return [];
 	}
 
-	const images = [];
-
-	for ( const innerBlock of block.innerBlocks ) {
-		const img = getImage( innerBlock );
-		if ( img ) {
-			images.push( img );
-		}
-		if ( images.length >= MAX_IMAGES ) {
-			return images;
-		}
+	if ( ! Array.isArray( images ) ) {
+		return [ images ];
 	}
 
-	return images;
-}
-
-function getImagesFromBlock( block, isExpanded ) {
-	const img = getImage( block );
-	if ( img ) {
-		return [ img ];
-	}
-	return isExpanded ? [] : getImagesFromGallery( block );
+	return isExpanded ? [] : images;
 }
 
 /**
@@ -69,12 +92,10 @@ function getImagesFromBlock( block, isExpanded ) {
 export default function useListViewImages( { clientId, isExpanded } ) {
 	const { block } = useSelect(
 		( select ) => {
-			const _block = select( blockEditorStore ).getBlock( clientId );
-			return { block: _block };
+			return { block: select( blockEditorStore ).getBlock( clientId ) };
 		},
 		[ clientId ]
 	);
-
 	const images = useMemo( () => {
 		return getImagesFromBlock( block, isExpanded );
 	}, [ block, isExpanded ] );
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index 3d6578dcd39c24..3493eb1632b038 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -47,7 +47,7 @@ const InsertFromURLPopover = ( {
 			<InputControl
 				__next40pxDefaultSize
 				label={ __( 'URL' ) }
-				type="url"
+				type="text" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)
 				hideLabelFromVision
 				placeholder={ __( 'Paste or type URL' ) }
 				onChange={ onChange }
@@ -272,11 +272,11 @@ export function MediaPlaceholder( {
 			} )
 		).catch( ( err ) => onError( err ) );
 
-		if ( multiple ) {
-			onSelect( uploadedMediaList );
-		} else {
-			onSelect( uploadedMediaList[ 0 ] );
+		if ( ! uploadedMediaList?.length ) {
+			return;
 		}
+
+		onSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );
 	}
 
 	const onUpload = ( event ) => {
diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
index 6eff22f75d8ff5..c37eda3297170c 100644
--- a/packages/block-editor/src/components/media-placeholder/style.scss
+++ b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -4,4 +4,10 @@
 	@include break-small() {
 		width: 300px;
 	}
+
+	input {
+		// Targeting input as we're using text instead of URLs for relative paths.
+		/* rtl:ignore */
+		direction: ltr;
+	}
 }
diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js
index 1d326804f0dcca..12ecf32186d017 100644
--- a/packages/block-editor/src/components/media-replace-flow/test/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/test/index.js
@@ -110,7 +110,7 @@ describe( 'General media replace flow', () => {
 		);
 
 		const mediaURLInput = screen.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Paste or type URL',
 			expanded: false,
 		} );
 
diff --git a/packages/block-editor/src/components/rich-text/README.md b/packages/block-editor/src/components/rich-text/README.md
index f08d75c5bec45e..333403b801e553 100644
--- a/packages/block-editor/src/components/rich-text/README.md
+++ b/packages/block-editor/src/components/rich-text/README.md
@@ -23,7 +23,7 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
 ### `placeholder: String`
 
 _Optional._ Placeholder text to show when the field is empty, similar to the
-[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
+[`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder).
 
 ### `disableLineBreaks: Boolean`
 
diff --git a/packages/block-editor/src/components/rich-text/event-listeners/delete.js b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
index ad59ae8a70d322..ae3fd733bb94e1 100644
--- a/packages/block-editor/src/components/rich-text/event-listeners/delete.js
+++ b/packages/block-editor/src/components/rich-text/event-listeners/delete.js
@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
+		const { keyCode } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,11 +30,6 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey && ( ctrlKey || metaKey ) ) {
-				return;
-			}
-
 			if ( onMerge ) {
 				onMerge( ! isReverse );
 			}
diff --git a/packages/block-editor/src/components/spacing-sizes-control/style.scss b/packages/block-editor/src/components/spacing-sizes-control/style.scss
index 26f3dc586bb54b..d7f8ca6636e518 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -1,4 +1,9 @@
 .spacing-sizes-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+
 	.spacing-sizes-control__custom-value-input,
 	.spacing-sizes-control__label {
 		margin-bottom: 0;
diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
index 560f5cd7d3d5db..098b1ce8685e1b 100644
--- a/packages/block-editor/src/components/url-input/button.js
+++ b/packages/block-editor/src/components/url-input/button.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { useReducer } from '@wordpress/element';
 import {
 	Button,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
@@ -14,73 +14,67 @@ import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
  */
 import URLInput from './';
 
-class URLInputButton extends Component {
-	constructor() {
-		super( ...arguments );
-		this.toggle = this.toggle.bind( this );
-		this.submitLink = this.submitLink.bind( this );
-		this.state = {
-			expanded: false,
-		};
-	}
-
-	toggle() {
-		this.setState( { expanded: ! this.state.expanded } );
-	}
+/**
+ * A button that toggles a URL input field for inserting or editing links.
+ *
+ * @param {Object}   props          Component properties.
+ * @param {string}   props.url      The current URL value.
+ * @param {Function} props.onChange Callback function to handle URL changes.
+ * @return {JSX.Element} The URL input button component.
+ */
+function URLInputButton( { url, onChange } ) {
+	const [ expanded, toggleExpanded ] = useReducer(
+		( isExpanded ) => ! isExpanded,
+		false
+	);
 
-	submitLink( event ) {
+	const submitLink = ( event ) => {
 		event.preventDefault();
-		this.toggle();
-	}
-
-	render() {
-		const { url, onChange } = this.props;
-		const { expanded } = this.state;
-		const buttonLabel = url ? __( 'Edit link' ) : __( 'Insert link' );
+		toggleExpanded();
+	};
 
-		return (
-			<div className="block-editor-url-input__button">
-				<Button
-					size="compact"
-					icon={ link }
-					label={ buttonLabel }
-					onClick={ this.toggle }
-					className="components-toolbar__control"
-					isPressed={ !! url }
-				/>
-				{ expanded && (
-					<form
-						className="block-editor-url-input__button-modal"
-						onSubmit={ this.submitLink }
-					>
-						<div className="block-editor-url-input__button-modal-line">
-							<Button
-								__next40pxDefaultSize
-								className="block-editor-url-input__back"
-								icon={ arrowLeft }
-								label={ __( 'Close' ) }
-								onClick={ this.toggle }
-							/>
-							<URLInput
-								value={ url || '' }
-								onChange={ onChange }
-								suffix={
-									<InputControlSuffixWrapper variant="control">
-										<Button
-											size="small"
-											icon={ keyboardReturn }
-											label={ __( 'Submit' ) }
-											type="submit"
-										/>
-									</InputControlSuffixWrapper>
-								}
-							/>
-						</div>
-					</form>
-				) }
-			</div>
-		);
-	}
+	return (
+		<div className="block-editor-url-input__button">
+			<Button
+				size="compact"
+				icon={ link }
+				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
+				onClick={ toggleExpanded }
+				className="components-toolbar__control"
+				isPressed={ !! url }
+			/>
+			{ expanded && (
+				<form
+					className="block-editor-url-input__button-modal"
+					onSubmit={ submitLink }
+				>
+					<div className="block-editor-url-input__button-modal-line">
+						<Button
+							__next40pxDefaultSize
+							className="block-editor-url-input__back"
+							icon={ arrowLeft }
+							label={ __( 'Close' ) }
+							onClick={ toggleExpanded }
+						/>
+						<URLInput
+							value={ url || '' }
+							onChange={ onChange }
+							suffix={
+								<InputControlSuffixWrapper variant="control">
+									<Button
+										size="small"
+										icon={ keyboardReturn }
+										label={ __( 'Submit' ) }
+										type="submit"
+									/>
+								</InputControlSuffixWrapper>
+							}
+						/>
+					</div>
+				</form>
+			) }
+		</div>
+	);
 }
 
 /**
diff --git a/packages/block-editor/src/components/url-popover/stories/index.story.js b/packages/block-editor/src/components/url-popover/stories/index.story.js
index ceed23eed6b841..aa5628fd5db71b 100644
--- a/packages/block-editor/src/components/url-popover/stories/index.story.js
+++ b/packages/block-editor/src/components/url-popover/stories/index.story.js
@@ -20,6 +20,10 @@ const TestURLPopover = () => {
 	const close = () => setVisiblility( false );
 	const setTarget = () => {};
 
+	const handleUrlChange = ( event ) => {
+		setUrl( event.target.value );
+	};
+
 	return (
 		<>
 			<Button
@@ -40,7 +44,11 @@ const TestURLPopover = () => {
 					) }
 				>
 					<form onSubmit={ close }>
-						<input type="url" value={ url } onChange={ setUrl } />
+						<input
+							type="url"
+							value={ url }
+							onChange={ handleUrlChange }
+						/>
 						<Button
 							__next40pxDefaultSize
 							icon={ keyboardReturn }
diff --git a/packages/block-editor/src/components/use-paste-styles/index.js b/packages/block-editor/src/components/use-paste-styles/index.js
index 1c2a844488b862..3be3efc295a68b 100644
--- a/packages/block-editor/src/components/use-paste-styles/index.js
+++ b/packages/block-editor/src/components/use-paste-styles/index.js
@@ -204,7 +204,7 @@ export default function usePasteStyles() {
 				const title = getBlockType( targetBlocks[ 0 ].name )?.title;
 				createSuccessNotice(
 					sprintf(
-						// Translators: Name of the block being pasted, e.g. "Paragraph".
+						// Translators: %s: Name of the block being pasted, e.g. "Paragraph".
 						__( 'Pasted styles to %s.' ),
 						title
 					),
@@ -213,7 +213,7 @@ export default function usePasteStyles() {
 			} else {
 				createSuccessNotice(
 					sprintf(
-						// Translators: The number of the blocks.
+						// Translators: %d: The number of the blocks.
 						__( 'Pasted styles to %d blocks.' ),
 						targetBlocks.length
 					),
diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index 0aa46c9c3278f7..3b4d97a097964c 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					maxWidth: '100%',
+					overflowY: 'auto',
 				};
 			default:
 				return {
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 17a014107b43af..6185b339b0475a 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -36,7 +36,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 									icon={ moreVertical }
 									label={ __( 'More options' ) }
 									popoverProps={ {
-										position: 'bottom left',
+										placement: 'bottom-end',
 										className:
 											'block-editor-warning__dropdown',
 									} }
diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 246e4fde7d8ba8..b6a1989870daf2 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -124,9 +124,10 @@ function DuotonePanelPure( { style, setAttributes, name } ) {
 		return null;
 	}
 
-	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
-		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
-		: duotoneStyle;
+	const duotonePresetOrColors =
+		duotoneStyle === 'unset' || Array.isArray( duotoneStyle )
+			? duotoneStyle
+			: getColorsFromDuotonePreset( duotoneStyle, duotonePalette );
 
 	return (
 		<>
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 400b09490bbe51..7424141cc4178b 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -17,3 +17,11 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.block-editor-hooks__grid-layout-columns-and-rows-controls,
+.block-editor-hooks__grid-layout-minimum-width-control {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
diff --git a/packages/block-editor/src/hooks/spacing-visualizer.js b/packages/block-editor/src/hooks/spacing-visualizer.js
index 2f0abe8e0d293d..0a058a70be4789 100644
--- a/packages/block-editor/src/hooks/spacing-visualizer.js
+++ b/packages/block-editor/src/hooks/spacing-visualizer.js
@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	useRef,
-	useLayoutEffect,
-	useEffect,
-	useReducer,
-} from '@wordpress/element';
+import { useState, useRef, useEffect, useReducer } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -22,19 +16,22 @@ function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 		computeStyle( blockElement )
 	);
 
-	useLayoutEffect( () => {
+	// It's not sufficient to read the block’s computed style when `value` changes because
+	// the effect would run before the block’s style has updated. Thus observing mutations
+	// to the block’s attributes is used to trigger updates to the visualizer’s styles.
+	useEffect( () => {
 		if ( ! blockElement ) {
 			return;
 		}
-		// It's not sufficient to read the computed spacing value when value.spacing changes as
-		// useEffect may run before the browser recomputes CSS. We therefore combine
-		// useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
-		// paint but before the next paint.
-		// See https://github.com/WordPress/gutenberg/pull/59227.
-		window.requestAnimationFrame( () =>
-			window.requestAnimationFrame( updateStyle )
-		);
-	}, [ blockElement, value ] );
+		const observer = new window.MutationObserver( updateStyle );
+		observer.observe( blockElement, {
+			attributes: true,
+			attributeFilter: [ 'style', 'class' ],
+		} );
+		return () => {
+			observer.disconnect();
+		};
+	}, [ blockElement ] );
 
 	const previousValueRef = useRef( value );
 	const [ isActive, setIsActive ] = useState( false );
diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
index cf3f4327c8f034..2607f6d9301067 100644
--- a/packages/block-editor/src/hooks/typography.js
+++ b/packages/block-editor/src/hooks/typography.js
@@ -53,9 +53,11 @@ function styleToAttributes( style ) {
 	const updatedStyle = { ...omit( style, [ 'fontFamily' ] ) };
 	const fontSizeValue = style?.typography?.fontSize;
 	const fontFamilyValue = style?.typography?.fontFamily;
-	const fontSizeSlug = fontSizeValue?.startsWith( 'var:preset|font-size|' )
-		? fontSizeValue.substring( 'var:preset|font-size|'.length )
-		: undefined;
+	const fontSizeSlug =
+		typeof fontSizeValue === 'string' &&
+		fontSizeValue?.startsWith( 'var:preset|font-size|' )
+			? fontSizeValue.substring( 'var:preset|font-size|'.length )
+			: undefined;
 	const fontFamilySlug = fontFamilyValue?.startsWith(
 		'var:preset|font-family|'
 	)
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index f57ccbde466169..b1d6a92bdbf5f9 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -56,6 +56,11 @@ const verticalAlignmentMap = {
 	'space-between': 'space-between',
 };
 
+const defaultAlignments = {
+	horizontal: 'center',
+	vertical: 'top',
+};
+
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
@@ -201,8 +206,8 @@ function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 
 	const defaultVerticalAlignment =
 		orientation === 'horizontal'
-			? verticalAlignmentMap.center
-			: verticalAlignmentMap.top;
+			? defaultAlignments.horizontal
+			: defaultAlignments.vertical;
 
 	const { verticalAlignment = defaultVerticalAlignment } = layout;
 
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index f1573b5c949603..2618e0189c0e5f 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -243,7 +243,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 	};
 
 	return (
-		<fieldset>
+		<fieldset className="block-editor-hooks__grid-layout-minimum-width-control">
 			<BaseControl.VisualLabel as="legend">
 				{ __( 'Minimum column width' ) }
 			</BaseControl.VisualLabel>
@@ -302,7 +302,7 @@ function GridLayoutColumnsAndRowsControl( {
 
 	return (
 		<>
-			<fieldset>
+			<fieldset className="block-editor-hooks__grid-layout-columns-and-rows-controls">
 				{ ( ! window.__experimentalEnableGridInteractivity ||
 					! isManualPlacement ) && (
 					<BaseControl.VisualLabel as="legend">
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 21b9f4bca7fc3d..f1a1908b2427ed 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -50,6 +50,7 @@ import useBlockDisplayTitle from './components/block-title/use-block-display-tit
 import TabbedSidebar from './components/tabbed-sidebar';
 import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
 import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+import HTMLElementControl from './components/html-element-control';
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -80,6 +81,7 @@ lock( privateApis, {
 	TextAlignmentControl,
 	usesContextKey,
 	useFlashEditableBlocks,
+	HTMLElementControl,
 	useZoomOut,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
diff --git a/packages/block-editor/src/private-apis.native.js b/packages/block-editor/src/private-apis.native.js
index f99d523933106b..5008f2025595ea 100644
--- a/packages/block-editor/src/private-apis.native.js
+++ b/packages/block-editor/src/private-apis.native.js
@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import { lock } from './lock-unlock';
 import { PrivateRichText } from './components/rich-text/';
+import HTMLElementControl from './components/html-element-control';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -16,4 +17,5 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getRichTextValues,
 	PrivateRichText,
+	HTMLElementControl,
 } );
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 32362968325efe..56924ed6abe3fe 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -216,14 +216,15 @@ export function selectBlock( clientId, initialPosition = 0 ) {
  * Returns an action object used in signalling that the block with the
  * specified client ID has been hovered.
  *
- * @param {string} clientId Block client ID.
- *
- * @return {Object} Action object.
+ * @deprecated
  */
-export function hoverBlock( clientId ) {
+export function hoverBlock() {
+	deprecated( 'wp.data.dispatch( "core/block-editor" ).hoverBlock', {
+		since: '6.9',
+		version: '7.1',
+	} );
 	return {
-		type: 'HOVER_BLOCK',
-		clientId,
+		type: 'DO_NOTHING',
 	};
 }
 
@@ -1157,7 +1158,11 @@ export const mergeBlocks =
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		if ( ! blockAType ) {
+		if (
+			! blockAType ||
+			select.getBlockEditingMode( clientIdA ) === 'disabled' ||
+			select.getBlockEditingMode( clientIdB ) === 'disabled'
+		) {
 			return;
 		}
 
@@ -1250,7 +1255,14 @@ export const mergeBlocks =
 		}
 
 		if ( ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			if ( isUnmodifiedBlock( blockB, 'content' ) ) {
+				dispatch.removeBlock(
+					clientIdB,
+					select.isBlockSelected( clientIdB )
+				);
+			} else {
+				dispatch.selectBlock( blockA.clientId );
+			}
 			return;
 		}
 
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index fc3803462d8920..6e2c78a47f5fd7 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -2055,23 +2055,6 @@ export function lastFocus( state = false, action ) {
 	return state;
 }
 
-/**
- * Reducer setting currently hovered block.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function hoveredBlockClientId( state = false, action ) {
-	switch ( action.type ) {
-		case 'HOVER_BLOCK':
-			return action.clientId;
-	}
-
-	return state;
-}
-
 /**
  * Reducer setting zoom out state.
  *
@@ -2141,7 +2124,6 @@ const combinedReducers = combineReducers( {
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
-	hoveredBlockClientId,
 	zoomLevel,
 } );
 
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index e2e2ef6b655564..8626905879af08 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1807,9 +1807,9 @@ export const canInsertBlockType = createRegistrySelector( ( select ) =>
  * Determines if the given blocks are allowed to be inserted into the block
  * list.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientIds    The block client IDs to be inserted.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param {Object}   state        Editor state.
+ * @param {string[]} clientIds    The block client IDs to be inserted.
+ * @param {?string}  rootClientId Optional root client ID of block list.
  *
  * @return {boolean} Whether the given blocks are allowed to be inserted.
  */
@@ -2318,26 +2318,21 @@ export const getBlockTransformItems = createRegistrySelector( ( select ) =>
  *
  * @return {boolean} Items that appear in inserter.
  */
-export const hasInserterItems = createRegistrySelector(
-	( select ) =>
-		( state, rootClientId = null ) => {
-			const hasBlockType = getBlockTypes().some( ( blockType ) =>
-				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
-			);
-			if ( hasBlockType ) {
-				return true;
-			}
-			const hasReusableBlock =
-				canInsertBlockTypeUnmemoized(
-					state,
-					'core/block',
-					rootClientId
-				) &&
-				unlock( select( STORE_NAME ) ).getReusableBlocks().length > 0;
+export const hasInserterItems = ( state, rootClientId = null ) => {
+	const hasBlockType = getBlockTypes().some( ( blockType ) =>
+		canIncludeBlockTypeInInserter( state, blockType, rootClientId )
+	);
+	if ( hasBlockType ) {
+		return true;
+	}
+	const hasReusableBlock = canInsertBlockTypeUnmemoized(
+		state,
+		'core/block',
+		rootClientId
+	);
 
-			return hasReusableBlock;
-		}
-);
+	return hasReusableBlock;
+};
 
 /**
  * Returns the list of allowed inserter blocks for inner blocks children.
@@ -2358,13 +2353,11 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) =>
 				canIncludeBlockTypeInInserter( state, blockType, rootClientId )
 			);
 
-			const hasReusableBlock =
-				canInsertBlockTypeUnmemoized(
-					state,
-					'core/block',
-					rootClientId
-				) &&
-				unlock( select( STORE_NAME ) ).getReusableBlocks().length > 0;
+			const hasReusableBlock = canInsertBlockTypeUnmemoized(
+				state,
+				'core/block',
+				rootClientId
+			);
 
 			if ( hasReusableBlock ) {
 				blockTypes.push( 'core/block' );
@@ -2374,7 +2367,6 @@ export const getAllowedBlocks = createRegistrySelector( ( select ) =>
 		},
 		( state, rootClientId ) => [
 			getBlockTypes(),
-			unlock( select( STORE_NAME ) ).getReusableBlocks(),
 			...getInsertBlockTypeDependants( select )( state, rootClientId ),
 		]
 	)
@@ -2920,11 +2912,17 @@ export function isBlockVisible( state, clientId ) {
 /**
  * Returns the currently hovered block.
  *
- * @param {Object} state Global application state.
- * @return {Object} Client Id of the hovered block.
+ * @deprecated
  */
-export function getHoveredBlockClientId( state ) {
-	return state.hoveredBlockClientId;
+export function getHoveredBlockClientId() {
+	deprecated(
+		"wp.data.select( 'core/block-editor' ).getHoveredBlockClientId",
+		{
+			since: '6.9',
+			version: '7.1',
+		}
+	);
+	return undefined;
 }
 
 /**
diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js
index ce973e44f4523b..843a8ce0571408 100644
--- a/packages/block-editor/src/store/test/actions.js
+++ b/packages/block-editor/src/store/test/actions.js
@@ -808,8 +808,16 @@ describe( 'actions', () => {
 			} );
 		} );
 
-		it( 'should only focus the blockA if the blockA has no merge function', () => {
-			registerBlockType( 'core/test-block', defaultBlockSettings );
+		it( 'should only focus the blockA if the blockA has no merge function and the content of blockB is modified', () => {
+			registerBlockType( 'core/test-block', {
+				...defaultBlockSettings,
+				attributes: {
+					content: {
+						type: 'string',
+						role: 'content',
+					},
+				},
+			} );
 			const blockA = deepFreeze( {
 				clientId: 'chicken',
 				name: 'core/test-block',
@@ -817,14 +825,20 @@ describe( 'actions', () => {
 			const blockB = deepFreeze( {
 				clientId: 'ribs',
 				name: 'core/test-block',
+				attributes: {
+					content: 'Updated content',
+				},
 			} );
 
 			const select = {
 				getBlock: ( clientId ) =>
 					[ blockA, blockB ].find( ( b ) => b.clientId === clientId ),
+				getBlockEditingMode: () => 'default',
+				isBlockSelected: () => false,
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				selectBlock: jest.fn(),
+				removeBlock: jest.fn(),
 			} );
 
 			mergeBlocks(
@@ -873,6 +887,7 @@ describe( 'actions', () => {
 					attributeKey: 'content',
 					offset: 0,
 				} ),
+				getBlockEditingMode: () => 'default',
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				replaceBlocks: jest.fn(),
@@ -943,6 +958,7 @@ describe( 'actions', () => {
 					attributeKey: 'content',
 					offset: 0,
 				} ),
+				getBlockEditingMode: () => 'default',
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				replaceBlocks: jest.fn(),
@@ -1019,6 +1035,7 @@ describe( 'actions', () => {
 					attributeKey: 'content2',
 					offset: 0,
 				} ),
+				getBlockEditingMode: () => 'default',
 			};
 			const dispatch = Object.assign( jest.fn(), {
 				replaceBlocks: jest.fn(),
@@ -1049,6 +1066,124 @@ describe( 'actions', () => {
 				0
 			);
 		} );
+
+		it( 'should not merge the blocks if blockB editing mode is `disabled`', () => {
+			registerBlockType( 'core/test-block', {
+				attributes: {
+					content: {},
+				},
+				merge( attributes, attributesToMerge ) {
+					return {
+						content:
+							attributes.content +
+							' ' +
+							attributesToMerge.content,
+					};
+				},
+				save: noop,
+				category: 'text',
+				title: 'test block',
+			} );
+			const blockA = deepFreeze( {
+				clientId: 'chicken',
+				name: 'core/test-block',
+				attributes: { content: 'chicken' },
+				innerBlocks: [],
+			} );
+			const blockB = deepFreeze( {
+				clientId: 'ribs',
+				name: 'core/test-block',
+				attributes: { content: 'ribs' },
+				innerBlocks: [],
+			} );
+
+			const modes = {
+				chicken: 'default',
+				ribs: 'disabled',
+			};
+
+			const select = {
+				getBlock: ( clientId ) =>
+					[ blockA, blockB ].find( ( b ) => b.clientId === clientId ),
+				getSelectionStart: () => ( {
+					clientId: blockB.clientId,
+					attributeKey: 'content',
+					offset: 0,
+				} ),
+				getBlockEditingMode: ( clientId ) => modes[ clientId ],
+			};
+			const dispatch = Object.assign( jest.fn(), {
+				replaceBlocks: jest.fn(),
+				selectionChange: jest.fn(),
+			} );
+
+			mergeBlocks(
+				blockA.clientId,
+				blockB.clientId
+			)( { select, dispatch } );
+
+			expect( dispatch.selectionChange ).not.toHaveBeenCalled();
+			expect( dispatch.replaceBlocks ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should not merge the blocks if blockA editing mode is `disabled`', () => {
+			registerBlockType( 'core/test-block', {
+				attributes: {
+					content: {},
+				},
+				merge( attributes, attributesToMerge ) {
+					return {
+						content:
+							attributes.content +
+							' ' +
+							attributesToMerge.content,
+					};
+				},
+				save: noop,
+				category: 'text',
+				title: 'test block',
+			} );
+			const blockA = deepFreeze( {
+				clientId: 'chicken',
+				name: 'core/test-block',
+				attributes: { content: 'chicken' },
+				innerBlocks: [],
+			} );
+			const blockB = deepFreeze( {
+				clientId: 'ribs',
+				name: 'core/test-block',
+				attributes: { content: 'ribs' },
+				innerBlocks: [],
+			} );
+
+			const modes = {
+				chicken: 'disabled',
+				ribs: 'default',
+			};
+
+			const select = {
+				getBlock: ( clientId ) =>
+					[ blockA, blockB ].find( ( b ) => b.clientId === clientId ),
+				getSelectionStart: () => ( {
+					clientId: blockB.clientId,
+					attributeKey: 'content',
+					offset: 0,
+				} ),
+				getBlockEditingMode: ( clientId ) => modes[ clientId ],
+			};
+			const dispatch = Object.assign( jest.fn(), {
+				replaceBlocks: jest.fn(),
+				selectionChange: jest.fn(),
+			} );
+
+			mergeBlocks(
+				blockA.clientId,
+				blockB.clientId
+			)( { select, dispatch } );
+
+			expect( dispatch.selectionChange ).not.toHaveBeenCalled();
+			expect( dispatch.replaceBlocks ).not.toHaveBeenCalled();
+		} );
 	} );
 
 	describe( 'validateBlocksToTemplate', () => {
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index dd559922c48159..5d9298c34ed9f2 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -33,7 +33,6 @@
 @import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/iframe/style.scss";
-@import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/inspector-controls-tabs/style.scss";
 @import "./components/inspector-popover-header/style.scss";
diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js
index 51742f476a5fd2..4cc145b22e4ab5 100644
--- a/packages/block-editor/src/utils/use-notify-copy.js
+++ b/packages/block-editor/src/utils/use-notify-copy.js
@@ -29,13 +29,13 @@ export function useNotifyCopy() {
 
 				if ( eventType === 'copy' ) {
 					notice = sprintf(
-						// Translators: Name of the block being copied, e.g. "Paragraph".
+						// Translators: %s: Name of the block being copied, e.g. "Paragraph".
 						__( 'Copied "%s" to clipboard.' ),
 						title
 					);
 				} else {
 					notice = sprintf(
-						// Translators: Name of the block being cut, e.g. "Paragraph".
+						// Translators: %s: Name of the block being cut, e.g. "Paragraph".
 						__( 'Moved "%s" to clipboard.' ),
 						title
 					);
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 5d0246471395f0..e5223241f62589 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 9.27.0 (2025-07-23)
+
+## 9.26.0 (2025-06-25)
+
+## 9.25.0 (2025-06-04)
+
+## 9.24.0 (2025-05-22)
+
+## 9.23.0 (2025-05-07)
+
+## 9.22.0 (2025-04-11)
+
 ## 9.21.0 (2025-03-27)
 
 ## 9.20.0 (2025-03-13)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index f575c9df492d5a..081179a2b4577e 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.21.0",
+	"version": "9.27.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/archives/editor.scss b/packages/block-library/src/archives/editor.scss
index eb657b595f7141..2dd24f15be917f 100644
--- a/packages/block-library/src/archives/editor.scss
+++ b/packages/block-library/src/archives/editor.scss
@@ -1,7 +1,3 @@
-ul.wp-block-archives {
-	padding-left: 2.5em;
-}
-
 // The following styles are to prevent duplicate spacing and borders for the archives
 // block in the editor given it uses server side rendering.
 // See https://github.com/WordPress/gutenberg/pull/63400
diff --git a/packages/block-library/src/avatar/edit.js b/packages/block-library/src/avatar/edit.js
index 8309bc5e878a0e..19c81884e8852f 100644
--- a/packages/block-library/src/avatar/edit.js
+++ b/packages/block-library/src/avatar/edit.js
@@ -12,10 +12,11 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	RangeControl,
 	ResizableBox,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
@@ -23,7 +24,8 @@ import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useUserAvatar, useCommentAvatar } from './hooks';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { useCommentAvatar, useUserAvatar } from './hooks';
 import UserControl from './user-control';
 
 const AvatarInspectorControls = ( {
@@ -31,56 +33,102 @@ const AvatarInspectorControls = ( {
 	avatar,
 	attributes,
 	selectUser,
-} ) => (
-	<InspectorControls>
-		<PanelBody title={ __( 'Settings' ) }>
-			<RangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'Image size' ) }
-				onChange={ ( newSize ) =>
+} ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	return (
+		<InspectorControls>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
 					setAttributes( {
-						size: newSize,
-					} )
-				}
-				min={ avatar.minSize }
-				max={ avatar.maxSize }
-				initialPosition={ attributes?.size }
-				value={ attributes?.size }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Link to user profile' ) }
-				onChange={ () =>
-					setAttributes( { isLink: ! attributes.isLink } )
-				}
-				checked={ attributes.isLink }
-			/>
-			{ attributes.isLink && (
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Open in new tab' ) }
-					onChange={ ( value ) =>
-						setAttributes( {
-							linkTarget: value ? '_blank' : '_self',
-						} )
-					}
-					checked={ attributes.linkTarget === '_blank' }
-				/>
-			) }
-			{ selectUser && (
-				<UserControl
-					value={ attributes?.userId }
-					onChange={ ( value ) => {
-						setAttributes( {
-							userId: value,
-						} );
-					} }
-				/>
-			) }
-		</PanelBody>
-	</InspectorControls>
-);
+						size: 96,
+						isLink: false,
+						linkTarget: '_self',
+						userId: undefined,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Image size' ) }
+					isShownByDefault
+					hasValue={ () => attributes?.size !== 96 }
+					onDeselect={ () => setAttributes( { size: 96 } ) }
+				>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Image size' ) }
+						onChange={ ( newSize ) =>
+							setAttributes( {
+								size: newSize,
+							} )
+						}
+						min={ avatar.minSize }
+						max={ avatar.maxSize }
+						initialPosition={ attributes?.size }
+						value={ attributes?.size }
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					label={ __( 'Link to user profile' ) }
+					isShownByDefault
+					hasValue={ () => attributes?.isLink }
+					onDeselect={ () => setAttributes( { isLink: false } ) }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to user profile' ) }
+						onChange={ () =>
+							setAttributes( { isLink: ! attributes.isLink } )
+						}
+						checked={ attributes.isLink }
+					/>
+				</ToolsPanelItem>
+				{ attributes.isLink && (
+					<ToolsPanelItem
+						label={ __( 'Open in new tab' ) }
+						isShownByDefault
+						hasValue={ () => attributes?.linkTarget !== '_self' }
+						onDeselect={ () =>
+							setAttributes( { linkTarget: '_self' } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ attributes.linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
+				) }
+				{ selectUser && (
+					<ToolsPanelItem
+						label={ __( 'User' ) }
+						isShownByDefault
+						hasValue={ () => !! attributes?.userId }
+						onDeselect={ () =>
+							setAttributes( { userId: undefined } )
+						}
+					>
+						<UserControl
+							value={ attributes?.userId }
+							onChange={ ( value ) => {
+								setAttributes( {
+									userId: value,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanel>
+		</InspectorControls>
+	);
+};
 
 const ResizableAvatar = ( {
 	setAttributes,
diff --git a/packages/block-library/src/avatar/user-control.js b/packages/block-library/src/avatar/user-control.js
index 235202ffec90d7..da06193f2f92ac 100644
--- a/packages/block-library/src/avatar/user-control.js
+++ b/packages/block-library/src/avatar/user-control.js
@@ -5,31 +5,45 @@ import { __ } from '@wordpress/i18n';
 import { ComboboxControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
+import { debounce } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
-	per_page: -1,
+	per_page: 100,
 	_fields: 'id,name',
 	context: 'view',
 };
 
-function UserControl( { value, onChange } ) {
-	const [ filteredAuthorsList, setFilteredAuthorsList ] = useState();
-	const authorsList = useSelect( ( select ) => {
-		const { getUsers } = select( coreStore );
-		return getUsers( AUTHORS_QUERY );
-	}, [] );
-	if ( ! authorsList ) {
-		return null;
-	}
+export default function UserControl( { value, onChange } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const { authors, isLoading } = useSelect(
+		( select ) => {
+			const { getUsers, isResolving } = select( coreStore );
 
-	const options = authorsList.map( ( author ) => {
-		return {
-			label: author.name,
-			value: author.id,
-		};
-	} );
+			const query = { ...AUTHORS_QUERY };
+			if ( filterValue ) {
+				query.search = filterValue;
+				query.search_columns = [ 'name' ];
+			}
+
+			return {
+				authors: getUsers( query ),
+				isLoading: isResolving( 'getUsers', [ query ] ),
+			};
+		},
+		[ filterValue ]
+	);
+
+	const options = useMemo( () => {
+		return ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+	}, [ authors ] );
 
 	return (
 		<ComboboxControl
@@ -41,18 +55,9 @@ function UserControl( { value, onChange } ) {
 			) }
 			value={ value }
 			onChange={ onChange }
-			options={ filteredAuthorsList || options }
-			onFilterValueChange={ ( inputValue ) =>
-				setFilteredAuthorsList(
-					options.filter( ( option ) =>
-						option.label
-							.toLowerCase()
-							.startsWith( inputValue.toLowerCase() )
-					)
-				)
-			}
+			options={ options }
+			onFilterValueChange={ debounce( setFilterValue, 300 ) }
+			isLoading={ isLoading }
 		/>
 	);
 }
-
-export default UserControl;
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index b5782681ab70bb..04dee0ede8674c 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -10,6 +10,7 @@ import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -47,6 +48,7 @@ import {
 	useBlockEditingMode,
 	getTypographyClassesAndStyles as useTypographyProps,
 	useSettings,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -59,6 +61,8 @@ import {
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
 	{
@@ -155,7 +159,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 								key={ widthValue }
 								value={ widthValue }
 								label={ sprintf(
-									/* translators: Percentage value. */
+									/* translators: %d: Percentage value. */
 									__( '%d%%' ),
 									widthValue
 								) }
@@ -325,6 +329,10 @@ function ButtonEdit( props ) {
 		},
 	} );
 
+	const hasNonContentControls = blockEditingMode === 'default';
+	const hasBlockControls =
+		hasNonContentControls || ( isLinkTag && ! lockUrlControls );
+
 	return (
 		<>
 			<div
@@ -374,35 +382,32 @@ function ButtonEdit( props ) {
 					identifier="text"
 				/>
 			</div>
-			<BlockControls group="block">
-				{ blockEditingMode === 'default' && (
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-				) }
-				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
-					<ToolbarButton
-						name="link"
-						icon={ link }
-						title={ __( 'Link' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ startEditing }
-					/>
-				) }
-				{ isURLSet && isLinkTag && ! lockUrlControls && (
-					<ToolbarButton
-						name="link"
-						icon={ linkOff }
-						title={ __( 'Unlink' ) }
-						shortcut={ displayShortcut.primaryShift( 'k' ) }
-						onClick={ unlink }
-						isActive
-					/>
-				) }
-			</BlockControls>
+			{ hasBlockControls && (
+				<BlockControls group="block">
+					{ hasNonContentControls && (
+						<AlignmentControl
+							value={ textAlign }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { textAlign: nextAlign } );
+							} }
+						/>
+					) }
+					{ isLinkTag && ! lockUrlControls && (
+						<ToolbarButton
+							name="link"
+							icon={ ! isURLSet ? link : linkOff }
+							title={ ! isURLSet ? __( 'Link' ) : __( 'Unlink' ) }
+							shortcut={
+								! isURLSet
+									? displayShortcut.primary( 'k' )
+									: displayShortcut.primaryShift( 'k' )
+							}
+							onClick={ ! isURLSet ? startEditing : unlink }
+							isActive={ isURLSet }
+						/>
+					) }
+				</BlockControls>
+			) }
 			{ isLinkTag &&
 				isSelected &&
 				( isEditingURL || isURLSet ) &&
@@ -455,6 +460,16 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					options={ [
+						{ label: __( 'Default (<a>)' ), value: 'a' },
+						{ label: '<button>', value: 'button' },
+					] }
+				/>
 				{ isLinkTag && (
 					<TextControl
 						__next40pxDefaultSize
diff --git a/packages/block-library/src/button/index.php b/packages/block-library/src/button/index.php
index f272fa9eb62b14..0d03440b1cb0f5 100644
--- a/packages/block-library/src/button/index.php
+++ b/packages/block-library/src/button/index.php
@@ -10,9 +10,8 @@
  *
  * @since 6.6.0
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      The block object.
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block content.
  *
  * @return string The block content.
  */
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index a8f625b95c3923..faae459d5497e0 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -10,7 +10,6 @@ $blocks-block__margin: 0.5em;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 	height: 100%;
-	width: 100%;
 	align-content: center;
 
 	&.aligncenter {
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index e563f3957f3746..fa9c96aef1710b 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -82,6 +82,11 @@ $blocks-block__margin: 0.5em;
 			font-size: inherit;
 		}
 	}
+
+	// Needed to make the buttons stretch correctly in a vertical layout.
+	.wp-block-button__link {
+		width: 100%;
+	}
 }
 
 // Legacy buttons that did not come in a wrapping container.
diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
index 6ba8f7d725e6e5..5816b8c75eaca5 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -17,6 +17,7 @@
 	},
 	"supports": {
 		"align": true,
+		"html": false,
 		"color": {
 			"link": true,
 			"__experimentalSkipSerialization": [ "text", "background" ],
diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index 969d1aafec99ef..5e2db8da9513c6 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -19,16 +19,6 @@
 		width: 100%;
 		border-collapse: collapse;
 
-		&:where(:not(.has-text-color)) {
-			color: #40464d;
-
-			// Keep the hard-coded border color for backward compatibility.
-			th,
-			td {
-				border-color: $gray-300;
-			}
-		}
-
 		&.has-background th {
 			background-color: inherit;
 		}
@@ -37,6 +27,16 @@
 			color: inherit;
 		}
 	}
+
+	:where(table:not(.has-text-color)) {
+		color: #40464d;
+
+		// Keep the hard-coded border color for backward compatibility.
+		th,
+		td {
+			border-color: $gray-300;
+		}
+	}
 }
 
 // Keep the hard-coded header background color for backward compatibility.
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 5ac4e33a4019fb..67e888978d45e4 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -25,6 +25,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -44,6 +46,7 @@ export default function CategoriesEdit( {
 	},
 	setAttributes,
 	className,
+	clientId,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
 
@@ -70,6 +73,15 @@ export default function CategoriesEdit( {
 		query
 	);
 
+	const { createWarningNotice } = useDispatch( noticeStore );
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: `block-library/core/categories/redirection-prevented/${ clientId }`,
+			type: 'snackbar',
+		} );
+	};
+
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
 			return [];
@@ -99,7 +111,7 @@ export default function CategoriesEdit( {
 		const { id, link, count, name } = category;
 		return (
 			<li key={ id } className={ `cat-item cat-item-${ id }` }>
-				<a href={ link } target="_blank" rel="noreferrer noopener">
+				<a href={ link } onClick={ showRedirectionPreventedNotice }>
 					{ renderCategoryName( name ) }
 				</a>
 				{ showPostCounts && ` (${ count })` }
diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
index 4465c8554fc125..547c370f2bc502 100644
--- a/packages/block-library/src/code/block.json
+++ b/packages/block-library/src/code/block.json
@@ -11,7 +11,8 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "code",
-			"__unstablePreserveWhiteSpace": true
+			"__unstablePreserveWhiteSpace": true,
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 11a1b58bd213bb..452a4e1ecae9fb 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -153,7 +153,6 @@ function ColumnInspectorControls( {
 		<ToolsPanel
 			label={ __( 'Settings' ) }
 			resetAll={ () => {
-				updateColumns( count, minCount );
 				setAttributes( {
 					isStackedOnMobile: true,
 				} );
@@ -161,36 +160,26 @@ function ColumnInspectorControls( {
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ canInsertColumnBlock && (
-				<ToolsPanelItem
-					label={ __( 'Columns' ) }
-					isShownByDefault
-					hasValue={ () => count }
-					onDeselect={ () => updateColumns( count, minCount ) }
-				>
-					<VStack spacing={ 4 }>
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __( 'Columns' ) }
-							value={ count }
-							onChange={ ( value ) =>
-								updateColumns(
-									count,
-									Math.max( minCount, value )
-								)
-							}
-							min={ Math.max( 1, minCount ) }
-							max={ Math.max( 6, count ) }
-						/>
-						{ count > 6 && (
-							<Notice status="warning" isDismissible={ false }>
-								{ __(
-									'This column count exceeds the recommended amount and may cause visual breakage.'
-								) }
-							</Notice>
-						) }
-					</VStack>
-				</ToolsPanelItem>
+				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Columns' ) }
+						value={ count }
+						onChange={ ( value ) =>
+							updateColumns( count, Math.max( minCount, value ) )
+						}
+						min={ Math.max( 1, minCount ) }
+						max={ Math.max( 6, count ) }
+					/>
+					{ count > 6 && (
+						<Notice status="warning" isDismissible={ false }>
+							{ __(
+								'This column count exceeds the recommended amount and may cause visual breakage.'
+							) }
+						</Notice>
+					) }
+				</VStack>
 			) }
 			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }
diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
index b20816d39b64f7..a62092493cbe56 100644
--- a/packages/block-library/src/comment-author-name/edit.js
+++ b/packages/block-library/src/comment-author-name/edit.js
@@ -15,7 +15,16 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /**
  * Renders the `core/comment-author-name` block on the editor.
@@ -36,6 +45,7 @@ export default function Edit( {
 	context: { commentId },
 	setAttributes,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -70,26 +80,57 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						isLink: true,
+						linkTarget: '_self',
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Link to authors URL' ) }
-					onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					checked={ isLink }
-				/>
-				{ isLink && (
+					isShownByDefault
+					hasValue={ () => ! isLink }
+					onDeselect={ () =>
+						setAttributes( {
+							isLink: true,
+						} )
+					}
+				>
 					<ToggleControl
 						__nextHasNoMarginBottom
+						label={ __( 'Link to authors URL' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</ToolsPanelItem>
+				{ isLink && (
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						onChange={ ( value ) =>
+						isShownByDefault
+						hasValue={ () => linkTarget !== '_self' }
+						onDeselect={ () =>
 							setAttributes( {
-								linkTarget: value ? '_blank' : '_self',
+								linkTarget: '_self',
 							} )
 						}
-						checked={ linkTarget === '_blank' }
-					/>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 
diff --git a/packages/block-library/src/comment-date/edit.js b/packages/block-library/src/comment-date/edit.js
index 8ff940a78dd5eb..76411b03d70ed0 100644
--- a/packages/block-library/src/comment-date/edit.js
+++ b/packages/block-library/src/comment-date/edit.js
@@ -12,9 +12,18 @@ import {
 	useBlockProps,
 	__experimentalDateFormatPicker as DateFormatPicker,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
+} from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Renders the `core/comment-date` block on the editor.
  *
@@ -34,6 +43,8 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	let [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
 	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
 		'root',
@@ -43,21 +54,45 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<DateFormatPicker
-					format={ format }
-					defaultFormat={ siteFormat }
-					onChange={ ( nextFormat ) =>
-						setAttributes( { format: nextFormat } )
-					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						format: undefined,
+						isLink: true,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					label={ __( 'Date format' ) }
+					hasValue={ () => format !== undefined }
+					onDeselect={ () => setAttributes( { format: undefined } ) }
+					isShownByDefault
+				>
+					<DateFormatPicker
+						format={ format }
+						defaultFormat={ siteFormat }
+						onChange={ ( nextFormat ) =>
+							setAttributes( { format: nextFormat } )
+						}
+					/>
+				</ToolsPanelItem>
+
+				<ToolsPanelItem
 					label={ __( 'Link to comment' ) }
-					onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					checked={ isLink }
-				/>
-			</PanelBody>
+					hasValue={ () => ! isLink }
+					onDeselect={ () => setAttributes( { isLink: true } ) }
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link to comment' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 
diff --git a/packages/block-library/src/comment-edit-link/edit.js b/packages/block-library/src/comment-edit-link/edit.js
index d3cde7f2abeaf0..bece4cff90839e 100644
--- a/packages/block-library/src/comment-edit-link/edit.js
+++ b/packages/block-library/src/comment-edit-link/edit.js
@@ -12,9 +12,18 @@ import {
 	InspectorControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function Edit( {
 	attributes: { linkTarget, textAlign },
 	setAttributes,
@@ -25,6 +34,8 @@ export default function Edit( {
 		} ),
 	} );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const blockControls = (
 		<BlockControls group="block">
 			<AlignmentControl
@@ -37,18 +48,35 @@ export default function Edit( {
 	);
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						linkTarget: '_self',
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Open in new tab' ) }
-					onChange={ ( value ) =>
-						setAttributes( {
-							linkTarget: value ? '_blank' : '_self',
-						} )
+					isShownByDefault
+					hasValue={ () => linkTarget === '_blank' }
+					onDeselect={ () =>
+						setAttributes( { linkTarget: '_self' } )
 					}
-					checked={ linkTarget === '_blank' }
-				/>
-			</PanelBody>
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
index aba29233064978..7457efc7f74e94 100644
--- a/packages/block-library/src/comments-pagination/edit.js
+++ b/packages/block-library/src/comments-pagination/edit.js
@@ -10,12 +10,16 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const TEMPLATE = [
 	[ 'core/comments-pagination-previous' ],
@@ -45,6 +49,7 @@ export default function QueryPaginationEdit( {
 	}, [] );
 
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
@@ -73,14 +78,29 @@ export default function QueryPaginationEdit( {
 		<>
 			{ hasNextPreviousBlocks && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<CommentsPaginationArrowControls
-							value={ paginationArrow }
-							onChange={ ( value ) => {
-								setAttributes( { paginationArrow: value } );
-							} }
-						/>
-					</PanelBody>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						dropdownMenuProps={ dropdownMenuProps }
+						resetAll={ () =>
+							setAttributes( { paginationArrow: 'none' } )
+						}
+					>
+						<ToolsPanelItem
+							label={ __( 'Arrow' ) }
+							hasValue={ () => paginationArrow !== 'none' }
+							onDeselect={ () =>
+								setAttributes( { paginationArrow: 'none' } )
+							}
+							isShownByDefault
+						>
+							<CommentsPaginationArrowControls
+								value={ paginationArrow }
+								onChange={ ( value ) => {
+									setAttributes( { paginationArrow: value } );
+								} }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<div { ...innerBlocksProps } />
diff --git a/packages/block-library/src/comments-pagination/editor.scss b/packages/block-library/src/comments-pagination/editor.scss
index 3cd99c632ee833..4d8238f1c42abc 100644
--- a/packages/block-library/src/comments-pagination/editor.scss
+++ b/packages/block-library/src/comments-pagination/editor.scss
@@ -8,9 +8,6 @@ $pagination-margin: 0.5em;
 :where(.editor-styles-wrapper) {
 	.wp-block-comments-pagination {
 		max-width: 100%;
-		&.block-editor-block-list__layout {
-			margin: 0;
-		}
 	}
 }
 
@@ -18,18 +15,6 @@ $pagination-margin: 0.5em;
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,
 	> .wp-block-comments-pagination-numbers {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $pagination-margin;
-
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
 		font-size: inherit;
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
 	}
 }
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
index 1543fc04027eef..e42a9a760fc41a 100644
--- a/packages/block-library/src/comments-pagination/index.php
+++ b/packages/block-library/src/comments-pagination/index.php
@@ -25,10 +25,15 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 	}
 
 	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'aria-label' => __( 'Comments pagination' ),
+			'class'      => $classes,
+		)
+	);
 
 	return sprintf(
-		'<div %1$s>%2$s</div>',
+		'<nav %1$s>%2$s</nav>',
 		$wrapper_attributes,
 		$content
 	);
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
index 2fb6e3dd2d48f4..ea95028eecc765 100644
--- a/packages/block-library/src/comments-pagination/style.scss
+++ b/packages/block-library/src/comments-pagination/style.scss
@@ -4,15 +4,7 @@ $pagination-margin: 0.5em;
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,
 	> .wp-block-comments-pagination-numbers {
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
 		font-size: inherit;
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
 	}
 	.wp-block-comments-pagination-previous-arrow {
 		margin-right: 1ch;
diff --git a/packages/block-library/src/comments-title/edit.js b/packages/block-library/src/comments-title/edit.js
index f2a9d23ddf6cae..6a35e6e3f1ddff 100644
--- a/packages/block-library/src/comments-title/edit.js
+++ b/packages/block-library/src/comments-title/edit.js
@@ -16,12 +16,21 @@ import {
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function Edit( {
 	attributes: {
 		textAlign,
@@ -53,6 +62,8 @@ export default function Edit( {
 		return getSettings().__experimentalDiscussionSettings;
 	} );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	useEffect( () => {
 		if ( isSiteEditor ) {
 			// Match the number of comments that will be shown in the comment-template/edit.js placeholder
@@ -111,24 +122,51 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						showPostTitle: true,
+						showCommentsCount: true,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Show post title' ) }
-					checked={ showPostTitle }
-					onChange={ ( value ) =>
-						setAttributes( { showPostTitle: value } )
+					isShownByDefault
+					hasValue={ () => ! showPostTitle }
+					onDeselect={ () =>
+						setAttributes( { showPostTitle: true } )
 					}
-				/>
-				<ToggleControl
-					__nextHasNoMarginBottom
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show post title' ) }
+						checked={ showPostTitle }
+						onChange={ ( value ) =>
+							setAttributes( { showPostTitle: value } )
+						}
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
 					label={ __( 'Show comments count' ) }
-					checked={ showCommentsCount }
-					onChange={ ( value ) =>
-						setAttributes( { showCommentsCount: value } )
+					isShownByDefault
+					hasValue={ () => ! showCommentsCount }
+					onDeselect={ () =>
+						setAttributes( { showCommentsCount: true } )
 					}
-				/>
-			</PanelBody>
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Show comments count' ) }
+						checked={ showCommentsCount }
+						onChange={ ( value ) =>
+							setAttributes( { showCommentsCount: value } )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 
diff --git a/packages/block-library/src/comments/edit/comments-inspector-controls.js b/packages/block-library/src/comments/edit/comments-inspector-controls.js
index fda1fb3cc2e4bd..bde58294face6a 100644
--- a/packages/block-library/src/comments/edit/comments-inspector-controls.js
+++ b/packages/block-library/src/comments/edit/comments-inspector-controls.js
@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { htmlElementMessages } from '../../utils/messages';
+import { unlock } from '../../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 export default function CommentsInspectorControls( {
 	attributes: { tagName },
@@ -17,20 +21,16 @@ export default function CommentsInspectorControls( {
 	return (
 		<InspectorControls>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 		</InspectorControls>
diff --git a/packages/block-library/src/comments/edit/index.js b/packages/block-library/src/comments/edit/index.js
index 8d8db650349d87..a8192ecddf5be3 100644
--- a/packages/block-library/src/comments/edit/index.js
+++ b/packages/block-library/src/comments/edit/index.js
@@ -11,7 +11,7 @@ import CommentsLegacy from './comments-legacy';
 import TEMPLATE from './template';
 
 export default function CommentsEdit( props ) {
-	const { attributes, setAttributes } = props;
+	const { attributes, setAttributes, clientId } = props;
 	const { tagName: TagName, legacy } = attributes;
 
 	const blockProps = useBlockProps();
@@ -28,6 +28,7 @@ export default function CommentsEdit( props ) {
 			<CommentsInspectorControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
+				clientId={ clientId }
 			/>
 			<TagName { ...innerBlocksProps } />
 		</>
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index d7d716ba774c3a..a33fc54e5f441a 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -81,6 +81,12 @@
 		},
 		"sizeSlug": {
 			"type": "string"
+		},
+		"poster": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "video",
+			"attribute": "poster"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js
index 8a4db747990681..6fbfeff9087a3b 100644
--- a/packages/block-library/src/cover/edit/block-controls.js
+++ b/packages/block-library/src/cover/edit/block-controls.js
@@ -27,6 +27,7 @@ export default function CoverBlockControls( {
 	currentSettings,
 	toggleUseFeaturedImage,
 	onClearMedia,
+	blockEditingMode,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
 		attributes;
@@ -39,6 +40,8 @@ export default function CoverBlockControls( {
 		minHeightUnit === 'vh' &&
 		minHeight === 100 &&
 		! attributes?.style?.dimensions?.aspectRatio;
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
+
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
 			// If there aren't previous values, take the default ones.
@@ -75,23 +78,25 @@ export default function CoverBlockControls( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<BlockAlignmentMatrixControl
-					label={ __( 'Change content position' ) }
-					value={ contentPosition }
-					onChange={ ( nextPosition ) =>
-						setAttributes( {
-							contentPosition: nextPosition,
-						} )
-					}
-					isDisabled={ ! hasInnerBlocks }
-				/>
-				<FullHeightAlignmentControl
-					isActive={ isMinFullHeight }
-					onToggle={ toggleMinFullHeight }
-					isDisabled={ ! hasInnerBlocks }
-				/>
-			</BlockControls>
+			{ ! isContentOnlyMode && (
+				<BlockControls group="block">
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+						isDisabled={ ! hasInnerBlocks }
+					/>
+					<FullHeightAlignmentControl
+						isActive={ isMinFullHeight }
+						onToggle={ toggleMinFullHeight }
+						isDisabled={ ! hasInnerBlocks }
+					/>
+				</BlockControls>
+			) }
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index b09093e312211d..c27605bd9b0dbf 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -102,6 +102,7 @@ function CoverEdit( {
 		tagName: TagName = 'div',
 		isUserOverlayColor,
 		sizeSlug,
+		poster,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -324,7 +325,7 @@ function CoverEdit( {
 	const [ resizeListener, { height, width } ] = useResizeObserver();
 	const resizableBoxDimensions = useMemo( () => {
 		return {
-			height: minHeightUnit === 'px' ? minHeight : 'auto',
+			height: minHeightUnit === 'px' && minHeight ? minHeight : 'auto',
 			width: 'auto',
 		};
 	}, [ minHeight, minHeightUnit ] );
@@ -446,6 +447,7 @@ function CoverEdit( {
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
+			blockEditingMode={ blockEditingMode }
 		/>
 	);
 
@@ -589,6 +591,7 @@ function CoverEdit( {
 						muted
 						loop
 						src={ url }
+						poster={ poster }
 						style={ mediaStyle }
 					/>
 				) }
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index bca844a9b4cedc..a9fcd7e0e21063 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -8,7 +8,6 @@ import {
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
-	SelectControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -36,9 +35,11 @@ import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
-import { htmlElementMessages } from '../../utils/messages';
+import PosterImage from './poster-image';
 
-const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
+const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
+	blockEditorPrivateApis
+);
 
 function CoverHeightInput( {
 	onChange,
@@ -110,6 +111,7 @@ export default function CoverInspectorControls( {
 		minHeightUnit,
 		alt,
 		tagName,
+		poster,
 	} = attributes;
 	const {
 		isVideoBackground,
@@ -198,8 +200,9 @@ export default function CoverInspectorControls( {
 								focalPoint: undefined,
 								isRepeated: false,
 								alt: '',
-								sizeSlug: undefined,
+								poster: undefined,
 							} );
+							updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 						} }
 						dropdownMenuProps={ dropdownMenuProps }
 					>
@@ -208,7 +211,7 @@ export default function CoverInspectorControls( {
 								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
 									isShownByDefault
-									hasValue={ () => hasParallax }
+									hasValue={ () => !! hasParallax }
 									onDeselect={ () =>
 										setAttributes( {
 											hasParallax: false,
@@ -219,7 +222,7 @@ export default function CoverInspectorControls( {
 									<ToggleControl
 										__nextHasNoMarginBottom
 										label={ __( 'Fixed background' ) }
-										checked={ hasParallax }
+										checked={ !! hasParallax }
 										onChange={ toggleParallax }
 									/>
 								</ToolsPanelItem>
@@ -269,6 +272,12 @@ export default function CoverInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
+						{ isVideoBackground && (
+							<PosterImage
+								poster={ poster }
+								setAttributes={ setAttributes }
+							/>
+						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
 							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }
@@ -421,10 +430,12 @@ export default function CoverInspectorControls( {
 				</ToolsPanelItem>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<header>', value: 'header' },
@@ -434,11 +445,6 @@ export default function CoverInspectorControls( {
 						{ label: '<aside>', value: 'aside' },
 						{ label: '<footer>', value: 'footer' },
 					] }
-					value={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 		</>
diff --git a/packages/block-library/src/cover/edit/poster-image.js b/packages/block-library/src/cover/edit/poster-image.js
new file mode 100644
index 00000000000000..cb0d51382dc114
--- /dev/null
+++ b/packages/block-library/src/cover/edit/poster-image.js
@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	Button,
+	BaseControl,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+
+const COVER_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+function PosterImage( { poster, setAttributes } ) {
+	const posterButtonRef = useRef();
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'cover-block__poster-image-description'
+	);
+
+	function onSelectPoster( image ) {
+		setAttributes( { poster: image.url } );
+	}
+
+	function onRemovePoster() {
+		setAttributes( { poster: undefined } );
+
+		// Move focus back to the Media Upload button.
+		posterButtonRef.current.focus();
+	}
+
+	return (
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => {
+					setAttributes( { poster: undefined } );
+				} }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<HStack justify="flex-start">
+					<MediaUpload
+						title={ __( 'Select poster image' ) }
+						onSelect={ onSelectPoster }
+						allowedTypes={ COVER_POSTER_ALLOWED_MEDIA_TYPES }
+						render={ ( { open } ) => (
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ open }
+								ref={ posterButtonRef }
+								aria-describedby={ descriptionId }
+							>
+								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
+							</Button>
+						) }
+					/>
+					<p id={ descriptionId } hidden>
+						{ poster
+							? sprintf(
+									/* translators: %s: poster image URL. */
+									__( 'The current poster image url is %s.' ),
+									poster
+							  )
+							: __(
+									'There is no poster image currently selected.'
+							  ) }
+					</p>
+					{ !! poster && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ onRemovePoster }
+							variant="tertiary"
+						>
+							{ __( 'Remove' ) }
+						</Button>
+					) }
+				</HStack>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
+	);
+}
+
+export default PosterImage;
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index b5de174f708085..6dcac170b063b9 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -39,7 +39,7 @@ export const settings = {
 			{
 				name: 'core/paragraph',
 				attributes: {
-					content: __( '<strong>Snow Patrol</strong>' ),
+					content: `<strong>${ __( 'Snow Patrol' ) }</strong>`,
 					align: 'center',
 				},
 			},
diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
index 47fa8010384402..adcfe92bdc9931 100644
--- a/packages/block-library/src/cover/save.js
+++ b/packages/block-library/src/cover/save.js
@@ -46,6 +46,7 @@ export default function save( { attributes } ) {
 		minHeightUnit,
 		tagName: Tag,
 		sizeSlug,
+		poster,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -137,6 +138,7 @@ export default function save( { attributes } ) {
 					loop
 					playsInline
 					src={ url }
+					poster={ poster }
 					style={ { objectPosition } }
 					data-object-fit="cover"
 					data-object-position={ objectPosition }
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 19d5c554cd26d6..434a30203e8c68 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -15,7 +15,8 @@
 		"summary": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "summary"
+			"selector": "summary",
+			"role": "content"
 		},
 		"name": {
 			"type": "string",
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 693e0fb310add0..1205b8fa099c9c 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -6,20 +6,26 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	TextControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { withIgnoreIMEEvents } = unlock( componentsPrivateApis );
 
 const TEMPLATE = [
 	[
@@ -30,7 +36,7 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes } ) {
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	const { name, showContent, summary, allowedBlocks, placeholder } =
 		attributes;
 	const blockProps = useBlockProps();
@@ -42,6 +48,27 @@ function DetailsEdit( { attributes, setAttributes } ) {
 	const [ isOpen, setIsOpen ] = useState( showContent );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	// Check if the inner blocks are selected.
+	const hasSelectedInnerBlock = useSelect(
+		( select ) =>
+			select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ),
+		[ clientId ]
+	);
+
+	const handleSummaryKeyDown = ( event ) => {
+		if ( event.key === 'Enter' && ! event.shiftKey ) {
+			setIsOpen( ( prevIsOpen ) => ! prevIsOpen );
+			event.preventDefault();
+		}
+	};
+
+	// Prevent spacebar from toggling <details> while typing.
+	const handleSummaryKeyUp = ( event ) => {
+		if ( event.key === ' ' ) {
+			event.preventDefault();
+		}
+	};
+
 	return (
 		<>
 			<InspectorControls>
@@ -93,13 +120,18 @@ function DetailsEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<details
 				{ ...innerBlocksProps }
-				open={ isOpen }
+				open={ isOpen || hasSelectedInnerBlock }
 				onToggle={ ( event ) => setIsOpen( event.target.open ) }
 			>
-				<summary>
+				<summary
+					onKeyDown={ withIgnoreIMEEvents( handleSummaryKeyDown ) }
+					onKeyUp={ handleSummaryKeyUp }
+				>
 					<RichText
 						identifier="summary"
-						aria-label={ __( 'Write summary' ) }
+						aria-label={ __(
+							'Write summary. Press Enter to expand or collapse the details.'
+						) }
 						placeholder={ placeholder || __( 'Write summary…' ) }
 						withoutInteractiveFormatting
 						value={ summary }
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index 31ee2e0e00f139..5785faec3932ed 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -20,7 +20,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			summary: 'La Mancha',
+			summary: __( 'La Mancha' ),
 			showContent: true,
 		},
 		innerBlocks: [
@@ -50,7 +50,7 @@ export const settings = {
 			return ! hasSummary
 				? __( 'Details. Empty.' )
 				: sprintf(
-						/* translators: accessibility text; summary title. */
+						/* translators: %s: accessibility text; summary title. */
 						__( 'Details. %s' ),
 						summary
 				  );
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 336d99935f001f..3099dc3cd928ec 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -31,7 +31,6 @@
 @import "./nextpage/editor.scss";
 @import "./page-list/editor.scss";
 @import "./paragraph/editor.scss";
-@import "./post-author/editor.scss";
 @import "./post-excerpt/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./rss/editor.scss";
diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js
index 818714c2c06240..ef3eedc014633f 100644
--- a/packages/block-library/src/embed/edit.js
+++ b/packages/block-library/src/embed/edit.js
@@ -118,11 +118,9 @@ const EmbedEdit = ( props ) => {
 			responsive
 		);
 
-	const toggleResponsive = () => {
-		const { allowResponsive, className } = attributes;
+	function toggleResponsive( newAllowResponsive ) {
+		const { className } = attributes;
 		const { html } = preview;
-		const newAllowResponsive = ! allowResponsive;
-
 		setAttributes( {
 			allowResponsive: newAllowResponsive,
 			className: getClassNames(
@@ -131,7 +129,7 @@ const EmbedEdit = ( props ) => {
 				responsive && newAllowResponsive
 			),
 		} );
-	};
+	}
 
 	useEffect( () => {
 		if ( preview?.html || ! cannotEmbed || ! hasResolved ) {
diff --git a/packages/block-library/src/embed/embed-controls.js b/packages/block-library/src/embed/embed-controls.js
index c17178a96a96a1..ba6ab06986c222 100644
--- a/packages/block-library/src/embed/embed-controls.js
+++ b/packages/block-library/src/embed/embed-controls.js
@@ -4,13 +4,19 @@
 import { __ } from '@wordpress/i18n';
 import {
 	ToolbarButton,
-	PanelBody,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function getResponsiveHelp( checked ) {
 	return checked
 		? __(
@@ -28,37 +34,53 @@ const EmbedControls = ( {
 	allowResponsive,
 	toggleResponsive,
 	switchBackToURLInput,
-} ) => (
-	<>
-		<BlockControls>
-			<ToolbarGroup>
-				{ showEditButton && (
-					<ToolbarButton
-						className="components-toolbar__control"
-						label={ __( 'Edit URL' ) }
-						icon={ edit }
-						onClick={ switchBackToURLInput }
-					/>
-				) }
-			</ToolbarGroup>
-		</BlockControls>
-		{ themeSupportsResponsive && blockSupportsResponsive && (
-			<InspectorControls>
-				<PanelBody
-					title={ __( 'Media settings' ) }
-					className="blocks-responsive"
-				>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Resize for smaller devices' ) }
-						checked={ allowResponsive }
-						help={ getResponsiveHelp }
-						onChange={ toggleResponsive }
-					/>
-				</PanelBody>
-			</InspectorControls>
-		) }
-	</>
-);
+} ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					{ showEditButton && (
+						<ToolbarButton
+							className="components-toolbar__control"
+							label={ __( 'Edit URL' ) }
+							icon={ edit }
+							onClick={ switchBackToURLInput }
+						/>
+					) }
+				</ToolbarGroup>
+			</BlockControls>
+			{ themeSupportsResponsive && blockSupportsResponsive && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Media settings' ) }
+						resetAll={ () => {
+							toggleResponsive( true );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							label={ __( 'Media settings' ) }
+							isShownByDefault
+							hasValue={ () => ! allowResponsive }
+							onDeselect={ () => {
+								toggleResponsive( ! allowResponsive );
+							} }
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Resize for smaller devices' ) }
+								checked={ allowResponsive }
+								help={ getResponsiveHelp }
+								onChange={ toggleResponsive }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				</InspectorControls>
+			) }
+		</>
+	);
+};
 
 export default EmbedControls;
diff --git a/packages/block-library/src/embed/variations.js b/packages/block-library/src/embed/variations.js
index 82a4159e13b327..662599f1688950 100644
--- a/packages/block-library/src/embed/variations.js
+++ b/packages/block-library/src/embed/variations.js
@@ -251,14 +251,6 @@ const variations = [
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
 		attributes: { providerNameSlug: 'reverbnation', responsive: true },
 	},
-	{
-		name: 'screencast',
-		title: getTitle( 'Screencast' ),
-		icon: embedVideoIcon,
-		description: __( 'Embed Screencast content.' ),
-		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
-		attributes: { providerNameSlug: 'screencast', responsive: true },
-	},
 	{
 		name: 'scribd',
 		title: getTitle( 'Scribd' ),
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
index cf2c9458176934..dee22dc59591ce 100644
--- a/packages/block-library/src/file/edit.js
+++ b/packages/block-library/src/file/edit.js
@@ -29,6 +29,7 @@ import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -127,7 +128,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			return;
 		}
 
-		const isPdf = newMedia.url.endsWith( '.pdf' );
+		const isPdf = getFilename( newMedia.url )
+			.toLowerCase()
+			.endsWith( '.pdf' );
 		const pdfAttributes = {
 			displayPreview: isPdf
 				? attributes.displayPreview ?? true
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 8ea668d56d8545..b77f31e0dd8729 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -10,9 +10,8 @@
  *
  * @since 5.8.0
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      The parsed block.
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block content.
  *
  * @return string Returns the block content.
  */
diff --git a/packages/block-library/src/file/inspector.js b/packages/block-library/src/file/inspector.js
index c29f84f60ebace..f75d7f5042d177 100644
--- a/packages/block-library/src/file/inspector.js
+++ b/packages/block-library/src/file/inspector.js
@@ -3,10 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	SelectControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 
@@ -14,6 +15,7 @@ import { InspectorControls } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { MIN_PREVIEW_HEIGHT, MAX_PREVIEW_HEIGHT } from './edit';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function FileBlockInspector( {
 	hrefs,
@@ -28,6 +30,7 @@ export default function FileBlockInspector( {
 	changePreviewHeight,
 } ) {
 	const { href, textLinkHref, attachmentPage } = hrefs;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let linkDestinationOptions = [ { value: href, label: __( 'URL' ) } ];
 	if ( attachmentPage ) {
@@ -41,58 +44,109 @@ export default function FileBlockInspector( {
 		<>
 			<InspectorControls>
 				{ href.endsWith( '.pdf' ) && (
-					<PanelBody title={ __( 'PDF settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'PDF settings' ) }
+						resetAll={ () => {
+							changeDisplayPreview( true );
+							changePreviewHeight( 600 );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
 							label={ __( 'Show inline embed' ) }
-							help={
-								displayPreview
-									? __(
-											"Note: Most phone and tablet browsers won't display embedded PDFs."
-									  )
-									: null
-							}
-							checked={ !! displayPreview }
-							onChange={ changeDisplayPreview }
-						/>
-						{ displayPreview && (
-							<RangeControl
+							isShownByDefault
+							hasValue={ () => ! displayPreview }
+							onDeselect={ () => changeDisplayPreview( true ) }
+						>
+							<ToggleControl
 								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Height in pixels' ) }
-								min={ MIN_PREVIEW_HEIGHT }
-								max={ Math.max(
-									MAX_PREVIEW_HEIGHT,
-									previewHeight
-								) }
-								value={ previewHeight }
-								onChange={ changePreviewHeight }
+								label={ __( 'Show inline embed' ) }
+								help={
+									displayPreview
+										? __(
+												"Note: Most phone and tablet browsers won't display embedded PDFs."
+										  )
+										: null
+								}
+								checked={ !! displayPreview }
+								onChange={ changeDisplayPreview }
 							/>
+						</ToolsPanelItem>
+						{ displayPreview && (
+							<ToolsPanelItem
+								label={ __( 'Height in pixels' ) }
+								isShownByDefault
+								hasValue={ () => previewHeight !== 600 }
+								onDeselect={ () => changePreviewHeight( 600 ) }
+							>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Height in pixels' ) }
+									min={ MIN_PREVIEW_HEIGHT }
+									max={ Math.max(
+										MAX_PREVIEW_HEIGHT,
+										previewHeight
+									) }
+									value={ previewHeight }
+									onChange={ changePreviewHeight }
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						changeLinkDestinationOption( href );
+						changeOpenInNewWindow( false );
+						changeShowDownloadButton( true );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Link to' ) }
-						value={ textLinkHref }
-						options={ linkDestinationOptions }
-						onChange={ changeLinkDestinationOption }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => textLinkHref !== href }
+						onDeselect={ () => changeLinkDestinationOption( href ) }
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Link to' ) }
+							value={ textLinkHref }
+							options={ linkDestinationOptions }
+							onChange={ changeLinkDestinationOption }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						checked={ openInNewWindow }
-						onChange={ changeOpenInNewWindow }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => !! openInNewWindow }
+						onDeselect={ () => changeOpenInNewWindow( false ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							checked={ openInNewWindow }
+							onChange={ changeOpenInNewWindow }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Show download button' ) }
-						checked={ showDownloadButton }
-						onChange={ changeShowDownloadButton }
-					/>
-				</PanelBody>
+						isShownByDefault
+						hasValue={ () => ! showDownloadButton }
+						onDeselect={ () => changeShowDownloadButton( true ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show download button' ) }
+							checked={ showDownloadButton }
+							onChange={ changeShowDownloadButton }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index 31c76ff2641fb4..4b2cb6a6040902 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -35,7 +35,7 @@
 	padding: 0.5em 1em;
 	display: inline-block;
 
-	&:is(a) {
+	&:where(a) {
 		&:hover,
 		&:visited,
 		&:focus,
diff --git a/packages/block-library/src/form-input/edit.js b/packages/block-library/src/form-input/edit.js
index 104124a13cda1f..6f3782e64678db 100644
--- a/packages/block-library/src/form-input/edit.js
+++ b/packages/block-library/src/form-input/edit.js
@@ -14,14 +14,24 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
-
+import {
+	TextControl,
+	CheckboxControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function InputFieldBlock( { attributes, setAttributes, className } ) {
 	const { type, name, label, inlineLabel, required, placeholder, value } =
 		attributes;
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const ref = useRef();
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
@@ -38,30 +48,58 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<>
 			{ 'hidden' !== type && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								inlineLabel: false,
+								required: false,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ 'checkbox' !== type && (
+							<ToolsPanelItem
+								label={ __( 'Inline label' ) }
+								hasValue={ () => !! inlineLabel }
+								onDeselect={ () =>
+									setAttributes( { inlineLabel: false } )
+								}
+								isShownByDefault
+							>
+								<CheckboxControl
+									__nextHasNoMarginBottom
+									label={ __( 'Inline label' ) }
+									checked={ inlineLabel }
+									onChange={ ( newVal ) => {
+										setAttributes( {
+											inlineLabel: newVal,
+										} );
+									} }
+								/>
+							</ToolsPanelItem>
+						) }
+
+						<ToolsPanelItem
+							label={ __( 'Required' ) }
+							hasValue={ () => !! required }
+							onDeselect={ () =>
+								setAttributes( { required: false } )
+							}
+							isShownByDefault
+						>
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={ __( 'Inline label' ) }
-								checked={ inlineLabel }
+								label={ __( 'Required' ) }
+								checked={ required }
 								onChange={ ( newVal ) => {
 									setAttributes( {
-										inlineLabel: newVal,
+										required: newVal,
 									} );
 								} }
 							/>
-						) }
-						<CheckboxControl
-							__nextHasNoMarginBottom
-							label={ __( 'Required' ) }
-							checked={ required }
-							onChange={ ( newVal ) => {
-								setAttributes( {
-									required: newVal,
-								} );
-							} }
-						/>
-					</PanelBody>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<InspectorControls group="advanced">
diff --git a/packages/block-library/src/form-input/index.js b/packages/block-library/src/form-input/index.js
index 8e0548a6b24dbf..f31b5bd5c73cd2 100644
--- a/packages/block-library/src/form-input/index.js
+++ b/packages/block-library/src/form-input/index.js
@@ -17,6 +17,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form-submission-notification/index.js b/packages/block-library/src/form-submission-notification/index.js
index 67c359374eec1c..075428496afd92 100644
--- a/packages/block-library/src/form-submission-notification/index.js
+++ b/packages/block-library/src/form-submission-notification/index.js
@@ -21,6 +21,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form-submit-button/index.js b/packages/block-library/src/form-submit-button/index.js
index 4c60b5f5c20639..6e76a816ded708 100644
--- a/packages/block-library/src/form-submit-button/index.js
+++ b/packages/block-library/src/form-submit-button/index.js
@@ -13,6 +13,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	save,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/form/block.json b/packages/block-library/src/form/block.json
index 20f3b89dc62b0c..16803cba6aa254 100644
--- a/packages/block-library/src/form/block.json
+++ b/packages/block-library/src/form/block.json
@@ -62,7 +62,6 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		},
-		"__experimentalSelector": "form"
+		}
 	}
 }
diff --git a/packages/block-library/src/form/edit.js b/packages/block-library/src/form/edit.js
index 227f5ea05014ff..b6968e9f511593 100644
--- a/packages/block-library/src/form/edit.js
+++ b/packages/block-library/src/form/edit.js
@@ -9,12 +9,18 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import {
+	SelectControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
 	formSubmissionNotificationSuccess,
 	formSubmissionNotificationError,
@@ -51,6 +57,17 @@ const TEMPLATE = [
 ];
 
 const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const resetAllSettings = () => {
+		setAttributes( {
+			submissionMethod: 'email',
+			email: undefined,
+			action: undefined,
+			method: 'post',
+		} );
+	};
+
 	const { action, method, email, submissionMethod } = attributes;
 	const blockProps = useBlockProps();
 
@@ -75,58 +92,86 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					dropdownMenuProps={ dropdownMenuProps }
+					label={ __( 'Settings' ) }
+					resetAll={ resetAllSettings }
+				>
+					<ToolsPanelItem
+						hasValue={ () => submissionMethod !== 'email' }
 						label={ __( 'Submissions method' ) }
-						options={ [
-							// TODO: Allow plugins to add their own submission methods.
-							{
-								label: __( 'Send email' ),
-								value: 'email',
-							},
-							{
-								label: __( '- Custom -' ),
-								value: 'custom',
-							},
-						] }
-						value={ submissionMethod }
-						onChange={ ( value ) =>
-							setAttributes( { submissionMethod: value } )
-						}
-						help={
-							submissionMethod === 'custom'
-								? __(
-										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
-								  )
-								: __(
-										'Select the method to use for form submissions.'
-								  )
+						onDeselect={ () =>
+							setAttributes( {
+								submissionMethod: 'email',
+							} )
 						}
-					/>
-					{ submissionMethod === 'email' && (
-						<TextControl
+						isShownByDefault
+					>
+						<SelectControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							autoComplete="off"
+							label={ __( 'Submissions method' ) }
+							options={ [
+								// TODO: Allow plugins to add their own submission methods.
+								{
+									label: __( 'Send email' ),
+									value: 'email',
+								},
+								{
+									label: __( '- Custom -' ),
+									value: 'custom',
+								},
+							] }
+							value={ submissionMethod }
+							onChange={ ( value ) =>
+								setAttributes( { submissionMethod: value } )
+							}
+							help={
+								submissionMethod === 'custom'
+									? __(
+											'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
+									  )
+									: __(
+											'Select the method to use for form submissions.'
+									  )
+							}
+						/>
+					</ToolsPanelItem>
+					{ submissionMethod === 'email' && (
+						<ToolsPanelItem
+							hasValue={ () => !! email }
 							label={ __( 'Email for form submissions' ) }
-							value={ email }
-							required
-							onChange={ ( value ) => {
-								setAttributes( { email: value } );
+							onDeselect={ () =>
 								setAttributes( {
-									action: `mailto:${ value }`,
-								} );
-								setAttributes( { method: 'post' } );
-							} }
-							help={ __(
-								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
-							) }
-							type="email"
-						/>
+									email: undefined,
+									action: undefined,
+									method: 'post',
+								} )
+							}
+							isShownByDefault
+						>
+							<TextControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								autoComplete="off"
+								label={ __( 'Email for form submissions' ) }
+								value={ email || '' }
+								required
+								onChange={ ( value ) => {
+									setAttributes( { email: value } );
+									setAttributes( {
+										action: `mailto:${ value }`,
+									} );
+									setAttributes( { method: 'post' } );
+								} }
+								help={ __(
+									'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+								) }
+								type="email"
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">
@@ -166,7 +211,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			) }
 			<form
 				{ ...innerBlocksProps }
-				className="wp-block-form"
 				encType={ submissionMethod === 'email' ? 'text/plain' : null }
 			/>
 		</>
diff --git a/packages/block-library/src/form/index.js b/packages/block-library/src/form/index.js
index 1e45c642b6d48e..ca48bcbbb451ac 100644
--- a/packages/block-library/src/form/index.js
+++ b/packages/block-library/src/form/index.js
@@ -20,6 +20,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => {
diff --git a/packages/block-library/src/gallery/constants.js b/packages/block-library/src/gallery/constants.js
index 19fc61cac84583..146b4a16474b2d 100644
--- a/packages/block-library/src/gallery/constants.js
+++ b/packages/block-library/src/gallery/constants.js
@@ -4,3 +4,4 @@ export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';
+export const DEFAULT_MEDIA_SIZE_SLUG = 'large';
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 1936c02c468189..0c224f26993312 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -7,15 +7,15 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	BaseControl,
-	PanelBody,
 	SelectControl,
 	ToggleControl,
 	RangeControl,
-	Spinner,
 	MenuGroup,
 	MenuItem,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToolbarDropdownMenu,
+	PanelBody,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -48,6 +48,7 @@ import {
 import { sharedIcon } from './shared-icon';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
 import { getHrefAndDestination } from './utils';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
 	getUpdatedLinkTargetSettings,
 	getImageSizeAttributes,
@@ -58,6 +59,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_LIGHTBOX,
+	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
 import useImageSizes from './use-image-sizes';
 import useGetNewImages from './use-get-new-images';
@@ -465,7 +467,7 @@ export default function GalleryEdit( props ) {
 			sprintf(
 				/* translators: %s: image size settings */
 				__( 'All gallery image sizes updated to: %s' ),
-				imageSize.label
+				imageSize?.label ?? newSizeSlug
 			),
 			{
 				id: 'gallery-attributes-sizeSlug',
@@ -546,6 +548,8 @@ export default function GalleryEdit( props ) {
 		...nativeInnerBlockProps,
 	} );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	if ( ! hasImages ) {
 		return (
 			<View { ...innerBlocksProps }>
@@ -560,39 +564,163 @@ export default function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					{ images.length > 1 && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							label={ __( 'Columns' ) }
-							value={
-								columns
-									? columns
-									: defaultColumnsNumber( images.length )
+				{ Platform.isWeb && (
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								columns: undefined,
+								imageCrop: true,
+								randomOrder: false,
+							} );
+
+							if ( sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG ) {
+								updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG );
 							}
-							onChange={ setColumnsNumber }
-							min={ 1 }
-							max={ Math.min( MAX_COLUMNS, images.length ) }
-							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
-							required
-							__next40pxDefaultSize
-						/>
-					) }
-					{ imageSizeOptions?.length > 0 && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							label={ __( 'Resolution' ) }
-							help={ __(
-								'Select the size of the source images.'
-							) }
-							value={ sizeSlug }
-							options={ imageSizeOptions }
-							onChange={ updateImagesSize }
-							hideCancelButton
-							size="__unstable-large"
-						/>
-					) }
-					{ Platform.isNative ? (
+
+							if ( linkTarget ) {
+								toggleOpenInNewTab( false );
+							}
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						{ images.length > 1 && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Columns' ) }
+								hasValue={ () =>
+									!! columns && columns !== images.length
+								}
+								onDeselect={ () =>
+									setColumnsNumber( undefined )
+								}
+							>
+								<RangeControl
+									__nextHasNoMarginBottom
+									label={ __( 'Columns' ) }
+									value={
+										columns
+											? columns
+											: defaultColumnsNumber(
+													images.length
+											  )
+									}
+									onChange={ setColumnsNumber }
+									min={ 1 }
+									max={ Math.min(
+										MAX_COLUMNS,
+										images.length
+									) }
+									required
+									__next40pxDefaultSize
+								/>
+							</ToolsPanelItem>
+						) }
+						{ imageSizeOptions?.length > 0 && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Resolution' ) }
+								hasValue={ () =>
+									sizeSlug !== DEFAULT_MEDIA_SIZE_SLUG
+								}
+								onDeselect={ () =>
+									updateImagesSize( DEFAULT_MEDIA_SIZE_SLUG )
+								}
+							>
+								<SelectControl
+									__nextHasNoMarginBottom
+									label={ __( 'Resolution' ) }
+									help={ __(
+										'Select the size of the source images.'
+									) }
+									value={ sizeSlug }
+									options={ imageSizeOptions }
+									onChange={ updateImagesSize }
+									hideCancelButton
+									size="__unstable-large"
+								/>
+							</ToolsPanelItem>
+						) }
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Crop images to fit' ) }
+							hasValue={ () => ! imageCrop }
+							onDeselect={ () =>
+								setAttributes( { imageCrop: true } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Crop images to fit' ) }
+								checked={ !! imageCrop }
+								onChange={ toggleImageCrop }
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							isShownByDefault
+							label={ __( 'Randomize order' ) }
+							hasValue={ () => !! randomOrder }
+							onDeselect={ () =>
+								setAttributes( { randomOrder: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Randomize order' ) }
+								checked={ !! randomOrder }
+								onChange={ toggleRandomOrder }
+							/>
+						</ToolsPanelItem>
+						{ hasLinkTo && (
+							<ToolsPanelItem
+								isShownByDefault
+								label={ __( 'Open images in new tab' ) }
+								hasValue={ () => !! linkTarget }
+								onDeselect={ () => toggleOpenInNewTab( false ) }
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Open images in new tab' ) }
+									checked={ linkTarget === '_blank' }
+									onChange={ toggleOpenInNewTab }
+								/>
+							</ToolsPanelItem>
+						) }
+					</ToolsPanel>
+				) }
+				{ Platform.isNative && (
+					<PanelBody title={ __( 'Settings' ) }>
+						{ images.length > 1 && (
+							<RangeControl
+								__nextHasNoMarginBottom
+								label={ __( 'Columns' ) }
+								value={
+									columns
+										? columns
+										: defaultColumnsNumber( images.length )
+								}
+								onChange={ setColumnsNumber }
+								min={ 1 }
+								max={ Math.min( MAX_COLUMNS, images.length ) }
+								{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
+								required
+								__next40pxDefaultSize
+							/>
+						) }
+						{ imageSizeOptions?.length > 0 && (
+							<SelectControl
+								__nextHasNoMarginBottom
+								label={ __( 'Resolution' ) }
+								help={ __(
+									'Select the size of the source images.'
+								) }
+								value={ sizeSlug }
+								options={ imageSizeOptions }
+								onChange={ updateImagesSize }
+								hideCancelButton
+								size="__unstable-large"
+							/>
+						) }
 						<SelectControl
 							__nextHasNoMarginBottom
 							label={ __( 'Link' ) }
@@ -602,42 +730,28 @@ export default function GalleryEdit( props ) {
 							hideCancelButton
 							size="__unstable-large"
 						/>
-					) : null }
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Crop images to fit' ) }
-						checked={ !! imageCrop }
-						onChange={ toggleImageCrop }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Randomize order' ) }
-						checked={ !! randomOrder }
-						onChange={ toggleRandomOrder }
-					/>
-					{ hasLinkTo && (
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open images in new tab' ) }
-							checked={ linkTarget === '_blank' }
-							onChange={ toggleOpenInNewTab }
+							label={ __( 'Crop images to fit' ) }
+							checked={ !! imageCrop }
+							onChange={ toggleImageCrop }
 						/>
-					) }
-					{ Platform.isWeb && ! imageSizeOptions && hasImageIds && (
-						<BaseControl
-							className="gallery-image-sizes"
+						<ToggleControl
 							__nextHasNoMarginBottom
-						>
-							<BaseControl.VisualLabel>
-								{ __( 'Resolution' ) }
-							</BaseControl.VisualLabel>
-							<View className="gallery-image-sizes__loading">
-								<Spinner />
-								{ __( 'Loading options…' ) }
-							</View>
-						</BaseControl>
-					) }
-				</PanelBody>
+							label={ __( 'Randomize order' ) }
+							checked={ !! randomOrder }
+							onChange={ toggleRandomOrder }
+						/>
+						{ hasLinkTo && (
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open images in new tab' ) }
+								checked={ linkTarget === '_blank' }
+								onChange={ toggleOpenInNewTab }
+							/>
+						) }
+					</PanelBody>
+				) }
 			</InspectorControls>
 			{ Platform.isWeb ? (
 				<BlockControls group="block">
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 62c0eff788746d..c532df3928851e 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -68,23 +68,6 @@
 	}
 }
 
-.gallery-image-sizes {
-	.components-base-control__label {
-		margin-bottom: 4px;
-	}
-
-	.gallery-image-sizes__loading {
-		display: flex;
-		align-items: center;
-		color: $gray-700;
-		font-size: $helptext-font-size;
-	}
-
-	.components-spinner {
-		margin: 0 8px 0 4px;
-	}
-}
-
 /**
  * Deprecated css past this point. This can be removed once all galleries are migrated
  * to V2.
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 1c4d5549339e1f..5f86e618862059 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -58,6 +58,7 @@ figure.wp-block-gallery.has-nested-images {
 			content: "";
 			height: 100%;
 			max-height: 40%;
+			pointer-events: none;
 
 			// Blur the background under the gradient scrim.
 			backdrop-filter: blur(3px);
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index c5588f3b73bb18..4a2437806f6f9d 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -8,8 +8,8 @@ import {
 	InspectorControls,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { View } from '@wordpress/primitives';
@@ -18,7 +18,9 @@ import { View } from '@wordpress/primitives';
  * Internal dependencies
  */
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
-import { htmlElementMessages } from '../utils/messages';
+import { unlock } from '../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 /**
  * Render inspector controls for the Group block.
@@ -26,16 +28,17 @@ import { htmlElementMessages } from '../utils/messages';
  * @param {Object}   props                 Component props.
  * @param {string}   props.tagName         The HTML tag name.
  * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ * @param {string}   props.clientId        The client ID of the current block.
  *
  * @return {JSX.Element}                The control group.
  */
-function GroupEditControls( { tagName, onSelectTagName } ) {
+function GroupEditControls( { tagName, onSelectTagName, clientId } ) {
 	return (
 		<InspectorControls group="advanced">
-			<SelectControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'HTML element' ) }
+			<HTMLElementControl
+				tagName={ tagName }
+				onChange={ onSelectTagName }
+				clientId={ clientId }
 				options={ [
 					{ label: __( 'Default (<div>)' ), value: 'div' },
 					{ label: '<header>', value: 'header' },
@@ -45,9 +48,6 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 					{ label: '<aside>', value: 'aside' },
 					{ label: '<footer>', value: 'footer' },
 				] }
-				value={ tagName }
-				onChange={ onSelectTagName }
-				help={ htmlElementMessages[ tagName ] }
 			/>
 		</InspectorControls>
 	);
@@ -129,6 +129,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				onSelectTagName={ ( value ) =>
 					setAttributes( { tagName: value } )
 				}
+				clientId={ clientId }
 			/>
 			{ showPlaceholder && (
 				<View>
diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json
index 08587f69bbd460..940cc5e8b253d6 100644
--- a/packages/block-library/src/html/block.json
+++ b/packages/block-library/src/html/block.json
@@ -10,7 +10,8 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "raw"
+			"source": "raw",
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
index d3feef0381f729..378b91b71a31d4 100644
--- a/packages/block-library/src/html/editor.scss
+++ b/packages/block-library/src/html/editor.scss
@@ -10,6 +10,7 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
+		display: block;
 		box-sizing: border-box;
 		max-height: 250px;
 		@include editor-input-reset();
diff --git a/packages/block-library/src/image/constants.js b/packages/block-library/src/image/constants.js
index 3c261adda895fe..be218dcd99085d 100644
--- a/packages/block-library/src/image/constants.js
+++ b/packages/block-library/src/image/constants.js
@@ -7,3 +7,4 @@ export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index bac931b2885a8b..fa8857b919df41 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -42,6 +42,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 	ALLOWED_MEDIA_TYPES,
+	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
 
 export const pickRelevantMediaFiles = ( image, size ) => {
@@ -239,7 +240,7 @@ export function ImageEdit( {
 
 		// Try to use the previous selected image size if its available
 		// otherwise try the default image size or fallback to "full"
-		let newSize = 'full';
+		let newSize = DEFAULT_MEDIA_SIZE_SLUG;
 		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
 			newSize = sizeSlug;
 		} else if ( hasSize( media, imageDefaultSize ) ) {
@@ -248,6 +249,18 @@ export function ImageEdit( {
 
 		let mediaAttributes = pickRelevantMediaFiles( media, newSize );
 
+		// Normalize newline characters in caption to <br />
+		// to preserve line breaks in both editor and frontend.
+		if (
+			typeof mediaAttributes.caption === 'string' &&
+			mediaAttributes.caption.includes( '\n' )
+		) {
+			mediaAttributes.caption = mediaAttributes.caption.replace(
+				/\n/g,
+				'<br>'
+			);
+		}
+
 		// If a caption text was meanwhile written by the user,
 		// make sure the text is not overwritten by empty captions.
 		if ( captionRef.current && ! mediaAttributes.caption ) {
@@ -262,10 +275,6 @@ export function ImageEdit( {
 			additionalAttributes = {
 				sizeSlug: newSize,
 			};
-		} else {
-			// Keep the same url when selecting the same file, so "Resolution"
-			// option is not changed.
-			additionalAttributes = { url };
 		}
 
 		// Check if default link setting should be used.
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 3bdef72daa69c6..259d674aac7cb1 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -53,12 +53,13 @@ import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
-
-/**
- * Module constants
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { MIN_SIZE, ALLOWED_MEDIA_TYPES, SIZED_LAYOUTS } from './constants';
+import {
+	MIN_SIZE,
+	ALLOWED_MEDIA_TYPES,
+	SIZED_LAYOUTS,
+	DEFAULT_MEDIA_SIZE_SLUG,
+} from './constants';
 import { evalAspectRatio } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
@@ -594,6 +595,7 @@ export default function Image( {
 			aspectRatio: undefined,
 			lightbox: undefined,
 		} );
+		updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 	};
 
 	const sizeControls = (
@@ -836,6 +838,7 @@ export default function Image( {
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
+							defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
 							onChange={ updateImage }
 							options={ imageSizeOptions }
 						/>
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 697f67a927fc87..707766a31259c0 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -204,6 +204,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
 	);
+	$p->set_attribute( 'data-wp-key', $unique_image_id );
 
 	// Image.
 	$p->next_tag( 'img' );
@@ -272,12 +273,14 @@ function block_core_image_print_lightbox_overlay() {
 		<div
 			class="wp-lightbox-overlay zoom"
 			data-wp-interactive="core/image"
+			data-wp-router-region='{ "id": "core/image-overlay", "attachTo": "body" }'
+			data-wp-key="wp-lightbox-overlay"
 			data-wp-context='{}'
 			data-wp-bind--role="state.roleAttribute"
 			data-wp-bind--aria-label="state.currentImage.ariaLabel"
 			data-wp-bind--aria-modal="state.ariaModal"
 			data-wp-class--active="state.overlayEnabled"
-			data-wp-class--show-closing-animation="state.showClosingAnimation"
+			data-wp-class--show-closing-animation="state.overlayOpened"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
 			data-wp-on-async--touchstart="actions.handleTouchStart"
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 71a492a570b2ae..da053deef521e7 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -110,9 +110,6 @@ const { state, actions, callbacks } = store(
 			},
 			hideLightbox() {
 				if ( state.overlayEnabled ) {
-					// Starts the overlay closing animation. The showClosingAnimation
-					// class is used to avoid showing it on page load.
-					state.showClosingAnimation = true;
 					state.overlayEnabled = false;
 
 					// Waits until the close animation has completed before allowing a
diff --git a/packages/block-library/src/latest-comments/index.php b/packages/block-library/src/latest-comments/index.php
index 5b6023cc46e58f..bbe82b8b18f9a9 100644
--- a/packages/block-library/src/latest-comments/index.php
+++ b/packages/block-library/src/latest-comments/index.php
@@ -42,7 +42,7 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
  *
  * @return string Returns the post content with latest comments added.
  */
-function render_block_core_latest_comments( $attributes = array() ) {
+function render_block_core_latest_comments( $attributes ) {
 	$comments = get_comments(
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-recent-comments.php */
 		apply_filters(
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index 3ce6d1491ff457..d3eb9997aaafff 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	Placeholder,
 	QueryControls,
 	RadioControl,
@@ -60,6 +59,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  */
 const CATEGORIES_LIST_QUERY = {
 	per_page: -1,
+	_fields: 'id,name',
 	context: 'view',
 };
 const USERS_LIST_QUERY = {
@@ -67,6 +67,28 @@ const USERS_LIST_QUERY = {
 	has_published_posts: [ 'post' ],
 	context: 'view',
 };
+const imageAlignmentOptions = [
+	{
+		value: 'none',
+		icon: alignNone,
+		label: __( 'None' ),
+	},
+	{
+		value: 'left',
+		icon: positionLeft,
+		label: __( 'Left' ),
+	},
+	{
+		value: 'center',
+		icon: positionCenter,
+		label: __( 'Center' ),
+	},
+	{
+		value: 'right',
+		icon: positionRight,
+		label: __( 'Right' ),
+	},
+];
 
 function getFeaturedImageDetails( post, size ) {
 	const image = post._embedded?.[ 'wp:featuredmedia' ]?.[ '0' ];
@@ -79,10 +101,11 @@ function getFeaturedImageDetails( post, size ) {
 	};
 }
 
-export default function LatestPostsEdit( { attributes, setAttributes } ) {
-	const instanceId = useInstanceId( LatestPostsEdit );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+function getCurrentAuthor( post ) {
+	return post._embedded?.author?.[ 0 ];
+}
 
+function Controls( { attributes, setAttributes, postCount } ) {
 	const {
 		postsToShow,
 		order,
@@ -105,7 +128,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	} = attributes;
 	const {
 		imageSizes,
-		latestPosts,
 		defaultImageWidth,
 		defaultImageHeight,
 		categoriesList,
@@ -114,21 +136,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		( select ) => {
 			const { getEntityRecords, getUsers } = select( coreStore );
 			const settings = select( blockEditorStore ).getSettings();
-			const catIds =
-				categories && categories.length > 0
-					? categories.map( ( cat ) => cat.id )
-					: [];
-			const latestPostsQuery = Object.fromEntries(
-				Object.entries( {
-					categories: catIds,
-					author: selectedAuthor,
-					order,
-					orderby: orderBy,
-					per_page: postsToShow,
-					_embed: 'wp:featuredmedia',
-					ignore_sticky: true,
-				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
-			);
 
 			return {
 				defaultImageWidth:
@@ -138,11 +145,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					settings.imageDimensions?.[ featuredImageSizeSlug ]
 						?.height ?? 0,
 				imageSizes: settings.imageSizes,
-				latestPosts: getEntityRecords(
-					'postType',
-					'post',
-					latestPostsQuery
-				),
 				categoriesList: getEntityRecords(
 					'taxonomy',
 					'category',
@@ -151,25 +153,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				authorList: getUsers( USERS_LIST_QUERY ),
 			};
 		},
-		[
-			featuredImageSizeSlug,
-			postsToShow,
-			order,
-			orderBy,
-			categories,
-			selectedAuthor,
-		]
+		[ featuredImageSizeSlug ]
 	);
 
-	// If a user clicks to a link prevent redirection and show a warning.
-	const { createWarningNotice } = useDispatch( noticeStore );
-	const showRedirectionPreventedNotice = ( event ) => {
-		event.preventDefault();
-		createWarningNotice( __( 'Links are disabled in the editor.' ), {
-			id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
-			type: 'snackbar',
-		} );
-	};
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const imageSizeOptions = imageSizes
 		.filter( ( { slug } ) => slug !== 'full' )
@@ -208,32 +195,8 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		setAttributes( { categories: allCategories } );
 	};
 
-	const imageAlignmentOptions = [
-		{
-			value: 'none',
-			icon: alignNone,
-			label: __( 'None' ),
-		},
-		{
-			value: 'left',
-			icon: positionLeft,
-			label: __( 'Left' ),
-		},
-		{
-			value: 'center',
-			icon: positionCenter,
-			label: __( 'Center' ),
-		},
-		{
-			value: 'right',
-			icon: positionRight,
-			label: __( 'Right' ),
-		},
-	];
-
-	const hasPosts = !! latestPosts?.length;
-	const inspectorControls = (
-		<InspectorControls>
+	return (
+		<>
 			<ToolsPanel
 				label={ __( 'Post content' ) }
 				resetAll={ () =>
@@ -247,7 +210,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 			>
 				<ToolsPanelItem
 					hasValue={ () => !! displayPostContent }
-					label={ __( 'Post content' ) }
+					label={ __( 'Display post content' ) }
 					onDeselect={ () =>
 						setAttributes( { displayPostContent: false } )
 					}
@@ -255,7 +218,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Post content' ) }
+						label={ __( 'Display post content' ) }
 						checked={ displayPostContent }
 						onChange={ ( value ) =>
 							setAttributes( { displayPostContent: value } )
@@ -265,7 +228,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent && (
 					<ToolsPanelItem
 						hasValue={ () => displayPostContentRadio !== 'excerpt' }
-						label={ __( 'Show' ) }
+						label={ __( 'Content length' ) }
 						onDeselect={ () =>
 							setAttributes( {
 								displayPostContentRadio: 'excerpt',
@@ -274,7 +237,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						isShownByDefault
 					>
 						<RadioControl
-							label={ __( 'Show' ) }
+							label={ __( 'Content length' ) }
 							selected={ displayPostContentRadio }
 							options={ [
 								{ label: __( 'Excerpt' ), value: 'excerpt' },
@@ -319,7 +282,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 						</ToolsPanelItem>
 					) }
 			</ToolsPanel>
-
 			<ToolsPanel
 				label={ __( 'Post meta' ) }
 				resetAll={ () =>
@@ -365,135 +327,315 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					/>
 				</ToolsPanelItem>
 			</ToolsPanel>
-			<PanelBody title={ __( 'Featured image' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Featured image' ) }
+				resetAll={ () =>
+					setAttributes( {
+						displayFeaturedImage: false,
+						featuredImageAlign: undefined,
+						featuredImageSizeSlug: 'thumbnail',
+						featuredImageSizeWidth: null,
+						featuredImageSizeHeight: null,
+						addLinkToFeaturedImage: false,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! displayFeaturedImage }
 					label={ __( 'Display featured image' ) }
-					checked={ displayFeaturedImage }
-					onChange={ ( value ) =>
-						setAttributes( { displayFeaturedImage: value } )
+					onDeselect={ () =>
+						setAttributes( { displayFeaturedImage: false } )
 					}
-				/>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ ( value ) =>
+							setAttributes( { displayFeaturedImage: value } )
+						}
+					/>
+				</ToolsPanelItem>
 				{ displayFeaturedImage && (
 					<>
-						<ImageSizeControl
-							onChange={ ( value ) => {
-								const newAttrs = {};
-								if ( value.hasOwnProperty( 'width' ) ) {
-									newAttrs.featuredImageSizeWidth =
-										value.width;
-								}
-								if ( value.hasOwnProperty( 'height' ) ) {
-									newAttrs.featuredImageSizeHeight =
-										value.height;
-								}
-								setAttributes( newAttrs );
-							} }
-							slug={ featuredImageSizeSlug }
-							width={ featuredImageSizeWidth }
-							height={ featuredImageSizeHeight }
-							imageWidth={ defaultImageWidth }
-							imageHeight={ defaultImageHeight }
-							imageSizeOptions={ imageSizeOptions }
-							imageSizeHelp={ __(
-								'Select the size of the source image.'
-							) }
-							onChangeImage={ ( value ) =>
+						<ToolsPanelItem
+							hasValue={ () =>
+								featuredImageSizeSlug !== 'thumbnail' ||
+								featuredImageSizeWidth !== null ||
+								featuredImageSizeHeight !== null
+							}
+							label={ __( 'Image size' ) }
+							onDeselect={ () =>
 								setAttributes( {
-									featuredImageSizeSlug: value,
-									featuredImageSizeWidth: undefined,
-									featuredImageSizeHeight: undefined,
+									featuredImageSizeSlug: 'thumbnail',
+									featuredImageSizeWidth: null,
+									featuredImageSizeHeight: null,
 								} )
 							}
-						/>
-						<ToggleGroupControl
-							className="editor-latest-posts-image-alignment-control"
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+							isShownByDefault
+						>
+							<ImageSizeControl
+								onChange={ ( value ) => {
+									const newAttrs = {};
+									if ( value.hasOwnProperty( 'width' ) ) {
+										newAttrs.featuredImageSizeWidth =
+											value.width;
+									}
+									if ( value.hasOwnProperty( 'height' ) ) {
+										newAttrs.featuredImageSizeHeight =
+											value.height;
+									}
+									setAttributes( newAttrs );
+								} }
+								slug={ featuredImageSizeSlug }
+								width={ featuredImageSizeWidth }
+								height={ featuredImageSizeHeight }
+								imageWidth={ defaultImageWidth }
+								imageHeight={ defaultImageHeight }
+								imageSizeOptions={ imageSizeOptions }
+								imageSizeHelp={ __(
+									'Select the size of the source image.'
+								) }
+								onChangeImage={ ( value ) =>
+									setAttributes( {
+										featuredImageSizeSlug: value,
+										featuredImageSizeWidth: undefined,
+										featuredImageSizeHeight: undefined,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! featuredImageAlign }
 							label={ __( 'Image alignment' ) }
-							value={ featuredImageAlign || 'none' }
-							onChange={ ( value ) =>
+							onDeselect={ () =>
 								setAttributes( {
-									featuredImageAlign:
-										value !== 'none' ? value : undefined,
+									featuredImageAlign: undefined,
 								} )
 							}
+							isShownByDefault
 						>
-							{ imageAlignmentOptions.map(
-								( { value, icon, label } ) => {
-									return (
-										<ToggleGroupControlOptionIcon
-											key={ value }
-											value={ value }
-											icon={ icon }
-											label={ label }
-										/>
-									);
+							<ToggleGroupControl
+								className="editor-latest-posts-image-alignment-control"
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Image alignment' ) }
+								value={ featuredImageAlign || 'none' }
+								onChange={ ( value ) =>
+									setAttributes( {
+										featuredImageAlign:
+											value !== 'none'
+												? value
+												: undefined,
+									} )
 								}
-							) }
-						</ToggleGroupControl>
-						<ToggleControl
-							__nextHasNoMarginBottom
+							>
+								{ imageAlignmentOptions.map(
+									( { value, icon, label } ) => {
+										return (
+											<ToggleGroupControlOptionIcon
+												key={ value }
+												value={ value }
+												icon={ icon }
+												label={ label }
+											/>
+										);
+									}
+								) }
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! addLinkToFeaturedImage }
 							label={ __( 'Add link to featured image' ) }
-							checked={ addLinkToFeaturedImage }
-							onChange={ ( value ) =>
+							onDeselect={ () =>
 								setAttributes( {
-									addLinkToFeaturedImage: value,
+									addLinkToFeaturedImage: false,
 								} )
 							}
-						/>
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ ( value ) =>
+									setAttributes( {
+										addLinkToFeaturedImage: value,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					</>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 
-			<PanelBody title={ __( 'Sorting and filtering' ) }>
-				<QueryControls
-					{ ...{ order, orderBy } }
-					numberOfItems={ postsToShow }
-					onOrderChange={ ( value ) =>
-						setAttributes( { order: value } )
-					}
-					onOrderByChange={ ( value ) =>
-						setAttributes( { orderBy: value } )
-					}
-					onNumberOfItemsChange={ ( value ) =>
-						setAttributes( { postsToShow: value } )
+			<ToolsPanel
+				label={ __( 'Sorting and filtering' ) }
+				resetAll={ () =>
+					setAttributes( {
+						order: 'desc',
+						orderBy: 'date',
+						postsToShow: 5,
+						categories: undefined,
+						selectedAuthor: undefined,
+						columns: 3,
+					} )
+				}
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () =>
+						order !== 'desc' ||
+						orderBy !== 'date' ||
+						postsToShow !== 5 ||
+						categories?.length > 0 ||
+						!! selectedAuthor
 					}
-					categorySuggestions={ categorySuggestions }
-					onCategoryChange={ selectCategories }
-					selectedCategories={ categories }
-					onAuthorChange={ ( value ) =>
+					label={ __( 'Sort and filter' ) }
+					onDeselect={ () =>
 						setAttributes( {
-							selectedAuthor:
-								'' !== value ? Number( value ) : undefined,
+							order: 'desc',
+							orderBy: 'date',
+							postsToShow: 5,
+							categories: undefined,
+							selectedAuthor: undefined,
 						} )
 					}
-					authorList={ authorList ?? [] }
-					selectedAuthorId={ selectedAuthor }
-				/>
+					isShownByDefault
+				>
+					<QueryControls
+						{ ...{ order, orderBy } }
+						numberOfItems={ postsToShow }
+						onOrderChange={ ( value ) =>
+							setAttributes( { order: value } )
+						}
+						onOrderByChange={ ( value ) =>
+							setAttributes( { orderBy: value } )
+						}
+						onNumberOfItemsChange={ ( value ) =>
+							setAttributes( { postsToShow: value } )
+						}
+						categorySuggestions={ categorySuggestions }
+						onCategoryChange={ selectCategories }
+						selectedCategories={ categories }
+						onAuthorChange={ ( value ) =>
+							setAttributes( {
+								selectedAuthor:
+									'' !== value ? Number( value ) : undefined,
+							} )
+						}
+						authorList={ authorList ?? [] }
+						selectedAuthorId={ selectedAuthor }
+					/>
+				</ToolsPanelItem>
 
 				{ postLayout === 'grid' && (
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+					<ToolsPanelItem
+						hasValue={ () => columns !== 3 }
 						label={ __( 'Columns' ) }
-						value={ columns }
-						onChange={ ( value ) =>
-							setAttributes( { columns: value } )
-						}
-						min={ 2 }
-						max={
-							! hasPosts
-								? MAX_POSTS_COLUMNS
-								: Math.min(
-										MAX_POSTS_COLUMNS,
-										latestPosts.length
-								  )
+						onDeselect={ () =>
+							setAttributes( {
+								columns: 3,
+							} )
 						}
-						required
-					/>
+						isShownByDefault
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Columns' ) }
+							value={ columns }
+							onChange={ ( value ) =>
+								setAttributes( { columns: value } )
+							}
+							min={ 2 }
+							max={
+								! postCount
+									? MAX_POSTS_COLUMNS
+									: Math.min( MAX_POSTS_COLUMNS, postCount )
+							}
+							required
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
+		</>
+	);
+}
+
+export default function LatestPostsEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId( LatestPostsEdit );
+
+	const {
+		postsToShow,
+		order,
+		orderBy,
+		categories,
+		selectedAuthor,
+		displayFeaturedImage,
+		displayPostContentRadio,
+		displayPostContent,
+		displayPostDate,
+		displayAuthor,
+		postLayout,
+		columns,
+		excerptLength,
+		featuredImageAlign,
+		featuredImageSizeSlug,
+		featuredImageSizeWidth,
+		featuredImageSizeHeight,
+		addLinkToFeaturedImage,
+	} = attributes;
+	const { latestPosts } = useSelect(
+		( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const catIds =
+				categories && categories.length > 0
+					? categories.map( ( cat ) => cat.id )
+					: [];
+			const latestPostsQuery = Object.fromEntries(
+				Object.entries( {
+					categories: catIds,
+					author: selectedAuthor,
+					order,
+					orderby: orderBy,
+					per_page: postsToShow,
+					_embed: 'author,wp:featuredmedia',
+					ignore_sticky: true,
+				} ).filter( ( [ , value ] ) => typeof value !== 'undefined' )
+			);
+
+			return {
+				latestPosts: getEntityRecords(
+					'postType',
+					'post',
+					latestPostsQuery
+				),
+			};
+		},
+		[ postsToShow, order, orderBy, categories, selectedAuthor ]
+	);
+
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice } = useDispatch( noticeStore );
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
+			type: 'snackbar',
+		} );
+	};
+
+	const hasPosts = !! latestPosts?.length;
+	const inspectorControls = (
+		<InspectorControls>
+			<Controls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				postCount={ latestPosts?.length ?? 0 }
+			/>
 		</InspectorControls>
 	);
 
@@ -555,9 +697,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPosts.map( ( post ) => {
 					const titleTrimmed = post.title.rendered.trim();
 					let excerpt = post.excerpt.rendered;
-					const currentAuthor = authorList?.find(
-						( author ) => author.id === post.author
-					);
+					const currentAuthor = getCurrentAuthor( post );
 
 					const excerptElement = document.createElement( 'div' );
 					excerptElement.innerHTML = excerpt;
@@ -634,7 +774,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 									{ addLinkToFeaturedImage ? (
 										<a
 											href={ post.link }
-											rel="noreferrer noopener"
 											onClick={
 												showRedirectionPreventedNotice
 											}
@@ -649,7 +788,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							<a
 								className="wp-block-latest-posts__post-title"
 								href={ post.link }
-								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
 									!! titleTrimmed
 										? {
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
index f8fd8ea27bc453..b970f486bb6a1c 100644
--- a/packages/block-library/src/latest-posts/index.php
+++ b/packages/block-library/src/latest-posts/index.php
@@ -33,6 +33,9 @@ function block_core_latest_posts_get_excerpt_length() {
  *
  * @since 5.0.0
  *
+ * @global WP_Post $post                                   Global post object.
+ * @global int     $block_core_latest_posts_excerpt_length Excerpt length set by the Latest Posts core block.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest posts added.
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index 4a86def8d687b4..bd696c30c334c9 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -19,7 +19,6 @@
 			"source": "html",
 			"selector": "ol,ul",
 			"multiline": "li",
-			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": "",
 			"role": "content"
 		},
diff --git a/packages/block-library/src/list/ordered-list-settings.js b/packages/block-library/src/list/ordered-list-settings.js
index 66817669806233..3a5e4374d2111f 100644
--- a/packages/block-library/src/list/ordered-list-settings.js
+++ b/packages/block-library/src/list/ordered-list-settings.js
@@ -8,70 +8,180 @@ import {
 	PanelBody,
 	ToggleControl,
 	SelectControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
 
-const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
-	<InspectorControls>
-		<PanelBody title={ __( 'Settings' ) }>
-			<SelectControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'List style' ) }
-				options={ [
-					{
-						label: __( 'Numbers' ),
-						value: 'decimal',
-					},
-					{
-						label: __( 'Uppercase letters' ),
-						value: 'upper-alpha',
-					},
-					{
-						label: __( 'Lowercase letters' ),
-						value: 'lower-alpha',
-					},
-					{
-						label: __( 'Uppercase Roman numerals' ),
-						value: 'upper-roman',
-					},
-					{
-						label: __( 'Lowercase Roman numerals' ),
-						value: 'lower-roman',
-					},
-				] }
-				value={ type }
-				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
-			/>
-			<TextControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+const LIST_STYLE_OPTIONS = [
+	{
+		label: __( 'Numbers' ),
+		value: 'decimal',
+	},
+	{
+		label: __( 'Uppercase letters' ),
+		value: 'upper-alpha',
+	},
+	{
+		label: __( 'Lowercase letters' ),
+		value: 'lower-alpha',
+	},
+	{
+		label: __( 'Uppercase Roman numerals' ),
+		value: 'upper-roman',
+	},
+	{
+		label: __( 'Lowercase Roman numerals' ),
+		value: 'lower-roman',
+	},
+];
+
+const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<InspectorControls>
+			{ Platform.isNative ? (
+				<PanelBody title={ __( 'Settings' ) }>
+					<SelectControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'List style' ) }
+						options={ LIST_STYLE_OPTIONS }
+						value={ type }
+						onChange={ ( newValue ) =>
+							setAttributes( { type: newValue } )
+						}
+					/>
+					<TextControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Start value' ) }
+						type="number"
+						onChange={ ( value ) => {
+							const int = parseInt( value, 10 );
+
+							setAttributes( {
+								// It should be possible to unset the value,
+								// e.g. with an empty string.
+								start: isNaN( int ) ? undefined : int,
+							} );
+						} }
+						value={
+							Number.isInteger( start )
+								? start.toString( 10 )
+								: ''
+						}
+						step="1"
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reverse order' ) }
+						checked={ reversed || false }
+						onChange={ ( value ) => {
+							setAttributes( {
+								// Unset the attribute if not reversed.
+								reversed: value || undefined,
+							} );
+						} }
+					/>
+				</PanelBody>
+			) : (
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							type: undefined,
+							start: undefined,
+							reversed: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'List style' ) }
+						isShownByDefault
+						hasValue={ () => !! type }
+						onDeselect={ () =>
+							setAttributes( {
+								type: undefined,
+							} )
+						}
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'List style' ) }
+							options={ LIST_STYLE_OPTIONS }
+							value={ type || 'decimal' }
+							onChange={ ( newValue ) =>
+								setAttributes( { type: newValue } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Start value' ) }
+						isShownByDefault
+						hasValue={ () => !! start }
+						onDeselect={ () =>
+							setAttributes( {
+								start: undefined,
+							} )
+						}
+					>
+						<TextControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Start value' ) }
+							type="number"
+							onChange={ ( value ) => {
+								const int = parseInt( value, 10 );
 
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				label={ __( 'Reverse order' ) }
-				checked={ reversed || false }
-				onChange={ ( value ) => {
-					setAttributes( {
-						// Unset the attribute if not reversed.
-						reversed: value || undefined,
-					} );
-				} }
-			/>
-		</PanelBody>
-	</InspectorControls>
-);
+								setAttributes( {
+									// It should be possible to unset the value,
+									// e.g. with an empty string.
+									start: isNaN( int ) ? undefined : int,
+								} );
+							} }
+							value={
+								Number.isInteger( start )
+									? start.toString( 10 )
+									: ''
+							}
+							step="1"
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Reverse order' ) }
+						isShownByDefault
+						hasValue={ () => !! reversed }
+						onDeselect={ () =>
+							setAttributes( {
+								reversed: undefined,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Reverse order' ) }
+							checked={ reversed || false }
+							onChange={ ( value ) => {
+								setAttributes( {
+									// Unset the attribute if not reversed.
+									reversed: value || undefined,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
+		</InspectorControls>
+	);
+};
 
 export default OrderedListSettings;
diff --git a/packages/block-library/src/loginout/index.php b/packages/block-library/src/loginout/index.php
index de90ebc12e379a..b794618cd3b140 100644
--- a/packages/block-library/src/loginout/index.php
+++ b/packages/block-library/src/loginout/index.php
@@ -16,7 +16,11 @@
  */
 function render_block_core_loginout( $attributes ) {
 
-	// Build the redirect URL.
+	/*
+	 * Build the redirect URL. This current url fetching logic matches with the core.
+	 *
+	 * @see https://github.com/WordPress/wordpress-develop/blob/6bf62e58d21739938f3bb3f9e16ba702baf9c2cc/src/wp-includes/general-template.php#L528.
+	 */
 	$current_url = ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
 
 	$classes  = is_user_logged_in() ? 'logged-in' : 'logged-out';
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 820c7927303114..ed8b0ad3af0070 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -317,8 +317,8 @@ function MediaTextEdit( {
 					mediaAlt: '',
 					focalPoint: undefined,
 					mediaWidth: 50,
-					mediaSizeSlug: undefined,
 				} );
+				updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 			} }
 			dropdownMenuProps={ dropdownMenuProps }
 		>
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 727380a3759c6e..5b73b5ba3c6b01 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -106,7 +106,6 @@
 
 /* Image fill for versions 8 and onwards */
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
-	position: relative;
 	height: 100%;
 	min-height: 250px;
 }
@@ -117,7 +116,6 @@
 }
 
 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
-	position: absolute;
 	width: 100%;
 	height: 100%;
 	object-fit: cover;
diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json
index d1153ca4f1689d..01c4b3ce961e50 100644
--- a/packages/block-library/src/more/block.json
+++ b/packages/block-library/src/more/block.json
@@ -10,7 +10,8 @@
 	"attributes": {
 		"customText": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"noTeaser": {
 			"type": "boolean",
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
index d05e9920ae4571..96428ef5c063fc 100644
--- a/packages/block-library/src/more/edit.native.js
+++ b/packages/block-library/src/more/edit.native.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { HorizontalRule } from '@wordpress/components';
 
@@ -11,40 +10,27 @@ import { HorizontalRule } from '@wordpress/components';
  */
 import styles from './editor.scss';
 
-export class MoreEdit extends Component {
-	constructor() {
-		super( ...arguments );
+function MoreEdit( { attributes, getStylesFromColorScheme } ) {
+	const { customText } = attributes;
 
-		this.state = {
-			defaultText: __( 'Read more' ),
-		};
-	}
+	const textStyle = getStylesFromColorScheme(
+		styles.moreText,
+		styles.moreTextDark
+	);
+	const lineStyle = getStylesFromColorScheme(
+		styles.moreLine,
+		styles.moreLineDark
+	);
 
-	render() {
-		const { attributes, getStylesFromColorScheme } = this.props;
-		const { customText } = attributes;
-		const { defaultText } = this.state;
-
-		const content = customText || defaultText;
-		const textStyle = getStylesFromColorScheme(
-			styles.moreText,
-			styles.moreTextDark
-		);
-		const lineStyle = getStylesFromColorScheme(
-			styles.moreLine,
-			styles.moreLineDark
-		);
-
-		return (
-			<HorizontalRule
-				text={ content }
-				marginLeft={ 0 }
-				marginRight={ 0 }
-				textStyle={ textStyle }
-				lineStyle={ lineStyle }
-			/>
-		);
-	}
+	return (
+		<HorizontalRule
+			text={ customText || __( 'Read more' ) }
+			marginLeft={ 0 }
+			marginRight={ 0 }
+			textStyle={ textStyle }
+			lineStyle={ lineStyle }
+		/>
+	);
 }
 
 export default withPreferredColorScheme( MoreEdit );
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index 5e12bc0931d298..204009bff778a8 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -11,6 +11,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	CheckboxControl,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
@@ -42,6 +43,7 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -173,10 +175,24 @@ function getMissingText( type ) {
  * packages/block-library/src/navigation-submenu/edit.js
  * Consider reusing this components for both blocks.
  */
-function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
-	const { label, url, description, title, rel } = attributes;
+function Controls( { attributes, setAttributes, setIsEditingControl } ) {
+	const { label, url, description, rel, opensInNewTab } = attributes;
+	const lastURLRef = useRef( url );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	return (
-		<ToolsPanel label={ __( 'Settings' ) }>
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				setAttributes( {
+					label: '',
+					url: '',
+					description: '',
+					rel: '',
+					opensInNewTab: false,
+				} );
+			} }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
 			<ToolsPanelItem
 				hasValue={ () => !! label }
 				label={ __( 'Text' ) }
@@ -192,8 +208,8 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 						setAttributes( { label: labelValue } );
 					} }
 					autoComplete="off"
-					onFocus={ () => setIsLabelFieldFocused( true ) }
-					onBlur={ () => setIsLabelFieldFocused( false ) }
+					onFocus={ () => setIsEditingControl( true ) }
+					onBlur={ () => setIsEditingControl( false ) }
 				/>
 			</ToolsPanelItem>
 
@@ -209,14 +225,41 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 					label={ __( 'Link' ) }
 					value={ url ? safeDecodeURI( url ) : '' }
 					onChange={ ( urlValue ) => {
+						setAttributes( {
+							url: encodeURI( safeDecodeURI( urlValue ) ),
+						} );
+					} }
+					autoComplete="off"
+					type="url"
+					onFocus={ () => {
+						lastURLRef.current = url;
+						setIsEditingControl( true );
+					} }
+					onBlur={ () => {
+						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
 						updateAttributes(
-							{ url: urlValue },
+							{ url: ! url ? lastURLRef.current : url },
 							setAttributes,
-							attributes
+							{ ...attributes, url: lastURLRef.current }
 						);
+						setIsEditingControl( false );
 					} }
-					autoComplete="off"
-					type="url"
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! opensInNewTab }
+				label={ __( 'Open in new tab' ) }
+				onDeselect={ () => setAttributes( { opensInNewTab: false } ) }
+				isShownByDefault
+			>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={ __( 'Open in new tab' ) }
+					checked={ opensInNewTab }
+					onChange={ ( value ) =>
+						setAttributes( { opensInNewTab: value } )
+					}
 				/>
 			</ToolsPanelItem>
 
@@ -239,27 +282,6 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 				/>
 			</ToolsPanelItem>
 
-			<ToolsPanelItem
-				hasValue={ () => !! title }
-				label={ __( 'Title attribute' ) }
-				onDeselect={ () => setAttributes( { title: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Title attribute' ) }
-					value={ title || '' }
-					onChange={ ( titleValue ) => {
-						setAttributes( { title: titleValue } );
-					} }
-					autoComplete="off"
-					help={ __(
-						'Additional information to help clarify the purpose of the link.'
-					) }
-				/>
-			</ToolsPanelItem>
-
 			<ToolsPanelItem
 				hasValue={ () => !! rel }
 				label={ __( 'Rel attribute' ) }
@@ -317,9 +339,10 @@ export default function NavigationLinkEdit( {
 	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
 
-	// Change the label using inspector causes rich text to change focus on firefox.
-	// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
-	const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
+	// Change the `label` and `url` using inspector causes RichText to change focus.
+	// This is a workaround to keep the focus on the field when it's focused we don't render the RichText.
+	// See: https://github.com/WordPress/gutenberg/pull/61374.
+	const [ isEditingControl, setIsEditingControl ] = useState( false );
 
 	const {
 		isAtMaxNesting,
@@ -554,14 +577,14 @@ export default function NavigationLinkEdit( {
 				<Controls
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					setIsLabelFieldFocused={ setIsLabelFieldFocused }
+					setIsEditingControl={ setIsEditingControl }
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
-					{ ! url ? (
+					{ ! url && ! isEditingControl ? (
 						<div className="wp-block-navigation-link__placeholder-text">
 							<span>{ missingText }</span>
 						</div>
@@ -569,7 +592,7 @@ export default function NavigationLinkEdit( {
 						<>
 							{ ! isInvalid &&
 								! isDraft &&
-								! isLabelFieldFocused && (
+								! isEditingControl && (
 									<>
 										<RichText
 											ref={ ref }
@@ -603,9 +626,7 @@ export default function NavigationLinkEdit( {
 										) }
 									</>
 								) }
-							{ ( isInvalid ||
-								isDraft ||
-								isLabelFieldFocused ) && (
+							{ ( isInvalid || isDraft || isEditingControl ) && (
 								<div
 									className={ clsx(
 										'wp-block-navigation-link__placeholder-text',
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 81df2099dfc188..111598ea4c4860 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -13,7 +13,7 @@
  *
  * @param  array $context     Navigation block context.
  * @param  array $attributes  Block attributes.
- * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu. Default false.
  * @return array Colors CSS classes and inline styles.
  */
 function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
@@ -213,7 +213,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
-	if ( is_post_type_archive() ) {
+	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
 		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
 		if ( $attributes['url'] === $queried_archive_link ) {
 			$is_active = true;
diff --git a/packages/block-library/src/navigation-link/test/edit.js b/packages/block-library/src/navigation-link/test/edit.js
index ec396a64b20586..7fae97b3589e8a 100644
--- a/packages/block-library/src/navigation-link/test/edit.js
+++ b/packages/block-library/src/navigation-link/test/edit.js
@@ -367,9 +367,9 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 				// Click on the existing link control, and toggle opens new tab.
+				// Note: When only opensInNewTab is changed (no URL change), ID should be retained
 				updateAttributes(
 					{
-						url: 'https://wordpress.local/menu-test/',
 						opensInNewTab: true,
 					},
 					setAttributes,
@@ -384,7 +384,7 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 			} );
-			it( 'id is retained after editing url', () => {
+			it( 'id is removed after editing url', () => {
 				const mockState = {};
 				const setAttributes = jest.fn( ( attr ) =>
 					Object.assign( mockState, attr )
@@ -407,7 +407,8 @@ describe( 'edit', () => {
 					type: 'post',
 					url: 'https://wordpress.local/menu-test/',
 				} );
-				// Click on the existing link control, and toggle opens new tab.
+				// Click on the existing link control, and change URL.
+				// Note: When URL is changed without a new ID, the original ID should be removed
 				updateAttributes(
 					{
 						url: 'https://wordpress.local/foo/',
@@ -417,14 +418,745 @@ describe( 'edit', () => {
 					mockState
 				);
 				expect( mockState ).toEqual( {
-					id: 1337,
+					id: undefined,
 					label: 'Menu Test',
 					opensInNewTab: false,
-					kind: 'post-type',
-					type: 'post',
+					kind: 'custom',
+					type: 'custom',
 					url: 'https://wordpress.local/foo/',
 				} );
 			} );
 		} );
+
+		describe( 'ID handling when URL is manually changed', () => {
+			describe( 'URL modifications that should sever the entity link', () => {
+				it( 'should remove ID when URL path is changed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/original-page',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/different-page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+							kind: 'custom',
+							type: 'custom',
+							url: 'https://example.com/different-page',
+						} )
+					);
+				} );
+
+				it( 'should remove ID when changing to relative URL that does not match the path', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/hello-world/',
+					};
+
+					const updatedValue = {
+						url: '/different-page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+							kind: 'custom',
+							type: 'custom',
+							url: '/different-page',
+						} )
+					);
+				} );
+
+				it( 'should remove ID when URL domain is changed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'https://different-site.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+							kind: 'custom',
+							type: 'custom',
+							url: 'https://different-site.com/page',
+						} )
+					);
+				} );
+
+				it( 'should remove ID when plain permalink post ID is changed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/?p=123',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/?p=456',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+							kind: 'custom',
+							type: 'custom',
+							url: 'https://example.com/?p=456',
+						} )
+					);
+				} );
+
+				it( 'should remove ID when changing from plain permalink to different plain permalink', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/?p=123',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/?page_id=456',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+							kind: 'custom',
+							type: 'custom',
+							url: 'https://example.com/?page_id=456',
+						} )
+					);
+				} );
+			} );
+
+			describe( 'URL modifications that should preserve the entity link', () => {
+				it( 'should preserve ID when changing to relative URL that matches the path', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/hello-world/',
+					};
+
+					const updatedValue = {
+						url: '/hello-world/',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: '/hello-world/',
+						} )
+					);
+					// Should not sever the entity link when relative URL matches the path
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when only query string is added', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page?utm_source=test',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page?utm_source=test',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when only hash fragment is added', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page#section',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page#section',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when both query string and hash are added', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page?param=value#section',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page?param=value#section',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when query string is modified', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page?old=value',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page?new=value',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page?new=value',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when hash fragment is modified', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page#old-section',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page#new-section',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page#new-section',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when protocol changes from http to https', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'http://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when protocol changes from https to http', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page',
+					};
+
+					const updatedValue = {
+						url: 'http://example.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'http://example.com/page',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when query string is removed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page?utm_source=test',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when hash fragment is removed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page#section',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when both query string and hash are removed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page?param=value#section',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when adding query string to URL with hash fragment', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'http://localhost:8888/daves-page-2/#somehash',
+					};
+
+					const updatedValue = {
+						url: 'http://localhost:8888/daves-page-2?somequery#somehash',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'http://localhost:8888/daves-page-2?somequery#somehash',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+
+				it( 'should preserve ID when query string is partially removed', () => {
+					const setAttributes = jest.fn();
+					const blockAttributes = {
+						id: 123,
+						type: 'page',
+						kind: 'post-type',
+						url: 'https://example.com/page?param1=value1&param2=value2',
+					};
+
+					const updatedValue = {
+						url: 'https://example.com/page?param1=value1',
+					};
+
+					updateAttributes(
+						updatedValue,
+						setAttributes,
+						blockAttributes
+					);
+
+					expect( setAttributes ).toHaveBeenCalledWith(
+						expect.objectContaining( {
+							url: 'https://example.com/page?param1=value1',
+						} )
+					);
+					expect( setAttributes ).not.toHaveBeenCalledWith(
+						expect.objectContaining( {
+							id: undefined,
+						} )
+					);
+				} );
+			} );
+
+			it( 'should remove ID when URL is changed without new ID', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					id: 123,
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/original-page',
+				};
+
+				const updatedValue = {
+					url: 'https://example.com/custom-url',
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				expect( setAttributes ).toHaveBeenCalledWith(
+					expect.objectContaining( {
+						id: undefined,
+						kind: 'custom',
+						type: 'custom',
+						url: 'https://example.com/custom-url',
+					} )
+				);
+			} );
+
+			it( 'should preserve ID when new ID is provided with URL', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					id: 123,
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/original-page',
+				};
+
+				const updatedValue = {
+					url: 'https://example.com/new-page',
+					id: 456,
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				expect( setAttributes ).toHaveBeenCalledWith(
+					expect.objectContaining( {
+						id: 456,
+						url: 'https://example.com/new-page',
+					} )
+				);
+			} );
+
+			it( 'should not remove ID when only label is changed', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					id: 123,
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/page',
+				};
+
+				const updatedValue = {
+					label: 'New Label',
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				// When only label is changed, ID should not be included in the attributes
+				// because it's not being modified
+				expect( setAttributes ).toHaveBeenCalledWith( {
+					label: 'New Label',
+					kind: 'post-type',
+					type: 'page',
+				} );
+			} );
+
+			it( 'should not remove ID when only opensInNewTab is changed', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					id: 123,
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/page',
+				};
+
+				const updatedValue = {
+					opensInNewTab: true,
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				// When only opensInNewTab is changed, ID should not be included in the attributes
+				// because it's not being modified
+				expect( setAttributes ).toHaveBeenCalledWith( {
+					opensInNewTab: true,
+					kind: 'post-type',
+					type: 'page',
+				} );
+			} );
+
+			it( 'should handle case where block has no existing ID', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/page',
+				};
+
+				const updatedValue = {
+					url: 'https://example.com/new-url',
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				expect( setAttributes ).toHaveBeenCalledWith(
+					expect.objectContaining( {
+						url: 'https://example.com/new-url',
+					} )
+				);
+				// Should not set id to undefined if it wasn't set before
+				expect( setAttributes ).not.toHaveBeenCalledWith(
+					expect.objectContaining( {
+						id: undefined,
+					} )
+				);
+			} );
+
+			it( 'should handle non-integer ID values', () => {
+				const setAttributes = jest.fn();
+				const blockAttributes = {
+					id: 'not-an-integer',
+					type: 'page',
+					kind: 'post-type',
+					url: 'https://example.com/page',
+				};
+
+				const updatedValue = {
+					url: 'https://example.com/new-url',
+				};
+
+				updateAttributes(
+					updatedValue,
+					setAttributes,
+					blockAttributes
+				);
+
+				// Should not set a new ID since the provided ID is not an integer
+				expect( setAttributes ).toHaveBeenCalledWith(
+					expect.objectContaining( {
+						url: 'https://example.com/new-url',
+					} )
+				);
+				expect( setAttributes ).not.toHaveBeenCalledWith(
+					expect.objectContaining( {
+						id: 'not-an-integer',
+					} )
+				);
+			} );
+		} );
 	} );
 } );
diff --git a/packages/block-library/src/navigation-link/update-attributes.js b/packages/block-library/src/navigation-link/update-attributes.js
index 6aa28d1818d3cc..28fc2269b7af93 100644
--- a/packages/block-library/src/navigation-link/update-attributes.js
+++ b/packages/block-library/src/navigation-link/update-attributes.js
@@ -2,7 +2,89 @@
  * WordPress dependencies
  */
 import { escapeHTML } from '@wordpress/escape-html';
-import { safeDecodeURI } from '@wordpress/url';
+import { safeDecodeURI, getPath } from '@wordpress/url';
+
+/**
+ * Determines if an entity link should be severed based on URL changes.
+ *
+ * @param {string} originalUrl - The original URL
+ * @param {string} newUrl      - The new URL
+ * @return {boolean} True if the entity link should be severed
+ */
+const shouldSeverEntityLink = ( originalUrl, newUrl ) => {
+	if ( ! originalUrl || ! newUrl ) {
+		return false;
+	}
+
+	const normalizePath = ( path ) => {
+		if ( ! path ) {
+			return '';
+		}
+		return path.replace( /\/+$/, '' ); // Remove trailing slashes
+	};
+
+	// Helper function to create URL objects with proper base handling
+	const createUrlObject = ( url, baseUrl = null ) => {
+		try {
+			// Always provide a base URL - it will be ignored for absolute URLs
+			// Use window.location.origin in browser, fallback for Node/tests
+			const base =
+				baseUrl ||
+				( typeof window !== 'undefined'
+					? window.location.origin
+					: 'https://wordpress.org' );
+			return new URL( url, base );
+		} catch ( error ) {
+			// If URL construction still fails, it's likely an invalid URL
+			// and we should sever the entity link
+			return null;
+		}
+	};
+
+	const originalUrlObj = createUrlObject( originalUrl );
+	if ( ! originalUrlObj ) {
+		return true;
+	}
+
+	const newUrlObj = createUrlObject( newUrl, originalUrl );
+	if ( ! newUrlObj ) {
+		return true;
+	}
+
+	// Move these declarations here, after the null checks
+	const originalHostname = originalUrlObj.hostname;
+	const newHostname = newUrlObj.hostname;
+	const originalPath = normalizePath( getPath( originalUrlObj.toString() ) );
+	const newPath = normalizePath( getPath( newUrlObj.toString() ) );
+
+	// If hostname or path changed, sever the entity link
+	if ( originalHostname !== newHostname || originalPath !== newPath ) {
+		return true;
+	}
+
+	// Special handling for plain permalinks (query string post IDs)
+	const originalP = originalUrlObj.searchParams.get( 'p' );
+	const newP = newUrlObj.searchParams.get( 'p' );
+
+	// If both are plain permalinks (with ?p= or ?page_id=), compare the IDs
+	if ( originalP && newP && originalP !== newP ) {
+		return true;
+	}
+
+	const originalPageId = originalUrlObj.searchParams.get( 'page_id' );
+	const newPageId = newUrlObj.searchParams.get( 'page_id' );
+
+	if ( originalPageId && newPageId && originalPageId !== newPageId ) {
+		return true;
+	}
+	// If switching between ?p= and ?page_id=, or one is missing, sever
+	if ( ( originalP && newPageId ) || ( originalPageId && newP ) ) {
+		return true;
+	}
+
+	// If only query string or fragment changed, preserve the entity link
+	return false;
+};
 
 /**
  * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
@@ -42,19 +124,23 @@ export const updateAttributes = (
 
 	const {
 		title: newLabel = '', // the title of any provided Post.
-		url: newUrl = '',
+		label: newLabelFromLabel = '', // alternative to title
+		url: newUrl,
 		opensInNewTab,
-		id,
+		id: newID,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
 
-	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
-	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+	// Use title if provided, otherwise fall back to label
+	const finalNewLabel = newLabel || newLabelFromLabel;
+
+	const newLabelWithoutHttp = finalNewLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl?.replace( /http(s?):\/\//gi, '' ) ?? '';
 
 	const useNewLabel =
-		newLabel &&
-		newLabel !== originalLabel &&
+		finalNewLabel &&
+		finalNewLabel !== originalLabel &&
 		// LinkControl without the title field relies
 		// on the check below. Specifically, it assumes that
 		// the URL is the same as a title.
@@ -73,7 +159,7 @@ export const updateAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escapeHTML( newLabel )
+		? escapeHTML( finalNewLabel )
 		: originalLabel || escapeHTML( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
@@ -86,13 +172,40 @@ export const updateAttributes = (
 		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
 	const kind = isCustomLink ? 'custom' : newKind;
 
-	setAttributes( {
+	const attributes = {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...( newUrl !== undefined
+			? { url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl }
+			: {} ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
-		...( id && Number.isInteger( id ) && { id } ),
 		...( kind && { kind } ),
 		...( type && type !== 'URL' && { type } ),
-	} );
+	};
+
+	// If the block's id is set then the menu item is linking to an entity.
+	// Therefore, if the URL is set but a new ID is not provided, check if
+	// the entity link should be severed based on URL changes.
+	if ( newUrl && ! newID && blockAttributes.id ) {
+		const shouldSever = shouldSeverEntityLink(
+			blockAttributes.url,
+			newUrl
+		);
+
+		if ( shouldSever ) {
+			attributes.id = undefined; // explicitly "unset" the ID.
+			// When URL is manually changed in a way that severs the entity link,
+			// update kind and type to "custom" to indicate this is now a custom link.
+			attributes.kind = 'custom';
+			attributes.type = 'custom';
+		}
+	} else if ( newID && Number.isInteger( newID ) ) {
+		attributes.id = newID;
+	} else if ( blockAttributes.id ) {
+		// If we have an existing ID and no URL change, ensure kind and type are preserved
+		attributes.kind = kind;
+		attributes.type = type;
+	}
+
+	setAttributes( attributes );
 };
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 00ee02c50920f9..c59d6c579565ef 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	CheckboxControl,
 	TextControl,
 	TextareaControl,
 	ToolbarButton,
@@ -123,7 +124,6 @@ const useIsDraggingWithin = ( elementRef ) => {
  * @property {number}               [id]            A post or term id.
  * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
  * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
  */
 
 export default function NavigationSubmenuEdit( {
@@ -135,7 +135,7 @@ export default function NavigationSubmenuEdit( {
 	context,
 	clientId,
 } ) {
-	const { label, url, description, rel, title } = attributes;
+	const { label, url, description, rel, opensInNewTab } = attributes;
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
@@ -392,8 +392,8 @@ export default function NavigationSubmenuEdit( {
 							label: '',
 							url: '',
 							description: '',
-							title: '',
 							rel: '',
+							opensInNewTab: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -435,6 +435,24 @@ export default function NavigationSubmenuEdit( {
 						/>
 					</ToolsPanelItem>
 
+					<ToolsPanelItem
+						hasValue={ () => !! opensInNewTab }
+						label={ __( 'Open in new tab' ) }
+						onDeselect={ () =>
+							setAttributes( { opensInNewTab: false } )
+						}
+						isShownByDefault
+					>
+						<CheckboxControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							checked={ opensInNewTab }
+							onChange={ ( value ) =>
+								setAttributes( { opensInNewTab: value } )
+							}
+						/>
+					</ToolsPanelItem>
+
 					<ToolsPanelItem
 						label={ __( 'Description' ) }
 						isShownByDefault
@@ -458,27 +476,6 @@ export default function NavigationSubmenuEdit( {
 						/>
 					</ToolsPanelItem>
 
-					<ToolsPanelItem
-						label={ __( 'Title attribute' ) }
-						isShownByDefault
-						hasValue={ () => !! title }
-						onDeselect={ () => setAttributes( { title: '' } ) }
-					>
-						<TextControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							value={ title || '' }
-							onChange={ ( titleValue ) => {
-								setAttributes( { title: titleValue } );
-							} }
-							label={ __( 'Title attribute' ) }
-							autoComplete="off"
-							help={ __(
-								'Additional information to help clarify the purpose of the link.'
-							) }
-						/>
-					</ToolsPanelItem>
-
 					<ToolsPanelItem
 						label={ __( 'Rel attribute' ) }
 						isShownByDefault
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
index 016e708c3256e6..77f2c1fa635fca 100644
--- a/packages/block-library/src/navigation-submenu/index.php
+++ b/packages/block-library/src/navigation-submenu/index.php
@@ -86,7 +86,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
-	if ( is_post_type_archive() ) {
+	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
 		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
 		if ( $attributes['url'] === $queried_archive_link ) {
 			$is_active = true;
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index d8616957318191..11e2b2690ee69e 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -31,10 +31,12 @@ import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	PanelBody,
-	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalVStack as VStack,
+	ToggleControl,
 	Button,
 	Spinner,
 	Notice,
@@ -72,6 +74,7 @@ import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 
 function ColorTools( {
 	textColor,
@@ -591,11 +594,25 @@ function Navigation( {
 		`overlay-menu-preview`
 	);
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display' ) }>
+					<ToolsPanel
+						label={ __( 'Display' ) }
+						resetAll={ () => {
+							setAttributes( {
+								showSubmenuIcon: true,
+								openSubmenusOnClick: false,
+								overlayMenu: 'mobile',
+								hasIcon: true,
+								icon: 'handle',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isResponsive && (
 							<>
 								<Button
@@ -623,88 +640,134 @@ function Navigation( {
 										</>
 									) }
 								</Button>
-								<div id={ overlayMenuPreviewId }>
-									{ overlayMenuPreview && (
+								{ overlayMenuPreview && (
+									<VStack
+										id={ overlayMenuPreviewId }
+										spacing={ 4 }
+										style={ {
+											gridColumn: 'span 2',
+										} }
+									>
 										<OverlayMenuPreview
 											setAttributes={ setAttributes }
 											hasIcon={ hasIcon }
 											icon={ icon }
 											hidden={ ! overlayMenuPreview }
 										/>
-									) }
-								</div>
+									</VStack>
+								) }
 							</>
 						) }
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+
+						<ToolsPanelItem
+							hasValue={ () => overlayMenu !== 'mobile' }
 							label={ __( 'Overlay Menu' ) }
-							aria-label={ __( 'Configure overlay menu' ) }
-							value={ overlayMenu }
-							help={ __(
-								'Collapses the navigation options in a menu icon opening an overlay.'
-							) }
-							onChange={ ( value ) =>
-								setAttributes( { overlayMenu: value } )
+							onDeselect={ () =>
+								setAttributes( { overlayMenu: 'mobile' } )
 							}
-							isBlock
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="never"
-								label={ __( 'Off' ) }
-							/>
-							<ToggleGroupControlOption
-								value="mobile"
-								label={ __( 'Mobile' ) }
-							/>
-							<ToggleGroupControlOption
-								value="always"
-								label={ __( 'Always' ) }
-							/>
-						</ToggleGroupControl>
+							<ToggleGroupControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Overlay Menu' ) }
+								aria-label={ __( 'Configure overlay menu' ) }
+								value={ overlayMenu }
+								help={ __(
+									'Collapses the navigation options in a menu icon opening an overlay.'
+								) }
+								onChange={ ( value ) =>
+									setAttributes( { overlayMenu: value } )
+								}
+								isBlock
+							>
+								<ToggleGroupControlOption
+									value="never"
+									label={ __( 'Off' ) }
+								/>
+								<ToggleGroupControlOption
+									value="mobile"
+									label={ __( 'Mobile' ) }
+								/>
+								<ToggleGroupControlOption
+									value="always"
+									label={ __( 'Always' ) }
+								/>
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+
 						{ hasSubmenus && (
 							<>
-								<h3>{ __( 'Submenus' ) }</h3>
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ openSubmenusOnClick }
-									onChange={ ( value ) => {
-										setAttributes( {
-											openSubmenusOnClick: value,
-											...( value && {
-												showSubmenuIcon: true,
-											} ), // Make sure arrows are shown when we toggle this on.
-										} );
-									} }
+								<h3 className="wp-block-navigation__submenu-header">
+									{ __( 'Submenus' ) }
+								</h3>
+								<ToolsPanelItem
+									hasValue={ () => openSubmenusOnClick }
 									label={ __( 'Open on click' ) }
-								/>
-
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
+									onDeselect={ () =>
 										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									disabled={ attributes.openSubmenusOnClick }
+											openSubmenusOnClick: false,
+											showSubmenuIcon: true,
+										} )
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+								</ToolsPanelItem>
+
+								<ToolsPanelItem
+									hasValue={ () => ! showSubmenuIcon }
 									label={ __( 'Show arrow' ) }
-								/>
+									onDeselect={ () =>
+										setAttributes( {
+											showSubmenuIcon: true,
+										} )
+									}
+									isDisabled={
+										attributes.openSubmenusOnClick
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</ToolsPanelItem>
 
 								{ submenuAccessibilityNotice && (
-									<div>
-										<Notice
-											spokenMessage={ null }
-											status="warning"
-											isDismissible={ false }
-										>
-											{ submenuAccessibilityNotice }
-										</Notice>
-									</div>
+									<Notice
+										spokenMessage={ null }
+										status="warning"
+										isDismissible={ false }
+										className="wp-block-navigation__submenu-accessibility-notice"
+									>
+										{ submenuAccessibilityNotice }
+									</Notice>
 								) }
 							</>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			<InspectorControls group="color">
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
index cdd4d6e3263c98..c73ba71c1afcbc 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -5,6 +5,7 @@ import {
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -16,36 +17,52 @@ import OverlayMenuIcon from './overlay-menu-icon';
 export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
-			<ToggleControl
-				__nextHasNoMarginBottom
+			<ToolsPanelItem
 				label={ __( 'Show icon button' ) }
-				help={ __(
-					'Configure the visual appearance of the button that toggles the overlay menu.'
-				) }
-				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
-				checked={ hasIcon }
-			/>
+				isShownByDefault
+				hasValue={ () => ! hasIcon }
+				onDeselect={ () => setAttributes( { hasIcon: true } ) }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Show icon button' ) }
+					help={ __(
+						'Configure the visual appearance of the button that toggles the overlay menu.'
+					) }
+					onChange={ ( value ) =>
+						setAttributes( { hasIcon: value } )
+					}
+					checked={ hasIcon }
+				/>
+			</ToolsPanelItem>
 
-			<ToggleGroupControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				className="wp-block-navigation__overlay-menu-icon-toggle-group"
+			<ToolsPanelItem
 				label={ __( 'Icon' ) }
-				value={ icon }
-				onChange={ ( value ) => setAttributes( { icon: value } ) }
-				isBlock
+				isShownByDefault
+				hasValue={ () => icon !== 'handle' }
+				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
 			>
-				<ToggleGroupControlOption
-					value="handle"
-					aria-label={ __( 'handle' ) }
-					label={ <OverlayMenuIcon icon="handle" /> }
-				/>
-				<ToggleGroupControlOption
-					value="menu"
-					aria-label={ __( 'menu' ) }
-					label={ <OverlayMenuIcon icon="menu" /> }
-				/>
-			</ToggleGroupControl>
+				<ToggleGroupControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					className="wp-block-navigation__overlay-menu-icon-toggle-group"
+					label={ __( 'Icon' ) }
+					value={ icon }
+					onChange={ ( value ) => setAttributes( { icon: value } ) }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="handle"
+						aria-label={ __( 'handle' ) }
+						label={ <OverlayMenuIcon icon="handle" /> }
+					/>
+					<ToggleGroupControlOption
+						value="menu"
+						aria-label={ __( 'menu' ) }
+						label={ <OverlayMenuIcon icon="menu" /> }
+					/>
+				</ToggleGroupControl>
+			</ToolsPanelItem>
 		</>
 	);
 }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 2f61a19be2b799..4132b5467afb26 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -569,7 +569,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	height: $grid-unit-40 * 2 !important;
 
-	margin-bottom: $grid-unit-15;
+	grid-column: span 2;
 
 	&.open {
 		box-shadow: inset 0 0 0 $border-width $gray-200;
@@ -637,7 +637,11 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	margin-left: 24px;
 }
 
-.wp-block-navigation__overlay-menu-icon-toggle-group {
-	// Counteract the margin added by the block inspector.
-	margin-bottom: $grid-unit-20;
+.editor-sidebar__panel .wp-block-navigation__submenu-header {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-navigation__submenu-accessibility-notice {
+	grid-column: span 2;
 }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index d52b67b7e1958c..bde3ee4038c214 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -133,7 +133,6 @@ private static function does_block_need_a_list_item_wrapper( $block ) {
 		 * @since 6.5.0
 		 *
 		 * @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
-		 * @return array The list of blocks that need a list item wrapper.
 		 */
 		$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
 
@@ -819,7 +818,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 	) ) {
 		// Add directives to the parent `<li>`.
 		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
-		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null }' );
+		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null, "previousFocus": null }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
 		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
 		$tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' );
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index ab93fa7da67ef4..a32e90d60a7d6b 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -46,6 +46,7 @@ $navigation-icon-size: 24px;
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
 		display: block;
+		z-index: 1;
 	}
 
 	// This rule needs extra specificity so that it inherits the correct color from its parent.
@@ -181,6 +182,7 @@ $navigation-icon-size: 24px;
 			> .wp-block-navigation-item__content {
 				display: flex;
 				flex-grow: 1;
+				padding: 0.5em 1em;
 
 				// Right-align the chevron in submenus.
 				.wp-block-navigation__submenu-icon {
@@ -310,6 +312,14 @@ button.wp-block-navigation-item__content {
 
 .wp-block-navigation-submenu__toggle {
 	cursor: pointer;
+
+	// Rotate submenu icon when open.
+	&[aria-expanded="true"] {
+		+ .wp-block-navigation__submenu-icon > svg,
+		> svg {
+			transform: rotate(180deg);
+		}
+	}
 }
 
 // When set to open on click, a button element is used.
diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
index fd1fe33537b2f5..02d029eaadd7d7 100644
--- a/packages/block-library/src/navigation/view.js
+++ b/packages/block-library/src/navigation/view.js
@@ -116,7 +116,8 @@ const { state, actions } = store(
 					getContext();
 				if ( state.menuOpenedBy.click ) {
 					// If Escape close the menu.
-					if ( event?.key === 'Escape' ) {
+					if ( event.key === 'Escape' ) {
+						event.stopPropagation(); // Keeps ancestor menus open.
 						actions.closeMenu( 'click' );
 						actions.closeMenu( 'focus' );
 						return;
diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
index b3f70746acd57f..65fb7097b208be 100644
--- a/packages/block-library/src/page-list/editor.scss
+++ b/packages/block-library/src/page-list/editor.scss
@@ -1,10 +1,4 @@
 .wp-block-navigation {
-	// Block wrapper gets the classes in the editor, and there's an extra div wrapper for now, so background styles need to be inherited.
-	.wp-block-page-list > div,
-	.wp-block-page-list {
-		background-color: inherit;
-	}
-
 	// space-between justification.
 	&.items-justified-space-between {
 		.wp-block-page-list > div,
diff --git a/packages/block-library/src/post-author-name/index.php b/packages/block-library/src/post-author-name/index.php
index 243d78ca70129e..ac514401f5cc25 100644
--- a/packages/block-library/src/post-author-name/index.php
+++ b/packages/block-library/src/post-author-name/index.php
@@ -26,7 +26,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 		return '';
 	}
 
-	if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
+	if ( isset( $block->context['postType'] ) && ! post_type_supports( $block->context['postType'], 'author' ) ) {
 		return '';
 	}
 
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
index f41fbf707ecc44..de0621cd083af6 100644
--- a/packages/block-library/src/post-author/edit.js
+++ b/packages/block-library/src/post-author/edit.js
@@ -15,22 +15,98 @@ import {
 } from '@wordpress/block-editor';
 import {
 	ComboboxControl,
-	PanelBody,
 	SelectControl,
 	ToggleControl,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 
-const minimumUsersForCombobox = 25;
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const AUTHORS_QUERY = {
 	who: 'authors',
 	per_page: 100,
+	_fields: 'id,name',
+	context: 'view',
 };
 
+function AuthorCombobox( { value, onChange } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const { authors, isLoading } = useSelect(
+		( select ) => {
+			const { getUsers, isResolving } = select( coreStore );
+
+			const query = { ...AUTHORS_QUERY };
+			if ( filterValue ) {
+				query.search = filterValue;
+				query.search_columns = [ 'name' ];
+			}
+
+			return {
+				authors: getUsers( query ),
+				isLoading: isResolving( 'getUsers', [ query ] ),
+			};
+		},
+		[ filterValue ]
+	);
+
+	const authorOptions = useMemo( () => {
+		const fetchedAuthors = ( authors ?? [] ).map( ( author ) => {
+			return {
+				value: author.id,
+				label: decodeEntities( author.name ),
+			};
+		} );
+
+		// Ensure the current author is included in the list.
+		const foundAuthor = fetchedAuthors.findIndex(
+			( fetchedAuthor ) => value?.id === fetchedAuthor.value
+		);
+
+		let currentAuthor = [];
+		if ( foundAuthor < 0 && value ) {
+			currentAuthor = [
+				{
+					value: value.id,
+					label: decodeEntities( value.name ),
+				},
+			];
+		} else if ( foundAuthor < 0 && ! value ) {
+			currentAuthor = [
+				{
+					value: 0,
+					label: __( '(No author)' ),
+				},
+			];
+		}
+
+		return [ ...currentAuthor, ...fetchedAuthors ];
+	}, [ authors, value ] );
+
+	return (
+		<ComboboxControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Author' ) }
+			options={ authorOptions }
+			value={ value?.id }
+			onFilterValueChange={ debounce( setFilterValue, 300 ) }
+			onChange={ onChange }
+			allowReset={ false }
+			isLoading={ isLoading }
+		/>
+	);
+}
+
 function PostAuthorEdit( {
 	isSelected,
 	context: { postType, postId, queryId },
@@ -38,22 +114,30 @@ function PostAuthorEdit( {
 	setAttributes,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { authorId, authorDetails, authors, supportsAuthor } = useSelect(
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { authorDetails, canAssignAuthor, supportsAuthor } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser, getUsers, getPostType } =
+			const { getEditedEntityRecord, getUser, getPostType } =
 				select( coreStore );
-			const _authorId = getEditedEntityRecord(
+			const currentPost = getEditedEntityRecord(
 				'postType',
 				postType,
 				postId
-			)?.author;
+			);
+			const authorId = currentPost?.author;
 
 			return {
-				authorId: _authorId,
-				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getUsers( AUTHORS_QUERY ),
+				authorDetails: authorId
+					? getUser( authorId, { context: 'view' } )
+					: null,
 				supportsAuthor:
 					getPostType( postType )?.supports?.author ?? false,
+				canAssignAuthor: currentPost?._links?.[
+					'wp:action-assign-author'
+				]
+					? true
+					: false,
 			};
 		},
 		[ postType, postId ]
@@ -61,8 +145,15 @@ function PostAuthorEdit( {
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
-		attributes;
+	const {
+		textAlign,
+		showAvatar,
+		showBio,
+		byline,
+		isLink,
+		linkTarget,
+		avatarSize,
+	} = attributes;
 	const avatarSizes = [];
 	const authorName = authorDetails?.name || __( 'Post Author' );
 	if ( authorDetails?.avatar_urls ) {
@@ -80,24 +171,14 @@ function PostAuthorEdit( {
 		} ),
 	} );
 
-	const authorOptions = authors?.length
-		? authors.map( ( { id, name } ) => {
-				return {
-					value: id,
-					label: name,
-				};
-		  } )
-		: [];
-
 	const handleSelect = ( nextAuthorId ) => {
 		editEntityRecord( 'postType', postType, postId, {
 			author: nextAuthorId,
 		} );
 	};
 
-	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
 	const showAuthorControl =
-		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
+		!! postId && ! isDescendentOfQueryLoop && canAssignAuthor;
 
 	if ( ! supportsAuthor && postType !== undefined ) {
 		return (
@@ -114,46 +195,59 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<VStack
-						spacing={ 4 }
-						className="wp-block-post-author__inspector-settings"
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							avatarSize: 48,
+							showAvatar: true,
+							isLink: false,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ showAuthorControl && (
+						<div style={ { gridColumn: '1 / -1' } }>
+							<AuthorCombobox
+								value={ authorDetails }
+								onChange={ handleSelect }
+							/>
+						</div>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show avatar' ) }
+						isShownByDefault
+						hasValue={ () => ! showAvatar }
+						onDeselect={ () =>
+							setAttributes( { showAvatar: true } )
+						}
 					>
-						{ showAuthorControl &&
-							( ( showCombobox && (
-								<ComboboxControl
-									__next40pxDefaultSize
-									__nextHasNoMarginBottom
-									label={ __( 'Author' ) }
-									options={ authorOptions }
-									value={ authorId }
-									onChange={ handleSelect }
-									allowReset={ false }
-								/>
-							) ) || (
-								<SelectControl
-									__next40pxDefaultSize
-									__nextHasNoMarginBottom
-									label={ __( 'Author' ) }
-									value={ authorId }
-									options={ authorOptions }
-									onChange={ handleSelect }
-								/>
-							) ) }
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show avatar' ) }
 							checked={ showAvatar }
 							onChange={ () =>
-								setAttributes( { showAvatar: ! showAvatar } )
+								setAttributes( {
+									showAvatar: ! showAvatar,
+								} )
 							}
 						/>
-						{ showAvatar && (
+					</ToolsPanelItem>
+					{ showAvatar && (
+						<ToolsPanelItem
+							label={ __( 'Avatar size' ) }
+							isShownByDefault
+							hasValue={ () => avatarSize !== 48 }
+							onDeselect={ () =>
+								setAttributes( { avatarSize: 48 } )
+							}
+						>
 							<SelectControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
 								label={ __( 'Avatar size' ) }
-								value={ attributes.avatarSize }
+								value={ avatarSize }
 								options={ avatarSizes }
 								onChange={ ( size ) => {
 									setAttributes( {
@@ -161,15 +255,31 @@ function PostAuthorEdit( {
 									} );
 								} }
 							/>
-						) }
+						</ToolsPanelItem>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Show bio' ) }
+						isShownByDefault
+						hasValue={ () => !! showBio }
+						onDeselect={ () =>
+							setAttributes( { showBio: undefined } )
+						}
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show bio' ) }
-							checked={ showBio }
+							checked={ !! showBio }
 							onChange={ () =>
 								setAttributes( { showBio: ! showBio } )
 							}
 						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Link author name to author page' ) }
+						isShownByDefault
+						hasValue={ () => !! isLink }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Link author name to author page' ) }
@@ -178,7 +288,16 @@ function PostAuthorEdit( {
 								setAttributes( { isLink: ! isLink } )
 							}
 						/>
-						{ isLink && (
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Link target' ) }
+							isShownByDefault
+							hasValue={ () => linkTarget !== '_self' }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -189,9 +308,9 @@ function PostAuthorEdit( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						) }
-					</VStack>
-				</PanelBody>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
 			</InspectorControls>
 
 			<BlockControls group="block">
@@ -207,12 +326,8 @@ function PostAuthorEdit( {
 				{ showAvatar && authorDetails?.avatar_urls && (
 					<div className="wp-block-post-author__avatar">
 						<img
-							width={ attributes.avatarSize }
-							src={
-								authorDetails.avatar_urls[
-									attributes.avatarSize
-								]
-							}
+							width={ avatarSize }
+							src={ authorDetails.avatar_urls[ avatarSize ] }
 							alt={ authorDetails.name }
 						/>
 					</div>
diff --git a/packages/block-library/src/post-author/editor.scss b/packages/block-library/src/post-author/editor.scss
deleted file mode 100644
index f6464893138cff..00000000000000
--- a/packages/block-library/src/post-author/editor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.wp-block-post-author__inspector-settings {
-	// Counteract the margin added by the block inspector.
-	.components-base-control,
-	.components-base-control:last-child {
-		margin-bottom: 0;
-	}
-}
diff --git a/packages/block-library/src/post-author/index.php b/packages/block-library/src/post-author/index.php
index 2d01de508b94af..a4880f8a9e744c 100644
--- a/packages/block-library/src/post-author/index.php
+++ b/packages/block-library/src/post-author/index.php
@@ -26,7 +26,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 		return '';
 	}
 
-	if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
+	if ( isset( $block->context['postType'] ) && ! post_type_supports( $block->context['postType'], 'author' ) ) {
 		return '';
 	}
 
diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
index 4b195a8c928e6f..30604066cbe8af 100644
--- a/packages/block-library/src/post-comments-count/block.json
+++ b/packages/block-library/src/post-comments-count/block.json
@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Comments Count",
 	"category": "theme",
diff --git a/packages/block-library/src/post-comments-count/index.js b/packages/block-library/src/post-comments-count/index.js
index 1d2525ddf2d9eb..b55b1c1fb6a11e 100644
--- a/packages/block-library/src/post-comments-count/index.js
+++ b/packages/block-library/src/post-comments-count/index.js
@@ -9,6 +9,7 @@ import { postCommentsCount as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,6 +17,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-comments-count/index.php b/packages/block-library/src/post-comments-count/index.php
index e6bde31eed65d8..bf12d6f0f9c4c1 100644
--- a/packages/block-library/src/post-comments-count/index.php
+++ b/packages/block-library/src/post-comments-count/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-count` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -33,6 +35,8 @@ function render_block_core_post_comments_count( $attributes, $content, $block )
 
 /**
  * Registers the `core/post-comments-count` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_count() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-comments-count/transforms.js b/packages/block-library/src/post-comments-count/transforms.js
new file mode 100644
index 00000000000000..af57a84410f68a
--- /dev/null
+++ b/packages/block-library/src/post-comments-count/transforms.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-comments-link' ],
+			transform: ( { textAlign } ) => {
+				return createBlock( 'core/post-comments-link', {
+					textAlign,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/post-comments-form/form.js b/packages/block-library/src/post-comments-form/form.js
index 20f0ebca61ead6..6b9432dd605aea 100644
--- a/packages/block-library/src/post-comments-form/form.js
+++ b/packages/block-library/src/post-comments-form/form.js
@@ -106,7 +106,7 @@ const CommentsForm = ( { postId, postType } ) => {
 			return (
 				<Warning>
 					{ sprintf(
-						/* translators: 1: Post type (i.e. "post", "page") */
+						/* translators: %s: Post type (i.e. "post", "page") */
 						__(
 							'Post Comments Form block: Comments are not enabled for this post type (%s).'
 						),
diff --git a/packages/block-library/src/post-comments-form/style.scss b/packages/block-library/src/post-comments-form/style.scss
index 69e6420581cb2f..b400849ba83bdb 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -82,9 +82,4 @@
 			margin-left: 0.5em;
 		}
 	}
-
-	// Override the 100% width derived from the Button block
-	input[type="submit"] {
-		width: auto;
-	}
 }
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
index cb0f3c8fbdae03..2e80dd958dc9d7 100644
--- a/packages/block-library/src/post-comments-link/block.json
+++ b/packages/block-library/src/post-comments-link/block.json
@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Comments Link",
 	"category": "theme",
diff --git a/packages/block-library/src/post-comments-link/index.js b/packages/block-library/src/post-comments-link/index.js
index 36e9673a08a1d2..9e30d6b16c212d 100644
--- a/packages/block-library/src/post-comments-link/index.js
+++ b/packages/block-library/src/post-comments-link/index.js
@@ -9,6 +9,7 @@ import { postCommentsCount as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,6 +17,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-comments-link/index.php b/packages/block-library/src/post-comments-link/index.php
index a8092190086a76..c6d33eb0cd65c3 100644
--- a/packages/block-library/src/post-comments-link/index.php
+++ b/packages/block-library/src/post-comments-link/index.php
@@ -8,6 +8,8 @@
 /**
  * Renders the `core/post-comments-link` block on the server.
  *
+ * @since 6.9.0
+ *
  * @param  array    $attributes Block attributes.
  * @param  string   $content    Block default content.
  * @param  WP_Block $block      Block instance.
@@ -59,6 +61,8 @@ function render_block_core_post_comments_link( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/post-comments-link` block on the server.
+ *
+ * @since 6.9.0
  */
 function register_block_core_post_comments_link() {
 	register_block_type_from_metadata(
diff --git a/packages/block-library/src/post-comments-link/transforms.js b/packages/block-library/src/post-comments-link/transforms.js
new file mode 100644
index 00000000000000..684ff15afc9212
--- /dev/null
+++ b/packages/block-library/src/post-comments-link/transforms.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/post-comments-count' ],
+			transform: ( { textAlign } ) => {
+				return createBlock( 'core/post-comments-count', {
+					textAlign,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json
index 1348cb296af083..393825fe9d214f 100644
--- a/packages/block-library/src/post-content/block.json
+++ b/packages/block-library/src/post-content/block.json
@@ -7,6 +7,12 @@
 	"description": "Displays the contents of a post or page.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
+	"attributes": {
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		}
+	},
 	"example": {
 		"viewportWidth": 350
 	},
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index 582165303c0d05..9f5b2a924fcc8d 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -3,11 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
 	RecursionProvider,
 	useHasRecursion,
 	Warning,
+	privateApis as blockEditorPrivateApis,
 	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
@@ -23,6 +25,9 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 function ReadOnlyContent( {
 	parentLayout,
@@ -30,6 +35,7 @@ function ReadOnlyContent( {
 	userCanEdit,
 	postType,
 	postId,
+	tagName: TagName = 'div',
 } ) {
 	const [ , , content ] = useEntityProp(
 		'postType',
@@ -60,18 +66,18 @@ function ReadOnlyContent( {
 	}
 
 	return content?.protected ? (
-		<div { ...blockProps }>
+		<TagName { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
-		</div>
+		</TagName>
 	) : (
-		<div
+		<TagName
 			{ ...blockProps }
 			dangerouslySetInnerHTML={ { __html: content?.rendered } }
-		></div>
+		></TagName>
 	);
 }
 
-function EditableContent( { context = {} } ) {
+function EditableContent( { context = {}, tagName: TagName = 'div' } ) {
 	const { postType, postId } = context;
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
@@ -104,12 +110,15 @@ function EditableContent( { context = {} } ) {
 			template: ! hasInnerBlocks ? initialInnerBlocks : undefined,
 		}
 	);
-	return <div { ...props } />;
+	return <TagName { ...props } />;
 }
 
 function Content( props ) {
-	const { context: { queryId, postType, postId } = {}, layoutClassNames } =
-		props;
+	const {
+		context: { queryId, postType, postId } = {},
+		layoutClassNames,
+		tagName,
+	} = props;
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	if ( userCanEdit === undefined ) {
 		return null;
@@ -127,6 +136,7 @@ function Content( props ) {
 			userCanEdit={ userCanEdit }
 			postType={ postType }
 			postId={ postId }
+			tagName={ tagName }
 		/>
 	);
 }
@@ -165,8 +175,39 @@ function RecursionError() {
 	);
 }
 
+/**
+ * Render inspector controls for the PostContent block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ * @param {string}   props.clientId        The client ID of the current block.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+function PostContentEditControls( { tagName, onSelectTagName, clientId } ) {
+	return (
+		<InspectorControls group="advanced">
+			<HTMLElementControl
+				tagName={ tagName }
+				onChange={ onSelectTagName }
+				clientId={ clientId }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<article>', value: 'article' },
+				] }
+			/>
+		</InspectorControls>
+	);
+}
+
 export default function PostContentEdit( {
 	context,
+	attributes: { tagName = 'div' },
+	setAttributes,
+	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
 	__unstableParentLayout: parentLayout,
 } ) {
@@ -177,17 +218,28 @@ export default function PostContentEdit( {
 		return <RecursionError />;
 	}
 
+	const handleSelectTagName = ( value ) => {
+		setAttributes( { tagName: value } );
+	};
+
 	return (
-		<RecursionProvider uniqueId={ contextPostId }>
-			{ contextPostId && contextPostType ? (
-				<Content
-					context={ context }
-					parentLayout={ parentLayout }
-					layoutClassNames={ layoutClassNames }
-				/>
-			) : (
-				<Placeholder layoutClassNames={ layoutClassNames } />
-			) }
-		</RecursionProvider>
+		<>
+			<PostContentEditControls
+				tagName={ tagName }
+				onSelectTagName={ handleSelectTagName }
+				clientId={ clientId }
+			/>
+			<RecursionProvider uniqueId={ contextPostId }>
+				{ contextPostId && contextPostType ? (
+					<Content
+						context={ context }
+						parentLayout={ parentLayout }
+						layoutClassNames={ layoutClassNames }
+					/>
+				) : (
+					<Placeholder layoutClassNames={ layoutClassNames } />
+				) }
+			</RecursionProvider>
+		</>
 	);
 }
diff --git a/packages/block-library/src/post-content/index.php b/packages/block-library/src/post-content/index.php
index 25be880cc47887..0be1a8730f6053 100644
--- a/packages/block-library/src/post-content/index.php
+++ b/packages/block-library/src/post-content/index.php
@@ -54,12 +54,19 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$tag_name = 'div';
+
+	if ( ! empty( $attributes['tagName'] ) && tag_escape( $attributes['tagName'] ) === $attributes['tagName'] ) {
+		$tag_name = $attributes['tagName'];
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'entry-content' ) );
 
-	return (
-		'<div ' . $wrapper_attributes . '>' .
-			$content .
-		'</div>'
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$content
 	);
 }
 
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index 61888ced43e67d..c0037b0e5b39cd 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -11,7 +11,8 @@
 			"type": "string"
 		},
 		"moreText": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showMoreOnNewLine": {
 			"type": "boolean",
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index bc94c2599e60ec..3462a0b901b15a 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -15,6 +15,7 @@ import {
 	RichText,
 	Warning,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -41,6 +42,8 @@ export default function PostExcerptEditor( {
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -220,14 +223,16 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index fa40de948918c8..0dad10650376bd 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -196,6 +196,17 @@ export default function PostFeaturedImageEdit( {
 		}
 	};
 
+	// On reset image
+	const onResetImage = () => {
+		setAttributes( {
+			isLink: false,
+			linkTarget: '_self',
+			rel: '',
+			sizeSlug: undefined,
+		} );
+		setFeaturedImage( 0 );
+	};
+
 	// Reset temporary url when media is available.
 	useEffect( () => {
 		if ( mediaUrl && temporaryURL ) {
@@ -228,38 +239,21 @@ export default function PostFeaturedImageEdit( {
 					media={ media }
 				/>
 			</InspectorControls>
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							isLink: false,
-							linkTarget: '_self',
-							rel: '',
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={
-							postType?.labels.singular_name
-								? sprintf(
-										// translators: %s: Name of the post type e.g: "post".
-										__( 'Link to %s' ),
-										postType.labels.singular_name
-								  )
-								: __( 'Link to post' )
-						}
-						isShownByDefault
-						hasValue={ () => !! isLink }
-						onDeselect={ () =>
+			{ ( featuredImage || isDescendentOfQueryLoop || ! postId ) && (
+				<InspectorControls>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
 							setAttributes( {
 								isLink: false,
-							} )
-						}
+								linkTarget: '_self',
+								rel: '',
+								sizeSlug: DEFAULT_MEDIA_SIZE_SLUG,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
 					>
-						<ToggleControl
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
 							label={
 								postType?.labels.singular_name
 									? sprintf(
@@ -269,66 +263,91 @@ export default function PostFeaturedImageEdit( {
 									  )
 									: __( 'Link to post' )
 							}
-							onChange={ () =>
-								setAttributes( { isLink: ! isLink } )
-							}
-							checked={ isLink }
-						/>
-					</ToolsPanelItem>
-					{ isLink && (
-						<ToolsPanelItem
-							label={ __( 'Open in new tab' ) }
 							isShownByDefault
-							hasValue={ () => '_self' !== linkTarget }
+							hasValue={ () => !! isLink }
 							onDeselect={ () =>
 								setAttributes( {
-									linkTarget: '_self',
+									isLink: false,
 								} )
 							}
 						>
 							<ToggleControl
 								__nextHasNoMarginBottom
+								label={
+									postType?.labels.singular_name
+										? sprintf(
+												// translators: %s: Name of the post type e.g: "post".
+												__( 'Link to %s' ),
+												postType.labels.singular_name
+										  )
+										: __( 'Link to post' )
+								}
+								onChange={ () =>
+									setAttributes( { isLink: ! isLink } )
+								}
+								checked={ isLink }
+							/>
+						</ToolsPanelItem>
+
+						{ isLink && (
+							<ToolsPanelItem
 								label={ __( 'Open in new tab' ) }
-								onChange={ ( value ) =>
+								isShownByDefault
+								hasValue={ () => '_self' !== linkTarget }
+								onDeselect={ () =>
 									setAttributes( {
-										linkTarget: value ? '_blank' : '_self',
+										linkTarget: '_self',
 									} )
 								}
-								checked={ linkTarget === '_blank' }
-							/>
-						</ToolsPanelItem>
-					) }
-					{ isLink && (
-						<ToolsPanelItem
-							label={ __( 'Link rel' ) }
-							isShownByDefault
-							hasValue={ () => !! rel }
-							onDeselect={ () =>
-								setAttributes( {
-									rel: '',
-								} )
-							}
-						>
-							<TextControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Open in new tab' ) }
+									onChange={ ( value ) =>
+										setAttributes( {
+											linkTarget: value
+												? '_blank'
+												: '_self',
+										} )
+									}
+									checked={ linkTarget === '_blank' }
+								/>
+							</ToolsPanelItem>
+						) }
+						{ isLink && (
+							<ToolsPanelItem
 								label={ __( 'Link rel' ) }
-								value={ rel }
-								onChange={ ( newRel ) =>
-									setAttributes( { rel: newRel } )
+								isShownByDefault
+								hasValue={ () => !! rel }
+								onDeselect={ () =>
+									setAttributes( {
+										rel: '',
+									} )
+								}
+							>
+								<TextControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Link rel' ) }
+									value={ rel }
+									onChange={ ( newRel ) =>
+										setAttributes( { rel: newRel } )
+									}
+								/>
+							</ToolsPanelItem>
+						) }
+						{ !! media && (
+							<FeaturedImageResolutionTool
+								image={ media }
+								value={ sizeSlug }
+								onChange={ ( nextSizeSlug ) =>
+									setAttributes( { sizeSlug: nextSizeSlug } )
 								}
 							/>
-						</ToolsPanelItem>
-					) }
-					<FeaturedImageResolutionTool
-						image={ media }
-						value={ sizeSlug }
-						onChange={ ( nextSizeSlug ) =>
-							setAttributes( { sizeSlug: nextSizeSlug } )
-						}
-					/>
-				</ToolsPanel>
-			</InspectorControls>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
+			) }
 		</>
 	);
 
@@ -398,8 +417,7 @@ export default function PostFeaturedImageEdit( {
 							label={ label }
 							showTooltip
 							tooltipPosition="top center"
-							onClick={ ( e ) => {
-								e.preventDefault();
+							onClick={ () => {
 								open();
 							} }
 						/>
@@ -451,7 +469,7 @@ export default function PostFeaturedImageEdit( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-						onReset={ () => setFeaturedImage( 0 ) }
+						onReset={ onResetImage }
 					/>
 				</BlockControls>
 			) }
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 815da4ee63fe19..dc8bcba194a792 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -27,8 +27,9 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
-		if ( get_the_title( $post_ID ) ) {
-			$attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
+		$title = get_the_title( $post_ID );
+		if ( $title ) {
+			$attr['alt'] = trim( strip_tags( $title ) );
 		} else {
 			$attr['alt'] = sprintf(
 				// translators: %d is the post ID.
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index ce733759846fee..2fda6a01cf5162 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -15,7 +15,8 @@
 			"default": "next"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showTitle": {
 			"type": "boolean",
diff --git a/packages/block-library/src/post-navigation-link/edit.js b/packages/block-library/src/post-navigation-link/edit.js
index bbdacfeb773978..d3c30ab1f43b5c 100644
--- a/packages/block-library/src/post-navigation-link/edit.js
+++ b/packages/block-library/src/post-navigation-link/edit.js
@@ -9,9 +9,10 @@ import clsx from 'clsx';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 	SelectControl,
-	PanelBody,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -19,11 +20,17 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostNavigationLinkEdit( {
 	context: { postType },
 	attributes: {
@@ -37,6 +44,8 @@ export default function PostNavigationLinkEdit( {
 	},
 	setAttributes,
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
@@ -91,73 +100,112 @@ export default function PostNavigationLinkEdit( {
 		return [ selectOption, ...taxonomyOptions ];
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							showTitle: false,
+							linkLabel: false,
+							arrow: 'none',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display the title as a link' ) }
-						help={ __(
-							'If you have entered a custom label, it will be prepended before the title.'
-						) }
-						checked={ !! showTitle }
-						onChange={ () =>
-							setAttributes( {
-								showTitle: ! showTitle,
-							} )
+						isShownByDefault
+						hasValue={ () => showTitle }
+						onDeselect={ () =>
+							setAttributes( { showTitle: false } )
 						}
-					/>
-					{ showTitle && (
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __(
-								'Include the label as part of the link'
+							label={ __( 'Display the title as a link' ) }
+							help={ __(
+								'If you have entered a custom label, it will be prepended before the title.'
 							) }
-							checked={ !! linkLabel }
+							checked={ !! showTitle }
 							onChange={ () =>
 								setAttributes( {
-									linkLabel: ! linkLabel,
+									showTitle: ! showTitle,
 								} )
 							}
 						/>
+					</ToolsPanelItem>
+					{ showTitle && (
+						<ToolsPanelItem
+							label={ __(
+								'Include the label as part of the link'
+							) }
+							isShownByDefault
+							hasValue={ () => !! linkLabel }
+							onDeselect={ () =>
+								setAttributes( { linkLabel: false } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __(
+									'Include the label as part of the link'
+								) }
+								checked={ !! linkLabel }
+								onChange={ () =>
+									setAttributes( {
+										linkLabel: ! linkLabel,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-					<ToggleGroupControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
 						label={ __( 'Arrow' ) }
-						value={ arrow }
-						onChange={ ( value ) => {
-							setAttributes( { arrow: value } );
-						} }
-						help={ __(
-							'A decorative arrow for the next and previous link.'
-						) }
-						isBlock
+						isShownByDefault
+						hasValue={ () => arrow !== 'none' }
+						onDeselect={ () => setAttributes( { arrow: 'none' } ) }
 					>
-						<ToggleGroupControlOption
-							value="none"
-							label={ _x(
-								'None',
-								'Arrow option for Next/Previous link'
-							) }
-						/>
-						<ToggleGroupControlOption
-							value="arrow"
-							label={ _x(
-								'Arrow',
-								'Arrow option for Next/Previous link'
-							) }
-						/>
-						<ToggleGroupControlOption
-							value="chevron"
-							label={ _x(
-								'Chevron',
-								'Arrow option for Next/Previous link'
+						<ToggleGroupControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Arrow' ) }
+							value={ arrow }
+							onChange={ ( value ) => {
+								setAttributes( { arrow: value } );
+							} }
+							help={ __(
+								'A decorative arrow for the next and previous link.'
 							) }
-						/>
-					</ToggleGroupControl>
-				</PanelBody>
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="none"
+								label={ _x(
+									'None',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="arrow"
+								label={ _x(
+									'Arrow',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+							<ToggleGroupControlOption
+								value="chevron"
+								label={ _x(
+									'Chevron',
+									'Arrow option for Next/Previous link'
+								) }
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
@@ -176,14 +224,16 @@ export default function PostNavigationLinkEdit( {
 					) }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<div { ...blockProps }>
 				{ ! isNext && displayArrow && (
 					<span
diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js
index 125f10942cd15e..e0a51175eeaf09 100644
--- a/packages/block-library/src/post-navigation-link/variations.js
+++ b/packages/block-library/src/post-navigation-link/variations.js
@@ -6,34 +6,34 @@ import { next, previous } from '@wordpress/icons';
 
 const variations = [
 	{
-		isDefault: true,
-		name: 'post-next',
-		title: __( 'Next Post' ),
+		name: 'post-previous',
+		title: __( 'Previous Post' ),
 		description: __(
-			'Displays the post link that follows the current post.'
+			'Displays the post link that precedes the current post.'
 		),
-		icon: next,
-		attributes: { type: 'next' },
+		icon: previous,
+		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Next post' ),
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},
 	},
 	{
-		name: 'post-previous',
-		title: __( 'Previous Post' ),
+		isDefault: true,
+		name: 'post-next',
+		title: __( 'Next Post' ),
 		description: __(
-			'Displays the post link that precedes the current post.'
+			'Displays the post link that follows the current post.'
 		),
-		icon: previous,
-		attributes: { type: 'previous' },
+		icon: next,
+		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Previous post' ),
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},
diff --git a/packages/block-library/src/post-template/edit.js b/packages/block-library/src/post-template/edit.js
index 35d0a95501a1b2..0fbb16b00a8e97 100644
--- a/packages/block-library/src/post-template/edit.js
+++ b/packages/block-library/src/post-template/edit.js
@@ -181,14 +181,15 @@ export default function PostTemplateEdit( {
 			 * Handle cases where sticky is set to `exclude` or `only`.
 			 * Which works as a `post__in/post__not_in` query for sticky posts.
 			 */
-			if ( sticky && sticky !== 'ignore' ) {
+			if ( [ 'exclude', 'only' ].includes( sticky ) ) {
 				query.sticky = sticky === 'only';
 			}
 
-			if ( sticky === 'ignore' ) {
+			// Empty string represents the default behavior of including sticky posts.
+			if ( [ '', 'ignore' ].includes( sticky ) ) {
 				// Remove any leftover sticky query parameter.
 				delete query.sticky;
-				query.ignore_sticky = true;
+				query.ignore_sticky = sticky === 'ignore';
 			}
 
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index 165f50109616e7..e7567ba657c3bc 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -19,11 +19,13 @@
 		},
 		"prefix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"suffix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],
diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js
index 802e5ab5898b47..55ff50f6e2cc61 100644
--- a/packages/block-library/src/post-terms/edit.js
+++ b/packages/block-library/src/post-terms/edit.js
@@ -13,6 +13,7 @@ import {
 	useBlockProps,
 	useBlockDisplayInformation,
 	RichText,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -46,6 +47,8 @@ export default function PostTermsEdit( {
 } ) {
 	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 
 	const selectedTerm = useSelect(
 		( select ) => {
@@ -73,14 +76,16 @@ export default function PostTermsEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index fdfb8e7c2c6cd2..94dba387e9313f 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -15,12 +15,22 @@ import {
 	HeadingLevelDropdown,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostTitleEdit( {
 	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
@@ -66,6 +76,7 @@ export default function PostTitleEdit( {
 		} ),
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let titleElement = <TagName { ...blockProps }>{ __( 'Title' ) }</TagName>;
 
@@ -138,41 +149,82 @@ export default function PostTitleEdit( {
 						/>
 					</BlockControls>
 					<InspectorControls>
-						<PanelBody title={ __( 'Settings' ) }>
-							<ToggleControl
-								__nextHasNoMarginBottom
+						<ToolsPanel
+							label={ __( 'Settings' ) }
+							resetAll={ () => {
+								setAttributes( {
+									rel: '',
+									linkTarget: '_self',
+									isLink: false,
+								} );
+							} }
+							dropdownMenuProps={ dropdownMenuProps }
+						>
+							<ToolsPanelItem
 								label={ __( 'Make title a link' ) }
-								onChange={ () =>
-									setAttributes( { isLink: ! isLink } )
+								isShownByDefault
+								hasValue={ () => isLink }
+								onDeselect={ () =>
+									setAttributes( { isLink: false } )
 								}
-								checked={ isLink }
-							/>
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Make title a link' ) }
+									onChange={ () =>
+										setAttributes( { isLink: ! isLink } )
+									}
+									checked={ isLink }
+								/>
+							</ToolsPanelItem>
 							{ isLink && (
 								<>
-									<ToggleControl
-										__nextHasNoMarginBottom
+									<ToolsPanelItem
 										label={ __( 'Open in new tab' ) }
-										onChange={ ( value ) =>
+										isShownByDefault
+										hasValue={ () =>
+											linkTarget === '_blank'
+										}
+										onDeselect={ () =>
 											setAttributes( {
-												linkTarget: value
-													? '_blank'
-													: '_self',
+												linkTarget: '_self',
 											} )
 										}
-										checked={ linkTarget === '_blank' }
-									/>
-									<TextControl
-										__next40pxDefaultSize
-										__nextHasNoMarginBottom
+									>
+										<ToggleControl
+											__nextHasNoMarginBottom
+											label={ __( 'Open in new tab' ) }
+											onChange={ ( value ) =>
+												setAttributes( {
+													linkTarget: value
+														? '_blank'
+														: '_self',
+												} )
+											}
+											checked={ linkTarget === '_blank' }
+										/>
+									</ToolsPanelItem>
+									<ToolsPanelItem
 										label={ __( 'Link rel' ) }
-										value={ rel }
-										onChange={ ( newRel ) =>
-											setAttributes( { rel: newRel } )
+										isShownByDefault
+										hasValue={ () => !! rel }
+										onDeselect={ () =>
+											setAttributes( { rel: '' } )
 										}
-									/>
+									>
+										<TextControl
+											__next40pxDefaultSize
+											__nextHasNoMarginBottom
+											label={ __( 'Link rel' ) }
+											value={ rel }
+											onChange={ ( newRel ) =>
+												setAttributes( { rel: newRel } )
+											}
+										/>
+									</ToolsPanelItem>
 								</>
 							) }
-						</PanelBody>
+						</ToolsPanel>
 					</InspectorControls>
 				</>
 			) }
diff --git a/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap
index 81adef5b228388..1d722cce98cedb 100644
--- a/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/preformatted/test/__snapshots__/transforms.native.js.snap
@@ -29,3 +29,9 @@ exports[`Preformatted block transforms to Paragraph block 1`] = `
 <p>Some <em>preformatted</em> text...<br />And more!</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Preformatted block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:verse -->"
+`;
diff --git a/packages/block-library/src/preformatted/test/transforms.native.js b/packages/block-library/src/preformatted/test/transforms.native.js
index 86a7d6134b1135..34a6ef4d60040d 100644
--- a/packages/block-library/src/preformatted/test/transforms.native.js
+++ b/packages/block-library/src/preformatted/test/transforms.native.js
@@ -16,7 +16,12 @@ const initialHtml = `
 <!-- /wp:preformatted -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Paragraph',
+	'Code',
+	'Verse',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();
 
diff --git a/packages/block-library/src/preformatted/transforms.js b/packages/block-library/src/preformatted/transforms.js
index ef5f3324474091..3e38e4b2f059e0 100644
--- a/packages/block-library/src/preformatted/transforms.js
+++ b/packages/block-library/src/preformatted/transforms.js
@@ -7,7 +7,7 @@ const transforms = {
 	from: [
 		{
 			type: 'block',
-			blocks: [ 'core/code', 'core/paragraph' ],
+			blocks: [ 'core/code', 'core/paragraph', 'core/verse' ],
 			transform: ( { content, anchor } ) =>
 				createBlock( 'core/preformatted', {
 					content,
@@ -41,6 +41,12 @@ const transforms = {
 			blocks: [ 'core/code' ],
 			transform: ( attributes ) => createBlock( 'core/code', attributes ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/verse' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/verse', attributes ),
+		},
 	],
 };
 
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index deb325849ebebf..fbc793fd61cb38 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -12,6 +12,6 @@
 	}
 }
 
-.wp-block-pullquote .wp-block-pullquote__citation {
+.wp-block-pullquote__citation {
 	color: inherit;
 }
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 6c6557a1101fb4..4ada681bcb97b1 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -6,8 +6,7 @@
 	padding: 4em 0;
 
 	p,
-	blockquote,
-	cite {
+	blockquote {
 		color: inherit;
 	}
 
@@ -74,7 +73,7 @@
 	}
 }
 
-.wp-block-pullquote cite {
+.wp-block-pullquote :where(cite) {
 	color: inherit;
 	display: block;
 }
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 6b5e8401227f5b..e16a695cf2fe5a 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -4,8 +4,8 @@
 	margin-bottom: 1.75em;
 	color: currentColor;
 
-	cite,
-	footer,
+	:where(cite),
+	:where(footer),
 	&__citation {
 		color: currentColor;
 		text-transform: uppercase;
diff --git a/packages/block-library/src/query/edit/enhanced-pagination-modal.js b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
index 332cc337bb0f67..da8049f9ad1714 100644
--- a/packages/block-library/src/query/edit/enhanced-pagination-modal.js
+++ b/packages/block-library/src/query/edit/enhanced-pagination-modal.js
@@ -27,11 +27,7 @@ export default function EnhancedPaginationModal( {
 		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		if (
-			enhancedPagination &&
-			hasUnsupportedBlocks &&
-			! window.__experimentalFullPageClientSideNavigation
-		) {
+		if ( enhancedPagination && hasUnsupportedBlocks ) {
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}
diff --git a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
index 4d0b1a9fd9da37..646f4495fe77ec 100644
--- a/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/enhanced-pagination-control.js
@@ -15,17 +15,11 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
-	const fullPageClientSideNavigation =
-		window.__experimentalFullPageClientSideNavigation;
 
 	let help = __(
 		'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
 	);
-	if ( fullPageClientSideNavigation ) {
-		help = __(
-			'Experimental full-page client-side navigation setting enabled.'
-		);
-	} else if ( hasUnsupportedBlocks ) {
+	if ( hasUnsupportedBlocks ) {
 		help = __(
 			'Enhancement disabled because there are non-compatible blocks inside the Query block.'
 		);
@@ -37,12 +31,8 @@ export default function EnhancedPaginationControl( {
 				__nextHasNoMarginBottom
 				label={ __( 'Reload full page' ) }
 				help={ help }
-				checked={
-					! enhancedPagination && ! fullPageClientSideNavigation
-				}
-				disabled={
-					hasUnsupportedBlocks || fullPageClientSideNavigation
-				}
+				checked={ ! enhancedPagination }
+				disabled={ hasUnsupportedBlocks }
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: ! value,
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index cf0b80b6145632..3c82827d84ab68 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -4,18 +4,18 @@
 import {
 	TextControl,
 	SelectControl,
-	RangeControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
+	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
-import { useEffect, useState, useCallback } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -40,8 +40,8 @@ import {
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
-	const { query, displayLayout } = attributes;
+	const { attributes, setQuery, isSingular } = props;
+	const { query } = attributes;
 	const {
 		order,
 		orderBy,
@@ -99,29 +99,20 @@ export default function QueryInspectorControls( props ) {
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
-	const onChangeDebounced = useCallback(
-		debounce( () => {
-			if ( query.search !== querySearch ) {
-				setQuery( { search: querySearch } );
-			}
-		}, 250 ),
-		[ querySearch, query.search ]
-	);
-	useEffect( () => {
-		onChangeDebounced();
-		return onChangeDebounced.cancel;
-	}, [ querySearch, onChangeDebounced ] );
+	const debouncedQuerySearch = useMemo( () => {
+		return debounce( ( newQuerySearch ) => {
+			setQuery( { search: newQuerySearch } );
+		}, 250 );
+	}, [ setQuery ] );
 
 	const orderByOptions = useOrderByOptions( postType );
-	const showInheritControl =
-		! isSingular && isControlAllowed( allowedControls, 'inherit' );
+	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
-	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
@@ -131,7 +122,6 @@ export default function QueryInspectorControls( props ) {
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
-		showColumnsControl ||
 		showOrderControl ||
 		showStickyControl;
 	const showTaxControl =
@@ -185,6 +175,10 @@ export default function QueryInspectorControls( props ) {
 	const showDisplayPanel =
 		showPostCountControl || showOffSetControl || showPagesControl;
 
+	// The block cannot inherit a default WordPress query in singular content (e.g., post, page, 404, blank).
+	// Warn users but still permit this type of query for exceptional cases in Classic and Hybrid themes.
+	const hasInheritanceWarning = isSingular && inherit;
+
 	return (
 		<>
 			{ showSettingsPanel && (
@@ -208,36 +202,48 @@ export default function QueryInspectorControls( props ) {
 							onDeselect={ () => setQuery( { inherit: true } ) }
 							isShownByDefault
 						>
-							<ToggleGroupControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
-								label={ __( 'Query type' ) }
-								isBlock
-								onChange={ ( value ) => {
-									setQuery( {
-										inherit: value === 'default',
-									} );
-								} }
-								help={
-									inherit
-										? __(
-												'Display a list of posts or custom post types based on the current template.'
-										  )
-										: __(
-												'Display a list of posts or custom post types based on specific criteria.'
-										  )
-								}
-								value={ !! inherit ? 'default' : 'custom' }
-							>
-								<ToggleGroupControlOption
-									value="default"
-									label={ __( 'Default' ) }
-								/>
-								<ToggleGroupControlOption
-									value="custom"
-									label={ __( 'Custom' ) }
-								/>
-							</ToggleGroupControl>
+							<VStack spacing={ 4 }>
+								<ToggleGroupControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Query type' ) }
+									isBlock
+									onChange={ ( value ) => {
+										setQuery( {
+											inherit: value === 'default',
+										} );
+									} }
+									help={
+										inherit
+											? __(
+													'Display a list of posts or custom post types based on the current template.'
+											  )
+											: __(
+													'Display a list of posts or custom post types based on specific criteria.'
+											  )
+									}
+									value={ !! inherit ? 'default' : 'custom' }
+								>
+									<ToggleGroupControlOption
+										value="default"
+										label={ __( 'Default' ) }
+									/>
+									<ToggleGroupControlOption
+										value="custom"
+										label={ __( 'Custom' ) }
+									/>
+								</ToggleGroupControl>
+								{ hasInheritanceWarning && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'Cannot inherit the current template query when placed inside the singular content (e.g., post, page, 404, blank).'
+										) }
+									</Notice>
+								) }
+							</VStack>
 						</ToolsPanelItem>
 					) }
 
@@ -282,43 +288,6 @@ export default function QueryInspectorControls( props ) {
 						</ToolsPanelItem>
 					) }
 
-					{ showColumnsControl && (
-						<ToolsPanelItem
-							hasValue={ () => displayLayout?.columns !== 2 }
-							label={ __( 'Columns' ) }
-							onDeselect={ () =>
-								setDisplayLayout( { columns: 2 } )
-							}
-							isShownByDefault
-						>
-							<>
-								<RangeControl
-									__nextHasNoMarginBottom
-									__next40pxDefaultSize
-									label={ __( 'Columns' ) }
-									value={ displayLayout.columns }
-									onChange={ ( value ) =>
-										setDisplayLayout( {
-											columns: value,
-										} )
-									}
-									min={ 2 }
-									max={ Math.max( 6, displayLayout.columns ) }
-								/>
-								{ displayLayout.columns > 6 && (
-									<Notice
-										status="warning"
-										isDismissible={ false }
-									>
-										{ __(
-											'This column count exceeds the recommended amount and may cause visual breakage.'
-										) }
-									</Notice>
-								) }
-							</>
-						</ToolsPanelItem>
-					) }
-
 					{ showOrderControl && (
 						<ToolsPanelItem
 							hasValue={ () =>
@@ -443,14 +412,20 @@ export default function QueryInspectorControls( props ) {
 						<ToolsPanelItem
 							hasValue={ () => !! querySearch }
 							label={ __( 'Keyword' ) }
-							onDeselect={ () => setQuerySearch( '' ) }
+							onDeselect={ () => {
+								setQuery( { search: '' } );
+								setQuerySearch( '' );
+							} }
 						>
 							<TextControl
 								__nextHasNoMarginBottom
 								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
-								onChange={ setQuerySearch }
+								onChange={ ( newQuerySearch ) => {
+									debouncedQuerySearch( newQuerySearch );
+									setQuerySearch( newQuerySearch );
+								} }
 							/>
 						</ToolsPanelItem>
 					) }
diff --git a/packages/block-library/src/query/edit/inspector-controls/parent-control.js b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
index 5fb9ffaad20e88..310bbdce503aa7 100644
--- a/packages/block-library/src/query/edit/inspector-controls/parent-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/parent-control.js
@@ -51,7 +51,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				),
 			};
 		},
-		[ search, parents ]
+		[ search, postType, parents ]
 	);
 	const currentParents = useSelect(
 		( select ) => {
@@ -65,7 +65,7 @@ function ParentControl( { parents, postType, onChange } ) {
 				per_page: parents.length,
 			} );
 		},
-		[ parents ]
+		[ parents, postType ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing parents.
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
index 447b667cdacb56..7a78b766d2b209 100644
--- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -120,7 +120,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				),
 			};
 		},
-		[ search, termIds ]
+		[ search, taxonomy.slug, termIds ]
 	);
 	// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.
 	// They are used to extract the terms' names to populate the `FormTokenField` properly
@@ -137,7 +137,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				per_page: termIds.length,
 			} );
 		},
-		[ termIds ]
+		[ taxonomy.slug, termIds ]
 	);
 	// Update the `value` state only after the selectors are resolved
 	// to avoid emptying the input when we're changing terms.
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 459ce2af018c2a..ce223a3d54d394 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -10,8 +10,8 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	useInnerBlocksProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -19,11 +19,13 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
+import { unlock } from '../../lock-unlock';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
 import QueryToolbar from './query-toolbar';
-import { htmlElementMessages } from '../../utils/messages';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -38,7 +40,6 @@ export default function QueryContent( {
 	const {
 		queryId,
 		query,
-		displayLayout,
 		enhancedPagination,
 		tagName: TagName = 'div',
 		query: { inherit } = {},
@@ -86,8 +87,11 @@ export default function QueryContent( {
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
 	const updateQuery = useCallback(
-		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
-		[ query, setAttributes ]
+		( newQuery ) =>
+			setAttributes( ( prevAttributes ) => ( {
+				query: { ...prevAttributes.query, ...newQuery },
+			} ) ),
+		[ setAttributes ]
 	);
 	useEffect( () => {
 		const newQuery = {};
@@ -98,21 +102,15 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
-		// We need to reset the `inherit` value if in a singular template, as queries
-		// are not inherited when in singular content (e.g. post, page, 404, blank).
-		if ( isSingular && query.inherit ) {
-			newQuery.inherit = false;
-		}
+
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
 	}, [
 		query.perPage,
-		query.inherit,
-		postsPerPage,
 		inherit,
-		isSingular,
+		postsPerPage,
 		__unstableMarkNextChangeAsNotPersistent,
 		updateQuery,
 	] );
@@ -129,10 +127,6 @@ export default function QueryContent( {
 		__unstableMarkNextChangeAsNotPersistent,
 		setAttributes,
 	] );
-	const updateDisplayLayout = ( newDisplayLayout ) =>
-		setAttributes( {
-			displayLayout: { ...displayLayout, ...newDisplayLayout },
-		} );
 
 	return (
 		<>
@@ -146,7 +140,6 @@ export default function QueryContent( {
 					name={ name }
 					attributes={ attributes }
 					setQuery={ updateQuery }
-					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
 					isSingular={ isSingular }
@@ -156,21 +149,18 @@ export default function QueryContent( {
 				<QueryToolbar attributes={ attributes } clientId={ clientId } />
 			</BlockControls>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<main>', value: 'main' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
 				/>
 				<EnhancedPaginationControl
 					enhancedPagination={ enhancedPagination }
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index d67685f3561b01..3416e16d5b5a09 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -22,7 +22,7 @@ export const settings = {
 	icon,
 	example: {
 		attributes: {
-			citation: 'Julio Cortázar',
+			citation: __( 'Julio Cortázar' ),
 		},
 		innerBlocks: [
 			{
diff --git a/packages/block-library/src/read-more/block.json b/packages/block-library/src/read-more/block.json
index 9e4fc84d193f71..eabc7acf3e3a37 100644
--- a/packages/block-library/src/read-more/block.json
+++ b/packages/block-library/src/read-more/block.json
@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json
index b87a8cc1be18d1..fc49e1d858e898 100644
--- a/packages/block-library/src/rss/block.json
+++ b/packages/block-library/src/rss/block.json
@@ -18,7 +18,8 @@
 		},
 		"feedURL": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"itemsToShow": {
 			"type": "number",
diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js
index 0dba2ceb000b15..da87eeda156331 100644
--- a/packages/block-library/src/rss/edit.js
+++ b/packages/block-library/src/rss/edit.js
@@ -9,13 +9,14 @@ import {
 import {
 	Button,
 	Disabled,
-	PanelBody,
 	Placeholder,
 	RangeControl,
 	ToggleControl,
 	ToolbarGroup,
 	TextControl,
 	__experimentalInputControl as InputControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
@@ -23,6 +24,11 @@ import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 20;
 
@@ -42,6 +48,8 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		rel,
 	} = attributes;
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	function toggleAttribute( propName ) {
 		return () => {
 			const value = attributes[ propName ];
@@ -141,75 +149,153 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ toolbarControls } />
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							itemsToShow: 5,
+							displayAuthor: false,
+							displayDate: false,
+							displayExcerpt: false,
+							excerptLength: 55,
+							columns: 2,
+							openInNewTab: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Number of items' ) }
-						value={ itemsToShow }
-						onChange={ ( value ) =>
-							setAttributes( { itemsToShow: value } )
-						}
-						min={ DEFAULT_MIN_ITEMS }
-						max={ DEFAULT_MAX_ITEMS }
-						required
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display author' ) }
-						checked={ displayAuthor }
-						onChange={ toggleAttribute( 'displayAuthor' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display date' ) }
-						checked={ displayDate }
-						onChange={ toggleAttribute( 'displayDate' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Display excerpt' ) }
-						checked={ displayExcerpt }
-						onChange={ toggleAttribute( 'displayExcerpt' ) }
-					/>
-					{ displayExcerpt && (
+						hasValue={ () => itemsToShow !== 5 }
+						onDeselect={ () => setAttributes( { itemsToShow: 5 } ) }
+						isShownByDefault
+					>
 						<RangeControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							label={ __( 'Max number of words in excerpt' ) }
-							value={ excerptLength }
+							label={ __( 'Number of items' ) }
+							value={ itemsToShow }
 							onChange={ ( value ) =>
-								setAttributes( { excerptLength: value } )
+								setAttributes( { itemsToShow: value } )
 							}
-							min={ 10 }
-							max={ 100 }
+							min={ DEFAULT_MIN_ITEMS }
+							max={ DEFAULT_MAX_ITEMS }
 							required
 						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display author' ) }
+						hasValue={ () => !! displayAuthor }
+						onDeselect={ () =>
+							setAttributes( { displayAuthor: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display author' ) }
+							checked={ displayAuthor }
+							onChange={ toggleAttribute( 'displayAuthor' ) }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display date' ) }
+						hasValue={ () => !! displayDate }
+						onDeselect={ () =>
+							setAttributes( { displayDate: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display date' ) }
+							checked={ displayDate }
+							onChange={ toggleAttribute( 'displayDate' ) }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						label={ __( 'Display excerpt' ) }
+						hasValue={ () => !! displayExcerpt }
+						onDeselect={ () =>
+							setAttributes( { displayExcerpt: false } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display excerpt' ) }
+							checked={ displayExcerpt }
+							onChange={ toggleAttribute( 'displayExcerpt' ) }
+						/>
+					</ToolsPanelItem>
+
+					{ displayExcerpt && (
+						<ToolsPanelItem
+							label={ __( 'Max number of words in excerpt' ) }
+							hasValue={ () => excerptLength !== 55 }
+							onDeselect={ () =>
+								setAttributes( { excerptLength: 55 } )
+							}
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Max number of words in excerpt' ) }
+								value={ excerptLength }
+								onChange={ ( value ) =>
+									setAttributes( { excerptLength: value } )
+								}
+								min={ 10 }
+								max={ 100 }
+								required
+							/>
+						</ToolsPanelItem>
 					) }
+
 					{ blockLayout === 'grid' && (
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
+						<ToolsPanelItem
 							label={ __( 'Columns' ) }
-							value={ columns }
-							onChange={ ( value ) =>
-								setAttributes( { columns: value } )
-							}
-							min={ 2 }
-							max={ 6 }
-							required
-						/>
+							hasValue={ () => columns !== 2 }
+							onDeselect={ () => setAttributes( { columns: 2 } ) }
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Columns' ) }
+								value={ columns }
+								onChange={ ( value ) =>
+									setAttributes( { columns: value } )
+								}
+								min={ 2 }
+								max={ 6 }
+								required
+							/>
+						</ToolsPanelItem>
 					) }
 
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
 						label={ __( 'Open links in new tab' ) }
-						checked={ openInNewTab }
-						onChange={ ( value ) =>
-							setAttributes( { openInNewTab: value } )
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
 						}
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ ( value ) =>
+								setAttributes( { openInNewTab: value } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl
diff --git a/packages/block-library/src/rss/index.php b/packages/block-library/src/rss/index.php
index 2bcae2f68a7baa..5ab990bbcbcee9 100644
--- a/packages/block-library/src/rss/index.php
+++ b/packages/block-library/src/rss/index.php
@@ -46,7 +46,8 @@ function render_block_core_rss( $attributes ) {
 	}
 
 	foreach ( $rss_items as $item ) {
-		$title = esc_html( trim( strip_tags( $item->get_title() ) ) );
+		$title = esc_html( trim( strip_tags( html_entity_decode( $item->get_title() ) ) ) );
+
 		if ( empty( $title ) ) {
 			$title = __( '(no title)' );
 		}
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 16eb62daa6abbf..8d99cbe91d877e 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import {
 	useBlockProps,
-	BlockControls,
 	InspectorControls,
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
@@ -21,9 +20,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
-	ToolbarDropdownMenu,
-	ToolbarGroup,
-	ToolbarButton,
+	SelectControl,
+	ToggleControl,
 	ResizableBox,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -41,14 +39,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import {
-	buttonOnly,
-	buttonOutside,
-	buttonInside,
-	noButton,
-	buttonWithIcon,
-	toggleLabel,
-} from './icons';
 import {
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
@@ -201,68 +191,23 @@ export default function SearchEdit( {
 
 	const buttonPositionControls = [
 		{
-			role: 'menuitemradio',
-			title: __( 'Button outside' ),
-			isActive: buttonPosition === 'button-outside',
-			icon: buttonOutside,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-outside',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'Button outside' ),
+			value: 'button-outside',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'Button inside' ),
-			isActive: buttonPosition === 'button-inside',
-			icon: buttonInside,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-inside',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'Button inside' ),
+			value: 'button-inside',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'No button' ),
-			isActive: buttonPosition === 'no-button',
-			icon: noButton,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'no-button',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'No button' ),
+			value: 'no-button',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'Button only' ),
-			isActive: buttonPosition === 'button-only',
-			icon: buttonOnly,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-only',
-					isSearchFieldHidden: true,
-				} );
-			},
+			label: __( 'Button only' ),
+			value: 'button-only',
 		},
 	];
 
-	const getButtonPositionIcon = () => {
-		switch ( buttonPosition ) {
-			case 'button-inside':
-				return buttonInside;
-			case 'button-outside':
-				return buttonOutside;
-			case 'no-button':
-				return noButton;
-			case 'button-only':
-				return buttonOnly;
-		}
-	};
-
 	const getResizableSides = () => {
 		if ( hasOnlyButton ) {
 			return {};
@@ -376,40 +321,6 @@ export default function SearchEdit( {
 
 	const controls = (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						title={ __( 'Show search label' ) }
-						icon={ toggleLabel }
-						onClick={ () => {
-							setAttributes( {
-								showLabel: ! showLabel,
-							} );
-						} }
-						className={ showLabel ? 'is-pressed' : undefined }
-					/>
-					<ToolbarDropdownMenu
-						icon={ getButtonPositionIcon() }
-						label={ __( 'Change button position' ) }
-						controls={ buttonPositionControls }
-					/>
-					{ ! hasNoButton && (
-						<ToolbarButton
-							title={ __( 'Use button with icon' ) }
-							icon={ buttonWithIcon }
-							onClick={ () => {
-								setAttributes( {
-									buttonUseIcon: ! buttonUseIcon,
-								} );
-							} }
-							className={
-								buttonUseIcon ? 'is-pressed' : undefined
-							}
-						/>
-					) }
-				</ToolbarGroup>
-			</BlockControls>
-
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -417,10 +328,84 @@ export default function SearchEdit( {
 						setAttributes( {
 							width: undefined,
 							widthUnit: undefined,
+							showLabel: true,
+							buttonUseIcon: false,
+							buttonPosition: 'button-outside',
+							isSearchFieldHidden: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
+					<ToolsPanelItem
+						hasValue={ () => ! showLabel }
+						label={ __( 'Show label' ) }
+						onDeselect={ () => {
+							setAttributes( {
+								showLabel: true,
+							} );
+						} }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							checked={ showLabel }
+							label={ __( 'Show label' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									showLabel: value,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => buttonPosition !== 'button-outside' }
+						label={ __( 'Button position' ) }
+						onDeselect={ () => {
+							setAttributes( {
+								buttonPosition: 'button-outside',
+								isSearchFieldHidden: false,
+							} );
+						} }
+						isShownByDefault
+					>
+						<SelectControl
+							value={ buttonPosition }
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Button position' ) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									buttonPosition: value,
+									isSearchFieldHidden:
+										value === 'button-only',
+								} );
+							} }
+							options={ buttonPositionControls }
+						/>
+					</ToolsPanelItem>
+					{ buttonPosition !== 'no-button' && (
+						<ToolsPanelItem
+							hasValue={ () => !! buttonUseIcon }
+							label={ __( 'Use button with icon' ) }
+							onDeselect={ () => {
+								setAttributes( {
+									buttonUseIcon: false,
+								} );
+							} }
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								checked={ buttonUseIcon }
+								label={ __( 'Use button with icon' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										buttonUseIcon: value,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
 					<ToolsPanelItem
 						hasValue={ () => !! width }
 						label={ __( 'Width' ) }
@@ -495,7 +480,7 @@ export default function SearchEdit( {
 											key={ widthValue }
 											value={ widthValue }
 											label={ sprintf(
-												/* translators: Percentage value. */
+												/* translators: %d: Percentage value. */
 												__( '%d%%' ),
 												widthValue
 											) }
diff --git a/packages/block-library/src/search/icons.js b/packages/block-library/src/search/icons.js
deleted file mode 100644
index 3d50d161462965..00000000000000
--- a/packages/block-library/src/search/icons.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Rect } from '@wordpress/components';
-
-export const buttonOnly = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect x="7" y="10" width="10" height="4" rx="1" fill="currentColor" />
-	</SVG>
-);
-
-export const buttonOutside = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect
-			x="4.75"
-			y="15.25"
-			width="6.5"
-			height="9.5"
-			transform="rotate(-90 4.75 15.25)"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			fill="none"
-		/>
-		<Rect x="16" y="10" width="4" height="4" rx="1" fill="currentColor" />
-	</SVG>
-);
-
-export const buttonInside = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect
-			x="4.75"
-			y="15.25"
-			width="6.5"
-			height="14.5"
-			transform="rotate(-90 4.75 15.25)"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			fill="none"
-		/>
-		<Rect x="14" y="10" width="4" height="4" rx="1" fill="currentColor" />
-	</SVG>
-);
-
-export const noButton = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect
-			x="4.75"
-			y="15.25"
-			width="6.5"
-			height="14.5"
-			transform="rotate(-90 4.75 15.25)"
-			stroke="currentColor"
-			fill="none"
-			strokeWidth="1.5"
-		/>
-	</SVG>
-);
-
-export const buttonWithIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect
-			x="4.75"
-			y="7.75"
-			width="14.5"
-			height="8.5"
-			rx="1.25"
-			stroke="currentColor"
-			fill="none"
-			strokeWidth="1.5"
-		/>
-		<Rect x="8" y="11" width="8" height="2" fill="currentColor" />
-	</SVG>
-);
-
-export const toggleLabel = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect
-			x="4.75"
-			y="17.25"
-			width="5.5"
-			height="14.5"
-			transform="rotate(-90 4.75 17.25)"
-			stroke="currentColor"
-			fill="none"
-			strokeWidth="1.5"
-		/>
-		<Rect x="4" y="7" width="10" height="2" fill="currentColor" />
-	</SVG>
-);
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index 87e12f5d33d079..bfa3b7857ab7d8 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -10,9 +10,7 @@
  *
  * @since 6.3.0 Using block.json `viewScript` to register script, and update `view_script_handles()` only when needed.
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The saved content.
- * @param WP_Block $block      The parsed block.
+ * @param array $attributes The block attributes.
  *
  * @return string The search block markup.
  */
@@ -152,17 +150,22 @@ function render_block_core_search( $attributes ) {
 		}
 	}
 
-	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
-	$field_markup         = sprintf(
-		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
-		esc_attr( $field_markup_classes ),
+	$field_markup_classes = array(
+		'wp-block-search__inside-wrapper',
+	);
+	if ( $is_button_inside && ! empty( $border_color_classes ) ) {
+		$field_markup_classes[] = $border_color_classes;
+	}
+	$field_markup       = sprintf(
+		'<div class="%s" %s>%s</div>',
+		esc_attr( implode( ' ', $field_markup_classes ) ),
 		$inline_styles['wrapper'],
 		$input . $query_params_markup . $button
 	);
-	$wrapper_attributes   = get_block_wrapper_attributes(
+	$wrapper_attributes = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
-	$form_directives      = '';
+	$form_directives    = '';
 
 	// If it's interactive, add the directives.
 	if ( $is_expandable_searchfield ) {
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index e61fdaea0e6434..1fb97aec852627 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -110,6 +110,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
 	border: 1px solid $gray-600;
+	background-color: $white;
 	box-sizing: border-box;
 
 	.wp-block-search__input {
diff --git a/packages/block-library/src/separator/edit.js b/packages/block-library/src/separator/edit.js
index ca94ef41f1d8ad..2205f0668e01c7 100644
--- a/packages/block-library/src/separator/edit.js
+++ b/packages/block-library/src/separator/edit.js
@@ -6,20 +6,44 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule, SelectControl } from '@wordpress/components';
 import {
-	useBlockProps,
 	getColorClassName,
-	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
+	useBlockProps,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { htmlElementMessages } from '../utils/messages';
+
+const HtmlElementControl = ( { tagName, setAttributes } ) => {
+	return (
+		<SelectControl
+			label={ __( 'HTML element' ) }
+			value={ tagName }
+			onChange={ ( newValue ) => setAttributes( { tagName: newValue } ) }
+			options={ [
+				{ label: __( 'Default (<hr>)' ), value: 'hr' },
+				{ label: '<div>', value: 'div' },
+			] }
+			help={
+				tagName === 'hr'
+					? __(
+							'Only select <hr> if the separator conveys important information and should be announced by screen readers.'
+					  )
+					: __(
+							'The <div> element should only be used if the block is a design element with no semantic meaning.'
+					  )
+			}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+};
 
 export default function SeparatorEdit( { attributes, setAttributes } ) {
 	const { backgroundColor, opacity, style, tagName } = attributes;
@@ -52,19 +76,9 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<hr>)' ), value: 'hr' },
-						{ label: '<div>', value: 'div' },
-					] }
-					value={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ tagName ] }
+				<HtmlElementControl
+					tagName={ tagName }
+					setAttributes={ setAttributes }
 				/>
 			</InspectorControls>
 			<Wrapper
diff --git a/packages/block-library/src/shortcode/block.json b/packages/block-library/src/shortcode/block.json
index 22d838a7198e1e..6e30210b7c081a 100644
--- a/packages/block-library/src/shortcode/block.json
+++ b/packages/block-library/src/shortcode/block.json
@@ -9,7 +9,8 @@
 	"attributes": {
 		"text": {
 			"type": "string",
-			"source": "raw"
+			"source": "raw",
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index f1ba371bfb35e8..34c19e78232c56 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	ResizableBox,
 	Spinner,
@@ -24,6 +23,8 @@ import {
 	Button,
 	DropZone,
 	FlexItem,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
@@ -47,6 +48,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { MIN_SIZE } from '../image/constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const ACCEPT_MEDIA_STRING = 'image/*';
@@ -70,6 +72,7 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -276,31 +279,61 @@ const SiteLogo = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						isShownByDefault
+						hasValue={ () => !! width }
 						label={ __( 'Image width' ) }
-						onChange={ ( newWidth ) =>
-							setAttributes( { width: newWidth } )
+						onDeselect={ () =>
+							setAttributes( { width: undefined } )
 						}
-						min={ minWidth }
-						max={ maxWidthBuffer }
-						initialPosition={ Math.min(
-							defaultWidth,
-							maxWidthBuffer
-						) }
-						value={ width || '' }
-						disabled={ ! isResizable }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<RangeControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Image width' ) }
+							onChange={ ( newWidth ) =>
+								setAttributes( { width: newWidth } )
+							}
+							min={ minWidth }
+							max={ maxWidthBuffer }
+							initialPosition={ Math.min(
+								defaultWidth,
+								maxWidthBuffer
+							) }
+							value={ width || '' }
+							disabled={ ! isResizable }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						isShownByDefault
+						hasValue={ () => ! isLink }
 						label={ __( 'Link image to home' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						onDeselect={ () => setAttributes( { isLink: true } ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link image to home' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+
 					{ isLink && (
-						<>
+						<ToolsPanelItem
+							isShownByDefault
+							hasValue={ () => linkTarget === '_blank' }
+							label={ __( 'Open in new tab' ) }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -311,10 +344,19 @@ const SiteLogo = ( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
+
 					{ canUserEdit && (
-						<>
+						<ToolsPanelItem
+							isShownByDefault
+							hasValue={ () => !! shouldSyncIcon }
+							label={ __( 'Use as Site Icon' ) }
+							onDeselect={ () => {
+								setAttributes( { shouldSyncIcon: false } );
+								setIcon( undefined );
+							} }
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Use as Site Icon' ) }
@@ -325,9 +367,9 @@ const SiteLogo = ( {
 								checked={ !! shouldSyncIcon }
 								help={ syncSiteIconHelpText }
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<BlockControls group="block">
 				{ canEditImage && ! isEditingImage && (
@@ -433,6 +475,7 @@ export default function LogoEdit( {
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
 	const [ temporaryURL, setTemporaryURL ] = useState();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -590,9 +633,15 @@ export default function LogoEdit( {
 
 	const mediaInspectorPanel = ( canUserEdit || logoUrl ) && (
 		<InspectorControls>
-			<PanelBody title={ __( 'Media' ) }>
-				<div className="block-library-site-logo__inspector-media-replace-container">
-					{ ! canUserEdit ? (
+			<ToolsPanel
+				label={ __( 'Media' ) }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				{ ! canUserEdit ? (
+					<div
+						className="block-library-site-logo__inspector-media-replace-container"
+						style={ { gridColumn: '1 / -1' } }
+					>
 						<InspectorLogoPreview
 							media={ mediaItemData }
 							itemGroupProps={ {
@@ -601,8 +650,14 @@ export default function LogoEdit( {
 									'block-library-site-logo__inspector-readonly-logo-preview',
 							} }
 						/>
-					) : (
-						<>
+					</div>
+				) : (
+					<ToolsPanelItem
+						hasValue={ () => !! logoUrl }
+						label={ __( 'Logo' ) }
+						isShownByDefault
+					>
+						<div className="block-library-site-logo__inspector-media-replace-container">
 							<SiteLogoReplaceFlow
 								{ ...mediaReplaceFlowProps }
 								name={
@@ -625,10 +680,10 @@ export default function LogoEdit( {
 								) }
 							/>
 							<DropZone onFilesDrop={ onFilesDrop } />
-						</>
-					) }
-				</div>
-			</PanelBody>
+						</div>
+					</ToolsPanelItem>
+				) }
+			</ToolsPanel>
 		</InspectorControls>
 	);
 
diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
index d42b7bcd4bed64..1e83e9dded80df 100644
--- a/packages/block-library/src/site-tagline/block.json
+++ b/packages/block-library/src/site-tagline/block.json
@@ -4,7 +4,7 @@
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
-	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design.",
+	"description": "Describe in a few words what this site is about. This is important for search results, sharing on social media, and gives overall clarity to visitors.",
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {
diff --git a/packages/block-library/src/site-title/index.php b/packages/block-library/src/site-title/index.php
index f777f9f13caf3f..297d99894e104d 100644
--- a/packages/block-library/src/site-title/index.php
+++ b/packages/block-library/src/site-title/index.php
@@ -17,7 +17,7 @@
 function render_block_core_site_title( $attributes ) {
 	$site_title = get_bloginfo( 'name' );
 	if ( ! trim( $site_title ) ) {
-		return;
+		return '';
 	}
 
 	$tag_name = 'h1';
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 4cd24505fd552a..830ea4970acf3e 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -7,8 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { useDispatch } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	BlockControls,
 	InspectorControls,
@@ -20,6 +19,7 @@ import {
 } from '@wordpress/block-editor';
 import { useState, useRef } from '@wordpress/element';
 import {
+	Icon,
 	Button,
 	Dropdown,
 	TextControl,
@@ -31,11 +31,12 @@ import {
 import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SocialLinkURLPopover = ( {
@@ -108,6 +109,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 	clientId,
+	name,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -138,8 +140,17 @@ const SocialLinkEdit = ( {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
-	const IconComponent = getIconBySite( service );
-	const socialLinkName = getNameBySite( service );
+	const { activeVariation } = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation } = select( blocksStore );
+			return {
+				activeVariation: getActiveBlockVariation( name, attributes ),
+			};
+		},
+		[ name, attributes ]
+	);
+
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 	// The initial label (ie. the link text) is an empty string.
 	// We want to prevent empty links so that the link text always fallbacks to
 	// the social name, even when users enter and save an empty string or only
@@ -167,7 +178,7 @@ const SocialLinkEdit = ( {
 				// to edit this attribute.
 				<BlockControls group="other">
 					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
+						popoverProps={ { placement: 'bottom-start' } }
 						renderToggle={ ( { isOpen, onToggle } ) => (
 							<ToolbarButton
 								onClick={ onToggle }
@@ -258,7 +269,7 @@ const SocialLinkEdit = ( {
 				 */
 				/* eslint-disable jsx-a11y/no-redundant-roles */ }
 				<button aria-haspopup="dialog" { ...blockProps } role="button">
-					<IconComponent />
+					<Icon icon={ icon } />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
 							'screen-reader-text': ! showLabels,
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index 0b4b6b0ac7d4bd..cfc2fa8ecab328 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -20,10 +20,12 @@ import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
-import { getIconBySite, getNameBySite } from './social-list';
+import { getSocialService } from './social-list';
 import styles from './editor.scss';
 
 const DEFAULT_ACTIVE_ICON_STYLES = {
@@ -54,6 +56,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	onFocus,
 	name,
+	activeVariation,
 } ) => {
 	const { url, service = name } = attributes;
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
@@ -64,8 +67,7 @@ const SocialLinkEdit = ( {
 		DEFAULT_ACTIVE_ICON_STYLES;
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
-	const IconComponent = getIconBySite( service )();
-	const socialLinkName = getNameBySite( service );
+	const { icon, label: socialLinkName } = getSocialService( activeVariation );
 
 	// When new social icon is added link sheet is opened automatically.
 	useEffect( () => {
@@ -190,7 +192,7 @@ const SocialLinkEdit = ( {
 				>
 					<Icon
 						animated
-						icon={ IconComponent }
+						icon={ icon() }
 						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
@@ -202,12 +204,16 @@ const SocialLinkEdit = ( {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const { getBlock } = select( blockEditorStore );
+		const { getActiveBlockVariation } = select( blocksStore );
 
 		const block = getBlock( clientId );
 		const name = block?.name.substring( 17 );
 
 		return {
 			name,
+			activeVariation: block
+				? getActiveBlockVariation( block.name, block.attributes )
+				: undefined,
 		};
 	} ),
 ] )( SocialLinkEdit );
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 9775f6dece5d7d..888d6cff902285 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -138,203 +138,216 @@ function block_core_social_link_get_name( $service ) {
 function block_core_social_link_services( $service = '', $field = '' ) {
 	$services_data = array(
 		'fivehundredpx' => array(
-			'name' => '500px',
+			'name' => __( '500px' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.94026,15.1412c.00437.01213.108.29862.168.44064a6.55008,6.55008,0,1,0,6.03191-9.09557,6.68654,6.68654,0,0,0-2.58357.51467A8.53914,8.53914,0,0,0,8.21268,8.61344L8.209,8.61725V3.22948l9.0504-.00008c.32934-.0036.32934-.46353.32934-.61466s0-.61091-.33035-.61467L7.47248,2a.43.43,0,0,0-.43131.42692v7.58355c0,.24466.30476.42131.58793.4819.553.11812.68074-.05864.81617-.2457l.018-.02481A10.52673,10.52673,0,0,1,9.32258,9.258a5.35268,5.35268,0,1,1,7.58985,7.54976,5.417,5.417,0,0,1-3.80867,1.56365,5.17483,5.17483,0,0,1-2.69822-.74478l.00342-4.61111a2.79372,2.79372,0,0,1,.71372-1.78792,2.61611,2.61611,0,0,1,1.98282-.89477,2.75683,2.75683,0,0,1,1.95525.79477,2.66867,2.66867,0,0,1,.79656,1.909,2.724,2.724,0,0,1-2.75849,2.748,4.94651,4.94651,0,0,1-.86254-.13719c-.31234-.093-.44519.34058-.48892.48349-.16811.54966.08453.65862.13687.67489a3.75751,3.75751,0,0,0,1.25234.18375,3.94634,3.94634,0,1,0-2.82444-6.742,3.67478,3.67478,0,0,0-1.13028,2.584l-.00041.02323c-.0035.11667-.00579,2.881-.00644,3.78811l-.00407-.00451a6.18521,6.18521,0,0,1-1.0851-1.86092c-.10544-.27856-.34358-.22925-.66857-.12917-.14192.04372-.57386.17677-.47833.489Zm4.65165-1.08338a.51346.51346,0,0,0,.19513.31818l.02276.022a.52945.52945,0,0,0,.3517.18416.24242.24242,0,0,0,.16577-.0611c.05473-.05082.67382-.67812.73287-.738l.69041.68819a.28978.28978,0,0,0,.21437.11032.53239.53239,0,0,0,.35708-.19486c.29792-.30419.14885-.46821.07676-.54751l-.69954-.69975.72952-.73469c.16-.17311.01874-.35708-.12218-.498-.20461-.20461-.402-.25742-.52855-.14083l-.7254.72665-.73354-.73375a.20128.20128,0,0,0-.14179-.05695.54135.54135,0,0,0-.34379.19648c-.22561.22555-.274.38149-.15656.5059l.73374.7315-.72942.73072A.26589.26589,0,0,0,11.59191,14.05782Zm1.59866-9.915A8.86081,8.86081,0,0,0,9.854,4.776a.26169.26169,0,0,0-.16938.22759.92978.92978,0,0,0,.08619.42094c.05682.14524.20779.531.50006.41955a8.40969,8.40969,0,0,1,2.91968-.55484,7.87875,7.87875,0,0,1,3.086.62286,8.61817,8.61817,0,0,1,2.30562,1.49315.2781.2781,0,0,0,.18318.07586c.15529,0,.30425-.15253.43167-.29551.21268-.23861.35873-.4369.1492-.63538a8.50425,8.50425,0,0,0-2.62312-1.694A9.0177,9.0177,0,0,0,13.19058,4.14283ZM19.50945,18.6236h0a.93171.93171,0,0,0-.36642-.25406.26589.26589,0,0,0-.27613.06613l-.06943.06929A7.90606,7.90606,0,0,1,7.60639,18.505a7.57284,7.57284,0,0,1-1.696-2.51537,8.58715,8.58715,0,0,1-.5147-1.77754l-.00871-.04864c-.04939-.25873-.28755-.27684-.62981-.22448-.14234.02178-.5755.088-.53426.39969l.001.00712a9.08807,9.08807,0,0,0,15.406,4.99094c.00193-.00192.04753-.04718.0725-.07436C19.79425,19.16234,19.87422,18.98728,19.50945,18.6236Z"></path></svg>',
 		),
 		'amazon'        => array(
-			'name' => 'Amazon',
+			'name' => __( 'Amazon' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.582,8.182C11.934,8.367,9.78,8.49,8.238,9.166c-1.781,0.769-3.03,2.337-3.03,4.644 c0,2.953,1.86,4.429,4.253,4.429c2.02,0,3.125-0.477,4.685-2.065c0.516,0.747,0.685,1.109,1.629,1.894 c0.212,0.114,0.483,0.103,0.672-0.066l0.006,0.006c0.567-0.505,1.599-1.401,2.18-1.888c0.231-0.188,0.19-0.496,0.009-0.754 c-0.52-0.718-1.072-1.303-1.072-2.634V8.305c0-1.876,0.133-3.599-1.249-4.891C15.23,2.369,13.422,2,12.04,2 C9.336,2,6.318,3.01,5.686,6.351C5.618,6.706,5.877,6.893,6.109,6.945l2.754,0.298C9.121,7.23,9.308,6.977,9.357,6.72 c0.236-1.151,1.2-1.706,2.284-1.706c0.584,0,1.249,0.215,1.595,0.738c0.398,0.584,0.346,1.384,0.346,2.061V8.182z M13.049,14.088 c-0.451,0.8-1.169,1.291-1.967,1.291c-1.09,0-1.728-0.83-1.728-2.061c0-2.42,2.171-2.86,4.227-2.86v0.615 C13.582,12.181,13.608,13.104,13.049,14.088z M20.683,19.339C18.329,21.076,14.917,22,11.979,22c-4.118,0-7.826-1.522-10.632-4.057 c-0.22-0.199-0.024-0.471,0.241-0.317c3.027,1.762,6.771,2.823,10.639,2.823c2.608,0,5.476-0.541,8.115-1.66 C20.739,18.62,21.072,19.051,20.683,19.339z M21.336,21.043c-0.194,0.163-0.379,0.076-0.293-0.139 c0.284-0.71,0.92-2.298,0.619-2.684c-0.301-0.386-1.99-0.183-2.749-0.092c-0.23,0.027-0.266-0.173-0.059-0.319 c1.348-0.946,3.555-0.673,3.811-0.356C22.925,17.773,22.599,19.986,21.336,21.043z"></path></svg>',
 		),
 		'bandcamp'      => array(
-			'name' => 'Bandcamp',
+			'name' => __( 'Bandcamp' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.27 17.289 3 17.289 8.73 6.711 21 6.711 15.27 17.289"></path></svg>',
 		),
 		'behance'       => array(
-			'name' => 'Behance',
+			'name' => __( 'Behance' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M7.799,5.698c0.589,0,1.12,0.051,1.606,0.156c0.482,0.102,0.894,0.273,1.241,0.507c0.344,0.235,0.612,0.546,0.804,0.938 c0.188,0.387,0.281,0.871,0.281,1.443c0,0.619-0.141,1.137-0.421,1.551c-0.284,0.413-0.7,0.751-1.255,1.014 c0.756,0.218,1.317,0.601,1.689,1.146c0.374,0.549,0.557,1.205,0.557,1.975c0,0.623-0.12,1.161-0.359,1.612 c-0.241,0.457-0.569,0.828-0.973,1.114c-0.408,0.288-0.876,0.5-1.399,0.637C9.052,17.931,8.514,18,7.963,18H2V5.698H7.799 M7.449,10.668c0.481,0,0.878-0.114,1.192-0.345c0.311-0.228,0.463-0.603,0.463-1.119c0-0.286-0.051-0.523-0.152-0.707 C8.848,8.315,8.711,8.171,8.536,8.07C8.362,7.966,8.166,7.894,7.94,7.854c-0.224-0.044-0.457-0.06-0.697-0.06H4.709v2.874H7.449z M7.6,15.905c0.267,0,0.521-0.024,0.759-0.077c0.243-0.053,0.457-0.137,0.637-0.261c0.182-0.12,0.332-0.283,0.441-0.491 C9.547,14.87,9.6,14.602,9.6,14.278c0-0.633-0.18-1.084-0.533-1.357c-0.356-0.27-0.83-0.404-1.413-0.404H4.709v3.388L7.6,15.905z M16.162,15.864c0.367,0.358,0.897,0.538,1.583,0.538c0.493,0,0.92-0.125,1.277-0.374c0.354-0.248,0.571-0.514,0.654-0.79h2.155 c-0.347,1.072-0.872,1.838-1.589,2.299C19.534,18,18.67,18.23,17.662,18.23c-0.701,0-1.332-0.113-1.899-0.337 c-0.567-0.227-1.041-0.544-1.439-0.958c-0.389-0.415-0.689-0.907-0.904-1.484c-0.213-0.574-0.32-1.21-0.32-1.899 c0-0.666,0.11-1.288,0.329-1.863c0.222-0.577,0.529-1.075,0.933-1.492c0.406-0.42,0.885-0.751,1.444-0.994 c0.558-0.241,1.175-0.363,1.857-0.363c0.754,0,1.414,0.145,1.98,0.44c0.563,0.291,1.026,0.686,1.389,1.181 c0.363,0.493,0.622,1.057,0.783,1.69c0.16,0.632,0.217,1.292,0.171,1.983h-6.428C15.557,14.84,15.795,15.506,16.162,15.864 M18.973,11.184c-0.291-0.321-0.783-0.496-1.384-0.496c-0.39,0-0.714,0.066-0.973,0.2c-0.254,0.132-0.461,0.297-0.621,0.491 c-0.157,0.197-0.265,0.405-0.328,0.628c-0.063,0.217-0.101,0.413-0.111,0.587h3.98C19.478,11.969,19.265,11.509,18.973,11.184z M15.057,7.738h4.985V6.524h-4.985L15.057,7.738z"></path></svg>',
 		),
 		'bluesky'       => array(
-			'name' => 'Bluesky',
+			'name' => __( 'Bluesky' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.3,4.2c2.3,1.7,4.8,5.3,5.7,7.2.9-1.9,3.4-5.4,5.7-7.2,1.7-1.3,4.3-2.2,4.3.9s-.4,5.2-.6,5.9c-.7,2.6-3.3,3.2-5.6,2.8,4,.7,5.1,3,2.9,5.3-5,5.2-6.7-2.8-6.7-2.8,0,0-1.7,8-6.7,2.8-2.2-2.3-1.2-4.6,2.9-5.3-2.3.4-4.9-.3-5.6-2.8-.2-.7-.6-5.3-.6-5.9,0-3.1,2.7-2.1,4.3-.9h0Z"></path></svg>',
 		),
 		'chain'         => array(
-			'name' => 'Link',
+			'name' => __( 'Link' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M15.6,7.2H14v1.5h1.6c2,0,3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7H14v1.5h1.6c2.8,0,5.2-2.3,5.2-5.2,0-2.9-2.3-5.2-5.2-5.2zM4.7,12.4c0-2,1.7-3.7,3.7-3.7H10V7.2H8.4c-2.9,0-5.2,2.3-5.2,5.2,0,2.9,2.3,5.2,5.2,5.2H10v-1.5H8.4c-2,0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z"></path></svg>',
 		),
 		'codepen'       => array(
-			'name' => 'CodePen',
+			'name' => __( 'CodePen' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22.016,8.84c-0.002-0.013-0.005-0.025-0.007-0.037c-0.005-0.025-0.008-0.048-0.015-0.072 c-0.003-0.015-0.01-0.028-0.013-0.042c-0.008-0.02-0.015-0.04-0.023-0.062c-0.007-0.015-0.013-0.028-0.02-0.042 c-0.008-0.02-0.018-0.037-0.03-0.057c-0.007-0.013-0.017-0.027-0.025-0.038c-0.012-0.018-0.023-0.035-0.035-0.052 c-0.01-0.013-0.02-0.025-0.03-0.037c-0.015-0.017-0.028-0.032-0.043-0.045c-0.01-0.012-0.022-0.023-0.035-0.035 c-0.015-0.015-0.032-0.028-0.048-0.04c-0.012-0.01-0.025-0.02-0.037-0.03c-0.005-0.003-0.01-0.008-0.015-0.012l-9.161-6.096 c-0.289-0.192-0.666-0.192-0.955,0L2.359,8.237C2.354,8.24,2.349,8.245,2.344,8.249L2.306,8.277 c-0.017,0.013-0.033,0.027-0.048,0.04C2.246,8.331,2.234,8.342,2.222,8.352c-0.015,0.015-0.028,0.03-0.042,0.047 c-0.012,0.013-0.022,0.023-0.03,0.037C2.139,8.453,2.125,8.471,2.115,8.488C2.107,8.501,2.099,8.514,2.09,8.526 C2.079,8.548,2.069,8.565,2.06,8.585C2.054,8.6,2.047,8.613,2.04,8.626C2.032,8.648,2.025,8.67,2.019,8.69 c-0.005,0.013-0.01,0.027-0.013,0.042C1.999,8.755,1.995,8.778,1.99,8.803C1.989,8.817,1.985,8.828,1.984,8.84 C1.978,8.879,1.975,8.915,1.975,8.954v6.093c0,0.037,0.003,0.075,0.008,0.112c0.002,0.012,0.005,0.025,0.007,0.038 c0.005,0.023,0.008,0.047,0.015,0.072c0.003,0.015,0.008,0.028,0.013,0.04c0.007,0.022,0.013,0.042,0.022,0.063 c0.007,0.015,0.013,0.028,0.02,0.04c0.008,0.02,0.018,0.038,0.03,0.058c0.007,0.013,0.015,0.027,0.025,0.038 c0.012,0.018,0.023,0.035,0.035,0.052c0.01,0.013,0.02,0.025,0.03,0.037c0.013,0.015,0.028,0.032,0.042,0.045 c0.012,0.012,0.023,0.023,0.035,0.035c0.015,0.013,0.032,0.028,0.048,0.04l0.038,0.03c0.005,0.003,0.01,0.007,0.013,0.01 l9.163,6.095C11.668,21.953,11.833,22,12,22c0.167,0,0.332-0.047,0.478-0.144l9.163-6.095l0.015-0.01 c0.013-0.01,0.027-0.02,0.037-0.03c0.018-0.013,0.035-0.028,0.048-0.04c0.013-0.012,0.025-0.023,0.035-0.035 c0.017-0.015,0.03-0.032,0.043-0.045c0.01-0.013,0.02-0.025,0.03-0.037c0.013-0.018,0.025-0.035,0.035-0.052 c0.008-0.013,0.018-0.027,0.025-0.038c0.012-0.02,0.022-0.038,0.03-0.058c0.007-0.013,0.013-0.027,0.02-0.04 c0.008-0.022,0.015-0.042,0.023-0.063c0.003-0.013,0.01-0.027,0.013-0.04c0.007-0.025,0.01-0.048,0.015-0.072 c0.002-0.013,0.005-0.027,0.007-0.037c0.003-0.042,0.007-0.079,0.007-0.117V8.954C22.025,8.915,22.022,8.879,22.016,8.84z M12.862,4.464l6.751,4.49l-3.016,2.013l-3.735-2.492V4.464z M11.138,4.464v4.009l-3.735,2.494L4.389,8.954L11.138,4.464z M3.699,10.562L5.853,12l-2.155,1.438V10.562z M11.138,19.536l-6.749-4.491l3.015-2.011l3.735,2.492V19.536z M12,14.035L8.953,12 L12,9.966L15.047,12L12,14.035z M12.862,19.536v-4.009l3.735-2.492l3.016,2.011L12.862,19.536z M20.303,13.438L18.147,12 l2.156-1.438L20.303,13.438z"></path></svg>',
 		),
 		'deviantart'    => array(
-			'name' => 'DeviantArt',
+			'name' => __( 'DeviantArt' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z"></path></svg>',
 		),
 		'discord'       => array(
-			'name' => 'Discord',
+			'name' => __( 'Discord' ),
 			'icon' => '<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20.317 4.369A19.88 19.88 0 0 0 15.894 3a14.145 14.145 0 0 0-.719 1.518 19.205 19.205 0 0 0-5.351 0A14.183 14.183 0 0 0 9.104 3 19.896 19.896 0 0 0 4.682 4.369a18.921 18.921 0 0 0-3.012 12.52 19.929 19.929 0 0 0 6.081 3.097c.487-.65.922-1.339 1.3-2.061a12.445 12.445 0 0 1-1.958-.896c.165-.12.326-.246.483-.374a12.445 12.445 0 0 0 8.946 0c.157.128.318.253.483.374-.627.371-1.281.683-1.958.896.379.722.813 1.41 1.3 2.061a19.94 19.94 0 0 0 6.081-3.097 18.921 18.921 0 0 0-3.012-12.52ZM8.12 15.233c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Zm7.757 0c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Z"/></svg>',
 		),
 		'dribbble'      => array(
-			'name' => 'Dribbble',
+			'name' => __( 'Dribbble' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z"></path></svg>',
 		),
 		'dropbox'       => array(
-			'name' => 'Dropbox',
+			'name' => __( 'Dropbox' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,6.134L6.069,9.797L2,6.54l5.883-3.843L12,6.134z M2,13.054l5.883,3.843L12,13.459L6.069,9.797L2,13.054z M12,13.459 l4.116,3.439L22,13.054l-4.069-3.257L12,13.459z M22,6.54l-5.884-3.843L12,6.134l5.931,3.663L22,6.54z M12.011,14.2l-4.129,3.426 l-1.767-1.153v1.291l5.896,3.539l5.897-3.539v-1.291l-1.769,1.153L12.011,14.2z"></path></svg>',
 		),
 		'etsy'          => array(
-			'name' => 'Etsy',
+			'name' => __( 'Etsy' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M9.16033,4.038c0-.27174.02717-.43478.48913-.43478h6.22283c1.087,0,1.68478.92391,2.11957,2.663l.35326,1.38587h1.05978C19.59511,3.712,19.75815,2,19.75815,2s-2.663.29891-4.23913.29891h-7.962L3.29076,2.163v1.1413L4.731,3.57609c1.00543.19022,1.25.40761,1.33152,1.33152,0,0,.08152,2.71739.08152,7.20109s-.08152,7.17391-.08152,7.17391c0,.81522-.32609,1.11413-1.33152,1.30435l-1.44022.27174V22l4.2663-.13587h7.11957c1.60326,0,5.32609.13587,5.32609.13587.08152-.97826.625-5.40761.70652-5.89674H19.7038L18.644,18.52174c-.84239,1.90217-2.06522,2.038-3.42391,2.038H11.1712c-1.3587,0-2.01087-.54348-2.01087-1.712V12.65217s3.0163,0,3.99457.08152c.76087.05435,1.22283.27174,1.46739,1.33152l.32609,1.413h1.16848l-.08152-3.55978.163-3.587H15.02989l-.38043,1.57609c-.24457,1.03261-.40761,1.22283-1.46739,1.33152-1.38587.13587-4.02174.1087-4.02174.1087Z"></path></svg>',
 		),
 		'facebook'      => array(
-			'name' => 'Facebook',
+			'name' => __( 'Facebook' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg>',
 		),
 		'feed'          => array(
-			'name' => 'RSS Feed',
+			'name' => __( 'RSS Feed' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z"></path></svg>',
 		),
 		'flickr'        => array(
-			'name' => 'Flickr',
+			'name' => __( 'Flickr' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M6.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5S9.25,7,6.5,7z M17.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5 S20.25,7,17.5,7z"></path></svg>',
 		),
 		'foursquare'    => array(
-			'name' => 'Foursquare',
+			'name' => __( 'Foursquare' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.573,2c0,0-9.197,0-10.668,0S5,3.107,5,3.805s0,16.948,0,16.948c0,0.785,0.422,1.077,0.66,1.172 c0.238,0.097,0.892,0.177,1.285-0.275c0,0,5.035-5.843,5.122-5.93c0.132-0.132,0.132-0.132,0.262-0.132h3.26 c1.368,0,1.588-0.977,1.732-1.552c0.078-0.318,0.692-3.428,1.225-6.122l0.675-3.368C19.56,2.893,19.14,2,17.573,2z M16.495,7.22 c-0.053,0.252-0.372,0.518-0.665,0.518c-0.293,0-4.157,0-4.157,0c-0.467,0-0.802,0.318-0.802,0.787v0.508 c0,0.467,0.337,0.798,0.805,0.798c0,0,3.197,0,3.528,0s0.655,0.362,0.583,0.715c-0.072,0.353-0.407,2.102-0.448,2.295 c-0.04,0.193-0.262,0.523-0.655,0.523c-0.33,0-2.88,0-2.88,0c-0.523,0-0.683,0.068-1.033,0.503 c-0.35,0.437-3.505,4.223-3.505,4.223c-0.032,0.035-0.063,0.027-0.063-0.015V4.852c0-0.298,0.26-0.648,0.648-0.648 c0,0,8.228,0,8.562,0c0.315,0,0.61,0.297,0.528,0.683L16.495,7.22z"></path></svg>',
 		),
 		'goodreads'     => array(
-			'name' => 'Goodreads',
+			'name' => __( 'Goodreads' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.3,17.5c-0.2,0.8-0.5,1.4-1,1.9c-0.4,0.5-1,0.9-1.7,1.2C13.9,20.9,13.1,21,12,21c-0.6,0-1.3-0.1-1.9-0.2 c-0.6-0.1-1.1-0.4-1.6-0.7c-0.5-0.3-0.9-0.7-1.2-1.2c-0.3-0.5-0.5-1.1-0.5-1.7h1.5c0.1,0.5,0.2,0.9,0.5,1.2 c0.2,0.3,0.5,0.6,0.9,0.8c0.3,0.2,0.7,0.3,1.1,0.4c0.4,0.1,0.8,0.1,1.2,0.1c1.4,0,2.5-0.4,3.1-1.2c0.6-0.8,1-2,1-3.5v-1.7h0 c-0.4,0.8-0.9,1.4-1.6,1.9c-0.7,0.5-1.5,0.7-2.4,0.7c-1,0-1.9-0.2-2.6-0.5C8.7,15,8.1,14.5,7.7,14c-0.5-0.6-0.8-1.3-1-2.1 c-0.2-0.8-0.3-1.6-0.3-2.5c0-0.9,0.1-1.7,0.4-2.5c0.3-0.8,0.6-1.5,1.1-2c0.5-0.6,1.1-1,1.8-1.4C10.3,3.2,11.1,3,12,3 c0.5,0,0.9,0.1,1.3,0.2c0.4,0.1,0.8,0.3,1.1,0.5c0.3,0.2,0.6,0.5,0.9,0.8c0.3,0.3,0.5,0.6,0.6,1h0V3.4h1.5V15 C17.6,15.9,17.5,16.7,17.3,17.5z M13.8,14.1c0.5-0.3,0.9-0.7,1.3-1.1c0.3-0.5,0.6-1,0.8-1.6c0.2-0.6,0.3-1.2,0.3-1.9 c0-0.6-0.1-1.2-0.2-1.9c-0.1-0.6-0.4-1.2-0.7-1.7c-0.3-0.5-0.7-0.9-1.3-1.2c-0.5-0.3-1.1-0.5-1.9-0.5s-1.4,0.2-1.9,0.5 c-0.5,0.3-1,0.7-1.3,1.2C8.5,6.4,8.3,7,8.1,7.6C8,8.2,7.9,8.9,7.9,9.5c0,0.6,0.1,1.3,0.2,1.9C8.3,12,8.6,12.5,8.9,13 c0.3,0.5,0.8,0.8,1.3,1.1c0.5,0.3,1.1,0.4,1.9,0.4C12.7,14.5,13.3,14.4,13.8,14.1z"></path></svg>',
 		),
 		'google'        => array(
-			'name' => 'Google',
+			'name' => __( 'Google' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.02,10.18v3.72v0.01h5.51c-0.26,1.57-1.67,4.22-5.5,4.22c-3.31,0-6.01-2.75-6.01-6.12s2.7-6.12,6.01-6.12 c1.87,0,3.13,0.8,3.85,1.48l2.84-2.76C16.99,2.99,14.73,2,12.03,2c-5.52,0-10,4.48-10,10s4.48,10,10,10c5.77,0,9.6-4.06,9.6-9.77 c0-0.83-0.11-1.42-0.25-2.05H12.02z"></path></svg>',
 		),
 		'github'        => array(
-			'name' => 'GitHub',
+			'name' => __( 'GitHub' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg>',
 		),
 		'gravatar'      => array(
-			'name' => 'Gravatar',
+			'name' => __( 'Gravatar' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.8001 4.69937V10.6494C10.8001 11.1001 10.9791 11.5323 11.2978 11.851C11.6165 12.1697 12.0487 12.3487 12.4994 12.3487C12.9501 12.3487 13.3824 12.1697 13.7011 11.851C14.0198 11.5323 14.1988 11.1001 14.1988 10.6494V6.69089C15.2418 7.05861 16.1371 7.75537 16.7496 8.67617C17.3622 9.59698 17.6589 10.6919 17.595 11.796C17.5311 12.9001 17.1101 13.9535 16.3954 14.7975C15.6807 15.6415 14.711 16.2303 13.6325 16.4753C12.5541 16.7202 11.4252 16.608 10.4161 16.1555C9.40691 15.703 8.57217 14.9348 8.03763 13.9667C7.50308 12.9985 7.29769 11.8828 7.45242 10.7877C7.60714 9.69266 8.11359 8.67755 8.89545 7.89537C9.20904 7.57521 9.38364 7.14426 9.38132 6.69611C9.37899 6.24797 9.19994 5.81884 8.88305 5.50195C8.56616 5.18506 8.13704 5.00601 7.68889 5.00369C7.24075 5.00137 6.80979 5.17597 6.48964 5.48956C5.09907 6.8801 4.23369 8.7098 4.04094 10.6669C3.84819 12.624 4.34 14.5873 5.43257 16.2224C6.52515 17.8575 8.15088 19.0632 10.0328 19.634C11.9146 20.2049 13.9362 20.1055 15.753 19.3529C17.5699 18.6003 19.0695 17.241 19.9965 15.5066C20.9234 13.7722 21.2203 11.7701 20.8366 9.84133C20.4528 7.91259 19.4122 6.17658 17.892 4.92911C16.3717 3.68163 14.466 2.99987 12.4994 3C12.0487 3 11.6165 3.17904 11.2978 3.49773C10.9791 3.81643 10.8001 4.24867 10.8001 4.69937Z" /></svg>',
 		),
 		'instagram'     => array(
-			'name' => 'Instagram',
+			'name' => __( 'Instagram' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg>',
 		),
 		'lastfm'        => array(
-			'name' => 'Last.fm',
+			'name' => __( 'Last.fm' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.5002,0 C4.7006,0 0,4.70109753 0,10.4998496 C0,16.2989526 4.7006,21 10.5002,21 C16.299,21 21,16.2989526 21,10.4998496 C21,4.70109753 16.299,0 10.5002,0 Z M14.69735,14.7204413 C13.3164,14.7151781 12.4346,14.0870017 11.83445,12.6859357 L11.6816001,12.3451305 L10.35405,9.31011397 C9.92709997,8.26875064 8.85260001,7.57120012 7.68010001,7.57120012 C6.06945001,7.57120012 4.75925001,8.88509738 4.75925001,10.5009524 C4.75925001,12.1164565 6.06945001,13.4303036 7.68010001,13.4303036 C8.77200001,13.4303036 9.76514999,12.827541 10.2719501,11.8567047 C10.2893,11.8235214 10.3239,11.8019673 10.36305,11.8038219 C10.4007,11.8053759 10.43535,11.8287847 10.4504,11.8631709 L10.98655,13.1045863 C11.0016,13.1389726 10.9956,13.17782 10.97225,13.2068931 C10.1605001,14.1995341 8.96020001,14.7683115 7.68010001,14.7683115 C5.33305,14.7683115 3.42340001,12.8535563 3.42340001,10.5009524 C3.42340001,8.14679459 5.33300001,6.23203946 7.68010001,6.23203946 C9.45720002,6.23203946 10.8909,7.19074535 11.6138,8.86359341 C11.6205501,8.88018505 12.3412,10.5707777 12.97445,12.0190621 C13.34865,12.8739575 13.64615,13.3959676 14.6288,13.4291508 C15.5663001,13.4612814 16.25375,12.9121534 16.25375,12.1484869 C16.25375,11.4691321 15.8320501,11.3003585 14.8803,10.98216 C13.2365,10.4397989 12.34495,9.88605929 12.34495,8.51817658 C12.34495,7.1809207 13.26665,6.31615054 14.692,6.31615054 C15.62875,6.31615054 16.3155,6.7286858 16.79215,7.5768142 C16.80495,7.60062396 16.8079001,7.62814302 16.8004001,7.65420843 C16.7929,7.68027384 16.7748,7.70212868 16.7507001,7.713808 L15.86145,8.16900031 C15.8178001,8.19200805 15.7643,8.17807308 15.73565,8.13847371 C15.43295,7.71345711 15.0956,7.52513451 14.6423,7.52513451 C14.05125,7.52513451 13.6220001,7.92899802 13.6220001,8.48649708 C13.6220001,9.17382194 14.1529001,9.34144259 15.0339,9.61923972 C15.14915,9.65578139 15.26955,9.69397731 15.39385,9.73432853 C16.7763,10.1865133 17.57675,10.7311301 17.57675,12.1836251 C17.57685,13.629654 16.3389,14.7204413 14.69735,14.7204413 Z"></path></svg>',
 		),
 		'linkedin'      => array(
-			'name' => 'LinkedIn',
+			'name' => __( 'LinkedIn' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg>',
 		),
 		'mail'          => array(
-			'name' => 'Mail',
+			'name' => __( 'Mail' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19,5H5c-1.1,0-2,.9-2,2v10c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2V7c0-1.1-.9-2-2-2zm.5,12c0,.3-.2.5-.5.5H5c-.3,0-.5-.2-.5-.5V9.8l7.5,5.6,7.5-5.6V17zm0-9.1L12,13.6,4.5,7.9V7c0-.3.2-.5.5-.5h14c.3,0,.5.2.5.5v.9z"></path></svg>',
 		),
 		'mastodon'      => array(
-			'name' => 'Mastodon',
+			'name' => __( 'Mastodon' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"/></svg>',
 		),
 		'meetup'        => array(
-			'name' => 'Meetup',
+			'name' => __( 'Meetup' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.24775,14.722a3.57032,3.57032,0,0,1-2.94457,3.52073,3.61886,3.61886,0,0,1-.64652.05634c-.07314-.0008-.10187.02846-.12507.09547A2.38881,2.38881,0,0,1,13.49453,20.094a2.33092,2.33092,0,0,1-1.827-.50716.13635.13635,0,0,0-.19878-.00408,3.191,3.191,0,0,1-2.104.60248,3.26309,3.26309,0,0,1-3.00324-2.71993,2.19076,2.19076,0,0,1-.03512-.30865c-.00156-.08579-.03413-.1189-.11608-.13493a2.86421,2.86421,0,0,1-1.23189-.56111,2.945,2.945,0,0,1-1.166-2.05749,2.97484,2.97484,0,0,1,.87524-2.50774.112.112,0,0,0,.02091-.16107,2.7213,2.7213,0,0,1-.36648-1.48A2.81256,2.81256,0,0,1,6.57673,7.58838a.35764.35764,0,0,0,.28869-.22819,4.2208,4.2208,0,0,1,6.02892-1.90111.25161.25161,0,0,0,.22023.0243,3.65608,3.65608,0,0,1,3.76031.90678A3.57244,3.57244,0,0,1,17.95918,8.626a2.97339,2.97339,0,0,1,.01829.57356.10637.10637,0,0,0,.0853.12792,1.97669,1.97669,0,0,1,1.27939,1.33733,2.00266,2.00266,0,0,1-.57112,2.12652c-.05284.05166-.04168.08328-.01173.13489A3.51189,3.51189,0,0,1,19.24775,14.722Zm-6.35959-.27836a1.6984,1.6984,0,0,0,1.14556,1.61113,3.82039,3.82039,0,0,0,1.036.17935,1.46888,1.46888,0,0,0,.73509-.12255.44082.44082,0,0,0,.26057-.44274.45312.45312,0,0,0-.29211-.43375.97191.97191,0,0,0-.20678-.063c-.21326-.03806-.42754-.0701-.63973-.11215a.54787.54787,0,0,1-.50172-.60926,2.75864,2.75864,0,0,1,.1773-.901c.1763-.535.414-1.045.64183-1.55913A12.686,12.686,0,0,0,15.85,10.47863a1.58461,1.58461,0,0,0,.04861-.87208,1.04531,1.04531,0,0,0-.85432-.83981,1.60658,1.60658,0,0,0-1.23654.16594.27593.27593,0,0,1-.36286-.03413c-.085-.0747-.16594-.15379-.24918-.23055a.98682.98682,0,0,0-1.33577-.04933,6.1468,6.1468,0,0,1-.4989.41615.47762.47762,0,0,1-.51535.03566c-.17448-.09307-.35512-.175-.53531-.25665a1.74949,1.74949,0,0,0-.56476-.2016,1.69943,1.69943,0,0,0-1.61654.91787,8.05815,8.05815,0,0,0-.32952.80126c-.45471,1.2557-.82507,2.53825-1.20838,3.81639a1.24151,1.24151,0,0,0,.51532,1.44389,1.42659,1.42659,0,0,0,1.22008.17166,1.09728,1.09728,0,0,0,.66994-.69764c.44145-1.04111.839-2.09989,1.25981-3.14926.11581-.28876.22792-.57874.35078-.86438a.44548.44548,0,0,1,.69189-.19539.50521.50521,0,0,1,.15044.43836,1.75625,1.75625,0,0,1-.14731.50453c-.27379.69219-.55265,1.38236-.82766,2.074a2.0836,2.0836,0,0,0-.14038.42876.50719.50719,0,0,0,.27082.57722.87236.87236,0,0,0,.66145.02739.99137.99137,0,0,0,.53406-.532q.61571-1.20914,1.228-2.42031.28423-.55863.57585-1.1133a.87189.87189,0,0,1,.29055-.35253.34987.34987,0,0,1,.37634-.01265.30291.30291,0,0,1,.12434.31459.56716.56716,0,0,1-.04655.1915c-.05318.12739-.10286.25669-.16183.38156-.34118.71775-.68754,1.43273-1.02568,2.152A2.00213,2.00213,0,0,0,12.88816,14.44366Zm4.78568,5.28972a.88573.88573,0,0,0-1.77139.00465.8857.8857,0,0,0,1.77139-.00465Zm-14.83838-7.296a.84329.84329,0,1,0,.00827-1.68655.8433.8433,0,0,0-.00827,1.68655Zm10.366-9.43673a.83506.83506,0,1,0-.0091,1.67.83505.83505,0,0,0,.0091-1.67Zm6.85014,5.22a.71651.71651,0,0,0-1.433.0093.71656.71656,0,0,0,1.433-.0093ZM5.37528,6.17908A.63823.63823,0,1,0,6.015,5.54483.62292.62292,0,0,0,5.37528,6.17908Zm6.68214,14.80843a.54949.54949,0,1,0-.55052.541A.54556.54556,0,0,0,12.05742,20.98752Zm8.53235-8.49689a.54777.54777,0,0,0-.54027.54023.53327.53327,0,0,0,.532.52293.51548.51548,0,0,0,.53272-.5237A.53187.53187,0,0,0,20.58977,12.49063ZM7.82846,2.4715a.44927.44927,0,1,0,.44484.44766A.43821.43821,0,0,0,7.82846,2.4715Zm13.775,7.60492a.41186.41186,0,0,0-.40065.39623.40178.40178,0,0,0,.40168.40168A.38994.38994,0,0,0,22,10.48172.39946.39946,0,0,0,21.60349,10.07642ZM5.79193,17.96207a.40469.40469,0,0,0-.397-.39646.399.399,0,0,0-.396.405.39234.39234,0,0,0,.39939.389A.39857.39857,0,0,0,5.79193,17.96207Z"></path></svg>',
 		),
 		'medium'        => array(
-			'name' => 'Medium',
+			'name' => __( 'Medium' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.2,12c0,3-2.4,5.4-5.3,5.4S2.6,15,2.6,12s2.4-5.4,5.3-5.4S13.2,9,13.2,12 M19.1,12c0,2.8-1.2,5-2.7,5s-2.7-2.3-2.7-5s1.2-5,2.7-5C17.9,7,19.1,9.2,19.1,12 M21.4,12c0,2.5-0.4,4.5-0.9,4.5c-0.5,0-0.9-2-0.9-4.5s0.4-4.5,0.9-4.5C21,7.5,21.4,9.5,21.4,12"></path></svg>',
 		),
 		'patreon'       => array(
-			'name' => 'Patreon',
+			'name' => __( 'Patreon' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20 8.40755C19.9969 6.10922 18.2543 4.22555 16.2097 3.54588C13.6708 2.70188 10.3222 2.82421 7.89775 3.99921C4.95932 5.42355 4.03626 8.54355 4.00186 11.6552C3.97363 14.2136 4.2222 20.9517 7.92225 20.9997C10.6715 21.0356 11.0809 17.3967 12.3529 15.6442C13.258 14.3974 14.4233 14.0452 15.8578 13.6806C18.3233 13.0537 20.0036 11.0551 20 8.40755Z" /></svg>',
 		),
 		'pinterest'     => array(
-			'name' => 'Pinterest',
+			'name' => __( 'Pinterest' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"></path></svg>',
 		),
 		'pocket'        => array(
-			'name' => 'Pocket',
+			'name' => __( 'Pocket' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.927,4.194C21.667,3.48,20.982,3,20.222,3h-0.01h-1.721H3.839C3.092,3,2.411,3.47,2.145,4.17 C2.066,4.378,2.026,4.594,2.026,4.814v6.035l0.069,1.2c0.29,2.73,1.707,5.115,3.899,6.778c0.039,0.03,0.079,0.059,0.119,0.089 l0.025,0.018c1.175,0.859,2.491,1.441,3.91,1.727c0.655,0.132,1.325,0.2,1.991,0.2c0.615,0,1.232-0.057,1.839-0.17 c0.073-0.014,0.145-0.028,0.219-0.044c0.02-0.004,0.042-0.012,0.064-0.023c1.359-0.297,2.621-0.864,3.753-1.691l0.025-0.018 c0.04-0.029,0.08-0.058,0.119-0.089c2.192-1.664,3.609-4.049,3.898-6.778l0.069-1.2V4.814C22.026,4.605,22,4.398,21.927,4.194z M17.692,10.481l-4.704,4.512c-0.266,0.254-0.608,0.382-0.949,0.382c-0.342,0-0.684-0.128-0.949-0.382l-4.705-4.512 C5.838,9.957,5.82,9.089,6.344,8.542c0.524-0.547,1.392-0.565,1.939-0.04l3.756,3.601l3.755-3.601 c0.547-0.524,1.415-0.506,1.939,0.04C18.256,9.089,18.238,9.956,17.692,10.481z"></path></svg>',
 		),
 		'reddit'        => array(
-			'name' => 'Reddit',
+			'name' => __( 'Reddit' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M5.27 9.221A2.775 2.775 0 0 0 2.498 11.993a2.785 2.785 0 0 0 1.6 2.511 5.337 5.337 0 0 0 2.374 4.11 9.386 9.386 0 0 0 5.539 1.7 9.386 9.386 0 0 0 5.541-1.7 5.331 5.331 0 0 0 2.372-4.114 2.787 2.787 0 0 0 1.583-2.5 2.775 2.775 0 0 0-2.772-2.772 2.742 2.742 0 0 0-1.688.574 9.482 9.482 0 0 0-4.637-1.348v-.008a2.349 2.349 0 0 1 2.011-2.316 1.97 1.97 0 0 0 1.926 1.521 1.98 1.98 0 0 0 1.978-1.978 1.98 1.98 0 0 0-1.978-1.978 1.985 1.985 0 0 0-1.938 1.578 3.183 3.183 0 0 0-2.849 3.172v.011a9.463 9.463 0 0 0-4.59 1.35 2.741 2.741 0 0 0-1.688-.574Zm6.736 9.1a3.162 3.162 0 0 1-2.921-1.944.215.215 0 0 1 .014-.2.219.219 0 0 1 .168-.106 27.327 27.327 0 0 1 2.74-.133 27.357 27.357 0 0 1 2.74.133.219.219 0 0 1 .168.106.215.215 0 0 1 .014.2 3.158 3.158 0 0 1-2.921 1.944Zm3.743-3.157a1.265 1.265 0 0 1-1.4-1.371 1.954 1.954 0 0 1 .482-1.442 1.15 1.15 0 0 1 .842-.379 1.7 1.7 0 0 1 1.49 1.777 1.323 1.323 0 0 1-.325 1.015 1.476 1.476 0 0 1-1.089.4Zm-7.485 0a1.476 1.476 0 0 1-1.086-.4 1.323 1.323 0 0 1-.325-1.016 1.7 1.7 0 0 1 1.49-1.777 1.151 1.151 0 0 1 .843.379 1.951 1.951 0 0 1 .481 1.441 1.276 1.276 0 0 1-1.403 1.373Z"></path></svg>',
 		),
 		'share'         => array(
-			'name' => 'Share Icon',
+			'name' => __( 'Share Icon' ),
 			'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
 		),
 		'skype'         => array(
-			'name' => 'Skype',
+			'name' => __( 'Skype' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M10.113,2.699c0.033-0.006,0.067-0.013,0.1-0.02c0.033,0.017,0.066,0.033,0.098,0.051L10.113,2.699z M2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223z M21.275,13.771 c0.007-0.035,0.011-0.071,0.018-0.106c-0.018-0.031-0.033-0.064-0.052-0.095L21.275,13.771z M13.563,21.199 c0.032,0.019,0.065,0.035,0.096,0.053c0.036-0.006,0.071-0.011,0.105-0.017L13.563,21.199z M22,16.386 c0,1.494-0.581,2.898-1.637,3.953c-1.056,1.057-2.459,1.637-3.953,1.637c-0.967,0-1.914-0.251-2.75-0.725 c0.036-0.006,0.071-0.011,0.105-0.017l-0.202-0.035c0.032,0.019,0.065,0.035,0.096,0.053c-0.543,0.096-1.099,0.147-1.654,0.147 c-1.275,0-2.512-0.25-3.676-0.743c-1.125-0.474-2.135-1.156-3.002-2.023c-0.867-0.867-1.548-1.877-2.023-3.002 c-0.493-1.164-0.743-2.401-0.743-3.676c0-0.546,0.049-1.093,0.142-1.628c0.018,0.032,0.033,0.064,0.051,0.095L2.72,10.223 c-0.006,0.034-0.011,0.069-0.017,0.103C2.244,9.5,2,8.566,2,7.615c0-1.493,0.582-2.898,1.637-3.953 c1.056-1.056,2.46-1.638,3.953-1.638c0.915,0,1.818,0.228,2.622,0.655c-0.033,0.007-0.067,0.013-0.1,0.02l0.199,0.031 c-0.032-0.018-0.066-0.034-0.098-0.051c0.002,0,0.003-0.001,0.004-0.001c0.586-0.112,1.187-0.169,1.788-0.169 c1.275,0,2.512,0.249,3.676,0.742c1.124,0.476,2.135,1.156,3.002,2.024c0.868,0.867,1.548,1.877,2.024,3.002 c0.493,1.164,0.743,2.401,0.743,3.676c0,0.575-0.054,1.15-0.157,1.712c-0.018-0.031-0.033-0.064-0.052-0.095l0.034,0.201 c0.007-0.035,0.011-0.071,0.018-0.106C21.754,14.494,22,15.432,22,16.386z M16.817,14.138c0-1.331-0.613-2.743-3.033-3.282 l-2.209-0.49c-0.84-0.192-1.807-0.444-1.807-1.237c0-0.794,0.679-1.348,1.903-1.348c2.468,0,2.243,1.696,3.468,1.696 c0.645,0,1.209-0.379,1.209-1.031c0-1.521-2.435-2.663-4.5-2.663c-2.242,0-4.63,0.952-4.63,3.488c0,1.221,0.436,2.521,2.839,3.123 l2.984,0.745c0.903,0.223,1.129,0.731,1.129,1.189c0,0.762-0.758,1.507-2.129,1.507c-2.679,0-2.307-2.062-3.743-2.062 c-0.645,0-1.113,0.444-1.113,1.078c0,1.236,1.501,2.886,4.856,2.886C15.236,17.737,16.817,16.199,16.817,14.138z"></path></svg>',
 		),
 		'snapchat'      => array(
-			'name' => 'Snapchat',
+			'name' => __( 'Snapchat' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.065,2a5.526,5.526,0,0,1,3.132.892A5.854,5.854,0,0,1,17.326,5.4a5.821,5.821,0,0,1,.351,2.33q0,.612-.117,2.487a.809.809,0,0,0,.365.091,1.93,1.93,0,0,0,.664-.176,1.93,1.93,0,0,1,.664-.176,1.3,1.3,0,0,1,.729.234.7.7,0,0,1,.351.6.839.839,0,0,1-.41.7,2.732,2.732,0,0,1-.9.41,3.192,3.192,0,0,0-.9.378.728.728,0,0,0-.41.618,1.575,1.575,0,0,0,.156.56,6.9,6.9,0,0,0,1.334,1.953,5.6,5.6,0,0,0,1.881,1.315,5.875,5.875,0,0,0,1.042.3.42.42,0,0,1,.365.456q0,.911-2.852,1.341a1.379,1.379,0,0,0-.143.507,1.8,1.8,0,0,1-.182.605.451.451,0,0,1-.429.241,5.878,5.878,0,0,1-.807-.085,5.917,5.917,0,0,0-.833-.085,4.217,4.217,0,0,0-.807.065,2.42,2.42,0,0,0-.82.293,6.682,6.682,0,0,0-.755.5q-.351.267-.755.527a3.886,3.886,0,0,1-.989.436A4.471,4.471,0,0,1,11.831,22a4.307,4.307,0,0,1-1.256-.176,3.784,3.784,0,0,1-.976-.436q-.4-.26-.749-.527a6.682,6.682,0,0,0-.755-.5,2.422,2.422,0,0,0-.807-.293,4.432,4.432,0,0,0-.82-.065,5.089,5.089,0,0,0-.853.1,5,5,0,0,1-.762.1.474.474,0,0,1-.456-.241,1.819,1.819,0,0,1-.182-.618,1.411,1.411,0,0,0-.143-.521q-2.852-.429-2.852-1.341a.42.42,0,0,1,.365-.456,5.793,5.793,0,0,0,1.042-.3,5.524,5.524,0,0,0,1.881-1.315,6.789,6.789,0,0,0,1.334-1.953A1.575,1.575,0,0,0,6,12.9a.728.728,0,0,0-.41-.618,3.323,3.323,0,0,0-.9-.384,2.912,2.912,0,0,1-.9-.41.814.814,0,0,1-.41-.684.71.71,0,0,1,.338-.593,1.208,1.208,0,0,1,.716-.241,1.976,1.976,0,0,1,.625.169,2.008,2.008,0,0,0,.69.169.919.919,0,0,0,.416-.091q-.117-1.849-.117-2.474A5.861,5.861,0,0,1,6.385,5.4,5.516,5.516,0,0,1,8.625,2.819,7.075,7.075,0,0,1,12.062,2Z"></path></svg>',
 		),
 		'soundcloud'    => array(
-			'name' => 'Soundcloud',
+			'name' => __( 'Soundcloud' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M8.9,16.1L9,14L8.9,9.5c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.1,0.1c0,0-0.1,0.1-0.1,0.1L8.3,14l0.1,2.1 c0,0.1,0,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1C8.8,16.3,8.9,16.3,8.9,16.1z M11.4,15.9l0.1-1.8L11.4,9c0-0.1,0-0.2-0.1-0.2 c0,0-0.1,0-0.1,0s-0.1,0-0.1,0c-0.1,0-0.1,0.1-0.1,0.2l0,0.1l-0.1,5c0,0,0,0.7,0.1,2v0c0,0.1,0,0.1,0.1,0.1c0.1,0.1,0.1,0.1,0.2,0.1 c0.1,0,0.1,0,0.2-0.1c0.1,0,0.1-0.1,0.1-0.2L11.4,15.9z M2.4,12.9L2.5,14l-0.2,1.1c0,0.1,0,0.1-0.1,0.1c0,0-0.1,0-0.1-0.1L2.1,14 l0.1-1.1C2.2,12.9,2.3,12.9,2.4,12.9C2.3,12.9,2.4,12.9,2.4,12.9z M3.1,12.2L3.3,14l-0.2,1.8c0,0.1,0,0.1-0.1,0.1 c-0.1,0-0.1,0-0.1-0.1L2.8,14L3,12.2C3,12.2,3,12.2,3.1,12.2C3.1,12.2,3.1,12.2,3.1,12.2z M3.9,11.9L4.1,14l-0.2,2.1 c0,0.1,0,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L3.5,14l0.2-2.1c0-0.1,0-0.1,0.1-0.1C3.9,11.8,3.9,11.8,3.9,11.9z M4.7,11.9L4.9,14 l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c-0.1,0-0.1,0-0.1-0.1L4.3,14l0.2-2.2c0-0.1,0-0.1,0.1-0.1C4.7,11.7,4.7,11.8,4.7,11.9z M5.6,12 l0.2,2l-0.2,2.1c0,0.1-0.1,0.1-0.1,0.1c0,0-0.1,0-0.1,0c0,0,0-0.1,0-0.1L5.1,14l0.2-2c0,0,0-0.1,0-0.1s0.1,0,0.1,0 C5.5,11.9,5.5,11.9,5.6,12L5.6,12z M6.4,10.7L6.6,14l-0.2,2.1c0,0,0,0.1,0,0.1c0,0-0.1,0-0.1,0c-0.1,0-0.1-0.1-0.2-0.2L5.9,14 l0.2-3.3c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0C6.4,10.7,6.4,10.7,6.4,10.7z M7.2,10l0.2,4.1l-0.2,2.1c0,0,0,0.1,0,0.1 c0,0-0.1,0-0.1,0c-0.1,0-0.2-0.1-0.2-0.2l-0.1-2.1L6.8,10c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0S7.2,9.9,7.2,10z M8,9.6L8.2,14 L8,16.1c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L7.5,14l0.1-4.4c0-0.1,0-0.1,0.1-0.1c0,0,0.1-0.1,0.1-0.1c0.1,0,0.1,0,0.1,0.1 C8,9.6,8,9.6,8,9.6z M11.4,16.1L11.4,16.1L11.4,16.1z M9.7,9.6L9.8,14l-0.1,2.1c0,0.1,0,0.1-0.1,0.2s-0.1,0.1-0.2,0.1 c-0.1,0-0.1,0-0.1-0.1s-0.1-0.1-0.1-0.2L9.2,14l0.1-4.4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S9.7,9.5,9.7,9.6 L9.7,9.6z M10.6,9.8l0.1,4.3l-0.1,2c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1-0.1-0.1-0.2L10,14 l0.1-4.3c0-0.1,0-0.1,0.1-0.2c0,0,0.1-0.1,0.2-0.1c0.1,0,0.1,0,0.2,0.1S10.6,9.7,10.6,9.8z M12.4,14l-0.1,2c0,0.1,0,0.1-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2l-0.1-1l-0.1-1l0.1-5.5v0c0-0.1,0-0.2,0.1-0.2 c0.1,0,0.1-0.1,0.2-0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.1,0.2L12.4,14z M22.1,13.9c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.7,0.7 h-6.8c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.1-0.1-0.2V8.2c0-0.1,0.1-0.2,0.2-0.3c0.5-0.2,1-0.3,1.6-0.3c1.1,0,2.1,0.4,2.9,1.1 c0.8,0.8,1.3,1.7,1.4,2.8c0.3-0.1,0.6-0.2,1-0.2c0.7,0,1.3,0.2,1.7,0.7C21.8,12.6,22.1,13.2,22.1,13.9L22.1,13.9z"></path></svg>',
 		),
 		'spotify'       => array(
-			'name' => 'Spotify',
+			'name' => __( 'Spotify' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2 M16.586,16.424 c-0.18,0.295-0.563,0.387-0.857,0.207c-2.348-1.435-5.304-1.76-8.785-0.964c-0.335,0.077-0.67-0.133-0.746-0.469 c-0.077-0.335,0.132-0.67,0.469-0.746c3.809-0.871,7.077-0.496,9.713,1.115C16.673,15.746,16.766,16.13,16.586,16.424 M17.81,13.7 c-0.226,0.367-0.706,0.482-1.072,0.257c-2.687-1.652-6.785-2.131-9.965-1.166C6.36,12.917,5.925,12.684,5.8,12.273 C5.675,11.86,5.908,11.425,6.32,11.3c3.632-1.102,8.147-0.568,11.234,1.328C17.92,12.854,18.035,13.335,17.81,13.7 M17.915,10.865 c-3.223-1.914-8.54-2.09-11.618-1.156C5.804,9.859,5.281,9.58,5.131,9.086C4.982,8.591,5.26,8.069,5.755,7.919 c3.532-1.072,9.404-0.865,13.115,1.338c0.445,0.264,0.59,0.838,0.327,1.282C18.933,10.983,18.359,11.129,17.915,10.865"></path></svg>',
 		),
 		'telegram'      => array(
-			'name' => 'Telegram',
+			'name' => __( 'Telegram' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M28.9700376,63.3244248 C47.6273373,55.1957357 60.0684594,49.8368063 66.2934036,47.2476366 C84.0668845,39.855031 87.7600616,38.5708563 90.1672227,38.528 C90.6966555,38.5191258 91.8804274,38.6503351 92.6472251,39.2725385 C93.294694,39.7979149 93.4728387,40.5076237 93.5580865,41.0057381 C93.6433345,41.5038525 93.7494885,42.63857 93.6651041,43.5252052 C92.7019529,53.6451182 88.5344133,78.2034783 86.4142057,89.5379542 C85.5170662,94.3339958 83.750571,95.9420841 82.0403991,96.0994568 C78.3237996,96.4414641 75.5015827,93.6432685 71.9018743,91.2836143 C66.2690414,87.5912212 63.0868492,85.2926952 57.6192095,81.6896017 C51.3004058,77.5256038 55.3966232,75.2369981 58.9976911,71.4967761 C59.9401076,70.5179421 76.3155302,55.6232293 76.6324771,54.2720454 C76.6721165,54.1030573 76.7089039,53.4731496 76.3346867,53.1405352 C75.9604695,52.8079208 75.4081573,52.921662 75.0095933,53.0121213 C74.444641,53.1403447 65.4461175,59.0880351 48.0140228,70.8551922 C45.4598218,72.6091037 43.1463059,73.4636682 41.0734751,73.4188859 C38.7883453,73.3695169 34.3926725,72.1268388 31.1249416,71.0646282 C27.1169366,69.7617838 23.931454,69.0729605 24.208838,66.8603276 C24.3533167,65.7078514 25.9403832,64.5292172 28.9700376,63.3244248 Z" /></svg>',
 		),
 		'threads'       => array(
-			'name' => 'Threads',
+			'name' => __( 'Threads' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.3 11.3c-.1 0-.2-.1-.2-.1-.1-2.6-1.5-4-3.9-4-1.4 0-2.6.6-3.3 1.7l1.3.9c.5-.8 1.4-1 2-1 .8 0 1.4.2 1.7.7.3.3.5.8.5 1.3-.7-.1-1.4-.2-2.2-.1-2.2.1-3.7 1.4-3.6 3.2 0 .9.5 1.7 1.3 2.2.7.4 1.5.6 2.4.6 1.2-.1 2.1-.5 2.7-1.3.5-.6.8-1.4.9-2.4.6.3 1 .8 1.2 1.3.4.9.4 2.4-.8 3.6-1.1 1.1-2.3 1.5-4.3 1.5-2.1 0-3.8-.7-4.8-2S5.7 14.3 5.7 12c0-2.3.5-4.1 1.5-5.4 1.1-1.3 2.7-2 4.8-2 2.2 0 3.8.7 4.9 2 .5.7.9 1.5 1.2 2.5l1.5-.4c-.3-1.2-.8-2.2-1.5-3.1-1.3-1.7-3.3-2.6-6-2.6-2.6 0-4.7.9-6 2.6C4.9 7.2 4.3 9.3 4.3 12s.6 4.8 1.9 6.4c1.4 1.7 3.4 2.6 6 2.6 2.3 0 4-.6 5.3-2 1.8-1.8 1.7-4 1.1-5.4-.4-.9-1.2-1.7-2.3-2.3zm-4 3.8c-1 .1-2-.4-2-1.3 0-.7.5-1.5 2.1-1.6h.5c.6 0 1.1.1 1.6.2-.2 2.3-1.3 2.7-2.2 2.7z"/></svg>',
 		),
 		'tiktok'        => array(
-			'name' => 'TikTok',
+			'name' => __( 'TikTok' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" /></svg>',
 		),
 		'tumblr'        => array(
-			'name' => 'Tumblr',
+			'name' => __( 'Tumblr' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z" /></path></svg>',
 		),
 		'twitch'        => array(
-			'name' => 'Twitch',
+			'name' => __( 'Twitch' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z"></path></svg>',
 		),
 		'twitter'       => array(
-			'name' => 'Twitter',
+			'name' => __( 'Twitter' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22.23,5.924c-0.736,0.326-1.527,0.547-2.357,0.646c0.847-0.508,1.498-1.312,1.804-2.27 c-0.793,0.47-1.671,0.812-2.606,0.996C18.324,4.498,17.257,4,16.077,4c-2.266,0-4.103,1.837-4.103,4.103 c0,0.322,0.036,0.635,0.106,0.935C8.67,8.867,5.647,7.234,3.623,4.751C3.27,5.357,3.067,6.062,3.067,6.814 c0,1.424,0.724,2.679,1.825,3.415c-0.673-0.021-1.305-0.206-1.859-0.513c0,0.017,0,0.034,0,0.052c0,1.988,1.414,3.647,3.292,4.023 c-0.344,0.094-0.707,0.144-1.081,0.144c-0.264,0-0.521-0.026-0.772-0.074c0.522,1.63,2.038,2.816,3.833,2.85 c-1.404,1.1-3.174,1.756-5.096,1.756c-0.331,0-0.658-0.019-0.979-0.057c1.816,1.164,3.973,1.843,6.29,1.843 c7.547,0,11.675-6.252,11.675-11.675c0-0.178-0.004-0.355-0.012-0.531C20.985,7.47,21.68,6.747,22.23,5.924z"></path></svg>',
 		),
 		'vimeo'         => array(
-			'name' => 'Vimeo',
+			'name' => __( 'Vimeo' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22.396,7.164c-0.093,2.026-1.507,4.799-4.245,8.32C15.322,19.161,12.928,21,10.97,21c-1.214,0-2.24-1.119-3.079-3.359 c-0.56-2.053-1.119-4.106-1.68-6.159C5.588,9.243,4.921,8.122,4.206,8.122c-0.156,0-0.701,0.328-1.634,0.98L1.594,7.841 c1.027-0.902,2.04-1.805,3.037-2.708C6.001,3.95,7.03,3.327,7.715,3.264c1.619-0.156,2.616,0.951,2.99,3.321 c0.404,2.557,0.685,4.147,0.841,4.769c0.467,2.121,0.981,3.181,1.542,3.181c0.435,0,1.09-0.688,1.963-2.065 c0.871-1.376,1.338-2.422,1.401-3.142c0.125-1.187-0.343-1.782-1.401-1.782c-0.498,0-1.012,0.115-1.541,0.341 c1.023-3.35,2.977-4.977,5.862-4.884C21.511,3.066,22.52,4.453,22.396,7.164z"></path></svg>',
 		),
 		'vk'            => array(
-			'name' => 'VK',
+			'name' => __( 'VK' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M22,7.1c0.2,0.4-0.4,1.5-1.6,3.1c-0.2,0.2-0.4,0.5-0.7,0.9c-0.5,0.7-0.9,1.1-0.9,1.4c-0.1,0.3-0.1,0.6,0.1,0.8 c0.1,0.1,0.4,0.4,0.8,0.9h0l0,0c1,0.9,1.6,1.7,2,2.3c0,0,0,0.1,0.1,0.1c0,0.1,0,0.1,0.1,0.3c0,0.1,0,0.2,0,0.4 c0,0.1-0.1,0.2-0.3,0.3c-0.1,0.1-0.4,0.1-0.6,0.1l-2.7,0c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.1-0.5-0.2l-0.2-0.1 c-0.2-0.1-0.5-0.4-0.7-0.7s-0.5-0.6-0.7-0.8c-0.2-0.2-0.4-0.4-0.6-0.6C14.8,15,14.6,15,14.4,15c0,0,0,0-0.1,0c0,0-0.1,0.1-0.2,0.2 c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.1-0.1,0.3-0.2,0.5c-0.1,0.2-0.1,0.5-0.1,0.8c0,0.1,0,0.2,0,0.3c0,0.1-0.1,0.2-0.1,0.2l0,0.1 c-0.1,0.1-0.3,0.2-0.6,0.2h-1.2c-0.5,0-1,0-1.5-0.2c-0.5-0.1-1-0.3-1.4-0.6s-0.7-0.5-1.1-0.7s-0.6-0.4-0.7-0.6l-0.3-0.3 c-0.1-0.1-0.2-0.2-0.3-0.3s-0.4-0.5-0.7-0.9s-0.7-1-1.1-1.6c-0.4-0.6-0.8-1.3-1.3-2.2C2.9,9.4,2.5,8.5,2.1,7.5C2,7.4,2,7.3,2,7.2 c0-0.1,0-0.1,0-0.2l0-0.1c0.1-0.1,0.3-0.2,0.6-0.2l2.9,0c0.1,0,0.2,0,0.2,0.1S5.9,6.9,5.9,7L6,7c0.1,0.1,0.2,0.2,0.3,0.3 C6.4,7.7,6.5,8,6.7,8.4C6.9,8.8,7,9,7.1,9.2l0.2,0.3c0.2,0.4,0.4,0.8,0.6,1.1c0.2,0.3,0.4,0.5,0.5,0.7s0.3,0.3,0.4,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0.1-0.1c0,0,0.1-0.1,0.1-0.2c0.1-0.1,0.1-0.3,0.1-0.5c0-0.2,0.1-0.5,0.1-0.8 c0-0.4,0-0.8,0-1.3c0-0.3,0-0.5-0.1-0.8c0-0.2-0.1-0.4-0.1-0.5L9.6,7.6C9.4,7.3,9.1,7.2,8.7,7.1C8.6,7.1,8.6,7,8.7,6.9 C8.9,6.7,9,6.6,9.1,6.5c0.4-0.2,1.2-0.3,2.5-0.3c0.6,0,1,0.1,1.4,0.1c0.1,0,0.3,0.1,0.3,0.1c0.1,0.1,0.2,0.1,0.2,0.3 c0,0.1,0.1,0.2,0.1,0.3s0,0.3,0,0.5c0,0.2,0,0.4,0,0.6c0,0.2,0,0.4,0,0.7c0,0.3,0,0.6,0,0.9c0,0.1,0,0.2,0,0.4c0,0.2,0,0.4,0,0.5 c0,0.1,0,0.3,0,0.4s0.1,0.3,0.1,0.4c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.2-0.2,0.4-0.4 s0.3-0.4,0.5-0.7c0.2-0.3,0.5-0.7,0.7-1.1c0.4-0.7,0.8-1.5,1.1-2.3c0-0.1,0.1-0.1,0.1-0.2c0-0.1,0.1-0.1,0.1-0.1l0,0l0.1,0 c0,0,0,0,0.1,0s0.2,0,0.2,0l3,0c0.3,0,0.5,0,0.7,0S21.9,7,21.9,7L22,7.1z"></path></svg>',
 		),
 		'wordpress'     => array(
-			'name' => 'WordPress',
+			'name' => __( 'WordPress' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>',
 		),
 		'whatsapp'      => array(
-			'name' => 'WhatsApp',
+			'name' => __( 'WhatsApp' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path></svg>',
 		),
 		'x'             => array(
-			'name' => 'X',
+			'name' => __( 'X' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg>',
 		),
 		'yelp'          => array(
-			'name' => 'Yelp',
+			'name' => __( 'Yelp' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',
 		),
 		'youtube'       => array(
-			'name' => 'YouTube',
+			'name' => __( 'YouTube' ),
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg>',
 		),
 	);
 
+	/**
+	 * Filter the list of available social service.
+	 *
+	 * This can be used to change icons or add custom icons (additionally to variations in the editor).
+	 * Icons should be directly renderable - therefore SVGs work best.
+	 *
+	 * @since 6.9.0
+	 *
+	 * @param array $services_data The list of services. Each item is an array containing a 'name' and 'icon' key.
+	 * @return array The list of social services.
+	 */
+	$services_data = apply_filters( 'block_core_social_link_get_services', $services_data );
+
 	if ( ! empty( $service )
 		&& ! empty( $field )
 		&& isset( $services_data[ $service ] )
diff --git a/packages/block-library/src/social-link/social-list.js b/packages/block-library/src/social-link/social-list.js
index 909e9b90a54c5c..7f8f7ff17662b1 100644
--- a/packages/block-library/src/social-link/social-list.js
+++ b/packages/block-library/src/social-link/social-list.js
@@ -6,29 +6,24 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import variations from './variations';
 import { ChainIcon } from './icons';
 
 /**
- * Retrieves the social service's icon component.
+ * Retrieves the social service's icon component and label.
  *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {Component} Icon component for social service.
+ * @param {Object} variation The object of the social service variation.
+ * @return {Object} An object containing the Icon component for social service and label.
  */
-export const getIconBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.icon : ChainIcon;
-};
+export function getSocialService( variation ) {
+	if ( ! variation?.name ) {
+		return {
+			icon: ChainIcon,
+			label: __( 'Social Icon' ),
+		};
+	}
 
-/**
- * Retrieves the display name for the social service.
- *
- * @param {string} name key for a social service (lowercase slug)
- *
- * @return {string} Display name for social service
- */
-export const getNameBySite = ( name ) => {
-	const variation = variations.find( ( v ) => v.name === name );
-	return variation ? variation.title : __( 'Social Icon' );
-};
+	return {
+		icon: variation?.icon ?? ChainIcon,
+		label: variation?.title ?? __( 'Social Icon' ),
+	};
+}
diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js
index 59fb469181449d..4b9f97881ae5e0 100644
--- a/packages/block-library/src/social-link/variations.js
+++ b/packages/block-library/src/social-link/variations.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -57,292 +62,292 @@ const variations = [
 		isDefault: true,
 		name: 'wordpress',
 		attributes: { service: 'wordpress' },
-		title: 'WordPress',
+		title: __( 'WordPress' ),
 		icon: WordPressIcon,
 	},
 
 	{
 		name: 'fivehundredpx',
 		attributes: { service: 'fivehundredpx' },
-		title: '500px',
+		title: __( '500px' ),
 		icon: FivehundredpxIcon,
 	},
 	{
 		name: 'amazon',
 		attributes: { service: 'amazon' },
-		title: 'Amazon',
+		title: __( 'Amazon' ),
 		icon: AmazonIcon,
 	},
 	{
 		name: 'bandcamp',
 		attributes: { service: 'bandcamp' },
-		title: 'Bandcamp',
+		title: __( 'Bandcamp' ),
 		icon: BandcampIcon,
 	},
 	{
 		name: 'behance',
 		attributes: { service: 'behance' },
-		title: 'Behance',
+		title: __( 'Behance' ),
 		icon: BehanceIcon,
 	},
 	{
 		name: 'bluesky',
 		attributes: { service: 'bluesky' },
-		title: 'Bluesky',
+		title: __( 'Bluesky' ),
 		icon: BlueskyIcon,
 	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
-		title: 'Link',
+		title: __( 'Link' ),
 		icon: ChainIcon,
 	},
 	{
 		name: 'codepen',
 		attributes: { service: 'codepen' },
-		title: 'CodePen',
+		title: __( 'CodePen' ),
 		icon: CodepenIcon,
 	},
 	{
 		name: 'deviantart',
 		attributes: { service: 'deviantart' },
-		title: 'DeviantArt',
+		title: __( 'DeviantArt' ),
 		icon: DeviantArtIcon,
 	},
 	{
 		name: 'discord',
 		attributes: { service: 'discord' },
-		title: 'Discord',
+		title: __( 'Discord' ),
 		icon: DiscordIcon,
 	},
 	{
 		name: 'dribbble',
 		attributes: { service: 'dribbble' },
-		title: 'Dribbble',
+		title: __( 'Dribbble' ),
 		icon: DribbbleIcon,
 	},
 	{
 		name: 'dropbox',
 		attributes: { service: 'dropbox' },
-		title: 'Dropbox',
+		title: __( 'Dropbox' ),
 		icon: DropboxIcon,
 	},
 	{
 		name: 'etsy',
 		attributes: { service: 'etsy' },
-		title: 'Etsy',
+		title: __( 'Etsy' ),
 		icon: EtsyIcon,
 	},
 	{
 		name: 'facebook',
 		attributes: { service: 'facebook' },
-		title: 'Facebook',
+		title: __( 'Facebook' ),
 		icon: FacebookIcon,
 	},
 	{
 		name: 'feed',
 		attributes: { service: 'feed' },
-		title: 'RSS Feed',
+		title: __( 'RSS Feed' ),
 		icon: FeedIcon,
 	},
 	{
 		name: 'flickr',
 		attributes: { service: 'flickr' },
-		title: 'Flickr',
+		title: __( 'Flickr' ),
 		icon: FlickrIcon,
 	},
 	{
 		name: 'foursquare',
 		attributes: { service: 'foursquare' },
-		title: 'Foursquare',
+		title: __( 'Foursquare' ),
 		icon: FoursquareIcon,
 	},
 	{
 		name: 'goodreads',
 		attributes: { service: 'goodreads' },
-		title: 'Goodreads',
+		title: __( 'Goodreads' ),
 		icon: GoodreadsIcon,
 	},
 	{
 		name: 'google',
 		attributes: { service: 'google' },
-		title: 'Google',
+		title: __( 'Google' ),
 		icon: GoogleIcon,
 	},
 	{
 		name: 'github',
 		attributes: { service: 'github' },
-		title: 'GitHub',
+		title: __( 'GitHub' ),
 		icon: GitHubIcon,
 	},
 	{
 		name: 'gravatar',
 		attributes: { service: 'gravatar' },
-		title: 'Gravatar',
+		title: __( 'Gravatar' ),
 		icon: GravatarIcon,
 	},
 	{
 		name: 'instagram',
 		attributes: { service: 'instagram' },
-		title: 'Instagram',
+		title: __( 'Instagram' ),
 		icon: InstagramIcon,
 	},
 	{
 		name: 'lastfm',
 		attributes: { service: 'lastfm' },
-		title: 'Last.fm',
+		title: __( 'Last.fm' ),
 		icon: LastfmIcon,
 	},
 	{
 		name: 'linkedin',
 		attributes: { service: 'linkedin' },
-		title: 'LinkedIn',
+		title: __( 'LinkedIn' ),
 		icon: LinkedInIcon,
 	},
 	{
 		name: 'mail',
 		attributes: { service: 'mail' },
-		title: 'Mail',
+		title: __( 'Mail' ),
 		keywords: [ 'email', 'e-mail' ],
 		icon: MailIcon,
 	},
 	{
 		name: 'mastodon',
 		attributes: { service: 'mastodon' },
-		title: 'Mastodon',
+		title: __( 'Mastodon' ),
 		icon: MastodonIcon,
 	},
 	{
 		name: 'meetup',
 		attributes: { service: 'meetup' },
-		title: 'Meetup',
+		title: __( 'Meetup' ),
 		icon: MeetupIcon,
 	},
 	{
 		name: 'medium',
 		attributes: { service: 'medium' },
-		title: 'Medium',
+		title: __( 'Medium' ),
 		icon: MediumIcon,
 	},
 	{
 		name: 'patreon',
 		attributes: { service: 'patreon' },
-		title: 'Patreon',
+		title: __( 'Patreon' ),
 		icon: PatreonIcon,
 	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest' },
-		title: 'Pinterest',
+		title: __( 'Pinterest' ),
 		icon: PinterestIcon,
 	},
 	{
 		name: 'pocket',
 		attributes: { service: 'pocket' },
-		title: 'Pocket',
+		title: __( 'Pocket' ),
 		icon: PocketIcon,
 	},
 	{
 		name: 'reddit',
 		attributes: { service: 'reddit' },
-		title: 'Reddit',
+		title: __( 'Reddit' ),
 		icon: RedditIcon,
 	},
 	{
 		name: 'skype',
 		attributes: { service: 'skype' },
-		title: 'Skype',
+		title: __( 'Skype' ),
 		icon: SkypeIcon,
 	},
 	{
 		name: 'snapchat',
 		attributes: { service: 'snapchat' },
-		title: 'Snapchat',
+		title: __( 'Snapchat' ),
 		icon: SnapchatIcon,
 	},
 	{
 		name: 'soundcloud',
 		attributes: { service: 'soundcloud' },
-		title: 'SoundCloud',
+		title: __( 'SoundCloud' ),
 		icon: SoundCloudIcon,
 	},
 	{
 		name: 'spotify',
 		attributes: { service: 'spotify' },
-		title: 'Spotify',
+		title: __( 'Spotify' ),
 		icon: SpotifyIcon,
 	},
 	{
 		name: 'telegram',
 		attributes: { service: 'telegram' },
-		title: 'Telegram',
+		title: __( 'Telegram' ),
 		icon: TelegramIcon,
 	},
 	{
 		name: 'threads',
 		attributes: { service: 'threads' },
-		title: 'Threads',
+		title: __( 'Threads' ),
 		icon: ThreadsIcon,
 	},
 	{
 		name: 'tiktok',
 		attributes: { service: 'tiktok' },
-		title: 'TikTok',
+		title: __( 'TikTok' ),
 		icon: TiktokIcon,
 	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr' },
-		title: 'Tumblr',
+		title: __( 'Tumblr' ),
 		icon: TumblrIcon,
 	},
 	{
 		name: 'twitch',
 		attributes: { service: 'twitch' },
-		title: 'Twitch',
+		title: __( 'Twitch' ),
 		icon: TwitchIcon,
 	},
 	{
 		name: 'twitter',
 		attributes: { service: 'twitter' },
-		title: 'Twitter',
+		title: __( 'Twitter' ),
 		icon: TwitterIcon,
 	},
 	{
 		name: 'vimeo',
 		attributes: { service: 'vimeo' },
-		title: 'Vimeo',
+		title: __( 'Vimeo' ),
 		icon: VimeoIcon,
 	},
 	{
 		name: 'vk',
 		attributes: { service: 'vk' },
-		title: 'VK',
+		title: __( 'VK' ),
 		icon: VkIcon,
 	},
 	{
 		name: 'whatsapp',
 		attributes: { service: 'whatsapp' },
-		title: 'WhatsApp',
+		title: __( 'WhatsApp' ),
 		icon: WhatsAppIcon,
 	},
 	{
 		name: 'x',
 		attributes: { service: 'x' },
 		keywords: [ 'twitter' ],
-		title: 'X',
+		title: __( 'X' ),
 		icon: XIcon,
 	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },
-		title: 'Yelp',
+		title: __( 'Yelp' ),
 		icon: YelpIcon,
 	},
 	{
 		name: 'youtube',
 		attributes: { service: 'youtube' },
-		title: 'YouTube',
+		title: __( 'YouTube' ),
 		icon: YouTubeIcon,
 	},
 ];
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 0b8b5c04deffba..a9d7c5ba8ab460 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -6,9 +6,8 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import {
-	BlockControls,
 	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
@@ -20,15 +19,12 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	MenuGroup,
-	MenuItem,
 	ToggleControl,
-	ToolbarDropdownMenu,
+	SelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -37,10 +33,11 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const sizeOptions = [
-	{ name: __( 'Small' ), value: 'has-small-icon-size' },
-	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
-	{ name: __( 'Large' ), value: 'has-large-icon-size' },
-	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
+	{ label: __( 'Default' ), value: '' },
+	{ label: __( 'Small' ), value: 'has-small-icon-size' },
+	{ label: __( 'Normal' ), value: 'has-normal-icon-size' },
+	{ label: __( 'Large' ), value: 'has-large-icon-size' },
+	{ label: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
 export function SocialLinksEdit( props ) {
@@ -57,16 +54,21 @@ export function SocialLinksEdit( props ) {
 
 	const {
 		iconBackgroundColorValue,
-		customIconBackgroundColor,
 		iconColorValue,
 		openInNewTab,
 		showLabels,
 		size,
 	} = attributes;
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+	const { hasSocialIcons, hasSelectedChild } = useSelect(
+		( select ) => {
+			const { getBlockCount, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return {
+				hasSocialIcons: getBlockCount( clientId ) > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 
@@ -78,33 +80,25 @@ export function SocialLinksEdit( props ) {
 
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
-	const backgroundBackupRef = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
-			backgroundBackupRef.current = {
-				iconBackgroundColor,
-				iconBackgroundColorValue,
-				customIconBackgroundColor,
-			};
-			setAttributes( {
-				iconBackgroundColor: undefined,
-				customIconBackgroundColor: undefined,
-				iconBackgroundColorValue: undefined,
+			let restore;
+			setAttributes( ( prev ) => {
+				restore = {
+					iconBackgroundColor: prev.iconBackgroundColor,
+					iconBackgroundColorValue: prev.iconBackgroundColorValue,
+					customIconBackgroundColor: prev.customIconBackgroundColor,
+				};
+				return {
+					iconBackgroundColor: undefined,
+					iconBackgroundColorValue: undefined,
+					customIconBackgroundColor: undefined,
+				};
 			} );
-		} else {
-			setAttributes( { ...backgroundBackupRef.current } );
-		}
-	}, [ logosOnly ] );
 
-	const SocialPlaceholder = (
-		<li className="wp-block-social-links__social-placeholder">
-			<div className="wp-block-social-links__social-placeholder-icons">
-				<div className="wp-social-link wp-social-link-twitter"></div>
-				<div className="wp-social-link wp-social-link-facebook"></div>
-				<div className="wp-social-link wp-social-link-instagram"></div>
-			</div>
-		</li>
-	);
+			return () => setAttributes( { ...restore } );
+		}
+	}, [ logosOnly, setAttributes ] );
 
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
@@ -117,17 +111,15 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender:
+			! hasSocialIcons || hasAnySelected
+				? InnerBlocks.ButtonBlockAppender
+				: undefined,
 	} );
 
-	const POPOVER_PROPS = {
-		position: 'bottom right',
-	};
-
 	const colorSettings = [
 		{
 			// Use custom attribute as fallback to prevent loss of named color selection when
@@ -168,43 +160,6 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<ToolbarDropdownMenu
-					label={ __( 'Size' ) }
-					text={ __( 'Size' ) }
-					icon={ null }
-					popoverProps={ POPOVER_PROPS }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ sizeOptions.map( ( entry ) => {
-								return (
-									<MenuItem
-										icon={
-											( size === entry.value ||
-												( ! size &&
-													entry.value ===
-														'has-normal-icon-size' ) ) &&
-											check
-										}
-										isSelected={ size === entry.value }
-										key={ entry.value }
-										onClick={ () => {
-											setAttributes( {
-												size: entry.value,
-											} );
-										} }
-										onClose={ onClose }
-										role="menuitemradio"
-									>
-										{ entry.name }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</ToolbarDropdownMenu>
-			</BlockControls>
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -212,27 +167,30 @@ export function SocialLinksEdit( props ) {
 						setAttributes( {
 							openInNewTab: false,
 							showLabels: false,
+							size: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
-						label={ __( 'Open links in new tab' ) }
-						hasValue={ () => !! openInNewTab }
+						hasValue={ () => !! size }
+						label={ __( 'Icon size' ) }
 						onDeselect={ () =>
-							setAttributes( { openInNewTab: false } )
+							setAttributes( { size: undefined } )
 						}
 					>
-						<ToggleControl
+						<SelectControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Open links in new tab' ) }
-							checked={ openInNewTab }
-							onChange={ () =>
+							label={ __( 'Icon Size' ) }
+							onChange={ ( newSize ) => {
 								setAttributes( {
-									openInNewTab: ! openInNewTab,
-								} )
-							}
+									size: newSize === '' ? undefined : newSize,
+								} );
+							} }
+							value={ size ?? '' }
+							options={ sizeOptions }
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
@@ -252,6 +210,25 @@ export function SocialLinksEdit( props ) {
 							}
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Open links in new tab' ) }
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ () =>
+								setAttributes( {
+									openInNewTab: ! openInNewTab,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 6b1286c94757d8..5001340b96dcc8 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -12,67 +12,9 @@
 
 // Specificity for the following styles are fixed at 0-1-0 to match and be
 // overridable by global styles.
-:root :where(.wp-block-social-links),
-:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
+:root :where(.wp-block-social-links) {
 	padding: 0;
 }
-:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
-	padding: 0.25em;
-}
-:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
-	padding-left: calc((2/3) * 1em);
-	padding-right: calc((2/3) * 1em);
-}
-
-// Placeholder/setup state.
-.wp-block-social-links__social-placeholder {
-	display: flex;
-	opacity: 0.8;
-	list-style: none;
-
-	// Use the first link to set the height.
-	> .wp-social-link {
-		// Use !important to keep the selector simple.
-		padding-left: 0 !important;
-		margin-left: 0 !important;
-		padding-right: 0 !important;
-		margin-right: 0 !important;
-		width: 0 !important;
-		visibility: hidden;
-	}
-
-	// Wrap the remaining placeholders in a container so the plus can overlap.
-	> .wp-block-social-links__social-placeholder-icons {
-		display: flex;
-	}
-
-	.wp-social-link::before {
-		content: "";
-		display: block;
-		width: 1em;
-		height: 1em;
-		border-radius: $radius-round;
-
-		.is-style-logos-only & {
-			background: currentColor;
-		}
-	}
-}
-
-// Selected placeholder state.
-.wp-block-social-links .wp-block-social-links__social-prompt {
-	min-height: $button-size-small;
-	list-style: none;
-
-	// Show as block UI.
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $button-size-small;
-	margin-top: auto;
-	margin-bottom: auto;
-	cursor: default;
-	padding-right: $grid-unit-10;
-}
 
 // Center flex items. This has an equivalent in style.scss.
 .wp-block[data-align="center"] > .wp-block-social-links,
diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js
index cbfd16f13ae228..9bbc774f8b9c22 100644
--- a/packages/block-library/src/table-of-contents/edit.js
+++ b/packages/block-library/src/table-of-contents/edit.js
@@ -176,7 +176,7 @@ export default function TableOfContentsEdit( {
 							} )
 						}
 						help={
-							maxLevel
+							! maxLevel
 								? __(
 										'Including all heading levels in the table of contents.'
 								  )
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
index 2f0ea753f6f8de..84f2783d3ff8c0 100644
--- a/packages/block-library/src/table/block.json
+++ b/packages/block-library/src/table/block.json
@@ -14,7 +14,8 @@
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "figcaption"
+			"selector": "figcaption",
+			"role": "content"
 		},
 		"head": {
 			"type": "array",
@@ -30,7 +31,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",
@@ -75,7 +77,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",
@@ -120,7 +123,8 @@
 					"query": {
 						"content": {
 							"type": "rich-text",
-							"source": "rich-text"
+							"source": "rich-text",
+							"role": "content"
 						},
 						"tag": {
 							"type": "string",
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index a6c8be3c4a4899..d9dd4c05143db9 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -106,6 +107,7 @@ function TableEdit( {
 
 	const colorProps = useColorProps( attributes );
 	const borderProps = useBorderProps( attributes );
+	const blockEditingMode = useBlockEditingMode();
 
 	const tableRef = useRef();
 	const [ hasTableCreated, setHasTableCreated ] = useState( false );
@@ -455,7 +457,7 @@ function TableEdit( {
 
 	return (
 		<figure { ...useBlockProps( { ref: tableRef } ) }>
-			{ ! isEmpty && (
+			{ ! isEmpty && blockEditingMode === 'default' && (
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
@@ -605,7 +607,9 @@ function TableEdit( {
 					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Table caption text' ) }
-					showToolbarButton={ isSingleSelected }
+					showToolbarButton={
+						isSingleSelected && blockEditingMode === 'default'
+					}
 				/>
 			) }
 		</figure>
diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js
index dea09dd7c98298..5571b775cfd3f0 100644
--- a/packages/block-library/src/table/index.js
+++ b/packages/block-library/src/table/index.js
@@ -48,7 +48,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Jaco Pastorius',
+							content: __( 'Jaco Pastorius' ),
 							tag: 'td',
 						},
 						{
@@ -64,7 +64,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Betty Carter',
+							content: __( 'Betty Carter' ),
 							tag: 'td',
 						},
 						{
@@ -80,7 +80,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Bebo Valdés',
+							content: __( 'Bebo Valdés' ),
 							tag: 'td',
 						},
 						{
diff --git a/packages/block-library/src/table/transforms.js b/packages/block-library/src/table/transforms.js
index bce2f56158d150..24d0794321c5e4 100644
--- a/packages/block-library/src/table/transforms.js
+++ b/packages/block-library/src/table/transforms.js
@@ -15,12 +15,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope', 'colspan', 'rowspan' ],
+				attributes: [ 'scope', 'colspan', 'rowspan', 'style' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'colspan', 'rowspan' ],
+				attributes: [ 'colspan', 'rowspan', 'style' ],
 			},
 		},
 	},
@@ -79,11 +79,23 @@ const transforms = {
 									col.getAttribute( 'colspan' )
 								);
 
+								const { textAlign } = col.style || {};
+
+								let align;
+								if (
+									textAlign === 'left' ||
+									textAlign === 'center' ||
+									textAlign === 'right'
+								) {
+									align = textAlign;
+								}
+
 								colAcc.push( {
 									tag: col.nodeName.toLowerCase(),
 									content: col.innerHTML,
 									rowspan,
 									colspan,
+									align,
 								} );
 
 								return colAcc;
diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js
index e9915f40a8acea..77bb0acf2d804c 100644
--- a/packages/block-library/src/template-part/edit/advanced-controls.js
+++ b/packages/block-library/src/template-part/edit/advanced-controls.js
@@ -5,12 +5,15 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { TemplatePartImportControls } from './import-controls';
-import { htmlElementMessages } from '../../utils/messages';
+import { unlock } from '../../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 export function TemplatePartAdvancedControls( {
 	tagName,
@@ -19,6 +22,7 @@ export function TemplatePartAdvancedControls( {
 	templatePartId,
 	defaultWrapper,
 	hasInnerBlocks,
+	clientId,
 } ) {
 	const [ area, setArea ] = useEntityProp(
 		'postType',
@@ -73,10 +77,10 @@ export function TemplatePartAdvancedControls( {
 					/>
 				</>
 			) }
-			<SelectControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'HTML element' ) }
+			<HTMLElementControl
+				tagName={ tagName || '' }
+				onChange={ ( value ) => setAttributes( { tagName: value } ) }
+				clientId={ clientId }
 				options={ [
 					{
 						label: sprintf(
@@ -94,9 +98,6 @@ export function TemplatePartAdvancedControls( {
 					{ label: '<footer>', value: 'footer' },
 					{ label: '<div>', value: 'div' },
 				] }
-				value={ tagName || '' }
-				onChange={ ( value ) => setAttributes( { tagName: value } ) }
-				help={ htmlElementMessages[ tagName ] }
 			/>
 			{ ! hasInnerBlocks && (
 				<TemplatePartImportControls
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index ba66ffa673ff87..a4d14f1adb1a0b 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -260,6 +260,7 @@ export default function TemplatePartEdit( {
 							templatePartId={ templatePartId }
 							defaultWrapper={ areaObject.tagName }
 							hasInnerBlocks={ hasInnerBlocks }
+							clientId={ clientId }
 						/>
 					</InspectorControls>
 				) }
diff --git a/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap b/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap
index 5570a6cf5d67d9..28e42c37c56092 100644
--- a/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap
+++ b/packages/block-library/src/verse/test/__snapshots__/transforms.native.js.snap
@@ -23,3 +23,9 @@ exports[`Verse block transforms to Paragraph block 1`] = `
 <p>Come<br />Home.</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Verse block transforms to Preformatted block 1`] = `
+"<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Come<br />Home.</pre>
+<!-- /wp:preformatted -->"
+`;
diff --git a/packages/block-library/src/verse/test/transforms.native.js b/packages/block-library/src/verse/test/transforms.native.js
index bab71da95fbc16..90327774bfec3d 100644
--- a/packages/block-library/src/verse/test/transforms.native.js
+++ b/packages/block-library/src/verse/test/transforms.native.js
@@ -16,7 +16,11 @@ const initialHtml = `
 <!-- /wp:verse -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Paragraph', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Paragraph',
+	'Preformatted',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();
 
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 95ecab25f95985..79c4682b21f1ff 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -23,7 +23,6 @@ import {
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -52,7 +51,6 @@ function VideoEdit( {
 	insertBlocksAfter,
 	onReplace,
 } ) {
-	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
@@ -72,6 +70,7 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -210,7 +209,7 @@ function VideoEdit( {
 							muted: false,
 							playsInline: false,
 							preload: 'metadata',
-							poster: '',
+							poster: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -222,7 +221,6 @@ function VideoEdit( {
 					<PosterImage
 						poster={ poster }
 						setAttributes={ setAttributes }
-						instanceId={ instanceId }
 					/>
 				</ToolsPanel>
 			</InspectorControls>
diff --git a/packages/block-library/src/video/editor.scss b/packages/block-library/src/video/editor.scss
index 03e1c116cccb78..c01fe931f5e651 100644
--- a/packages/block-library/src/video/editor.scss
+++ b/packages/block-library/src/video/editor.scss
@@ -19,12 +19,6 @@
 	}
 }
 
-.editor-video-poster-control {
-	.components-button {
-		margin-right: $grid-unit-10;
-	}
-}
-
 .block-library-video-tracks-editor {
 	z-index: z-index("{core/video track editor popover}");
 }
diff --git a/packages/block-library/src/video/index.php b/packages/block-library/src/video/index.php
new file mode 100644
index 00000000000000..3696bdca3b2e8c
--- /dev/null
+++ b/packages/block-library/src/video/index.php
@@ -0,0 +1,91 @@
+<?php
+/**
+ * Server-side rendering of the `core/video` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/video` block on the server to supply the width and height attributes from the attachment metadata.
+ *
+ * @since 6.9.0
+ *
+ * @phpstan-param  array{ "id"?: positive-int } $attributes
+ *
+ * @param array   $attributes The block attributes.
+ * @param string  $content    The block content.
+ * @return string The block content with the dimensions added.
+ */
+function render_block_core_video( array $attributes, string $content ): string {
+	// if the content lacks any video tag, abort.
+	if ( ! str_contains( $content, '<video' ) ) {
+		return $content;
+	}
+
+	// If the 'id' attribute is not populated for a video attachment, abort.
+	if (
+		! isset( $attributes['id'] ) ||
+		! is_int( $attributes['id'] ) ||
+		$attributes['id'] <= 0
+	) {
+		return $content;
+	}
+
+	// If the 'id' attribute wasn't for an attachment, abort.
+	if ( get_post_type( $attributes['id'] ) !== 'attachment' ) {
+		return $content;
+	}
+
+	// Get the width and height metadata for the video, and abort if absent or invalid.
+	$metadata = wp_get_attachment_metadata( $attributes['id'] );
+	if (
+		! isset( $metadata['width'], $metadata['height'] ) ||
+		! ( is_int( $metadata['width'] ) && is_int( $metadata['height'] ) ) ||
+		! ( $metadata['width'] > 0 && $metadata['height'] > 0 )
+	) {
+		return $content;
+	}
+
+	// Locate the VIDEO tag to add the dimensions.
+	$p = new WP_HTML_Tag_Processor( $content );
+	if ( ! $p->next_tag( array( 'tag_name' => 'VIDEO' ) ) ) {
+		return $content;
+	}
+
+	$p->set_attribute( 'width', (string) $metadata['width'] );
+	$p->set_attribute( 'height', (string) $metadata['height'] );
+
+	/*
+	 * The aspect-ratio style is needed due to an issue with the CSS spec: <https://github.com/w3c/csswg-drafts/issues/7524>.
+	 * Note that a style rule using attr() like the following cannot currently be used:
+	 *
+	 *     .wp-block-video video[width][height] {
+	 *         aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
+	 *     }
+	 *
+	 * This is because this attr() is yet only implemented in Chromium: <https://caniuse.com/css3-attr>.
+	 */
+	$style = $p->get_attribute( 'style' );
+	if ( ! is_string( $style ) ) {
+		$style = '';
+	}
+	$aspect_ratio_style = sprintf( 'aspect-ratio: %d / %d;', $metadata['width'], $metadata['height'] );
+	$p->set_attribute( 'style', $aspect_ratio_style . $style );
+
+	return $p->get_updated_html();
+}
+
+/**
+ * Registers the `core/video` block on server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_video(): void {
+	register_block_type_from_metadata(
+		__DIR__ . '/video',
+		array(
+			'render_callback' => 'render_block_core_video',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_video' );
diff --git a/packages/block-library/src/video/poster-image.js b/packages/block-library/src/video/poster-image.js
index cde95f974d8e69..4e4fe32c6282ae 100644
--- a/packages/block-library/src/video/poster-image.js
+++ b/packages/block-library/src/video/poster-image.js
@@ -5,16 +5,21 @@ import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import {
 	Button,
 	BaseControl,
+	__experimentalHStack as HStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
-function PosterImage( { poster, setAttributes, instanceId } ) {
-	const posterImageButton = useRef();
-	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+function PosterImage( { poster, setAttributes } ) {
+	const posterButtonRef = useRef();
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'video-block__poster-image-description'
+	);
 
 	function onSelectPoster( image ) {
 		setAttributes( { poster: image.url } );
@@ -24,23 +29,23 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 		setAttributes( { poster: undefined } );
 
 		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
+		posterButtonRef.current.focus();
 	}
 
 	return (
-		<ToolsPanelItem
-			label={ __( 'Poster image' ) }
-			isShownByDefault
-			hasValue={ () => !! poster }
-			onDeselect={ () => {
-				setAttributes( { poster: '' } );
-			} }
-		>
-			<MediaUploadCheck>
-				<div className="editor-video-poster-control">
-					<BaseControl.VisualLabel>
-						{ __( 'Poster image' ) }
-					</BaseControl.VisualLabel>
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => {
+					setAttributes( { poster: undefined } );
+				} }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<HStack justify="flex-start">
 					<MediaUpload
 						title={ __( 'Select poster image' ) }
 						onSelect={ onSelectPoster }
@@ -50,22 +55,22 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 								__next40pxDefaultSize
 								variant="primary"
 								onClick={ open }
-								ref={ posterImageButton }
-								aria-describedby={ videoPosterDescription }
+								ref={ posterButtonRef }
+								aria-describedby={ descriptionId }
 							>
 								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
 							</Button>
 						) }
 					/>
-					<p id={ videoPosterDescription } hidden>
+					<p id={ descriptionId } hidden>
 						{ poster
 							? sprintf(
 									/* translators: %s: poster image URL. */
-									__( 'The current poster image url is %s' ),
+									__( 'The current poster image url is %s.' ),
 									poster
 							  )
 							: __(
-									'There is no poster image currently selected'
+									'There is no poster image currently selected.'
 							  ) }
 					</p>
 					{ !! poster && (
@@ -77,9 +82,9 @@ function PosterImage( { poster, setAttributes, instanceId } ) {
 							{ __( 'Remove' ) }
 						</Button>
 					) }
-				</div>
-			</MediaUploadCheck>
-		</ToolsPanelItem>
+				</HStack>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
 	);
 }
 
diff --git a/packages/block-library/src/video/style.native.scss b/packages/block-library/src/video/style.native.scss
index 153e2799f36ad8..af01113b3cf8e2 100644
--- a/packages/block-library/src/video/style.native.scss
+++ b/packages/block-library/src/video/style.native.scss
@@ -2,6 +2,7 @@
 
 .video {
 	width: 100%;
+	height: auto;
 }
 
 .videoContainer {
diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
index 06c0dfd9cdd469..5c91d92a993a62 100644
--- a/packages/block-library/src/video/style.scss
+++ b/packages/block-library/src/video/style.scss
@@ -3,6 +3,7 @@
 	box-sizing: border-box;
 	video {
 		width: 100%;
+		height: auto;
 		vertical-align: middle;
 	}
 
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index a0152885f55671..310727b09181d2 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -13,9 +13,11 @@ import {
 	Button,
 	TextControl,
 	SelectControl,
+	ToggleControl,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import {
 	MediaUpload,
@@ -27,6 +29,13 @@ import { useSelect } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { Badge } = unlock( componentsPrivateApis );
+
 const ALLOWED_TYPES = [ 'text/vtt' ];
 
 const DEFAULT_KIND = 'subtitles';
@@ -39,26 +48,37 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
+const DEFAULT_TRACK = {
+	src: '',
+	label: '',
+	srcLang: 'en',
+	kind: DEFAULT_KIND,
+	default: false,
+};
+
 function TrackList( { tracks, onEditPress } ) {
 	const content = tracks.map( ( track, index ) => {
 		return (
 			<HStack
-				key={ index }
+				key={ track.id ?? track.src }
 				className="block-library-video-tracks-editor__track-list-track"
 			>
 				<span>{ track.label }</span>
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					onClick={ () => onEditPress( index ) }
-					aria-label={ sprintf(
-						/* translators: %s: Label of the video text track e.g: "French subtitles". */
-						_x( 'Edit %s', 'text tracks' ),
-						track.label
-					) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+				<HStack justify="flex-end">
+					{ track.default && <Badge>{ __( 'Default' ) }</Badge> }
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => onEditPress( index ) }
+						aria-label={ sprintf(
+							/* translators: %s: Label of the video text track e.g: "French subtitles". */
+							_x( 'Edit %s', 'text tracks' ),
+							track.label
+						) }
+					>
+						{ __( 'Edit' ) }
+					</Button>
+				</HStack>
 			</HStack>
 		);
 	} );
@@ -73,8 +93,19 @@ function TrackList( { tracks, onEditPress } ) {
 	);
 }
 
-function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
-	const { src = '', label = '', srcLang = '', kind = DEFAULT_KIND } = track;
+function SingleTrackEditor( {
+	track,
+	onChange,
+	onClose,
+	onRemove,
+	allowSettingDefault,
+} ) {
+	const [ trackState, setTrackState ] = useState( {
+		...DEFAULT_TRACK,
+		...track,
+	} );
+
+	const { src, label, srcLang, kind, default: isDefaultTrack } = trackState;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<VStack
@@ -92,10 +123,10 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newLabel ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							label: newLabel,
-						} )
+						} ) )
 					}
 					label={ __( 'Label' ) }
 					value={ label }
@@ -105,17 +136,17 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newSrcLang ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							srcLang: newSrcLang,
-						} )
+						} ) )
 					}
 					label={ __( 'Source language' ) }
 					value={ srcLang }
 					help={ __( 'Language tag (en, fr, etc.)' ) }
 				/>
 			</Grid>
-			<VStack spacing="8">
+			<VStack spacing="4">
 				<SelectControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
@@ -123,12 +154,25 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					options={ KIND_OPTIONS }
 					value={ kind }
 					label={ __( 'Kind' ) }
-					onChange={ ( newKind ) => {
-						onChange( {
-							...track,
+					onChange={ ( newKind ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							kind: newKind,
-						} );
-					} }
+						} ) )
+					}
+				/>
+				<ToggleControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Set as default track' ) }
+					checked={ isDefaultTrack }
+					disabled={ ! allowSettingDefault }
+					onChange={ ( defaultTrack ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
+							default: defaultTrack,
+						} ) )
+					}
 				/>
 				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
@@ -143,26 +187,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
-							const changes = {};
-							let hasChanges = false;
-							if ( label === '' ) {
-								changes.label = __( 'English' );
-								hasChanges = true;
-							}
-							if ( srcLang === '' ) {
-								changes.srcLang = 'en';
-								hasChanges = true;
-							}
-							if ( track.kind === undefined ) {
-								changes.kind = DEFAULT_KIND;
-								hasChanges = true;
-							}
-							if ( hasChanges ) {
-								onChange( {
-									...track,
-									...changes,
-								} );
-							}
+							onChange( trackState );
 							onClose();
 						} }
 					>
@@ -181,6 +206,54 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
 	const dropdownPopoverRef = useRef();
 
+	const handleTrackSelect = ( selectedTracks = [], appendTracks = false ) => {
+		const existingTracksMap = new Map(
+			tracks.map( ( track ) => [ track.id, track ] )
+		);
+		const tracksToAdd = selectedTracks.map( ( { id, title, url } ) => {
+			// Reuse existing tracks to preserve user-configured metadata.
+			if ( existingTracksMap.has( id ) ) {
+				return existingTracksMap.get( id );
+			}
+
+			return {
+				...DEFAULT_TRACK,
+				id,
+				label: title || '',
+				src: url,
+			};
+		} );
+
+		if ( tracksToAdd.length === 0 ) {
+			return;
+		}
+
+		onChange( [ ...( appendTracks ? tracks : [] ), ...tracksToAdd ] );
+	};
+
+	function uploadFiles( event ) {
+		const files = event.target.files;
+		mediaUpload( {
+			allowedTypes: ALLOWED_TYPES,
+			filesList: files,
+			onFileChange: ( selectedTracks ) => {
+				if ( ! Array.isArray( selectedTracks ) ) {
+					return;
+				}
+
+				// Wait until the track has been uploaded.
+				const uploadedTracks = selectedTracks.filter(
+					( track ) => !! track?.id
+				);
+
+				if ( ! uploadedTracks.length ) {
+					return;
+				}
+				handleTrackSelect( uploadedTracks, true );
+			},
+		} );
+	}
+
 	useEffect( () => {
 		dropdownPopoverRef.current?.focus();
 	}, [ trackBeingEdited ] );
@@ -237,6 +310,10 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								);
 								setTrackBeingEdited( null );
 							} }
+							allowSettingDefault={
+								! tracks.some( ( track ) => track.default ) ||
+								tracks[ trackBeingEdited ].default
+							}
 						/>
 					);
 				}
@@ -264,64 +341,30 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								className="block-library-video-tracks-editor__add-tracks-container"
 								label={ __( 'Add tracks' ) }
 							>
-								<MediaUpload
-									onSelect={ ( { url } ) => {
-										const trackIndex = tracks.length;
-										onChange( [ ...tracks, { src: url } ] );
-										setTrackBeingEdited( trackIndex );
-									} }
-									allowedTypes={ ALLOWED_TYPES }
-									render={ ( { open } ) => (
-										<MenuItem
-											icon={ media }
-											onClick={ open }
-										>
-											{ __( 'Open Media Library' ) }
-										</MenuItem>
-									) }
-								/>
 								<MediaUploadCheck>
+									<MediaUpload
+										onSelect={ handleTrackSelect }
+										allowedTypes={ ALLOWED_TYPES }
+										value={ tracks.map( ( { id } ) => id ) }
+										multiple
+										render={ ( { open } ) => (
+											<MenuItem
+												icon={ media }
+												onClick={ open }
+											>
+												{ __( 'Open Media Library' ) }
+											</MenuItem>
+										) }
+									/>
 									<FormFileUpload
-										onChange={ ( event ) => {
-											const files = event.target.files;
-											const trackIndex = tracks.length;
-											mediaUpload( {
-												allowedTypes: ALLOWED_TYPES,
-												filesList: files,
-												onFileChange: ( [
-													{ url },
-												] ) => {
-													const newTracks = [
-														...tracks,
-													];
-													if (
-														! newTracks[
-															trackIndex
-														]
-													) {
-														newTracks[
-															trackIndex
-														] = {};
-													}
-													newTracks[ trackIndex ] = {
-														...tracks[ trackIndex ],
-														src: url,
-													};
-													onChange( newTracks );
-													setTrackBeingEdited(
-														trackIndex
-													);
-												},
-											} );
-										} }
+										onChange={ uploadFiles }
 										accept=".vtt,text/vtt"
+										multiple
 										render={ ( { openFileDialog } ) => {
 											return (
 												<MenuItem
 													icon={ upload }
-													onClick={ () => {
-														openFileDialog();
-													} }
+													onClick={ openFileDialog }
 												>
 													{ _x( 'Upload', 'verb' ) }
 												</MenuItem>
diff --git a/packages/block-library/src/video/tracks.js b/packages/block-library/src/video/tracks.js
index 372ea8c09f5a45..76bdf7739beb75 100644
--- a/packages/block-library/src/video/tracks.js
+++ b/packages/block-library/src/video/tracks.js
@@ -1,5 +1,6 @@
 export default function Tracks( { tracks = [] } ) {
 	return tracks.map( ( track ) => {
-		return <track key={ track.src } { ...track } />;
+		const { id, ...trackAttrs } = track;
+		return <track key={ id ?? trackAttrs.src } { ...trackAttrs } />;
 	} );
 }
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 28fc0b36eaa94d..b284e7c716199c 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/block-serialization-default-parser/class-wp-block-parser-block.php b/packages/block-serialization-default-parser/class-wp-block-parser-block.php
index 28377d3ede32b8..97dd687c1ffe11 100644
--- a/packages/block-serialization-default-parser/class-wp-block-parser-block.php
+++ b/packages/block-serialization-default-parser/class-wp-block-parser-block.php
@@ -62,7 +62,7 @@ class WP_Block_Parser_Block {
 	 *   'innerContent' => array( 'Before', null, 'Inner', null, 'After' ),
 	 * )
 	 *
-	 * @since 4.2.0
+	 * @since 5.0.0
 	 * @var array
 	 */
 	public $innerContent; // phpcs:ignore WordPress.NamingConventions.ValidVariableName
diff --git a/packages/block-serialization-default-parser/class-wp-block-parser.php b/packages/block-serialization-default-parser/class-wp-block-parser.php
index 543f53691ccb17..bf8a59249d99da 100644
--- a/packages/block-serialization-default-parser/class-wp-block-parser.php
+++ b/packages/block-serialization-default-parser/class-wp-block-parser.php
@@ -36,7 +36,7 @@ class WP_Block_Parser {
 	 * List of parsed blocks
 	 *
 	 * @since 5.0.0
-	 * @var WP_Block_Parser_Block[]
+	 * @var array[]
 	 */
 	public $output;
 
@@ -303,7 +303,7 @@ public function next_token() {
 	 * Returns a new block object for freeform HTML
 	 *
 	 * @internal
-	 * @since 3.9.0
+	 * @since 5.0.0
 	 *
 	 * @param string $inner_html HTML content of block.
 	 * @return WP_Block_Parser_Block freeform block object.
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index e0aa6c4764aeea..0fe54db713a0a6 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-default-parser/src/index.js b/packages/block-serialization-default-parser/src/index.ts
similarity index 77%
rename from packages/block-serialization-default-parser/src/index.js
rename to packages/block-serialization-default-parser/src/index.ts
index 9fd67cde2b1d96..ce70fad763162d 100644
--- a/packages/block-serialization-default-parser/src/index.js
+++ b/packages/block-serialization-default-parser/src/index.ts
@@ -1,49 +1,33 @@
-/**
- * @type {string}
- */
-let document;
-/**
- * @type {number}
- */
-let offset;
-/**
- * @type {ParsedBlock[]}
- */
-let output;
-/**
- * @type {ParsedFrame[]}
- */
-let stack;
-
-/**
- * @typedef {Object|null} Attributes
- */
-
-/**
- * @typedef {Object} ParsedBlock
- * @property {string|null}        blockName    Block name.
- * @property {Attributes}         attrs        Block attributes.
- * @property {ParsedBlock[]}      innerBlocks  Inner blocks.
- * @property {string}             innerHTML    Inner HTML.
- * @property {Array<string|null>} innerContent Inner content.
- */
+let document: string;
+let offset: number;
+let output: ParsedBlock[];
+let stack: ParsedFrame[];
+
+type Attributes = Record< string, any > | null;
+
+type ParsedBlock = {
+	blockName: string | null;
+	attrs: Attributes;
+	innerBlocks: ParsedBlock[];
+	innerHTML: string;
+	innerContent: Array< string | null >;
+};
 
-/**
- * @typedef {Object} ParsedFrame
- * @property {ParsedBlock} block            Block.
- * @property {number}      tokenStart       Token start.
- * @property {number}      tokenLength      Token length.
- * @property {number}      prevOffset       Previous offset.
- * @property {number|null} leadingHtmlStart Leading HTML start.
- */
+type ParsedFrame = {
+	block: ParsedBlock;
+	tokenStart: number;
+	tokenLength: number;
+	prevOffset: number;
+	leadingHtmlStart: number | null;
+};
 
-/**
- * @typedef {'no-more-tokens'|'void-block'|'block-opener'|'block-closer'} TokenType
- */
+type TokenType =
+	| 'no-more-tokens'
+	| 'void-block'
+	| 'block-opener'
+	| 'block-closer';
 
-/**
- * @typedef {[TokenType, string, Attributes, number, number]} Token
- */
+type Token = [ TokenType, string, Attributes, number, number ];
 
 /**
  * Matches block comment delimiters
@@ -81,8 +65,6 @@ let stack;
  *    once browsers reliably support atomic grouping or possessive
  *    quantifiers natively we should remove this trick and simplify
  *
- * @type {RegExp}
- *
  * @since 3.8.0
  * @since 4.6.1 added optimization to prevent backtracking on attribute parsing
  */
@@ -92,14 +74,21 @@ const tokenizer =
 /**
  * Constructs a block object.
  *
- * @param {string|null}   blockName
- * @param {Attributes}    attrs
- * @param {ParsedBlock[]} innerBlocks
- * @param {string}        innerHTML
- * @param {string[]}      innerContent
- * @return {ParsedBlock} The block object.
+ * @param blockName    Either the abbreviated core types, e.g. "paragraph", or the fully-qualified
+ *                     block type with namespace and type, e.g. "core/paragraph" or "my-plugin/csv-table".
+ * @param attrs        The attributes for the block, or null if there are no attributes.
+ * @param innerBlocks  An array of inner blocks.
+ * @param innerHTML    The inner HTML of the block.
+ * @param innerContent An array of inner content strings.
+ * @return The block object.
  */
-function Block( blockName, attrs, innerBlocks, innerHTML, innerContent ) {
+function Block(
+	blockName: string | null,
+	attrs: Attributes,
+	innerBlocks: ParsedBlock[],
+	innerHTML: string,
+	innerContent: string[]
+): ParsedBlock {
 	return {
 		blockName,
 		attrs,
@@ -112,24 +101,30 @@ function Block( blockName, attrs, innerBlocks, innerHTML, innerContent ) {
 /**
  * Constructs a freeform block object.
  *
- * @param {string} innerHTML
- * @return {ParsedBlock} The freeform block object.
+ * @param innerHTML The inner HTML of the block.
+ * @return The freeform block object.
  */
-function Freeform( innerHTML ) {
+function Freeform( innerHTML: string ): ParsedBlock {
 	return Block( null, {}, [], innerHTML, [ innerHTML ] );
 }
 
 /**
  * Constructs a frame object.
  *
- * @param {ParsedBlock} block
- * @param {number}      tokenStart
- * @param {number}      tokenLength
- * @param {number}      prevOffset
- * @param {number|null} leadingHtmlStart
- * @return {ParsedFrame} The frame object.
+ * @param block            The block object.
+ * @param tokenStart       The start offset of the token in the document.
+ * @param tokenLength      The length of the token in the document.
+ * @param prevOffset       The offset of the previous token in the document.
+ * @param leadingHtmlStart The start offset of leading HTML before the block.
+ * @return The frame object.
  */
-function Frame( block, tokenStart, tokenLength, prevOffset, leadingHtmlStart ) {
+function Frame(
+	block: ParsedBlock,
+	tokenStart: number,
+	tokenLength: number,
+	prevOffset: number | null,
+	leadingHtmlStart: number | null
+): ParsedFrame {
 	return {
 		block,
 		tokenStart,
@@ -142,7 +137,7 @@ function Frame( block, tokenStart, tokenLength, prevOffset, leadingHtmlStart ) {
 /**
  * Parser function, that converts input HTML into a block based structure.
  *
- * @param {string} doc The HTML document to parse.
+ * @param doc The HTML document to parse.
  *
  * @example
  * Input post:
@@ -214,9 +209,9 @@ function Frame( block, tokenStart, tokenLength, prevOffset, leadingHtmlStart ) {
  *     }
  * ];
  * ```
- * @return {ParsedBlock[]} A block-based representation of the input HTML.
+ * @return A block-based representation of the input HTML.
  */
-export const parse = ( doc ) => {
+export const parse = ( doc: string ): ParsedBlock[] => {
 	document = doc;
 	offset = 0;
 	output = [];
@@ -233,9 +228,9 @@ export const parse = ( doc ) => {
 /**
  * Parses the next token in the input document.
  *
- * @return {boolean} Returns true when there is more tokens to parse.
+ * @return Returns true when there is more tokens to parse.
  */
-function proceed() {
+function proceed(): boolean {
 	const stackDepth = stack.length;
 	const next = nextToken();
 	const [ tokenType, blockName, attrs, startOffset, tokenLength ] = next;
@@ -333,7 +328,7 @@ function proceed() {
 
 			// Otherwise we're nested and we have to close out the current
 			// block and add it as a innerBlock to the parent.
-			const stackTop = /** @type {ParsedFrame} */ ( stack.pop() );
+			const stackTop = stack.pop() as ParsedFrame;
 			const html = document.substr(
 				stackTop.prevOffset,
 				startOffset - stackTop.prevOffset
@@ -365,10 +360,10 @@ function proceed() {
  * delimiters is constrained to be an object
  * and cannot be things like `true` or `null`
  *
- * @param {string} input JSON input string to parse
- * @return {Object|null} parsed JSON if valid
+ * @param input JSON input string to parse
+ * @return parsed JSON if valid or null if invalid
  */
-function parseJSON( input ) {
+function parseJSON( input: string ): Object | null {
 	try {
 		return JSON.parse( input );
 	} catch ( e ) {
@@ -379,9 +374,9 @@ function parseJSON( input ) {
 /**
  * Finds the next token in the document.
  *
- * @return {Token} The next matched token.
+ * @return The next matched token.
  */
-function nextToken() {
+function nextToken(): Token {
 	// Aye the magic
 	// we're using a single RegExp to tokenize the block comment delimiters
 	// we're also using a trick here because the only difference between a
@@ -435,9 +430,9 @@ function nextToken() {
 /**
  * Adds a freeform block to the output.
  *
- * @param {number} [rawLength]
+ * @param rawLength Optional length of the raw HTML to include as freeform content.
  */
-function addFreeform( rawLength ) {
+function addFreeform( rawLength?: number ) {
 	const length = rawLength ? rawLength : document.length - offset;
 
 	if ( 0 === length ) {
@@ -450,12 +445,18 @@ function addFreeform( rawLength ) {
 /**
  * Adds inner block to the parent block.
  *
- * @param {ParsedBlock} block
- * @param {number}      tokenStart
- * @param {number}      tokenLength
- * @param {number}      [lastOffset]
+ * @param block       The inner block to be added to the parent.
+ * @param tokenStart  The start offset of the block token in the document.
+ * @param tokenLength The total length of the block token.
+ * @param lastOffset  Optional offset marking the end of the current block,
+ *                    used to update the parent's HTML content boundaries.
  */
-function addInnerBlock( block, tokenStart, tokenLength, lastOffset ) {
+function addInnerBlock(
+	block: ParsedBlock,
+	tokenStart: number,
+	tokenLength: number,
+	lastOffset?: number
+) {
 	const parent = stack[ stack.length - 1 ];
 	parent.block.innerBlocks.push( block );
 	const html = document.substr(
@@ -475,11 +476,11 @@ function addInnerBlock( block, tokenStart, tokenLength, lastOffset ) {
 /**
  * Adds block from the stack to the output.
  *
- * @param {number} [endOffset]
+ * @param endOffset Optional offset marking the end of the block's HTML content.
  */
-function addBlockFromStack( endOffset ) {
+function addBlockFromStack( endOffset?: number ) {
 	const { block, leadingHtmlStart, prevOffset, tokenStart } =
-		/** @type {ParsedFrame} */ ( stack.pop() );
+		stack.pop() as ParsedFrame;
 
 	const html = endOffset
 		? document.substr( prevOffset, endOffset - prevOffset )
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index 7527be6abbc003..5c2ae5736a93f0 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/block-serialization-spec-parser/README.md b/packages/block-serialization-spec-parser/README.md
index 50b0aae46f0874..9e86dbcf5f26d9 100644
--- a/packages/block-serialization-spec-parser/README.md
+++ b/packages/block-serialization-spec-parser/README.md
@@ -4,7 +4,7 @@ This library contains the grammar file (`grammar.pegjs`) for WordPress posts whi
 
 PEG parser generators are available in many languages, though different libraries may require some translation of this grammar into their syntax. For more information see:
 
--   [PEG.js](https://pegjs.org)
+-   [PEG.js](https://github.com/pegjs/pegjs)
 -   [Parsing expression grammar](https://en.wikipedia.org/wiki/Parsing_expression_grammar)
 
 ## Installation
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index eb6700cd4729f7..a1d20bf8c2cf09 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 511c66b1f8d44b..5ddcf97455ac8e 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 15.0.0 (2025-07-23)
+
+### Breaking changes
+
+-   `registerBlockType`: Set default `apiVersion` when none is provided during client-side block registration ([#70750](https://github.com/WordPress/gutenberg/pull/70750)).
+
+## 14.15.0 (2025-06-25)
+
+## 14.14.0 (2025-06-04)
+
+## 14.13.0 (2025-05-22)
+
+## 14.12.0 (2025-05-07)
+
+## 14.11.0 (2025-04-11)
+
 ## 14.10.0 (2025-03-27)
 
 ## 14.9.0 (2025-03-13)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index f4805e1c60b381..0ff66d9d319b16 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -395,7 +395,8 @@ Determines whether the block's attributes are equal to the default attributes wh
 
 _Parameters_
 
--   _block_ `WPBlock`: Block Object
+-   _block_ `WPBlock`: Block Object.
+-   _role_ `?string`: Optional role to filter attributes for modification check.
 
 _Returns_
 
@@ -408,6 +409,7 @@ Determines whether the block is a default block and its attributes are equal to
 _Parameters_
 
 -   _block_ `WPBlock`: Block Object
+-   _role_ `?string`: Optional role to filter attributes for modification check.
 
 _Returns_
 
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 3ff66ae07c2660..5466f763595a32 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "14.10.0",
+	"version": "15.0.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/parser/convert-legacy-block.js b/packages/blocks/src/api/parser/convert-legacy-block.js
index 1ddec1d8b3448d..6d5b42f90b03ac 100644
--- a/packages/blocks/src/api/parser/convert-legacy-block.js
+++ b/packages/blocks/src/api/parser/convert-legacy-block.js
@@ -50,7 +50,6 @@ export function convertLegacyBlockNameAndAttributes( name, attributes ) {
 	}
 
 	// Convert Post Comment blocks in existing content to Comment blocks.
-	// TODO: Remove these checks when WordPress 6.0 is released.
 	if ( name === 'core/post-comment-author' ) {
 		name = 'core/comment-author-name';
 	}
diff --git a/packages/blocks/src/api/raw-handling/readme.md b/packages/blocks/src/api/raw-handling/readme.md
index 6c2be6929a597e..93118deded7dbf 100644
--- a/packages/blocks/src/api/raw-handling/readme.md
+++ b/packages/blocks/src/api/raw-handling/readme.md
@@ -8,7 +8,7 @@ This folder contains all paste specific logic (filters, converters, normalisers.
 | ---------------- | ---------- | -------- | ----- | ----- | --------- | ----- | ------------------- |
 | Google Docs      | ✓          | ✓        | ✓     | ✓     | ✓         | ✓     | ✘ [1]               |
 | Apple Pages      | ✓          | ✘ [2]    | ✓     | ✘ [2] | n/a       | ✓     | ✘ [1]               |
-| MS Word          | ✓          | ✓        | ✓     | ✘ [3] | n/a       | ✓     | ✓                   |
+| MS Word          | ✓          | ✓        | ✓     | ✓     | n/a       | ✓     | ✓                   |
 | MS Word Online   | ✓          | ✘ [4]    | ✓     | ✓     | n/a       | ✓     | ✘ [1]               |
 | LibreOffice      | ✓          | ✓        | ✓     | ✘ [3] | ✓         | ✓     | ✓                   |
 | Evernote         | ✓          | ✘ [5]    | ✓     | ✓     | ✓         | ✓     | n/a                 |
@@ -18,7 +18,7 @@ This folder contains all paste specific logic (filters, converters, normalisers.
 
 1. Google Docs, Apple Pages and MS Word online don't pass footnote nor endnote information.
 2. Apple Pages does not pass heading and image information.
-3. MS Word and LibreOffice only provide a local file path, which cannot be accessed in JavaScript for security reasons. Image placeholders will be provided instead. Single images, however, _can_ be copied and pasted without any problem.
+3. LibreOffice only provide a local file path, which cannot be accessed in JavaScript for security reasons. Image placeholders will be provided instead. Single images, however, _can_ be copied and pasted without any problem.
 4. Still to do for MS Word Online.
 5. Evernote does not have headings.
 6. For caption and gallery shortcodes, see #2874.
diff --git a/packages/blocks/src/api/raw-handling/test/paste-handler.js b/packages/blocks/src/api/raw-handling/test/paste-handler.js
index 40a28f3c35a33f..5b5aa8bc517ab4 100644
--- a/packages/blocks/src/api/raw-handling/test/paste-handler.js
+++ b/packages/blocks/src/api/raw-handling/test/paste-handler.js
@@ -61,6 +61,26 @@ const tableWithHeaderFooterAndBodyUsingRowspan = `
 	</tfoot>
 </table>`;
 
+const tableWithCellAlignments = `
+<table>
+	<thead>
+		<tr>
+			<th style="text-align: left;">A - Left</th>
+			<th style="text-align: center;">B - Centered</th>
+			<th style="text-align: right;">C - Right</th>
+			<th>D - None</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td style="text-align: left;">100</td>
+			<td style="text-align: center;">150</td>
+			<td style="text-align: right;">200</td>
+			<td>250</td>
+		</tr>
+	</tbody>
+</table>`;
+
 describe( 'pasteHandler', () => {
 	beforeAll( () => {
 		initAndRegisterTableBlock();
@@ -156,6 +176,93 @@ describe( 'pasteHandler', () => {
 		expect( result.isValid ).toBeTruthy();
 	} );
 
+	it( 'can handle a table with cell alignments', () => {
+		const [ result ] = pasteHandler( {
+			HTML: tableWithCellAlignments,
+			tagName: 'p',
+		} );
+
+		expect( console ).toHaveLogged();
+
+		delete result.attributes.caption;
+
+		expect( result.name ).toEqual( 'core/table' );
+		expect( result.isValid ).toBeTruthy();
+
+		expect( result.attributes ).toEqual( {
+			hasFixedLayout: true,
+			head: [
+				{
+					cells: [
+						{
+							content: 'A - Left',
+							tag: 'th',
+							align: 'left',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: 'B - Centered',
+							tag: 'th',
+							align: 'center',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: 'C - Right',
+							tag: 'th',
+							align: 'right',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: 'D - None',
+							tag: 'th',
+							align: undefined,
+							colspan: undefined,
+							rowspan: undefined,
+						},
+					],
+				},
+			],
+			body: [
+				{
+					cells: [
+						{
+							content: '100',
+							tag: 'td',
+							align: 'left',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: '150',
+							tag: 'td',
+							align: 'center',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: '200',
+							tag: 'td',
+							align: 'right',
+							colspan: undefined,
+							rowspan: undefined,
+						},
+						{
+							content: '250',
+							tag: 'td',
+							align: undefined,
+							colspan: undefined,
+							rowspan: undefined,
+						},
+					],
+				},
+			],
+			foot: [],
+		} );
+	} );
+
 	it( 'can handle a video', () => {
 		const [ result ] = pasteHandler( {
 			HTML: '<video controls src="https://example.com/media.mp4" autoplay loop muted controls playsinline preload="auto" poster="https://example.com/media.jpg"></video>',
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
index 3826f58c2e94bc..406aa7b241c32e 100644
--- a/packages/blocks/src/api/test/registration.js
+++ b/packages/blocks/src/api/test/registration.js
@@ -141,6 +141,7 @@ describe( 'blocks', () => {
 			);
 			expect( console ).not.toHaveWarned();
 			expect( block ).toEqual( {
+				apiVersion: 1,
 				name: 'my-plugin/fancy-block-4',
 				icon: { src: BLOCK_ICON_DEFAULT },
 				attributes: {},
@@ -287,6 +288,7 @@ describe( 'blocks', () => {
 			} );
 
 			expect( getBlockType( 'core/test-block-with-defaults' ) ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-with-defaults',
 				title: 'block title',
 				category: 'text',
@@ -319,6 +321,7 @@ describe( 'blocks', () => {
 			registerBlockType( 'core/test-block-with-attributes', blockType );
 			expect( getBlockType( 'core/test-block-with-attributes' ) ).toEqual(
 				{
+					apiVersion: 1,
 					name: 'core/test-block-with-attributes',
 					settingName: 'settingValue',
 					save: noop,
@@ -359,6 +362,7 @@ describe( 'blocks', () => {
 			};
 			registerBlockType( blockName, blockType );
 			expect( getBlockType( blockName ) ).toEqual( {
+				apiVersion: 1,
 				name: blockName,
 				save: expect.any( Function ),
 				title: 'block title',
@@ -436,6 +440,7 @@ describe( 'blocks', () => {
 			};
 			registerBlockType( blockName, blockType );
 			expect( getBlockType( blockName ) ).toEqual( {
+				apiVersion: 1,
 				name: blockName,
 				save: expect.any( Function ),
 				title: 'block settings merge',
@@ -484,6 +489,7 @@ describe( 'blocks', () => {
 				blockType
 			);
 			expect( getBlockType( blockName ) ).toEqual( {
+				apiVersion: 1,
 				name: blockName,
 				save: expect.any( Function ),
 				title: 'block title',
@@ -543,6 +549,7 @@ describe( 'blocks', () => {
 			expect(
 				getBlockType( 'core/test-block-icon-normalize-element' )
 			).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-icon-normalize-element',
 				save: noop,
 				category: 'text',
@@ -587,6 +594,7 @@ describe( 'blocks', () => {
 			expect(
 				getBlockType( 'core/test-block-icon-normalize-string' )
 			).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-icon-normalize-string',
 				save: noop,
 				category: 'text',
@@ -634,6 +642,7 @@ describe( 'blocks', () => {
 			expect(
 				getBlockType( 'core/test-block-icon-normalize-function' )
 			).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-icon-normalize-function',
 				save: noop,
 				category: 'text',
@@ -681,6 +690,7 @@ describe( 'blocks', () => {
 			expect(
 				getBlockType( 'core/test-block-icon-normalize-background' )
 			).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-icon-normalize-background',
 				save: noop,
 				category: 'text',
@@ -724,6 +734,7 @@ describe( 'blocks', () => {
 			registerBlockType( 'core/test-block-with-settings', blockType );
 			blockType.mutated = true;
 			expect( getBlockType( 'core/test-block-with-settings' ) ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-with-settings',
 				settingName: 'settingValue',
 				save: noop,
@@ -757,6 +768,7 @@ describe( 'blocks', () => {
 				'Parent must be undefined or an array of strings (block types), but it is a string.'
 			);
 			expect( block ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-parent-string',
 				save: noop,
 				category: 'text',
@@ -1013,6 +1025,7 @@ describe( 'blocks', () => {
 				}
 			);
 			expect( block ).toEqual( {
+				apiVersion: 1,
 				name: 'test/block-from-metadata',
 				title: 'Block from metadata',
 				category: 'text',
@@ -1081,6 +1094,7 @@ describe( 'blocks', () => {
 			);
 
 			expect( block ).toEqual( {
+				apiVersion: 1,
 				name: 'test/block-from-metadata-i18n',
 				title: 'I18n title from metadata (translated)',
 				description: 'I18n description from metadata (translated)',
@@ -1149,6 +1163,7 @@ describe( 'blocks', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );
 			expect( getBlockTypes() ).toEqual( [
 				{
+					apiVersion: 1,
 					name: 'core/test-block',
 					save: noop,
 					category: 'text',
@@ -1168,6 +1183,7 @@ describe( 'blocks', () => {
 			const oldBlock = unregisterBlockType( 'core/test-block' );
 			expect( console ).not.toHaveWarned();
 			expect( oldBlock ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block',
 				save: noop,
 				category: 'text',
@@ -1249,6 +1265,7 @@ describe( 'blocks', () => {
 		it( 'should return { name, save } for blocks with minimum settings', () => {
 			registerBlockType( 'core/test-block', defaultBlockSettings );
 			expect( getBlockType( 'core/test-block' ) ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block',
 				save: noop,
 				category: 'text',
@@ -1275,6 +1292,7 @@ describe( 'blocks', () => {
 			};
 			registerBlockType( 'core/test-block-with-settings', blockType );
 			expect( getBlockType( 'core/test-block-with-settings' ) ).toEqual( {
+				apiVersion: 1,
 				name: 'core/test-block-with-settings',
 				settingName: 'settingValue',
 				save: noop,
@@ -1310,6 +1328,7 @@ describe( 'blocks', () => {
 			registerBlockType( 'core/test-block-with-settings', blockType );
 			expect( getBlockTypes() ).toEqual( [
 				{
+					apiVersion: 1,
 					name: 'core/test-block',
 					save: noop,
 					category: 'text',
@@ -1326,6 +1345,7 @@ describe( 'blocks', () => {
 					blockHooks: {},
 				},
 				{
+					apiVersion: 1,
 					name: 'core/test-block-with-settings',
 					settingName: 'settingValue',
 					save: noop,
diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
index b1906b65b4208f..509ee1e71fcd3c 100644
--- a/packages/blocks/src/api/test/utils.js
+++ b/packages/blocks/src/api/test/utils.js
@@ -9,6 +9,7 @@ import {
 	setDefaultBlockName,
 } from '../registration';
 import {
+	isUnmodifiedBlock,
 	isUnmodifiedDefaultBlock,
 	getAccessibleBlockLabel,
 	getBlockLabel,
@@ -435,3 +436,59 @@ describe( 'isContentBlock', () => {
 		expect( isContentBlock( 'core/test-non-content-block' ) ).toBe( false );
 	} );
 } );
+
+describe( 'isUnmodifiedBlock', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/test-block', {
+			attributes: {
+				align: {
+					type: 'string',
+				},
+				includesDefault: {
+					type: 'boolean',
+					default: true,
+				},
+				content: {
+					type: 'string',
+					role: 'content',
+				},
+			},
+			save: noop,
+			category: 'text',
+			title: 'test block',
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/test-block' );
+	} );
+
+	it( 'should return true if all attributes match their defaults', () => {
+		const block = createBlock( 'core/test-block' );
+		expect( isUnmodifiedBlock( block ) ).toBe( true );
+	} );
+
+	it( 'should return false if any attribute does not match its default', () => {
+		const block = createBlock( 'core/test-block', {
+			includesDefault: false,
+		} );
+		expect( isUnmodifiedBlock( block ) ).toBe( false );
+	} );
+
+	it( 'should return true if attributes with a specific role match their defaults', () => {
+		const block = createBlock( 'core/test-block' );
+		expect( isUnmodifiedBlock( block, 'content' ) ).toBe( true );
+	} );
+
+	it( 'should return false if attributes with a specific role do not match their defaults', () => {
+		const block = createBlock( 'core/test-block', {
+			content: 'Updated content',
+		} );
+		expect( isUnmodifiedBlock( block, 'content' ) ).toBe( false );
+	} );
+
+	it( 'should return true if no attributes exist for the specified role', () => {
+		const block = createBlock( 'core/test-block' );
+		expect( isUnmodifiedBlock( block, 'non-existent-role' ) ).toBe( true );
+	} );
+} );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index ad94d9d5c9e0c1..6eb7d01f3b8b2a 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -34,31 +34,41 @@ const ICON_COLORS = [ '#191e23', '#f8f9f9' ];
  * Determines whether the block's attributes are equal to the default attributes
  * which means the block is unmodified.
  *
- * @param {WPBlock} block Block Object
+ * @param {WPBlock} block Block Object.
+ * @param {?string} role  Optional role to filter attributes for modification check.
  *
  * @return {boolean} Whether the block is an unmodified block.
  */
-export function isUnmodifiedBlock( block ) {
-	return Object.entries( getBlockType( block.name )?.attributes ?? {} ).every(
-		( [ key, definition ] ) => {
-			const value = block.attributes[ key ];
-
-			// Every attribute that has a default must match the default.
-			if ( definition.hasOwnProperty( 'default' ) ) {
-				return value === definition.default;
-			}
-
-			// 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;
-			}
+export function isUnmodifiedBlock( block, role ) {
+	const blockAttributes = getBlockType( block.name )?.attributes ?? {};
+
+	// Filter attributes by role if a role is provided.
+	const attributesToCheck = role
+		? Object.entries( blockAttributes ).filter(
+				( [ , definition ] ) =>
+					definition.role === role ||
+					definition.__experimentalRole === role
+		  )
+		: Object.entries( blockAttributes );
+
+	return attributesToCheck.every( ( [ key, definition ] ) => {
+		const value = block.attributes[ key ];
+
+		// Every attribute that has a default must match the default.
+		if ( definition.hasOwnProperty( 'default' ) ) {
+			return value === definition.default;
+		}
 
-			// Every attribute that doesn't have a default should be undefined.
-			return value === undefined;
+		// 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;
+	} );
 }
 
 /**
@@ -66,11 +76,14 @@ export function isUnmodifiedBlock( block ) {
  * to the default attributes which means the block is unmodified.
  *
  * @param {WPBlock} block Block Object
+ * @param {?string} role  Optional role to filter attributes for modification check.
  *
  * @return {boolean} Whether the block is an unmodified default block.
  */
-export function isUnmodifiedDefaultBlock( block ) {
-	return block.name === getDefaultBlockName() && isUnmodifiedBlock( block );
+export function isUnmodifiedDefaultBlock( block, role ) {
+	return (
+		block.name === getDefaultBlockName() && isUnmodifiedBlock( block, role )
+	);
 }
 
 /**
@@ -242,7 +255,7 @@ export function getAccessibleBlockLabel(
 
 	if ( hasLabel ) {
 		return sprintf(
-			/* translators: accessibility text. %1: The block title. %2: The block label. */
+			/* translators: accessibility text. 1: The block title. 2: The block label. */
 			__( '%1$s Block. %2$s' ),
 			title,
 			label
diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js
index bc7b1a0e10e774..1c2715cd9233bb 100644
--- a/packages/blocks/src/store/process-block-type.js
+++ b/packages/blocks/src/store/process-block-type.js
@@ -78,6 +78,7 @@ export const processBlockType =
 		const bootstrappedBlockType = select.getBootstrappedBlockType( name );
 
 		const blockType = {
+			apiVersion: 1,
 			name,
 			icon: BLOCK_ICON_DEFAULT,
 			keywords: [],
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index 2524458f81e672..2a21060ae24cba 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index d903c74ce1247f..6281c564c070a1 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index 7382dc0197ae05..fe042e74cc66ca 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/commands/README.md b/packages/commands/README.md
index b7382f98a8c848..a9c7dc2a88830d 100644
--- a/packages/commands/README.md
+++ b/packages/commands/README.md
@@ -56,6 +56,14 @@ npm install @wordpress/commands --save
 
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
+_This package requires the following stylesheets to be included for proper styling:_
+
+```css
+/* From node_modules: */
+@import '@wordpress/components/build-style/style.css';
+@import '@wordpress/commands/build-style/style.css';
+```
+
 ## API
 
 <!-- START TOKEN(Autogenerated API docs) -->
diff --git a/packages/commands/package.json b/packages/commands/package.json
index ba36fe744a53ae..cb3e45124447e3 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/.stylelintrc.js b/packages/components/.stylelintrc.js
index 2a583a09c16059..b4b26bea568950 100644
--- a/packages/components/.stylelintrc.js
+++ b/packages/components/.stylelintrc.js
@@ -1,6 +1,6 @@
 /** @type {import('stylelint').Config} */
 module.exports = {
-	extends: '../../.stylelintrc.json',
+	extends: '../../.stylelintrc.js',
 	rules: {
 		'declaration-property-value-disallowed-list': [
 			{
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4c5317457be103..1c89dd3825e42c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,8 +4,111 @@
 
 ### Bug Fixes
 
+-   `TextareaControl`: Add missing component CSS classname ([#70930](https://github.com/WordPress/gutenberg/pull/70930)).
+-   `PaletteEdit`: Fill available space with input field ([#70935](https://github.com/WordPress/gutenberg/pull/70935)).
+
+## 30.0.0 (2025-07-23)
+
+### Breaking Changes
+
+-   `Icon`: Pass `size` prop value as `width`/`height` attributes when `icon` is a component that doesn't exactly match `SVG` ([#70756](https://github.com/WordPress/gutenberg/pull/70756)).
+
+### Internal
+
+-   Add new validated form controls (work in progress, not exported): `ValidatedCheckboxControl`, `ValidatedInputControl`, `ValidatedNumberControl`, `ValidatedRadioControl`, `ValidatedRangeControl`, `ValidatedSelectControl`, `ValidatedTextControl`, `ValidatedTextareaControl`, `ValidatedToggleControl`, `ValidatedCustomSelectControl`, `ValidatedComboboxControl`, `ValidatedToggleGroupControl`, and `ControlWithError` for enhanced form validation capabilities ([#70620](https://github.com/WordPress/gutenberg/pull/70620)).
+
+### Bug Fixes
+
+-   `FormTokenField`: Fix focus lost on tab when `__experimentalExpandOnFocus` is set ([#70591](https://github.com/WordPress/gutenberg/pull/70591)).
+-   `SelectControl`: Fix font-size for medium screens to ensure consistency with other inputs ([#70619](https://github.com/WordPress/gutenberg/pull/70619)).
+-   `SelectControl`: Move classnames to the root ([#70643](https://github.com/WordPress/gutenberg/pull/70643)).
+-   `Autocomplete`: Prevent text cursor position loss when clicking to insert an item ([#70660](https://github.com/WordPress/gutenberg/pull/70660)).
+
+
+### Internal
+
+-   Add new private `DateCalendar` and `DateRangeCalendar` components ([#70578](https://github.com/WordPress/gutenberg/pull/70578), [#70681](https://github.com/WordPress/gutenberg/pull/70681)).
+-   `useControlledValue`: Enhanced hook to support additional arguments in onChange callbacks and improved performance with useCallback optimization ([#70655](https://github.com/WordPress/gutenberg/pull/70655)).
+
+## 29.12.0 (2025-06-25)
+
+### Bug Fixes
+
+-   `FormFileUpload`: Extend audio accept MIME types for iOS compatibility ([#70354](https://github.com/WordPress/gutenberg/pull/70354)).
+
+### Internal
+
+-   `FormFileUpload`: Remove temporary fix for selecting .heic file in Chromium browsers ([#70383](https://github.com/WordPress/gutenberg/pull/70383)).
+
+## 29.11.0 (2025-06-04)
+
+### Enhancement
+
+-   `ComboboxControl`: Handle Unicode characters when matching values ([#70180](https://github.com/WordPress/gutenberg/pull/70180)).
+-   `Toolbar`: Adjust colors for dark mode support ([#69278](https://github.com/WordPress/gutenberg/pull/69278)).
+-   `DropZone`: Allow overriding the default icon ([#70236](https://github.com/WordPress/gutenberg/pull/70236)).
+
+### Bug Fixes
+
+-   `FormTokenField`: Fix filtering with full-width string ([#70232](https://github.com/WordPress/gutenberg/pull/70232)).
+
+### Internal
+
+-   Expose `normalizeTextString` method as private API ([#70178](https://github.com/WordPress/gutenberg/pull/70178)).
+-   Mark `withIgnoreIMEEvents()` function as private API ([#70056](https://github.com/WordPress/gutenberg/pull/70056)).
+-   `InputControl`: remove unnecessary forced focus on `mousedown` ([#41118](https://github.com/WordPress/gutenberg/pull/41118)).
+
+## 29.10.0 (2025-05-22)
+
+### Enhancement
+
+-   `Snackbar`: Add support to open links in a new tab ([#69905](https://github.com/WordPress/gutenberg/pull/69905)).
+-   `ColorPicker`: Add a visual cue when the value is copied ([#70083](https://github.com/WordPress/gutenberg/pull/70083)).
+
+### Internal
+
+-   Clarify `withIgnoreIMEEvents` documentation to reflect support for all keyboard event handlers ([#70098](https://github.com/WordPress/gutenberg/pull/70098)).
+
+## 29.9.0 (2025-05-07)
+
+### Enhancement
+
+-   `Guide`: Make next and previous button text customizable ([#69907](https://github.com/WordPress/gutenberg/pull/69907)).
+-   `Popover`: Introduce a virtual padding of `8px` to prevent it from hitting the viewport edge ([#69555](https://github.com/WordPress/gutenberg/pull/69555)).
+-   `TextControl`: Add theming support ([#69640](https://github.com/WordPress/gutenberg/pull/69640)).
+-   `TextareaControl`: Add theming support ([#69640](https://github.com/WordPress/gutenberg/pull/69640)).
+
+### Bug Fixes
+
+-   `ToggleGroupControl`: Fix active background for empty string value ([#69969](https://github.com/WordPress/gutenberg/pull/69969)).
+-   `ItemGroup`: Fix double border in `ItemGroup` when last item is focused ([#70021](https://github.com/WordPress/gutenberg/pull/70021)).
+-   `__experimentalUseCustomUnits `: Don't mutate 'ALL_CSS_UNITS' default value ([#70037](https://github.com/WordPress/gutenberg/pull/70037)).
+-   `FocalPointPicker`: Fix SVG display when it doesn't provide a width attribute ([#70061](https://github.com/WordPress/gutenberg/pull/70061))..
+
+### Internal
+
+-   `ColorPicker`: Add tests for Alpha slider functionality ([#69203](https://github.com/WordPress/gutenberg/pull/69203)).
+
+## 29.8.0 (2025-04-11)
+
+### Documentation
+
+-   `Popover`: Expose Popover TypeScript types for subcomponents. ([#69619](https://github.com/WordPress/gutenberg/pull/69619))
+
+### Internal
+
+-   Update `gradient-parser` to version `1.0.2` ([#69783](https://github.com/WordPress/gutenberg/pull/69783)).
+
+### Bug Fixes
+
 -   `Button`: Fix tertiary variant displaying incorrect text color in pressed and hover states ([#68542](https://github.com/WordPress/gutenberg/pull/68542)).
 
+### Enhancement
+
+-   `Popover`: improve Storybook examples around onClose and onFocusOutside props. ([#69688](https://github.com/WordPress/gutenberg/pull/69688))
+-   `FormTokenField`: Add theming support ([#69638](https://github.com/WordPress/gutenberg/pull/69638)).
+-   `ComboboxControl`: Add theming support ([#69638](https://github.com/WordPress/gutenberg/pull/69638)).
+
 ## 29.7.0 (2025-03-27)
 
 ### Bug Fixes
diff --git a/packages/components/package.json b/packages/components/package.json
index 1742132ed585d1..a7ff7f64d2079d 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.7.0",
+	"version": "30.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,7 +40,7 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
-		"@floating-ui/react-dom": "^2.0.8",
+		"@floating-ui/react-dom": "2.0.8",
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
@@ -68,13 +68,14 @@
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
-		"gradient-parser": "^0.1.5",
+		"gradient-parser": "1.0.2",
 		"highlight-words-core": "^1.2.2",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"path-to-regexp": "^6.2.1",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
+		"react-day-picker": "^9.7.0",
 		"remove-accents": "^0.5.0",
 		"uuid": "^9.0.1"
 	},
diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index d13d1d9b6a391a..78be906b64d1f4 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -126,6 +126,10 @@ export function useAutocomplete( {
 		// Reset autocomplete state after insertion rather than before
 		// so insertion events don't cause the completion menu to redisplay.
 		reset();
+
+		// Make sure that the content remains focused after making a selection
+		// and that the text cursor position is not lost.
+		contentRef.current?.focus();
 	}
 
 	function reset() {
diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx
index 27dff1991d8572..a1e5dd7f00f990 100644
--- a/packages/components/src/box-control/input-control.tsx
+++ b/packages/components/src/box-control/input-control.tsx
@@ -178,14 +178,23 @@ export default function BoxInputControl( {
 	const presetIndex = hasPresetValue
 		? getPresetIndexFromValue( mergedValue, presetKey, presets )
 		: undefined;
-	const marks = hasPresets
-		? [ { value: 0, label: '', tooltip: __( 'None' ) } ].concat(
-				presets.map( ( preset, index ) => ( {
+	const marks: Array< {
+		value: number;
+		label: string;
+		tooltip: string;
+	} > = hasPresets
+		? [
+				{
+					value: 0,
+					label: '',
+					tooltip: __( 'None' ),
+				},
+				...presets.map( ( preset, index ) => ( {
 					value: index + 1,
 					label: '',
 					tooltip: preset.name ?? preset.slug,
-				} ) )
-		  )
+				} ) ),
+		  ]
 		: [];
 
 	return (
diff --git a/packages/components/src/calendar/date-calendar/README.md b/packages/components/src/calendar/date-calendar/README.md
new file mode 100644
index 00000000000000..a62ea3e49accff
--- /dev/null
+++ b/packages/components/src/calendar/date-calendar/README.md
@@ -0,0 +1,261 @@
+# `DateCalendar`
+
+🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project.
+
+`DateCalendar` is a React component that provides a customizable calendar interface for **single date** selection.
+
+The component is built with accessibility in mind and follows ARIA best practices for calendar widgets. It provides keyboard navigation, screen reader support, and customizable labels for internationalization.
+
+## Usage example
+
+```tsx
+import { DateCalendar } from '@wordpress/components';
+
+function MyComponent() {
+	const [ selected, setSelected ] = useState< Date >( new Date() );
+
+	return <DateCalendar selected={ selected } onSelect={ setSelected } />;
+}
+```
+
+## Props
+
+These props are shared between both single date and date range calendar modes.
+
+### `required`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Whether the selection is required. When `true`, there always needs to be a date selected.
+
+### `selected`
+
+-   Type: `Date | undefined | null`
+-   Required: No
+
+The selected date.
+
+### `onSelect`
+
+-   Type: `(selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void`
+-   Required: No
+
+Event handler when a day is selected.
+
+### `defaultSelected`
+
+-   Type: `Date`
+-   Required: No
+
+The default selected date (for uncontrolled usage).
+
+### `defaultMonth`
+
+-   Type: `Date`
+-   Required: No
+-   Default: Current month
+
+The initial month to show in the calendar view (uncontrolled).
+
+### `month`
+
+-   Type: `Date`
+-   Required: No
+
+The month displayed in the calendar view (controlled). Use together with `onMonthChange` to change the month programmatically.
+
+### `numberOfMonths`
+
+-   Type: `number`
+-   Required: No
+-   Default: `1`
+
+The number of months displayed at once.
+
+### `startMonth`
+
+-   Type: `Date`
+-   Required: No
+
+The earliest month to start the month navigation.
+
+### `endMonth`
+
+-   Type: `Date`
+-   Required: No
+
+The latest month to end the month navigation.
+
+### `autoFocus`
+
+-   Type: `boolean`
+-   Required: No
+
+Focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus the calendar after a user action (e.g. opening the dialog with the calendar).
+
+### `disabled`
+
+-   Type: `Matcher | Matcher[] | undefined`
+-   Required: No
+
+Specify which days are disabled. Using `true` will disable all dates. See the [Matcher Types](#matcher-types) section for more details.
+
+### `disableNavigation`
+
+-   Type: `boolean`
+-   Required: No
+
+Disable the navigation buttons.
+
+### `labels`
+
+-   Type: `object`
+-   Required: No
+
+Use custom labels for internationalization. All labels are optional and have sensible defaults:
+
+```typescript
+{
+  labelNav?: () => string; // Navigation toolbar label
+  labelGrid?: (date: Date) => string; // Month grid label (default: "LLLL y")
+  labelGridcell?: (date: Date, modifiers?: Modifiers) => string; // Grid cell label
+  labelNext?: (month: Date | undefined) => string; // Next month button label
+  labelPrevious?: (month: Date | undefined) => string; // Previous month button label
+  labelDayButton?: (date: Date, modifiers?: Modifiers) => string; // Day button label
+  labelWeekday?: (date: Date) => string; // Weekday label
+}
+```
+
+**Important: For a correct localized experience, consumers should make sure the locale used for the translated labels and `locale` prop are consistent.**
+
+### `locale`
+
+-   Type: `Locale`
+-   Required: No
+-   Default: `enUS` from `@date-fns/locale`
+
+The locale object used to localize dates. Pass a locale from `@date-fns/locale` to localize the calendar.
+
+**Important: For a correct localized experience, consumers should make sure the locale used for the translated labels and `locale` prop are consistent.**
+
+### `weekStartsOn`
+
+-   Type: `0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined`
+-   Required: No
+-   Default: Based on the `locale` prop
+
+The index of the first day of the week (0 - Sunday). Overrides the locale's setting.
+
+### `onMonthChange`
+
+-   Type: `(month: Date) => void`
+-   Required: No
+
+Event fired when the user navigates between months.
+
+### `timeZone`
+
+-   Type: `string`
+-   Required: No
+
+The time zone (IANA or UTC offset) to use in the calendar. See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for possible values.
+
+When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object.
+
+```tsx
+import { DateCalendar, TZDate } from '@wordpress/components';
+
+export function WithTimeZone() {
+	const timeZone = 'America/New_York';
+	const [ selected, setSelected ] = useState< Date | undefined >(
+		new TZDate( 2024, 12, 10, timeZone ) // Use `TZDate` instead of `Date`
+	);
+	return (
+		<DateCalendar
+			timeZone={ timeZone }
+			selected={ selected }
+			onSelect={ setSelected }
+		/>
+	);
+}
+```
+
+### `role`
+
+-   Type: `'application' | 'dialog' | undefined`
+-   Required: No
+-   Default: `'application'`
+
+The role attribute to add to the container element.
+
+## Matcher Types
+
+The calendar component uses a flexible matching system to determine which days should be disabled or have specific modifiers. Here are the available matcher types:
+
+### Boolean Matcher
+
+```typescript
+const booleanMatcher: Matcher = true; // Will always match the day
+```
+
+### Date Matcher
+
+```typescript
+const dateMatcher: Matcher = new Date(); // Will match today's date
+```
+
+### Array Matcher
+
+```typescript
+const arrayMatcher: Matcher = [
+	new Date( 2019, 1, 2 ),
+	new Date( 2019, 1, 4 ),
+]; // Will match the days in the array
+```
+
+### Date After Matcher
+
+```typescript
+const afterMatcher: DateAfter = { after: new Date( 2019, 1, 2 ) }; // Will match days after the 2nd of February 2019
+```
+
+### Date Before Matcher
+
+```typescript
+const beforeMatcher: DateBefore = { before: new Date( 2019, 1, 2 ) }; // Will match days before the 2nd of February 2019
+```
+
+### Date Interval Matcher
+
+```typescript
+const intervalMatcher: DateInterval = {
+	after: new Date( 2019, 1, 2 ),
+	before: new Date( 2019, 1, 5 ),
+}; // Will match the days between the 2nd and the 5th of February 2019 (exclusive)
+```
+
+### Date Range Matcher
+
+```typescript
+const rangeMatcher: DateRange = {
+	from: new Date( 2019, 1, 2 ),
+	to: new Date( 2019, 1, 5 ),
+}; // Will match the days between the 2nd and the 5th of February 2019 (inclusive)
+```
+
+### Day of Week Matcher
+
+```typescript
+const dayOfWeekMatcher: DayOfWeek = { dayOfWeek: 0 }; // Will match Sundays
+const weekendMatcher: DayOfWeek = { dayOfWeek: [ 0, 6 ] }; // Will match weekends
+```
+
+### Function Matcher
+
+```typescript
+const functionMatcher: Matcher = ( day: Date ) => {
+	return day.getMonth() === 2; // Will match when month is March
+};
+```
diff --git a/packages/components/src/calendar/date-calendar/index.tsx b/packages/components/src/calendar/date-calendar/index.tsx
new file mode 100644
index 00000000000000..f70807d4d38457
--- /dev/null
+++ b/packages/components/src/calendar/date-calendar/index.tsx
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { DayPicker } from 'react-day-picker';
+import { enUS } from 'react-day-picker/locale';
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { COMMON_PROPS } from '../utils/constants';
+import { clampNumberOfMonths } from '../utils/misc';
+import { useControlledValue } from '../../utils/hooks';
+import { useLocalizationProps } from '../utils/use-localization-props';
+import type { DateCalendarProps, OnSelectHandler } from '../types';
+
+/**
+ * `DateCalendar` is a React component that provides a customizable calendar
+ * interface for **single date** selection.
+ *
+ * The component is built with accessibility in mind and follows ARIA best
+ * practices for calendar widgets. It provides keyboard navigation, screen reader
+ * support, and customizable labels for internationalization.
+ */
+export const DateCalendar = ( {
+	defaultSelected,
+	selected: selectedProp,
+	onSelect,
+	numberOfMonths = 1,
+	locale = enUS,
+	timeZone,
+	...props
+}: DateCalendarProps ) => {
+	const localizationProps = useLocalizationProps( {
+		locale,
+		timeZone,
+		mode: 'single',
+	} );
+
+	const onChange: OnSelectHandler< typeof selectedProp > = useCallback(
+		( selected, triggerDate, modifiers, e ) => {
+			// Convert internal `null` to `undefined` for the public event handler.
+			onSelect?.( selected ?? undefined, triggerDate, modifiers, e );
+		},
+		[ onSelect ]
+	);
+
+	const [ selected, setSelected ] = useControlledValue< typeof selectedProp >(
+		{
+			defaultValue: defaultSelected,
+			value: selectedProp,
+			onChange,
+		}
+	);
+
+	return (
+		<DayPicker
+			{ ...COMMON_PROPS }
+			{ ...localizationProps }
+			{ ...props }
+			mode="single"
+			numberOfMonths={ clampNumberOfMonths( numberOfMonths ) }
+			selected={ selected ?? undefined }
+			onSelect={ setSelected }
+		/>
+	);
+};
diff --git a/packages/components/src/calendar/date-range-calendar/README.md b/packages/components/src/calendar/date-range-calendar/README.md
new file mode 100644
index 00000000000000..3bfc9560a1c870
--- /dev/null
+++ b/packages/components/src/calendar/date-range-calendar/README.md
@@ -0,0 +1,298 @@
+# `DateRangeCalendar`
+
+🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/). We do not yet recommend using this outside of the Gutenberg project.
+
+`DateRangeCalendar` is a React component that provides a customizable calendar interface for **date range** selection.
+
+The component is built with accessibility in mind and follows ARIA best practices for calendar widgets. It provides keyboard navigation, screen reader support, and customizable labels for internationalization.
+
+## Usage example
+
+```tsx
+import { DateRangeCalendar } from '@wordpress/components';
+
+type DateRange = {
+	from: Date | undefined;
+	to?: Date | undefined;
+};
+
+function MyComponent() {
+	const [ selected, setSelected ] = useState< DateRange >( {
+		from: new Date( date.getFullYear(), date.getMonth(), 1 ),
+		to: new Date(),
+	} );
+
+	return <DateRangeCalendar selected={ selected } onSelect={ setSelected } />;
+}
+```
+
+## Props
+
+These props are shared between both single date and date range calendar modes.
+
+### `required`
+
+-   Type: `boolean`
+-   Required: No
+-   Default: `false`
+
+Whether the selection is required. When `true`, there always needs to be a date selected.
+
+### `selected`
+
+-   Type: `DateRange | undefined | null`
+-   Required: No
+
+The selected date range. A `DateRange` object has the following shape:
+
+```typescript
+{
+  from: Date | undefined;
+  to?: Date | undefined;
+}
+```
+
+### `onSelect`
+
+-   Type: `(selected: DateRange | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void`
+-   Required: No
+
+Event handler when the selection changes. The `selected` parameter will contain the new date range.
+
+### `defaultSelected`
+
+-   Type: `DateRange`
+-   Required: No
+
+The default selected range (for uncontrolled usage).
+
+### `excludeDisabled`
+
+-   Type: `boolean`
+-   Required: No
+
+When `true`, the range will reset when including a disabled day. This is useful to prevent users from selecting ranges that include unavailable dates.
+
+### `min`
+
+-   Type: `number`
+-   Required: No
+
+The minimum number of days to include in the range. If a user tries to select a range shorter than this, the selection will be adjusted to meet the minimum requirement.
+
+### `max`
+
+-   Type: `number`
+-   Required: No
+
+The maximum number of days to include in the range. If a user tries to select a range longer than this, the selection will be adjusted to meet the maximum requirement.
+
+### `defaultMonth`
+
+-   Type: `Date`
+-   Required: No
+-   Default: Current month
+
+The initial month to show in the calendar view (uncontrolled).
+
+### `month`
+
+-   Type: `Date`
+-   Required: No
+
+The month displayed in the calendar view (controlled). Use together with `onMonthChange` to change the month programmatically.
+
+### `numberOfMonths`
+
+-   Type: `number`
+-   Required: No
+-   Default: `1`
+
+The number of months displayed at once.
+
+### `startMonth`
+
+-   Type: `Date`
+-   Required: No
+
+The earliest month to start the month navigation.
+
+### `endMonth`
+
+-   Type: `Date`
+-   Required: No
+
+The latest month to end the month navigation.
+
+### `autoFocus`
+
+-   Type: `boolean`
+-   Required: No
+
+Focus the first selected day (if set) or today's date (if not disabled). Use this prop when you need to focus the calendar after a user action (e.g. opening the dialog with the calendar).
+
+### `disabled`
+
+-   Type: `Matcher | Matcher[] | undefined`
+-   Required: No
+
+Specify which days are disabled. Using `true` will disable all dates. See the [Matcher Types](#matcher-types) section for more details.
+
+### `disableNavigation`
+
+-   Type: `boolean`
+-   Required: No
+
+Disable the navigation buttons.
+
+### `labels`
+
+-   Type: `object`
+-   Required: No
+
+Use custom labels for internationalization. All labels are optional and have sensible defaults:
+
+```typescript
+{
+  labelNav?: () => string; // Navigation toolbar label
+  labelGrid?: (date: Date) => string; // Month grid label (default: "LLLL y")
+  labelGridcell?: (date: Date, modifiers?: Modifiers) => string; // Grid cell label
+  labelNext?: (month: Date | undefined) => string; // Next month button label
+  labelPrevious?: (month: Date | undefined) => string; // Previous month button label
+  labelDayButton?: (date: Date, modifiers?: Modifiers) => string; // Day button label
+  labelWeekday?: (date: Date) => string; // Weekday label
+}
+```
+
+**Important: For a correct localized experience, consumers should make sure the locale used for the translated labels and `locale` prop are consistent.**
+
+### `locale`
+
+-   Type: `Locale`
+-   Required: No
+-   Default: `enUS` from `@date-fns/locale`
+
+The locale object used to localize dates. Pass a locale from `@date-fns/locale` to localize the calendar.
+
+**Important: For a correct localized experience, consumers should make sure the locale used for the translated labels and `locale` prop are consistent.**
+
+### `weekStartsOn`
+
+-   Type: `0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined`
+-   Required: No
+-   Default: Based on the `locale` prop
+
+The index of the first day of the week (0 - Sunday). Overrides the locale's setting.
+
+### `onMonthChange`
+
+-   Type: `(month: Date) => void`
+-   Required: No
+
+Event fired when the user navigates between months.
+
+### `timeZone`
+
+-   Type: `string`
+-   Required: No
+
+The time zone (IANA or UTC offset) to use in the calendar. See [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for possible values.
+
+When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object.
+
+```tsx
+import { DateRangeCalendar, TZDate } from '@wordpress/components';
+
+export function WithTimeZone() {
+	const timeZone = 'America/New_York';
+	const [ selected, setSelected ] = useState< Date | undefined >( {
+		from: new TZDate( 2024, 12, 10, timeZone ), // Use `TZDate` instead of `Date`
+		to: new TZDate( 2024, 12, 8, timeZone ), // Use `TZDate` instead of `Date`
+	} );
+	return (
+		<DateRangeCalendar
+			timeZone={ timeZone }
+			selected={ selected }
+			onSelect={ setSelected }
+		/>
+	);
+}
+```
+
+### `role`
+
+-   Type: `'application' | 'dialog' | undefined`
+-   Required: No
+-   Default: `'application'`
+
+The role attribute to add to the container element.
+
+## Matcher Types
+
+The calendar component uses a flexible matching system to determine which days should be disabled or have specific modifiers. Here are the available matcher types:
+
+### Boolean Matcher
+
+```typescript
+const booleanMatcher: Matcher = true; // Will always match the day
+```
+
+### Date Matcher
+
+```typescript
+const dateMatcher: Matcher = new Date(); // Will match today's date
+```
+
+### Array Matcher
+
+```typescript
+const arrayMatcher: Matcher = [
+	new Date( 2019, 1, 2 ),
+	new Date( 2019, 1, 4 ),
+]; // Will match the days in the array
+```
+
+### Date After Matcher
+
+```typescript
+const afterMatcher: DateAfter = { after: new Date( 2019, 1, 2 ) }; // Will match days after the 2nd of February 2019
+```
+
+### Date Before Matcher
+
+```typescript
+const beforeMatcher: DateBefore = { before: new Date( 2019, 1, 2 ) }; // Will match days before the 2nd of February 2019
+```
+
+### Date Interval Matcher
+
+```typescript
+const intervalMatcher: DateInterval = {
+	after: new Date( 2019, 1, 2 ),
+	before: new Date( 2019, 1, 5 ),
+}; // Will match the days between the 2nd and the 5th of February 2019 (exclusive)
+```
+
+### Date Range Matcher
+
+```typescript
+const rangeMatcher: DateRange = {
+	from: new Date( 2019, 1, 2 ),
+	to: new Date( 2019, 1, 5 ),
+}; // Will match the days between the 2nd and the 5th of February 2019 (inclusive)
+```
+
+### Day of Week Matcher
+
+```typescript
+const dayOfWeekMatcher: DayOfWeek = { dayOfWeek: 0 }; // Will match Sundays
+const weekendMatcher: DayOfWeek = { dayOfWeek: [ 0, 6 ] }; // Will match weekends
+```
+
+### Function Matcher
+
+```typescript
+const functionMatcher: Matcher = ( day: Date ) => {
+	return day.getMonth() === 2; // Will match when month is March
+};
+```
diff --git a/packages/components/src/calendar/date-range-calendar/index.tsx b/packages/components/src/calendar/date-range-calendar/index.tsx
new file mode 100644
index 00000000000000..c67c50aadd784f
--- /dev/null
+++ b/packages/components/src/calendar/date-range-calendar/index.tsx
@@ -0,0 +1,215 @@
+/**
+ * External dependencies
+ */
+import { differenceInCalendarDays } from 'date-fns';
+import { DayPicker, rangeContainsModifiers } from 'react-day-picker';
+import { enUS } from 'react-day-picker/locale';
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useCallback } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { COMMON_PROPS, MODIFIER_CLASSNAMES } from '../utils/constants';
+import { clampNumberOfMonths } from '../utils/misc';
+import { useControlledValue } from '../../utils/hooks';
+import { useLocalizationProps } from '../utils/use-localization-props';
+import type {
+	DateRangeCalendarProps,
+	DateRange,
+	OnSelectHandler,
+} from '../types';
+
+export function usePreviewRange( {
+	selected,
+	hoveredDate,
+	excludeDisabled,
+	min,
+	max,
+	disabled,
+}: Pick<
+	DateRangeCalendarProps,
+	'selected' | 'excludeDisabled' | 'min' | 'max' | 'disabled'
+> & {
+	hoveredDate: Date | undefined;
+} ) {
+	return useMemo( () => {
+		if ( ! hoveredDate || ! selected?.from ) {
+			return;
+		}
+
+		let previewHighlight: DateRange | undefined;
+		let potentialNewRange: { from: Date; to: Date } | undefined;
+
+		// Hovering on a date before the start of the selected range
+		if ( hoveredDate < selected.from ) {
+			previewHighlight = {
+				from: hoveredDate,
+				to: selected.from,
+			};
+
+			potentialNewRange = {
+				from: hoveredDate,
+				to: selected.to ?? selected.from,
+			};
+		} else if (
+			selected.to &&
+			hoveredDate > selected.from &&
+			hoveredDate < selected.to
+		) {
+			// Hovering on a date between the start and end of the selected range
+			previewHighlight = {
+				from: selected.from,
+				to: hoveredDate,
+			};
+
+			potentialNewRange = {
+				from: selected.from,
+				to: hoveredDate,
+			};
+		} else if ( hoveredDate > selected.from ) {
+			// Hovering on a date after the end of the selected range (either
+			// because it's greater than selected.to, or because it's not defined)
+			previewHighlight = {
+				from: selected.to ?? selected.from,
+				to: hoveredDate,
+			};
+
+			potentialNewRange = {
+				from: selected.from,
+				to: hoveredDate,
+			};
+		}
+
+		if (
+			min !== undefined &&
+			min > 0 &&
+			potentialNewRange &&
+			differenceInCalendarDays(
+				potentialNewRange.to,
+				potentialNewRange.from
+			) < min
+		) {
+			previewHighlight = {
+				from: hoveredDate,
+				to: hoveredDate,
+			};
+		}
+
+		if (
+			max !== undefined &&
+			max > 0 &&
+			potentialNewRange &&
+			differenceInCalendarDays(
+				potentialNewRange.to,
+				potentialNewRange.from
+			) > max
+		) {
+			previewHighlight = {
+				from: hoveredDate,
+				to: hoveredDate,
+			};
+		}
+
+		if (
+			excludeDisabled &&
+			disabled &&
+			potentialNewRange &&
+			rangeContainsModifiers( potentialNewRange, disabled )
+		) {
+			previewHighlight = {
+				from: hoveredDate,
+				to: hoveredDate,
+			};
+		}
+
+		return previewHighlight;
+	}, [ selected, hoveredDate, excludeDisabled, min, max, disabled ] );
+}
+
+/**
+ * `DateRangeCalendar` is a React component that provides a customizable calendar
+ * interface for **date range** selection.
+ *
+ * The component is built with accessibility in mind and follows ARIA best
+ * practices for calendar widgets. It provides keyboard navigation, screen reader
+ * support, and customizable labels for internationalization.
+ */
+export const DateRangeCalendar = ( {
+	defaultSelected,
+	selected: selectedProp,
+	onSelect,
+	numberOfMonths = 1,
+	excludeDisabled,
+	min,
+	max,
+	disabled,
+	locale = enUS,
+	timeZone,
+	...props
+}: DateRangeCalendarProps ) => {
+	const localizationProps = useLocalizationProps( {
+		locale,
+		timeZone,
+		mode: 'range',
+	} );
+
+	const onChange: OnSelectHandler< typeof selectedProp > = useCallback(
+		( selected, triggerDate, modifiers, e ) => {
+			// Convert internal `null` to `undefined` for the public event handler.
+			onSelect?.( selected ?? undefined, triggerDate, modifiers, e );
+		},
+		[ onSelect ]
+	);
+
+	const [ selected, setSelected ] = useControlledValue< typeof selectedProp >(
+		{
+			defaultValue: defaultSelected,
+			value: selectedProp,
+			onChange,
+		}
+	);
+
+	const [ hoveredDate, setHoveredDate ] = useState< Date | undefined >(
+		undefined
+	);
+
+	// Compute the preview range for hover effect
+	const previewRange = usePreviewRange( {
+		selected,
+		hoveredDate,
+		excludeDisabled,
+		min,
+		max,
+		disabled,
+	} );
+
+	const modifiers = useMemo( () => {
+		return {
+			preview: previewRange,
+			preview_start: previewRange?.from,
+			preview_end: previewRange?.to,
+		};
+	}, [ previewRange ] );
+
+	return (
+		<DayPicker
+			{ ...COMMON_PROPS }
+			{ ...localizationProps }
+			{ ...props }
+			mode="range"
+			numberOfMonths={ clampNumberOfMonths( numberOfMonths ) }
+			disabled={ disabled }
+			excludeDisabled={ excludeDisabled }
+			min={ min }
+			max={ max }
+			selected={ selected ?? undefined }
+			onSelect={ setSelected }
+			onDayMouseEnter={ ( date ) => setHoveredDate( date ) }
+			onDayMouseLeave={ () => setHoveredDate( undefined ) }
+			modifiers={ modifiers }
+			modifiersClassNames={ MODIFIER_CLASSNAMES }
+		/>
+	);
+};
diff --git a/packages/components/src/calendar/index.tsx b/packages/components/src/calendar/index.tsx
new file mode 100644
index 00000000000000..dca0d755ec9ce8
--- /dev/null
+++ b/packages/components/src/calendar/index.tsx
@@ -0,0 +1,3 @@
+export { TZDate } from 'react-day-picker';
+export { DateCalendar } from './date-calendar';
+export { DateRangeCalendar } from './date-range-calendar';
diff --git a/packages/components/src/calendar/stories/date-calendar.story.tsx b/packages/components/src/calendar/stories/date-calendar.story.tsx
new file mode 100644
index 00000000000000..a3570f9aa2909d
--- /dev/null
+++ b/packages/components/src/calendar/stories/date-calendar.story.tsx
@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import { fn } from '@storybook/test';
+import {
+	enUS,
+	fr,
+	es,
+	de,
+	it,
+	he,
+	ru,
+	ja,
+	ptBR,
+	nl,
+	ko,
+	tr,
+	id,
+	zhCN,
+	zhTW,
+	ar,
+	sv,
+} from 'date-fns/locale';
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { DateCalendar, TZDate } from '..';
+
+const meta: Meta< typeof DateCalendar > = {
+	title: 'Components/Selection & Input/Time & Date/DateCalendar',
+	component: DateCalendar,
+	argTypes: {
+		locale: {
+			options: [
+				'English (US)',
+				'French',
+				'Spanish',
+				'German',
+				'Italian',
+				'Hebrew',
+				'Russian',
+				'Japanese',
+				'Portuguese (Brazil)',
+				'Dutch',
+				'Korean',
+				'Turkish',
+				'Indonesian',
+				'Chinese (Simplified)',
+				'Chinese (Traditional)',
+				'Arabic',
+				'Swedish',
+			],
+			mapping: {
+				'English (US)': enUS,
+				French: fr,
+				Spanish: es,
+				German: de,
+				Italian: it,
+				Hebrew: he,
+				Russian: ru,
+				Japanese: ja,
+				'Portuguese (Brazil)': ptBR,
+				Dutch: nl,
+				Korean: ko,
+				Turkish: tr,
+				Indonesian: id,
+				'Chinese (Simplified)': zhCN,
+				'Chinese (Traditional)': zhTW,
+				Arabic: ar,
+				Swedish: sv,
+			},
+			control: 'select',
+		},
+		timeZone: {
+			options: [
+				'Pacific/Honolulu',
+				'America/New_York',
+				'Europe/London',
+				'Asia/Tokyo',
+				'Pacific/Auckland',
+			],
+			control: 'select',
+		},
+		labels: {
+			control: false,
+		},
+		defaultSelected: { control: 'date' },
+		selected: { control: 'date' },
+		onSelect: {
+			control: false,
+		},
+		defaultMonth: { control: 'date' },
+		month: { control: 'date' },
+		onMonthChange: {
+			control: false,
+		},
+		endMonth: { control: 'date' },
+		startMonth: { control: 'date' },
+	},
+	args: {
+		onMonthChange: fn(),
+		onSelect: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof DateCalendar >;
+
+export const Default: Story = {};
+
+export const DisabledDates: Story = {
+	args: {
+		disabled: [
+			// Disable tomorrow (single date)
+			new Date( new Date().setDate( new Date().getDate() + 1 ) ),
+			// Disable all dates after Feb 1st of next year
+			{ after: new Date( new Date().getFullYear() + 1, 1, 1 ) },
+			// Disable all dates before Dec 1st of last year
+			{ before: new Date( new Date().getFullYear() - 1, 11, 1 ) },
+			// Disable all dates between 12th and 14th of August of this year
+			{
+				after: new Date( new Date().getFullYear(), 7, 11 ),
+				before: new Date( new Date().getFullYear(), 7, 15 ),
+			},
+			// Disable all dates between 21st and 26th of October of this year
+			{
+				from: new Date( new Date().getFullYear(), 9, 21 ),
+				to: new Date( new Date().getFullYear(), 9, 26 ),
+			},
+			// Disable all Wednesdays
+			{ dayOfWeek: 3 },
+			// Disable all prime day numbers
+			function isPrimeDate( date: Date ) {
+				return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(
+					date.getDate()
+				);
+			},
+		],
+	},
+};
+
+const nextMonth = new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1;
+const nextMonthYear =
+	new Date().getMonth() === 11
+		? new Date().getFullYear() + 1
+		: new Date().getFullYear();
+const firstDayOfNextMonth = new Date( nextMonthYear, nextMonth, 1 );
+export const WithSelectedDateAndMonth: Story = {
+	args: {
+		defaultSelected: firstDayOfNextMonth,
+		defaultMonth: firstDayOfNextMonth,
+	},
+};
+
+/**
+ * When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object.
+ */
+export const WithTimeZone: Story = {
+	render: function DateCalendarWithTimeZone( args ) {
+		const [ selected, setSelected ] = useState< TZDate | null >( null );
+
+		useEffect( () => {
+			setSelected(
+				// Select one week from today every time the time zone changes.
+				new TZDate(
+					new Date().setDate( new Date().getDate() + 7 ),
+					args.timeZone
+				)
+			);
+		}, [ args.timeZone ] );
+
+		return (
+			<>
+				<DateCalendar
+					{ ...args }
+					selected={ selected }
+					onSelect={ ( selectedDate, ...rest ) => {
+						setSelected(
+							selectedDate
+								? new TZDate( selectedDate, args.timeZone )
+								: null
+						);
+						args.onSelect?.( selectedDate, ...rest );
+					} }
+					disabled={ [
+						{
+							// Disable any date before today
+							before: new TZDate( new Date(), args.timeZone ),
+						},
+					] }
+				/>
+
+				<p>
+					Calendar set to { args.timeZone ?? 'current' } timezone,
+					disabling selection for all dates before today, and starting
+					with a default date of 1 week from today.
+				</p>
+			</>
+		);
+	},
+	args: {
+		timeZone: 'Pacific/Auckland',
+	},
+	argTypes: {
+		selected: {
+			control: false,
+		},
+		defaultSelected: {
+			control: false,
+		},
+		disabled: {
+			control: false,
+		},
+	},
+};
diff --git a/packages/components/src/calendar/stories/date-range-calendar.story.tsx b/packages/components/src/calendar/stories/date-range-calendar.story.tsx
new file mode 100644
index 00000000000000..529a9d368ce5eb
--- /dev/null
+++ b/packages/components/src/calendar/stories/date-range-calendar.story.tsx
@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import { fn } from '@storybook/test';
+import {
+	enUS,
+	fr,
+	es,
+	de,
+	it,
+	he,
+	ru,
+	ja,
+	ptBR,
+	nl,
+	ko,
+	tr,
+	id,
+	zhCN,
+	zhTW,
+	ar,
+	sv,
+} from 'date-fns/locale';
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { DateRangeCalendar, TZDate } from '..';
+
+const meta: Meta< typeof DateRangeCalendar > = {
+	title: 'Components/Selection & Input/Time & Date/DateRangeCalendar',
+	component: DateRangeCalendar,
+	argTypes: {
+		locale: {
+			options: [
+				'English (US)',
+				'French',
+				'Spanish',
+				'German',
+				'Italian',
+				'Hebrew',
+				'Russian',
+				'Japanese',
+				'Portuguese (Brazil)',
+				'Dutch',
+				'Korean',
+				'Turkish',
+				'Indonesian',
+				'Chinese (Simplified)',
+				'Chinese (Traditional)',
+				'Arabic',
+				'Swedish',
+			],
+			mapping: {
+				'English (US)': enUS,
+				French: fr,
+				Spanish: es,
+				German: de,
+				Italian: it,
+				Hebrew: he,
+				Russian: ru,
+				Japanese: ja,
+				'Portuguese (Brazil)': ptBR,
+				Dutch: nl,
+				Korean: ko,
+				Turkish: tr,
+				Indonesian: id,
+				'Chinese (Simplified)': zhCN,
+				'Chinese (Traditional)': zhTW,
+				Arabic: ar,
+				Swedish: sv,
+			},
+			control: 'select',
+		},
+		timeZone: {
+			options: [
+				'Pacific/Honolulu',
+				'America/New_York',
+				'Europe/London',
+				'Asia/Tokyo',
+				'Pacific/Auckland',
+			],
+			control: 'select',
+		},
+		labels: {
+			control: false,
+		},
+		defaultSelected: { control: false },
+		selected: { control: false },
+		onSelect: {
+			control: false,
+		},
+		defaultMonth: { control: 'date' },
+		month: { control: 'date' },
+		onMonthChange: {
+			control: false,
+		},
+		endMonth: { control: 'date' },
+		startMonth: { control: 'date' },
+	},
+	args: {
+		onMonthChange: fn(),
+		onSelect: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof DateRangeCalendar >;
+
+export const Default: Story = {};
+
+export const DisabledDates: Story = {
+	args: {
+		disabled: [
+			// Disable tomorrow (single date)
+			new Date( new Date().setDate( new Date().getDate() + 1 ) ),
+			// Disable all dates after Feb 1st of next year
+			{ after: new Date( new Date().getFullYear() + 1, 1, 1 ) },
+			// Disable all dates before Dec 1st of last year
+			{ before: new Date( new Date().getFullYear() - 1, 11, 1 ) },
+			// Disable all dates between 12th and 14th of August of this year
+			{
+				after: new Date( new Date().getFullYear(), 7, 11 ),
+				before: new Date( new Date().getFullYear(), 7, 15 ),
+			},
+			// Disable all dates between 21st and 26th of October of this year
+			{
+				from: new Date( new Date().getFullYear(), 9, 21 ),
+				to: new Date( new Date().getFullYear(), 9, 26 ),
+			},
+			// Disable all Wednesdays
+			{ dayOfWeek: 3 },
+			// Disable all prime day numbers
+			function isPrimeDate( date: Date ) {
+				return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(
+					date.getDate()
+				);
+			},
+		],
+	},
+};
+
+const nextMonth = new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1;
+const nextMonthYear =
+	new Date().getMonth() === 11
+		? new Date().getFullYear() + 1
+		: new Date().getFullYear();
+const firstDayOfNextMonth = new Date( nextMonthYear, nextMonth, 1 );
+const fourthDayOfNextMonth = new Date( nextMonthYear, nextMonth, 4 );
+export const WithSelectedRangeAndMonth: Story = {
+	args: {
+		defaultSelected: {
+			from: firstDayOfNextMonth,
+			to: fourthDayOfNextMonth,
+		},
+		defaultMonth: firstDayOfNextMonth,
+	},
+};
+
+/**
+ * When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object.
+ */
+export const WithTimeZone: Story = {
+	render: function DateCalendarWithTimeZone( args ) {
+		const [ range, setRange ] = useState< typeof args.selected | null >(
+			null
+		);
+
+		useEffect( () => {
+			setRange(
+				// Select from one week from today to two weeks from today
+				// every time the timezone changes.
+				{
+					from: new TZDate(
+						new Date().setDate( new Date().getDate() + 7 ),
+						args.timeZone
+					),
+					to: new TZDate(
+						new Date().setDate( new Date().getDate() + 14 ),
+						args.timeZone
+					),
+				}
+			);
+		}, [ args.timeZone ] );
+
+		return (
+			<>
+				<DateRangeCalendar
+					{ ...args }
+					selected={ range }
+					onSelect={ ( selectedDate, ...rest ) => {
+						setRange(
+							// Set controlled state to null if there's no selection
+							! selectedDate ||
+								( selectedDate.from === undefined &&
+									selectedDate.to === undefined )
+								? null
+								: selectedDate
+						);
+						args.onSelect?.( selectedDate, ...rest );
+					} }
+					disabled={ [
+						{
+							// Disable any date before today
+							before: new TZDate( new Date(), args.timeZone ),
+						},
+					] }
+				/>
+				<p>
+					Calendar set to { args.timeZone ?? 'current' } timezone,
+					disabling selection for all dates before today, and starting
+					with a default date range of 1 week from today to 2 weeks
+					from today.
+				</p>
+			</>
+		);
+	},
+	args: {
+		timeZone: 'Pacific/Auckland',
+	},
+	argTypes: {
+		disabled: {
+			control: false,
+		},
+	},
+};
diff --git a/packages/components/src/calendar/style.scss b/packages/components/src/calendar/style.scss
new file mode 100644
index 00000000000000..1fa28cdde4f91b
--- /dev/null
+++ b/packages/components/src/calendar/style.scss
@@ -0,0 +1,431 @@
+/* Root of the component. */
+// Internal variables
+$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
+$wp-components-calendar-button-height: 2rem;
+$wp-components-calendar-button-width: 2rem;
+$wp-components-calendar-nav-height: 2rem;
+$wp-components-calendar-range-middle-background-color: color-mix(in srgb, $components-color-accent 4%, transparent);
+$wp-components-calendar-preview-border-color: color-mix(in srgb, $components-color-accent 16%, transparent);
+
+.components-calendar {
+	// TODO: add font family rule when Theme is ready
+
+	position: relative; /* Required to position the navigation toolbar. */
+	box-sizing: border-box;
+	display: inline flow-root;
+	color: $gray-900;
+	background-color: $white;
+	font-size: 13px;
+	font-weight: 400;
+	z-index: 0; // Create a stacking context and render on top of the background.
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+}
+
+.components-calendar__day {
+	padding: 0;
+	position: relative;
+
+	// Setting text color on the day container instead of directly on the
+	// day button to ensure that the color of the dot used to indicate today's
+	// date follows the same color as the button's text, since the button
+	// inherits its text color.
+	&:has(.components-calendar__day-button:disabled) {
+		color: $gray-600;
+	}
+	&:has(.components-calendar__day-button:hover:not(:disabled)),
+	&:has(.components-calendar__day-button:focus-visible) {
+		color: $components-color-accent;
+	}
+}
+
+.components-calendar__day-button {
+	background: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	position: relative;
+
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+
+	border: none;
+	border-radius: 2px;
+
+	font: inherit;
+	font-variant-numeric: tabular-nums;
+	color: inherit;
+
+	// Use the button's ::before to render date's background, which keeps the
+	// border-radius of the button intact. This technique allows the focus ring
+	// to have rounded corners even when the background needs square corners
+	// (eg. in the middle of a date range).
+	&::before {
+		content: "";
+		position: absolute;
+		z-index: -1;
+		inset: 0;
+		border: none; // No default border to avoid polluting high-contrast mode.
+		border-radius: 2px;
+	}
+
+	// Use the button's ::after to show the selection preview.
+	&::after {
+		content: "";
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	&:disabled {
+		cursor: revert;
+
+		@media ( forced-colors: active ) {
+			// As an extra visual cue, show a line-through on disabled days
+			// in forced-colors (high-contrast) mode.
+			text-decoration: line-through;
+		}
+	}
+
+	&:focus-visible {
+		outline: $wp-components-calendar-outline-focus;
+		outline-offset: 1px;
+	}
+}
+
+.components-calendar__caption-label {
+	z-index: 1;
+
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	white-space: nowrap;
+	border: 0;
+
+	text-transform: capitalize;
+}
+
+.components-calendar__button-next,
+.components-calendar__button-previous {
+	border: none;
+	border-radius: 2px;
+	background: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	appearance: none;
+
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+
+	color: inherit;
+
+	&:disabled,
+	&[aria-disabled="true"] {
+		cursor: revert;
+
+		color: $gray-600;
+	}
+
+	&:focus-visible {
+		outline: $wp-components-calendar-outline-focus;
+	}
+}
+
+.components-calendar__chevron {
+	display: inline-block;
+	fill: currentColor;
+	width: 16px;
+	height: 16px;
+}
+
+.components-calendar[dir="rtl"]
+.components-calendar__nav
+.components-calendar__chevron {
+	transform: rotate(180deg);
+	transform-origin: 50%;
+}
+
+.components-calendar__month-caption {
+	display: flex;
+	justify-content: center;
+	align-content: center;
+
+	height: $wp-components-calendar-nav-height;
+	margin-bottom: 12px;
+}
+
+.components-calendar__months {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+	max-width: fit-content;
+}
+
+.components-calendar__month-grid {
+	border-collapse: separate;
+	border-spacing: 0 4px;
+}
+
+.components-calendar__nav {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: $wp-components-calendar-nav-height;
+}
+
+.components-calendar__weekday {
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+	padding: 0;
+
+	color: $gray-700;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+/* DAY MODIFIERS */
+// Today's date: show a dot in the top-right corner of the button
+.components-calendar__day--today::after {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	inset-block-start: 2px;
+	inset-inline-end: 2px;
+	width: 0;
+	height: 0;
+	border-radius: 50%;
+	border: 2px solid currentColor;
+}
+
+// Selected date button (individual date, range start, and range end)
+.components-calendar__day--selected:not(.components-calendar__range-middle) {
+	&:has(
+	.components-calendar__day-button,
+	.components-calendar__day-button:hover:not(:disabled)
+) {
+		color: $white;
+	}
+
+	.components-calendar__day-button {
+		&::before {
+			background-color: $gray-900;
+			// Render a transparent border to highlight the selected day in
+			// forced-colors (high-contrast) mode, since the background is not
+			// visible.
+			border: 1px solid transparent;
+		}
+
+		&:disabled::before {
+			background-color: $gray-600;
+		}
+
+		&:hover:not(:disabled)::before {
+			background-color: $gray-800;
+		}
+	}
+}
+
+// Hidden button (ie. outside current month but still rendered)
+.components-calendar__day--hidden {
+	visibility: hidden;
+}
+
+// Range start button, but not when start and end are the same day.
+.components-calendar__range-start:not(.components-calendar__range-end)
+.components-calendar__day-button {
+	// Apply border-radius changes to the button itself too, so that the focus
+	// ring follows the same shape as the button's background.
+	&,
+	&::before {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+}
+
+// Middle of date range
+.components-calendar__range-middle .components-calendar__day-button {
+	&::before {
+		background-color: $wp-components-calendar-range-middle-background-color;
+		border-radius: 0;
+
+		// Render a top and bottom transparent border to highlight the selected
+		// day in forced-colors (high-contrast) mode, since the background is not
+		// visible.
+		border-width: 1px 0;
+		border-color: transparent;
+		border-style: solid;
+	}
+}
+
+// Range end button, but not when start and end are the same day.
+.components-calendar__range-end:not(.components-calendar__range-start)
+.components-calendar__day-button {
+	// Apply border-radius changes to the button itself too, so that the focus
+	// ring follows the same shape as the button's background.
+	&,
+	&::before {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+}
+
+/*
+ * RANGE PREVIEW (range calendar only)
+ *
+ * The preview is rendered in the button's ::after pseudo-element, so that it
+ * can be rendered over the button's contents.
+ * The selection preview is shown with a dashed border. In order to have
+ * control over the dash pattern (especially the seams between days), the
+ * dashed borders are rendered as SVGs via the url() CSS function.
+ * Since SVGs rendered in the url() function don't seem to be able to access
+ * CSS variables, we're using the SVGs as masks, and using `background-color`
+ * to consume the accent color variable.
+ */
+.components-calendar__day--preview svg {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	color: $wp-components-calendar-preview-border-color;
+
+	@media ( forced-colors: active ) {
+		color: inherit;
+	}
+
+	.components-calendar[dir="rtl"] & {
+		transform: scaleX(-1);
+	}
+}
+
+.components-calendar__day--preview.components-calendar__range-middle
+.components-calendar__day-button::before {
+	// Remove the transparent border shown on the middle of the range
+	// in forced-colors (high-contrast) mode, to allow for the dashed border
+	// to be visible.
+	border: none;
+}
+
+/* ANIMATIONS */
+@keyframes slide-in-left {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-in-right {
+	0% {
+		transform: translateX(100%);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-out-left {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes slide-out-right {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+	animation-duration: 0s;
+	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	animation-fill-mode: forwards;
+
+	@media not ( prefers-reduced-motion ) {
+		animation-duration: 0.3s;
+	}
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar[dir="rtl"] .components-calendar__weeks-after-enter {
+	animation-name: slide-in-left;
+}
+.components-calendar__weeks-before-exit,
+.components-calendar[dir="rtl"] .components-calendar__weeks-after-exit {
+	animation-name: slide-out-left;
+}
+.components-calendar__weeks-after-enter,
+.components-calendar[dir="rtl"] .components-calendar__weeks-before-enter {
+	animation-name: slide-in-right;
+}
+.components-calendar__weeks-after-exit,
+.components-calendar[dir="rtl"] .components-calendar__weeks-before-exit {
+	animation-name: slide-out-right;
+}
+
+.components-calendar__caption-after-enter {
+	animation-name: fade-in;
+}
+.components-calendar__caption-after-exit {
+	animation-name: fade-out;
+}
+.components-calendar__caption-before-enter {
+	animation-name: fade-in;
+}
+.components-calendar__caption-before-exit {
+	animation-name: fade-out;
+}
diff --git a/packages/components/src/calendar/test/__utils__/index.ts b/packages/components/src/calendar/test/__utils__/index.ts
new file mode 100644
index 00000000000000..9e4e9ba7dbed10
--- /dev/null
+++ b/packages/components/src/calendar/test/__utils__/index.ts
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+
+export const monthNameFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		year: 'numeric',
+		month: 'long',
+		timeZone,
+	} );
+
+const fullDateFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		weekday: 'long',
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		timeZone,
+	} );
+
+export const dateNumberFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		day: 'numeric',
+		timeZone,
+	} );
+
+export const getDateButton = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.getByRole( 'button', {
+		name: new RegExp( fullDateFormatter( locale ).format( date ) ),
+		...options,
+	} );
+
+export const getDateCell = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.getByRole( 'gridcell', {
+		name: dateNumberFormatter( locale ).format( date ),
+		...options,
+	} );
+
+export const queryDateCell = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.queryByRole( 'gridcell', {
+		name: dateNumberFormatter( locale ).format( date ),
+		...options,
+	} );
diff --git a/packages/components/src/calendar/test/date-calendar.tsx b/packages/components/src/calendar/test/date-calendar.tsx
new file mode 100644
index 00000000000000..afa33875a1a2b8
--- /dev/null
+++ b/packages/components/src/calendar/test/date-calendar.tsx
@@ -0,0 +1,975 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+	startOfDay,
+	startOfWeek,
+	startOfMonth,
+	endOfWeek,
+	addDays,
+	subDays,
+	addWeeks,
+	addMonths,
+	subMonths,
+	subYears,
+	addHours,
+} from 'date-fns';
+import { ar } from 'date-fns/locale';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { DateCalendar, TZDate } from '..';
+import {
+	getDateButton,
+	getDateCell,
+	queryDateCell,
+	monthNameFormatter,
+} from './__utils__';
+import type { DateCalendarProps } from '../types';
+
+const UncontrolledDateCalendar = (
+	props: DateCalendarProps & {
+		initialSelected?: Date | undefined | null;
+		initialMonth?: Date | undefined;
+	}
+) => {
+	return (
+		<DateCalendar
+			{ ...props }
+			defaultSelected={ props.initialSelected ?? undefined }
+			defaultMonth={ props.initialMonth }
+		/>
+	);
+};
+
+const ControlledDateCalendar = (
+	props: DateCalendarProps & {
+		initialSelected?: Date | undefined | null;
+		initialMonth?: Date | undefined;
+	}
+) => {
+	const [ selected, setSelected ] = useState< Date | undefined | null >(
+		props.initialSelected
+	);
+	const [ month, setMonth ] = useState< Date | undefined >(
+		props.initialMonth
+	);
+	return (
+		<DateCalendar
+			{ ...props }
+			selected={ selected ?? null }
+			onSelect={ ( ...args ) => {
+				setSelected( args[ 0 ] );
+				props.onSelect?.( ...args );
+			} }
+			month={ month }
+			onMonthChange={ ( newMonth ) => {
+				setMonth( newMonth );
+				props.onMonthChange?.( newMonth );
+			} }
+		/>
+	);
+};
+
+function setupUserEvent() {
+	// The `advanceTimersByTime` is needed since we're using jest
+	// fake timers to simulate a fixed date for tests.
+	const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+	return user;
+}
+
+describe( 'DateCalendar', () => {
+	let today: Date;
+	let tomorrow: Date;
+	let yesterday: Date;
+	let currentMonth: Date;
+	let nextMonth: Date;
+	let nextNextMonth: Date;
+	let prevMonth: Date;
+	let prevPrevMonth: Date;
+
+	beforeAll( () => {
+		jest.useFakeTimers();
+		// For consistent tests, set the system time to a fixed date:
+		// Thursday, May 15, 2025, 20:00 UTC
+		jest.setSystemTime( 1747339200000 );
+		today = startOfDay( new Date() );
+		tomorrow = startOfDay( addDays( today, 1 ) );
+		yesterday = startOfDay( subDays( today, 1 ) );
+		currentMonth = startOfMonth( today );
+		nextMonth = startOfMonth( addMonths( today, 1 ) );
+		nextNextMonth = startOfMonth( addMonths( today, 2 ) );
+		prevMonth = startOfMonth( subMonths( today, 1 ) );
+		prevPrevMonth = startOfMonth( subMonths( today, 2 ) );
+	} );
+
+	afterAll( () => {
+		jest.useRealTimers();
+	} );
+
+	describe( 'Semantics and basic behavior', () => {
+		it( 'should apply the correct roles, semantics and attributes', async () => {
+			render( <DateCalendar /> );
+
+			expect(
+				screen.getByRole( 'application', { name: 'Date calendar' } )
+			).toBeVisible();
+
+			const tableGrid = screen.getByRole( 'grid', {
+				name: monthNameFormatter( 'en-US' ).format( today ),
+			} );
+			expect( tableGrid ).toBeVisible();
+			expect( tableGrid ).toHaveAttribute(
+				'aria-multiselectable',
+				'false'
+			);
+
+			const todayButton = getDateButton( today );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /today/i );
+		} );
+
+		it( 'should show multiple months at once via the `numberOfMonths` prop', () => {
+			render( <DateCalendar numberOfMonths={ 2 } /> );
+
+			const grids = screen.getAllByRole( 'grid' );
+			expect( grids ).toHaveLength( 2 );
+			expect( grids[ 0 ] ).toHaveAccessibleName(
+				monthNameFormatter( 'en-US' ).format( today )
+			);
+			expect( grids[ 1 ] ).toHaveAccessibleName(
+				monthNameFormatter( 'en-US' ).format( nextMonth )
+			);
+		} );
+	} );
+
+	describe( 'Date selection', () => {
+		it( 'should select an initial date in uncontrolled mode via the `defaultSelected` prop', () => {
+			render( <DateCalendar defaultSelected={ today } /> );
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+		} );
+
+		it( 'should select an initial date in controlled mode via the `selected` prop', () => {
+			// Note: the `defaultSelected` prop is ignored when the `selected` prop is set.
+			render(
+				<DateCalendar defaultSelected={ tomorrow } selected={ today } />
+			);
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+		} );
+
+		it( 'should have no date selected in uncontrolled mode when the `selected` and `defaultSelected` props are set to `undefined`', () => {
+			render( <DateCalendar /> );
+
+			expect(
+				screen.queryByRole( 'gridcell', { selected: true } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: /selected/i } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should have no date selected in controlled mode when the `selected` prop is set to `null`', () => {
+			// Note: the `defaultSelected` prop is ignored when the `selected` prop is set.
+			render(
+				<DateCalendar defaultSelected={ tomorrow } selected={ null } />
+			);
+
+			expect(
+				screen.queryByRole( 'gridcell', { selected: true } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: /selected/i } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should select a date in uncontrolled mode via the `defaultSelected` prop even if the date is disabled`', () => {
+			render(
+				<DateCalendar
+					defaultSelected={ tomorrow }
+					disabled={ tomorrow }
+				/>
+			);
+
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeDisabled();
+		} );
+
+		it( 'should select a date in controlled mode via the `selected` prop even if the date is disabled`', () => {
+			render(
+				<DateCalendar selected={ tomorrow } disabled={ tomorrow } />
+			);
+
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeDisabled();
+		} );
+
+		describe.each( [
+			[ 'Uncontrolled', UncontrolledDateCalendar ],
+			[ 'Controlled', ControlledDateCalendar ],
+		] )( '[`%s`]', ( _mode, Component ) => {
+			it( 'should select a date when a date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					today,
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				expect(
+					getDateCell( today, { selected: true } )
+				).toBeVisible();
+			} );
+
+			it( 'should not select a disabled date when a date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component onSelect={ onSelect } disabled={ tomorrow } />
+				);
+
+				await user.click( getDateButton( tomorrow ) );
+
+				expect( onSelect ).not.toHaveBeenCalled();
+				expect(
+					screen.queryByRole( 'button', { name: /selected/i } )
+				).not.toBeInTheDocument();
+			} );
+
+			it( 'should select a new date when a different date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component
+						initialSelected={ today }
+						onSelect={ onSelect }
+					/>
+				);
+
+				const tomorrowButton = getDateButton( tomorrow );
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					tomorrow,
+					tomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: tomorrowButton,
+					} )
+				);
+
+				expect(
+					getDateCell( tomorrow, { selected: true } )
+				).toBeVisible();
+			} );
+
+			it( 'should de-select the selected date when the selected date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component
+						initialSelected={ today }
+						onSelect={ onSelect }
+					/>
+				);
+
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					undefined,
+					today,
+					expect.objectContaining( { today: true, selected: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				expect(
+					queryDateCell( today, { selected: true } )
+				).not.toBeInTheDocument();
+			} );
+
+			it( 'should not de-select the selected date when the selected date button is clicked if the `required` prop is set to `true`', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component
+						initialSelected={ today }
+						onSelect={ onSelect }
+						required
+					/>
+				);
+
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					today,
+					today,
+					expect.objectContaining( { today: true, selected: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+				expect(
+					queryDateCell( today, { selected: true } )
+				).toBeVisible();
+			} );
+		} );
+	} );
+
+	describe( 'Month navigation', () => {
+		it( 'should select an initial month in uncontrolled mode via the `defaultMonth` prop', () => {
+			render( <DateCalendar defaultMonth={ nextMonth } /> );
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+				} )
+			).toBeVisible();
+			expect( getDateCell( nextMonth ) ).toBeVisible();
+			expect( getDateButton( nextMonth ) ).toBeVisible();
+		} );
+
+		it( 'should select an initial month in controlled mode via the `month` prop', () => {
+			render( <DateCalendar month={ nextMonth } /> );
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+				} )
+			).toBeVisible();
+			expect( getDateCell( nextMonth ) ).toBeVisible();
+			expect( getDateButton( nextMonth ) ).toBeVisible();
+		} );
+
+		describe.each( [
+			[ 'Uncontrolled', UncontrolledDateCalendar ],
+			[ 'Controlled', ControlledDateCalendar ],
+		] )( '[`%s`]', ( _mode, Component ) => {
+			it( 'should navigate to the previous and next months when the previous and next month buttons are clicked', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render( <Component onMonthChange={ onMonthChange } /> );
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+				await user.click( prevButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( prevMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( prevMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevMonth ) ).toBeVisible();
+				expect( getDateButton( prevMonth ) ).toBeVisible();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 2 );
+				expect( onMonthChange ).toHaveBeenCalledWith( currentMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							currentMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( currentMonth ) ).toBeVisible();
+				expect( getDateButton( currentMonth ) ).toBeVisible();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 3 );
+				expect( onMonthChange ).toHaveBeenCalledWith( nextMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextMonth ) ).toBeVisible();
+				expect( getDateButton( nextMonth ) ).toBeVisible();
+			} );
+
+			it( 'should not navigate to a month that is before the `startMonth` prop', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render(
+					<Component
+						startMonth={ nextMonth }
+						onMonthChange={ onMonthChange }
+					/>
+				);
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextMonth ) ).toBeVisible();
+				expect( getDateButton( nextMonth ) ).toBeVisible();
+
+				expect( prevButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+				await user.click( prevButton );
+
+				expect( onMonthChange ).not.toHaveBeenCalled();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( nextNextMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							nextNextMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextNextMonth ) ).toBeVisible();
+				expect( getDateButton( nextNextMonth ) ).toBeVisible();
+
+				expect( prevButton ).not.toHaveAttribute( 'aria-disabled' );
+			} );
+
+			it( 'should not navigate to a month that is after the `endMonth` prop', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render(
+					<Component
+						endMonth={ prevMonth }
+						onMonthChange={ onMonthChange }
+					/>
+				);
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( prevMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevMonth ) ).toBeVisible();
+				expect( getDateButton( prevMonth ) ).toBeVisible();
+
+				expect( nextButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).not.toHaveBeenCalled();
+
+				await user.click( prevButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( prevPrevMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							prevPrevMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevPrevMonth ) ).toBeVisible();
+				expect( getDateButton( prevPrevMonth ) ).toBeVisible();
+
+				expect( nextButton ).not.toHaveAttribute( 'aria-disabled' );
+			} );
+		} );
+	} );
+
+	describe( 'Keyboard focus and navigation', () => {
+		it( 'should auto-focus the selected day when the `autoFocus` prop is set to `true`', async () => {
+			// eslint-disable-next-line jsx-a11y/no-autofocus
+			render( <DateCalendar autoFocus defaultSelected={ tomorrow } /> );
+			expect( getDateButton( tomorrow ) ).toHaveFocus();
+		} );
+
+		it( "should auto-focus today's date if there is not selected date when the `autoFocus` prop is set to `true`", async () => {
+			// eslint-disable-next-line jsx-a11y/no-autofocus
+			render( <DateCalendar autoFocus /> );
+			expect( getDateButton( today ) ).toHaveFocus();
+		} );
+
+		it( 'should focus each arrow as a tab stop, but treat the grid as a 2d composite widget', async () => {
+			const user = setupUserEvent();
+			render( <DateCalendar /> );
+
+			// Focus previous month button
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /previous month/i } )
+			).toHaveFocus();
+
+			// Focus next month button
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /next month/i } )
+			).toHaveFocus();
+
+			// Focus today button
+			await user.tab();
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			// Focus next day
+			await user.keyboard( '{ArrowRight}' );
+			expect( getDateButton( addDays( today, 1 ) ) ).toHaveFocus();
+
+			// Focus to next week
+			await user.keyboard( '{ArrowDown}' );
+			expect( getDateButton( addDays( today, 8 ) ) ).toHaveFocus();
+
+			// Focus previous day
+			await user.keyboard( '{ArrowLeft}' );
+			expect( getDateButton( addDays( today, 7 ) ) ).toHaveFocus();
+
+			// Focus previous week
+			await user.keyboard( '{ArrowUp}' );
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			// Focus first day of week
+			await user.keyboard( '{Home}' );
+			expect( getDateButton( startOfWeek( today ) ) ).toHaveFocus();
+
+			// Focus last day of week
+			await user.keyboard( '{End}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+
+			// Focus previous month
+			await user.keyboard( '{PageUp}' );
+			expect(
+				getDateButton( subMonths( endOfWeek( today ), 1 ) )
+			).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						subMonths( endOfWeek( today ), 1 )
+					),
+				} )
+			).toBeVisible();
+
+			// Navigate to next month
+			await user.keyboard( '{PageDown}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						endOfWeek( today )
+					),
+				} )
+			).toBeVisible();
+
+			// Focus previous year
+			await user.keyboard( '{Shift>}{PageUp}{/Shift}' );
+			expect(
+				getDateButton( subYears( endOfWeek( today ), 1 ) )
+			).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						subYears( endOfWeek( today ), 1 )
+					),
+				} )
+			).toBeVisible();
+
+			// Focus next year
+			await user.keyboard( '{Shift>}{PageDown}{/Shift}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						endOfWeek( today )
+					),
+				} )
+			).toBeVisible();
+		} );
+
+		// Note: the following test is not testing advanced keyboard interactions
+		// (pageUp, pageDown, shift+pageUp, shift+pageDown, home, end)
+		it( 'should not focus disabled dates and skip over them when navigating using arrow keys', async () => {
+			const user = setupUserEvent();
+
+			render(
+				<DateCalendar
+					disabled={ [
+						tomorrow,
+						addWeeks( addDays( tomorrow, 1 ), 1 ),
+						addWeeks( today, 2 ),
+						addWeeks( tomorrow, 2 ),
+					] }
+				/>
+			);
+
+			await user.tab();
+			await user.tab();
+			await user.tab();
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowRight}' );
+			expect( getDateButton( addDays( tomorrow, 1 ) ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				getDateButton( addWeeks( addDays( tomorrow, 1 ), 2 ) )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect( getDateButton( addWeeks( yesterday, 2 ) ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowUp}' );
+			expect( getDateButton( addWeeks( yesterday, 1 ) ) ).toHaveFocus();
+		} );
+
+		it( 'should focus the selected date when tabbing into the calendar', async () => {
+			const user = setupUserEvent();
+			render( <DateCalendar selected={ tomorrow } /> );
+
+			// Tab to the calendar grid
+			await user.tab();
+			await user.tab();
+			await user.tab();
+
+			expect( getDateButton( tomorrow ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'Disabled states', () => {
+		it( 'should support disabling all dates via the `disabled` prop', async () => {
+			const user = setupUserEvent();
+
+			render( <DateCalendar disabled /> );
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+
+			await user.click(
+				screen.getByRole( 'button', { name: /previous/i } )
+			);
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+
+			await user.click( screen.getByRole( 'button', { name: /next/i } ) );
+			await user.click( screen.getByRole( 'button', { name: /next/i } ) );
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+		} );
+
+		it( 'should support disabling single dates via the `disabled` prop', async () => {
+			render( <DateCalendar disabled={ tomorrow } /> );
+
+			expect( getDateButton( tomorrow ) ).toBeDisabled();
+		} );
+
+		it( 'should support passing a custom function via the `disabled` prop', async () => {
+			const primeNumbers = [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ];
+			render(
+				<DateCalendar
+					disabled={ ( date ) =>
+						primeNumbers.includes( date.getDate() )
+					}
+				/>
+			);
+
+			for ( const date of primeNumbers ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should support disabling all dates before a certain date via the `disabled` prop', async () => {
+			render( <DateCalendar disabled={ { before: today } } /> );
+
+			for ( let date = 1; date < today.getDate(); date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( today ) ).toBeEnabled();
+		} );
+
+		it( 'should support disabling all dates after a certain date via the `disabled` prop', async () => {
+			render( <DateCalendar disabled={ { after: today } } /> );
+
+			for ( let date = today.getDate() + 1; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( today ) ).toBeEnabled();
+		} );
+
+		it( 'should support disabling all dates before a certain date and after a certain date via the `disabled` prop', async () => {
+			render(
+				<DateCalendar
+					disabled={ {
+						before: yesterday,
+						after: addDays( today, 1 ),
+					} }
+				/>
+			);
+
+			let date;
+
+			for ( date = 1; date < today.getDate() - 1; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( yesterday ) ).toBeEnabled();
+			expect( getDateButton( today ) ).toBeEnabled();
+			expect( getDateButton( addDays( today, 1 ) ) ).toBeEnabled();
+
+			for ( date = today.getDate() + 2; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should support disabling all dates within a certain date range via the `disabled` prop', async () => {
+			render(
+				<DateCalendar
+					disabled={ { from: yesterday, to: addDays( today, 1 ) } }
+				/>
+			);
+
+			let date;
+
+			for ( date = 1; date < today.getDate() - 1; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeEnabled();
+			}
+			expect( getDateButton( yesterday ) ).toBeDisabled();
+			expect( getDateButton( today ) ).toBeDisabled();
+			expect( getDateButton( addDays( today, 1 ) ) ).toBeDisabled();
+
+			for ( date = today.getDate() + 2; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeEnabled();
+			}
+		} );
+
+		it( 'should support disabling specific days of the week via the `disabled` prop', async () => {
+			const weekendsInMay = [ 3, 4, 10, 11, 17, 18, 24, 25, 31 ];
+			render( <DateCalendar disabled={ { dayOfWeek: [ 0, 6 ] } } /> );
+
+			for ( const date of weekendsInMay ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should disable the previous and next months buttons if the `disableNavigation` is set to `true`', async () => {
+			const user = setupUserEvent();
+
+			render( <DateCalendar disableNavigation /> );
+
+			expect(
+				screen.getByRole( 'button', { name: /previous month/i } )
+			).toHaveAttribute( 'aria-disabled', 'true' );
+			expect(
+				screen.getByRole( 'button', { name: /next month/i } )
+			).toHaveAttribute( 'aria-disabled', 'true' );
+
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /today/i } )
+			).toHaveFocus();
+		} );
+	} );
+
+	// Note: we're not testing localization of strings. We're only testing
+	// that the date formatting, computed dir, and calendar format are correct.
+	describe( 'Localization', () => {
+		it( 'should localize the calendar based on the `locale` prop', async () => {
+			const user = setupUserEvent();
+
+			render( <DateCalendar locale={ ar } /> );
+
+			// Check computed writing direction
+			expect(
+				screen.getByRole( 'application', { name: 'Date calendar' } )
+			).toHaveAttribute( 'dir', 'rtl' );
+
+			// Check month name
+			const grid = screen.getByRole( 'grid', {
+				name: monthNameFormatter( 'ar' ).format( today ),
+			} );
+			expect( grid ).toBeVisible();
+
+			// Check today button
+			expect( getDateButton( today, {}, 'ar' ) ).toHaveAccessibleName(
+				/today/i
+			);
+
+			await user.tab();
+			await user.tab();
+			await user.tab();
+			expect( getDateButton( today, {}, 'ar' ) ).toHaveFocus();
+
+			await user.keyboard( '{Home}' );
+			expect(
+				getDateButton( startOfWeek( today, { locale: ar } ), {}, 'ar' )
+			).toHaveFocus();
+		} );
+
+		it( 'should support timezones according to the `timeZone` prop', async () => {
+			const user = setupUserEvent();
+			const onSelect = jest.fn();
+
+			render(
+				<DateCalendar timeZone="Asia/Tokyo" onSelect={ onSelect } />
+			);
+
+			// For someone in Tokyo, the current time simulated in the test
+			// (ie. 20:00 UTC) is the next day.
+			expect( getDateButton( tomorrow ) ).toHaveAccessibleName(
+				/today/i
+			);
+
+			// Select tomorrow's button (which is today in Tokyo)
+			const tomorrowButton = getDateButton( tomorrow );
+			await user.click( tomorrowButton );
+
+			const tomorrowFromTokyoTimezone = addHours(
+				tomorrow,
+				new TZDate( tomorrow, 'Asia/Tokyo' ).getTimezoneOffset() / 60
+			);
+
+			expect( onSelect ).toHaveBeenCalledWith(
+				tomorrowFromTokyoTimezone,
+				tomorrowFromTokyoTimezone,
+				expect.objectContaining( { today: true } ),
+				expect.objectContaining( {
+					type: 'click',
+					target: tomorrowButton,
+				} )
+			);
+		} );
+
+		it( 'should handle timezoned dates and convert them to the calendar timezone', async () => {
+			// Still the same time from UTC's POV, just expressed in Tokyo time.
+			const tomorrowAtMidnightInTokyo = new TZDate(
+				tomorrow,
+				'Asia/Tokyo'
+			);
+
+			render(
+				<DateCalendar
+					defaultSelected={ tomorrowAtMidnightInTokyo }
+					// Note: using "Etc/GMT+2" instead of "-02:00" because support for raw offsets was introduced in Node v22 (while currently the repository still targets Node v20).
+					timeZone="Etc/GMT+2"
+				/>
+			);
+
+			// Changing the calendar timezone to UTC-2 makes the dates become
+			// earlier by 1 day (from midnight to 10pm the previous day).
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+		} );
+	} );
+} );
diff --git a/packages/components/src/calendar/test/date-range-calendar.tsx b/packages/components/src/calendar/test/date-range-calendar.tsx
new file mode 100644
index 00000000000000..8bcbaf77389449
--- /dev/null
+++ b/packages/components/src/calendar/test/date-range-calendar.tsx
@@ -0,0 +1,1701 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+	startOfDay,
+	startOfWeek,
+	startOfMonth,
+	endOfWeek,
+	addDays,
+	subDays,
+	addWeeks,
+	addMonths,
+	subMonths,
+	subYears,
+	addHours,
+} from 'date-fns';
+import { ar } from 'date-fns/locale';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { usePreviewRange, DateRangeCalendar } from '../date-range-calendar';
+import { TZDate } from '../';
+import { getDateButton, getDateCell, monthNameFormatter } from './__utils__';
+import type { DateRange, DateRangeCalendarProps } from '../types';
+
+const UncontrolledDateRangeCalendar = (
+	props: DateRangeCalendarProps & {
+		initialSelected?: DateRange | undefined | null;
+		initialMonth?: Date | undefined;
+	}
+) => {
+	return (
+		<DateRangeCalendar
+			{ ...props }
+			defaultSelected={ props.initialSelected ?? undefined }
+			defaultMonth={ props.initialMonth }
+		/>
+	);
+};
+
+const ControlledDateRangeCalendar = (
+	props: DateRangeCalendarProps & {
+		initialSelected?: DateRange | undefined | null;
+		initialMonth?: Date | undefined;
+	}
+) => {
+	const [ selected, setSelected ] = useState< DateRange | undefined | null >(
+		props.initialSelected
+	);
+	const [ month, setMonth ] = useState< Date | undefined >(
+		props.initialMonth
+	);
+	return (
+		<DateRangeCalendar
+			{ ...props }
+			selected={ selected ?? null }
+			onSelect={ ( ...args ) => {
+				setSelected( args[ 0 ] );
+				props.onSelect?.( ...args );
+			} }
+			month={ month }
+			onMonthChange={ ( newMonth ) => {
+				setMonth( newMonth );
+				props.onMonthChange?.( newMonth );
+			} }
+		/>
+	);
+};
+
+function setupUserEvent() {
+	// The `advanceTimersByTime` is needed since we're using jest
+	// fake timers to simulate a fixed date for tests.
+	const user = userEvent.setup( { advanceTimers: jest.advanceTimersByTime } );
+	return user;
+}
+
+describe( 'DateRangeCalendar', () => {
+	let today: Date;
+	let tomorrow: Date;
+	let yesterday: Date;
+	let currentMonth: Date;
+	let nextMonth: Date;
+	let nextNextMonth: Date;
+	let prevMonth: Date;
+	let prevPrevMonth: Date;
+
+	beforeAll( () => {
+		jest.useFakeTimers();
+		// For consistent tests, set the system time to a fixed date:
+		// Thursday, May 15, 2025, 20:00 UTC
+		jest.setSystemTime( 1747339200000 );
+
+		today = startOfDay( new Date() );
+		tomorrow = addDays( today, 1 );
+		yesterday = subDays( today, 1 );
+		currentMonth = startOfMonth( today );
+		nextMonth = startOfMonth( addMonths( today, 1 ) );
+		nextNextMonth = startOfMonth( addMonths( today, 2 ) );
+		prevMonth = startOfMonth( subMonths( today, 1 ) );
+		prevPrevMonth = startOfMonth( subMonths( today, 2 ) );
+	} );
+
+	afterAll( () => {
+		jest.useRealTimers();
+	} );
+
+	describe( 'Semantics and basic behavior', () => {
+		it( 'should apply the correct roles, semantics and attributes', async () => {
+			render( <DateRangeCalendar /> );
+
+			expect(
+				screen.getByRole( 'application', {
+					name: 'Date range calendar',
+				} )
+			).toBeVisible();
+
+			const tableGrid = screen.getByRole( 'grid', {
+				name: monthNameFormatter( 'en-US' ).format( today ),
+			} );
+			expect( tableGrid ).toBeVisible();
+			expect( tableGrid ).toHaveAttribute(
+				'aria-multiselectable',
+				'true'
+			);
+
+			const todayButton = getDateButton( today );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /today/i );
+		} );
+
+		it( 'should show multiple months at once via the `numberOfMonths` prop', () => {
+			render( <DateRangeCalendar numberOfMonths={ 2 } /> );
+
+			const grids = screen.getAllByRole( 'grid' );
+			expect( grids ).toHaveLength( 2 );
+			expect( grids[ 0 ] ).toHaveAccessibleName(
+				monthNameFormatter( 'en-US' ).format( today )
+			);
+			expect( grids[ 1 ] ).toHaveAccessibleName(
+				monthNameFormatter( 'en-US' ).format( nextMonth )
+			);
+		} );
+	} );
+
+	describe( 'Date selection', () => {
+		it( 'should select an initial date range in uncontrolled mode via the `defaultSelected` prop', () => {
+			const dateRange = { from: today, to: tomorrow };
+			render( <DateRangeCalendar defaultSelected={ dateRange } /> );
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+		} );
+
+		it( 'should select an initial date range in controlled mode via the `selected` prop', () => {
+			const defaultRange = { from: yesterday, to: today };
+			const controlledRange = { from: today, to: tomorrow };
+
+			// Note: the `defaultSelected` prop is ignored when the `selected` prop is set.
+			render(
+				<DateRangeCalendar
+					defaultSelected={ defaultRange }
+					selected={ controlledRange }
+				/>
+			);
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+		} );
+
+		it( 'should have no date selected in uncontrolled mode when the `selected` prop is set to `undefined`', () => {
+			render( <DateRangeCalendar /> );
+
+			expect(
+				screen.queryByRole( 'gridcell', { selected: true } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: /selected/i } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should have no date selected in controlled mode when the `selected` prop is set to `null`', () => {
+			const defaultRange = { from: today, to: tomorrow };
+
+			// Note: the `defaultSelected` prop is ignored when the `selected` prop is set.
+			render(
+				<DateRangeCalendar
+					defaultSelected={ defaultRange }
+					selected={ null }
+				/>
+			);
+
+			expect(
+				screen.queryByRole( 'gridcell', { selected: true } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'button', { name: /selected/i } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should select a date in uncontrolled mode via the `defaultSelected` prop even if the date is disabled`', () => {
+			const defaultRange = { from: today, to: tomorrow };
+
+			render(
+				<DateRangeCalendar
+					defaultSelected={ defaultRange }
+					disabled={ defaultRange }
+				/>
+			);
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toBeDisabled();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeDisabled();
+		} );
+
+		it( 'should select a date in controlled mode via the `selected` prop even if the date is disabled`', () => {
+			const defaultRange = { from: today, to: tomorrow };
+
+			render(
+				<DateRangeCalendar
+					selected={ defaultRange }
+					disabled={ defaultRange }
+				/>
+			);
+
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+
+			const todayButton = getDateButton( today );
+			const tomorrowButton = getDateButton( tomorrow );
+			expect( todayButton ).toBeVisible();
+			expect( todayButton ).toBeDisabled();
+			expect( todayButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeVisible();
+			expect( tomorrowButton ).toHaveAccessibleName( /selected/i );
+			expect( tomorrowButton ).toBeDisabled();
+		} );
+
+		describe.each( [
+			[ 'Uncontrolled', UncontrolledDateRangeCalendar ],
+			[ 'Controlled', ControlledDateRangeCalendar ],
+		] )( '[`%s`]', ( _mode, Component ) => {
+			it( 'should start selecting a range when a date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				expect(
+					getDateCell( today, { selected: true } )
+				).toBeVisible();
+			} );
+
+			it( 'should complete a range selection when a second date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				const todayButton = getDateButton( today );
+				const tomorrowButton = getDateButton( tomorrow );
+
+				// First click - start range
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - complete range
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: tomorrow },
+					tomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: tomorrowButton,
+					} )
+				);
+
+				expect(
+					getDateCell( today, { selected: true } )
+				).toBeVisible();
+				expect(
+					getDateCell( tomorrow, { selected: true } )
+				).toBeVisible();
+			} );
+
+			it( 'should handle selecting dates in reverse order (end date first)', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				// First click on tomorrow
+				const tomorrowButton = getDateButton( tomorrow );
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					{ from: tomorrow, to: tomorrow },
+					tomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: tomorrowButton,
+					} )
+				);
+
+				// Second click on today (earlier date)
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					{ from: today, to: tomorrow },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				expect(
+					getDateCell( today, { selected: true } )
+				).toBeVisible();
+				expect(
+					getDateCell( tomorrow, { selected: true } )
+				).toBeVisible();
+			} );
+
+			it( 'should expand the current range when clicking a third date after the existing range end', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				// First click - start range
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - complete range
+				const tomorrowButton = getDateButton( tomorrow );
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					{ from: today, to: tomorrow },
+					tomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: tomorrowButton,
+					} )
+				);
+
+				// Third click - expand range end
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 3 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					3,
+					{ from: today, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+			} );
+
+			it( 'should update the current range when clicking a third date in between the existing range start and end', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				// First click - start range
+				const yesterdayButton = getDateButton( yesterday );
+				await user.click( yesterdayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					{ from: yesterday, to: yesterday },
+					yesterday,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: yesterdayButton,
+					} )
+				);
+
+				// Second click - complete range
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					{ from: yesterday, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+
+				// Third click - change range end
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 3 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					3,
+					{ from: yesterday, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+			} );
+
+			it( 'should expand the current range when clicking a third date before the existing range start', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } /> );
+
+				// First click - start range
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - complete range
+				const tomorrowButton = getDateButton( tomorrow );
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					{ from: today, to: tomorrow },
+					tomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: tomorrowButton,
+					} )
+				);
+
+				// Third click - expand range start
+				const yesterdayButton = getDateButton( yesterday );
+				await user.click( yesterdayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 3 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					3,
+					{ from: yesterday, to: tomorrow },
+					yesterday,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: yesterdayButton,
+					} )
+				);
+			} );
+
+			it( 'should not select a disabled date when a date button is clicked', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component onSelect={ onSelect } disabled={ tomorrow } />
+				);
+
+				const tomorrowButton = getDateButton( tomorrow );
+				await user.click( tomorrowButton );
+
+				expect( onSelect ).not.toHaveBeenCalled();
+				expect(
+					screen.queryByRole( 'button', { name: /selected/i } )
+				).not.toBeInTheDocument();
+			} );
+
+			it( 'should clear the range when defining a one-day range and clicking on the same date again', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				const dayAfterTomorrow = addDays( today, 2 );
+
+				render(
+					<Component
+						onSelect={ onSelect }
+						initialSelected={ {
+							from: yesterday,
+							to: dayAfterTomorrow,
+						} }
+					/>
+				);
+
+				// Third click - change range to have start and end on the same date
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					1,
+					{ from: dayAfterTomorrow, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+
+				// Fourth click - remove date range
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					undefined,
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+			} );
+
+			it( 'should not clear the range when clicking a selected date if the `required` prop is set to `true`', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				const dayAfterTomorrow = addDays( today, 2 );
+
+				render(
+					<Component
+						onSelect={ onSelect }
+						initialSelected={ {
+							from: yesterday,
+							to: dayAfterTomorrow,
+						} }
+						required
+					/>
+				);
+
+				// Third click - change range to have start and end on the same date
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					1,
+					{ from: dayAfterTomorrow, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+
+				// Fourth click - doesn't remove date range
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenNthCalledWith(
+					2,
+					{ from: dayAfterTomorrow, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+			} );
+
+			it( 'should complete a range selection even if there are disabled dates in the range', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component onSelect={ onSelect } disabled={ tomorrow } />
+				);
+
+				const todayButton = getDateButton( today );
+
+				// First click - start range
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - range "restarts" from newly clicked date, since
+				// there was a disabled date in between
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: dayAfterTomorrow },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+			} );
+
+			it( 'should not complete a range selection if the `excludeDisabled` prop is set to `true` and there is at least one disabled date in the range', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render(
+					<Component
+						onSelect={ onSelect }
+						disabled={ tomorrow }
+						excludeDisabled
+					/>
+				);
+
+				const todayButton = getDateButton( today );
+
+				// First click - start range
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: today },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - range "restarts" from newly clicked date, since
+				// there was a disabled date in between
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: dayAfterTomorrow, to: undefined },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+			} );
+
+			it( 'should not complete a range selection if the range has a duration of less than the value of the `min` prop', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } min={ 3 } /> );
+
+				const todayButton = getDateButton( today );
+
+				// First click - start range
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: undefined },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+
+				// Second click - range "restarts" from newly clicked date, since
+				// it was not long enough compared to the `min` prop
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: dayAfterTomorrow, to: undefined },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+
+				// Third click - range is correctly set, since it includes
+				// at least 3 days
+				const yesterdayButton = getDateButton( yesterday );
+				await user.click( yesterdayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 3 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: yesterday, to: dayAfterTomorrow },
+					yesterday,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: yesterdayButton,
+					} )
+				);
+			} );
+
+			it( 'should not complete a range selection if the range has a duration of more than the value of the `max` prop', async () => {
+				const user = setupUserEvent();
+				const onSelect = jest.fn();
+
+				render( <Component onSelect={ onSelect } max={ 2 } /> );
+
+				// First click - start range
+				const yesterdayButton = getDateButton( yesterday );
+				await user.click( yesterdayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 1 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: yesterday, to: yesterday },
+					yesterday,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: yesterdayButton,
+					} )
+				);
+
+				// Second click - range "restarts" from newly clicked date, since
+				// it was too long compared to the `max` prop
+				const dayAfterTomorrow = addDays( today, 2 );
+				const dayAfterTomorrowButton =
+					getDateButton( dayAfterTomorrow );
+				await user.click( dayAfterTomorrowButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 2 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: dayAfterTomorrow, to: undefined },
+					dayAfterTomorrow,
+					expect.objectContaining( { today: false } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: dayAfterTomorrowButton,
+					} )
+				);
+
+				// Third click - range is correctly set, since it includes
+				// at most 2 days
+				const todayButton = getDateButton( today );
+				await user.click( todayButton );
+
+				expect( onSelect ).toHaveBeenCalledTimes( 3 );
+				expect( onSelect ).toHaveBeenLastCalledWith(
+					{ from: today, to: dayAfterTomorrow },
+					today,
+					expect.objectContaining( { today: true } ),
+					expect.objectContaining( {
+						type: 'click',
+						target: todayButton,
+					} )
+				);
+			} );
+		} );
+	} );
+
+	describe( 'Month navigation', () => {
+		it( 'should select an initial month in uncontrolled mode via the `defaultMonth` prop', () => {
+			render( <DateRangeCalendar defaultMonth={ nextMonth } /> );
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+				} )
+			).toBeVisible();
+			expect( getDateCell( nextMonth ) ).toBeVisible();
+			expect( getDateButton( nextMonth ) ).toBeVisible();
+		} );
+
+		it( 'should select an initial month in controlled mode via the `month` prop', () => {
+			render( <DateRangeCalendar month={ nextMonth } /> );
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+				} )
+			).toBeVisible();
+			expect( getDateCell( nextMonth ) ).toBeVisible();
+			expect( getDateButton( nextMonth ) ).toBeVisible();
+		} );
+
+		describe.each( [
+			[ 'Uncontrolled', UncontrolledDateRangeCalendar ],
+			[ 'Controlled', ControlledDateRangeCalendar ],
+		] )( '[`%s`]', ( _mode, Component ) => {
+			it( 'should navigate to the previous and next months when the previous and next month buttons are clicked', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render( <Component onMonthChange={ onMonthChange } /> );
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+				await user.click( prevButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( prevMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( prevMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevMonth ) ).toBeVisible();
+				expect( getDateButton( prevMonth ) ).toBeVisible();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 2 );
+				expect( onMonthChange ).toHaveBeenCalledWith( currentMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							currentMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( currentMonth ) ).toBeVisible();
+				expect( getDateButton( currentMonth ) ).toBeVisible();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 3 );
+				expect( onMonthChange ).toHaveBeenCalledWith( nextMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextMonth ) ).toBeVisible();
+				expect( getDateButton( nextMonth ) ).toBeVisible();
+			} );
+
+			it( 'should not navigate to a month that is before the `startMonth` prop', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render(
+					<Component
+						startMonth={ nextMonth }
+						onMonthChange={ onMonthChange }
+					/>
+				);
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( nextMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextMonth ) ).toBeVisible();
+				expect( getDateButton( nextMonth ) ).toBeVisible();
+
+				expect( prevButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+				await user.click( prevButton );
+
+				expect( onMonthChange ).not.toHaveBeenCalled();
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( nextNextMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							nextNextMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( nextNextMonth ) ).toBeVisible();
+				expect( getDateButton( nextNextMonth ) ).toBeVisible();
+
+				expect( prevButton ).not.toHaveAttribute( 'aria-disabled' );
+			} );
+
+			it( 'should not navigate to a month that is after the `endMonth` prop', async () => {
+				const user = setupUserEvent();
+				const onMonthChange = jest.fn();
+
+				render(
+					<Component
+						endMonth={ prevMonth }
+						onMonthChange={ onMonthChange }
+					/>
+				);
+
+				const prevButton = screen.getByRole( 'button', {
+					name: /previous month/i,
+				} );
+				const nextButton = screen.getByRole( 'button', {
+					name: /next month/i,
+				} );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format( prevMonth ),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevMonth ) ).toBeVisible();
+				expect( getDateButton( prevMonth ) ).toBeVisible();
+
+				expect( nextButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+				await user.click( nextButton );
+
+				expect( onMonthChange ).not.toHaveBeenCalled();
+
+				await user.click( prevButton );
+
+				expect( onMonthChange ).toHaveBeenCalledTimes( 1 );
+				expect( onMonthChange ).toHaveBeenCalledWith( prevPrevMonth );
+
+				expect(
+					screen.getByRole( 'grid', {
+						name: monthNameFormatter( 'en-US' ).format(
+							prevPrevMonth
+						),
+					} )
+				).toBeVisible();
+				expect( getDateCell( prevPrevMonth ) ).toBeVisible();
+				expect( getDateButton( prevPrevMonth ) ).toBeVisible();
+
+				expect( nextButton ).not.toHaveAttribute( 'aria-disabled' );
+			} );
+		} );
+	} );
+
+	describe( 'Keyboard focus and navigation', () => {
+		it( 'should auto-focus the selected day when the `autoFocus` prop is set to `true`', async () => {
+			render(
+				<DateRangeCalendar
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					defaultSelected={ { from: today, to: tomorrow } }
+				/>
+			);
+			expect( getDateButton( today ) ).toHaveFocus();
+		} );
+
+		it( "should auto-focus today's date if there is not selected date when the `autoFocus` prop is set to `true`", async () => {
+			// eslint-disable-next-line jsx-a11y/no-autofocus
+			render( <DateRangeCalendar autoFocus /> );
+			expect( getDateButton( today ) ).toHaveFocus();
+		} );
+
+		it( 'should focus each arrow as a tab stop, but treat the grid as a 2d composite widget', async () => {
+			const user = setupUserEvent();
+			render( <DateRangeCalendar /> );
+
+			// Focus previous month button
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /previous month/i } )
+			).toHaveFocus();
+
+			// Focus next month button
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /next month/i } )
+			).toHaveFocus();
+
+			// Focus today button
+			await user.tab();
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			// Focus next day
+			await user.keyboard( '{ArrowRight}' );
+			expect( getDateButton( addDays( today, 1 ) ) ).toHaveFocus();
+
+			// Focus to next week
+			await user.keyboard( '{ArrowDown}' );
+			expect( getDateButton( addDays( today, 8 ) ) ).toHaveFocus();
+
+			// Focus previous day
+			await user.keyboard( '{ArrowLeft}' );
+			expect( getDateButton( addDays( today, 7 ) ) ).toHaveFocus();
+
+			// Focus previous week
+			await user.keyboard( '{ArrowUp}' );
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			// Focus first day of week
+			await user.keyboard( '{Home}' );
+			expect( getDateButton( startOfWeek( today ) ) ).toHaveFocus();
+
+			// Focus last day of week
+			await user.keyboard( '{End}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+
+			// Focus previous month
+			await user.keyboard( '{PageUp}' );
+			expect(
+				getDateButton( subMonths( endOfWeek( today ), 1 ) )
+			).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						subMonths( endOfWeek( today ), 1 )
+					),
+				} )
+			).toBeVisible();
+
+			// Navigate to next month
+			await user.keyboard( '{PageDown}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						endOfWeek( today )
+					),
+				} )
+			).toBeVisible();
+
+			// Focus previous year
+			await user.keyboard( '{Shift>}{PageUp}{/Shift}' );
+			expect(
+				getDateButton( subYears( endOfWeek( today ), 1 ) )
+			).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						subYears( endOfWeek( today ), 1 )
+					),
+				} )
+			).toBeVisible();
+
+			// Focus next year
+			await user.keyboard( '{Shift>}{PageDown}{/Shift}' );
+			expect( getDateButton( endOfWeek( today ) ) ).toHaveFocus();
+
+			expect(
+				screen.getByRole( 'grid', {
+					name: monthNameFormatter( 'en-US' ).format(
+						endOfWeek( today )
+					),
+				} )
+			).toBeVisible();
+		} );
+
+		// Note: the following test is not testing advanced keyboard interactions
+		// (pageUp, pageDown, shift+pageUp, shift+pageDown, home, end)
+		it( 'should not focus disabled dates and skip over them when navigating using arrow keys', async () => {
+			const user = setupUserEvent();
+
+			render(
+				<DateRangeCalendar
+					disabled={ [
+						tomorrow,
+						addWeeks( addDays( tomorrow, 1 ), 1 ),
+						addWeeks( today, 2 ),
+						addWeeks( tomorrow, 2 ),
+					] }
+				/>
+			);
+
+			await user.tab();
+			await user.tab();
+			await user.tab();
+			expect( getDateButton( today ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowRight}' );
+			expect( getDateButton( addDays( tomorrow, 1 ) ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowDown}' );
+			expect(
+				getDateButton( addWeeks( addDays( tomorrow, 1 ), 2 ) )
+			).toHaveFocus();
+
+			await user.keyboard( '{ArrowLeft}' );
+			expect( getDateButton( addWeeks( yesterday, 2 ) ) ).toHaveFocus();
+
+			await user.keyboard( '{ArrowUp}' );
+			expect( getDateButton( addWeeks( yesterday, 1 ) ) ).toHaveFocus();
+		} );
+
+		it( 'should focus the selected date when tabbing into the calendar', async () => {
+			const user = setupUserEvent();
+			render(
+				<DateRangeCalendar selected={ { from: today, to: tomorrow } } />
+			);
+
+			// Tab to the calendar grid
+			await user.tab();
+			await user.tab();
+			await user.tab();
+
+			expect( getDateButton( today ) ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'Disabled states', () => {
+		it( 'should support disabling all dates via the `disabled` prop', async () => {
+			const user = setupUserEvent();
+
+			render( <DateRangeCalendar disabled /> );
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+
+			await user.click(
+				screen.getByRole( 'button', { name: /previous/i } )
+			);
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+
+			await user.click( screen.getByRole( 'button', { name: /next/i } ) );
+			await user.click( screen.getByRole( 'button', { name: /next/i } ) );
+
+			within( screen.getByRole( 'grid' ) )
+				.getAllByRole( 'button' )
+				.forEach( ( button ) => {
+					expect( button ).toBeDisabled();
+				} );
+		} );
+
+		it( 'should support disabling single dates via the `disabled` prop', async () => {
+			render( <DateRangeCalendar disabled={ tomorrow } /> );
+
+			expect( getDateButton( tomorrow ) ).toBeDisabled();
+		} );
+
+		it( 'should support passing a custom function via the `disabled` prop', async () => {
+			const primeNumbers = [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ];
+			render(
+				<DateRangeCalendar
+					disabled={ ( date ) =>
+						primeNumbers.includes( date.getDate() )
+					}
+				/>
+			);
+
+			for ( const date of primeNumbers ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should support disabling all dates before a certain date via the `disabled` prop', async () => {
+			render( <DateRangeCalendar disabled={ { before: today } } /> );
+
+			for ( let date = 1; date < today.getDate(); date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( today ) ).toBeEnabled();
+		} );
+
+		it( 'should support disabling all dates after a certain date via the `disabled` prop', async () => {
+			render( <DateRangeCalendar disabled={ { after: today } } /> );
+
+			for ( let date = today.getDate() + 1; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( today ) ).toBeEnabled();
+		} );
+
+		it( 'should support disabling all dates before a certain date and after a certain date via the `disabled` prop', async () => {
+			render(
+				<DateRangeCalendar
+					disabled={ {
+						before: yesterday,
+						after: addDays( today, 1 ),
+					} }
+				/>
+			);
+
+			let date;
+
+			for ( date = 1; date < today.getDate() - 1; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+			expect( getDateButton( yesterday ) ).toBeEnabled();
+			expect( getDateButton( today ) ).toBeEnabled();
+			expect( getDateButton( addDays( today, 1 ) ) ).toBeEnabled();
+
+			for ( date = today.getDate() + 2; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should support disabling all dates within a certain date range via the `disabled` prop', async () => {
+			render(
+				<DateRangeCalendar
+					disabled={ { from: yesterday, to: addDays( today, 1 ) } }
+				/>
+			);
+
+			let date;
+
+			for ( date = 1; date < today.getDate() - 1; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeEnabled();
+			}
+			expect( getDateButton( yesterday ) ).toBeDisabled();
+			expect( getDateButton( today ) ).toBeDisabled();
+			expect( getDateButton( addDays( today, 1 ) ) ).toBeDisabled();
+
+			for ( date = today.getDate() + 2; date < 32; date++ ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeEnabled();
+			}
+		} );
+
+		it( 'should support disabling specific days of the week via the `disabled` prop', async () => {
+			const weekendsInMay = [ 3, 4, 10, 11, 17, 18, 24, 25, 31 ];
+			render(
+				<DateRangeCalendar disabled={ { dayOfWeek: [ 0, 6 ] } } />
+			);
+
+			for ( const date of weekendsInMay ) {
+				expect(
+					getDateButton(
+						new Date( today.getFullYear(), today.getMonth(), date )
+					)
+				).toBeDisabled();
+			}
+		} );
+
+		it( 'should disable the previous and next months buttons if the `disableNavigation` is set to `true`', async () => {
+			const user = setupUserEvent();
+
+			render( <DateRangeCalendar disableNavigation /> );
+
+			expect(
+				screen.getByRole( 'button', { name: /previous month/i } )
+			).toHaveAttribute( 'aria-disabled', 'true' );
+			expect(
+				screen.getByRole( 'button', { name: /next month/i } )
+			).toHaveAttribute( 'aria-disabled', 'true' );
+
+			await user.tab();
+			expect(
+				screen.getByRole( 'button', { name: /today/i } )
+			).toHaveFocus();
+		} );
+	} );
+
+	// Note: we're not testing localization of strings. We're only testing
+	// that the date formatting, computed dir, and calendar format are correct.
+	describe( 'Localization', () => {
+		it( 'should localize the calendar based on the `locale` prop', async () => {
+			const user = setupUserEvent();
+
+			render( <DateRangeCalendar locale={ ar } /> );
+
+			// Check computed writing direction
+			expect(
+				screen.getByRole( 'application', {
+					name: 'Date range calendar',
+				} )
+			).toHaveAttribute( 'dir', 'rtl' );
+
+			// Check month name
+			const grid = screen.getByRole( 'grid', {
+				name: monthNameFormatter( 'ar' ).format( today ),
+			} );
+			expect( grid ).toBeVisible();
+
+			// Check today button
+			expect( getDateButton( today, {}, 'ar' ) ).toHaveAccessibleName(
+				/today/i
+			);
+
+			await user.tab();
+			await user.tab();
+			await user.tab();
+			expect( getDateButton( today, {}, 'ar' ) ).toHaveFocus();
+
+			await user.keyboard( '{Home}' );
+			expect(
+				getDateButton( startOfWeek( today, { locale: ar } ), {}, 'ar' )
+			).toHaveFocus();
+		} );
+
+		it( 'should support timezones according to the `timeZone` prop', async () => {
+			const user = setupUserEvent();
+			const onSelect = jest.fn();
+
+			render(
+				<DateRangeCalendar
+					timeZone="Asia/Tokyo"
+					onSelect={ onSelect }
+				/>
+			);
+
+			// For someone in Tokyo, the current time simulated in the test
+			// (ie. 20:00 UTC) is the next day.
+			expect( getDateButton( tomorrow ) ).toHaveAccessibleName(
+				/today/i
+			);
+
+			// Select tomorrow's button (which is today in Tokyo)
+			const tomorrowButton = getDateButton( tomorrow );
+			await user.click( tomorrowButton );
+
+			const tomorrowFromTokyoTimezone = addHours(
+				tomorrow,
+				new TZDate( tomorrow, 'Asia/Tokyo' ).getTimezoneOffset() / 60
+			);
+
+			expect( onSelect ).toHaveBeenCalledTimes( 1 );
+			expect( onSelect ).toHaveBeenCalledWith(
+				{
+					from: tomorrowFromTokyoTimezone,
+					to: tomorrowFromTokyoTimezone,
+				},
+				tomorrowFromTokyoTimezone,
+				expect.objectContaining( { today: true } ),
+				expect.objectContaining( {
+					type: 'click',
+					target: tomorrowButton,
+				} )
+			);
+		} );
+
+		it( 'should handle timezoned dates and convert them to the calendar timezone', async () => {
+			// Still the same time from UTC's POV, just expressed in Tokyo time.
+			const tomorrowAtMidnightInTokyoTZ = new TZDate(
+				tomorrow,
+				'Asia/Tokyo'
+			);
+			const dayAfterTomorrowInTokyoTZ = new TZDate(
+				addDays( tomorrow, 1 ),
+				'Asia/Tokyo'
+			);
+			const timezoneRange = {
+				from: tomorrowAtMidnightInTokyoTZ,
+				to: dayAfterTomorrowInTokyoTZ,
+			};
+
+			render(
+				<DateRangeCalendar
+					defaultSelected={ timezoneRange }
+					// Note: using "Etc/GMT+2" instead of "-02:00" because support for raw offsets was introduced in Node v22 (while currently the repository still targets Node v20).
+					timeZone="Etc/GMT+2"
+				/>
+			);
+
+			// Changing the calendar timezone to UTC-2 makes the dates become
+			// earlier by 1 day (from midnight to 10pm the previous day).
+			expect( getDateCell( today, { selected: true } ) ).toBeVisible();
+			expect( getDateCell( tomorrow, { selected: true } ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'usePreviewRange', () => {
+		const previewToday = new Date( '2024-03-15' );
+		const previewTomorrow = addDays( previewToday, 1 );
+		const previewYesterday = subDays( previewToday, 1 );
+		const previewNextWeek = addDays( previewToday, 7 );
+
+		it( 'should return undefined when there is no hovered date', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: previewToday, to: previewTomorrow },
+					hoveredDate: undefined,
+				} )
+			);
+
+			expect( result.current ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when there is no selected date', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: undefined,
+					hoveredDate: previewToday,
+				} )
+			);
+
+			expect( result.current ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when there is no selected start date', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: undefined, to: previewTomorrow },
+					hoveredDate: previewToday,
+				} )
+			);
+
+			expect( result.current ).toBeUndefined();
+		} );
+
+		it( 'should show preview when hovering before selected range', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: previewToday, to: previewTomorrow },
+					hoveredDate: previewYesterday,
+				} )
+			);
+
+			expect( result.current ).toEqual( {
+				from: previewYesterday,
+				to: previewToday,
+			} );
+		} );
+
+		it( 'should show preview when hovering between selected range dates', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: previewYesterday, to: previewTomorrow },
+					hoveredDate: previewToday,
+				} )
+			);
+
+			expect( result.current ).toEqual( {
+				from: previewYesterday,
+				to: previewToday,
+			} );
+		} );
+
+		it( 'should show preview when hovering after selected range', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: previewYesterday, to: previewToday },
+					hoveredDate: previewTomorrow,
+				} )
+			);
+
+			expect( result.current ).toEqual( {
+				from: previewToday,
+				to: previewTomorrow,
+			} );
+		} );
+
+		it( 'should show preview when hovering after selected range with no end date', () => {
+			const { result } = renderHook( () =>
+				usePreviewRange( {
+					selected: { from: previewToday },
+					hoveredDate: previewTomorrow,
+				} )
+			);
+
+			expect( result.current ).toEqual( {
+				from: previewToday,
+				to: previewTomorrow,
+			} );
+		} );
+
+		describe( 'min range constraint', () => {
+			it( 'should collapse preview to single date when range is less than min', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewTomorrow,
+						min: 3,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewTomorrow,
+					to: previewTomorrow,
+				} );
+			} );
+
+			it( 'should allow preview when range meets min requirement', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewNextWeek,
+						min: 3,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewToday,
+					to: previewNextWeek,
+				} );
+			} );
+		} );
+
+		describe( 'max range constraint', () => {
+			it( 'should collapse preview to single date when range exceeds max', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewNextWeek,
+						max: 3,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewNextWeek,
+					to: previewNextWeek,
+				} );
+			} );
+
+			it( 'should allow preview when range meets max requirement', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewTomorrow,
+						max: 3,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewToday,
+					to: previewTomorrow,
+				} );
+			} );
+		} );
+
+		describe( 'disabled dates', () => {
+			it( 'should collapse preview to single date when range contains disabled dates and excludeDisabled is true', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewNextWeek,
+						disabled: [ previewTomorrow ],
+						excludeDisabled: true,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewNextWeek,
+					to: previewNextWeek,
+				} );
+			} );
+
+			it( 'should allow preview when range contains disabled dates but excludeDisabled is false', () => {
+				const { result } = renderHook( () =>
+					usePreviewRange( {
+						selected: { from: previewToday },
+						hoveredDate: previewNextWeek,
+						disabled: [ previewTomorrow ],
+						excludeDisabled: false,
+					} )
+				);
+
+				expect( result.current ).toEqual( {
+					from: previewToday,
+					to: previewNextWeek,
+				} );
+			} );
+		} );
+	} );
+} );
diff --git a/packages/components/src/calendar/types.ts b/packages/components/src/calendar/types.ts
new file mode 100644
index 00000000000000..d347b12800534c
--- /dev/null
+++ b/packages/components/src/calendar/types.ts
@@ -0,0 +1,342 @@
+/**
+ * External dependencies
+ */
+import type { Locale } from 'date-fns';
+import type * as React from 'react';
+
+/**
+ * Represents the modifiers that match a specific day in the calendar.
+ * @example
+ *   const modifiers: Modifiers = {
+ *   today: false, // the day is not today
+ *   selected: true, // the day is selected
+ *   disabled: false, // the day is not disabled
+ *   outside: false, // the day is not outside the month
+ *   focused: false, // the day is not focused
+ *
+ *   weekend: false // custom modifier example for matching a weekend
+ *   booked: true // custom modifier example for matching a booked day
+ *   available: false // custom modifier example for matching an available day
+ *   };
+ */
+export type Modifiers = Record< string, boolean >;
+
+/**
+ * A value or a function that matches a specific day.
+ * @example
+ *   // will always match the day
+ *   const booleanMatcher: Matcher = true;
+ *
+ *   // will match the today's date
+ *   const dateMatcher: Matcher = new Date();
+ *
+ *   // will match the days in the array
+ *   const arrayMatcher: Matcher = [
+ *     new Date(2019, 1, 2),
+ *     new Date(2019, 1, 4)
+ *   ];
+ *
+ *   // will match days after the 2nd of February 2019
+ *   const afterMatcher: DateAfter = { after: new Date(2019, 1, 2) };
+ *
+ *   // will match days before the 2nd of February 2019 }
+ *   const beforeMatcher: DateBefore = { before: new Date(2019, 1, 2) };
+ *
+ *   // will match Sundays
+ *   const dayOfWeekMatcher: DayOfWeek = {
+ *     dayOfWeek: 0
+ *   };
+ *
+ *   // will match the included days, except the two dates
+ *   const intervalMatcher: DateInterval = {
+ *     after: new Date(2019, 1, 2),
+ *     before: new Date(2019, 1, 5)
+ *   };
+ *
+ *   // will match the included days, including the two dates
+ *   const rangeMatcher: DateRange = {
+ *     from: new Date(2019, 1, 2),
+ *     to: new Date(2019, 1, 5)
+ *   };
+ *
+ *   // will match when the function return true
+ *   const functionMatcher: Matcher = (day: Date) => {
+ *     return day.getMonth() === 2; // match when month is March
+ *   };
+ */
+type Matcher =
+	| boolean
+	| ( ( date: Date ) => boolean )
+	| Date
+	| Date[]
+	| DateRange
+	| DateBefore
+	| DateAfter
+	| DateInterval
+	| DayOfWeek;
+/**
+ * Match a day falling after the specified date, with the date not included.
+ * @example
+ *   // Match days after the 2nd of February 2019
+ *   const matcher: DateAfter = { after: new Date(2019, 1, 2) };
+ */
+type DateAfter = {
+	after: Date;
+};
+/**
+ * Match a day falling before the specified date, with the date not included.
+ * @example
+ *   // Match days before the 2nd of February 2019
+ *   const matcher: DateBefore = { before: new Date(2019, 1, 2) };
+ */
+type DateBefore = {
+	before: Date;
+};
+/**
+ * An interval of dates. Differently from `DateRange`, the range ends here
+ * are not included.
+ * @example
+ *   // Match the days between the 2nd and the 5th of February 2019
+ *   const matcher: DateInterval = {
+ *     after: new Date(2019, 1, 2),
+ *     before: new Date(2019, 1, 5)
+ *   };
+ */
+type DateInterval = {
+	before: Date;
+	after: Date;
+};
+/**
+ * A range of dates. The range can be open. Differently from
+ * `DateInterval`, the range ends here are included.
+ * @example
+ *   // Match the days between the 2nd and the 5th of February 2019
+ *   const matcher: DateRange = {
+ *     from: new Date(2019, 1, 2),
+ *     to: new Date(2019, 1, 5)
+ *   };
+ */
+export type DateRange = {
+	from: Date | undefined;
+	to?: Date | undefined;
+};
+/**
+ * Match dates being one of the specified days of the week (`0-6`, where `0` is
+ * Sunday).
+ * @example
+ *   // Match Sundays
+ *   const matcher: DayOfWeek = { dayOfWeek: 0 };
+ *   // Match weekends
+ *   const matcher: DayOfWeek = { dayOfWeek: [0, 6] };
+ */
+type DayOfWeek = {
+	dayOfWeek: number | number[];
+};
+
+/**
+ * Shared handler type for `onSelect` callback when a selection mode is set.
+ * @example
+ *   const handleSelect: OnSelectHandler<Date> = (
+ *     selected,
+ *     triggerDate,
+ *     modifiers,
+ *     e
+ *   ) => {
+ *     console.log( "Selected:", selected );
+ *     console.log( "Triggered by:", triggerDate );
+ *   };
+ * @template T - The type of the selected item.
+ * @callback OnSelectHandler
+ * @param {T}                                      selected    - The selected item after the event.
+ * @param {Date}                                   triggerDate - The date when the event was triggered. This is
+ *                                                             typically the day clicked or interacted with.
+ * @param {Modifiers}                              modifiers   - The modifiers associated with the event.
+ * @param {React.MouseEvent | React.KeyboardEvent} e           - The event object.
+ */
+export type OnSelectHandler< T > = (
+	selected: T,
+	triggerDate: Date,
+	modifiers: Modifiers,
+	e: React.MouseEvent | React.KeyboardEvent
+) => void;
+
+export interface BaseProps
+	extends Omit<
+		React.HTMLAttributes< HTMLDivElement >,
+		'onSelect' | 'defaultValue'
+	> {
+	/**
+	 * Whether the selection is required.
+	 * When `true`, there always needs to be a date selected.
+	 * @default false
+	 */
+	required?: boolean;
+
+	/**
+	 * The initial month to show in the calendar view (uncontrolled).
+	 * @default The current month
+	 */
+	defaultMonth?: Date;
+	/**
+	 * The month displayed in the calendar view (controlled). Use together with
+	 * `onMonthChange` to change the month programmatically.
+	 */
+	month?: Date;
+	/**
+	 * The number of months displayed at once.
+	 * @default 1
+	 */
+	numberOfMonths?: number;
+	/**
+	 * The earliest month to start the month navigation.
+	 */
+	startMonth?: Date;
+	/**
+	 * The latest month to end the month navigation.
+	 */
+	endMonth?: Date;
+	/**
+	 * Focus the first selected day (if set) or today's date (if not disabled).
+	 *
+	 * Use this prop when you need to focus the calendar after a user action
+	 * (e.g. opening the dialog with the calendar).
+	 */
+	autoFocus?: boolean;
+	/**
+	 * Specify which days are disabled. Using `true` will disable all dates.
+	 */
+	disabled?: Matcher | Matcher[] | undefined;
+	/**
+	 * Disable the navigation buttons.
+	 */
+	disableNavigation?: boolean;
+	/**
+	 * Use custom labels, useful for translating the component.
+	 *
+	 * For a correct localized experience, consumers should make sure the locale
+	 * used for the translated labels and `locale` prop are consistent.
+	 */
+	labels?: {
+		/**
+		 * The label for the navigation toolbar.
+		 * @default ""
+		 */
+		labelNav?: () => string;
+		/**
+		 * The label for the month grid.
+		 * @default "LLLL y" (e.g. "November 2022")
+		 */
+		labelGrid?: ( date: Date ) => string;
+		/**
+		 * The label for the gridcell, when the calendar is not interactive.
+		 * @default The formatted date.
+		 */
+		labelGridcell?: ( date: Date, modifiers?: Modifiers ) => string;
+		/**
+		 * The label for the "next month" button.
+		 * @default "Go to the Next Month"
+		 */
+		labelNext?: ( month: Date | undefined ) => string;
+		/**
+		 * The label for the "previous month" button.
+		 * @default "Go to the Previous Month"
+		 */
+		labelPrevious?: ( month: Date | undefined ) => string;
+		/**
+		 * The label for the day button.
+		 * @default The formatted date.
+		 */
+		labelDayButton?: ( date: Date, modifiers?: Modifiers ) => string;
+		/**
+		 * The label for the weekday.
+		 * @default ( date: Date ) => "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday"
+		 */
+		labelWeekday?: ( date: Date ) => string;
+	};
+
+	/**
+	 * The locale object used to localize dates. Pass a locale from
+	 * `@date-fns/locale` to localize the calendar.
+	 *
+	 * For a correct localized experience, consumers should make sure the locale
+	 * used for the translated labels and `locale` prop are consistent.
+	 * @see https://github.com/date-fns/date-fns/tree/main/src/locale for a list of the supported locales
+	 * @default The `enUS` locale from `@date-fns/locale`
+	 */
+	locale?: Locale;
+	/**
+	 * The index of the first day of the week (0 - Sunday). Overrides the locale's
+	 * one.
+	 * @default Based on the `locale` prop
+	 */
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+	/**
+	 * Event fired when the user navigates between months.
+	 */
+	onMonthChange?: ( month: Date ) => void;
+	/**
+	 * The time zone (IANA or UTC offset) to use in the calendar.
+	 *
+	 * See
+	 * [Wikipedia](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
+	 * for the possible values.
+	 *
+	 * When working with time zones, use the `TZDate` object exported by this
+	 * package instead of the native `Date` object.
+	 * @example
+	 *   import { DateCalendar, TZDate } from "@wordpress/components";
+	 *
+	 *   export function WithTimeZone() {
+	 *     const timeZone = "America/New_York";
+	 *     const [ selected, setSelected ] = useState< Date | undefined >(
+	 *       new TZDate( 2024, 12, 10, timeZone ) // Use `TZDate` instead of `Date`
+	 *     );
+	 *     return (
+	 *       <DateCalendar
+	 *         timeZone={ timeZone }
+	 *         selected={ selected }
+	 *         onSelect={ setSelected }
+	 *     />
+	 *   );
+	 * }
+	 */
+	timeZone?: string;
+	/**
+	 * The role attribute to add to the container element.
+	 * @default 'application'
+	 */
+	role?: 'application' | 'dialog' | undefined;
+}
+
+interface SingleProps {
+	/** The selected date. */
+	selected?: Date | undefined | null;
+	/** Event handler when a day is selected. */
+	onSelect?: OnSelectHandler< Date | undefined >;
+	/** The default selected date (for uncontrolled usage). */
+	defaultSelected?: Date;
+}
+
+interface RangeProps {
+	/**
+	 * When `true`, the range will reset when including a disabled day.
+	 */
+	excludeDisabled?: boolean;
+	/**
+	 * The minimum number of nights to include in the range.
+	 */
+	min?: number;
+	/**
+	 * The maximum number of nights to include in the range.
+	 */
+	max?: number;
+	/** The selected range. */
+	selected?: DateRange | undefined | null;
+	/** Event handler when the selection changes. */
+	onSelect?: OnSelectHandler< DateRange | undefined >;
+	/** The default selected range (for uncontrolled usage). */
+	defaultSelected?: DateRange;
+}
+
+export type DateCalendarProps = BaseProps & SingleProps;
+export type DateRangeCalendarProps = BaseProps & RangeProps;
diff --git a/packages/components/src/calendar/utils/constants.ts b/packages/components/src/calendar/utils/constants.ts
new file mode 100644
index 00000000000000..10ab9149f6d632
--- /dev/null
+++ b/packages/components/src/calendar/utils/constants.ts
@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import { Day } from './day-cell';
+
+const CLASSNAMES = {
+	root: 'components-calendar',
+	day: 'components-calendar__day',
+	day_button: 'components-calendar__day-button',
+	caption_label: 'components-calendar__caption-label',
+	button_next: 'components-calendar__button-next',
+	button_previous: 'components-calendar__button-previous',
+	chevron: 'components-calendar__chevron',
+	nav: 'components-calendar__nav',
+	month_caption: 'components-calendar__month-caption',
+	months: 'components-calendar__months',
+	month_grid: 'components-calendar__month-grid',
+	weekday: 'components-calendar__weekday',
+	today: 'components-calendar__day--today',
+	selected: 'components-calendar__day--selected',
+	disabled: 'components-calendar__day--disabled',
+	hidden: 'components-calendar__day--hidden',
+	range_start: 'components-calendar__range-start',
+	range_end: 'components-calendar__range-end',
+	range_middle: 'components-calendar__range-middle',
+	weeks_before_enter: 'components-calendar__weeks-before-enter',
+	weeks_before_exit: 'components-calendar__weeks-before-exit',
+	weeks_after_enter: 'components-calendar__weeks-after-enter',
+	weeks_after_exit: 'components-calendar__weeks-after-exit',
+	caption_after_enter: 'components-calendar__caption-after-enter',
+	caption_after_exit: 'components-calendar__caption-after-exit',
+	caption_before_enter: 'components-calendar__caption-before-enter',
+	caption_before_exit: 'components-calendar__caption-before-exit',
+};
+export const MODIFIER_CLASSNAMES = {
+	preview: 'components-calendar__day--preview',
+	preview_start: 'components-calendar__day--preview-start',
+	preview_end: 'components-calendar__day--preview-end',
+};
+
+export const COMMON_PROPS = {
+	animate: true,
+	// Only show days in the current month
+	showOutsideDays: false,
+	// Hide week number column
+	showWeekNumber: false,
+	// Show weekdays row
+	hideWeekdays: false,
+	// Month and year caption are not interactive
+	captionLayout: 'label',
+	// Show a variable number of weeks depending on the month
+	fixedWeeks: false,
+	// Show navigation buttons
+	hideNavigation: false,
+	// Class names
+	classNames: CLASSNAMES,
+	// Default role
+	role: 'application',
+	components: {
+		Day,
+	},
+} as const;
diff --git a/packages/components/src/calendar/utils/day-cell.tsx b/packages/components/src/calendar/utils/day-cell.tsx
new file mode 100644
index 00000000000000..fc0e9ead7083d5
--- /dev/null
+++ b/packages/components/src/calendar/utils/day-cell.tsx
@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import type { CalendarDay } from 'react-day-picker';
+/**
+ * Internal dependencies
+ */
+import type { Modifiers } from '../types';
+
+/**
+ * The dash array and offset are calculated by:
+ * - measuring the path length (eg 92,28384)
+ * - establishing how many segments should the path be split into (eg. 24)
+ * - dividing the path length by the number of segments (eg. 92,28384 / 24 = 3,84516)
+ * - playing with the dash offset to make sure the dashes look good on rounded corners
+ */
+
+/**
+ * Dashed rectangle. The dash array and offset are chosen to make sure dashes
+ * look good on rounded corners and have similar metrics to the other dash
+ * preview shapes.
+ */
+const PreviewDashStartAndEnd = () => {
+	return (
+		<svg
+			viewBox="0 0 32 32"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			stroke="currentColor"
+			strokeDasharray="3.7677"
+			strokeDashoffset="3.2"
+			strokeWidth="1"
+		>
+			<path d="M29.5,0.5 h-27 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h27 a2,2 0 0 0 2,-2 v-27 a2,2 0 0 0 -2,-2" />
+		</svg>
+	);
+};
+
+/**
+ * Dashed top, left, and bottom sides, with rounded corners. The dash array and
+ * offset are chosen to make sure that multiple days in a row show a seamless
+ * dashed border, and the dashes look good on rounded corners.
+ */
+const PreviewDashStart = () => {
+	return (
+		<svg
+			viewBox="0 0 32 32"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			stroke="currentColor"
+			strokeDasharray="3.84516"
+			strokeDashoffset="1.9226"
+			strokeWidth="1"
+		>
+			<path d="M32,0.5 h-29.5 a2,2 0 0 0 -2,2 v27 a2,2 0 0 0 2,2 h30" />
+		</svg>
+	);
+};
+/**
+ * Dashed top and bottom sides. The dash array and offset are chosen
+ * to make sure that multiple days in a row show a seamless dashed border.
+ */
+const PreviewDashMiddle = () => {
+	return (
+		<svg
+			viewBox="0 0 32 32"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			stroke="currentColor"
+			strokeDasharray="3.9 4"
+			strokeDashoffset="2"
+			strokeWidth="1"
+		>
+			<line x1="0" y1="0.5" x2="100" y2="0.5" />
+			<line x1="0" y1="31.5" x2="100" y2="31.5" />
+		</svg>
+	);
+};
+/**
+ * Dashed top, right, and bottom sides, with rounded corners. The dash array and
+ * offset are chosen to make sure that multiple days in a row show a seamless
+ * dashed border, and the dashes look good on rounded corners.
+ */
+const PreviewDashEnd = () => {
+	return (
+		<svg
+			viewBox="0 0 32 32"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			stroke="currentColor"
+			strokeDasharray="3.84516"
+			strokeDashoffset="1.9226"
+			strokeWidth="1"
+		>
+			<path d="M0,0.5 h29.5 a2,2 0 0 1 2,2 v27 a2,2 0 0 1 -2,2 h-29.5" />
+		</svg>
+	);
+};
+
+/**
+ * Render a grid cell for a specific day in the calendar.
+ *
+ * Handles interaction and focus for the day.
+ * @see https://daypicker.dev/guides/custom-components
+ */
+export function Day(
+	props: {
+		/** The day to render. */
+		day: CalendarDay;
+		/** The modifiers to apply to the day. */
+		modifiers: Modifiers;
+	} & React.HTMLAttributes< HTMLDivElement >
+) {
+	const { day, modifiers, children, ...tdProps } = props;
+
+	let PreviewDash;
+	if ( modifiers.preview_start && modifiers.preview_end ) {
+		PreviewDash = PreviewDashStartAndEnd;
+	} else if ( modifiers.preview_start ) {
+		PreviewDash = PreviewDashStart;
+	} else if ( modifiers.preview_end ) {
+		PreviewDash = PreviewDashEnd;
+	} else if ( modifiers.preview ) {
+		PreviewDash = PreviewDashMiddle;
+	}
+
+	return (
+		<td { ...tdProps }>
+			{ PreviewDash && <PreviewDash /> }
+			{ children }
+		</td>
+	);
+}
diff --git a/packages/components/src/calendar/utils/misc.ts b/packages/components/src/calendar/utils/misc.ts
new file mode 100644
index 00000000000000..8ec94b129af672
--- /dev/null
+++ b/packages/components/src/calendar/utils/misc.ts
@@ -0,0 +1,3 @@
+export function clampNumberOfMonths( numberOfMonths: number ) {
+	return Math.min( 3, Math.max( 1, numberOfMonths ) );
+}
diff --git a/packages/components/src/calendar/utils/use-localization-props.ts b/packages/components/src/calendar/utils/use-localization-props.ts
new file mode 100644
index 00000000000000..f6780beb613895
--- /dev/null
+++ b/packages/components/src/calendar/utils/use-localization-props.ts
@@ -0,0 +1,169 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import type { Modifiers, BaseProps } from '../types';
+
+function isLocaleRTL( localeCode: string ) {
+	const localeObj = new Intl.Locale( localeCode );
+	if ( 'getTextInfo' in localeObj ) {
+		// @ts-expect-error - getTextInfo is not typed yet
+		// see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getTextInfo
+		return localeObj.getTextInfo().direction === 'rtl';
+	}
+	return [
+		'ar', // Arabic
+		'he', // Hebrew
+		'fa', // Persian (Farsi)
+		'ur', // Urdu
+		'ps', // Pashto
+		'syr', // Syriac
+		'dv', // Divehi
+		'ku', // Kurdish (Sorani)
+		'yi', // Yiddish
+	].includes( localeObj.language );
+}
+
+/**
+ * Returns localization props for the calendar components.
+ *
+ * Notes:
+ * - the following props should be intended as defaults, and should
+ *   be overridden by consumer props if listed as public props.
+ * - It is possible for the translated strings to use a different locale
+ *   than the formatted dates and the computed `dir`. This is because the
+ *   translation function doesn't expose the locale used for the translated
+ *   strings, meaning that the dates are formatted using the `locale` prop.
+ *   For a correct localized experience, consumers should make sure that
+ *   translation context and `locale` prop are consistent.
+ * @param props
+ * @param props.locale
+ * @param props.timeZone
+ * @param props.mode
+ */
+export const useLocalizationProps = ( {
+	locale,
+	timeZone,
+	mode,
+}: {
+	locale: NonNullable< BaseProps[ 'locale' ] >;
+	timeZone: BaseProps[ 'timeZone' ];
+	mode: 'single' | 'range';
+} ) => {
+	return useMemo( () => {
+		// ie. April 2025
+		const monthNameFormatter = new Intl.DateTimeFormat( locale.code, {
+			year: 'numeric',
+			month: 'long',
+			timeZone,
+		} );
+		// ie. M, T, W, T, F, S, S
+		const weekdayNarrowFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'narrow',
+			timeZone,
+		} );
+		// ie. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
+		const weekdayLongFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'long',
+			timeZone,
+		} );
+		// ie. Monday, April 29, 2025
+		const fullDateFormatter = new Intl.DateTimeFormat( locale.code, {
+			weekday: 'long',
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+			timeZone,
+		} );
+
+		// Note: the following props should be intended as defaults, and should
+		// be overridden by consumer props if listed as public props.
+		return {
+			'aria-label':
+				mode === 'single'
+					? __( 'Date calendar' )
+					: __( 'Date range calendar' ),
+			labels: {
+				/**
+				 * The label for the month grid.
+				 * @param date
+				 */
+				labelGrid: ( date: Date ) => monthNameFormatter.format( date ),
+				/**
+				 * The label for the gridcell, when the calendar is not interactive.
+				 * @param date
+				 * @param modifiers
+				 */
+				labelGridcell: (
+					date: Date,
+					/** The modifiers for the day. */
+					modifiers?: Modifiers
+				) => {
+					const formattedDate = fullDateFormatter.format( date );
+					let label = formattedDate;
+					if ( modifiers?.today ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( 'Today, %s' ),
+							formattedDate
+						);
+					}
+					return label;
+				},
+				/** The label for the "next month" button. */
+				labelNext: () => __( 'Go to the Next Month' ),
+				/** The label for the "previous month" button. */
+				labelPrevious: () => __( 'Go to the Previous Month' ),
+				/**
+				 * The label for the day button.
+				 * @param date
+				 * @param modifiers
+				 */
+				labelDayButton: (
+					date: Date,
+					/** The modifiers for the day. */
+					modifiers?: Modifiers
+				) => {
+					const formattedDate = fullDateFormatter.format( date );
+					let label = formattedDate;
+					if ( modifiers?.today ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( 'Today, %s' ),
+							formattedDate
+						);
+					}
+					if ( modifiers?.selected ) {
+						label = sprintf(
+							// translators: %s is the full date (e.g. "Monday, April 29, 2025")
+							__( '%s, selected' ),
+							formattedDate
+						);
+					}
+					return label;
+				},
+				/**
+				 * The label for the weekday.
+				 * @param date
+				 */
+				labelWeekday: ( date: Date ) =>
+					weekdayLongFormatter.format( date ),
+			},
+			locale,
+			dir: isLocaleRTL( locale.code ) ? 'rtl' : 'ltr',
+			formatters: {
+				formatWeekdayName: ( date: Date ) => {
+					return weekdayNarrowFormatter.format( date );
+				},
+				formatCaption: ( date: Date ) => {
+					return monthNameFormatter.format( date );
+				},
+			},
+			timeZone,
+		} as const;
+	}, [ locale, timeZone, mode ] );
+};
diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
index 6b564929fd8eb9..3e24703e4aed43 100644
--- a/packages/components/src/circular-option-picker/stories/index.story.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useState, createContext, useContext } from '@wordpress/element';
+import { createContext, useContext, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -152,7 +152,7 @@ WithDropdownLinkAction.args = {
 	actions: (
 		<CircularOptionPicker.DropdownLinkAction
 			dropdownProps={ {
-				popoverProps: { position: 'top right' },
+				popoverProps: { placement: 'top-end' },
 				renderContent: () => (
 					<div>This is an example of a DropdownLinkAction.</div>
 				),
diff --git a/packages/components/src/color-picker/color-copy-button.tsx b/packages/components/src/color-picker/color-copy-button.tsx
index 6e49fa7ae85e74..8a1a2c83a8c08f 100644
--- a/packages/components/src/color-picker/color-copy-button.tsx
+++ b/packages/components/src/color-picker/color-copy-button.tsx
@@ -3,7 +3,7 @@
  */
 import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { copy } from '@wordpress/icons';
+import { copy, check } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -55,8 +55,8 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 		};
 	}, [] );
 
-	const label =
-		copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' );
+	const isCopied = copiedColor === color.toHex();
+	const label = isCopied ? __( 'Copied!' ) : __( 'Copy' );
 
 	return (
 		<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>
@@ -64,7 +64,7 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 				size="compact"
 				aria-label={ label }
 				ref={ copyRef }
-				icon={ copy }
+				icon={ isCopied ? check : copy }
 				showTooltip={ false }
 			/>
 		</Tooltip>
diff --git a/packages/components/src/color-picker/test/index.tsx b/packages/components/src/color-picker/test/index.tsx
index 98e059d5994ded..c493a733dca1db 100644
--- a/packages/components/src/color-picker/test/index.tsx
+++ b/packages/components/src/color-picker/test/index.tsx
@@ -3,6 +3,7 @@
  */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
@@ -41,6 +41,34 @@ const legacyColorMatcher = {
 	source: 'hex',
 };
 
+// Without the controlled component, slider values don't update after changes.
+// Controlled component with state helps synchronize input box and slider during testing.
+const ControlledColorPicker = ( {
+	onChange: onChangeProp,
+	initialColor = '#000000',
+	...restProps
+}: React.ComponentProps< typeof ColorPicker > & { initialColor?: string } ) => {
+	const [ colorState, setColorState ] = useState( initialColor );
+
+	const internalOnChange: typeof onChangeProp = ( newColor ) => {
+		onChangeProp?.( newColor );
+		setColorState( newColor );
+	};
+
+	return (
+		<>
+			<ColorPicker
+				{ ...restProps }
+				onChange={ internalOnChange }
+				color={ colorState }
+			/>
+			<button onClick={ () => setColorState( '#4d87ba' ) }>
+				Set color to #4d87ba
+			</button>
+		</>
+	);
+};
+
 describe( 'ColorPicker', () => {
 	describe( 'legacy props', () => {
 		it( 'should fire onChangeComplete with the legacy color format', async () => {
@@ -144,31 +172,6 @@ describe( 'ColorPicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 
-			const ControlledColorPicker = ( {
-				onChange: onChangeProp,
-				...restProps
-			}: React.ComponentProps< typeof ColorPicker > ) => {
-				const [ colorState, setColorState ] = useState( '#000000' );
-
-				const internalOnChange: typeof onChangeProp = ( newColor ) => {
-					onChangeProp?.( newColor );
-					setColorState( newColor );
-				};
-
-				return (
-					<>
-						<ColorPicker
-							{ ...restProps }
-							onChange={ internalOnChange }
-							color={ colorState }
-						/>
-						<button onClick={ () => setColorState( '#4d87ba' ) }>
-							Set color to #4d87ba
-						</button>
-					</>
-				);
-			};
-
 			render(
 				<ControlledColorPicker
 					onChange={ onChange }
@@ -342,4 +345,78 @@ describe( 'ColorPicker', () => {
 			} );
 		} );
 	} );
+
+	describe.each( [
+		[ 'hsl', 'HSL' ],
+		[ 'rgb', 'RGB' ],
+	] )( 'Alpha-enabled %s format', ( format, formatLabel ) => {
+		it( `should update alpha correctly when ${ formatLabel } format is selected`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha
+					initialColor="#ffffff80"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+			await user.selectOptions( formatSelector, format );
+
+			const alphaInput = screen.getByRole( 'spinbutton', {
+				name: 'Alpha',
+			} );
+			expect( alphaInput ).toBeVisible();
+
+			const alphaSliders = screen.getAllByRole( 'slider', {
+				name: 'Alpha',
+			} );
+
+			expect( alphaSliders ).toHaveLength( 2 );
+
+			// Choose the second slider which is the actual slider of type: input[type="range"]
+			const alphaSlider = alphaSliders.at( -1 )!;
+
+			expect( alphaSlider ).toHaveValue( '50' );
+			expect( alphaInput ).toHaveValue( 50 );
+
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Test pattern 1: Update the slider
+			fireEvent.change( alphaSlider, {
+				target: { value: 75 },
+			} );
+
+			await waitFor( () => {
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffffbf' );
+			expect( alphaInput ).toHaveValue( 75 );
+			expect( alphaSlider ).toHaveValue( '75' );
+
+			onChange.mockClear();
+
+			// Test pattern 2: Update the alphaInput
+			await user.clear( alphaInput );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+			// Initially type 7 in the alpha input, we expect it to be called with #ffffff12
+			await user.keyboard( '7' );
+
+			// Now with 75% opacity we expect it to be called with #ffffffbf
+			await user.keyboard( '5' );
+
+			// Called twice, once per key stroke (`7` and `5`)
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenNthCalledWith( 2, '#ffffff12' );
+			expect( onChange ).toHaveBeenNthCalledWith( 3, '#ffffffbf' );
+
+			expect( alphaSlider ).toHaveValue( '75' );
+			expect( alphaInput ).toHaveValue( 75 );
+		} );
+	} );
 } );
diff --git a/packages/components/src/combobox-control/style.scss b/packages/components/src/combobox-control/style.scss
index 558475f6bd522e..b7cc9b8b59863b 100644
--- a/packages/components/src/combobox-control/style.scss
+++ b/packages/components/src/combobox-control/style.scss
@@ -12,6 +12,8 @@ input.components-combobox-control__input[type="text"] {
 	margin: 0;
 	line-height: inherit;
 	min-height: auto;
+	background: $components-color-background;
+	color: $components-color-foreground;
 
 	// Resolves Zooming on iOS devices
 	// https://github.com/WordPress/gutenberg/issues/27405
@@ -26,7 +28,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control;
+	@include input-control($components-color-accent);
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -34,7 +36,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	.components-spinner {
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
index d68ee7502e1f63..c11d7e487030d4 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/control-points.tsx
@@ -58,7 +58,7 @@ function ControlPointButton( {
 				aria-label={ sprintf(
 					// translators: 1: gradient position e.g: 70. 2: gradient color code e.g: rgb(52,121,151).
 					__(
-						'Gradient control point at position %1$s%% with color code %2$s.'
+						'Gradient control point at position %1$d%% with color code %2$s.'
 					),
 					position,
 					color
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index 9c3baf182a399a..79acfc949a5485 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
  * WordPress dependencies
  */
 import { createContext, useCallback, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -43,8 +43,11 @@ function defaultRenderSelectedValue(
 	if ( Array.isArray( value ) ) {
 		return value.length === 1
 			? value[ 0 ]
-			: // translators: %s: number of items selected (it will always be 2 or more items)
-			  sprintf( __( '%s items selected' ), value.length );
+			: sprintf(
+					// translators: %d: number of items selected (it will always be 2 or more items)
+					_n( '%d item selected', '%d items selected', value.length ),
+					value.length
+			  );
 	}
 
 	return value;
diff --git a/packages/components/src/date-time/date/index.tsx b/packages/components/src/date-time/date/index.tsx
index e7afcccf249dc0..a1b74349b35378 100644
--- a/packages/components/src/date-time/date/index.tsx
+++ b/packages/components/src/date-time/date/index.tsx
@@ -344,7 +344,7 @@ function getDayLabel( date: Date, isSelected: boolean, numEvents: number ) {
 		);
 	} else if ( isSelected ) {
 		return sprintf(
-			// translators: %s: The calendar date.
+			// translators: 1: The calendar date.
 			__( '%1$s. Selected' ),
 			localizedDate
 		);
diff --git a/packages/components/src/dimension-control/style.scss b/packages/components/src/dimension-control/style.scss
deleted file mode 100644
index 7f1481747dfe1a..00000000000000
--- a/packages/components/src/dimension-control/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.block-editor-dimension-control {
-
-	.components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		display: flex;
-		align-items: center;
-		margin-right: 1em;
-		margin-bottom: 0;
-
-		.dashicon {
-			margin-right: 0.5em;
-		}
-	}
-
-	&.is-manual .components-base-control__label {
-		width: 10em;
-	}
-}
diff --git a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
index b1adfd5d9221ab..2d806859ac6757 100644
--- a/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
+++ b/packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
@@ -193,13 +193,13 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -475,13 +475,13 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -767,13 +767,13 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
@@ -1071,13 +1071,13 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 <div>
   <div
-    class="components-base-control emotion-0 emotion-1"
+    class="components-base-control components-select-control block-editor-dimension-control emotion-0 emotion-1"
   >
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6 emotion-7"
+        class="components-flex components-input-base emotion-4 emotion-5 emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="InputBase"
       >
diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
index dd8b97149a0598..16854d21e98bda 100644
--- a/packages/components/src/drop-zone/index.tsx
+++ b/packages/components/src/drop-zone/index.tsx
@@ -43,6 +43,7 @@ import type { WordPressComponentProps } from '../context';
  */
 export function DropZoneComponent( {
 	className,
+	icon = upload,
 	label,
 	onFilesDrop,
 	onHTMLDrop,
@@ -124,7 +125,7 @@ export function DropZoneComponent( {
 			<div className="components-drop-zone__content">
 				<div className="components-drop-zone__content-inner">
 					<Icon
-						icon={ upload }
+						icon={ icon }
 						className="components-drop-zone__content-icon"
 					/>
 					<span className="components-drop-zone__content-text">
diff --git a/packages/components/src/drop-zone/stories/index.story.tsx b/packages/components/src/drop-zone/stories/index.story.tsx
index fe0be94e74fe85..f1ff6805a4892f 100644
--- a/packages/components/src/drop-zone/stories/index.story.tsx
+++ b/packages/components/src/drop-zone/stories/index.story.tsx
@@ -2,15 +2,30 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { upload, media } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import DropZone from '..';
 
+const ICONS = { upload, media };
+
 const meta: Meta< typeof DropZone > = {
 	component: DropZone,
 	id: 'components-dropzone',
 	title: 'Components/Selection & Input/File Upload/DropZone',
+	argTypes: {
+		icon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts
index 503f400bc4be45..86145e689b8b3e 100644
--- a/packages/components/src/drop-zone/types.ts
+++ b/packages/components/src/drop-zone/types.ts
@@ -5,6 +5,12 @@ export type DropZoneProps = {
 	 * A CSS `class` to give to the wrapper element.
 	 */
 	className?: string;
+	/**
+	 * An icon to be shown within the drop zone area.
+	 *
+	 * @default "upload"
+	 */
+	icon?: JSX.Element;
 	/**
 	 * A string to be shown within the drop zone area.
 	 *
diff --git a/packages/components/src/duotone-picker/style.scss b/packages/components/src/duotone-picker/style.scss
index 93bf5e90be45de..cebeb157cd5efb 100644
--- a/packages/components/src/duotone-picker/style.scss
+++ b/packages/components/src/duotone-picker/style.scss
@@ -13,6 +13,10 @@
 		color: transparent;
 	}
 
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
+		color: transparent;
+	}
+
 	&:not([aria-disabled="true"]):active {
 		color: transparent;
 	}
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
index fba3eda2fb0f29..01565313e06ebb 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
@@ -53,7 +53,7 @@ export const MediaContainer = styled.div`
 		max-width: 100%;
 		pointer-events: none;
 		user-select: none;
-		width: auto;
+		width: 100%;
 	}
 `;
 
diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
index 378dc144c6fe8c..5e1466cf9c79d2 100644
--- a/packages/components/src/form-file-upload/index.tsx
+++ b/packages/components/src/form-file-upload/index.tsx
@@ -58,18 +58,12 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
-	// @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files
-	// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
-	// This can be removed once the Chromium fix is in the stable channel.
-	// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
-	const isSafari =
-		globalThis.window?.navigator.userAgent.includes( 'Safari' ) &&
-		! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) &&
-		! globalThis.window?.navigator.userAgent.includes( 'Chromium' );
-	const compatAccept =
-		! isSafari && !! accept?.includes( 'image/*' )
-			? `${ accept }, image/heic, image/heif`
-			: accept;
+
+	// iOS browsers may not reliably handle 'audio/*' in the accept attribute.
+	// Adding explicit audio MIME types improves compatibility across all devices.
+	const compatAccept = accept?.includes( 'audio/*' )
+		? `${ accept }, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm`
+		: accept;
 
 	return (
 		<div className="components-form-file-upload">
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index 987c75d769b727..b16a5366884291 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -241,6 +241,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			case 'Escape':
 				preventDefault = handleEscapeKey( event );
 				break;
+			case 'Tab':
+				preventDefault = handleTabKey( event );
+				break;
 			default:
 				break;
 		}
@@ -372,17 +375,25 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		return true; // PreventDefault.
 	}
 
-	function handleEscapeKey( event: KeyboardEvent ) {
+	function collapseSuggestionsList( event: KeyboardEvent ) {
 		if ( event.target instanceof HTMLInputElement ) {
 			setIncompleteTokenValue( event.target.value );
 			setIsExpanded( false );
 			setSelectedSuggestionIndex( -1 );
 			setSelectedSuggestionScroll( false );
 		}
+	}
 
+	function handleEscapeKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
 		return true; // PreventDefault.
 	}
 
+	function handleTabKey( event: KeyboardEvent ) {
+		collapseSuggestionsList( event );
+		return false; // Do not prevent the default behavior.
+	}
+
 	function handleCommaKey() {
 		if ( inputHasValidValue() ) {
 			addNewToken( incompleteTokenValue );
@@ -513,10 +524,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				( suggestion ) => ! normalizedValue.includes( suggestion )
 			);
 		} else {
-			match = match.toLocaleLowerCase();
+			match = match.normalize( 'NFKC' ).toLocaleLowerCase();
 
 			_suggestions.forEach( ( suggestion ) => {
-				const index = suggestion.toLocaleLowerCase().indexOf( match );
+				const index = suggestion
+					.normalize( 'NFKC' )
+					.toLocaleLowerCase()
+					.indexOf( match );
 				if ( normalizedValue.indexOf( suggestion ) === -1 ) {
 					if ( index === 0 ) {
 						startsWithMatch.push( suggestion );
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 636ba1a981c8d0..416673138484eb 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -1,5 +1,5 @@
 .components-form-token-field__input-container {
-	@include input-control();
+	@include input-control($components-color-accent);
 	width: 100%;
 	padding: 0;
 	cursor: text;
@@ -10,7 +10,7 @@
 	}
 
 	&.is-active {
-		@include input-style__focus();
+		@include input-style__focus($components-color-accent);
 	}
 
 	// Token input
@@ -27,7 +27,7 @@
 		min-width: 50px;
 		background: inherit;
 		border: 0;
-		color: $gray-900;
+		color: $components-color-foreground;
 		box-shadow: none;
 
 		// Resolves Zooming on iOS devices
@@ -168,7 +168,7 @@
 }
 
 .components-form-token-field__suggestion {
-	color: $gray-900;
+	color: $components-color-foreground;
 	display: block;
 	font-size: $default-font-size;
 	padding: $grid-unit-10 $grid-unit-15;
@@ -178,7 +178,7 @@
 
 	&.is-selected {
 		background: $components-color-accent;
-		color: $white;
+		color: $components-color-foreground-inverted;
 	}
 
 	&[aria-disabled="true"] {
diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index 1339e0cc189e38..889a2b69a91694 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -37,7 +37,6 @@ export function SuggestionsList<
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -49,12 +48,6 @@ export function SuggestionsList<
 					inline: 'nearest',
 				} );
 			}
-
-			return () => {
-				if ( rafId !== undefined ) {
-					cancelAnimationFrame( rafId );
-				}
-			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
@@ -72,13 +65,16 @@ export function SuggestionsList<
 	};
 
 	const computeSuggestionMatch = ( suggestion: T ) => {
-		const matchText = displayTransform( match ).toLocaleLowerCase();
+		const matchText = displayTransform( match )
+			.normalize( 'NFKC' )
+			.toLocaleLowerCase();
 		if ( matchText.length === 0 ) {
 			return null;
 		}
 
 		const transformedSuggestion = displayTransform( suggestion );
 		const indexOfMatch = transformedSuggestion
+			.normalize( 'NFKC' )
 			.toLocaleLowerCase()
 			.indexOf( matchText );
 
diff --git a/packages/components/src/form-token-field/test/index.tsx b/packages/components/src/form-token-field/test/index.tsx
index 60c17112717bd1..1d8bd2b2ea0246 100644
--- a/packages/components/src/form-token-field/test/index.tsx
+++ b/packages/components/src/form-token-field/test/index.tsx
@@ -1275,6 +1275,45 @@ describe( 'FormTokenField', () => {
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 		} );
 
+		it( 'should match suggestions with half-width and full-width characters', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [
+				// Half-width characters
+				'WordPress',
+				'Gutenberg',
+				// Full-width characters
+				'ＷｏｒｄＰｒｅｓｓ',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				// Mixed characters
+				'WordＰｒｅｓｓ',
+				'Guteｎｂｅｒｇ',
+			];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Search with half-width characters.
+			await user.type( input, 'rdp' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'WordPress',
+				'ＷｏｒｄＰｒｅｓｓ',
+				'WordＰｒｅｓｓ',
+			] );
+
+			// Search with full-width characters.
+			await user.clear( input );
+			await user.type( input, 'ｔｅｎ' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Gutenberg',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				'Guteｎｂｅｒｇ',
+			] );
+		} );
+
 		it( 'should re-render if suggestions change', async () => {
 			const user = userEvent.setup();
 
diff --git a/packages/components/src/form-token-field/token.tsx b/packages/components/src/form-token-field/token.tsx
index 0cfa14cc3e0218..d7c14b0d68825d 100644
--- a/packages/components/src/form-token-field/token.tsx
+++ b/packages/components/src/form-token-field/token.tsx
@@ -47,7 +47,7 @@ export default function Token( {
 	const transformedValue = displayTransform( value );
 	const termPositionAndCount = sprintf(
 		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
-		__( '%1$s (%2$s of %3$s)' ),
+		__( '%1$s (%2$d of %3$d)' ),
 		transformedValue,
 		termPosition,
 		termsCount
diff --git a/packages/components/src/guide/README.md b/packages/components/src/guide/README.md
index 01b11823380059..7d1bb598745bc0 100644
--- a/packages/components/src/guide/README.md
+++ b/packages/components/src/guide/README.md
@@ -59,6 +59,22 @@ Use this to customize the label of the _Finish_ button shown at the end of the g
 -   Required: No
 -	Default: `'Finish'`
 
+### nextButtonText
+
+Use this to customize the label of the _Next_ button shown on each page of the guide.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Next'`
+
+### previousButtonText
+
+Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Previous'`
+
 ### onFinish
 
 A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.
diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index 121c9f22330e88..09d9fa2d000ab8 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -55,6 +55,8 @@ function Guide( {
 	className,
 	contentLabel,
 	finishButtonText = __( 'Finish' ),
+	nextButtonText = __( 'Next' ),
+	previousButtonText = __( 'Previous' ),
 	onFinish,
 	pages = [],
 }: GuideProps ) {
@@ -146,7 +148,7 @@ function Guide( {
 							onClick={ goBack }
 							__next40pxDefaultSize
 						>
-							{ __( 'Previous' ) }
+							{ previousButtonText }
 						</Button>
 					) }
 					{ canGoForward && (
@@ -156,7 +158,7 @@ function Guide( {
 							onClick={ goForward }
 							__next40pxDefaultSize
 						>
-							{ __( 'Next' ) }
+							{ nextButtonText }
 						</Button>
 					) }
 					{ ! canGoForward && (
diff --git a/packages/components/src/guide/stories/index.story.tsx b/packages/components/src/guide/stories/index.story.tsx
index d9154a02097e71..d321ad1cb0509a 100644
--- a/packages/components/src/guide/stories/index.story.tsx
+++ b/packages/components/src/guide/stories/index.story.tsx
@@ -20,6 +20,8 @@ const meta: Meta< typeof Guide > = {
 	argTypes: {
 		contentLabel: { control: 'text' },
 		finishButtonText: { control: 'text' },
+		nextButtonText: { control: 'text' },
+		previousButtonText: { control: 'text' },
 		onFinish: { action: 'onFinish' },
 	},
 };
diff --git a/packages/components/src/guide/types.ts b/packages/components/src/guide/types.ts
index 62c1816a5c6720..215e73f9b100fa 100644
--- a/packages/components/src/guide/types.ts
+++ b/packages/components/src/guide/types.ts
@@ -40,6 +40,18 @@ export type GuideProps = {
 	 * @default 'Finish'
 	 */
 	finishButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Next_ button shown on each page of the guide.
+	 *
+	 * @default 'Next'
+	 */
+	nextButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+	 *
+	 * @default 'Previous'
+	 */
+	previousButtonText?: string;
 	/**
 	 * A function which is called when the guide is finished.
 	 */
diff --git a/packages/components/src/icon/index.tsx b/packages/components/src/icon/index.tsx
index 283b9cd179cd1c..07ec786da7a9a0 100644
--- a/packages/components/src/icon/index.tsx
+++ b/packages/components/src/icon/index.tsx
@@ -107,6 +107,8 @@ function Icon( {
 		return cloneElement( icon, {
 			// @ts-ignore Just forwarding the size prop along
 			size,
+			width: size,
+			height: size,
 			...additionalProps,
 		} );
 	}
diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
index d9b5a293a0fa6e..2b731d1c866aca 100644
--- a/packages/components/src/input-control/input-field.tsx
+++ b/packages/components/src/input-control/input-field.tsx
@@ -9,7 +9,6 @@ import type {
 	PointerEvent,
 	FocusEvent,
 	ForwardedRef,
-	MouseEvent,
 } from 'react';
 
 /**
@@ -187,22 +186,6 @@ function InputField(
 	);
 
 	const dragProps = isDragEnabled ? dragGestureProps() : {};
-	/*
-	 * Works around the odd UA (e.g. Firefox) that does not focus inputs of
-	 * type=number when their spinner arrows are pressed.
-	 */
-	let handleOnMouseDown;
-	if ( type === 'number' ) {
-		handleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {
-			props.onMouseDown?.( event );
-			if (
-				event.currentTarget !==
-				event.currentTarget.ownerDocument.activeElement
-			) {
-				event.currentTarget.focus();
-			}
-		};
-	}
 
 	return (
 		<Input
@@ -216,7 +199,6 @@ function InputField(
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
-			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }
 			// Fallback to `''` to avoid "uncontrolled to controlled" warning.
diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js
index 46332eb6eea704..395da482d43ac8 100644
--- a/packages/components/src/input-control/test/index.js
+++ b/packages/components/src/input-control/test/index.js
@@ -72,23 +72,6 @@ describe( 'InputControl', () => {
 		} );
 	} );
 
-	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', async () => {
-			const user = await userEvent.setup();
-			const spy = jest.fn();
-			render( <InputControl type="number" onFocus={ spy } /> );
-			const target = getInput();
-
-			// Hovers the input and presses (without releasing) primary button.
-			await user.pointer( [
-				{ target },
-				{ keys: '[MouseLeft]', target },
-			] );
-
-			expect( spy ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-
 	describe( 'Value', () => {
 		it( 'should update value onChange', async () => {
 			const user = await userEvent.setup();
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index a2d73c8dcfc592..e40598d383baf7 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -65,7 +65,7 @@ export const separated = css`
 		border-bottom: 1px solid ${ CONFIG.surfaceBorderColor };
 	}
 
-	> *:last-of-type > *:not( :focus ) {
+	> *:last-of-type > * {
 		border-bottom-color: transparent;
 	}
 `;
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index 4104a4bf5140c1..f1224e7096a244 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -115,7 +115,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
++     class="components-item-group css-1hvp0tq-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"
diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
index 6618566837cfc9..1d95ac671784d9 100644
--- a/packages/components/src/mobile/bottom-sheet/cell.native.js
+++ b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -304,13 +304,13 @@ class BottomSheetCell extends Component {
 			}
 			return ! help
 				? sprintf(
-						/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
+						/* translators: accessibility text. Inline textinput title and value. %1: Cell title, %2: cell value. */
 						_x( '%1$s, %2$s', 'inline textinput cell' ),
 						label,
 						value
 				  ) // Separating by ',' is necessary to make a pause on urls (non-capitalized text)
 				: sprintf(
-						/* translators: accessibility text. Inline textinput title, value and help text.%1: Cell title, %2: cell value, , %3: cell help. */
+						/* translators: accessibility text. Inline textinput title, value and help text. %1: Cell title, %2: cell value, , %3: cell help. */
 						_x( '%1$s, %2$s, %3$s', 'inline textinput cell' ),
 						label,
 						value,
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 3c7e4ddc19c006..c09029fe0d4305 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -282,7 +282,7 @@ const ImageComponent = ( {
 				accessible
 				disabled={ ! isSelected }
 				accessibilityLabel={ alt }
-				accessibilityHint={ __( 'Double tap and hold to edit' ) }
+				accessibilityHint={ __( 'Double tap to view larger.' ) }
 				accessibilityRole="imagebutton"
 				key={ url }
 				style={ imageContainerStyles }
diff --git a/packages/components/src/mobile/link-picker/index.native.js b/packages/components/src/mobile/link-picker/index.native.js
index d6eb354287b9a3..2f90469d2b343d 100644
--- a/packages/components/src/mobile/link-picker/index.native.js
+++ b/packages/components/src/mobile/link-picker/index.native.js
@@ -135,7 +135,7 @@ export const LinkPicker = ( {
 					<BottomSheet.LinkSuggestionItemCell
 						accessible
 						accessibilityLabel={ sprintf(
-							/* translators: Copy URL from the clipboard, https://sample.url */
+							/* translators: %s: Copy URL from the clipboard, https://sample.url */
 							__( 'Copy URL from the clipboard, %s' ),
 							clipboardUrl
 						) }
diff --git a/packages/components/src/mobile/utils/get-px-from-css-unit.native.js b/packages/components/src/mobile/utils/get-px-from-css-unit.native.js
index 13812a5e7a6f6e..e4650b88485274 100644
--- a/packages/components/src/mobile/utils/get-px-from-css-unit.native.js
+++ b/packages/components/src/mobile/utils/get-px-from-css-unit.native.js
@@ -116,7 +116,7 @@ function isMathExpression( cssUnit ) {
  * Evaluates the math expression and return a px value.
  *
  * @param {string} cssUnit the cssUnit value being evaluated.
- * @return {string} return a converfted value to px.
+ * @return {string} return a converted value to px.
  */
 function evalMathExpression( cssUnit ) {
 	let errorFound = false;
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index de35d46a704d78..b92b2e35b73349 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -128,7 +128,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-15;
+	height: $header-height + $grid-unit-10; // 72px
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -175,7 +175,7 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-15;
+	margin-top: $header-height + $grid-unit-10;
 	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
 	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
diff --git a/packages/components/src/navigation/menu/menu-title-search.tsx b/packages/components/src/navigation/menu/menu-title-search.tsx
index f0014fa4768046..9158ba5e2cadca 100644
--- a/packages/components/src/navigation/menu/menu-title-search.tsx
+++ b/packages/components/src/navigation/menu/menu-title-search.tsx
@@ -77,7 +77,7 @@ function MenuTitleSearch( {
 	const placeholder = sprintf(
 		/* translators: placeholder for menu search box. %s: menu title */
 		__( 'Search %s' ),
-		title?.toLowerCase()
+		title?.toLowerCase() || ''
 	).trim();
 
 	return (
diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md
index 1bbf4df0e11705..5dc95acd1e55d0 100644
--- a/packages/components/src/notice/README.md
+++ b/packages/components/src/notice/README.md
@@ -61,7 +61,7 @@ If an icon is included in the Notice, it should be color-coded to match the Noti
 To display a plain notice, pass `Notice` a string:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">An unknown error occurred.</Notice>
@@ -71,7 +71,7 @@ const MyNotice = () => (
 For more complex markup, you can pass any JSX element:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">
@@ -145,6 +145,7 @@ An array of notice actions. Each member object should contain:
 
 - `label`: `string` containing the text of the button/link
 - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify what the action does.
+- `openInNewTab`: `boolean` (optional) When set to `true`, opens the URL in a new browser tab.
 - `className`: `string` (optional) to add custom classes to the button styles.
 - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all default styling.
 - `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a primary button action for a notice by passing a value of `primary`.
diff --git a/packages/components/src/notice/types.ts b/packages/components/src/notice/types.ts
index 8671f630643a6c..3edbeaa642c554 100644
--- a/packages/components/src/notice/types.ts
+++ b/packages/components/src/notice/types.ts
@@ -14,11 +14,13 @@ type CommonNoticeActionProps = {
 // `onClick` will be ignored.
 type NoticeActionWithURL = CommonNoticeActionProps & {
 	url: string;
+	openInNewTab?: boolean;
 	onClick?: never;
 };
 type NoticeActionWithOnClick = CommonNoticeActionProps & {
 	url?: never;
-	onClick: MouseEventHandler< HTMLButtonElement >;
+	openInNewTab?: never;
+	onClick: MouseEventHandler< HTMLButtonElement | HTMLAnchorElement >;
 };
 
 export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index 2eb6e3bbe3b6fc..557c97deaa8090 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -22,7 +22,7 @@ import { useDebounce } from '@wordpress/compose';
  */
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import { FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import { HStack } from '../h-stack';
 import { Item, ItemGroup } from '../item-group';
 import { VStack } from '../v-stack';
@@ -122,8 +122,8 @@ export function getNameAndSlugForPosition(
 
 	return {
 		name: sprintf(
-			/* translators: %s: is an id for a custom color */
-			__( 'Color %s' ),
+			/* translators: %d: is an id for a custom color */
+			__( 'Color %d' ),
 			position
 		),
 		slug: `${ slugPrefix }color-${ position }`,
@@ -223,13 +223,13 @@ function Option< T extends PaletteElement >( {
 					aria-label={ sprintf(
 						// translators: %s is a color or gradient name, e.g. "Red".
 						__( 'Edit: %s' ),
-						element.name.trim().length ? element.name : value
+						element.name.trim().length ? element.name : value || ''
 					) }
 					style={ { padding: 0 } }
 				>
 					<IndicatorStyled colorValue={ value } />
 				</Button>
-				<FlexItem>
+				<FlexBlock>
 					{ ! canOnlyChangeValues ? (
 						<NameInput
 							label={
@@ -256,7 +256,7 @@ function Option< T extends PaletteElement >( {
 								  '\u00A0' }
 						</NameContainer>
 					) }
-				</FlexItem>
+				</FlexBlock>
 				{ ! canOnlyChangeValues && (
 					<FlexItem>
 						<RemoveButton
@@ -267,7 +267,7 @@ function Option< T extends PaletteElement >( {
 								__( 'Remove color: %s' ),
 								element.name.trim().length
 									? element.name
-									: value
+									: value || ''
 							) }
 							onClick={ onRemove }
 						/>
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index 32648aa67edf76..f97452637d462b 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -223,9 +223,20 @@ Possible values:
 
 Adjusts the size of the popover to prevent its contents from going out of view when meeting the viewport edges.
 
+**Note:** The `resize` and `shift` props are not intended to be used together. Enabling both can cause unexpected behavior.
+
 -   Required: No
 -   Default: `true`
 
+### `shift`: `boolean`
+
+Enables the `Popover` to shift in order to stay in view when meeting the viewport edges.
+
+**Note:** The `shift` and `resize` props are not intended to be used together. If you enable `shift`, set `resize` to `false`.
+
+-   Required: No
+-   Default: `false`
+
 ### `variant`: `'toolbar' | 'unstyled'`
 
 Specifies the popover's style.
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 7db476db6b1db1..2dc4015c860919 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -59,6 +59,7 @@ import type {
 	PopoverProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
+	PopoverSlotProps,
 } from './types';
 import { overlayMiddlewares } from './overlay-middlewares';
 import { StyleProvider } from '../style-provider';
@@ -70,6 +71,13 @@ import { StyleProvider } from '../style-provider';
  */
 export const SLOT_NAME = 'Popover';
 
+/**
+ * Virtual padding to account for overflow boundaries.
+ *
+ * @type {number}
+ */
+const OVERFLOW_PADDING = 8;
+
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
 // Keeping the SVG's viewbox squared simplify the arrow positioning
@@ -223,6 +231,7 @@ const UnforwardedPopover = (
 		computedFlipProp && flipMiddleware(),
 		computedResizeProp &&
 			size( {
+				padding: OVERFLOW_PADDING,
 				apply( sizeProps ) {
 					const { firstElementChild } = refs.floating.current ?? {};
 
@@ -233,7 +242,10 @@ const UnforwardedPopover = (
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {
-						maxHeight: `${ sizeProps.availableHeight }px`,
+						maxHeight: `${ Math.max(
+							0,
+							sizeProps.availableHeight
+						) }px`,
 						overflow: 'auto',
 					} );
 				},
@@ -478,6 +490,20 @@ const UnforwardedPopover = (
 	);
 };
 
+// Export the PopoverSlot individually to allow typescript to pick the types up.
+export const PopoverSlot = forwardRef< HTMLDivElement, PopoverSlotProps >(
+	( { name = SLOT_NAME }, ref ) => {
+		return (
+			<Slot
+				bubblesVirtually
+				name={ name }
+				className="popover-slot"
+				ref={ ref }
+			/>
+		);
+	}
+);
+
 /**
  * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
  *
@@ -501,25 +527,24 @@ const UnforwardedPopover = (
  * ```
  *
  */
-export const Popover = contextConnect( UnforwardedPopover, 'Popover' );
-
-function PopoverSlot(
-	{ name = SLOT_NAME }: { name?: string },
-	ref: ForwardedRef< any >
-) {
-	return (
-		<Slot
-			bubblesVirtually
-			name={ name }
-			className="popover-slot"
-			ref={ ref }
-		/>
-	);
-}
-
-// @ts-expect-error For Legacy Reasons
-Popover.Slot = forwardRef( PopoverSlot );
-// @ts-expect-error For Legacy Reasons
-Popover.__unstableSlotNameProvider = slotNameContext.Provider;
+export const Popover = Object.assign(
+	contextConnect( UnforwardedPopover, 'Popover' ),
+	{
+		/**
+		 * Renders a slot that is used internally by Popover for rendering content.
+		 */
+		Slot: Object.assign( PopoverSlot, {
+			displayName: 'Popover.Slot',
+		} ),
+		/**
+		 * Provides a context to manage popover slot names.
+		 *
+		 * This is marked as unstable and should not be used directly.
+		 */
+		__unstableSlotNameProvider: Object.assign( slotNameContext.Provider, {
+			displayName: 'Popover.__unstableSlotNameProvider',
+		} ),
+	}
+);
 
 export default Popover;
diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx
index 1e1d4225bd0233..685bf061bcb4bf 100644
--- a/packages/components/src/popover/stories/index.story.tsx
+++ b/packages/components/src/popover/stories/index.story.tsx
@@ -36,6 +36,10 @@ const meta: Meta< typeof Popover > = {
 	title: 'Components/Overlays/Popover',
 	id: 'components-popover',
 	component: Popover,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'Popover.Slot': Popover.Slot,
+	},
 	argTypes: {
 		anchor: { control: false },
 		anchorRef: { control: false },
@@ -86,10 +90,13 @@ export const Default: StoryObj< typeof Popover > = {
 	decorators: [
 		( Story ) => {
 			const [ isVisible, setIsVisible ] = useState( false );
-			const toggleVisible = () => {
+			const buttonRef = useRef< HTMLButtonElement | undefined >();
+			const toggleVisible = ( event: React.MouseEvent ) => {
+				if ( buttonRef.current && event.target !== buttonRef.current ) {
+					return;
+				}
 				setIsVisible( ( state ) => ! state );
 			};
-			const buttonRef = useRef< HTMLButtonElement | undefined >();
 			useEffect( () => {
 				buttonRef.current?.scrollIntoView?.( {
 					block: 'center',
@@ -255,3 +262,77 @@ export const WithSlotOutsideIframe: StoryObj< typeof Popover > = {
 		...Default.args,
 	},
 };
+
+export const WithCloseHandlers: StoryObj< typeof Popover > = {
+	render: function WithCloseHandlersStory( args ) {
+		const [ isVisible, setIsVisible ] = useState( false );
+		const buttonRef = useRef< HTMLButtonElement >( null );
+
+		const toggleVisible = ( event: React.MouseEvent ) => {
+			if ( buttonRef.current && event.target !== buttonRef.current ) {
+				return;
+			}
+			setIsVisible( ( prev ) => ! prev );
+		};
+
+		const handleClose = () => {
+			args.onClose?.();
+			setIsVisible( false );
+		};
+
+		const handleFocusOutside = ( e: React.SyntheticEvent ) => {
+			args.onFocusOutside?.( e );
+			setIsVisible( false );
+		};
+
+		useEffect( () => {
+			buttonRef.current?.scrollIntoView( {
+				block: 'center',
+				inline: 'center',
+			} );
+		}, [] );
+
+		return (
+			<div
+				style={ {
+					width: '300vw',
+					height: '300vh',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+				} }
+			>
+				<Button
+					variant="secondary"
+					onClick={ toggleVisible }
+					ref={ buttonRef }
+				>
+					Toggle Popover
+					{ isVisible && (
+						<Popover
+							{ ...args }
+							onClose={ handleClose }
+							onFocusOutside={ handleFocusOutside }
+						>
+							{ args.children }
+						</Popover>
+					) }
+				</Button>
+			</div>
+		);
+	},
+	args: {
+		...Default.args,
+		focusOnMount: true,
+		children: (
+			<div style={ { width: '280px', whiteSpace: 'normal' } }>
+				<p>
+					Clicking outside triggers the onFocusOutside callback prop.
+				</p>
+				<p>
+					Pressing the Escape key triggers the onClose callback prop.
+				</p>
+			</div>
+		),
+	},
+};
diff --git a/packages/components/src/popover/test/utils/index.tsx b/packages/components/src/popover/test/utils/index.tsx
index 91fa26d8102437..bfef6dbb090d3e 100644
--- a/packages/components/src/popover/test/utils/index.tsx
+++ b/packages/components/src/popover/test/utils/index.tsx
@@ -46,7 +46,6 @@ export const PopoverInsideIframeRenderedInExternalSlot = (
 
 	return (
 		<SlotFillProvider>
-			{ /* @ts-expect-error Slot is not currently typed on Popover */ }
 			<Popover.Slot name={ SLOT_NAME } />
 			<GenericIframe
 				style={ {
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 427f4afb81bfb9..aa30840318771d 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -129,6 +129,8 @@ export type PopoverProps = {
 	/**
 	 * Adjusts the size of the popover to prevent its contents from going out of
 	 * view when meeting the viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default true
 	 */
@@ -136,6 +138,8 @@ export type PopoverProps = {
 	/**
 	 * Enables the `Popover` to shift in order to stay in view when meeting the
 	 * viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default false
 	 */
@@ -206,3 +210,13 @@ export type PopoverProps = {
 	 */
 	isAlternate?: boolean;
 };
+
+export type PopoverSlotProps = {
+	/**
+	 * The name of the Slot in which the popover should be rendered. It should
+	 * be also passed to the corresponding `PopoverSlot` component.
+	 *
+	 * @default 'Popover'
+	 */
+	name?: string;
+};
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index f5a9ee90519c2d..f35805ec47f61f 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -6,10 +6,13 @@ import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import { Tabs } from './tabs';
-import { kebabCase } from './utils/strings';
+import { kebabCase, normalizeTextString } from './utils/strings';
+import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 
+import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
+
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
@@ -18,5 +21,10 @@ lock( privateApis, {
 	Theme,
 	Menu,
 	kebabCase,
+	withIgnoreIMEEvents,
 	Badge,
+	normalizeTextString,
+	DateCalendar,
+	DateRangeCalendar,
+	TZDate,
 } );
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index e93e9385a9c23b..d82c5c19178910 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -107,11 +107,11 @@ function UnforwardedSelectControl< V extends string >(
 		<BaseControl
 			help={ help }
 			id={ id }
+			className={ classes }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			__associatedWPComponentName="SelectControl"
 		>
 			<StyledInputBase
-				className={ classes }
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
diff --git a/packages/components/src/select-control/style.scss b/packages/components/src/select-control/style.scss
index 1558314af554f8..c01cc1051fcb3b 100644
--- a/packages/components/src/select-control/style.scss
+++ b/packages/components/src/select-control/style.scss
@@ -2,9 +2,3 @@
 	outline: 0;
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
-
-@media (max-width: #{ ($break-medium) }) {
-	.components-base-control .components-base-control__field .components-select-control__input {
-		font-size: 16px;
-	}
-}
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index dfcb0a6d8f2a84..97b09f9534c46a 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -22,6 +22,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import Button from '../button';
+import ExternalLink from '../external-link';
 import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
@@ -80,7 +81,7 @@ function UnforwardedSnackbar(
 	}
 
 	function onActionClick(
-		event: MouseEvent< HTMLButtonElement >,
+		event: MouseEvent< HTMLButtonElement | HTMLAnchorElement >,
 		onClick: NoticeAction[ 'onClick' ]
 	) {
 		event.stopPropagation();
@@ -147,22 +148,34 @@ function UnforwardedSnackbar(
 					<div className="components-snackbar__icon">{ icon }</div>
 				) }
 				{ children }
-				{ actions.map( ( { label, onClick, url }, index ) => {
-					return (
-						<Button
-							__next40pxDefaultSize
-							key={ index }
-							href={ url }
-							variant="link"
-							onClick={ (
-								event: MouseEvent< HTMLButtonElement >
-							) => onActionClick( event, onClick ) }
-							className="components-snackbar__action"
-						>
-							{ label }
-						</Button>
-					);
-				} ) }
+				{ actions.map(
+					( { label, onClick, url, openInNewTab = false }, index ) =>
+						url !== undefined && openInNewTab ? (
+							<ExternalLink
+								key={ index }
+								href={ url }
+								onClick={ ( event ) =>
+									onActionClick( event, onClick )
+								}
+								className="components-snackbar__action"
+							>
+								{ label }
+							</ExternalLink>
+						) : (
+							<Button
+								__next40pxDefaultSize
+								key={ index }
+								href={ url }
+								variant="link"
+								onClick={ (
+									event: MouseEvent< HTMLButtonElement >
+								) => onActionClick( event, onClick ) }
+								className="components-snackbar__action"
+							>
+								{ label }
+							</Button>
+						)
+				) }
 				{ explicitDismiss && (
 					<span
 						role="button"
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index d1afd9b9f01e99..d6613d013aba00 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -45,7 +45,8 @@
 	}
 }
 
-.components-snackbar__action.components-button {
+.components-snackbar__action.components-button,
+.components-snackbar__action.components-external-link {
 	margin-left: $grid-unit-40;
 	color: $white;
 	flex-shrink: 0;
diff --git a/packages/components/src/snackbar/types.ts b/packages/components/src/snackbar/types.ts
index 13ed98ade8aa7a..b35466c439d0ff 100644
--- a/packages/components/src/snackbar/types.ts
+++ b/packages/components/src/snackbar/types.ts
@@ -56,7 +56,10 @@ export type SnackbarProps = Pick<
 		 *
 		 * @default []
 		 */
-		actions?: Pick< NoticeAction, 'label' | 'url' | 'onClick' >[];
+		actions?: Pick<
+			NoticeAction,
+			'label' | 'url' | 'onClick' | 'openInNewTab'
+		>[];
 	};
 
 export type SnackbarListProps = {
diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx
index b9c0a0e92b9e28..e71c80e4381661 100644
--- a/packages/components/src/spinner/index.tsx
+++ b/packages/components/src/spinner/index.tsx
@@ -50,12 +50,12 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * ```js
- *   import { Spinner } from '@wordpress/components';
+ * ```jsx
+ * import { Spinner } from '@wordpress/components';
  *
- *   function Example() {
- *     return <Spinner />;
- *   }
+ * function Example() {
+ * 	return <Spinner />;
+ * }
  * ```
  */
 export const Spinner = forwardRef( UnforwardedSpinner );
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 368dec0f5e253d..74d8ec7554e43c 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,7 +1,7 @@
 // Include the default WP Components color variables.
 // TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
 :root {
-	@include admin-scheme(#3858e9);
+	@include admin-scheme( #3858e9 );
 }
 
 // Variables
@@ -13,6 +13,7 @@
 @import "./badge/styles.scss";
 @import "./button-group/style.scss";
 @import "./button/style.scss";
+@import "./calendar/style.scss";
 @import "./checkbox-control/style.scss";
 @import "./circular-option-picker/style.scss";
 @import "./palette-edit/style.scss";
@@ -20,7 +21,6 @@
 @import "./combobox-control/style.scss";
 @import "./color-palette/style.scss";
 @import "./custom-gradient-picker/style.scss";
-@import "./dimension-control/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
 @import "./dropdown/style.scss";
@@ -55,3 +55,4 @@
 @import "./toolbar/toolbar-button/style.scss";
 @import "./toolbar/toolbar-group/style.scss";
 @import "./tooltip/style.scss";
+@import "./validated-form-controls/style.scss";
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 3e59c47532a617..476a85afb990d8 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -16,7 +16,9 @@
 	height: $grid-unit-40;
 	// Override input style margin in WP forms.css.
 	margin: 0;
-	@include input-control;
+	background: $components-color-background;
+	color: $components-color-foreground;
+	@include input-control( $components-color-accent);
 
 	&.is-next-40px-default-size {
 		height: $grid-unit-50;
diff --git a/packages/components/src/textarea-control/index.tsx b/packages/components/src/textarea-control/index.tsx
index e7528510667b75..cf5f9ed4b52e75 100644
--- a/packages/components/src/textarea-control/index.tsx
+++ b/packages/components/src/textarea-control/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -32,6 +37,8 @@ function UnforwardedTextareaControl(
 	const onChangeValue = ( event: React.ChangeEvent< HTMLTextAreaElement > ) =>
 		onChange( event.target.value );
 
+	const classes = clsx( 'components-textarea-control', className );
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
@@ -40,7 +47,7 @@ function UnforwardedTextareaControl(
 			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
 			help={ help }
-			className={ className }
+			className={ classes }
 		>
 			<StyledTextarea
 				className="components-textarea-control__input"
diff --git a/packages/components/src/textarea-control/styles/textarea-control-styles.ts b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
index 84dd2da0e53c03..3e76b2ef5d4c3f 100644
--- a/packages/components/src/textarea-control/styles/textarea-control-styles.ts
+++ b/packages/components/src/textarea-control/styles/textarea-control-styles.ts
@@ -37,6 +37,8 @@ export const StyledTextarea = styled.textarea`
 	display: block;
 	font-family: ${ font( 'default.fontFamily' ) };
 	line-height: 20px;
+	background: ${ COLORS.theme.background };
+	color: ${ COLORS.theme.foreground };
 
 	// Vertical padding is to match the standard 40px control height when rows=1,
 	// in conjunction with the 20px line-height.
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
index 7ce762b6e71df2..743c67ba215f1d 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -48,7 +48,9 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 	const { value, defaultValue } =
 		useComputeControlledOrUncontrolledValue( valueProp );
 
-	const [ selectedValue, setSelectedValue ] = useControlledValue( {
+	const [ selectedValue, setSelectedValue ] = useControlledValue<
+		typeof value
+	>( {
 		defaultValue,
 		value,
 		onChange,
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 9f3427e95a6017..3391c929fffbe1 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -54,7 +54,7 @@ function UnconnectedToggleGroupControl(
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
 	const selectedRect = useTrackElementOffsetRect(
-		value || value === 0 ? selectedElement : undefined
+		value !== null && value !== undefined ? selectedElement : undefined
 	);
 	useAnimatedOffsetRect( controlElement, selectedRect, {
 		prefix: 'selected',
diff --git a/packages/components/src/toolbar/toolbar-group/style.scss b/packages/components/src/toolbar/toolbar-group/style.scss
index 668968d40babbe..5271f8d9225d6e 100644
--- a/packages/components/src/toolbar/toolbar-group/style.scss
+++ b/packages/components/src/toolbar/toolbar-group/style.scss
@@ -1,7 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
-	border-right: $border-width solid $gray-900;
-	background-color: $white;
+	border-right: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -41,8 +41,8 @@
 .components-toolbar {
 	min-height: $block-toolbar-height;
 	margin: 0;
-	border: $border-width solid $gray-900;
-	background-color: $white;
+	border: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
index b53df6303e0fbf..2da8219146fd5a 100644
--- a/packages/components/src/toolbar/toolbar/style.scss
+++ b/packages/components/src/toolbar/toolbar/style.scss
@@ -1,6 +1,6 @@
 .components-accessible-toolbar {
 	display: inline-flex;
-	border: $border-width solid $gray-900;
+	border: $border-width solid $components-color-foreground;
 	border-radius: $radius-small;
 	flex-shrink: 0;
 
@@ -14,13 +14,11 @@
 		& > .components-toolbar-group {
 			border-right: none;
 		}
-
 	}
 }
 
 .components-accessible-toolbar,
 .components-toolbar {
-
 	&[aria-orientation="vertical"] {
 		display: flex;
 		flex-direction: column;
@@ -56,7 +54,7 @@
 			z-index: -1;
 
 			// Animate in.
-			@media not (prefers-reduced-motion) {
+			@media not ( prefers-reduced-motion ) {
 				animation: components-button__appear-animation 0.1s ease;
 				animation-fill-mode: forwards;
 			}
@@ -79,7 +77,7 @@
 			}
 
 			&::before {
-				background: $gray-900;
+				background: $components-color-foreground;
 			}
 		}
 
@@ -99,7 +97,6 @@
 	}
 }
 
-
 @keyframes components-button__appear-animation {
 	from {
 		transform: scaleY(0);
diff --git a/packages/components/src/unit-control/test/utils.ts b/packages/components/src/unit-control/test/utils.ts
index c35167ae49243c..35ce01466e44ce 100644
--- a/packages/components/src/unit-control/test/utils.ts
+++ b/packages/components/src/unit-control/test/utils.ts
@@ -42,6 +42,42 @@ describe( 'UnitControl utils', () => {
 			] );
 		} );
 
+		it( 'should not mutate default units argument definiton', () => {
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
+		it( 'should not mutate custon units argument definitons', () => {
+			const units = [
+				{ value: 'px', label: 'pixel' },
+				{ value: 'em', label: 'em' },
+				{ value: 'rem', label: 'rem' },
+			];
+
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+				units,
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+				units,
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
 		it( 'should add default values to available units even if the default values are strings', () => {
 			// Although the public APIs of the component expect a `number` as the type of the
 			// default values, it's still good to test for strings (as it can happen in un-typed
diff --git a/packages/components/src/unit-control/utils.ts b/packages/components/src/unit-control/utils.ts
index c80b34ef3af7b0..f9b3d9b2731357 100644
--- a/packages/components/src/unit-control/utils.ts
+++ b/packages/components/src/unit-control/utils.ts
@@ -428,19 +428,16 @@ export const useCustomUnits = ( {
 		units
 	);
 
-	if ( defaultValues ) {
-		customUnitsToReturn.forEach( ( unit, i ) => {
-			if ( defaultValues[ unit.value ] ) {
-				const [ parsedDefaultValue ] = parseQuantityAndUnitFromRawValue(
-					defaultValues[ unit.value ]
-				);
-
-				customUnitsToReturn[ i ].default = parsedDefaultValue;
-			}
-		} );
+	if ( ! defaultValues ) {
+		return customUnitsToReturn;
 	}
 
-	return customUnitsToReturn;
+	return customUnitsToReturn.map( ( unit ) => {
+		const [ defaultValue ] = defaultValues[ unit.value ]
+			? parseQuantityAndUnitFromRawValue( defaultValues[ unit.value ] )
+			: [];
+		return { ...unit, default: defaultValue };
+	} );
 };
 
 /**
diff --git a/packages/components/src/utils/hooks/use-controlled-value.ts b/packages/components/src/utils/hooks/use-controlled-value.ts
index 4b172801cf9528..725283736f5026 100644
--- a/packages/components/src/utils/hooks/use-controlled-value.ts
+++ b/packages/components/src/utils/hooks/use-controlled-value.ts
@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 type Props< T > = {
 	defaultValue?: T;
 	value?: T;
-	onChange?: ( value: T ) => void;
+	onChange?: ( value: T, ...args: any[] ) => void;
 };
 
 /**
@@ -28,17 +28,25 @@ export function useControlledValue< T >( {
 	const [ state, setState ] = useState( initialValue );
 	const value = hasValue ? valueProp : state;
 
-	let setValue: ( nextValue: T ) => void;
+	const uncontrolledSetValue = useCallback(
+		( nextValue: T, ...args: any[] ) => {
+			setState( nextValue );
+			onChange?.( nextValue, ...args );
+		},
+		[ onChange ]
+	);
+
+	let setValue: typeof onChange;
 	if ( hasValue && typeof onChange === 'function' ) {
+		// Controlled mode.
 		setValue = onChange;
 	} else if ( ! hasValue && typeof onChange === 'function' ) {
-		setValue = ( nextValue ) => {
-			onChange( nextValue );
-			setState( nextValue );
-		};
+		// Uncontrolled mode, plus forwarding to the onChange prop.
+		setValue = uncontrolledSetValue;
 	} else {
+		// Uncontrolled mode, only update internal state.
 		setValue = setState;
 	}
 
-	return [ value, setValue as typeof setState ] as const;
+	return [ value, setValue ] as const;
 }
diff --git a/packages/components/src/utils/strings.ts b/packages/components/src/utils/strings.ts
index e15886da61f5a6..580303c2f9e9d4 100644
--- a/packages/components/src/utils/strings.ts
+++ b/packages/components/src/utils/strings.ts
@@ -20,6 +20,7 @@ const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
 
 export const normalizeTextString = ( value: string ): string => {
 	return removeAccents( value )
+		.normalize( 'NFKC' )
 		.toLocaleLowerCase()
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };
diff --git a/packages/components/src/utils/test/strings.js b/packages/components/src/utils/test/strings.js
index 7d03075897318f..eafeb2101904ff 100644
--- a/packages/components/src/utils/test/strings.js
+++ b/packages/components/src/utils/test/strings.js
@@ -169,4 +169,15 @@ describe( 'normalizeTextString', () => {
 			'-'.repeat( dashCharacters.length )
 		);
 	} );
+
+	it( 'should normalize unicode to standard characters', () => {
+		expect( normalizeTextString( '①' ) ).toBe( '1' );
+		expect( normalizeTextString( 'Ⅸ' ) ).toBe( 'ix' );
+		expect( normalizeTextString( 'MC²' ) ).toBe( 'mc2' );
+		expect( normalizeTextString( 'ＰｌａｙＳｔａｔｉｏｎ　２' ) ).toBe(
+			'playstation 2'
+		);
+		expect( normalizeTextString( 'ＡＢＣ' ) ).toBe( 'abc' );
+		expect( normalizeTextString( 'Amélie' ) ).toBe( 'amelie' );
+	} );
 } );
diff --git a/packages/components/src/utils/with-ignore-ime-events.ts b/packages/components/src/utils/with-ignore-ime-events.ts
index 26c5cd67b25397..88e62ea20b6b9b 100644
--- a/packages/components/src/utils/with-ignore-ime-events.ts
+++ b/packages/components/src/utils/with-ignore-ime-events.ts
@@ -1,18 +1,18 @@
 /**
- * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
+ * A higher-order function that wraps a keyboard event handler to ensure it is not an IME event.
  *
  * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
- * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
+ * During an IME composition, keyboard events (e.g. Enter or Escape) can be fired
  * which are intended to control the IME and not the application.
  * These events should be ignored by any application logic.
  *
- * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
+ * @param handler The keyboard event handler to execute after ensuring it was not an IME event.
  *
  * @return A wrapped version of the given event handler that ignores IME events.
  */
 export function withIgnoreIMEEvents<
 	E extends React.KeyboardEvent | KeyboardEvent,
->( keydownHandler: ( event: E ) => void ) {
+>( handler: ( event: E ) => void ) {
 	return ( event: E ) => {
 		const { isComposing } =
 			'nativeEvent' in event ? event.nativeEvent : event;
@@ -27,6 +27,6 @@ export function withIgnoreIMEEvents<
 			return;
 		}
 
-		keydownHandler( event );
+		handler( event );
 	};
 }
diff --git a/packages/components/src/validated-form-controls/components/checkbox-control.tsx b/packages/components/src/validated-form-controls/components/checkbox-control.tsx
new file mode 100644
index 00000000000000..b4f194e5830a23
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/checkbox-control.tsx
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import CheckboxControl from '../../checkbox-control';
+import type { CheckboxControlProps } from '../../checkbox-control/types';
+
+type Value = CheckboxControlProps[ 'checked' ];
+
+const UnforwardedValidatedCheckboxControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof CheckboxControl >,
+		'__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLDivElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.checked );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[type="checkbox"]'
+				)
+			}
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedCheckboxControl = forwardRef(
+	UnforwardedValidatedCheckboxControl
+);
diff --git a/packages/components/src/validated-form-controls/components/combobox-control.tsx b/packages/components/src/validated-form-controls/components/combobox-control.tsx
new file mode 100644
index 00000000000000..fc2b43b6da15e6
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/combobox-control.tsx
@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import ComboboxControl from '../../combobox-control';
+import type { ComboboxControlProps } from '../../combobox-control/types';
+
+type Value = ComboboxControlProps[ 'value' ];
+
+const UnforwardedValidatedComboboxControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof ComboboxControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+	// so we need to set it manually.
+	useEffect( () => {
+		const input =
+			validityTargetRef.current?.querySelector< HTMLInputElement >(
+				'input[role="combobox"]'
+			);
+		if ( input ) {
+			input.required = required ?? false;
+		}
+	}, [ required ] );
+
+	return (
+		// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[role="combobox"]'
+				)
+			}
+		>
+			<ComboboxControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				{ ...restProps }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedComboboxControl = forwardRef(
+	UnforwardedValidatedComboboxControl
+);
diff --git a/packages/components/src/validated-form-controls/components/custom-select-control.tsx b/packages/components/src/validated-form-controls/components/custom-select-control.tsx
new file mode 100644
index 00000000000000..641a98cb57c54b
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/custom-select-control.tsx
@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import CustomSelectControl from '../../custom-select-control';
+import type {
+	CustomSelectOption,
+	CustomSelectProps,
+} from '../../custom-select-control/types';
+
+type CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;
+
+type Value = CustomSelectControlProps[ 'value' ];
+
+const UnforwardedValidatedCustomSelectControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof CustomSelectControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLSelectElement >( null );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<div
+			className="components-validated-control__wrapper-with-error-delegate"
+			ref={ forwardedRef }
+		>
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				customValidator={ () => {
+					return customValidator?.( valueRef.current );
+				} }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<CustomSelectControl
+					// TODO: Upstream limitation - Required isn't passed down correctly,
+					// so it needs to be set on a delegate element.
+					__next40pxDefaultSize
+					onChange={ ( value ) => {
+						valueRef.current = value.selectedItem;
+						onChange?.( value );
+					} }
+					{ ...restProps }
+				/>
+			</ControlWithError>
+			<select
+				className="components-validated-control__error-delegate"
+				ref={ validityTargetRef }
+				required={ required }
+				tabIndex={ -1 }
+				value={ restProps.value?.key ? 'hasvalue' : '' }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLButtonElement >(
+							'[role="combobox"]'
+						)
+						?.focus();
+				} }
+			>
+				<option value="">No selection</option>
+				<option value="hasvalue">Has selection</option>
+			</select>
+		</div>
+	);
+};
+
+export const ValidatedCustomSelectControl = forwardRef(
+	UnforwardedValidatedCustomSelectControl
+);
diff --git a/packages/components/src/validated-form-controls/components/index.ts b/packages/components/src/validated-form-controls/components/index.ts
new file mode 100644
index 00000000000000..4b05ed5f8f49dc
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/index.ts
@@ -0,0 +1,12 @@
+export * from './checkbox-control';
+export * from './combobox-control';
+export * from './custom-select-control';
+export * from './input-control';
+export * from './number-control';
+export * from './radio-control';
+export * from './range-control';
+export * from './select-control';
+export * from './text-control';
+export * from './textarea-control';
+export * from './toggle-control';
+export * from './toggle-group-control';
diff --git a/packages/components/src/validated-form-controls/components/input-control.tsx b/packages/components/src/validated-form-controls/components/input-control.tsx
new file mode 100644
index 00000000000000..fa7d5d39320f2d
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/input-control.tsx
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import InputControl from '../../input-control';
+import type { InputControlProps } from '../../input-control/types';
+
+type Value = InputControlProps[ 'value' ];
+
+const UnforwardedValidatedInputControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof InputControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< InputControlProps[ 'value' ] >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<InputControl
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				onChange={ ( value, ...args ) => {
+					valueRef.current = value;
+					onChange?.( value, ...args );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedInputControl = forwardRef(
+	UnforwardedValidatedInputControl
+);
diff --git a/packages/components/src/validated-form-controls/components/number-control.tsx b/packages/components/src/validated-form-controls/components/number-control.tsx
new file mode 100644
index 00000000000000..ddb1f78b07fbbb
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/number-control.tsx
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import NumberControl from '../../number-control';
+import type { ValidatedControlProps } from './types';
+import type { NumberControlProps } from '../../number-control/types';
+
+type Value = NumberControlProps[ 'value' ];
+
+const UnforwardedValidatedNumberControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof NumberControl >,
+		'__next40pxDefaultSize'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<NumberControl
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				// TODO: Upstream limitation - When form is submitted when value is undefined, it will
+				// automatically set a clamped value (as defined by `min` attribute, so 0 by default).
+				onChange={ ( value, ...args ) => {
+					valueRef.current = value;
+					onChange?.( value, ...args );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedNumberControl = forwardRef(
+	UnforwardedValidatedNumberControl
+);
diff --git a/packages/components/src/validated-form-controls/components/radio-control.tsx b/packages/components/src/validated-form-controls/components/radio-control.tsx
new file mode 100644
index 00000000000000..6d335c01ac3a59
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/radio-control.tsx
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import RadioControl from '../../radio-control';
+import type { RadioControlProps } from '../../radio-control/types';
+
+type Value = RadioControlProps[ 'selected' ];
+
+const UnforwardedValidatedRadioControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: React.ComponentProps< typeof RadioControl > &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLDivElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.selected );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			// TODO: Upstream limitation - RadioControl does not accept a ref.
+			ref={ mergedRefs }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () =>
+				validityTargetRef.current?.querySelector< HTMLInputElement >(
+					'input[type="radio"]'
+				)
+			}
+		>
+			<RadioControl
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedRadioControl = forwardRef(
+	UnforwardedValidatedRadioControl
+);
diff --git a/packages/components/src/validated-form-controls/components/range-control.tsx b/packages/components/src/validated-form-controls/components/range-control.tsx
new file mode 100644
index 00000000000000..2ad5b90539fc6b
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/range-control.tsx
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import RangeControl from '../../range-control';
+import type { RangeControlProps } from '../../range-control/types';
+
+type Value = RangeControlProps[ 'value' ];
+
+const UnforwardedValidatedRangeControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof RangeControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<RangeControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedRangeControl = forwardRef(
+	UnforwardedValidatedRangeControl
+);
diff --git a/packages/components/src/validated-form-controls/components/select-control.tsx b/packages/components/src/validated-form-controls/components/select-control.tsx
new file mode 100644
index 00000000000000..faeb9164260174
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/select-control.tsx
@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import SelectControl from '../../select-control';
+import type { ValidatedControlProps } from './types';
+import type { SelectControlProps as _SelectControlProps } from '../../select-control/types';
+
+// Only support single value selection
+type SelectControlProps = Omit<
+	_SelectControlProps,
+	'multiple' | 'onChange' | 'value'
+> & {
+	onChange?: ( value: string ) => void;
+	value?: string;
+};
+
+type Value = SelectControlProps[ 'value' ];
+
+const UnforwardedValidatedSelectControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof SelectControl >,
+		| '__next40pxDefaultSize'
+		| '__nextHasNoMarginBottom'
+		| 'multiple'
+		| 'onChange'
+		| 'value'
+	> & {
+		value?: string;
+		onChange: ( value: string ) => void;
+	} & ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLSelectElement >
+) => {
+	const validityTargetRef = useRef< HTMLSelectElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<SelectControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedSelectControl = forwardRef(
+	UnforwardedValidatedSelectControl
+);
diff --git a/packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx
new file mode 100644
index 00000000000000..0cc0900c0594e5
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/checkbox-control.story.tsx
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedCheckboxControl } from '../checkbox-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedCheckboxControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedCheckboxControl',
+	component: ValidatedCheckboxControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		checked: { control: false },
+		// TODO: Figure out why this deprecated prop is still showing up here and not in the WP Storybook.
+		heading: { table: { disable: true } },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedCheckboxControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ checked, setChecked ] = useState( false );
+
+		return (
+			<ValidatedCheckboxControl
+				{ ...args }
+				checked={ checked }
+				onChange={ ( value ) => {
+					setChecked( value );
+					onChange?.( value );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Checkbox',
+	help: 'This checkbox may neither be checked nor unchecked.',
+	customValidator: ( value ) => {
+		if ( value ) {
+			return 'This checkbox may not be checked.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/combobox-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/combobox-control.story.tsx
new file mode 100644
index 00000000000000..0687dacc719f8f
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/combobox-control.story.tsx
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedComboboxControl } from '../combobox-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedComboboxControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedComboboxControl',
+	component: ValidatedComboboxControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedComboboxControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedComboboxControl
+				>[ 'value' ]
+			>();
+
+		return (
+			<ValidatedComboboxControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Combobox',
+	help: 'Option A is not allowed.',
+	options: [
+		{ value: 'a', label: 'Option A (not allowed)' },
+		{ value: 'b', label: 'Option B' },
+	],
+	customValidator: ( value ) => {
+		if ( value === 'a' ) {
+			return 'Option A is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx
new file mode 100644
index 00000000000000..c6a45b7ecbe67a
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/custom-select-control.story.tsx
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedCustomSelectControl } from '../custom-select-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedCustomSelectControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedCustomSelectControl',
+	component: ValidatedCustomSelectControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedCustomSelectControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedCustomSelectControl
+				>[ 'value' ]
+			>();
+
+		return (
+			<ValidatedCustomSelectControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue.selectedItem );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Custom Select',
+	options: [
+		{ key: '', name: 'Select an option' },
+		{ key: 'a', name: 'Option A (not allowed)' },
+		{ key: 'b', name: 'Option B' },
+	],
+	customValidator: ( value ) => {
+		if ( value?.key === 'a' ) {
+			return 'Option A is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/input-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/input-control.story.tsx
new file mode 100644
index 00000000000000..90e8c4ddc0bc4c
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/input-control.story.tsx
@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { seen, unseen } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '../input-control';
+import { formDecorator } from './story-utils';
+import InputControlSuffixWrapper from '../../../input-control/input-suffix-wrapper';
+import { Button } from '../../../button';
+
+const meta: Meta< typeof ValidatedInputControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedInputControl',
+	component: ValidatedInputControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		prefix: { control: false },
+		suffix: { control: false },
+		type: { control: { type: 'text' } },
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedInputControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
+			>( '' );
+
+		return (
+			<ValidatedInputControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue, ...rest ) => {
+					setValue( newValue );
+					onChange?.( newValue, ...rest );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Input',
+	help: 'The word "error" will trigger an error.',
+	customValidator: ( value ) => {
+		if ( value?.toLowerCase() === 'error' ) {
+			return 'The word "error" is not allowed.';
+		}
+		return undefined;
+	},
+};
+
+/**
+ * This demonstrates how password validation would work with the standard implementation.
+ *
+ * We are planning to move to a custom implementation more tailored to the password use case.
+ */
+export const Password: StoryObj< typeof ValidatedInputControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps< typeof ValidatedInputControl >[ 'value' ]
+			>( '' );
+		const [ visible, setVisible ] = useState( false );
+
+		return (
+			<ValidatedInputControl
+				{ ...args }
+				type={ visible ? 'text' : 'password' }
+				suffix={
+					<InputControlSuffixWrapper variant="control">
+						<Button
+							size="small"
+							icon={ visible ? unseen : seen }
+							onClick={ () => setVisible( ( v ) => ! v ) }
+							label={
+								visible ? 'Hide password' : 'Show password'
+							}
+						/>
+					</InputControlSuffixWrapper>
+				}
+				value={ value }
+				onChange={ ( newValue, ...rest ) => {
+					setValue( newValue );
+					onChange?.( newValue, ...rest );
+				} }
+			/>
+		);
+	},
+};
+Password.args = {
+	required: true,
+	label: 'Password',
+	help: 'Minimum 8 characters, include a number, capital letter, and symbol (!@£$%^&*#).',
+	minLength: 8,
+	customValidator: ( value ) => {
+		if ( ! /\d/.test( value ?? '' ) ) {
+			return 'Password must include at least one number.';
+		}
+		if ( ! /[A-Z]/.test( value ?? '' ) ) {
+			return 'Password must include at least one capital letter.';
+		}
+		if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {
+			return 'Password must include at least one symbol.';
+		}
+		return undefined;
+	},
+};
+Password.argTypes = {
+	suffix: { control: false },
+	type: { control: false },
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/number-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/number-control.story.tsx
new file mode 100644
index 00000000000000..7efa5acb6d9459
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/number-control.story.tsx
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedNumberControl } from '../number-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedNumberControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedNumberControl',
+	component: ValidatedNumberControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		prefix: { control: { type: 'text' } },
+		step: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		type: { control: { type: 'text' } },
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedNumberControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps< typeof ValidatedNumberControl >[ 'value' ]
+			>();
+
+		return (
+			<ValidatedNumberControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue, ...rest ) => {
+					setValue( newValue );
+					onChange?.( newValue, ...rest );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Number',
+	help: 'Odd numbers are not allowed.',
+	customValidator: ( value ) => {
+		if ( value && parseInt( value.toString(), 10 ) % 2 !== 0 ) {
+			return 'Choose an even number.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/overview.mdx b/packages/components/src/validated-form-controls/components/stories/overview.mdx
new file mode 100644
index 00000000000000..7836344a8995a9
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/overview.mdx
@@ -0,0 +1,52 @@
+import { ArgTypes, Meta, Stories } from '@storybook/blocks';
+import * as OverviewStories from './overview.story';
+import { ValidatedInputControl } from '..';
+
+<Meta of={ OverviewStories } title="Components (Private)/Validated Form Controls/Overview" />
+
+# Validated Form Controls
+
+This section contains form control components that extend [WordPress components](https://wordpress.github.io/gutenberg/) with additional validation capabilities.
+
+## Status: Beta
+
+We are still gathering feedback and iterating. Please get in touch with `@WordPress/gutenberg-components`  if you are interested in trying them out in the Gutenberg app.
+
+## Usage
+
+Component APIs are the same as the underlying WordPress components, with the addition of some optional props:
+
+<ArgTypes of={ ValidatedInputControl } include={ [ 'required', 'markWhenOptional', 'customValidator' ] } />
+
+## Implementation
+
+These components are designed to work with the native HTML5 [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation). Using this browser API as the "source of truth" for form element errors has these benefits:
+
+- Ability to use CSS selectors like `:invalid`, `:user-invalid`, `:required`, and `:optional`.
+- Ability to use simple HTML attribute-based constraints (e.g. `min`, `max`, `required`, `pattern`, `type`) together with fully custom validation logic (with the `setCustomValidity()` method).
+- Attribute-based constraints will already have localized, user-facing error messages built in.
+- When a user clicks the form submit button, the browser will automatically check the validity states of all enclosed form elements and block the submit when there are errors. It will also automatically scroll and focus to the first erroring element and show a prominent error popover.
+- While not _all_ aspects of the Constraint Validation API are well-supported in all screen readers yet, many aspects are, and will continue to improve. We can supplement any accessibility shortcomings with things like `aria-live` announcements of error messages.
+
+## Current limitations
+
+### No easy access to underlying validation APIs
+
+- The consumer does not have a simple way to trigger their custom validators at an arbitrary point in time. Currently, the validation timings for custom validators are handled by the component — first on `blur`, and then on every `change` after the field is considered "touched". Note that this limitation only applies to **custom** validators, not the standard attribute-based validators like `required` or `pattern`, which can be triggered at any time using the `reportValidity()` method on either the underlying control element or the wrapping `<form>` element.
+- The consumer does not have direct access to the [`validity` object](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) of the underlying element.
+
+We don't foresee these being needed much, but it is technically possible by the consumer accessing the target element's validation APIs via `ref`. Better docs or ergonomics can be added when we have actual use cases.
+
+### Delegate elements
+
+The implementations for `ToggleGroupControl` and `CustomSelectControl` use a "delegate" element for validation, due to upstream limitations that prevent us from using the actual underlying elements for constraint validation. A delegate element in this context is a visually hidden form element that we "delegate" the Constraint Validation API concerns to.
+
+This is not ideal, but lets us maintain a consistent mechanism to scroll to the invalid field when attempting to submit, and block the form from submitting. It is hopefully fine as a stopgap, given the low amount of actual validation that will need happen on these two specific components.
+
+### Controlled mode only
+
+Some of the underlying WordPress components currently do not fully support uncontrolled mode. For now, we recommend sticking to controlled mode to avoid any issues.
+
+## Examples
+
+<Stories />
diff --git a/packages/components/src/validated-form-controls/components/stories/overview.story.tsx b/packages/components/src/validated-form-controls/components/stories/overview.story.tsx
new file mode 100644
index 00000000000000..d7faf4631a1db6
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/overview.story.tsx
@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedInputControl } from '..';
+import { formDecorator } from './story-utils';
+import type { ControlWithError } from '../../control-with-error';
+
+const meta: Meta< typeof ControlWithError > = {
+	title: 'Components (Experimental)/Validated Form Controls/Overview',
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+};
+export default meta;
+
+type Story = StoryObj< typeof ControlWithError >;
+
+/**
+ * When there are multiple controls with errors, attempting to submit will
+ * move focus to the first control with an error.
+ */
+export const WithMultipleControls: Story = {
+	render: function Template() {
+		const [ text, setText ] = useState( '' );
+		const [ text2, setText2 ] = useState( '' );
+
+		return (
+			<>
+				<ValidatedInputControl
+					label="Text"
+					required
+					value={ text }
+					help="The word 'error' will trigger an error."
+					customValidator={ ( value ) => {
+						if ( value?.toLowerCase() === 'error' ) {
+							return 'The word "error" is not allowed.';
+						}
+						return undefined;
+					} }
+					onChange={ ( value ) => setText( value ?? '' ) }
+				/>
+				<ValidatedInputControl
+					label="Text"
+					required
+					value={ text2 }
+					help="The word 'error' will trigger an error."
+					customValidator={ ( value ) => {
+						if ( value?.toLowerCase() === 'error' ) {
+							return 'The word "error" is not allowed.';
+						}
+						return undefined;
+					} }
+					onChange={ ( value ) => setText2( value ?? '' ) }
+				/>
+			</>
+		);
+	},
+};
+
+/**
+ * Help text can be configured to be hidden when a custom error is reported. Whether to opt for this approach
+ * will depend on context.
+ */
+export const WithHelpTextReplacement: Story = {
+	render: function Template() {
+		const [ text, setText ] = useState( '' );
+		const [ hasCustomError, setHasCustomError ] = useState( false );
+
+		return (
+			<ValidatedInputControl
+				label="Text"
+				required
+				value={ text }
+				help={
+					hasCustomError
+						? undefined
+						: 'The word "error" is not allowed.'
+				}
+				customValidator={ ( value ) => {
+					if ( value?.toLowerCase() === 'error' ) {
+						setHasCustomError( true );
+						return 'The word "error" is not allowed.';
+					}
+					setHasCustomError( false );
+					return undefined;
+				} }
+				onChange={ ( value ) => setText( value ?? '' ) }
+			/>
+		);
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/radio-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/radio-control.story.tsx
new file mode 100644
index 00000000000000..bed3cfacfe5aa1
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/radio-control.story.tsx
@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedRadioControl } from '../radio-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedRadioControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedRadioControl',
+	component: ValidatedRadioControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		selected: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedRadioControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ selected, setSelected ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedRadioControl
+				>[ 'selected' ]
+			>();
+
+		return (
+			<ValidatedRadioControl
+				{ ...args }
+				selected={ selected }
+				onChange={ ( value ) => {
+					setSelected( value );
+					onChange?.( value );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Radio',
+	help: 'Option B is not allowed.',
+	options: [
+		{ label: 'Option A', value: 'a' },
+		{ label: 'Option B (not allowed)', value: 'b' },
+	],
+	customValidator: ( value ) => {
+		if ( value === 'b' ) {
+			return 'Option B is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/range-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/range-control.story.tsx
new file mode 100644
index 00000000000000..977857bd6007ea
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/range-control.story.tsx
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedRangeControl } from '../range-control';
+
+const meta: Meta< typeof ValidatedRangeControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedRangeControl',
+	component: ValidatedRangeControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedRangeControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps< typeof ValidatedRangeControl >[ 'value' ]
+			>();
+
+		return (
+			<ValidatedRangeControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Range',
+	help: 'Odd numbers are not allowed.',
+	min: 0,
+	max: 20,
+	customValidator: ( value ) => {
+		if ( value && value % 2 !== 0 ) {
+			return 'Choose an even number.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/select-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/select-control.story.tsx
new file mode 100644
index 00000000000000..093626541934b5
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/select-control.story.tsx
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedSelectControl } from '../select-control';
+import { formDecorator } from './story-utils';
+
+const meta: Meta< typeof ValidatedSelectControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedSelectControl',
+	component: ValidatedSelectControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedSelectControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState( '' );
+
+		return (
+			<ValidatedSelectControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Select',
+	help: 'Selecting option 1 will trigger an error.',
+	options: [
+		{ value: '', label: 'Select an option' },
+		{ value: '1', label: 'Option 1 (not allowed)' },
+		{ value: '2', label: 'Option 2' },
+	],
+	customValidator: ( value ) => {
+		if ( value === '1' ) {
+			return 'Option 1 is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/story-utils.tsx b/packages/components/src/validated-form-controls/components/stories/story-utils.tsx
new file mode 100644
index 00000000000000..d22cac0f6870d3
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/story-utils.tsx
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * External dependencies
+ */
+import type { Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../../button';
+
+export const formDecorator: Meta[ 'decorators' ] = ( Story ) => (
+	<form
+		style={ {
+			fontFamily: 'sans-serif',
+			display: 'flex',
+			flexDirection: 'column',
+			alignItems: 'flex-start',
+			gap: 16,
+		} }
+		onSubmit={ ( e ) => {
+			e.preventDefault();
+			// eslint-disable-next-line no-alert
+			alert( 'Form submitted!' );
+		} }
+	>
+		<div
+			style={ {
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 16,
+				alignItems: 'stretch',
+				width: 300,
+			} }
+		>
+			<Story />
+		</div>
+
+		<Button variant="primary" type="submit" __next40pxDefaultSize>
+			Submit
+		</Button>
+	</form>
+);
diff --git a/packages/components/src/validated-form-controls/components/stories/text-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/text-control.story.tsx
new file mode 100644
index 00000000000000..bf8279fa165f7d
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/text-control.story.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedTextControl } from '../text-control';
+
+const meta: Meta< typeof ValidatedTextControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedTextControl',
+	component: ValidatedTextControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedTextControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState( '' );
+
+		return (
+			<ValidatedTextControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Text',
+	help: "The word 'error' will trigger an error.",
+	customValidator: ( value ) => {
+		if ( value?.toString().toLowerCase() === 'error' ) {
+			return 'The word "error" is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/textarea-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/textarea-control.story.tsx
new file mode 100644
index 00000000000000..e7440db54e0da7
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/textarea-control.story.tsx
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedTextareaControl } from '../textarea-control';
+
+const meta: Meta< typeof ValidatedTextareaControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedTextareaControl',
+	component: ValidatedTextareaControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: { value: { control: false } },
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedTextareaControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState( '' );
+
+		return (
+			<ValidatedTextareaControl
+				{ ...args }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Textarea',
+	help: 'The word "error" will trigger an error.',
+	customValidator: ( value ) => {
+		if ( value?.toLowerCase() === 'error' ) {
+			return 'The word "error" is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx
new file mode 100644
index 00000000000000..1fb0921d137fd8
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/toggle-control.story.tsx
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedToggleControl } from '../toggle-control';
+
+const meta: Meta< typeof ValidatedToggleControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedToggleControl',
+	component: ValidatedToggleControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		checked: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedToggleControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ checked, setChecked ] = useState( false );
+
+		return (
+			<ValidatedToggleControl
+				{ ...args }
+				checked={ checked }
+				onChange={ ( value ) => {
+					setChecked( value );
+					onChange?.( value );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Toggle',
+	help: 'This toggle may neither be enabled nor disabled.',
+	customValidator: ( value ) => {
+		if ( value ) {
+			return 'This toggle may not be enabled.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/stories/toggle-group-control.story.tsx b/packages/components/src/validated-form-controls/components/stories/toggle-group-control.story.tsx
new file mode 100644
index 00000000000000..32d8ed163b3239
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/stories/toggle-group-control.story.tsx
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedToggleGroupControl } from '../toggle-group-control';
+import { ToggleGroupControlOption } from '../../../toggle-group-control';
+
+const meta: Meta< typeof ValidatedToggleGroupControl > = {
+	title: 'Components (Experimental)/Validated Form Controls/ValidatedToggleGroupControl',
+	component: ValidatedToggleGroupControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	args: { onChange: () => {} },
+	argTypes: {
+		value: { control: false },
+	},
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedToggleGroupControl > = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] =
+			useState<
+				React.ComponentProps<
+					typeof ValidatedToggleGroupControl
+				>[ 'value' ]
+			>( '1' );
+
+		return (
+			<ValidatedToggleGroupControl
+				{ ...args }
+				value={ value }
+				onChange={ ( newValue ) => {
+					setValue( newValue );
+					onChange?.( newValue );
+				} }
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Toggle Group',
+	isBlock: true,
+	children: [
+		<ToggleGroupControlOption value="1" key="1" label="Option 1" />,
+		<ToggleGroupControlOption value="2" key="2" label="Option 2" />,
+	],
+	help: 'Selecting option 2 will trigger an error.',
+	customValidator: ( value ) => {
+		if ( value === '2' ) {
+			return 'Option 2 is not allowed.';
+		}
+		return undefined;
+	},
+};
diff --git a/packages/components/src/validated-form-controls/components/text-control.tsx b/packages/components/src/validated-form-controls/components/text-control.tsx
new file mode 100644
index 00000000000000..853a671055d7b6
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/text-control.tsx
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useMergeRefs } from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import TextControl from '../../text-control';
+import type { TextControlProps } from '../../text-control/types';
+
+type Value = TextControlProps[ 'value' ];
+
+const UnforwardedValidatedTextControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof TextControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedTextControl = forwardRef(
+	UnforwardedValidatedTextControl
+);
diff --git a/packages/components/src/validated-form-controls/components/textarea-control.tsx b/packages/components/src/validated-form-controls/components/textarea-control.tsx
new file mode 100644
index 00000000000000..c874e4b55b9d15
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/textarea-control.tsx
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import TextareaControl from '../../textarea-control';
+import type { TextareaControlProps } from '../../textarea-control/types';
+
+type Value = TextareaControlProps[ 'value' ];
+
+const UnforwardedValidatedTextareaControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof TextareaControl >,
+		'__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLTextAreaElement >
+) => {
+	const validityTargetRef = useRef< HTMLTextAreaElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.value );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedTextareaControl = forwardRef(
+	UnforwardedValidatedTextareaControl
+);
diff --git a/packages/components/src/validated-form-controls/components/toggle-control.tsx b/packages/components/src/validated-form-controls/components/toggle-control.tsx
new file mode 100644
index 00000000000000..802e49d5465a93
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/toggle-control.tsx
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef, useEffect } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import ToggleControl from '../../toggle-control';
+import type { ToggleControlProps } from '../../toggle-control/types';
+
+type Value = ToggleControlProps[ 'checked' ];
+
+// TODO: Should we customize the default `missingValue` message? It says to "check this box".
+
+const UnforwardedValidatedToggleControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof ToggleControl >,
+		'__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
+	const valueRef = useRef< Value >( restProps.checked );
+
+	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
+	// so we need to set it manually.
+	useEffect( () => {
+		if ( validityTargetRef.current ) {
+			validityTargetRef.current.required = required ?? false;
+		}
+	}, [ required ] );
+
+	return (
+		<ControlWithError
+			required={ required }
+			markWhenOptional={ markWhenOptional }
+			customValidator={ () => {
+				return customValidator?.( valueRef.current );
+			} }
+			getValidityTarget={ () => validityTargetRef.current }
+		>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				ref={ mergedRefs }
+				onChange={ ( value ) => {
+					valueRef.current = value;
+					onChange?.( value );
+				} }
+				{ ...restProps }
+			/>
+		</ControlWithError>
+	);
+};
+
+export const ValidatedToggleControl = forwardRef(
+	UnforwardedValidatedToggleControl
+);
diff --git a/packages/components/src/validated-form-controls/components/toggle-group-control.tsx b/packages/components/src/validated-form-controls/components/toggle-group-control.tsx
new file mode 100644
index 00000000000000..16feee33830ea3
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/toggle-group-control.tsx
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useId, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import { ToggleGroupControl } from '../../toggle-group-control';
+import type { ToggleGroupControlProps } from '../../toggle-group-control/types';
+
+type Value = ToggleGroupControlProps[ 'value' ];
+
+const UnforwardedValidatedToggleGroupControl = (
+	{
+		required,
+		customValidator,
+		onChange,
+		markWhenOptional,
+		...restProps
+	}: Omit<
+		React.ComponentProps< typeof ToggleGroupControl >,
+		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+	> &
+		ValidatedControlProps< Value >,
+	forwardedRef: React.ForwardedRef< HTMLInputElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+	const valueRef = useRef< Value >( restProps.value );
+
+	const nameAttr = useId();
+
+	return (
+		<div className="components-validated-control__wrapper-with-error-delegate">
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				customValidator={ () => {
+					return customValidator?.( valueRef.current );
+				} }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<ToggleGroupControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					ref={ forwardedRef }
+					// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
+					// setting a value has a visual bug.
+					onChange={ ( value ) => {
+						valueRef.current = value;
+						onChange?.( value );
+					} }
+					{ ...restProps }
+				/>
+			</ControlWithError>
+			<input
+				className="components-validated-control__error-delegate"
+				type="radio"
+				ref={ validityTargetRef }
+				required={ required }
+				checked={ restProps.value !== null }
+				tabIndex={ -1 }
+				// A name attribute is needed for the `required` behavior to work.
+				name={ nameAttr }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLButtonElement | HTMLInputElement >(
+							'[data-active-item="true"]'
+						)
+						?.focus();
+				} }
+			/>
+		</div>
+	);
+};
+
+export const ValidatedToggleGroupControl = forwardRef(
+	UnforwardedValidatedToggleGroupControl
+);
diff --git a/packages/components/src/validated-form-controls/components/types.ts b/packages/components/src/validated-form-controls/components/types.ts
new file mode 100644
index 00000000000000..83483bb8438cd1
--- /dev/null
+++ b/packages/components/src/validated-form-controls/components/types.ts
@@ -0,0 +1,28 @@
+export type ValidatedControlProps< V > = {
+	/**
+	 * Whether the control is required.
+	 * @default false
+	 */
+	required?: boolean;
+	/**
+	 * Label the control as "optional" when _not_ `required`, instead of the inverse.
+	 * @default false
+	 */
+	markWhenOptional?: boolean;
+	/**
+	 * A function that returns a custom validity message when applicable. This error message will be applied to the
+	 * underlying element using the native [`setCustomValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity).
+	 * This means the custom validator will be run _in addition_ to any other HTML attribute-based validation, and
+	 * will be prioritized over any existing validity messages dictated by the HTML attributes.
+	 * An empty string or `undefined` return value will clear any existing custom validity message.
+	 *
+	 * Make sure you don't programatically pass a value (such as an initial value) to the control component
+	 * that fails this validator, because the validator will only run for user-initiated changes.
+	 *
+	 * Always prefer using standard HTML attributes like `required` and `min`/`max` over custom validators
+	 * when possible, as they are simpler and have localized error messages built in.
+	 */
+	// TODO: Technically, we could add an optional `customValidity` string prop so the consumer can set
+	// an error message at any point in time. We should wait until we have a use case though.
+	customValidator?: ( currentValue: V ) => string | void;
+};
diff --git a/packages/components/src/validated-form-controls/control-with-error.tsx b/packages/components/src/validated-form-controls/control-with-error.tsx
new file mode 100644
index 00000000000000..925b9f66119ec2
--- /dev/null
+++ b/packages/components/src/validated-form-controls/control-with-error.tsx
@@ -0,0 +1,198 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { error } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import {
+	cloneElement,
+	forwardRef,
+	useEffect,
+	useState,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+
+import Icon from '../icon';
+
+function appendRequiredIndicator(
+	label: React.ReactNode,
+	required: boolean | undefined,
+	markWhenOptional: boolean | undefined
+) {
+	if ( required && ! markWhenOptional ) {
+		return (
+			<>
+				{ label } { `(${ __( 'Required' ) })` }
+			</>
+		);
+	}
+	if ( ! required && markWhenOptional ) {
+		return (
+			<>
+				{ label } { `(${ __( 'Optional' ) })` }
+			</>
+		);
+	}
+	return label;
+}
+
+/**
+ * HTML elements that support the Constraint Validation API.
+ *
+ * Here, we exclude HTMLButtonElement because although it does technically support the API,
+ * normal buttons are actually exempted from any validation.
+ * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate
+ */
+type ValidityTarget =
+	| HTMLFieldSetElement
+	| HTMLInputElement
+	| HTMLSelectElement
+	| HTMLTextAreaElement;
+
+function UnforwardedControlWithError< C extends React.ReactElement >(
+	{
+		required,
+		markWhenOptional,
+		customValidator,
+		getValidityTarget,
+		children,
+	}: {
+		/**
+		 * Whether the control is required.
+		 */
+		required?: boolean;
+		/**
+		 * Label the control as "optional" when _not_ `required`, instead of the inverse.
+		 */
+		markWhenOptional?: boolean;
+		/**
+		 * A function that returns a custom validity message when applicable.
+		 *
+		 * This message will be applied to the element returned by `getValidityTarget`.
+		 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity
+		 */
+		customValidator?: () => string | void;
+		/**
+		 * A function that returns the actual element on which the validity data should be applied.
+		 */
+		getValidityTarget: () => ValidityTarget | null | undefined;
+		/**
+		 * The control component to apply validation to.
+		 */
+		children: C;
+	},
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) {
+	const [ errorMessage, setErrorMessage ] = useState< string | undefined >();
+	const [ isTouched, setIsTouched ] = useState( false );
+
+	// Ensure that error messages are visible after user attemps to submit a form
+	// with multiple invalid fields.
+	useEffect( () => {
+		const validityTarget = getValidityTarget();
+		const showValidationMessage = () =>
+			setErrorMessage( validityTarget?.validationMessage );
+
+		validityTarget?.addEventListener( 'invalid', showValidationMessage );
+
+		return () => {
+			validityTarget?.removeEventListener(
+				'invalid',
+				showValidationMessage
+			);
+		};
+	} );
+
+	const validate = () => {
+		const message = customValidator?.();
+		const validityTarget = getValidityTarget();
+
+		validityTarget?.setCustomValidity( message ?? '' );
+		setErrorMessage( validityTarget?.validationMessage );
+	};
+
+	const onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {
+		// Only consider "blurred from the component" if focus has fully left the wrapping div.
+		// This prevents unnecessary blurs from components with multiple focusable elements.
+		if (
+			! event.relatedTarget ||
+			! event.currentTarget.contains( event.relatedTarget )
+		) {
+			setIsTouched( true );
+
+			const validityTarget = getValidityTarget();
+
+			// Prevents a double flash of the native error tooltip when the control is already showing one.
+			if ( ! validityTarget?.validity.valid ) {
+				if ( ! errorMessage ) {
+					setErrorMessage( validityTarget?.validationMessage );
+				}
+				return;
+			}
+
+			validate();
+		}
+	};
+
+	const onChange = ( ...args: unknown[] ) => {
+		children.props.onChange?.( ...args );
+
+		// Only validate incrementally if the field has blurred at least once,
+		// or currently has an error message.
+		if ( isTouched || errorMessage ) {
+			validate();
+		}
+	};
+
+	const onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {
+		// Ensures that custom validators are triggered when the user submits by pressing Enter,
+		// without ever blurring the control.
+		if ( event.key === 'Enter' ) {
+			validate();
+		}
+	};
+
+	return (
+		// Disable reason: Just listening to a bubbled event, not for interaction.
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			className="components-validated-control"
+			ref={ forwardedRef }
+			onBlur={ onBlur }
+			onKeyDown={ withIgnoreIMEEvents( onKeyDown ) }
+		>
+			{ cloneElement( children, {
+				label: appendRequiredIndicator(
+					children.props.label,
+					required,
+					markWhenOptional
+				),
+				onChange,
+				required,
+			} ) }
+			<div aria-live="polite">
+				{ errorMessage && (
+					<p className="components-validated-control__error">
+						<Icon
+							className="components-validated-control__error-icon"
+							icon={ error }
+							size={ 16 }
+							fill="currentColor"
+						/>
+						{ errorMessage }
+					</p>
+				) }
+			</div>
+		</div>
+	);
+}
+
+export const ControlWithError = forwardRef( UnforwardedControlWithError );
diff --git a/packages/components/src/validated-form-controls/index.ts b/packages/components/src/validated-form-controls/index.ts
new file mode 100644
index 00000000000000..c24740c65ec8af
--- /dev/null
+++ b/packages/components/src/validated-form-controls/index.ts
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './control-with-error';
diff --git a/packages/components/src/validated-form-controls/style.scss b/packages/components/src/validated-form-controls/style.scss
new file mode 100644
index 00000000000000..1067ab8092b1e1
--- /dev/null
+++ b/packages/components/src/validated-form-controls/style.scss
@@ -0,0 +1,75 @@
+.components-validated-control {
+	// For components based on InputBase
+	&:has(:is(input, select):user-invalid)
+	.components-input-control__backdrop {
+		--wp-components-color-accent: $alert-red;
+		border-color: $alert-red;
+	}
+
+	// For TextControl, TextareaControl
+	:is(textarea, input[type="text"]):user-invalid {
+		--wp-admin-theme-color: $alert-red;
+		--wp-components-color-accent: $alert-red;
+		border-color: $alert-red;
+	}
+
+	// For ComboboxControl
+	.components-combobox-control__suggestions-container:has(
+	input:user-invalid
+):not(:has([aria-expanded="true"])) {
+		border-color: $alert-red;
+	}
+}
+
+.components-validated-control__wrapper-with-error-delegate {
+	position: relative;
+
+	// For CustomSelectControl
+	&:has(select:user-invalid) .components-input-control__backdrop {
+		--wp-components-color-accent: $alert-red;
+		border-color: $alert-red;
+	}
+
+	// For ToggleGroupControl
+	&:has(input[type="radio"]:invalid) {
+		--wp-components-color-accent: $alert-red;
+	}
+}
+
+.components-validated-control__error-delegate {
+	position: absolute;
+	top: 0;
+	height: 100%;
+	width: 100%;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.components-validated-control__error {
+	display: flex;
+	align-items: flex-start;
+	gap: 4px;
+	margin: 8px 0 0;
+	font-family: $font-family-body;
+	font-size: 0.75rem;
+	line-height: 16px; // matches the icon size
+	color: $alert-red;
+	animation:
+		components-validated-control__error-jump 0.2s
+		cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+
+.components-validated-control__error-icon {
+	flex-shrink: 0;
+}
+
+@keyframes components-validated-control__error-jump {
+	0% {
+		transform: translateY(-4px);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 4de2f985889da3..d32d4c027a84b7 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/compose/package.json b/packages/compose/package.json
index fb53be933b1b74..c70b8dd64c3f16 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/compose/src/hooks/use-drop-zone/README.md b/packages/compose/src/hooks/use-drop-zone/README.md
index 7f6f1febc1bb7b..f35440c9f581f0 100644
--- a/packages/compose/src/hooks/use-drop-zone/README.md
+++ b/packages/compose/src/hooks/use-drop-zone/README.md
@@ -16,10 +16,10 @@ const WithWrapperDropZoneElement = () => {
 	const dropZoneRef = useDropZone(
 		{
 			dropZoneElement,
-			onDrop() => {
+			onDrop() {
 				console.log( 'Dropped within the drop zone.' );
 			},
-			onDragEnter() => {
+			onDragEnter() {
 				console.log( 'Dragging within the drop zone' );
 			}
 		}
@@ -37,10 +37,10 @@ const WithWrapperDropZoneElement = () => {
 const WithoutWrapperDropZoneElement = () => {
 	const dropZoneRef = useDropZone(
 		{
-			onDrop() => {
+			onDrop() {
 				console.log( 'Dropped within the drop zone.' );
 			},
-			onDragEnter() => {
+			onDragEnter() {
 				console.log( 'Dragging within the drop zone' );
 			}
 		}
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index 8c0a7961f507d8..7ac4a69b650253 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index d6ac3ce3a82a18..a6ace778fe9024 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 25e1f6dbc47d20..dfcd342171c6eb 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+-   Fixed the TS type for meta values for core entities ([#70788](https://github.com/WordPress/gutenberg/pull/70788))
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 51e88c32290381..40139b2e84630d 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/src/entities.js b/packages/core-data/src/entities.js
index a4010274f547db..4cba99845d5bc7 100644
--- a/packages/core-data/src/entities.js
+++ b/packages/core-data/src/entities.js
@@ -379,6 +379,7 @@ async function loadTaxonomyEntities() {
 			baseURLParams: { context: 'edit' },
 			name,
 			label: taxonomy.name,
+			getTitle: ( record ) => record?.name,
 		};
 	} );
 }
diff --git a/packages/core-data/src/entity-types/attachment.ts b/packages/core-data/src/entity-types/attachment.ts
index 3d4e6814e29cf6..78d079b03be74e 100644
--- a/packages/core-data/src/entity-types/attachment.ts
+++ b/packages/core-data/src/entity-types/attachment.ts
@@ -123,7 +123,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/comment.ts b/packages/core-data/src/entity-types/comment.ts
index fee7f1faec7840..290562dbce3e6a 100644
--- a/packages/core-data/src/entity-types/comment.ts
+++ b/packages/core-data/src/entity-types/comment.ts
@@ -83,7 +83,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/nav-menu-item.ts b/packages/core-data/src/entity-types/nav-menu-item.ts
index 26a4d07d1e075b..6a38f725999151 100644
--- a/packages/core-data/src/entity-types/nav-menu-item.ts
+++ b/packages/core-data/src/entity-types/nav-menu-item.ts
@@ -98,7 +98,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/nav-menu.ts b/packages/core-data/src/entity-types/nav-menu.ts
index 4626281ce1172e..7ea095bccd9f30 100644
--- a/packages/core-data/src/entity-types/nav-menu.ts
+++ b/packages/core-data/src/entity-types/nav-menu.ts
@@ -28,7 +28,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/page.ts b/packages/core-data/src/entity-types/page.ts
index 4bdf583fe48800..3af2d697c6712a 100644
--- a/packages/core-data/src/entity-types/page.ts
+++ b/packages/core-data/src/entity-types/page.ts
@@ -127,7 +127,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/post-revision.ts b/packages/core-data/src/entity-types/post-revision.ts
index 354a3fc02af704..3b9c5ede0ba0e7 100644
--- a/packages/core-data/src/entity-types/post-revision.ts
+++ b/packages/core-data/src/entity-types/post-revision.ts
@@ -60,7 +60,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/post.ts b/packages/core-data/src/entity-types/post.ts
index bcde222281cf09..31b92af1a5716f 100644
--- a/packages/core-data/src/entity-types/post.ts
+++ b/packages/core-data/src/entity-types/post.ts
@@ -124,7 +124,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/term.ts b/packages/core-data/src/entity-types/term.ts
index f007832d7e7553..3d3e4cf91eff56 100644
--- a/packages/core-data/src/entity-types/term.ts
+++ b/packages/core-data/src/entity-types/term.ts
@@ -44,7 +44,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/entity-types/user.ts b/packages/core-data/src/entity-types/user.ts
index 9de22efb3d7940..ead2ee4777c32f 100644
--- a/packages/core-data/src/entity-types/user.ts
+++ b/packages/core-data/src/entity-types/user.ts
@@ -101,7 +101,7 @@ declare module './base-entity-records' {
 			 * Meta fields.
 			 */
 			meta: ContextualField<
-				Record< string, string >,
+				Record< string, unknown >,
 				'view' | 'edit',
 				C
 			>;
diff --git a/packages/core-data/src/hooks/test/use-entity-records.js b/packages/core-data/src/hooks/test/use-entity-records.js
index f1d69e85a051dc..6e816db57498eb 100644
--- a/packages/core-data/src/hooks/test/use-entity-records.js
+++ b/packages/core-data/src/hooks/test/use-entity-records.js
@@ -15,7 +15,9 @@ import { render, waitFor } from '@testing-library/react';
  * Internal dependencies
  */
 import { store as coreDataStore } from '../../index';
-import useEntityRecords from '../use-entity-records';
+import useEntityRecords, {
+	useEntityRecordsWithPermissions,
+} from '../use-entity-records';
 
 describe( 'useEntityRecords', () => {
 	let registry;
@@ -74,3 +76,104 @@ describe( 'useEntityRecords', () => {
 		} );
 	} );
 } );
+
+describe( 'useEntityRecordsWithPermissions', () => {
+	let registry;
+
+	beforeEach( () => {
+		registry = createRegistry();
+		registry.register( coreDataStore );
+
+		// Mock the post entity configuration
+		registry.dispatch( coreDataStore ).addEntities( [
+			{
+				name: 'post',
+				kind: 'postType',
+				baseURL: '/wp/v2/posts',
+				baseURLParams: { context: 'edit' },
+			},
+		] );
+	} );
+
+	const TEST_RECORDS = [
+		{ id: 1, title: 'Post 1', slug: 'post-1' },
+		{ id: 2, title: 'Post 2', slug: 'post-2' },
+	];
+
+	const fieldsFromMock = Object.keys( TEST_RECORDS[ 0 ] ).join( ',' );
+
+	it( 'injects _links when _fields is provided', async () => {
+		// Mock the API response
+		triggerFetch.mockImplementation( () => TEST_RECORDS );
+
+		const TestComponent = () => {
+			useEntityRecordsWithPermissions( 'postType', 'post', {
+				_fields: fieldsFromMock,
+			} );
+			return <div />;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		// Should inject _links into the _fields parameter
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: `/wp/v2/posts?context=edit&_fields=${ encodeURIComponent(
+					fieldsFromMock + ',_links'
+				) }`,
+			} )
+		);
+	} );
+
+	it( 'does not modify query when _fields is not provided', async () => {
+		// Mock the API response
+		triggerFetch.mockImplementation( () => TEST_RECORDS );
+
+		const TestComponent = () => {
+			useEntityRecordsWithPermissions( 'postType', 'post', {} );
+			return <div />;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		// Should not add _fields when not originally provided
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: '/wp/v2/posts?context=edit',
+			} )
+		);
+	} );
+
+	it( 'avoids duplicate _links when already present in _fields', async () => {
+		// Mock the API response
+		triggerFetch.mockImplementation( () => TEST_RECORDS );
+
+		const fieldsWithLinks = fieldsFromMock + ',_links';
+		const TestComponent = () => {
+			useEntityRecordsWithPermissions( 'postType', 'post', {
+				_fields: fieldsWithLinks,
+			} );
+			return <div />;
+		};
+		render(
+			<RegistryProvider value={ registry }>
+				<TestComponent />
+			</RegistryProvider>
+		);
+
+		// Should not duplicate _links (deduplication working correctly)
+		await waitFor( () =>
+			expect( triggerFetch ).toHaveBeenCalledWith( {
+				path: `/wp/v2/posts?context=edit&_fields=${ encodeURIComponent(
+					fieldsWithLinks
+				) }`,
+			} )
+		);
+	} );
+} );
diff --git a/packages/core-data/src/hooks/use-entity-records.ts b/packages/core-data/src/hooks/use-entity-records.ts
index e2659b88bc0198..568da3b4eb9f3f 100644
--- a/packages/core-data/src/hooks/use-entity-records.ts
+++ b/packages/core-data/src/hooks/use-entity-records.ts
@@ -14,6 +14,7 @@ import { store as coreStore } from '../';
 import type { Options } from './use-entity-record';
 import type { Status } from './constants';
 import { unlock } from '../lock-unlock';
+import { getNormalizedCommaSeparable } from '../utils';
 
 interface EntityRecordsResolution< RecordType > {
 	/** The requested entity record */
@@ -168,7 +169,22 @@ export function useEntityRecordsWithPermissions< RecordType >(
 	const { records: data, ...ret } = useEntityRecords(
 		kind,
 		name,
-		queryArgs,
+		{
+			...queryArgs,
+			// If _fields is provided, we need to include _links in the request for permission caching to work.
+			...( queryArgs._fields
+				? {
+						_fields: [
+							...new Set( [
+								...( getNormalizedCommaSeparable(
+									queryArgs._fields
+								) || [] ),
+								'_links',
+							] ),
+						].join(),
+				  }
+				: {} ),
+		},
 		options
 	);
 	const ids = useMemo(
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
index 153e5d3575caa6..2544c0b3b5e67c 100644
--- a/packages/core-data/src/private-selectors.ts
+++ b/packages/core-data/src/private-selectors.ts
@@ -138,6 +138,7 @@ export const getHomePage = createRegistrySelector( ( select ) =>
 				'root',
 				'__unstableBase'
 			) as SiteData | undefined;
+			// Still resolving getEntityRecord.
 			if ( ! siteData ) {
 				return null;
 			}
@@ -153,6 +154,10 @@ export const getHomePage = createRegistrySelector( ( select ) =>
 			).getDefaultTemplateId( {
 				slug: 'front-page',
 			} );
+			// Still resolving getDefaultTemplateId.
+			if ( ! frontPageTemplateId ) {
+				return null;
+			}
 			return { postType: 'wp_template', postId: frontPageTemplateId };
 		},
 		( state ) => [
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 173cfbd8833965..2da5778580d63a 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -365,13 +365,19 @@ export const getEntityRecords =
 				// the `getEntityRecord` and `canUser` selectors in addition to `getEntityRecords`.
 				// See https://github.com/WordPress/gutenberg/pull/26575
 				// See https://github.com/WordPress/gutenberg/pull/64504
-				if ( ! query?._fields && ! query.context ) {
+				// See https://github.com/WordPress/gutenberg/pull/70738
+				if ( ! query.context ) {
 					const targetHints = records
-						.filter( ( record ) => record?.[ key ] )
+						.filter(
+							( record ) =>
+								!! record?.[ key ] &&
+								!! record?._links?.self?.[ 0 ]?.targetHints
+									?.allow
+						)
 						.map( ( record ) => ( {
 							id: record[ key ],
 							permissions: getUserPermissionsFromAllowHeader(
-								record?._links?.self?.[ 0 ].targetHints.allow
+								record._links.self[ 0 ].targetHints.allow
 							),
 						} ) );
 
@@ -394,17 +400,22 @@ export const getEntityRecords =
 						}
 					}
 
-					dispatch.receiveUserPermissions(
-						receiveUserPermissionArgs
-					);
-					dispatch.finishResolutions(
-						'getEntityRecord',
-						getResolutionsArgs( records )
-					);
-					dispatch.finishResolutions(
-						'canUser',
-						canUserResolutionsArgs
-					);
+					if ( targetHints.length > 0 ) {
+						dispatch.receiveUserPermissions(
+							receiveUserPermissionArgs
+						);
+						dispatch.finishResolutions(
+							'canUser',
+							canUserResolutionsArgs
+						);
+					}
+
+					if ( ! query?._fields ) {
+						dispatch.finishResolutions(
+							'getEntityRecord',
+							getResolutionsArgs( records )
+						);
+					}
 				}
 
 				dispatch.__unstableReleaseStoreLock( lock );
diff --git a/packages/core-data/src/test/resolvers.js b/packages/core-data/src/test/resolvers.js
index c10b8257b3d02b..abec7a22e75530 100644
--- a/packages/core-data/src/test/resolvers.js
+++ b/packages/core-data/src/test/resolvers.js
@@ -135,6 +135,12 @@ describe( 'getEntityRecords', () => {
 			baseURL: '/wp/v2/types',
 			baseURLParams: { context: 'edit' },
 		},
+		{
+			name: 'post',
+			kind: 'postType',
+			baseURL: '/wp/v2/posts',
+			baseURLParams: { context: 'edit' },
+		},
 	];
 	const registry = { batch: ( callback ) => callback() };
 	const resolveSelect = { getEntitiesConfig: jest.fn( () => ENTITIES ) };
@@ -234,6 +240,101 @@ describe( 'getEntityRecords', () => {
 			[ ENTITIES[ 1 ].kind, ENTITIES[ 1 ].name, 2 ],
 		] );
 	} );
+
+	it( 'caches permissions but does not mark entity records as resolved when using _fields', async () => {
+		const finishResolutions = jest.fn();
+		const dispatch = Object.assign( jest.fn(), {
+			receiveEntityRecords: jest.fn(),
+			receiveUserPermissions: jest.fn(),
+			__unstableAcquireStoreLock: jest.fn(),
+			__unstableReleaseStoreLock: jest.fn(),
+			finishResolutions,
+		} );
+
+		// Provide response with _links structure
+		const postsWithLinks = [
+			{
+				id: 1,
+				title: 'Hello World',
+				slug: 'hello-world',
+				_links: {
+					self: [
+						{
+							targetHints: {
+								allow: [ 'GET', 'POST', 'PUT', 'DELETE' ],
+							},
+						},
+					],
+				},
+			},
+		];
+
+		triggerFetch.mockImplementation( () => postsWithLinks );
+
+		await getEntityRecords( 'postType', 'post', {
+			_fields: Object.keys( postsWithLinks[ 0 ] ).join( ',' ),
+		} )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
+
+		// Permissions should have been cached
+		expect( dispatch.receiveUserPermissions ).toHaveBeenCalled();
+		expect( finishResolutions ).toHaveBeenCalledWith(
+			'canUser',
+			expect.any( Array )
+		);
+
+		// But individual entity records should NOT be marked as resolved
+		expect( finishResolutions ).not.toHaveBeenCalledWith(
+			'getEntityRecord',
+			expect.any( Array )
+		);
+	} );
+
+	it( 'does not cache permissions when _links field is missing from response', async () => {
+		const finishResolutions = jest.fn();
+		const dispatch = Object.assign( jest.fn(), {
+			receiveEntityRecords: jest.fn(),
+			receiveUserPermissions: jest.fn(),
+			__unstableAcquireStoreLock: jest.fn(),
+			__unstableReleaseStoreLock: jest.fn(),
+			finishResolutions,
+		} );
+
+		// Provide response without _links structure
+		const postsWithoutLinks = [
+			{
+				id: 1,
+				title: 'Hello World',
+				slug: 'hello-world',
+			},
+		];
+
+		triggerFetch.mockImplementation( () => postsWithoutLinks );
+
+		await getEntityRecords( 'postType', 'post', {
+			_fields: Object.keys( postsWithoutLinks[ 0 ] ).join( ',' ),
+		} )( {
+			dispatch,
+			registry,
+			resolveSelect,
+		} );
+
+		// Permissions should NOT have been cached
+		expect( dispatch.receiveUserPermissions ).not.toHaveBeenCalled();
+		expect( finishResolutions ).not.toHaveBeenCalledWith(
+			'canUser',
+			expect.any( Array )
+		);
+
+		// Individual entity records should NOT be marked as resolved
+		expect( finishResolutions ).not.toHaveBeenCalledWith(
+			'getEntityRecord',
+			expect.any( Array )
+		);
+	} );
 } );
 
 describe( 'getEmbedPreview', () => {
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 44b8b173d6e872..f7536910190b23 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 0cc33884783a49..9532d3d8bcf3e0 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index c01d77a862e42b..8512e54c0088a7 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index c376811f30ca82..5f6888b05e856e 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 4.70.0 (2025-07-23)
+
+## 4.69.0 (2025-06-25)
+
+## 4.68.0 (2025-06-04)
+
+## 4.67.0 (2025-05-22)
+
+## 4.66.0 (2025-05-07)
+
+### Enhancement
+
+-   Add support for `--textdomain` flag to create block tool ([#69802](https://github.com/WordPress/gutenberg/pull/69802)).
+
+## 4.65.0 (2025-04-11)
+
 ## 4.64.0 (2025-03-27)
 
 ## 4.63.0 (2025-03-13)
diff --git a/packages/create-block/README.md b/packages/create-block/README.md
index 907121d3d466a7..7240f25fac5a00 100644
--- a/packages/create-block/README.md
+++ b/packages/create-block/README.md
@@ -40,6 +40,19 @@ $ npx @wordpress/create-block@latest [options] [slug]
 
 When no `slug` is provided, the script will run in interactive mode and will start prompting for the input required (`slug`, title, namespace...) to scaffold the project.
 
+### `namespace`
+
+By default, blocks are created with the `create-block` namespace. You should specify your own unique namespace:
+
+```bash
+$ npx @wordpress/create-block@latest my-block --namespace=my-namespace
+```
+
+This creates `my-namespace/my-block` instead of `create-block/my-block`.
+
+If you've already created a block, update the namespace in:
+- `block.json` - the `name` property
+
 ### `slug`
 
 The use of `slug` is optional.
@@ -67,6 +80,7 @@ The rest of the configuration is set to all default values unless overridden wit
 --wp-scripts                 enable integration with `@wordpress/scripts` package
 --no-wp-scripts              disable integration with `@wordpress/scripts` package
 --wp-env                     enable integration with `@wordpress/env` package
+--textdomain <value>         text domain for internationalization
 -h, --help                   output usage information
 ```
 
@@ -108,6 +122,14 @@ With this argument, the `create-block` package will add to the generated plugin
 $ npx @wordpress/create-block@latest --wp-env
 ```
 
+#### `--textdomain`
+
+With this argument, the `create-block` package will a generate a block with the provided text domain. If not specified, the block’s slug is used as the default text domain.
+
+```bash
+$ npx @wordpress/create-block@latest --textdomain my-custom-domain
+```
+
 #### `--help`
 
 With this argument, the `create-block` package outputs usage information.
diff --git a/packages/create-block/lib/index.js b/packages/create-block/lib/index.js
index ccc2e91b106e20..105660de416182 100644
--- a/packages/create-block/lib/index.js
+++ b/packages/create-block/lib/index.js
@@ -63,6 +63,7 @@ program
 		'disable integration with `@wordpress/scripts` package'
 	)
 	.option( '--wp-env', 'enable integration with `@wordpress/env` package' )
+	.option( '--textdomain <value>', 'text domain for internationalization' )
 	.action(
 		async (
 			slug,
@@ -77,6 +78,7 @@ program
 				wpEnv,
 				variant,
 				targetDir,
+				textdomain,
 			}
 		) => {
 			try {
@@ -110,6 +112,7 @@ program
 						wpScripts,
 						wpEnv,
 						targetDir,
+						textdomain,
 					} ).filter( ( [ , value ] ) => value !== undefined )
 				);
 
@@ -158,7 +161,7 @@ program
 							'description',
 							'dashicon',
 							'category',
-							! plugin && 'textdomain',
+							! plugin && ! textdomain && 'textdomain',
 						].filter( Boolean ),
 						variant,
 						optionsValues
@@ -216,5 +219,8 @@ program
 		log.info(
 			`  $ ${ commandName } todo-list --template es5 --title "TODO List"`
 		);
+		log.info(
+			`  $ ${ commandName } todo-list --no-plugin --textdomain=my-plugin`
+		);
 	} )
 	.parse( process.argv );
diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache
index f839b1d3b42064..be2b6f5b4e03b1 100644
--- a/packages/create-block/lib/templates/plugin/$slug.php.mustache
+++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache
@@ -37,7 +37,17 @@
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
-
+{{#wpScripts}}
+/**
+ * Registers the block using a `blocks-manifest.php` file, which improves the performance of block type registration.
+ * Behind the scenes, it also registers all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/
+ * @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/
+ */
+{{/wpScripts}}
+{{^wpScripts}}
 /**
  * Registers the block using the metadata loaded from the `block.json` file.
  * Behind the scenes, it registers also all assets so they can be enqueued
@@ -45,18 +55,38 @@ if ( ! defined( 'ABSPATH' ) ) {
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
+{{/wpScripts}}
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 {{#wpScripts}}
-	if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) { // Function introduced in WordPress 6.8.
+	/**
+	 * Registers the block(s) metadata from the `blocks-manifest.php` and registers the block type(s)
+	 * based on the registered block metadata.
+	 * Added in WordPress 6.8 to simplify the block metadata registration process added in WordPress 6.7.
+	 *
+	 * @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/
+	 */
+	if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) {
 		wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
-	} else {
-		if ( function_exists( 'wp_register_block_metadata_collection' ) ) { // Function introduced in WordPress 6.7.
-			wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
-		}
-		$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
-		foreach ( array_keys( $manifest_data ) as $block_type ) {
-			register_block_type( __DIR__ . "/build/{$block_type}" );
-		}
+		return;
+	}
+
+	/**
+	 * Registers the block(s) metadata from the `blocks-manifest.php` file.
+	 * Added to WordPress 6.7 to improve the performance of block type registration.
+	 *
+	 * @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/
+	 */
+	if ( function_exists( 'wp_register_block_metadata_collection' ) ) {
+		wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
+	}
+	/**
+	 * Registers the block type(s) in the `blocks-manifest.php` file.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/register_block_type/
+	 */
+	$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
+	foreach ( array_keys( $manifest_data ) as $block_type ) {
+		register_block_type( __DIR__ . "/build/{$block_type}" );
 	}
 {{/wpScripts}}
 {{^wpScripts}}
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 2a95eae51ca008..c08051b7fd0564 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.64.0",
+	"version": "4.70.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 7c3383b1b0f071..54f1589759c2e6 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index a810085a361a99..d7085cb0075f87 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
index b4c7a1bcd46d01..23f54ff2985fba 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/index.js
@@ -13,6 +13,7 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -90,15 +91,18 @@ export default function KeyboardShortcutHelpModal( {
 	toggleModal,
 } ) {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	registerShortcut( {
-		name: 'core/customize-widgets/keyboard-shortcuts',
-		category: 'main',
-		description: __( 'Display these keyboard shortcuts.' ),
-		keyCombination: {
-			modifier: 'access',
-			character: 'h',
-		},
-	} );
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/customize-widgets/keyboard-shortcuts',
+			category: 'main',
+			description: __( 'Display these keyboard shortcuts.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: 'h',
+			},
+		} );
+	}, [ registerShortcut ] );
 
 	useShortcut( 'core/customize-widgets/keyboard-shortcuts', toggleModal );
 
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index 778758775b977d..6741d3a62a929e 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index 5cb1f432842eb0..dbb126a628802f 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 89e10fe101ced2..a00f6338050fd6 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 10.27.0 (2025-07-23)
+
+## 10.26.0 (2025-06-25)
+
+### Bug Fixes
+
+-   Add support for private selectors to `resolveSelect` and `suspendSelect` ([#52036](https://github.com/WordPress/gutenberg/pull/52036)).
+
+## 10.25.0 (2025-06-04)
+
+## 10.24.0 (2025-05-22)
+
+## 10.23.0 (2025-05-07)
+
+## 10.22.0 (2025-04-11)
+
 ## 10.21.0 (2025-03-27)
 
 ## 10.20.0 (2025-03-13)
diff --git a/packages/data/package.json b/packages/data/package.json
index ffb7c9476b4214..f5c0174ea8d7c2 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.21.0",
+	"version": "10.27.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/src/redux-store/index.js b/packages/data/src/redux-store/index.js
index 6c20c8cb2bb3ec..4637f7393adb02 100644
--- a/packages/data/src/redux-store/index.js
+++ b/packages/data/src/redux-store/index.js
@@ -108,14 +108,18 @@ function createResolversCache() {
 	};
 }
 
-function createBindingCache( bind ) {
+function createBindingCache( getItem, bindItem ) {
 	const cache = new WeakMap();
 
 	return {
-		get( item, itemName ) {
+		get( itemName ) {
+			const item = getItem( itemName );
+			if ( ! item ) {
+				return null;
+			}
 			let boundItem = cache.get( item );
 			if ( ! boundItem ) {
-				boundItem = bind( item, itemName );
+				boundItem = bindItem( item, itemName );
 				cache.set( item, boundItem );
 			}
 			return boundItem;
@@ -123,6 +127,13 @@ function createBindingCache( bind ) {
 	};
 }
 
+function createPrivateProxy( publicItems, privateItems ) {
+	return new Proxy( publicItems, {
+		get: ( target, itemName ) =>
+			privateItems.get( itemName ) || Reflect.get( target, itemName ),
+	} );
+}
+
 /**
  * Creates a data store descriptor for the provided Redux store configuration containing
  * properties describing reducer, actions, selectors, controls and resolvers.
@@ -179,16 +190,20 @@ export default function createReduxStore( key, options ) {
 			 */
 			const listeners = new Set();
 			const reducer = options.reducer;
+
+			// Object that every thunk function receives as the first argument. It contains the
+			// `registry`, `dispatch`, `select` and `resolveSelect` fields. Some of them are
+			// constructed as getters to avoid circular dependencies.
 			const thunkArgs = {
 				registry,
 				get dispatch() {
-					return thunkActions;
+					return thunkDispatch;
 				},
 				get select() {
-					return thunkSelectors;
+					return thunkSelect;
 				},
 				get resolveSelect() {
-					return getResolveSelectors();
+					return resolveSelectors;
 				},
 			};
 
@@ -198,42 +213,61 @@ export default function createReduxStore( key, options ) {
 				registry,
 				thunkArgs
 			);
+
 			// Expose the private registration functions on the store
 			// so they can be copied to a sub registry in registry.js.
 			lock( store, privateRegistrationFunctions );
 			const resolversCache = createResolversCache();
 
+			// Binds an action creator (`action`) to the `store`, making it a callable function.
+			// These are the functions that are returned by `useDispatch`, for example.
+			// It always returns a `Promise`, although actions are not always async. That's an
+			// unfortunate backward compatibility measure.
 			function bindAction( action ) {
 				return ( ...args ) =>
 					Promise.resolve( store.dispatch( action( ...args ) ) );
 			}
 
+			/*
+			 * Object with all public actions, both metadata and store actions.
+			 */
 			const actions = {
 				...mapValues( metadataActions, bindAction ),
 				...mapValues( options.actions, bindAction ),
 			};
 
-			const boundPrivateActions = createBindingCache( bindAction );
-			const allActions = new Proxy( () => {}, {
-				get: ( target, prop ) => {
-					const privateAction = privateActions[ prop ];
-					return privateAction
-						? boundPrivateActions.get( privateAction, prop )
-						: actions[ prop ];
-				},
-			} );
+			// Object with both public and private actions. Private actions are accessed through a proxy,
+			// which looks them up in real time on the `privateActions` object. That's because private
+			// actions can be registered at any time with `registerPrivateActions`. Also once a private
+			// action creator is bound to the store, it is cached to give it a stable identity.
+			const allActions = createPrivateProxy(
+				actions,
+				createBindingCache(
+					( name ) => privateActions[ name ],
+					bindAction
+				)
+			);
 
-			const thunkActions = new Proxy( allActions, {
-				apply: ( target, thisArg, [ action ] ) =>
-					store.dispatch( action ),
-			} );
+			// An object that implements the `dispatch` object that is passed to thunk functions.
+			// It is callable (`dispatch( action )`) and also has methods (`dispatch.foo()`) that
+			// correspond to bound registered actions, both public and private. Implemented with the proxy
+			// `get` method, delegating to `allActions`.
+			const thunkDispatch = new Proxy(
+				( action ) => store.dispatch( action ),
+				{ get: ( target, name ) => allActions[ name ] }
+			);
 
+			// To the public `actions` object, add the "locked" `allActions` object. When used,
+			// `unlock( actions )` will return `allActions`, implementing a way how to get at the private actions.
 			lock( actions, allActions );
 
+			// If we have selector resolvers, convert them to a normalized form.
 			const resolvers = options.resolvers
-				? mapResolvers( options.resolvers )
+				? mapValues( options.resolvers, mapResolver )
 				: {};
 
+			// Bind a selector to the store. Call the selector with the current state, correct registry,
+			// and if there is a resolver, attach the resolver logic to the selector.
 			function bindSelector( selector, selectorName ) {
 				if ( selector.isRegistrySelector ) {
 					selector.registry = registry;
@@ -241,8 +275,7 @@ export default function createReduxStore( key, options ) {
 				const boundSelector = ( ...args ) => {
 					args = normalize( selector, args );
 					const state = store.__unstableOriginalGetState();
-					// Before calling the selector, switch to the correct
-					// registry.
+					// Before calling the selector, switch to the correct registry.
 					if ( selector.isRegistrySelector ) {
 						selector.registry = registry;
 					}
@@ -267,66 +300,137 @@ export default function createReduxStore( key, options ) {
 					selectorName,
 					resolver,
 					store,
-					resolversCache
+					resolversCache,
+					boundMetadataSelectors
 				);
 			}
 
+			// Metadata selectors are bound differently: different state (`state.metadata`), no resolvers,
+			// normalization depending on the target selector.
 			function bindMetadataSelector( metaDataSelector ) {
-				const boundSelector = ( ...args ) => {
-					const state = store.__unstableOriginalGetState();
-
-					const originalSelectorName = args && args[ 0 ];
-					const originalSelectorArgs = args && args[ 1 ];
-					const targetSelector =
-						options?.selectors?.[ originalSelectorName ];
-
+				const boundSelector = (
+					selectorName,
+					selectorArgs,
+					...args
+				) => {
 					// Normalize the arguments passed to the target selector.
-					if ( originalSelectorName && targetSelector ) {
-						args[ 1 ] = normalize(
-							targetSelector,
-							originalSelectorArgs
-						);
+					if ( selectorName ) {
+						const targetSelector =
+							options.selectors?.[ selectorName ];
+						if ( targetSelector ) {
+							selectorArgs = normalize(
+								targetSelector,
+								selectorArgs
+							);
+						}
 					}
 
-					return metaDataSelector( state.metadata, ...args );
+					const state = store.__unstableOriginalGetState();
+
+					return metaDataSelector(
+						state.metadata,
+						selectorName,
+						selectorArgs,
+						...args
+					);
 				};
 				boundSelector.hasResolver = false;
 				return boundSelector;
 			}
 
+			// Perform binding of both metadata and store selectors and combine them in one
+			// `selectors` object. These are all public selectors of the store.
+			const boundMetadataSelectors = mapValues(
+				metadataSelectors,
+				bindMetadataSelector
+			);
+
+			const boundSelectors = mapValues( options.selectors, bindSelector );
+
 			const selectors = {
-				...mapValues( metadataSelectors, bindMetadataSelector ),
-				...mapValues( options.selectors, bindSelector ),
+				...boundMetadataSelectors,
+				...boundSelectors,
 			};
 
-			const boundPrivateSelectors = createBindingCache( bindSelector );
+			// Cache of bould private selectors. They are bound only when first accessed, because
+			// new private selectors can be registered at any time (with `registerPrivateSelectors`).
+			// Once bound, they are cached to give them a stable identity.
+			const boundPrivateSelectors = createBindingCache(
+				( name ) => privateSelectors[ name ],
+				bindSelector
+			);
+
+			const allSelectors = createPrivateProxy(
+				selectors,
+				boundPrivateSelectors
+			);
 
 			// Pre-bind the private selectors that have been registered by the time of
 			// instantiation, so that registry selectors are bound to the registry.
-			for ( const [ selectorName, selector ] of Object.entries(
-				privateSelectors
-			) ) {
-				boundPrivateSelectors.get( selector, selectorName );
+			for ( const selectorName of Object.keys( privateSelectors ) ) {
+				boundPrivateSelectors.get( selectorName );
 			}
 
-			const allSelectors = new Proxy( () => {}, {
-				get: ( target, prop ) => {
-					const privateSelector = privateSelectors[ prop ];
-					return privateSelector
-						? boundPrivateSelectors.get( privateSelector, prop )
-						: selectors[ prop ];
-				},
-			} );
-
-			const thunkSelectors = new Proxy( allSelectors, {
-				apply: ( target, thisArg, [ selector ] ) =>
-					selector( store.__unstableOriginalGetState() ),
-			} );
+			// An object that implements the `select` object that is passed to thunk functions.
+			// It is callable (`select( selector )`) and also has methods (`select.foo()`) that
+			// correspond to bound registered selectors, both public and private. Implemented with the proxy
+			// `get` method, delegating to `allSelectors`.
+			const thunkSelect = new Proxy(
+				( selector ) => selector( store.__unstableOriginalGetState() ),
+				{ get: ( target, name ) => allSelectors[ name ] }
+			);
 
+			// To the public `selectors` object, add the "locked" `allSelectors` object. When used,
+			// `unlock( selectors )` will return `allSelectors`, implementing a way how to get at the private selectors.
 			lock( selectors, allSelectors );
 
-			const resolveSelectors = mapResolveSelectors( selectors, store );
-			const suspendSelectors = mapSuspendSelectors( selectors, store );
+			// For each selector, create a function that calls the selector, waits for resolution and returns
+			// a promise that resolves when the resolution is finished.
+			const bindResolveSelector = mapResolveSelector(
+				store,
+				boundMetadataSelectors
+			);
+
+			// Now apply this function to all bound selectors, public and private. We are excluding
+			// metadata selectors because they don't have resolvers.
+			const resolveSelectors = mapValues(
+				boundSelectors,
+				bindResolveSelector
+			);
+
+			const allResolveSelectors = createPrivateProxy(
+				resolveSelectors,
+				createBindingCache(
+					( name ) => boundPrivateSelectors.get( name ),
+					bindResolveSelector
+				)
+			);
+
+			// Lock the selectors so that `unlock( resolveSelectors )` returns `allResolveSelectors`.
+			lock( resolveSelectors, allResolveSelectors );
+
+			// Now, in a way very similar to `bindResolveSelector`, we create a function that maps
+			// selectors to functions that throw a suspense promise if not yet resolved.
+			const bindSuspendSelector = mapSuspendSelector(
+				store,
+				boundMetadataSelectors
+			);
+
+			const suspendSelectors = {
+				...boundMetadataSelectors, // no special suspense behavior
+				...mapValues( boundSelectors, bindSuspendSelector ),
+			};
+
+			const allSuspendSelectors = createPrivateProxy(
+				suspendSelectors,
+				createBindingCache(
+					( name ) => boundPrivateSelectors.get( name ),
+					bindSuspendSelector
+				)
+			);
+
+			// Lock the selectors so that `unlock( suspendSelectors )` returns 'allSuspendSelectors`.
+			lock( suspendSelectors, allSuspendSelectors );
 
 			const getSelectors = () => selectors;
 			const getActions = () => actions;
@@ -381,7 +485,7 @@ export default function createReduxStore( key, options ) {
 
 	// Expose the private registration functions on the store
 	// descriptor. That's a natural choice since that's where the
-	// public actions and selectors are stored .
+	// public actions and selectors are stored.
 	lock( storeDescriptor, privateRegistrationFunctions );
 
 	return storeDescriptor;
@@ -445,46 +549,37 @@ function instantiateReduxStore( key, options, registry, thunkArgs ) {
 }
 
 /**
- * Maps selectors to functions that return a resolution promise for them
+ * Maps selectors to functions that return a resolution promise for them.
  *
- * @param {Object} selectors Selectors to map.
- * @param {Object} store     The redux store the selectors select from.
+ * @param {Object} store                  The redux store the selectors are bound to.
+ * @param {Object} boundMetadataSelectors The bound metadata selectors.
  *
- * @return {Object} Selectors mapped to their resolution functions.
+ * @return {Function} Function that maps selectors to resolvers.
  */
-function mapResolveSelectors( selectors, store ) {
-	const {
-		getIsResolving,
-		hasStartedResolution,
-		hasFinishedResolution,
-		hasResolutionFailed,
-		isResolving,
-		getCachedResolvers,
-		getResolutionState,
-		getResolutionError,
-		hasResolvingSelectors,
-		countSelectorsByStatus,
-		...storeSelectors
-	} = selectors;
-
-	return mapValues( storeSelectors, ( selector, selectorName ) => {
+function mapResolveSelector( store, boundMetadataSelectors ) {
+	return ( selector, selectorName ) => {
 		// If the selector doesn't have a resolver, just convert the return value
 		// (including exceptions) to a Promise, no additional extra behavior is needed.
 		if ( ! selector.hasResolver ) {
 			return async ( ...args ) => selector.apply( null, args );
 		}
 
-		return ( ...args ) => {
-			return new Promise( ( resolve, reject ) => {
-				const hasFinished = () =>
-					selectors.hasFinishedResolution( selectorName, args );
-				const finalize = ( result ) => {
-					const hasFailed = selectors.hasResolutionFailed(
+		return ( ...args ) =>
+			new Promise( ( resolve, reject ) => {
+				const hasFinished = () => {
+					return boundMetadataSelectors.hasFinishedResolution(
 						selectorName,
 						args
 					);
+				};
+				const finalize = ( result ) => {
+					const hasFailed =
+						boundMetadataSelectors.hasResolutionFailed(
+							selectorName,
+							args
+						);
 					if ( hasFailed ) {
-						const error = selectors.getResolutionError(
+						const error = boundMetadataSelectors.getResolutionError(
 							selectorName,
 							args
 						);
@@ -494,6 +589,7 @@ function mapResolveSelectors( selectors, store ) {
 					}
 				};
 				const getResult = () => selector.apply( null, args );
+
 				// Trigger the selector (to trigger the resolver)
 				const result = getResult();
 				if ( hasFinished() ) {
@@ -507,20 +603,19 @@ function mapResolveSelectors( selectors, store ) {
 					}
 				} );
 			} );
-		};
-	} );
+	};
 }
 
 /**
  * Maps selectors to functions that throw a suspense promise if not yet resolved.
  *
- * @param {Object} selectors Selectors to map.
- * @param {Object} store     The redux store the selectors select from.
+ * @param {Object} store                  The redux store the selectors select from.
+ * @param {Object} boundMetadataSelectors The bound metadata selectors.
  *
- * @return {Object} Selectors mapped to their suspense functions.
+ * @return {Function} Function that maps selectors to their suspending versions.
  */
-function mapSuspendSelectors( selectors, store ) {
-	return mapValues( selectors, ( selector, selectorName ) => {
+function mapSuspendSelector( store, boundMetadataSelectors ) {
+	return ( selector, selectorName ) => {
 		// Selector without a resolver doesn't have any extra suspense behavior.
 		if ( ! selector.hasResolver ) {
 			return selector;
@@ -529,9 +624,22 @@ function mapSuspendSelectors( selectors, store ) {
 		return ( ...args ) => {
 			const result = selector.apply( null, args );
 
-			if ( selectors.hasFinishedResolution( selectorName, args ) ) {
-				if ( selectors.hasResolutionFailed( selectorName, args ) ) {
-					throw selectors.getResolutionError( selectorName, args );
+			if (
+				boundMetadataSelectors.hasFinishedResolution(
+					selectorName,
+					args
+				)
+			) {
+				if (
+					boundMetadataSelectors.hasResolutionFailed(
+						selectorName,
+						args
+					)
+				) {
+					throw boundMetadataSelectors.getResolutionError(
+						selectorName,
+						args
+					);
 				}
 
 				return result;
@@ -540,7 +648,10 @@ function mapSuspendSelectors( selectors, store ) {
 			throw new Promise( ( resolve ) => {
 				const unsubscribe = store.subscribe( () => {
 					if (
-						selectors.hasFinishedResolution( selectorName, args )
+						boundMetadataSelectors.hasFinishedResolution(
+							selectorName,
+							args
+						)
 					) {
 						resolve();
 						unsubscribe();
@@ -548,26 +659,24 @@ function mapSuspendSelectors( selectors, store ) {
 				} );
 			} );
 		};
-	} );
+	};
 }
 
 /**
- * Convert resolvers to a normalized form, an object with `fulfill` method and
+ * Convert a resolver to a normalized form, an object with `fulfill` method and
  * optional methods like `isFulfilled`.
  *
- * @param {Object} resolvers Resolver to convert
+ * @param {Function} resolver Resolver to convert
  */
-function mapResolvers( resolvers ) {
-	return mapValues( resolvers, ( resolver ) => {
-		if ( resolver.fulfill ) {
-			return resolver;
-		}
+function mapResolver( resolver ) {
+	if ( resolver.fulfill ) {
+		return resolver;
+	}
 
-		return {
-			...resolver, // Copy the enumerable properties of the resolver function.
-			fulfill: resolver, // Add the fulfill method.
-		};
-	} );
+	return {
+		...resolver, // Copy the enumerable properties of the resolver function.
+		fulfill: resolver, // Add the fulfill method.
+	};
 }
 
 /**
@@ -575,18 +684,20 @@ function mapResolvers( resolvers ) {
  * Resolvers are side effects invoked once per argument set of a given selector call,
  * used in ensuring that the data needs for the selector are satisfied.
  *
- * @param {Object} selector       The selector function to be bound.
- * @param {string} selectorName   The selector name.
- * @param {Object} resolver       Resolver to call.
- * @param {Object} store          The redux store to which the resolvers should be mapped.
- * @param {Object} resolversCache Resolvers Cache.
+ * @param {Object} selector               The selector function to be bound.
+ * @param {string} selectorName           The selector name.
+ * @param {Object} resolver               Resolver to call.
+ * @param {Object} store                  The redux store to which the resolvers should be mapped.
+ * @param {Object} resolversCache         Resolvers Cache.
+ * @param {Object} boundMetadataSelectors The bound metadata selectors.
  */
 function mapSelectorWithResolver(
 	selector,
 	selectorName,
 	resolver,
 	store,
-	resolversCache
+	resolversCache,
+	boundMetadataSelectors
 ) {
 	function fulfillSelector( args ) {
 		const state = store.getState();
@@ -599,14 +710,8 @@ function mapSelectorWithResolver(
 			return;
 		}
 
-		const { metadata } = store.__unstableOriginalGetState();
-
 		if (
-			metadataSelectors.hasStartedResolution(
-				metadata,
-				selectorName,
-				args
-			)
+			boundMetadataSelectors.hasStartedResolution( selectorName, args )
 		) {
 			return;
 		}
diff --git a/packages/data/src/redux-store/test/index.js b/packages/data/src/redux-store/test/index.js
index 1365ceab0d5a8d..364bb1fd031523 100644
--- a/packages/data/src/redux-store/test/index.js
+++ b/packages/data/src/redux-store/test/index.js
@@ -309,10 +309,11 @@ describe( 'normalizing args', () => {
 
 		expect( normalizingFunction ).toHaveBeenCalledWith( [ 'foo', 'bar' ] );
 
-		// Needs to be called twice:
+		// Needs to be called three times:
 		// 1. When the selector is called.
-		// 2. When the resolver is fulfilled.
-		expect( normalizingFunction ).toHaveBeenCalledTimes( 2 );
+		// 2. When the resolver check if it's already running.
+		// 3. When the resolver is fulfilled.
+		expect( normalizingFunction ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'should not call the __unstableNormalizeArgs method if there are no arguments passed to the selector (and thus the resolver)', async () => {
diff --git a/packages/data/src/test/privateAPIs.js b/packages/data/src/test/privateAPIs.js
index 22118ec58caa1d..7fa2c8b69fa945 100644
--- a/packages/data/src/test/privateAPIs.js
+++ b/packages/data/src/test/privateAPIs.js
@@ -124,6 +124,52 @@ describe( 'Private data APIs', () => {
 			);
 		} );
 
+		it( 'should support private selectors with resolvers', async () => {
+			const testStore = createReduxStore( 'test', {
+				reducer: ( state = {}, action ) => {
+					if ( action.type === 'RECEIVE' ) {
+						return { ...state, [ action.key ]: action.value };
+					}
+					return state;
+				},
+				selectors: {},
+				resolvers: {
+					get:
+						( key ) =>
+						async ( { dispatch } ) => {
+							const value = await ( 'resolved-' + key );
+							dispatch( { type: 'RECEIVE', key, value } );
+						},
+				},
+			} );
+			registry.register( testStore );
+			unlock( testStore ).registerPrivateSelectors( {
+				get: ( state, key ) => state[ key ],
+			} );
+
+			// Verify that the private selector is available in resolveSelect.
+			const resolved = await unlock(
+				registry.resolveSelect( testStore )
+			).get( 'x' );
+			expect( resolved ).toBe( 'resolved-x' );
+
+			// Verify that the private selector is available in suspendSelect.
+			let suspended;
+			try {
+				unlock( registry.suspendSelect( testStore ) ).get( 'y' );
+			} catch ( error ) {
+				suspended = error;
+			}
+
+			expect( suspended ).toBeInstanceOf( Promise );
+			await suspended;
+
+			// After the suspense promise resolves, the result should be ready.
+			expect(
+				unlock( registry.suspendSelect( testStore ) ).get( 'y' )
+			).toBe( 'resolved-y' );
+		} );
+
 		it( 'should give private selectors access to the state', () => {
 			const groceryStore = createStore();
 			unlock( groceryStore ).registerPrivateSelectors( {
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index f2d770e03ddf5d..f428730421bf36 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,60 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+- Fix `filterSortAndPaginate` to handle searching fields that have a type of `array` ([#70785](https://github.com/WordPress/gutenberg/pull/70785)).
+
+## 5.0.0 (2025-07-23)
+
+### Bug Fixes
+
+- Fix `filterSortAndPaginate` to handle undefined values for the `is` filter.
+- Fix the background color of the action column if the row is selected
+
+### Features
+
+- Add support for grouping items by a field in the `grid` layout by introducing a `groupByField` prop in the View object.
+- Add support for free composition in the `DataViews` component by exporting subcomponents: `<DataViews.ViewConfig />`, `<DataViews.Search />`, `<DataViews.Pagination />`, `<DataViews.LayoutSwitcher />`, `<DataViews.Layout />`, `<DataViews.FiltersToggle />`, `<DataViews.Filters />`, `<DataViews.BulkActionToolbar />`.
+- `select`, `text`, `email` controls: add `help` support from the field `description` prop.
+- `text`, `email` Edit control: add `help` support from the field `description` prop.
+- Add new Edit controls: `checkbox`, `toggleGroup`. In the `toggleGroup`, if the field elements (options) have a `description`, then the selected option's description will be also rendered.
+- Add new `media`, `boolean`, `email`, `array` and `date` field type definitions.
+- Field type definitions are now able to define a default `enableSorting` and `render` function.
+- Pin the actions column on the table view when the width is insufficient.
+- Enhance filter component styles.
+- Add user input filter support based on the `Edit` property of the field type definitions.
+- Add new filter operators: `lessThan`, `greaterThan`, `lessThanOrEqual`, `greaterThanOrEqual`, `contains`, `notContains`, `startsWith`, `between`, `on`, `notOn`, `before`, `after`, `inThePast`, `over`, `beforeInc`, and `afterInc`.
+- Add `align` to the `layout.styles` properties, for use in the DataViews table layout. Options are: `start`, `center`, and `end`.
+- Allow fields to opt-out of filtering via `field.filterBy: false`.
+- Update the field type definitions to declare the default and valid operators they support. Fields with no `type` property can use all operators; if none is provided in the field's config, they'll use `is` and `isNot` by default.
+- Adjust the spacing of the `DataForm` based on the type.
+- Add `label-position-side` classes to labels in the form field layouts. Ensure that labels in the panel view do not align center, and that all side labels are center aligned.
+- Allow readonly fields in DataForm when `readOnly` is set to `true`.
+- Adjust the padding when the component is placed inside a `Card`.
+- Introduce `perPageSizes` to control the available sizes of the items per page.
+- Align media styles in table view with list view for consistency.
+
+### Breaking Changes
+
+- Fields with `Edit` defined or `type` will automatically be considered as filters unless `filterBy` is set to `false`.
+- Add `renderItemLink` prop support in the `DataViews` component. It replaces `onClickItem`prop and allows integration with router libraries.
+
+### Internal
+
+- Adds new story that combines DataViews and DataForm.
+- Add a story for each FieldTypeDefinition.
+
+## 4.22.0 (2025-06-25)
+
+## 4.21.0 (2025-06-04)
+
+## 4.20.0 (2025-05-22)
+
+## 4.19.0 (2025-05-07)
+
+## 4.18.0 (2025-04-11)
+
 ## 4.17.0 (2025-03-27)
 
 ## 4.16.0 (2025-03-13)
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 0ed5b5742c53be..930282ce42bc62 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -207,15 +207,19 @@ Properties:
 -   `showMedia`: Whether the media should be shown in the UI. `true` by default.
 -   `showDescription`: Whether the description should be shown in the UI. `true` by default.
 -   `showLevels`: Whether to display the hierarchical levels for the data. `false` by default. See related `getItemLevel` DataView prop.
+-   `groupByField`: The id of the field used for grouping the dataset. So far, only the `grid` layout supports grouping.
 -   `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed.
 -   `layout`: config that is specific to a particular layout type.
 
 ##### Properties of `layout`
 
-| Properties of `layout`                                                              | Table | Grid | List |
-| ----------------------------------------------------------------------------------- | ----- | ---- | ---- |
-| `badgeFields`: a list of field's `id` to render without label and styled as badges. |       | ✓    |      |
-| `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column.  | ✓     |      |      |
+| Properties of `layout`                                                                      | Table | Grid | List |
+| ------------------------------------------------------------------------------------------- | ----- | ---- | ---- |
+| `badgeFields`: a list of field's `id` to render without label and styled as badges.         |       | ✓    |      |
+| `styles`: additional `width`, `maxWidth`, `minWidth`, `align` styles for each field column. | ✓     |      |      |
+
+**For column alignment (`align` property), follow these guidelines:**
+Right-align whenever the cell value is fundamentally quantitative—numbers, decimals, currency, percentages—so that digits and decimal points line up, aiding comparison and calculation. Otherwise, default to left-alignment for all other types (text, codes, labels, dates).
 
 #### `onChangeView`: `function`
 
@@ -298,7 +302,7 @@ const actions = [
 		icon: <Icon icon={ view } />,
 		isEligible: ( item ) => item.status === 'published',
 		callback: ( items ) => {
-			console.log( 'Viewing item:', items[0] );
+			console.log( 'Viewing item:', items[ 0 ] );
 		},
 	},
 	{
@@ -308,7 +312,7 @@ const actions = [
 		supportsBulk: true,
 		callback: ( items ) => {
 			console.log( 'Editing items:', items );
-		}
+		},
 	},
 	{
 		id: 'delete',
@@ -320,17 +324,17 @@ const actions = [
 				<p>Are you sure you want to delete { items.length } item(s)?</p>
 				<Button
 					variant="primary"
-					onClick={() => {
+					onClick={ () => {
 						console.log( 'Deleting items:', items );
 						onActionPerformed();
 						closeModal();
-					}}
+					} }
 				>
 					Confirm Delete
 				</Button>
 			</div>
-		)
-	}
+		),
+	},
 ];
 ```
 
@@ -386,14 +390,109 @@ If `selection` and `onChangeSelection` are provided, the `DataViews` component b
 
 A function that determines if a media field or a primary field is clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked.
 
-#### `onClickItem`: `function`
+#### `renderItemLink`: `React.ComponentType`
+
+A render function used to render clickable items.
+
+It can render regular links, but also allows integration with routing libraries (like TanStack Router or React Router).
+
+The component receives the following props:
+
+-   `item`: The data item that was clicked
+-   Additional standard HTML anchor props (className, style, etc.)
 
-A callback function that is triggered when a user clicks on a media field or primary field. This function is currently implemented only in the `grid` and `list` views.
+```jsx
+// Then use it in DataViews
+<DataViews
+	// ...other props
+	renderItemLink={ ( { item, ...props } ) => (
+		<Link to={ `/sites/${ item.slug }` } preload="intent" { ...props } />
+	) }
+/>
+```
 
 #### `header`: React component
 
 React component to be rendered next to the view config button.
 
+#### `perPageSizes`: `[ number, number, number, number ]`
+
+A list of numbers used to control the available item counts per page.
+
+It's optional. Defaults to `[10, 20, 50, 100]`.
+
+### Composition modes
+
+The `DataViews` component supports two composition modes:
+
+-   **Controlled**: This is the default usage mode. `DataViews` renders a full layout out-of-the-box — including search, filters, view switcher, layout grid or table, actions, and pagination. It’s the simplest way to get started and requires minimal setup.
+
+-   **Free composition**: This mode gives developers full control over the layout. You can compose your own UI using internal components — placing them exactly where they’re needed in your interface. This is useful for more advanced or custom layouts, while still relying on the same shared context for user interactions.
+
+The component automatically detects the mode based on the `children` prop. If no `children` are passed, `DataViews` renders its internal layout (controlled mode). If `children` are provided, the component switches to free composition mode, skipping the default layout entirely.
+
+In both modes, user interactions update the same `view` object and share the same behavior. Free composition components rely on context state and don’t require additional props to work, making them safe to use without extra boilerplate.
+
+### Free composition
+
+When you pass the `children` prop to the `DataViews` component, it enters free composition mode. In this mode, `DataViews` no longer renders its built-in layout — instead, it acts as a wrapper that provides access to internal state and shared behavior through context.
+
+This allows you to build your own layout from scratch using the subcomponents exposed by `DataViews`. Each subcomponent automatically connects to the shared context, so you don't need to wire props manually. You can arrange these components however you want and combine them with your own custom elements.
+
+This pattern enables full layout flexibility while keeping the data logic centralized.
+
+The following components are available directly under `DataViews`:
+
+-   `DataViews.Search`
+-   `DataViews.FiltersToggle`
+-   `DataViews.Filters`
+-   `DataViews.Layout`
+-   `DataViews.LayoutSwitcher`
+-   `DataViews.Pagination`
+-   `DataViews.BulkActionToolbar`
+-   `DataViews.ViewConfig`
+
+#### example
+
+```jsx
+import DataViews from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+const CustomLayout = () => {
+	// Declare data, fields, etc.
+
+	return (
+		<DataViews
+			data={ data }
+			fields={ fields }
+			view={ view }
+			onChangeView={ onChangeView }
+			paginationInfo={ paginationInfo }
+			defaultLayouts={ { table: {} } }
+		>
+			<h1>{ __( 'Free composition' ) }</h1>
+			<DataViews.Search />
+			<DataViews.FiltersToggle />
+			<DataViews.Filters />
+			<DataViews.Layout />
+			<DataViews.Pagination />
+		</DataViews>
+	);
+};
+```
+
+> You can render only the pieces you need, rearrange them freely, or combine them with custom components.
+
+### Accessibility considerations
+
+All `DataViews` subcomponents are designed with accessibility in mind — including keyboard interactions, focus management, and semantic roles. Components like `Search`, `Pagination`, `FiltersToggle`, and `Filters` already handle these responsibilities internally and can be safely used in custom layouts.
+
+When using free composition, developers are responsible for the outer structure of the layout.
+
+Developers don't need to worry about the internal accessibility logic for individual features. The core behaviors — like search semantics, filter toggles, or pagination focus — are encapsulated.
+
+`FiltersToggle` controls the visibility of the filters panel, and `Filters` renders the actual filters inside it. They work together and should always be used as a pair. While their internal behavior is accessible by default, how they’re positioned and grouped in custom layouts may affect the overall experience — especially for assistive technologies. Extra care is recommended.
+
 ## `DataForm`
 
 <div class="callout callout-info">At <a href="https://wordpress.github.io/gutenberg/">WordPress Gutenberg's Storybook</a> there's and <a href="https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataform--docs">example implementation of the DataForm component</a>.</div>
@@ -421,7 +520,7 @@ const Example = () => {
 
 A single item to be edited.
 
-It can be thought of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing.
+It can be thought of as a single record coming from the `data` property of `DataViews` — though it doesn't need to be. It can be totally separated or a mix of records if your app supports bulk editing.
 
 #### `fields`: `Object[]`
 
@@ -709,10 +808,10 @@ The header text to show in the modal.
 
 Specifies the size of the modal window when displaying action content using `RenderModal`.
 
--	Type: `string`
--	Optional
--	Default: `'medium'`
--	One of: `'small'`, `'medium'`, `'large'`, `'fill'`
+-   Type: `string`
+-   Optional
+-   Default: `'medium'`
+-   One of: `'small'`, `'medium'`, `'large'`, `'fill'`
 
 Example:
 
@@ -722,6 +821,23 @@ Example:
 }
 ```
 
+### `modalFocusOnMount`
+
+Specifies the focus on mount property of the modal.
+
+-   Type: `boolean` | `string`
+-   Optional
+-   Default: `true`
+-   One of: `true` | `false` | `'firstElement'` | `'firstContentElement'`
+
+Example:
+
+```js
+{
+	modalFocusOnMount: 'firstContentElement';
+}
+```
+
 ## Fields API
 
 ### `id`
@@ -774,7 +890,7 @@ Example:
 
 ### `header`
 
-React component used by the layouts to display the field name — useful to add icons, etc. It's complementary to the `label` property.
+React component used by the layouts to display the field name — useful to add icons, etc. It's complementary to the `label` property.
 
 -   Type: React component.
 -   Optional.
@@ -1082,16 +1198,32 @@ Configuration of the filters.
 
 Operators:
 
-| Operator   | Selection      | Description                                                             | Example                                            |
-| ---------- | -------------- | ----------------------------------------------------------------------- | -------------------------------------------------- |
-| `is`       | Single item    | `EQUAL TO`. The item's field is equal to a single value.                | Author is Admin                                    |
-| `isNot`    | Single item    | `NOT EQUAL TO`. The item's field is not equal to a single value.        | Author is not Admin                                |
-| `isAny`    | Multiple items | `OR`. The item's field is present in a list of values.                  | Author is any: Admin, Editor                       |
-| `isNone`   | Multiple items | `NOT OR`. The item's field is not present in a list of values.          | Author is none: Admin, Editor                      |
-| `isAll`    | Multiple items | `AND`. The item's field has all of the values in the list.              | Category is all: Book, Review, Science Fiction     |
-| `isNotAll` | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list. | Category is not all: Book, Review, Science Fiction |
-
-`is` and `isNot` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotALl` are multi-selection. A filter with no operators declared will support the `isAny` and `isNone` multi-selection operators by default. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded, and the filter won't allow selecting more than one item.
+| Operator             | Selection      | Description                                                                                          | Example                                            |
+| -------------------- | -------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
+| `is`                 | Single item    | `EQUAL TO`. The item's field is equal to a single value.                                             | Author is Admin                                    |
+| `isNot`              | Single item    | `NOT EQUAL TO`. The item's field is not equal to a single value.                                     | Author is not Admin                                |
+| `isAny`              | Multiple items | `OR`. The item's field is present in a list of values.                                               | Author is any: Admin, Editor                       |
+| `isNone`             | Multiple items | `NOT OR`. The item's field is not present in a list of values.                                       | Author is none: Admin, Editor                      |
+| `isAll`              | Multiple items | `AND`. The item's field has all of the values in the list.                                           | Category is all: Book, Review, Science Fiction     |
+| `isNotAll`           | Multiple items | `NOT AND`. The item's field doesn't have all of the values in the list.                              | Category is not all: Book, Review, Science Fiction |
+| `lessThan`           | Single item    | `LESS THAN`. The item's field is numerically less than a single value.                               | Age is less than 18                                |
+| `greaterThan`        | Single item    | `GREATER THAN`. The item's field is numerically greater than a single value.                         | Age is greater than 65                             |
+| `lessThanOrEqual`    | Single item    | `LESS THAN OR EQUAL TO`. The item's field is numerically less than or equal to a single value.       | Age is less than or equal to 18                    |
+| `greaterThanOrEqual` | Single item    | `GREATER THAN OR EQUAL TO`. The item's field is numerically greater than or equal to a single value. | Age is greater than or equal to 65                 |
+| `contains`           | Text           | `CONTAINS`. The item's field contains the given substring.                                           | Title contains: Mars                               |
+| `notContains`        | Text           | `NOT CONTAINS`. The item's field does not contain the given substring.                               | Description doesn't contain: photo                 |
+| `startsWith`         | Text           | `STARTS WITH`. The item's field starts with the given substring.                                     | Title starts with: Mar                             |
+| `on`                 | Date           | `ON`. The item's field is on a given date (date equality using proper date parsing).                | Date is on: 2024-01-01                             |
+| `notOn`              | Date           | `NOT ON`. The item's field is not on a given date (date inequality using proper date parsing).      | Date is not on: 2024-01-01                         |
+| `before`             | Date           | `BEFORE`. The item's field is before a given date.                                                   | Date is before 2024-01-01                          |
+| `after`              | Date           | `AFTER`. The item's field is after a given date.                                                     | Date is after 2024-01-01                           |
+| `beforeInc`          | Date           | `BEFORE (Inc)`. The item's field is before a given date, including the date.                         | Date is before 2024-01-01, including 2024-01-01    |
+| `afterInc`           | Date           | `AFTER (Inc)`. The item's field is after a given date, including the date.                           | Date is after 2024-01-01, including 2024-01-01     |
+| `inThePast`          | Date           | `IN THE PAST`. The item's field is within the last N units (days, weeks, months, or years) from now. | Orders placed in the past 7 days                   |
+| `over`               | Date           | `OVER`. The item's field is older than N units (days, weeks, months, or years) from now.             | Orders placed over 7 days ago                      |
+| `between`            | Multiple items | `BETWEEN`. The item's field is between two values.                                                   | Item count between (inc): 10-180                   |
+
+`is`, `isNot`, `on`, `notOn`, `lessThan`, `greaterThan`, `lessThanOrEqual`, `greaterThanOrEqual`, `before`, `after`, `beforeInc`, `afterInc`, `contains`, `notContains`, and `startsWith` are single-selection operators, while `isAny`, `isNone`, `isAll`, and `isNotAll` are multi-selection. `between` is a special operator that requires two values and it's not supported for preset layout. A filter with no operators declared will support the `isAny` and `isNone` multi-selection operators by default. A filter cannot mix single-selection & multi-selection operators; if a single-selection operator is present in the list of valid operators, the multi-selection ones will be discarded, and the filter won't allow selecting more than one item.
 
 Example:
 
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 51c1a716486d72..b530d7d937c0c6 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.17.0",
+	"version": "5.0.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -46,20 +46,26 @@
 	"dependencies": {
 		"@ariakit/react": "^0.4.15",
 		"@babel/runtime": "7.25.7",
+		"@wordpress/base-styles": "file:../base-styles",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/private-apis": "file:../private-apis",
+		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"fast-deep-equal": "^3.1.3",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
index ecad2af43fb84b..06d2abc32f9337 100644
--- a/packages/dataviews/src/components/dataform/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,6 +18,8 @@ type SamplePost = {
 	date: string;
 	birthdate: string;
 	password?: string;
+	filesize?: number;
+	dimensions?: string;
 };
 
 const meta = {
@@ -89,12 +90,18 @@ const fields = [
 		id: 'status',
 		label: 'Status',
 		type: 'text' as const,
+		Edit: 'toggleGroup' as const,
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
 			{ value: 'private', label: 'Private' },
 		],
 	},
+	{
+		id: 'email',
+		label: 'Email',
+		type: 'email' as const,
+	},
 	{
 		id: 'password',
 		label: 'Password',
@@ -106,20 +113,25 @@ const fields = [
 	{
 		id: 'sticky',
 		label: 'Sticky',
-		type: 'integer',
-		Edit: ( { field, onChange, data, hideLabelFromVision } ) => {
-			const { id, getValue } = field;
-			return (
-				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ hideLabelFromVision ? '' : field.label }
-					checked={ getValue( { item: data } ) }
-					onChange={ () =>
-						onChange( { [ id ]: ! getValue( { item: data } ) } )
-					}
-				/>
-			);
-		},
+		type: 'boolean',
+	},
+	{
+		id: 'can_comment',
+		label: 'Allow people to leave a comment',
+		type: 'boolean' as const,
+		Edit: 'checkbox',
+	},
+	{
+		id: 'filesize',
+		label: 'File Size',
+		type: 'integer' as const,
+		readOnly: true,
+	},
+	{
+		id: 'dimensions',
+		label: 'Dimensions',
+		type: 'text' as const,
+		readOnly: true,
 	},
 ] as Field< SamplePost >[];
 
@@ -136,9 +148,13 @@ export const Default = ( {
 		author: 1,
 		status: 'draft',
 		reviewer: 'fulano',
+		email: 'hello@wordpress.org',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
 		sticky: false,
+		can_comment: false,
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -148,16 +164,17 @@ export const Default = ( {
 			fields: [
 				'title',
 				'order',
-				{
-					id: 'sticky',
-					layout: 'regular',
-					labelPosition: 'side',
-				},
+				'sticky',
 				'author',
+				'status',
 				'reviewer',
+				'email',
 				'password',
 				'date',
 				'birthdate',
+				'can_comment',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]
@@ -193,6 +210,8 @@ const CombinedFieldsComponent = ( {
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
+		filesize: 1024,
+		dimensions: '1920x1080',
 	} );
 
 	const form = useMemo(
@@ -208,6 +227,8 @@ const CombinedFieldsComponent = ( {
 				},
 				'order',
 				'author',
+				'filesize',
+				'dimensions',
 			],
 		} ),
 		[ type, labelPosition ]
diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts
index 992048f9097064..dc735094c878c4 100644
--- a/packages/dataviews/src/components/dataviews-context/index.ts
+++ b/packages/dataviews/src/components/dataviews-context/index.ts
@@ -1,12 +1,23 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext, createRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import type { View, Action, NormalizedField } from '../../types';
+import type {
+	View,
+	Action,
+	NormalizedField,
+	SupportedLayouts,
+	NormalizedFilter,
+} from '../../types';
 import type { SetSelection } from '../../private-types';
 import { LAYOUT_TABLE } from '../../constants';
 
@@ -28,8 +39,19 @@ type DataViewsContextType< Item > = {
 	getItemId: ( item: Item ) => string;
 	getItemLevel?: ( item: Item ) => number;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	containerWidth: number;
+	containerRef: React.MutableRefObject< HTMLDivElement | null >;
+	defaultLayouts: SupportedLayouts;
+	filters: NormalizedFilter[];
+	isShowingFilter: boolean;
+	setIsShowingFilter: ( value: boolean ) => void;
+	perPageSizes?: [ number, number, number, number ];
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -47,7 +69,13 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
 	isItemClickable: () => true,
+	renderItemLink: undefined,
 	containerWidth: 0,
+	containerRef: createRef(),
+	defaultLayouts: { list: {}, grid: {}, table: {} },
+	filters: [],
+	isShowingFilter: false,
+	setIsShowingFilter: () => {},
 } );
 
 export default DataViewsContext;
diff --git a/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx b/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
deleted file mode 100644
index 7e4c7db9a29aa9..00000000000000
--- a/packages/dataviews/src/components/dataviews-filters/filter-summary.tsx
+++ /dev/null
@@ -1,338 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import type { RefObject } from 'react';
-
-/**
- * WordPress dependencies
- */
-import {
-	Dropdown,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-	SelectControl,
-	Tooltip,
-	Icon,
-} from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useRef, createInterpolateElement } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
-
-const ENTER = 'Enter';
-const SPACE = ' ';
-
-/**
- * Internal dependencies
- */
-import SearchWidget from './search-widget';
-import {
-	OPERATORS,
-	OPERATOR_IS,
-	OPERATOR_IS_NOT,
-	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
-	OPERATOR_IS_ALL,
-	OPERATOR_IS_NOT_ALL,
-} from '../../constants';
-import type {
-	Filter,
-	NormalizedFilter,
-	Operator,
-	Option,
-	View,
-} from '../../types';
-
-interface FilterTextProps {
-	activeElements: Option[];
-	filterInView?: Filter;
-	filter: NormalizedFilter;
-}
-
-interface OperatorSelectorProps {
-	filter: NormalizedFilter;
-	view: View;
-	onChangeView: ( view: View ) => void;
-}
-
-interface FilterSummaryProps extends OperatorSelectorProps {
-	addFilterRef: RefObject< HTMLButtonElement >;
-	openedFilter: string | null;
-}
-
-const FilterText = ( {
-	activeElements,
-	filterInView,
-	filter,
-}: FilterTextProps ) => {
-	if ( activeElements === undefined || activeElements.length === 0 ) {
-		return filter.name;
-	}
-
-	const filterTextWrappers = {
-		Name: <span className="dataviews-filters__summary-filter-text-name" />,
-		Value: (
-			<span className="dataviews-filters__summary-filter-text-value" />
-		),
-	};
-
-	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is any: Admin, Editor". */
-				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is none: Admin, Editor". */
-				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is all: Admin, Editor". */
-				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not all: Admin, Editor". */
-				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements.map( ( element ) => element.label ).join( ', ' )
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is: Admin". */
-				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
-		return createInterpolateElement(
-			sprintf(
-				/* translators: 1: Filter name. 3: Filter value. e.g.: "Author is not: Admin". */
-				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
-				filter.name,
-				activeElements[ 0 ].label
-			),
-			filterTextWrappers
-		);
-	}
-
-	return sprintf(
-		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
-		__( 'Unknown status for %1$s' ),
-		filter.name
-	);
-};
-
-function OperatorSelector( {
-	filter,
-	view,
-	onChangeView,
-}: OperatorSelectorProps ) {
-	const operatorOptions = filter.operators?.map( ( operator ) => ( {
-		value: operator,
-		label: OPERATORS[ operator ]?.label,
-	} ) );
-	const currentFilter = view.filters?.find(
-		( _filter ) => _filter.field === filter.field
-	);
-	const value = currentFilter?.operator || filter.operators[ 0 ];
-	return (
-		operatorOptions.length > 1 && (
-			<HStack
-				spacing={ 2 }
-				justify="flex-start"
-				className="dataviews-filters__summary-operators-container"
-			>
-				<FlexItem className="dataviews-filters__summary-operators-filter-name">
-					{ filter.name }
-				</FlexItem>
-
-				<SelectControl
-					label={ __( 'Conditions' ) }
-					value={ value }
-					options={ operatorOptions }
-					onChange={ ( newValue ) => {
-						const operator = newValue as Operator;
-						const newFilters = currentFilter
-							? [
-									...( view.filters ?? [] ).map(
-										( _filter ) => {
-											if (
-												_filter.field === filter.field
-											) {
-												return {
-													..._filter,
-													operator,
-												};
-											}
-											return _filter;
-										}
-									),
-							  ]
-							: [
-									...( view.filters ?? [] ),
-									{
-										field: filter.field,
-										operator,
-										value: undefined,
-									},
-							  ];
-						onChangeView( {
-							...view,
-							page: 1,
-							filters: newFilters,
-						} );
-					} }
-					size="small"
-					__nextHasNoMarginBottom
-					hideLabelFromVision
-				/>
-			</HStack>
-		)
-	);
-}
-
-export default function FilterSummary( {
-	addFilterRef,
-	openedFilter,
-	...commonProps
-}: FilterSummaryProps ) {
-	const toggleRef = useRef< HTMLDivElement >( null );
-	const { filter, view, onChangeView } = commonProps;
-	const filterInView = view.filters?.find(
-		( f ) => f.field === filter.field
-	);
-	const activeElements = filter.elements.filter( ( element ) => {
-		if ( filter.singleSelection ) {
-			return element.value === filterInView?.value;
-		}
-		return filterInView?.value?.includes( element.value );
-	} );
-	const isPrimary = filter.isPrimary;
-	const hasValues = filterInView?.value !== undefined;
-	const canResetOrRemove = ! isPrimary || hasValues;
-	return (
-		<Dropdown
-			defaultOpen={ openedFilter === filter.field }
-			contentClassName="dataviews-filters__summary-popover"
-			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
-			onClose={ () => {
-				toggleRef.current?.focus();
-			} }
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<div className="dataviews-filters__summary-chip-container">
-					<Tooltip
-						text={ sprintf(
-							/* translators: 1: Filter name. */
-							__( 'Filter by: %1$s' ),
-							filter.name.toLowerCase()
-						) }
-						placement="top"
-					>
-						<div
-							className={ clsx(
-								'dataviews-filters__summary-chip',
-								{
-									'has-reset': canResetOrRemove,
-									'has-values': hasValues,
-								}
-							) }
-							role="button"
-							tabIndex={ 0 }
-							onClick={ onToggle }
-							onKeyDown={ ( event ) => {
-								if ( [ ENTER, SPACE ].includes( event.key ) ) {
-									onToggle();
-									event.preventDefault();
-								}
-							} }
-							aria-pressed={ isOpen }
-							aria-expanded={ isOpen }
-							ref={ toggleRef }
-						>
-							<FilterText
-								activeElements={ activeElements }
-								filterInView={ filterInView }
-								filter={ filter }
-							/>
-						</div>
-					</Tooltip>
-					{ canResetOrRemove && (
-						<Tooltip
-							text={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }
-							placement="top"
-						>
-							<button
-								className={ clsx(
-									'dataviews-filters__summary-chip-remove',
-									{ 'has-values': hasValues }
-								) }
-								onClick={ () => {
-									onChangeView( {
-										...view,
-										page: 1,
-										filters: view.filters?.filter(
-											( _filter ) =>
-												_filter.field !== filter.field
-										),
-									} );
-									// If the filter is not primary and can be removed, it will be added
-									// back to the available filters from `Add filter` component.
-									if ( ! isPrimary ) {
-										addFilterRef.current?.focus();
-									} else {
-										// If is primary, focus the toggle button.
-										toggleRef.current?.focus();
-									}
-								} }
-							>
-								<Icon icon={ closeSmall } />
-							</button>
-						</Tooltip>
-					) }
-				</div>
-			) }
-			renderContent={ () => {
-				return (
-					<VStack spacing={ 0 } justify="flex-start">
-						<OperatorSelector { ...commonProps } />
-						<SearchWidget { ...commonProps } />
-					</VStack>
-				);
-			} }
-		/>
-	);
-}
diff --git a/packages/dataviews/src/components/dataviews-filters/filter.tsx b/packages/dataviews/src/components/dataviews-filters/filter.tsx
new file mode 100644
index 00000000000000..8b2aa0e02914c5
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/filter.tsx
@@ -0,0 +1,603 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import type { RefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Dropdown,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+	SelectControl,
+	Tooltip,
+	Icon,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef, createInterpolateElement } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+const ENTER = 'Enter';
+const SPACE = ' ';
+
+/**
+ * Internal dependencies
+ */
+import SearchWidget from './search-widget';
+import InputWidget from './input-widget';
+import {
+	OPERATORS,
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_BETWEEN,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
+} from '../../constants';
+import type {
+	Filter,
+	NormalizedFilter,
+	Operator,
+	Option,
+	View,
+	NormalizedField,
+} from '../../types';
+
+interface FilterTextProps {
+	activeElements: Option[];
+	filterInView?: Filter;
+	filter: NormalizedFilter;
+}
+
+interface OperatorSelectorProps {
+	filter: NormalizedFilter;
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FilterProps extends OperatorSelectorProps {
+	addFilterRef: RefObject< HTMLButtonElement >;
+	openedFilter: string | null;
+	fields: NormalizedField< any >[];
+}
+
+const FilterText = ( {
+	activeElements,
+	filterInView,
+	filter,
+}: FilterTextProps ) => {
+	if ( activeElements === undefined || activeElements.length === 0 ) {
+		return filter.name;
+	}
+
+	const filterTextWrappers = {
+		Name: <span className="dataviews-filters__summary-filter-text-name" />,
+		Value: (
+			<span className="dataviews-filters__summary-filter-text-value" />
+		),
+	};
+
+	if ( filterInView?.operator === OPERATOR_IS_ANY ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is any: Admin, Editor". */
+				__( '<Name>%1$s is any: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NONE ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is none: Admin, Editor". */
+				__( '<Name>%1$s is none: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_ALL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is all: Admin, Editor". */
+				__( '<Name>%1$s is all: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT_ALL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not all: Admin, Editor". */
+				__( '<Name>%1$s is not all: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements.map( ( element ) => element.label ).join( ', ' )
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is: Admin". */
+				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IS_NOT ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Author is not: Admin". */
+				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_LESS_THAN ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than: 10". */
+				__( '<Name>%1$s is less than: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_GREATER_THAN ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than: 10". */
+				__( '<Name>%1$s is greater than: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_LESS_THAN_OR_EQUAL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is less than or equal to: 10". */
+				__(
+					'<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>'
+				),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_GREATER_THAN_OR_EQUAL ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Price is greater than or equal to: 10". */
+				__(
+					'<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>'
+				),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_CONTAINS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Title contains: Mars". */
+				__( '<Name>%1$s contains: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_NOT_CONTAINS ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Description doesn't contain: photo". */
+				__( "<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>" ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_STARTS_WITH ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Title starts with: Mar". */
+				__( '<Name>%1$s starts with: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_BEFORE ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is before: 2024-01-01". */
+				__( '<Name>%1$s is before: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_AFTER ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is after: 2024-01-01". */
+				__( '<Name>%1$s is after: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_BEFORE_INC ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or before: 2024-01-01". */
+				__( '<Name>%1$s is on or before: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_AFTER_INC ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is on or after: 2024-01-01". */
+				__( '<Name>%1$s is on or after: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_BETWEEN ) {
+		const { label } = activeElements[ 0 ];
+
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Min value. 3: Max value. e.g.: "Item count between (inc): 10-180". */
+				__(
+					'<Name>%1$s between (inc): </Name><Value>%2$s-%3$s</Value>'
+				),
+				filter.name,
+				label[ 0 ],
+				label[ 1 ]
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_ON ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is: 2024-01-01". */
+				__( '<Name>%1$s is: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_NOT_ON ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is not: 2024-01-01". */
+				__( '<Name>%1$s is not: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				activeElements[ 0 ].label
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_IN_THE_PAST ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is in the past: 1 days". */
+				__( '<Name>%1$s is in the past: </Name><Value>%2$s</Value>' ),
+				filter.name,
+				`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`
+			),
+			filterTextWrappers
+		);
+	}
+
+	if ( filterInView?.operator === OPERATOR_OVER ) {
+		return createInterpolateElement(
+			sprintf(
+				/* translators: 1: Filter name. 2: Filter value. e.g.: "Date is over: 1 days ago". */
+				__( '<Name>%1$s is over: </Name><Value>%2$s</Value> ago' ),
+				filter.name,
+				`${ activeElements[ 0 ].value.value } ${ activeElements[ 0 ].value.unit }`
+			),
+			filterTextWrappers
+		);
+	}
+	return sprintf(
+		/* translators: 1: Filter name e.g.: "Unknown status for Author". */
+		__( 'Unknown status for %1$s' ),
+		filter.name
+	);
+};
+
+function OperatorSelector( {
+	filter,
+	view,
+	onChangeView,
+}: OperatorSelectorProps ) {
+	const operatorOptions = filter.operators?.map( ( operator ) => ( {
+		value: operator,
+		label: OPERATORS[ operator ]?.label,
+	} ) );
+	const currentFilter = view.filters?.find(
+		( _filter ) => _filter.field === filter.field
+	);
+	const value = currentFilter?.operator || filter.operators[ 0 ];
+	return (
+		operatorOptions.length > 1 && (
+			<HStack
+				spacing={ 2 }
+				justify="flex-start"
+				className="dataviews-filters__summary-operators-container"
+			>
+				<FlexItem className="dataviews-filters__summary-operators-filter-name">
+					{ filter.name }
+				</FlexItem>
+
+				<SelectControl
+					className="dataviews-filters__summary-operators-filter-select"
+					label={ __( 'Conditions' ) }
+					value={ value }
+					options={ operatorOptions }
+					onChange={ ( newValue ) => {
+						const operator = newValue as Operator;
+						const currentOperator = currentFilter?.operator;
+						const newFilters = currentFilter
+							? [
+									...( view.filters ?? [] ).map(
+										( _filter ) => {
+											if (
+												_filter.field === filter.field
+											) {
+												// Reset the value only when switching between operators that have different value types.
+												const OPERATORS_SHOULD_RESET_VALUE =
+													[
+														OPERATOR_BETWEEN,
+														OPERATOR_IN_THE_PAST,
+														OPERATOR_OVER,
+													];
+												const shouldResetValue =
+													currentOperator &&
+													( OPERATORS_SHOULD_RESET_VALUE.includes(
+														currentOperator
+													) ||
+														OPERATORS_SHOULD_RESET_VALUE.includes(
+															operator
+														) );
+
+												return {
+													..._filter,
+													value: shouldResetValue
+														? undefined
+														: _filter.value,
+													operator,
+												};
+											}
+											return _filter;
+										}
+									),
+							  ]
+							: [
+									...( view.filters ?? [] ),
+									{
+										field: filter.field,
+										operator,
+										value: undefined,
+									},
+							  ];
+						onChangeView( {
+							...view,
+							page: 1,
+							filters: newFilters,
+						} );
+					} }
+					size="small"
+					variant="minimal"
+					__nextHasNoMarginBottom
+					hideLabelFromVision
+				/>
+			</HStack>
+		)
+	);
+}
+
+export default function Filter( {
+	addFilterRef,
+	openedFilter,
+	fields,
+	...commonProps
+}: FilterProps ) {
+	const toggleRef = useRef< HTMLDivElement >( null );
+	const { filter, view, onChangeView } = commonProps;
+	const filterInView = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+
+	let activeElements: Option[] = [];
+
+	if ( filter.elements.length > 0 ) {
+		activeElements = filter.elements.filter( ( element ) => {
+			if ( filter.singleSelection ) {
+				return element.value === filterInView?.value;
+			}
+			return filterInView?.value?.includes( element.value );
+		} );
+	} else if ( filterInView?.value !== undefined ) {
+		activeElements = [
+			{
+				value: filterInView.value,
+				label: filterInView.value,
+			},
+		];
+	}
+
+	const isPrimary = filter.isPrimary;
+	const hasValues = filterInView?.value !== undefined;
+	const canResetOrRemove = ! isPrimary || hasValues;
+	return (
+		<Dropdown
+			defaultOpen={ openedFilter === filter.field }
+			contentClassName="dataviews-filters__summary-popover"
+			popoverProps={ { placement: 'bottom-start', role: 'dialog' } }
+			onClose={ () => {
+				toggleRef.current?.focus();
+			} }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<div className="dataviews-filters__summary-chip-container">
+					<Tooltip
+						text={ sprintf(
+							/* translators: 1: Filter name. */
+							__( 'Filter by: %1$s' ),
+							filter.name.toLowerCase()
+						) }
+						placement="top"
+					>
+						<div
+							className={ clsx(
+								'dataviews-filters__summary-chip',
+								{
+									'has-reset': canResetOrRemove,
+									'has-values': hasValues,
+								}
+							) }
+							role="button"
+							tabIndex={ 0 }
+							onClick={ onToggle }
+							onKeyDown={ ( event ) => {
+								if ( [ ENTER, SPACE ].includes( event.key ) ) {
+									onToggle();
+									event.preventDefault();
+								}
+							} }
+							aria-pressed={ isOpen }
+							aria-expanded={ isOpen }
+							ref={ toggleRef }
+						>
+							<FilterText
+								activeElements={ activeElements }
+								filterInView={ filterInView }
+								filter={ filter }
+							/>
+						</div>
+					</Tooltip>
+					{ canResetOrRemove && (
+						<Tooltip
+							text={ isPrimary ? __( 'Reset' ) : __( 'Remove' ) }
+							placement="top"
+						>
+							<button
+								className={ clsx(
+									'dataviews-filters__summary-chip-remove',
+									{ 'has-values': hasValues }
+								) }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										page: 1,
+										filters: view.filters?.filter(
+											( _filter ) =>
+												_filter.field !== filter.field
+										),
+									} );
+									// If the filter is not primary and can be removed, it will be added
+									// back to the available filters from `Add filter` component.
+									if ( ! isPrimary ) {
+										addFilterRef.current?.focus();
+									} else {
+										// If is primary, focus the toggle button.
+										toggleRef.current?.focus();
+									}
+								} }
+							>
+								<Icon icon={ closeSmall } />
+							</button>
+						</Tooltip>
+					) }
+				</div>
+			) }
+			renderContent={ () => {
+				return (
+					<VStack spacing={ 0 } justify="flex-start">
+						<OperatorSelector { ...commonProps } />
+						{ commonProps.filter.elements.length > 0 ? (
+							<SearchWidget
+								{ ...commonProps }
+								filter={ {
+									...commonProps.filter,
+									elements: commonProps.filter.elements,
+								} }
+							/>
+						) : (
+							<InputWidget { ...commonProps } fields={ fields } />
+						) }
+					</VStack>
+				);
+			} }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
index 180e17d4b7f0cc..54309b5322ecf9 100644
--- a/packages/dataviews/src/components/dataviews-filters/index.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -16,34 +16,32 @@ import { __, _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import FilterSummary from './filter-summary';
+import Filter from './filter';
 import { default as AddFilter, AddFilterMenu } from './add-filter';
 import ResetFilters from './reset-filters';
 import DataViewsContext from '../dataviews-context';
-import { sanitizeOperators } from '../../utils';
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../../constants';
+import { ALL_OPERATORS, SINGLE_SELECTION_OPERATORS } from '../../constants';
 import type { NormalizedFilter, NormalizedField, View } from '../../types';
 
 export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	return useMemo( () => {
 		const filters: NormalizedFilter[] = [];
 		fields.forEach( ( field ) => {
-			if ( ! field.elements?.length ) {
-				return;
-			}
-
-			const operators = sanitizeOperators( field );
-			if ( operators.length === 0 ) {
+			if (
+				field.filterBy === false ||
+				( ! field.elements?.length && ! field.Edit )
+			) {
 				return;
 			}
 
+			const operators = field.filterBy.operators;
 			const isPrimary = !! field.filterBy?.isPrimary;
 			filters.push( {
 				field: field.id,
 				name: field.label,
-				elements: field.elements,
+				elements: field.elements ?? [],
 				singleSelection: operators.some( ( op ) =>
-					[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )
+					SINGLE_SELECTION_OPERATORS.includes( op )
 				),
 				operators,
 				isVisible:
@@ -71,21 +69,16 @@ export function useFilters( fields: NormalizedField< any >[], view: View ) {
 	}, [ fields, view ] );
 }
 
-export function FiltersToggle( {
-	filters,
-	view,
-	onChangeView,
-	setOpenedFilter,
-	isShowingFilter,
-	setIsShowingFilter,
-}: {
-	filters: NormalizedFilter[];
-	view: View;
-	onChangeView: ( view: View ) => void;
-	setOpenedFilter: ( filter: string | null ) => void;
-	isShowingFilter: boolean;
-	setIsShowingFilter: React.Dispatch< React.SetStateAction< boolean > >;
-} ) {
+export function FiltersToggle() {
+	const {
+		filters,
+		view,
+		onChangeView,
+		setOpenedFilter,
+		isShowingFilter,
+		setIsShowingFilter,
+	} = useContext( DataViewsContext );
+
 	const buttonRef = useRef< HTMLButtonElement >( null );
 	const onChangeViewWithFilterVisibility = useCallback(
 		( _view: View ) => {
@@ -178,7 +171,7 @@ function FilterVisibilityToggle( {
 	);
 }
 
-function Filters() {
+function Filters( { className }: { className?: string } ) {
 	const { fields, view, onChangeView, openedFilter, setOpenedFilter } =
 		useContext( DataViewsContext );
 	const addFilterRef = useRef< HTMLButtonElement >( null );
@@ -200,10 +193,11 @@ function Filters() {
 	const filterComponents = [
 		...visibleFilters.map( ( filter ) => {
 			return (
-				<FilterSummary
+				<Filter
 					key={ filter.field }
 					filter={ filter }
 					view={ view }
+					fields={ fields }
 					onChangeView={ onChangeView }
 					addFilterRef={ addFilterRef }
 					openedFilter={ openedFilter }
@@ -226,8 +220,8 @@ function Filters() {
 		<HStack
 			justify="flex-start"
 			style={ { width: 'fit-content' } }
-			className="dataviews-filters__container"
 			wrap
+			className={ className }
 		>
 			{ filterComponents }
 		</HStack>
diff --git a/packages/dataviews/src/components/dataviews-filters/input-widget.tsx b/packages/dataviews/src/components/dataviews-filters/input-widget.tsx
new file mode 100644
index 00000000000000..d29165f05049ac
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/input-widget.tsx
@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { useEvent } from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
+import { Flex } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { View, NormalizedFilter, NormalizedField } from '../../types';
+import { getCurrentValue } from './utils';
+
+interface UserInputWidgetProps {
+	view: View;
+	filter: NormalizedFilter;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< any >[];
+}
+
+export default function InputWidget( {
+	filter,
+	view,
+	onChangeView,
+	fields,
+}: UserInputWidgetProps ) {
+	const currentFilter = view.filters?.find(
+		( f ) => f.field === filter.field
+	);
+
+	const field = fields.find( ( f ) => f.id === filter.field );
+	const currentValue = getCurrentValue( filter, currentFilter );
+	const data = useMemo( () => {
+		return ( view.filters ?? [] ).reduce(
+			( acc, f ) => {
+				acc[ f.field ] = f.value;
+				return acc;
+			},
+			{} as Record< string, any >
+		);
+	}, [ view.filters ] );
+
+	const handleChange = useEvent( ( updatedData: Record< string, any > ) => {
+		if ( ! field || ! currentFilter ) {
+			return;
+		}
+		const nextValue = updatedData[ field.id ];
+		if ( fastDeepEqual( nextValue, currentValue ) ) {
+			return;
+		}
+
+		onChangeView( {
+			...view,
+			filters: ( view.filters ?? [] ).map( ( _filter ) =>
+				_filter.field === filter.field
+					? {
+							..._filter,
+							operator:
+								currentFilter.operator || filter.operators[ 0 ],
+							value: nextValue,
+					  }
+					: _filter
+			),
+		} );
+	} );
+
+	if ( ! field || ! field.Edit || ! currentFilter ) {
+		return null;
+	}
+
+	return (
+		<Flex
+			className="dataviews-filters__user-input-widget"
+			gap={ 2.5 }
+			direction="column"
+		>
+			<field.Edit
+				hideLabelFromVision
+				data={ data }
+				field={ field }
+				operator={ currentFilter.operator }
+				onChange={ handleChange }
+			/>
+		</Flex>
+	);
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
index 459b68990753c1..ca1a8dcc42becf 100644
--- a/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
+++ b/packages/dataviews/src/components/dataviews-filters/search-widget.tsx
@@ -4,6 +4,7 @@
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import removeAccents from 'remove-accents';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -13,49 +14,25 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useState, useMemo, useDeferredValue } from '@wordpress/element';
 import { VisuallyHidden, Icon, Composite } from '@wordpress/components';
 import { search, check } from '@wordpress/icons';
-import { SVG, Circle } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
  */
-import type { Filter, NormalizedFilter, View } from '../../types';
+import { getCurrentValue } from './utils';
+import type { Filter, NormalizedFilter, View, Option } from '../../types';
 
 interface SearchWidgetProps {
 	view: View;
-	filter: NormalizedFilter;
+	filter: NormalizedFilter & {
+		elements: Option[];
+	};
 	onChangeView: ( view: View ) => void;
 }
 
-const radioCheck = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
-	</SVG>
-);
-
 function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-const EMPTY_ARRAY: [] = [];
-const getCurrentValue = (
-	filterDefinition: NormalizedFilter,
-	currentFilter?: Filter
-) => {
-	if ( filterDefinition.singleSelection ) {
-		return currentFilter?.value;
-	}
-
-	if ( Array.isArray( currentFilter?.value ) ) {
-		return currentFilter.value;
-	}
-
-	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
-		return [ currentFilter.value ];
-	}
-
-	return EMPTY_ARRAY;
-};
-
 const getNewValue = (
 	filterDefinition: NormalizedFilter,
 	currentFilter: Filter | undefined,
@@ -81,6 +58,30 @@ function generateFilterElementCompositeItemId(
 	return `${ prefix }-${ filterElementValue }`;
 }
 
+const MultiSelectionOption = ( { selected }: { selected: boolean } ) => {
+	return (
+		<span
+			className={ clsx(
+				'dataviews-filters__search-widget-listitem-multi-selection',
+				{ 'is-selected': selected }
+			) }
+		>
+			{ selected && <Icon icon={ check } /> }
+		</span>
+	);
+};
+
+const SingleSelectionOption = ( { selected }: { selected: boolean } ) => {
+	return (
+		<span
+			className={ clsx(
+				'dataviews-filters__search-widget-listitem-single-selection',
+				{ 'is-selected': selected }
+			) }
+		/>
+	);
+};
+
 function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 	const baseId = useInstanceId( ListBox, 'dataviews-filter-list-box' );
 
@@ -189,16 +190,16 @@ function ListBox( { view, filter, onChangeView }: SearchWidgetProps ) {
 						/>
 					}
 				>
-					<span className="dataviews-filters__search-widget-listitem-check">
-						{ filter.singleSelection &&
-							currentValue === element.value && (
-								<Icon icon={ radioCheck } />
-							) }
-						{ ! filter.singleSelection &&
-							currentValue.includes( element.value ) && (
-								<Icon icon={ check } />
-							) }
-					</span>
+					{ filter.singleSelection && (
+						<SingleSelectionOption
+							selected={ currentValue === element.value }
+						/>
+					) }
+					{ ! filter.singleSelection && (
+						<MultiSelectionOption
+							selected={ currentValue.includes( element.value ) }
+						/>
+					) }
 					<span>{ element.label }</span>
 				</Composite.Hover>
 			) ) }
@@ -288,16 +289,18 @@ function ComboboxList( { view, filter, onChangeView }: SearchWidgetProps ) {
 							setValueOnClick={ false }
 							focusOnHover
 						>
-							<span className="dataviews-filters__search-widget-listitem-check">
-								{ filter.singleSelection &&
-									currentValue === element.value && (
-										<Icon icon={ radioCheck } />
-									) }
-								{ ! filter.singleSelection &&
-									currentValue.includes( element.value ) && (
-										<Icon icon={ check } />
+							{ filter.singleSelection && (
+								<SingleSelectionOption
+									selected={ currentValue === element.value }
+								/>
+							) }
+							{ ! filter.singleSelection && (
+								<MultiSelectionOption
+									selected={ currentValue.includes(
+										element.value
 									) }
-							</span>
+								/>
+							) }
 							<span>
 								<Ariakit.ComboboxItemValue
 									className="dataviews-filters__search-widget-filter-combobox-item-value"
diff --git a/packages/dataviews/src/components/dataviews-filters/style.scss b/packages/dataviews/src/components/dataviews-filters/style.scss
index 130ef8872615a5..0137bf37052cf4 100644
--- a/packages/dataviews/src/components/dataviews-filters/style.scss
+++ b/packages/dataviews/src/components/dataviews-filters/style.scss
@@ -34,11 +34,11 @@
 }
 
 .dataviews-filters__summary-operators-container {
-	padding: $grid-unit-10 $grid-unit-10 0;
+	padding: $grid-unit-10 $grid-unit-20;
 
-	&:has(+ .dataviews-filters__search-widget-listbox) {
+	&:has(+ .dataviews-filters__search-widget-listbox),
+	&:has(+ .dataviews-filters__user-input-widget) {
 		border-bottom: 1px solid $gray-200;
-		padding-bottom: $grid-unit-10;
 	}
 
 	&:empty {
@@ -47,6 +47,17 @@
 
 	.dataviews-filters__summary-operators-filter-name {
 		color: $gray-700;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 0; /* Prevents this element from shrinking */
+		max-width: calc(100% - 55px);
+	}
+
+	.dataviews-filters__summary-operators-filter-select {
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 }
 
@@ -170,9 +181,10 @@
 	gap: $grid-unit-10;
 	border-radius: $radius-small;
 	box-sizing: border-box;
-	padding: $grid-unit-10 $grid-unit-15;
+	padding: $grid-unit-05 $grid-unit-15;
 	cursor: default;
-	margin-block-end: 2px;
+	min-height: $grid-unit-40;
+	@include body-medium();
 
 	&:last-child {
 		margin-block-end: 0;
@@ -184,19 +196,27 @@
 		background-color: var(--wp-admin-theme-color);
 		color: $white;
 
-		.dataviews-filters__search-widget-listitem-check {
-			fill: $white;
-		}
-
 		.dataviews-filters__search-widget-listitem-description {
 			color: $white;
 		}
-	}
 
-	.dataviews-filters__search-widget-listitem-check {
-		width: 24px;
-		height: 24px;
-		flex-shrink: 0;
+		.dataviews-filters__search-widget-listitem-single-selection {
+			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+			background: $white;
+			&.is-selected {
+				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+			}
+		}
+
+		.dataviews-filters__search-widget-listitem-multi-selection {
+			border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+
+			&.is-selected {
+				border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+				background: var(--wp-admin-theme-color-darker-20, #183ad6);
+			}
+		}
 	}
 
 	.dataviews-filters__search-widget-listitem-description {
@@ -207,6 +227,81 @@
 		line-height: 16px;
 		color: $gray-700;
 	}
+
+	.dataviews-filters__search-widget-listitem-single-selection {
+		@include radio-control;
+		margin: 0;
+		padding: 0;
+
+		&.is-selected {
+			background: var(--wp-admin-theme-color, #3858e9);
+			border-color: var(--wp-admin-theme-color, #3858e9);
+
+			&::before {
+				content: "";
+				border-radius: $radius-round;
+				box-sizing: inherit;
+				width: math.div($radio-input-size-sm, 2);
+				height: math.div($radio-input-size-sm, 2);
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				margin: 0;
+				background-color: $white;
+
+				// This border serves as a background color in Windows High Contrast mode.
+				border: 4px solid $white;
+
+				@include break-small() {
+					width: math.div($radio-input-size, 2);
+					height: math.div($radio-input-size, 2);
+				}
+			}
+		}
+	}
+
+	.dataviews-filters__search-widget-listitem-multi-selection {
+		--checkbox-size: 24px; // Width & height for small viewports.
+
+		@include checkbox-control;
+		position: relative;
+		background: $white;
+		color: $gray-900;
+		margin: 0;
+		padding: 0;
+		width: var(--checkbox-size);
+		height: var(--checkbox-size);
+
+		@include break-small() {
+			--checkbox-size: 16px;
+		}
+
+		@media not (prefers-reduced-motion) {
+			transition: 0.1s border-color ease-in-out;
+		}
+
+		&.is-selected {
+			background: var(--wp-admin-theme-color, #3858e9);
+			border-color: var(--wp-admin-theme-color, #3858e9);
+
+			svg {
+				--checkmark-size: var(--checkbox-size);
+
+				fill: $white;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: var(--checkmark-size);
+				height: var(--checkmark-size);
+
+				@include break-small() {
+					--checkmark-size: calc(var(--checkbox-size) + 4px);
+				}
+			}
+		}
+	}
 }
 
 .dataviews-filters__search-widget-filter-combobox__wrapper {
@@ -289,3 +384,11 @@
 .dataviews-search {
 	width: fit-content;
 }
+
+.dataviews-filters__user-input-widget {
+	padding: $grid-unit-20;
+
+	.components-input-control__prefix {
+		padding-left: $grid-unit-10;
+	}
+}
diff --git a/packages/dataviews/src/components/dataviews-filters/utils.ts b/packages/dataviews/src/components/dataviews-filters/utils.ts
new file mode 100644
index 00000000000000..2534958ee20ed3
--- /dev/null
+++ b/packages/dataviews/src/components/dataviews-filters/utils.ts
@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import type { NormalizedFilter, Filter } from '../../types';
+
+const EMPTY_ARRAY: [] = [];
+
+export const getCurrentValue = (
+	filterDefinition: NormalizedFilter,
+	currentFilter?: Filter
+) => {
+	if ( filterDefinition.singleSelection ) {
+		return currentFilter?.value;
+	}
+
+	if ( Array.isArray( currentFilter?.value ) ) {
+		return currentFilter.value;
+	}
+
+	if ( ! Array.isArray( currentFilter?.value ) && !! currentFilter?.value ) {
+		return [ currentFilter.value ];
+	}
+
+	return EMPTY_ARRAY;
+};
diff --git a/packages/dataviews/src/components/dataviews-item-actions/index.tsx b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
index af29a08a8f6bf9..3554ac6a285886 100644
--- a/packages/dataviews/src/components/dataviews-item-actions/index.tsx
+++ b/packages/dataviews/src/components/dataviews-item-actions/index.tsx
@@ -110,7 +110,7 @@ export function ActionModal< Item >( {
 			title={ action.modalHeader || label }
 			__experimentalHideHeader={ !! action.hideModalHeader }
 			onRequestClose={ closeModal }
-			focusOnMount="firstContentElement"
+			focusOnMount={ action.modalFocusOnMount ?? true }
 			size={ action.modalSize || 'medium' }
 			overlayClassName={ `dataviews-action-modal dataviews-action-modal__${ kebabCase(
 				action.id
@@ -196,7 +196,7 @@ export default function ItemActions< Item >( {
 			justify="flex-end"
 			className="dataviews-item-actions"
 			style={ {
-				flexShrink: '0',
+				flexShrink: 0,
 				width: 'auto',
 			} }
 		>
diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx
index d30b1d39c6524d..b631a074314ce4 100644
--- a/packages/dataviews/src/components/dataviews-layout/index.tsx
+++ b/packages/dataviews/src/components/dataviews-layout/index.tsx
@@ -15,7 +15,11 @@ import DataViewsContext from '../dataviews-context';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { ViewBaseProps } from '../../types';
 
-export default function DataViewsLayout() {
+type DataViewsLayoutProps = {
+	className?: string;
+};
+
+export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 	const {
 		actions = [],
 		data,
@@ -30,6 +34,7 @@ export default function DataViewsLayout() {
 		setOpenedFilter,
 		onClickItem,
 		isItemClickable,
+		renderItemLink,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -37,6 +42,7 @@ export default function DataViewsLayout() {
 
 	return (
 		<ViewComponent
+			className={ className }
 			actions={ actions }
 			data={ data }
 			fields={ fields }
@@ -48,6 +54,7 @@ export default function DataViewsLayout() {
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
 			onClickItem={ onClickItem }
+			renderItemLink={ renderItemLink }
 			isItemClickable={ isItemClickable }
 			view={ view }
 		/>
diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 08a25ea01224e0..07dc69dd766541 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -15,7 +15,7 @@ import { next, previous } from '@wordpress/icons';
  */
 import DataViewsContext from '../dataviews-context';
 
-function DataViewsPagination() {
+export function DataViewsPagination() {
 	const {
 		view,
 		onChangeView,
@@ -36,8 +36,8 @@ function DataViewsPagination() {
 				'aria-label':
 					currentPage === page
 						? sprintf(
-								// translators: Current page number in total number of pages
-								__( 'Page %1$s of %2$s' ),
+								// translators: 1: current page number. 2: total number of pages.
+								__( 'Page %1$d of %2$d' ),
 								currentPage,
 								totalPages
 						  )
@@ -65,7 +65,7 @@ function DataViewsPagination() {
 						sprintf(
 							// translators: 1: Current page number, 2: Total number of pages.
 							_x(
-								'<div>Page</div>%1$s<div>of %2$s</div>',
+								'<div>Page</div>%1$s<div>of %2$d</div>',
 								'paging'
 							),
 							'<CurrentPage />',
diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
index e069e7d74b0ef1..a22858200820ed 100644
--- a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
@@ -7,15 +7,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { Field } from '../../types';
 import type { SetSelection } from '../../private-types';
+import type { NormalizedField } from '../../types';
 
 interface DataViewsSelectionCheckboxProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
-	titleField?: Field< Item >;
+	titleField?: NormalizedField< Item >;
 	disabled: boolean;
 }
 
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index c80591caee255e..ab0cc13fa09f73 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -45,26 +45,21 @@ import { useInstanceId } from '@wordpress/compose';
  */
 import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
-import type { NormalizedField, SupportedLayouts, View } from '../../types';
+import type { NormalizedField, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 
 const { Menu } = unlock( componentsPrivateApis );
 
-interface ViewTypeMenuProps {
-	defaultLayouts?: SupportedLayouts;
-}
-
 const DATAVIEWS_CONFIG_POPOVER_PROPS = {
 	className: 'dataviews-config__popover',
 	placement: 'bottom-end',
 	offset: 9,
 };
 
-function ViewTypeMenu( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: ViewTypeMenuProps ) {
-	const { view, onChangeView } = useContext( DataViewsContext );
+export function ViewTypeMenu() {
+	const { view, onChangeView, defaultLayouts } =
+		useContext( DataViewsContext );
 	const availableLayouts = Object.keys( defaultLayouts );
 	if ( availableLayouts.length <= 1 ) {
 		return null;
@@ -220,7 +215,8 @@ function SortDirectionControl() {
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function ItemsPerPageControl() {
-	const { view, onChangeView } = useContext( DataViewsContext );
+	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
+	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -242,7 +238,7 @@ function ItemsPerPageControl() {
 				} );
 			} }
 		>
-			{ PAGE_SIZE_VALUES.map( ( value ) => {
+			{ pageSizeValues.map( ( value ) => {
 				return (
 					<ToggleGroupControlOption
 						key={ value }
@@ -761,7 +757,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigDropdown() {
+export function DataviewsViewConfigDropdown() {
 	const { view } = useContext( DataViewsContext );
 	const popoverId = useInstanceId(
 		_DataViewsViewConfig,
@@ -815,14 +811,10 @@ function DataviewsViewConfigDropdown() {
 	);
 }
 
-function _DataViewsViewConfig( {
-	defaultLayouts = { list: {}, grid: {}, table: {} },
-}: {
-	defaultLayouts?: SupportedLayouts;
-} ) {
+function _DataViewsViewConfig() {
 	return (
 		<>
-			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
+			<ViewTypeMenu />
 			<DataviewsViewConfigDropdown />
 		</>
 	);
diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx
index a0a89488136548..6dc403ad135f7d 100644
--- a/packages/dataviews/src/components/dataviews/index.tsx
+++ b/packages/dataviews/src/components/dataviews/index.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack } from '@wordpress/components';
-import { useMemo, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
+import { useContext, useMemo, useRef, useState } from '@wordpress/element';
+import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,11 +22,15 @@ import {
 import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
-import DataViewsViewConfig from '../dataviews-view-config';
+import { BulkActionsFooter } from '../dataviews-bulk-actions';
+import { DataViewsPagination } from '../dataviews-pagination';
+import DataViewsViewConfig, {
+	DataviewsViewConfigDropdown,
+	ViewTypeMenu,
+} from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
 import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
-
 type ItemWithId = { id: string };
 
 type DataViewsProps< Item > = {
@@ -46,9 +50,16 @@ type DataViewsProps< Item > = {
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable?: ( item: Item ) => boolean;
 	header?: ReactNode;
 	getItemLevel?: ( item: Item ) => number;
+	children?: ReactNode;
+	perPageSizes?: [ number, number, number, number ];
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -57,7 +68,52 @@ const defaultGetItemId = ( item: ItemWithId ) => item.id;
 const defaultIsItemClickable = () => true;
 const EMPTY_ARRAY: any[] = [];
 
-export default function DataViews< Item >( {
+type DefaultUIProps = Pick<
+	DataViewsProps< any >,
+	'header' | 'search' | 'searchLabel'
+>;
+
+function DefaultUI( {
+	header,
+	search = true,
+	searchLabel = undefined,
+}: DefaultUIProps ) {
+	const { isShowingFilter } = useContext( DataViewsContext );
+	return (
+		<>
+			<HStack
+				alignment="top"
+				justify="space-between"
+				className="dataviews__view-actions"
+				spacing={ 1 }
+			>
+				<HStack
+					justify="start"
+					expanded={ false }
+					className="dataviews__search"
+				>
+					{ search && <DataViewsSearch label={ searchLabel } /> }
+					<FiltersToggle />
+				</HStack>
+				<HStack
+					spacing={ 1 }
+					expanded={ false }
+					style={ { flexShrink: 0 } }
+				>
+					<DataViewsViewConfig />
+					{ header }
+				</HStack>
+			</HStack>
+			{ isShowingFilter && (
+				<DataViewsFilters className="dataviews-filters__container" />
+			) }
+			<DataViewsLayout />
+			<DataViewsFooter />
+		</>
+	);
+}
+
+function DataViews< Item >( {
 	view,
 	onChangeView,
 	fields,
@@ -73,11 +129,15 @@ export default function DataViews< Item >( {
 	selection: selectionProperty,
 	onChangeSelection,
 	onClickItem,
+	renderItemLink,
 	isItemClickable = defaultIsItemClickable,
 	header,
+	children,
+	perPageSizes,
 }: DataViewsProps< Item > ) {
+	const containerRef = useRef< HTMLDivElement | null >( null );
 	const [ containerWidth, setContainerWidth ] = useState( 0 );
-	const containerRef = useResizeObserver(
+	const resizeObserverRef = useResizeObserver(
 		( resizeObserverEntries: any ) => {
 			setContainerWidth(
 				resizeObserverEntries[ 0 ].borderBoxSize[ 0 ].inlineSize
@@ -130,46 +190,51 @@ export default function DataViews< Item >( {
 				getItemLevel,
 				isItemClickable,
 				onClickItem,
+				renderItemLink,
 				containerWidth,
+				containerRef,
+				defaultLayouts,
+				filters,
+				isShowingFilter,
+				setIsShowingFilter,
+				perPageSizes,
 			} }
 		>
-			<div className="dataviews-wrapper" ref={ containerRef }>
-				<HStack
-					alignment="top"
-					justify="space-between"
-					className="dataviews__view-actions"
-					spacing={ 1 }
-				>
-					<HStack
-						justify="start"
-						expanded={ false }
-						className="dataviews__search"
-					>
-						{ search && <DataViewsSearch label={ searchLabel } /> }
-						<FiltersToggle
-							filters={ filters }
-							view={ view }
-							onChangeView={ onChangeView }
-							setOpenedFilter={ setOpenedFilter }
-							setIsShowingFilter={ setIsShowingFilter }
-							isShowingFilter={ isShowingFilter }
-						/>
-					</HStack>
-					<HStack
-						spacing={ 1 }
-						expanded={ false }
-						style={ { flexShrink: 0 } }
-					>
-						<DataViewsViewConfig
-							defaultLayouts={ defaultLayouts }
-						/>
-						{ header }
-					</HStack>
-				</HStack>
-				{ isShowingFilter && <DataViewsFilters /> }
-				<DataViewsLayout />
-				<DataViewsFooter />
+			<div
+				className="dataviews-wrapper"
+				ref={ useMergeRefs( [ containerRef, resizeObserverRef ] ) }
+			>
+				{ children ?? (
+					<DefaultUI
+						header={ header }
+						search={ search }
+						searchLabel={ searchLabel }
+					/>
+				) }
 			</div>
 		</DataViewsContext.Provider>
 	);
 }
+
+// Populate the DataViews sub components
+const DataViewsSubComponents = DataViews as typeof DataViews & {
+	BulkActionToolbar: typeof BulkActionsFooter;
+	Filters: typeof DataViewsFilters;
+	FiltersToggle: typeof FiltersToggle;
+	Layout: typeof DataViewsLayout;
+	LayoutSwitcher: typeof ViewTypeMenu;
+	Pagination: typeof DataViewsPagination;
+	Search: typeof DataViewsSearch;
+	ViewConfig: typeof DataviewsViewConfigDropdown;
+};
+
+DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
+DataViewsSubComponents.Filters = DataViewsFilters;
+DataViewsSubComponents.FiltersToggle = FiltersToggle;
+DataViewsSubComponents.Layout = DataViewsLayout;
+DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;
+DataViewsSubComponents.Pagination = DataViewsPagination;
+DataViewsSubComponents.Search = DataViewsSearch;
+DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;
+
+export default DataViewsSubComponents;
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
index cd4d3b97e65311..a56b66f7c15820 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -29,121 +29,157 @@ export type SpaceObject = {
 	description: string;
 	image: string;
 	type: string;
+	isPlanet: boolean;
 	categories: string[];
 	satellites: number;
 	date: string;
+	datetime: string;
+	email: string;
 };
 
 export const data: SpaceObject[] = [
 	{
 		id: 1,
-		title: 'Apollo',
-		description: 'Apollo description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'Space', 'NASA' ],
+		title: 'Moon',
+		description: "Earth's satellite",
+		image: 'https://live.staticflickr.com/7398/9458193857_e1256123e3_z.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Earth', 'Moon' ],
 		satellites: 0,
-		date: '2021-01-01T00:00:00Z',
+		date: '2021-01-01',
+		datetime: '2021-01-01T14:30:00Z',
+		email: 'moon@example.com',
 	},
 	{
 		id: 2,
-		title: 'Space',
-		description: 'Space description',
-		image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'Space' ],
+		title: 'Io',
+		description: 'Moon of Jupiter',
+		image: 'https://live.staticflickr.com/5482/9460973502_07e8ab81fe_z.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
 		satellites: 0,
-		date: '2019-01-02T00:00:00Z',
+		date: '2019-01-02',
+		datetime: '2019-01-02T09:15:00Z',
+		email: 'io@example.com',
 	},
 	{
 		id: 3,
-		title: 'NASA',
-		description: 'NASA photo',
-		image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
-		type: 'Not a planet',
-		categories: [ 'NASA' ],
+		title: 'Europa',
+		description: 'Moon of Jupiter',
+		image: 'https://live.staticflickr.com/65535/31499273012_baf5f38cc1_z.jpg',
+		type: 'Satellite',
+		isPlanet: false,
+		categories: [ 'Solar system', 'Satellite', 'Jupiter', 'Moon' ],
 		satellites: 0,
-		date: '2025-01-03T00:00:00Z',
+		date: '2025-01-03',
+		datetime: '2025-01-03T16:45:30Z',
+		email: 'europa@example.com',
 	},
 	{
 		id: 4,
 		title: 'Neptune',
-		description: 'Neptune description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Ice giant in the Solar system',
+		image: 'https://live.staticflickr.com/65535/29523683990_000ff4720c_z.jpg',
 		type: 'Ice giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 14,
-		date: '2020-01-01T00:00:00Z',
+		isPlanet: true,
+		categories: [ 'Ice giant', 'Planet', 'Solar system' ],
+		satellites: 16,
+		date: '2020-01-01',
+		datetime: '2020-01-01T11:22:15Z',
+		email: 'neptune@example.com',
 	},
 	{
 		id: 5,
 		title: 'Mercury',
-		description: 'Mercury description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/813/40199101735_e5e92ffd11_z.jpg',
 		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		isPlanet: true,
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T01:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T13:05:45Z',
+		email: 'mercury@example.com',
 	},
 	{
 		id: 6,
 		title: 'Venus',
 		description: 'La planète Vénus',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		image: 'https://live.staticflickr.com/8025/7544560662_900e717727_z.jpg',
 		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		isPlanet: true,
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 0,
-		date: '2020-01-02T00:00:00Z',
+		date: '2020-01-02',
+		datetime: '2020-01-02T08:30:12Z',
+		email: 'venus@example.com',
 	},
 	{
 		id: 7,
 		title: 'Earth',
-		description: 'Earth description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/3762/9460163562_964fe6af07_z.jpg',
 		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		isPlanet: true,
+		categories: [ 'Terrestrial', 'Planet', 'Solar system', 'Earth' ],
 		satellites: 1,
-		date: '2023-01-03T00:00:00Z',
+		date: '2023-01-03',
+		datetime: '2023-01-03T18:15:30Z',
+		email: 'earth@example.com',
 	},
 	{
 		id: 8,
 		title: 'Mars',
-		description: 'Mars description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Terrestrial planet in the Solar system',
+		image: 'https://live.staticflickr.com/8151/7651156426_e047f4d219_z.jpg',
 		type: 'Terrestrial',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
+		isPlanet: true,
+		categories: [ 'Terrestrial', 'Planet', 'Solar system' ],
 		satellites: 2,
-		date: '2020-01-01T00:00:00Z',
+		date: '2020-01-01',
+		datetime: '2020-01-01T20:45:00Z',
+		email: 'mars@example.com',
 	},
 	{
 		id: 9,
 		title: 'Jupiter',
-		description: 'Jupiter description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Gas giant in the Solar system',
+		image: 'https://staging-jubilee.flickr.com/2853/9458010071_6e6fc41408_z.jpg',
 		type: 'Gas giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 95,
-		date: '2017-01-01T00:01:00Z',
+		isPlanet: true,
+		categories: [ 'Solar system', 'Planet', 'Gas giant' ],
+		satellites: 97,
+		date: '2017-01-01',
+		datetime: '2017-01-01T00:01:00Z',
+		email: 'jupiter@example.com',
 	},
 	{
 		id: 10,
 		title: 'Saturn',
-		description: 'Saturn description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Gas giant in the Solar system',
+		image: 'https://live.staticflickr.com/5524/9464658509_fc2d83dff5_z.jpg',
 		type: 'Gas giant',
-		categories: [ 'Space', 'Planet', 'Solar system' ],
-		satellites: 146,
-		date: '2020-02-01T00:02:00Z',
+		isPlanet: true,
+		categories: [ 'Gas giant', 'Solar system', 'Planet' ],
+		satellites: 274,
+		date: '2020-02-01',
+		datetime: '2020-02-01T00:02:00Z',
+		email: 'saturn@example.com',
 	},
 	{
 		id: 11,
 		title: 'Uranus',
-		description: 'Uranus description',
-		image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
+		description: 'Ice giant in the Solar system',
+		image: 'https://live.staticflickr.com/65535/5553350875_3072df91e2_c.jpg',
 		type: 'Ice giant',
-		categories: [ 'Space', 'Ice giant', 'Solar system' ],
+		isPlanet: true,
+		categories: [ 'Planet', 'Ice giant', 'Solar system' ],
 		satellites: 28,
-		date: '2020-03-01T00:00:00Z',
+		date: '2020-03-01',
+		datetime: '2020-03-01T10:15:20Z',
+		email: 'uranus@example.com',
 	},
 ];
 
@@ -562,7 +598,7 @@ export const themeFields: Field< Theme >[] = [
 	{
 		id: 'tags',
 		label: 'Tags',
-		render: ( { item } ) => item.tags.join( ', ' ),
+		type: 'array',
 	},
 ];
 
@@ -571,7 +607,13 @@ export const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 10,
-	layout: {},
+	layout: {
+		styles: {
+			satellites: {
+				align: 'end' as const,
+			},
+		},
+	},
 	filters: [],
 };
 
@@ -582,6 +624,8 @@ export const actions: Action< SpaceObject >[] = [
 		isPrimary: true,
 		icon: trash,
 		hideModalHeader: true,
+		modalFocusOnMount: 'firstContentElement',
+		supportsBulk: true,
 		RenderModal: ( { items, closeModal } ) => {
 			return (
 				<VStack spacing="5">
@@ -619,6 +663,7 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		label: 'Image',
 		id: 'image',
+		type: 'media',
 		header: (
 			<HStack spacing={ 1 } justify="start">
 				<Icon icon={ image } />
@@ -630,17 +675,25 @@ export const fields: Field< SpaceObject >[] = [
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		enableSorting: false,
 	},
 	{
 		label: 'Title',
 		id: 'title',
+		type: 'text',
 		enableHiding: false,
 		enableGlobalSearch: true,
+		filterBy: {
+			operators: [ 'contains', 'notContains', 'startsWith' ],
+		},
 	},
 	{
 		id: 'date',
 		label: 'Date',
+		type: 'date',
+	},
+	{
+		id: 'datetime',
+		label: 'Datetime',
 		type: 'datetime',
 	},
 	{
@@ -648,11 +701,23 @@ export const fields: Field< SpaceObject >[] = [
 		id: 'type',
 		enableHiding: false,
 		elements: [
-			{ value: 'Not a planet', label: 'Not a planet' },
+			{ value: 'Satellite', label: 'Satellite' },
 			{ value: 'Ice giant', label: 'Ice giant' },
 			{ value: 'Terrestrial', label: 'Terrestrial' },
 			{ value: 'Gas giant', label: 'Gas giant' },
 		],
+		filterBy: {
+			operators: [ 'is', 'isNot' ],
+		},
+	},
+	{
+		id: 'isPlanet',
+		label: 'Is Planet',
+		type: 'boolean',
+		elements: [
+			{ value: true, label: 'True' },
+			{ value: false, label: 'False' },
+		],
 	},
 	{
 		label: 'Satellites',
@@ -663,8 +728,15 @@ export const fields: Field< SpaceObject >[] = [
 	{
 		label: 'Description',
 		id: 'description',
+		type: 'text',
 		enableSorting: false,
 		enableGlobalSearch: true,
+		filterBy: false,
+	},
+	{
+		label: 'Email',
+		id: 'email',
+		type: 'email',
 	},
 	{
 		label: 'Categories',
@@ -676,21 +748,17 @@ export const fields: Field< SpaceObject >[] = [
 			</HStack>
 		),
 		elements: [
-			{ value: 'Space', label: 'Space' },
-			{ value: 'NASA', label: 'NASA' },
-			{ value: 'Planet', label: 'Planet' },
 			{ value: 'Solar system', label: 'Solar system' },
+			{ value: 'Satellite', label: 'Satellite' },
+			{ value: 'Moon', label: 'Moon' },
+			{ value: 'Earth', label: 'Earth' },
+			{ value: 'Jupiter', label: 'Jupiter' },
+			{ value: 'Planet', label: 'Planet' },
 			{ value: 'Ice giant', label: 'Ice giant' },
+			{ value: 'Terrestrial', label: 'Terrestrial' },
+			{ value: 'Gas giant', label: 'Gas giant' },
 		],
-		filterBy: {
-			operators: [ 'isAny', 'isNone', 'isAll', 'isNotAll' ],
-		},
-		getValue: ( { item } ) => {
-			return item.categories;
-		},
-		render: ( { item } ) => {
-			return item.categories.join( ',' );
-		},
-		enableSorting: false,
+		type: 'array',
+		enableGlobalSearch: true,
 	},
 ];
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
index 1e96ba92a0bea9..df16e377bf0091 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -1,13 +1,39 @@
+/**
+ * External dependencies
+ */
+import type { Meta } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import {
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
+import {
+	Card,
+	CardHeader,
+	CardBody,
+	__experimentalGrid as Grid,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __, _n } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import DataViews from '../index';
-import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
+import {
+	DEFAULT_VIEW,
+	actions,
+	data,
+	fields,
+	type SpaceObject,
+} from './fixtures';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 import type { View } from '../../../types';
@@ -17,7 +43,8 @@ import './style.css';
 const meta = {
 	title: 'DataViews/DataViews',
 	component: DataViews,
-};
+} as Meta< typeof DataViews >;
+
 export default meta;
 
 const defaultLayouts = {
@@ -46,10 +73,17 @@ export const Default = () => {
 			fields={ fields }
 			onChangeView={ setView }
 			actions={ actions }
-			onClickItem={ ( item ) => {
-				// eslint-disable-next-line no-alert
-				alert( 'Clicked: ' + item.title );
-			} }
+			renderItemLink={ ( { item, ...props }: { item: SpaceObject } ) => (
+				<button
+					style={ { background: 'none', border: 'none', padding: 0 } }
+					onClick={ ( e ) => {
+						e.stopPropagation();
+						// eslint-disable-next-line no-alert
+						alert( 'Clicked: ' + item.title );
+					} }
+					{ ...props }
+				/>
+			) }
 			isItemClickable={ () => true }
 			defaultLayouts={ defaultLayouts }
 		/>
@@ -105,3 +139,227 @@ export const FieldsNoSortableNoHidable = () => {
 		/>
 	);
 };
+
+/**
+ * Custom composition example
+ */
+function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
+	const moons = planets.reduce( ( sum, item ) => sum + item.satellites, 0 );
+
+	return (
+		<>
+			<Heading className="free-composition-heading" level={ 2 }>
+				{ __( 'Solar System numbers' ) }
+			</Heading>
+			<Grid
+				templateColumns="repeat(auto-fit, minmax(330px, 1fr))"
+				align="flex-start"
+				className="free-composition-header"
+			>
+				<Card variant="secondary">
+					<CardBody>
+						<VStack>
+							<Text size={ 18 } as="p">
+								{ createInterpolateElement(
+									_n(
+										'<PlanetsNumber /> planet',
+										'<PlanetsNumber /> planets',
+										planets.length
+									),
+									{
+										PlanetsNumber: (
+											<strong>{ planets.length } </strong>
+										),
+									}
+								) }
+							</Text>
+
+							<Text size={ 18 } as="p">
+								{ createInterpolateElement(
+									_n(
+										'<SatellitesNumber /> moon',
+										'<SatellitesNumber /> moons',
+										moons
+									),
+									{
+										SatellitesNumber: (
+											<strong>{ moons } </strong>
+										),
+									}
+								) }
+							</Text>
+						</VStack>
+					</CardBody>
+				</Card>
+
+				<VStack>
+					<HStack justify="start">
+						<DataViews.FiltersToggle />
+						<DataViews.Search label={ __( 'moons by planet' ) } />
+					</HStack>
+					<DataViews.Filters />
+				</VStack>
+
+				<VStack>
+					<HStack justify="end">
+						<DataViews.Pagination />
+						<DataViews.ViewConfig />
+						<DataViews.LayoutSwitcher />
+					</HStack>
+
+					<DataViews.BulkActionToolbar />
+				</VStack>
+			</Grid>
+
+			<DataViews.Layout className="free-composition-dataviews-layout" />
+		</>
+	);
+}
+
+/**
+ * This is a basic example of using the DataViews component in
+ * a free composition mode.
+ *
+ * Unlike the default usage where DataViews renders its own UI,
+ * here we use it purely to provide context and handle data-related logic.
+ *
+ * The UI is fully custom and composed externally via the
+ * `PlanetOverview` component.
+ *
+ * In future iterations, this story will showcase more advanced compositions
+ * using built-in subcomponents like <Search />, filters,
+ * or pagination controls.
+ */
+export const FreeComposition = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+	} );
+
+	const { data: processedData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+
+	const planets = processedData.filter( ( item ) =>
+		item.categories.includes( 'Planet' )
+	);
+
+	return (
+		<div className="free-composition">
+			<DataViews
+				getItemId={ ( item ) => item.id.toString() }
+				paginationInfo={ paginationInfo }
+				data={ processedData }
+				view={ view }
+				fields={ fields }
+				actions={ actions }
+				onChangeView={ setView }
+				defaultLayouts={ {
+					table: {},
+					grid: {},
+				} }
+			>
+				<PlanetOverview planets={ planets } />
+			</DataViews>
+		</div>
+	);
+};
+
+export const WithCard = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<Card>
+			<CardHeader>Header</CardHeader>
+			<CardBody>
+				<DataViews
+					getItemId={ ( item ) => item.id.toString() }
+					paginationInfo={ paginationInfo }
+					data={ shownData }
+					view={ view }
+					fields={ fields }
+					onChangeView={ setView }
+					actions={ actions.filter(
+						( action ) => ! action.supportsBulk
+					) }
+					defaultLayouts={ defaultLayouts }
+				/>
+			</CardBody>
+		</Card>
+	);
+};
+
+export const CustomPerPageSizes = () => {
+	const [ view, setView ] = useState< View >( {
+		...DEFAULT_VIEW,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+		perPage: 3,
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions.filter( ( action ) => ! action.supportsBulk ) }
+			defaultLayouts={ defaultLayouts }
+			perPageSizes={ [ 3, 6, 12, 24 ] }
+		/>
+	);
+};
+
+export const GroupedGridLayout = () => {
+	const [ view, setView ] = useState< View >( {
+		type: LAYOUT_GRID,
+		search: '',
+		page: 1,
+		perPage: 20,
+		filters: [],
+		fields: [ 'satellites' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
+		groupByField: 'type',
+		layout: {
+			badgeFields: [ 'satellites' ],
+		},
+	} );
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( data, view, fields );
+	}, [ view ] );
+	return (
+		<DataViews
+			getItemId={ ( item ) => item.id.toString() }
+			paginationInfo={ paginationInfo }
+			data={ shownData }
+			view={ view }
+			fields={ fields }
+			onChangeView={ setView }
+			actions={ actions }
+			defaultLayouts={ {
+				[ LAYOUT_GRID ]: {},
+				[ LAYOUT_LIST ]: {},
+				[ LAYOUT_TABLE ]: {},
+			} }
+		/>
+	);
+};
diff --git a/packages/dataviews/src/components/dataviews/stories/style.css b/packages/dataviews/src/components/dataviews/stories/style.css
index 7c0c6565a6edf4..3f8809e12e6ead 100644
--- a/packages/dataviews/src/components/dataviews/stories/style.css
+++ b/packages/dataviews/src/components/dataviews/stories/style.css
@@ -1,4 +1,25 @@
 .theme-field-description {
-    text-wrap: balance;
-    text-wrap: pretty;
-}
\ No newline at end of file
+	text-wrap: balance;
+	text-wrap: pretty;
+}
+
+.free-composition {
+	height: 600px;
+	overflow: auto;
+}
+
+.free-composition-heading,
+.free-composition-header {
+	padding: 16px 48px;
+}
+
+.free-composition-heading {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background-color: #fff;
+}
+
+.free-composition-dataviews-layout thead {
+	inset-block-start: 67px;
+}
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index b44d5b2543f4af..45ccc10a4a7904 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -96,3 +96,30 @@
 	}
 	@include link-reset();
 }
+
+/**
+ * Applying a consistent 24px padding when DataViews are placed within cards.
+ */
+.components-card__body:has(> .dataviews-wrapper) {
+	padding: $grid-unit-10 0 0;
+	overflow: hidden; // Prevent cells with white backgrounds overflowing the card
+
+	.dataviews__view-actions,
+	.dataviews-filters__container,
+	.dataviews-footer,
+	.dataviews-view-grid,
+	.dataviews-loading,
+	.dataviews-no-results {
+		padding-inline: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:first-child,
+	.dataviews-view-table tr th:first-child {
+		padding-inline-start: $grid-unit-30;
+	}
+
+	.dataviews-view-table tr td:last-child,
+	.dataviews-view-table tr th:last-child {
+		padding-inline-end: $grid-unit-30;
+	}
+}
diff --git a/packages/dataviews/src/components/stories/index.story.tsx b/packages/dataviews/src/components/stories/index.story.tsx
new file mode 100644
index 00000000000000..fec54047cb27bc
--- /dev/null
+++ b/packages/dataviews/src/components/stories/index.story.tsx
@@ -0,0 +1,372 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../dataviews/index';
+import DataForm from '../dataform/index';
+import {
+	actions,
+	data,
+	fields,
+	type SpaceObject,
+} from '../dataviews/stories/fixtures';
+import { filterSortAndPaginate } from '../../filter-and-sort-data-view';
+import type { View, Form, Field } from '../../types';
+
+const meta = {
+	title: 'DataViews/FieldTypes',
+	component: DataForm,
+	argTypes: {
+		type: {
+			control: { type: 'select' },
+			description:
+				'Chooses the default layout of each field. "regular" is the default layout.',
+			options: [ 'default', 'regular', 'panel' ],
+		},
+		labelPosition: {
+			control: { type: 'select' },
+			description: 'Chooses the label position of the layout.',
+			options: [ 'default', 'top', 'side', 'none' ],
+		},
+	},
+} as const;
+export default meta;
+
+const defaultLayouts = {
+	table: {},
+	grid: {},
+	list: {},
+};
+
+interface FieldTypeStoryProps {
+	fields: Field< SpaceObject >[];
+	titleField?: string;
+	descriptionField?: string;
+	mediaField?: string;
+	type?: 'default' | 'regular' | 'panel';
+	labelPosition?: 'default' | 'top' | 'side' | 'none';
+}
+
+const FieldTypeStory = ( {
+	fields: storyFields,
+	titleField,
+	descriptionField,
+	mediaField,
+	type = 'default',
+	labelPosition = 'default',
+}: FieldTypeStoryProps ) => {
+	const form = useMemo(
+		() => ( {
+			type,
+			labelPosition,
+			fields: storyFields.map( ( field ) => field.id ),
+		} ),
+		[ type, labelPosition, storyFields ]
+	) as Form;
+
+	const [ view, setView ] = useState< View >( {
+		type: 'table' as const,
+		search: '',
+		page: 1,
+		perPage: 10,
+		layout: {},
+		filters: [],
+		titleField,
+		descriptionField,
+		mediaField,
+		fields: storyFields
+			.filter(
+				( field ) =>
+					! [ titleField, descriptionField, mediaField ].includes(
+						field.id
+					)
+			)
+			.map( ( field ) => field.id ),
+	} );
+
+	const [ selectedIds, setSelectedIds ] = useState< number[] >( [] );
+	const [ modifiedData, setModifiedData ] = useState< SpaceObject[] >( data );
+
+	const { data: shownData, paginationInfo } = useMemo( () => {
+		return filterSortAndPaginate( modifiedData, view, storyFields );
+	}, [ modifiedData, view, storyFields ] );
+
+	const selectedItem =
+		( selectedIds.length === 1 &&
+			shownData.find( ( item ) => item.id === selectedIds[ 0 ] ) ) ||
+		null;
+
+	return (
+		<HStack alignment="stretch">
+			<div style={ { flex: 2 } }>
+				<DataViews
+					getItemId={ ( item ) => item.id.toString() }
+					data={ shownData }
+					paginationInfo={ paginationInfo }
+					view={ view }
+					fields={ storyFields }
+					onChangeView={ setView }
+					actions={ actions }
+					defaultLayouts={ defaultLayouts }
+					selection={ selectedIds.map( ( id ) => id.toString() ) }
+					onChangeSelection={ ( newSelection ) =>
+						setSelectedIds(
+							newSelection.map( ( id ) => parseInt( id, 10 ) )
+						)
+					}
+					// eslint-disable-next-line no-alert
+					onClickItem={ ( item ) => alert( 'clicked ' + item.title ) }
+				/>
+			</div>
+			{ selectedItem ? (
+				<VStack alignment="top">
+					<DataForm
+						data={ selectedItem }
+						form={ form }
+						fields={ storyFields }
+						onChange={ ( updatedValues ) => {
+							const updatedItem = {
+								...selectedItem,
+								...updatedValues,
+							};
+
+							setModifiedData(
+								modifiedData.map( ( item ) =>
+									item.id === selectedItem.id
+										? updatedItem
+										: item
+								)
+							);
+						} }
+					/>
+				</VStack>
+			) : (
+				<VStack alignment="center">
+					<span
+						style={ {
+							color: '#888',
+						} }
+					>
+						Please, select a single item.
+					</span>
+				</VStack>
+			) }
+		</HStack>
+	);
+};
+
+export const All = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	return (
+		<FieldTypeStory
+			fields={ fields }
+			titleField="title"
+			descriptionField="description"
+			mediaField="image"
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Text = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const textFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'text' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ textFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Integer = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const integerFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'integer' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ integerFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Boolean = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const booleanFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'boolean' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ booleanFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const DateTime = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateTimeFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'datetime' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateTimeFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Date = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const dateFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'date' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ dateFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Email = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const emailFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'email' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ emailFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Media = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const mediaFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'media' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ mediaFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const Array = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const arrayTextFields = useMemo(
+		() => fields.filter( ( field ) => field.type === 'array' ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ arrayTextFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
+
+export const NoType = ( {
+	type,
+	labelPosition,
+}: {
+	type: 'default' | 'regular' | 'panel';
+	labelPosition: 'default' | 'top' | 'side' | 'none';
+} ) => {
+	const noTypeFields = useMemo(
+		() => fields.filter( ( field ) => field.type === undefined ),
+		[]
+	);
+
+	return (
+		<FieldTypeStory
+			fields={ noTypeFields }
+			type={ type }
+			labelPosition={ labelPosition }
+		/>
+	);
+};
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 5ae94c7eb4a135..af312b129cc0b4 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -16,15 +16,66 @@ export const OPERATOR_IS_ANY = 'isAny';
 export const OPERATOR_IS_NONE = 'isNone';
 export const OPERATOR_IS_ALL = 'isAll';
 export const OPERATOR_IS_NOT_ALL = 'isNotAll';
+export const OPERATOR_LESS_THAN = 'lessThan';
+export const OPERATOR_GREATER_THAN = 'greaterThan';
+export const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';
+export const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';
+export const OPERATOR_BEFORE = 'before';
+export const OPERATOR_AFTER = 'after';
+export const OPERATOR_BEFORE_INC = 'beforeInc';
+export const OPERATOR_AFTER_INC = 'afterInc';
+export const OPERATOR_CONTAINS = 'contains';
+export const OPERATOR_NOT_CONTAINS = 'notContains';
+export const OPERATOR_STARTS_WITH = 'startsWith';
+export const OPERATOR_BETWEEN = 'between';
+export const OPERATOR_ON = 'on';
+export const OPERATOR_NOT_ON = 'notOn';
+export const OPERATOR_IN_THE_PAST = 'inThePast';
+export const OPERATOR_OVER = 'over';
 
-export const ALL_OPERATORS = [
+export const ALL_OPERATORS: Operator[] = [
 	OPERATOR_IS,
 	OPERATOR_IS_NOT,
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_NONE,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_BETWEEN,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
 ];
+
+export const SINGLE_SELECTION_OPERATORS: Operator[] = [
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+];
+
 export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 	[ OPERATOR_IS ]: {
 		key: 'is-filter',
@@ -50,6 +101,70 @@ export const OPERATORS: Record< Operator, { key: string; label: string } > = {
 		key: 'is-not-all-filter',
 		label: __( 'Is not all' ),
 	},
+	[ OPERATOR_LESS_THAN ]: {
+		key: 'less-than-filter',
+		label: __( 'Less than' ),
+	},
+	[ OPERATOR_GREATER_THAN ]: {
+		key: 'greater-than-filter',
+		label: __( 'Greater than' ),
+	},
+	[ OPERATOR_LESS_THAN_OR_EQUAL ]: {
+		key: 'less-than-or-equal-filter',
+		label: __( 'Less than or equal' ),
+	},
+	[ OPERATOR_GREATER_THAN_OR_EQUAL ]: {
+		key: 'greater-than-or-equal-filter',
+		label: __( 'Greater than or equal' ),
+	},
+	[ OPERATOR_BEFORE ]: {
+		key: 'before-filter',
+		label: __( 'Before' ),
+	},
+	[ OPERATOR_AFTER ]: {
+		key: 'after-filter',
+		label: __( 'After' ),
+	},
+	[ OPERATOR_BEFORE_INC ]: {
+		key: 'before-inc-filter',
+		label: __( 'Before (inc)' ),
+	},
+	[ OPERATOR_AFTER_INC ]: {
+		key: 'after-inc-filter',
+		label: __( 'After (inc)' ),
+	},
+	[ OPERATOR_CONTAINS ]: {
+		key: 'contains-filter',
+		label: __( 'Contains' ),
+	},
+	[ OPERATOR_NOT_CONTAINS ]: {
+		key: 'not-contains-filter',
+		label: __( "Doesn't contain" ),
+	},
+	[ OPERATOR_STARTS_WITH ]: {
+		key: 'starts-with-filter',
+		label: __( 'Starts with' ),
+	},
+	[ OPERATOR_BETWEEN ]: {
+		key: 'between-filter',
+		label: __( 'Between (inc)' ),
+	},
+	[ OPERATOR_ON ]: {
+		key: 'on-filter',
+		label: __( 'On' ),
+	},
+	[ OPERATOR_NOT_ON ]: {
+		key: 'not-on-filter',
+		label: __( 'Not on' ),
+	},
+	[ OPERATOR_IN_THE_PAST ]: {
+		key: 'in-the-past-filter',
+		label: __( 'In the past' ),
+	},
+	[ OPERATOR_OVER ]: {
+		key: 'over-filter',
+		label: __( 'Over' ),
+	},
 };
 
 export const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;
diff --git a/packages/dataviews/src/dataform-controls/boolean.tsx b/packages/dataviews/src/dataform-controls/boolean.tsx
new file mode 100644
index 00000000000000..990ea2a686b2e4
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/boolean.tsx
@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Boolean< Item >( {
+	field,
+	onChange,
+	data,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, getValue, label } = field;
+
+	return (
+		<ToggleControl
+			hidden={ hideLabelFromVision }
+			__nextHasNoMarginBottom
+			label={ label }
+			checked={ getValue( { item: data } ) }
+			onChange={ () =>
+				onChange( { [ id ]: ! getValue( { item: data } ) } )
+			}
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/checkbox.tsx b/packages/dataviews/src/dataform-controls/checkbox.tsx
new file mode 100644
index 00000000000000..54e2103726cf3c
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/checkbox.tsx
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Checkbox< Item >( {
+	field,
+	onChange,
+	data,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, getValue, label, description } = field;
+
+	return (
+		<CheckboxControl
+			__nextHasNoMarginBottom
+			hidden={ hideLabelFromVision }
+			label={ label }
+			help={ description }
+			checked={ getValue( { item: data } ) }
+			onChange={ () =>
+				onChange( { [ id ]: ! getValue( { item: data } ) } )
+			}
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/datetime.tsx b/packages/dataviews/src/dataform-controls/datetime.tsx
index b31c5c60bb9c6e..c8bc1fa8fafede 100644
--- a/packages/dataviews/src/dataform-controls/datetime.tsx
+++ b/packages/dataviews/src/dataform-controls/datetime.tsx
@@ -1,19 +1,110 @@
 /**
  * WordPress dependencies
  */
-import { BaseControl, TimePicker, VisuallyHidden } from '@wordpress/components';
+import {
+	BaseControl,
+	TimePicker,
+	VisuallyHidden,
+	SelectControl,
+	__experimentalNumberControl as NumberControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import type { DataFormControlProps } from '../types';
+import { OPERATOR_IN_THE_PAST, OPERATOR_OVER } from '../constants';
+
+const TIME_UNITS_OPTIONS = {
+	[ OPERATOR_IN_THE_PAST ]: [
+		{ value: 'days', label: __( 'Days' ) },
+		{ value: 'weeks', label: __( 'Weeks' ) },
+		{ value: 'months', label: __( 'Months' ) },
+		{ value: 'years', label: __( 'Years' ) },
+	],
+	[ OPERATOR_OVER ]: [
+		{ value: 'days', label: __( 'Days ago' ) },
+		{ value: 'weeks', label: __( 'Weeks ago' ) },
+		{ value: 'months', label: __( 'Months ago' ) },
+		{ value: 'years', label: __( 'Years ago' ) },
+	],
+};
+
+function RelativeDateControls( {
+	id,
+	value,
+	onChange,
+	label,
+	hideLabelFromVision,
+	options,
+}: {
+	id: string;
+	value: { value?: string | number; unit?: string };
+	onChange: ( value: any ) => void;
+	label: string;
+	hideLabelFromVision?: boolean;
+	options: { value: string; label: string }[];
+} ) {
+	const { value: relValue = '', unit = options[ 0 ].value } = value;
+
+	const onChangeValue = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: Number( newValue ), unit },
+			} ),
+		[ id, onChange, unit ]
+	);
+
+	const onChangeUnit = useCallback(
+		( newUnit: string | undefined ) =>
+			onChange( {
+				[ id ]: { value: relValue, unit: newUnit },
+			} ),
+		[ id, onChange, relValue ]
+	);
+
+	return (
+		<BaseControl
+			id={ id }
+			__nextHasNoMarginBottom
+			className="dataviews-controls__datetime"
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			<HStack spacing={ 2.5 }>
+				<NumberControl
+					__next40pxDefaultSize
+					className="dataviews-controls__datetime-number"
+					spinControls="none"
+					min={ 1 }
+					step={ 1 }
+					value={ relValue }
+					onChange={ onChangeValue }
+				/>
+				<SelectControl
+					className="dataviews-controls__datetime-unit"
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Unit' ) }
+					value={ unit }
+					options={ options }
+					onChange={ onChangeUnit }
+					hideLabelFromVision
+				/>
+			</HStack>
+		</BaseControl>
+	);
+}
 
 export default function DateTime< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	operator,
 }: DataFormControlProps< Item > ) {
 	const { id, label } = field;
 	const value = field.getValue( { item: data } );
@@ -23,6 +114,19 @@ export default function DateTime< Item >( {
 		[ id, onChange ]
 	);
 
+	if ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {
+		return (
+			<RelativeDateControls
+				id={ id }
+				value={ value && typeof value === 'object' ? value : {} }
+				onChange={ onChange }
+				label={ label }
+				hideLabelFromVision={ hideLabelFromVision }
+				options={ TIME_UNITS_OPTIONS[ operator ] }
+			/>
+		);
+	}
+
 	return (
 		<fieldset className="dataviews-controls__datetime">
 			{ ! hideLabelFromVision && (
@@ -34,7 +138,7 @@ export default function DateTime< Item >( {
 				<VisuallyHidden as="legend">{ label }</VisuallyHidden>
 			) }
 			<TimePicker
-				currentTime={ value }
+				currentTime={ typeof value === 'string' ? value : undefined }
 				onChange={ onChangeControl }
 				hideLabelFromVision
 			/>
diff --git a/packages/dataviews/src/dataform-controls/email.tsx b/packages/dataviews/src/dataform-controls/email.tsx
new file mode 100644
index 00000000000000..e2fb8c4db84f29
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/email.tsx
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Email< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id, label, placeholder, description } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<TextControl
+			type="email"
+			label={ label }
+			placeholder={ placeholder }
+			value={ value ?? '' }
+			help={ description }
+			onChange={ onChangeControl }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			hideLabelFromVision={ hideLabelFromVision }
+		/>
+	);
+}
diff --git a/packages/dataviews/src/dataform-controls/index.tsx b/packages/dataviews/src/dataform-controls/index.tsx
index 297e73c28f837c..d62a207e858a16 100644
--- a/packages/dataviews/src/dataform-controls/index.tsx
+++ b/packages/dataviews/src/dataform-controls/index.tsx
@@ -11,22 +11,30 @@ import type {
 	Field,
 	FieldTypeDefinition,
 } from '../types';
+import checkbox from './checkbox';
 import datetime from './datetime';
+import email from './email';
 import integer from './integer';
 import radio from './radio';
 import select from './select';
 import text from './text';
+import toggleGroup from './toggle-group';
+import boolean from './boolean';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
 }
 
 const FORM_CONTROLS: FormControls = {
+	boolean,
+	checkbox,
 	datetime,
+	email,
 	integer,
 	radio,
 	select,
 	text,
+	toggleGroup,
 };
 
 export function getControl< Item >(
diff --git a/packages/dataviews/src/dataform-controls/integer.tsx b/packages/dataviews/src/dataform-controls/integer.tsx
index f70a90ffe15239..000a2359b14e5d 100644
--- a/packages/dataviews/src/dataform-controls/integer.tsx
+++ b/packages/dataviews/src/dataform-controls/integer.tsx
@@ -1,19 +1,82 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import {
+	Flex,
+	BaseControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { OPERATOR_BETWEEN } from '../constants';
 import type { DataFormControlProps } from '../types';
 
+function BetweenControls< Item >( {
+	id,
+	value,
+	onChange,
+	hideLabelFromVision,
+}: {
+	id: string;
+	value: any;
+	onChange: DataFormControlProps< Item >[ 'onChange' ];
+	hideLabelFromVision?: boolean;
+} ) {
+	const [ min = '', max = '' ] = Array.isArray( value ) ? value : [];
+
+	const onChangeMin = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: [ Number( newValue ), max ],
+			} ),
+		[ id, onChange, max ]
+	);
+
+	const onChangeMax = useCallback(
+		( newValue: string | undefined ) =>
+			onChange( {
+				[ id ]: [ min, Number( newValue ) ],
+			} ),
+		[ id, onChange, min ]
+	);
+
+	return (
+		<BaseControl
+			__nextHasNoMarginBottom
+			help={ __( 'The max. value must be greater than the min. value.' ) }
+		>
+			<Flex direction="row" gap={ 4 }>
+				<NumberControl
+					label={ __( 'Min.' ) }
+					value={ min }
+					max={ max ? Number( max ) - 1 : undefined }
+					onChange={ onChangeMin }
+					__next40pxDefaultSize
+					hideLabelFromVision={ hideLabelFromVision }
+				/>
+				<NumberControl
+					label={ __( 'Max.' ) }
+					value={ max }
+					min={ min ? Number( min ) + 1 : undefined }
+					onChange={ onChangeMax }
+					__next40pxDefaultSize
+					hideLabelFromVision={ hideLabelFromVision }
+				/>
+			</Flex>
+		</BaseControl>
+	);
+}
+
 export default function Integer< Item >( {
 	data,
 	field,
 	onChange,
 	hideLabelFromVision,
+	operator,
 }: DataFormControlProps< Item > ) {
 	const { id, label, description } = field;
 	const value = field.getValue( { item: data } ) ?? '';
@@ -25,6 +88,17 @@ export default function Integer< Item >( {
 		[ id, onChange ]
 	);
 
+	if ( operator === OPERATOR_BETWEEN ) {
+		return (
+			<BetweenControls
+				id={ id }
+				value={ value }
+				onChange={ onChange }
+				hideLabelFromVision={ hideLabelFromVision }
+			/>
+		);
+	}
+
 	return (
 		<NumberControl
 			label={ label }
diff --git a/packages/dataviews/src/dataform-controls/select.tsx b/packages/dataviews/src/dataform-controls/select.tsx
index 2b3bd9373fc155..0b859828f9fe66 100644
--- a/packages/dataviews/src/dataform-controls/select.tsx
+++ b/packages/dataviews/src/dataform-controls/select.tsx
@@ -42,6 +42,7 @@ export default function Select< Item >( {
 		<SelectControl
 			label={ label }
 			value={ value }
+			help={ field.description }
 			options={ elements }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
diff --git a/packages/dataviews/src/dataform-controls/style.scss b/packages/dataviews/src/dataform-controls/style.scss
index 230826c0adf823..79f406641af58c 100644
--- a/packages/dataviews/src/dataform-controls/style.scss
+++ b/packages/dataviews/src/dataform-controls/style.scss
@@ -2,3 +2,8 @@
 	border: none;
 	padding: 0;
 }
+
+.dataviews-controls__datetime-number,
+.dataviews-controls__datetime-unit {
+	flex: 1 1 50%;
+}
diff --git a/packages/dataviews/src/dataform-controls/text.tsx b/packages/dataviews/src/dataform-controls/text.tsx
index 7ac095f4abede7..f400f1e1d8e3ee 100644
--- a/packages/dataviews/src/dataform-controls/text.tsx
+++ b/packages/dataviews/src/dataform-controls/text.tsx
@@ -15,7 +15,7 @@ export default function Text< Item >( {
 	onChange,
 	hideLabelFromVision,
 }: DataFormControlProps< Item > ) {
-	const { id, label, placeholder } = field;
+	const { id, label, placeholder, description } = field;
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -31,6 +31,7 @@ export default function Text< Item >( {
 			label={ label }
 			placeholder={ placeholder }
 			value={ value ?? '' }
+			help={ description }
 			onChange={ onChangeControl }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
diff --git a/packages/dataviews/src/dataform-controls/toggle-group.tsx b/packages/dataviews/src/dataform-controls/toggle-group.tsx
new file mode 100644
index 00000000000000..5b368ea576bb0e
--- /dev/null
+++ b/packages/dataviews/src/dataform-controls/toggle-group.tsx
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function ToggleGroup< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const { id } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string | number | undefined ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	if ( field.elements ) {
+		const selectedOption = field.elements.find(
+			( el ) => el.value === value
+		);
+		return (
+			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				isBlock
+				label={ field.label }
+				help={ selectedOption?.description || field.description }
+				onChange={ onChangeControl }
+				value={ value }
+				hideLabelFromVision={ hideLabelFromVision }
+			>
+				{ field.elements.map( ( el ) => (
+					<ToggleGroupControlOption
+						key={ el.value }
+						label={ el.label }
+						value={ el.value }
+					/>
+				) ) }
+			</ToggleGroupControl>
+		);
+	}
+
+	return null;
+}
diff --git a/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
index 08cc47f569eafe..e749ed15b06c50 100644
--- a/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
+++ b/packages/dataviews/src/dataforms-layouts/data-form-layout.tsx
@@ -48,7 +48,7 @@ export function DataFormLayout< Item >( {
 	);
 
 	return (
-		<VStack spacing={ 2 }>
+		<VStack spacing={ form?.type === 'panel' ? 2 : 4 }>
 			{ normalizedFormFields.map( ( formField ) => {
 				const FieldLayout = getFormFieldLayout( formField.layout )
 					?.component;
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
index 269b2bb418a856..641d90961b3945 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/panel/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -134,11 +139,16 @@ function PanelDropdown< Item >( {
 					aria-label={ sprintf(
 						// translators: %s: Field name.
 						_x( 'Edit %s', 'field' ),
-						fieldLabel
+						fieldLabel || ''
 					) }
 					onClick={ onToggle }
+					disabled={ fieldDefinition.readOnly === true }
+					accessibleWhenDisabled
 				>
-					<fieldDefinition.render item={ data } />
+					<fieldDefinition.render
+						item={ data }
+						field={ fieldDefinition }
+					/>
 				</Button>
 			) }
 			renderContent={ ( { onClose } ) => (
@@ -188,7 +198,6 @@ export default function FormPanelField< Item >( {
 		}
 		return fieldDef.id === field.id;
 	} );
-	const labelPosition = field.labelPosition ?? 'side';
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -200,6 +209,11 @@ export default function FormPanelField< Item >( {
 		return null;
 	}
 
+	const labelPosition = field.labelPosition ?? 'side';
+	const labelClassName = clsx(
+		'dataforms-layouts-panel__field-label',
+		`dataforms-layouts-panel__field-label--label-position-${ labelPosition }`
+	);
 	const fieldLabel = isCombinedField( field )
 		? field.label
 		: fieldDefinition?.label;
@@ -208,7 +222,7 @@ export default function FormPanelField< Item >( {
 		return (
 			<VStack className="dataforms-layouts-panel__field" spacing={ 0 }>
 				<div
-					className="dataforms-layouts-panel__field-label"
+					className={ labelClassName }
 					style={ { paddingBottom: 0 } }
 				>
 					{ fieldLabel }
@@ -248,9 +262,7 @@ export default function FormPanelField< Item >( {
 			ref={ setPopoverAnchor }
 			className="dataforms-layouts-panel__field"
 		>
-			<div className="dataforms-layouts-panel__field-label">
-				{ fieldLabel }
-			</div>
+			<div className={ labelClassName }>{ fieldLabel }</div>
 			<div className="dataforms-layouts-panel__field-control">
 				<PanelDropdown
 					field={ field }
diff --git a/packages/dataviews/src/dataforms-layouts/panel/style.scss b/packages/dataviews/src/dataforms-layouts/panel/style.scss
index c7058f6366b3b6..c43ef030af268a 100644
--- a/packages/dataviews/src/dataforms-layouts/panel/style.scss
+++ b/packages/dataviews/src/dataforms-layouts/panel/style.scss
@@ -11,9 +11,12 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
-	padding: 6px 0; // Matches button to ensure alignment
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
+
+	&--label-position-side {
+		align-self: center;
+	}
 }
 
 .dataforms-layouts-panel__field-control {
@@ -31,6 +34,10 @@
 		min-height: $button-size-compact;
 	}
 
+	&.components-button.is-link[aria-disabled="true"] {
+		text-decoration: none;
+	}
+
 	.components-dropdown {
 		max-width: 100%;
 	}
diff --git a/packages/dataviews/src/dataforms-layouts/regular/index.tsx b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
index a3d90b807b5cd4..f304baad76e5c7 100644
--- a/packages/dataviews/src/dataforms-layouts/regular/index.tsx
+++ b/packages/dataviews/src/dataforms-layouts/regular/index.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -79,23 +84,35 @@ export default function FormRegularField< Item >( {
 		( fieldDef ) => fieldDef.id === field.id
 	);
 
-	if ( ! fieldDefinition ) {
+	if ( ! fieldDefinition || ! fieldDefinition.Edit ) {
 		return null;
 	}
 	if ( labelPosition === 'side' ) {
 		return (
 			<HStack className="dataforms-layouts-regular__field">
-				<div className="dataforms-layouts-regular__field-label">
+				<div
+					className={ clsx(
+						'dataforms-layouts-regular__field-label',
+						`dataforms-layouts-regular__field-label--label-position-${ labelPosition }`
+					) }
+				>
 					{ fieldDefinition.label }
 				</div>
 				<div className="dataforms-layouts-regular__field-control">
-					<fieldDefinition.Edit
-						key={ fieldDefinition.id }
-						data={ data }
-						field={ fieldDefinition }
-						onChange={ onChange }
-						hideLabelFromVision
-					/>
+					{ fieldDefinition.readOnly === true ? (
+						<fieldDefinition.render
+							item={ data }
+							field={ fieldDefinition }
+						/>
+					) : (
+						<fieldDefinition.Edit
+							key={ fieldDefinition.id }
+							data={ data }
+							field={ fieldDefinition }
+							onChange={ onChange }
+							hideLabelFromVision
+						/>
+					) }
 				</div>
 			</HStack>
 		);
@@ -103,14 +120,30 @@ export default function FormRegularField< Item >( {
 
 	return (
 		<div className="dataforms-layouts-regular__field">
-			<fieldDefinition.Edit
-				data={ data }
-				field={ fieldDefinition }
-				onChange={ onChange }
-				hideLabelFromVision={
-					labelPosition === 'none' ? true : hideLabelFromVision
-				}
-			/>
+			{ fieldDefinition.readOnly === true ? (
+				<>
+					{ ! hideLabelFromVision && labelPosition !== 'none' && (
+						<div className="dataforms-layouts-regular__field-label">
+							{ fieldDefinition.label }
+						</div>
+					) }
+					<div className="dataforms-layouts-regular__field-control">
+						<fieldDefinition.render
+							item={ data }
+							field={ fieldDefinition }
+						/>
+					</div>
+				</>
+			) : (
+				<fieldDefinition.Edit
+					data={ data }
+					field={ fieldDefinition }
+					onChange={ onChange }
+					hideLabelFromVision={
+						labelPosition === 'none' ? true : hideLabelFromVision
+					}
+				/>
+			) }
 		</div>
 	);
 }
diff --git a/packages/dataviews/src/dataforms-layouts/regular/style.scss b/packages/dataviews/src/dataforms-layouts/regular/style.scss
index d94b804fdf1fe5..9578447b697edf 100644
--- a/packages/dataviews/src/dataforms-layouts/regular/style.scss
+++ b/packages/dataviews/src/dataforms-layouts/regular/style.scss
@@ -17,9 +17,12 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
-	padding: 6px 0; // Matches button to ensure alignment
 	line-height: $grid-unit-05 * 5;
 	hyphens: auto;
+
+	&--label-position-side {
+		align-self: center;
+	}
 }
 
 .dataforms-layouts-regular__field-control {
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index e8f8a46002ebdf..d61585d7927592 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
@@ -15,7 +16,7 @@ import {
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -35,7 +36,7 @@ import type {
 	ViewGridProps,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import { ItemClickWrapper } from '../utils/item-click-wrapper';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 const { Badge } = unlock( componentsPrivateApis );
 
@@ -45,6 +46,11 @@ interface GridItemProps< Item > {
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
@@ -62,6 +68,7 @@ function GridItem< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	getItemId,
 	item,
 	actions,
@@ -78,27 +85,13 @@ function GridItem< Item >( {
 	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
+		<mediaField.render item={ item } field={ mediaField } />
 	) : null;
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
-			<titleField.render item={ item } />
+			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
-	const clickableMediaItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__media',
-	} );
-
-	const clickableTitleItemProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className: 'dataviews-view-grid__title-field dataviews-title-field',
-	} );
-
 	let mediaA11yProps;
 	let titleA11yProps;
 	if ( isItemClickable( item ) && onClickItem ) {
@@ -139,9 +132,16 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__media"
+					{ ...mediaA11yProps }
+				>
 					{ renderedMediaField }
-				</div>
+				</ItemClickWrapper>
 			) }
 			{ hasBulkActions && showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -157,16 +157,26 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
+				<ItemClickWrapper
+					item={ item }
+					isItemClickable={ isItemClickable }
+					onClickItem={ onClickItem }
+					renderItemLink={ renderItemLink }
+					className="dataviews-view-grid__title-field dataviews-title-field"
+					{ ...titleA11yProps }
+				>
 					{ renderedTitleField }
-				</div>
+				</ItemClickWrapper>
 				{ !! actions?.length && (
 					<ItemActions item={ item } actions={ actions } isCompact />
 				) }
 			</HStack>
 			<VStack spacing={ 1 }>
 				{ showDescription && descriptionField?.render && (
-					<descriptionField.render item={ item } />
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
 				) }
 				{ !! badgeFields?.length && (
 					<HStack
@@ -182,7 +192,10 @@ function GridItem< Item >( {
 									key={ field.id }
 									className="dataviews-view-grid__field-value"
 								>
-									<field.render item={ item } />
+									<field.render
+										item={ item }
+										field={ field }
+									/>
 								</Badge>
 							);
 						} ) }
@@ -212,7 +225,10 @@ function GridItem< Item >( {
 											className="dataviews-view-grid__field-value"
 											style={ { maxHeight: 'none' } }
 										>
-											<field.render item={ item } />
+											<field.render
+												item={ item }
+												field={ field }
+											/>
 										</FlexItem>
 									</>
 								</Flex>
@@ -225,7 +241,7 @@ function GridItem< Item >( {
 	);
 }
 
-export default function ViewGrid< Item >( {
+function ViewGrid< Item >( {
 	actions,
 	data,
 	fields,
@@ -234,8 +250,10 @@ export default function ViewGrid< Item >( {
 	onChangeSelection,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	selection,
 	view,
+	className,
 }: ViewGridProps< Item > ) {
 	const titleField = fields.find(
 		( field ) => field.id === view?.titleField
@@ -275,50 +293,144 @@ export default function ViewGrid< Item >( {
 				gridTemplateColumns: `repeat(${ usedPreviewSize }, minmax(0, 1fr))`,
 		  }
 		: {};
+
+	const groupField = view.groupByField
+		? fields.find( ( f ) => f.id === view.groupByField )
+		: null;
+
+	// Group data by groupByField if specified
+	const dataByGroup = groupField
+		? data.reduce( ( groups: Map< string, typeof data >, item ) => {
+				const groupName = groupField.getValue( { item } );
+				if ( ! groups.has( groupName ) ) {
+					groups.set( groupName, [] );
+				}
+				groups.get( groupName )?.push( item );
+				return groups;
+		  }, new Map< string, typeof data >() )
+		: null;
+
 	return (
 		<>
-			{ hasData && (
-				<Grid
-					gap={ 8 }
-					columns={ 2 }
-					alignment="top"
-					className="dataviews-view-grid"
-					style={ gridStyle }
-					aria-busy={ isLoading }
-				>
-					{ data.map( ( item ) => {
-						return (
-							<GridItem
-								key={ getItemId( item ) }
-								view={ view }
-								selection={ selection }
-								onChangeSelection={ onChangeSelection }
-								onClickItem={ onClickItem }
-								isItemClickable={ isItemClickable }
-								getItemId={ getItemId }
-								item={ item }
-								actions={ actions }
-								mediaField={ mediaField }
-								titleField={ titleField }
-								descriptionField={ descriptionField }
-								regularFields={ regularFields }
-								badgeFields={ badgeFields }
-								hasBulkActions={ hasBulkActions }
-							/>
-						);
-					} ) }
-				</Grid>
-			) }
-			{ ! hasData && (
-				<div
-					className={ clsx( {
-						'dataviews-loading': isLoading,
-						'dataviews-no-results': ! isLoading,
-					} ) }
-				>
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				</div>
-			) }
+			{
+				// Render multiple groups.
+				hasData && groupField && dataByGroup && (
+					<VStack spacing={ 4 }>
+						{ Array.from( dataByGroup.entries() ).map(
+							( [ groupName, groupItems ] ) => (
+								<VStack key={ groupName } spacing={ 2 }>
+									<h3 className="dataviews-view-grid__group-header">
+										{ sprintf(
+											// translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+											__( '%1$s: %2$s' ),
+											groupField.label,
+											groupName
+										) }
+									</h3>
+									<Grid
+										gap={ 8 }
+										columns={ 2 }
+										alignment="top"
+										className={ clsx(
+											'dataviews-view-grid',
+											className
+										) }
+										style={ gridStyle }
+										aria-busy={ isLoading }
+									>
+										{ groupItems.map( ( item ) => {
+											return (
+												<GridItem
+													key={ getItemId( item ) }
+													view={ view }
+													selection={ selection }
+													onChangeSelection={
+														onChangeSelection
+													}
+													onClickItem={ onClickItem }
+													isItemClickable={
+														isItemClickable
+													}
+													renderItemLink={
+														renderItemLink
+													}
+													getItemId={ getItemId }
+													item={ item }
+													actions={ actions }
+													mediaField={ mediaField }
+													titleField={ titleField }
+													descriptionField={
+														descriptionField
+													}
+													regularFields={
+														regularFields
+													}
+													badgeFields={ badgeFields }
+													hasBulkActions={
+														hasBulkActions
+													}
+												/>
+											);
+										} ) }
+									</Grid>
+								</VStack>
+							)
+						) }
+					</VStack>
+				)
+			}
+
+			{
+				// Render a single grid with all data.
+				hasData && ! dataByGroup && (
+					<Grid
+						gap={ 8 }
+						columns={ 2 }
+						alignment="top"
+						className={ clsx( 'dataviews-view-grid', className ) }
+						style={ gridStyle }
+						aria-busy={ isLoading }
+					>
+						{ data.map( ( item ) => {
+							return (
+								<GridItem
+									key={ getItemId( item ) }
+									view={ view }
+									selection={ selection }
+									onChangeSelection={ onChangeSelection }
+									onClickItem={ onClickItem }
+									isItemClickable={ isItemClickable }
+									renderItemLink={ renderItemLink }
+									getItemId={ getItemId }
+									item={ item }
+									actions={ actions }
+									mediaField={ mediaField }
+									titleField={ titleField }
+									descriptionField={ descriptionField }
+									regularFields={ regularFields }
+									badgeFields={ badgeFields }
+									hasBulkActions={ hasBulkActions }
+								/>
+							);
+						} ) }
+					</Grid>
+				)
+			}
+			{
+				// Render empty state.
+				! hasData && (
+					<div
+						className={ clsx( {
+							'dataviews-loading': isLoading,
+							'dataviews-no-results': ! isLoading,
+						} ) }
+					>
+						<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
+					</div>
+				)
+			}
 		</>
 	);
 }
+
+export default ViewGrid;
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 21701bba7cacfe..f4bc1ef87a3c73 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -49,8 +49,8 @@
 		width: 100%;
 		min-height: 200px;
 		aspect-ratio: 1/1;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
+		background-color: $white;
+		border-radius: $radius-medium;
 		position: relative;
 
 		img {
@@ -166,3 +166,11 @@
 .dataviews-view-grid__media--clickable {
 	cursor: pointer;
 }
+
+.dataviews-view-grid__group-header {
+	font-size: 16px;
+	font-weight: 600;
+	color: $gray-900;
+	margin: 0 0 $grid-unit-10 0;
+	padding: 0 $grid-unit-60;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index dadc53b5d733a7..de75d1de74aa92 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -199,13 +199,13 @@ function ListItem< Item >( {
 	const renderedMediaField =
 		showMedia && mediaField?.render ? (
 			<div className="dataviews-view-list__media-wrapper">
-				<mediaField.render item={ item } />
+				<mediaField.render item={ item } field={ mediaField } />
 			</div>
 		) : null;
 
 	const renderedTitleField =
 		showTitle && titleField?.render ? (
-			<titleField.render item={ item } />
+			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
@@ -302,7 +302,10 @@ function ListItem< Item >( {
 						</HStack>
 						{ showDescription && descriptionField?.render && (
 							<div className="dataviews-view-list__field">
-								<descriptionField.render item={ item } />
+								<descriptionField.render
+									item={ item }
+									field={ descriptionField }
+								/>
 							</div>
 						) }
 						<div
@@ -321,7 +324,10 @@ function ListItem< Item >( {
 										{ field.label }
 									</VisuallyHidden>
 									<span className="dataviews-view-list__field-value">
-										<field.render item={ item } />
+										<field.render
+											item={ item }
+											field={ field }
+										/>
 									</span>
 								</div>
 							) ) }
@@ -347,6 +353,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		onChangeSelection,
 		selection,
 		view,
+		className,
 	} = props;
 	const baseId = useInstanceId( ViewList, 'view-list' );
 
@@ -491,7 +498,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 		<Composite
 			id={ baseId }
 			render={ <div /> }
-			className="dataviews-view-list"
+			className={ clsx( 'dataviews-view-list', className ) }
 			role="grid"
 			activeId={ activeCompositeId }
 			setActiveId={ setActiveCompositeId }
diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
index e892006faecb00..ee785f9d2c7117 100644
--- a/packages/dataviews/src/dataviews-layouts/list/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -16,29 +16,41 @@ div.dataviews-view-list {
 		}
 
 		.dataviews-view-list__item-actions {
-			flex: 0;
-			overflow: hidden;
+			display: flex;
+			width: max-content;
+			flex: 0 0 auto;
+			gap: $grid-unit-05;
+
+			.components-button {
+				position: relative;
+				z-index: 1;
+			}
 
 			> div {
 				height: $button-size-small;
 			}
 
-			.components-button {
-				position: relative;
-				z-index: 1;
-				opacity: 0;
+			> :not(:last-child) {
+				flex: 0;
+				overflow: hidden;
+				width: 0;
 			}
 		}
 
 		&:where(.is-selected, .is-hovered, :focus-within) {
-			.dataviews-view-list__item-actions {
+			.dataviews-view-list__item-actions > :not(:last-child) {
 				flex-basis: min-content;
+				width: auto;
 				overflow: unset;
-				padding-inline-end: $grid-unit-05;
+			}
+		}
 
-				.components-button {
-					opacity: 1;
-				}
+		@media (hover: none) {
+			// Show primary action on devices that do not support hover.
+			.dataviews-view-list__item-actions > :not(:last-child) {
+				flex-basis: min-content;
+				width: auto;
+				overflow: unset;
 			}
 		}
 
@@ -124,8 +136,8 @@ div.dataviews-view-list {
 		overflow: hidden;
 		position: relative;
 		flex-shrink: 0;
-		background-color: $gray-100;
-		border-radius: $grid-unit-05;
+		background-color: $white;
+		border-radius: $radius-medium;
 
 		img {
 			width: 100%;
@@ -141,7 +153,7 @@ div.dataviews-view-list {
 			width: 100%;
 			height: 100%;
 			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
-			border-radius: $grid-unit-05;
+			border-radius: $radius-medium;
 		}
 	}
 
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index 1d8d22193bbd07..9695249d31081f 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -19,7 +19,6 @@ import { forwardRef, Children, Fragment } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { sanitizeOperators } from '../../utils';
 import { SORTING_DIRECTIONS, sortArrows, sortLabels } from '../../constants';
 import type {
 	NormalizedField,
@@ -81,15 +80,18 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	isSortable = field.enableSorting !== false;
 	const header = field.header;
 
-	operators = sanitizeOperators( field );
-	// Filter can be added:
-	// 1. If the field is not already part of a view's filters.
-	// 2. If the field meets the type and operator requirements.
-	// 3. If it's not primary. If it is, it should be already visible.
+	operators = ( !! field.filterBy && field.filterBy?.operators ) || [];
+
+	// Filter can be added if:
+	//
+	// 1. The field is not already part of a view's filters.
+	// 2. The field has elements or Edit property.
+	// 3. The field does not opt-out of filtering.
+	// 4. The filter is not primary (if it is, it is already visible).
 	canAddFilter =
 		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-		!! field.elements?.length &&
-		!! operators.length &&
+		!! ( field.elements?.length || field.Edit ) &&
+		field.filterBy !== false &&
 		! field.filterBy?.isPrimary;
 
 	return (
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
index 6ac4057b0973ba..dd56fc222a4d5b 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps, ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -10,7 +15,7 @@ import {
  * Internal dependencies
  */
 import type { NormalizedField } from '../../types';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import { ItemClickWrapper } from '../utils/item-click-wrapper';
 
 function ColumnPrimary< Item >( {
 	item,
@@ -19,6 +24,7 @@ function ColumnPrimary< Item >( {
 	mediaField,
 	descriptionField,
 	onClickItem,
+	renderItemLink,
 	isItemClickable,
 }: {
 	item: Item;
@@ -27,35 +33,42 @@ function ColumnPrimary< Item >( {
 	mediaField?: NormalizedField< Item >;
 	descriptionField?: NormalizedField< Item >;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 } ) {
-	const clickableProps = getClickableItemProps( {
-		item,
-		isItemClickable,
-		onClickItem,
-		className:
-			'dataviews-view-table__cell-content-wrapper dataviews-title-field',
-	} );
 	return (
 		<HStack spacing={ 3 } justify="flex-start">
 			{ mediaField && (
 				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
-					<mediaField.render item={ item } />
+					<mediaField.render item={ item } field={ mediaField } />
 				</div>
 			) }
 			<VStack spacing={ 0 }>
 				{ titleField && (
-					<div { ...clickableProps }>
+					<ItemClickWrapper
+						item={ item }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+						renderItemLink={ renderItemLink }
+						className="dataviews-view-table__cell-content-wrapper dataviews-title-field"
+					>
 						{ level !== undefined && (
 							<span className="dataviews-view-table__level">
 								{ '—'.repeat( level ) }&nbsp;
 							</span>
 						) }
-						<titleField.render item={ item } />
-					</div>
+						<titleField.render item={ item } field={ titleField } />
+					</ItemClickWrapper>
 				) }
 				{ descriptionField && (
-					<descriptionField.render item={ item } />
+					<descriptionField.render
+						item={ item }
+						field={ descriptionField }
+					/>
 				) }
 			</VStack>
 		</HStack>
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index b3789df8fbb68a..96c3e707120ddd 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -2,17 +2,25 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import type { ComponentProps, ReactElement } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Spinner } from '@wordpress/components';
-import { useEffect, useId, useRef, useState } from '@wordpress/element';
+import {
+	useContext,
+	useEffect,
+	useId,
+	useRef,
+	useState,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import DataViewsContext from '../../components/dataviews-context';
 import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import ItemActions from '../../components/dataviews-item-actions';
 import { sortValues } from '../../constants';
@@ -30,11 +38,13 @@ import type {
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
 import ColumnPrimary from './column-primary';
+import { useIsHorizontalScrollEnd } from './use-is-horizontal-scroll-end';
 
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
 	column: string;
 	item: Item;
+	align?: 'start' | 'center' | 'end';
 }
 
 interface TableRowProps< Item > {
@@ -53,12 +63,19 @@ interface TableRowProps< Item > {
 	onChangeSelection: SetSelection;
 	isItemClickable: ( item: Item ) => boolean;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
+	isActionsColumnSticky?: boolean;
 }
 
 function TableColumnField< Item >( {
 	item,
 	fields,
 	column,
+	align,
 }: TableColumnFieldProps< Item > ) {
 	const field = fields.find( ( f ) => f.id === column );
 
@@ -66,9 +83,14 @@ function TableColumnField< Item >( {
 		return null;
 	}
 
+	const className = clsx( 'dataviews-view-table__cell-content-wrapper', {
+		'dataviews-view-table__cell-align-end': align === 'end',
+		'dataviews-view-table__cell-align-center': align === 'center',
+	} );
+
 	return (
-		<div className="dataviews-view-table__cell-content-wrapper">
-			<field.render { ...{ item } } />
+		<div className={ className }>
+			<field.render item={ item } field={ field } />
 		</div>
 	);
 }
@@ -88,7 +110,9 @@ function TableRow< Item >( {
 	getItemId,
 	isItemClickable,
 	onClickItem,
+	renderItemLink,
 	onChangeSelection,
+	isActionsColumnSticky,
 }: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = hasPossibleBulkAction && selection.includes( id );
@@ -165,20 +189,29 @@ function TableRow< Item >( {
 						}
 						isItemClickable={ isItemClickable }
 						onClickItem={ onClickItem }
+						renderItemLink={ renderItemLink }
 					/>
 				</td>
 			) }
 			{ columns.map( ( column: string ) => {
 				// Explicit picks the supported styles.
-				const { width, maxWidth, minWidth } =
+				const { width, maxWidth, minWidth, align } =
 					view.layout?.styles?.[ column ] ?? {};
 
 				return (
-					<td key={ column } style={ { width, maxWidth, minWidth } }>
+					<td
+						key={ column }
+						style={ {
+							width,
+							maxWidth,
+							minWidth,
+						} }
+					>
 						<TableColumnField
 							fields={ fields }
 							item={ item }
 							column={ column }
+							align={ align }
 						/>
 					</td>
 				);
@@ -192,7 +225,11 @@ function TableRow< Item >( {
 
 				/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 				<td
-					className="dataviews-view-table__actions-column"
+					className={ clsx( 'dataviews-view-table__actions-column', {
+						'dataviews-view-table__actions-column--sticky': true,
+						'dataviews-view-table__actions-column--stuck':
+							isActionsColumnSticky,
+					} ) }
 					onClick={ ( e ) => e.stopPropagation() }
 				>
 					<ItemActions item={ item } actions={ actions } />
@@ -216,8 +253,11 @@ function ViewTable< Item >( {
 	setOpenedFilter,
 	onClickItem,
 	isItemClickable,
+	renderItemLink,
 	view,
+	className,
 }: ViewTableProps< Item > ) {
+	const { containerRef } = useContext( DataViewsContext );
 	const headerMenuRefs = useRef<
 		Map< string, { node: HTMLButtonElement; fallback: string } >
 	>( new Map() );
@@ -235,6 +275,11 @@ function ViewTable< Item >( {
 
 	const tableNoticeId = useId();
 
+	const isHorizontalScrollEnd = useIsHorizontalScrollEnd( {
+		scrollContainerRef: containerRef,
+		enabled: !! actions?.length,
+	} );
+
 	if ( nextHeaderMenuToFocus ) {
 		// If we need to force focus, we short-circuit rendering here
 		// to prevent any additional work while we handle that.
@@ -281,7 +326,7 @@ function ViewTable< Item >( {
 	return (
 		<>
 			<table
-				className={ clsx( 'dataviews-view-table', {
+				className={ clsx( 'dataviews-view-table', className, {
 					[ `has-${ view.layout?.density }-density` ]:
 						view.layout?.density &&
 						[ 'compact', 'comfortable' ].includes(
@@ -328,12 +373,17 @@ function ViewTable< Item >( {
 						) }
 						{ columns.map( ( column, index ) => {
 							// Explicit picks the supported styles.
-							const { width, maxWidth, minWidth } =
+							const { width, maxWidth, minWidth, align } =
 								view.layout?.styles?.[ column ] ?? {};
 							return (
 								<th
 									key={ column }
-									style={ { width, maxWidth, minWidth } }
+									style={ {
+										width,
+										maxWidth,
+										minWidth,
+										textAlign: align,
+									} }
 									aria-sort={
 										view.sort?.direction &&
 										view.sort?.field === column
@@ -355,7 +405,17 @@ function ViewTable< Item >( {
 							);
 						} ) }
 						{ !! actions?.length && (
-							<th className="dataviews-view-table__actions-column">
+							<th
+								className={ clsx(
+									'dataviews-view-table__actions-column',
+									{
+										'dataviews-view-table__actions-column--sticky':
+											true,
+										'dataviews-view-table__actions-column--stuck':
+											! isHorizontalScrollEnd,
+									}
+								) }
+							>
 								<span className="dataviews-view-table-header">
 									{ __( 'Actions' ) }
 								</span>
@@ -387,7 +447,11 @@ function ViewTable< Item >( {
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
 								onClickItem={ onClickItem }
+								renderItemLink={ renderItemLink }
 								isItemClickable={ isItemClickable }
+								isActionsColumnSticky={
+									! isHorizontalScrollEnd
+								}
 							/>
 						) ) }
 				</tbody>
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 02ccbe4fed7bdd..51aa54e4736945 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -22,6 +22,25 @@
 			text-align: right;
 		}
 
+		&.dataviews-view-table__actions-column--sticky {
+			position: sticky;
+			right: 0;
+			background-color: $white;
+		}
+
+		&.dataviews-view-table__actions-column--stuck {
+			&::after {
+				display: block;
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				width: 1px;
+				background-color: $gray-100;
+			}
+		}
+
 		&.dataviews-view-table__checkbox-column {
 			padding-right: 0;
 			width: 1%;
@@ -52,7 +71,8 @@
 			border-bottom: 0;
 		}
 
-		&.is-hovered {
+		&.is-hovered,
+		&.is-hovered .dataviews-view-table__actions-column--sticky {
 			background-color: #f8f8f8;
 		}
 
@@ -99,6 +119,14 @@
 			&:hover {
 				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 			}
+
+			.dataviews-view-table__actions-column--sticky {
+				background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, $white);
+			}
+
+			&:hover .dataviews-view-table__actions-column--sticky {
+				background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, $white);
+			}
 		}
 	}
 	thead {
@@ -131,6 +159,14 @@
 			min-height: $grid-unit-40;
 			display: flex;
 			align-items: center;
+
+			&.dataviews-view-table__cell-align-end {
+				justify-content: flex-end;
+			}
+
+			&.dataviews-view-table__cell-align-center {
+				justify-content: center;
+			}
 		}
 
 		.components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
@@ -224,4 +260,26 @@
 
 .dataviews-column-primary__media {
 	max-width: 60px;
+	overflow: hidden;
+	position: relative;
+	flex-shrink: 0;
+	background-color: $white;
+	border-radius: $radius-medium;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.1);
+		border-radius: $radius-medium;
+	}
 }
diff --git a/packages/dataviews/src/dataviews-layouts/table/use-is-horizontal-scroll-end.ts b/packages/dataviews/src/dataviews-layouts/table/use-is-horizontal-scroll-end.ts
new file mode 100644
index 00000000000000..3f0cd561acfb64
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/use-is-horizontal-scroll-end.ts
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { MutableRefObject } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDebounce } from '@wordpress/compose';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
+
+const isScrolledToEnd = ( element: Element ) => {
+	if ( isRTL() ) {
+		const scrollLeft = Math.abs( element.scrollLeft );
+		return scrollLeft <= 1;
+	}
+
+	return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
+};
+
+/**
+ * A hook to check if a given scroll container has reached the horizontal scroll end.
+ *
+ * The current way receives "refs" as arguments, but it lacks a mechanism to detect when a ref has changed.
+ * As a result, when the "ref" is updated and attached to a new div, the computation should trigger again.
+ * However, this isn't possible in the current setup because the hook is unaware that the ref has changed.
+ *
+ * See https://github.com/Automattic/wp-calypso/pull/103005#discussion_r2077567912.
+ *
+ * @param {Object}                                  params                    The parameters for the hook.
+ * @param {MutableRefObject<HTMLDivElement | null>} params.scrollContainerRef The ref to the scroll container element.
+ * @param {boolean}                                 [params.enabled=false]    Whether the hook is enabled.
+ * @return {boolean} - Returns true if the scroll container is scrolled to the end or false otherwise.
+ */
+export function useIsHorizontalScrollEnd( {
+	scrollContainerRef,
+	enabled = false,
+}: {
+	scrollContainerRef: React.MutableRefObject< HTMLDivElement | null >;
+	enabled?: boolean;
+} ): boolean {
+	const [ isHorizontalScrollEnd, setIsHorizontalScrollEnd ] =
+		useState( false );
+
+	const handleIsHorizontalScrollEnd = useDebounce(
+		useCallback( () => {
+			const scrollContainer = scrollContainerRef.current;
+			if ( scrollContainer ) {
+				setIsHorizontalScrollEnd( isScrolledToEnd( scrollContainer ) );
+			}
+		}, [ scrollContainerRef, setIsHorizontalScrollEnd ] ),
+		200
+	);
+
+	useEffect( () => {
+		if (
+			typeof window === 'undefined' ||
+			! enabled ||
+			! scrollContainerRef.current
+		) {
+			return () => {};
+		}
+
+		handleIsHorizontalScrollEnd();
+		scrollContainerRef.current.addEventListener(
+			'scroll',
+			handleIsHorizontalScrollEnd
+		);
+		window.addEventListener( 'resize', handleIsHorizontalScrollEnd );
+
+		return () => {
+			scrollContainerRef.current?.removeEventListener(
+				'scroll',
+				handleIsHorizontalScrollEnd
+			);
+			window.removeEventListener( 'resize', handleIsHorizontalScrollEnd );
+		};
+	}, [ scrollContainerRef, enabled ] );
+
+	return isHorizontalScrollEnd;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
deleted file mode 100644
index 810f03cdfd3b76..00000000000000
--- a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export default function getClickableItemProps< Item >( {
-	item,
-	isItemClickable,
-	onClickItem,
-	className,
-}: {
-	item: Item;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem?: ( item: Item ) => void;
-	className?: string;
-} ) {
-	if ( ! isItemClickable( item ) || ! onClickItem ) {
-		return { className };
-	}
-
-	return {
-		className: className
-			? `${ className } ${ className }--clickable`
-			: undefined,
-		role: 'button',
-		tabIndex: 0,
-		onClick: ( event: React.MouseEvent ) => {
-			// Prevents onChangeSelection from triggering.
-			event.stopPropagation();
-			onClickItem( item );
-		},
-		onKeyDown: ( event: React.KeyboardEvent ) => {
-			if (
-				event.key === 'Enter' ||
-				event.key === '' ||
-				event.key === ' '
-			) {
-				// Prevents onChangeSelection from triggering.
-				event.stopPropagation();
-				onClickItem( item );
-			}
-		},
-	};
-}
diff --git a/packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx b/packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx
new file mode 100644
index 00000000000000..8eb0b540c245b2
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/utils/item-click-wrapper.tsx
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, ReactElement, ComponentProps } from 'react';
+
+function getClickableItemProps< Item >( {
+	item,
+	isItemClickable,
+	onClickItem,
+	className,
+}: {
+	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+	className?: string;
+} ) {
+	if ( ! isItemClickable( item ) || ! onClickItem ) {
+		return { className };
+	}
+
+	return {
+		className: className
+			? `${ className } ${ className }--clickable`
+			: undefined,
+		role: 'button',
+		tabIndex: 0,
+		onClick: ( event: React.MouseEvent ) => {
+			// Prevents onChangeSelection from triggering.
+			event.stopPropagation();
+			onClickItem( item );
+		},
+		onKeyDown: ( event: React.KeyboardEvent ) => {
+			if (
+				event.key === 'Enter' ||
+				event.key === '' ||
+				event.key === ' '
+			) {
+				// Prevents onChangeSelection from triggering.
+				event.stopPropagation();
+				onClickItem( item );
+			}
+		},
+	};
+}
+
+export function ItemClickWrapper< Item >( {
+	item,
+	isItemClickable,
+	onClickItem,
+	renderItemLink,
+	className,
+	children,
+	...extraProps
+}: {
+	item: Item;
+	isItemClickable: ( item: Item ) => boolean;
+	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
+	className?: string;
+	children: ReactNode;
+} ) {
+	if ( ! isItemClickable( item ) ) {
+		return children;
+	}
+
+	// If we have a renderItemLink, use it
+	if ( renderItemLink ) {
+		return renderItemLink( {
+			item,
+			className: `${ className } ${ className }--clickable`,
+			...extraProps,
+			children,
+		} );
+	}
+
+	// Otherwise use the classic click handler approach
+	const clickProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className,
+	} );
+
+	return (
+		<div { ...clickProps } { ...extraProps }>
+			{ children }
+		</div>
+	);
+}
diff --git a/packages/dataviews/src/field-types/array.tsx b/packages/dataviews/src/field-types/array.tsx
new file mode 100644
index 00000000000000..2078707957ff33
--- /dev/null
+++ b/packages/dataviews/src/field-types/array.tsx
@@ -0,0 +1,75 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import {
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT_ALL,
+} from '../constants';
+
+// Sort arrays by length, then alphabetically by joined string
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	const arrA = Array.isArray( valueA ) ? valueA : [];
+	const arrB = Array.isArray( valueB ) ? valueB : [];
+	if ( arrA.length !== arrB.length ) {
+		return direction === 'asc'
+			? arrA.length - arrB.length
+			: arrB.length - arrA.length;
+	}
+
+	const joinedA = arrA.join( ',' );
+	const joinedB = arrB.join( ',' );
+	return direction === 'asc'
+		? joinedA.localeCompare( joinedB )
+		: joinedB.localeCompare( joinedA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( ! Array.isArray( value ) ) {
+		return false;
+	}
+
+	// Only allow strings for now. Can be extended to other types in the future.
+	if ( ! value.every( ( v ) => typeof v === 'string' ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context.elements.map( ( f ) => f.value );
+		if ( ! value.every( ( v ) => validValues.includes( v ) ) ) {
+			return false;
+		}
+	}
+	return true;
+}
+
+function render( { item, field }: DataViewRenderFieldProps< any > ) {
+	const value = field.getValue( { item } ) || [];
+	return value.join( ', ' );
+}
+
+const arrayFieldType: FieldTypeDefinition< any > = {
+	sort,
+	isValid,
+	Edit: null, // Not implemented yet
+	render,
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+};
+
+export default arrayFieldType;
diff --git a/packages/dataviews/src/field-types/boolean.tsx b/packages/dataviews/src/field-types/boolean.tsx
new file mode 100644
index 00000000000000..b58e013a7da6aa
--- /dev/null
+++ b/packages/dataviews/src/field-types/boolean.tsx
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import { OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const boolA = Boolean( a );
+	const boolB = Boolean( b );
+
+	if ( boolA === boolB ) {
+		return 0;
+	}
+
+	// In ascending order, false comes before true
+	if ( direction === 'asc' ) {
+		return boolA ? 1 : -1;
+	}
+
+	// In descending order, true comes before false
+	return boolA ? -1 : 1;
+}
+
+function isValid( value: any ) {
+	if ( ! [ true, false, undefined ].includes( value ) ) {
+		return false;
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'boolean',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		if ( field.elements ) {
+			return renderFromElements( { item, field } );
+		}
+
+		if ( field.getValue( { item } ) === true ) {
+			return __( 'True' );
+		}
+
+		if ( field.getValue( { item } ) === false ) {
+			return __( 'False' );
+		}
+
+		return null;
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+		validOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+	},
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/date.ts b/packages/dataviews/src/field-types/date.ts
new file mode 100644
index 00000000000000..e1dec222626b3a
--- /dev/null
+++ b/packages/dataviews/src/field-types/date.ts
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+
+const getFormattedDate = ( dateToDisplay: string | null ) =>
+	dateI18n( getSettings().formats.date, getDate( dateToDisplay ) );
+
+function sort( a: any, b: any, direction: SortDirection ) {
+	const timeA = new Date( a ).getTime();
+	const timeB = new Date( b ).getTime();
+
+	return direction === 'asc' ? timeA - timeB : timeB - timeA;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: null,
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		if ( field.elements ) {
+			return renderFromElements( { item, field } );
+		}
+
+		const value = field.getValue( { item } );
+		if ( ! value ) {
+			return '';
+		}
+
+		return getFormattedDate( value );
+	},
+	enableSorting: true,
+	filterBy: false,
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/datetime.tsx b/packages/dataviews/src/field-types/datetime.tsx
index aa97fc86c318c2..c89a1e013b68b2 100644
--- a/packages/dataviews/src/field-types/datetime.tsx
+++ b/packages/dataviews/src/field-types/datetime.tsx
@@ -1,7 +1,23 @@
 /**
  * Internal dependencies
  */
-import type { SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
+} from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	const timeA = new Date( a ).getTime();
@@ -25,4 +41,32 @@ export default {
 	sort,
 	isValid,
 	Edit: 'datetime',
-};
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_ON,
+			OPERATOR_NOT_ON,
+			OPERATOR_BEFORE,
+			OPERATOR_AFTER,
+			OPERATOR_BEFORE_INC,
+			OPERATOR_AFTER_INC,
+			OPERATOR_IN_THE_PAST,
+			OPERATOR_OVER,
+		],
+		validOperators: [
+			OPERATOR_ON,
+			OPERATOR_NOT_ON,
+			OPERATOR_BEFORE,
+			OPERATOR_AFTER,
+			OPERATOR_BEFORE_INC,
+			OPERATOR_AFTER_INC,
+			OPERATOR_IN_THE_PAST,
+			OPERATOR_OVER,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/email.tsx b/packages/dataviews/src/field-types/email.tsx
new file mode 100644
index 00000000000000..99e263896bbc2a
--- /dev/null
+++ b/packages/dataviews/src/field-types/email.tsx
@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { isEmail } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} from '../constants';
+
+function sort( valueA: any, valueB: any, direction: SortDirection ) {
+	return direction === 'asc'
+		? valueA.localeCompare( valueB )
+		: valueB.localeCompare( valueA );
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	// TODO: this implicitly means the value is required.
+	if ( value === '' ) {
+		return false;
+	}
+
+	if ( ! isEmail( value ) ) {
+		return false;
+	}
+
+	if ( context?.elements ) {
+		const validValues = context?.elements?.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: 'email',
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/index.tsx b/packages/dataviews/src/field-types/index.tsx
index eb9dada479c6bf..36684450ef5755 100644
--- a/packages/dataviews/src/field-types/index.tsx
+++ b/packages/dataviews/src/field-types/index.tsx
@@ -1,10 +1,23 @@
 /**
  * Internal dependencies
  */
-import type { FieldType, SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	FieldType,
+	FieldTypeDefinition,
+	SortDirection,
+	ValidationContext,
+} from '../types';
+import { default as email } from './email';
 import { default as integer } from './integer';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
+import { default as date } from './date';
+import { default as boolean } from './boolean';
+import { default as media } from './media';
+import { default as array } from './array';
+import { renderFromElements } from '../utils';
+import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT } from '../constants';
 
 /**
  *
@@ -12,7 +25,13 @@ import { default as datetime } from './datetime';
  *
  * @return A field type definition.
  */
-export default function getFieldTypeDefinition( type?: FieldType ) {
+export default function getFieldTypeDefinition< Item >(
+	type?: FieldType
+): FieldTypeDefinition< Item > {
+	if ( 'email' === type ) {
+		return email;
+	}
+
 	if ( 'integer' === type ) {
 		return integer;
 	}
@@ -25,6 +44,24 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 		return datetime;
 	}
 
+	if ( 'date' === type ) {
+		return date;
+	}
+
+	if ( 'boolean' === type ) {
+		return boolean;
+	}
+
+	if ( 'media' === type ) {
+		return media;
+	}
+
+	if ( 'array' === type ) {
+		return array;
+	}
+
+	// This is a fallback for fields that don't provide a type.
+	// It can be removed when the field.type is mandatory.
 	return {
 		sort: ( a: any, b: any, direction: SortDirection ) => {
 			if ( typeof a === 'number' && typeof b === 'number' ) {
@@ -45,6 +82,16 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 
 			return true;
 		},
-		Edit: () => null,
+		Edit: null,
+		render: ( { item, field }: DataViewRenderFieldProps< Item > ) => {
+			return field.elements
+				? renderFromElements( { item, field } )
+				: field.getValue( { item } );
+		},
+		enableSorting: true,
+		filterBy: {
+			defaultOperators: [ OPERATOR_IS, OPERATOR_IS_NOT ],
+			validOperators: ALL_OPERATORS,
+		},
 	};
 }
diff --git a/packages/dataviews/src/field-types/integer.tsx b/packages/dataviews/src/field-types/integer.tsx
index 2b2163ef6020e4..d6955d967fa79d 100644
--- a/packages/dataviews/src/field-types/integer.tsx
+++ b/packages/dataviews/src/field-types/integer.tsx
@@ -1,7 +1,26 @@
 /**
  * Internal dependencies
  */
-import type { SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_IS,
+	OPERATOR_IS_NOT,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_BETWEEN,
+} from '../constants';
 
 function sort( a: any, b: any, direction: SortDirection ) {
 	return direction === 'asc' ? a - b : b - a;
@@ -31,4 +50,36 @@ export default {
 	sort,
 	isValid,
 	Edit: 'integer',
-};
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+		],
+		validOperators: [
+			// Single-selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_LESS_THAN,
+			OPERATOR_GREATER_THAN,
+			OPERATOR_LESS_THAN_OR_EQUAL,
+			OPERATOR_GREATER_THAN_OR_EQUAL,
+			OPERATOR_BETWEEN,
+			// Multiple-selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/media.tsx b/packages/dataviews/src/field-types/media.tsx
new file mode 100644
index 00000000000000..1e68e0d4df5c19
--- /dev/null
+++ b/packages/dataviews/src/field-types/media.tsx
@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { ValidationContext, FieldTypeDefinition } from '../types';
+
+function sort() {
+	return 0;
+}
+
+function isValid( value: any, context?: ValidationContext ) {
+	if ( context?.elements ) {
+		const validValues = context?.elements.map( ( f ) => f.value );
+		if ( ! validValues.includes( value ) ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default {
+	sort,
+	isValid,
+	Edit: null,
+	render: () => null,
+	enableSorting: false,
+	filterBy: false,
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/field-types/text.tsx b/packages/dataviews/src/field-types/text.tsx
index 76ff699d0848c4..c30f26b60ec51e 100644
--- a/packages/dataviews/src/field-types/text.tsx
+++ b/packages/dataviews/src/field-types/text.tsx
@@ -1,7 +1,24 @@
 /**
  * Internal dependencies
  */
-import type { SortDirection, ValidationContext } from '../types';
+import type {
+	DataViewRenderFieldProps,
+	SortDirection,
+	ValidationContext,
+	FieldTypeDefinition,
+} from '../types';
+import { renderFromElements } from '../utils';
+import {
+	OPERATOR_CONTAINS,
+	OPERATOR_IS,
+	OPERATOR_IS_ALL,
+	OPERATOR_IS_ANY,
+	OPERATOR_IS_NONE,
+	OPERATOR_IS_NOT,
+	OPERATOR_IS_NOT_ALL,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+} from '../constants';
 
 function sort( valueA: any, valueB: any, direction: SortDirection ) {
 	return direction === 'asc'
@@ -24,4 +41,26 @@ export default {
 	sort,
 	isValid,
 	Edit: 'text',
-};
+	render: ( { item, field }: DataViewRenderFieldProps< any > ) => {
+		return field.elements
+			? renderFromElements( { item, field } )
+			: field.getValue( { item } );
+	},
+	enableSorting: true,
+	filterBy: {
+		defaultOperators: [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ],
+		validOperators: [
+			// Single selection
+			OPERATOR_IS,
+			OPERATOR_IS_NOT,
+			OPERATOR_CONTAINS,
+			OPERATOR_NOT_CONTAINS,
+			OPERATOR_STARTS_WITH,
+			// Multiple selection
+			OPERATOR_IS_ANY,
+			OPERATOR_IS_NONE,
+			OPERATOR_IS_ALL,
+			OPERATOR_IS_NOT_ALL,
+		],
+	},
+} satisfies FieldTypeDefinition< any >;
diff --git a/packages/dataviews/src/filter-and-sort-data-view.ts b/packages/dataviews/src/filter-and-sort-data-view.ts
index da2e9915d515ba..27aacbd1f9360f 100644
--- a/packages/dataviews/src/filter-and-sort-data-view.ts
+++ b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -2,6 +2,12 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
+import { subDays, subWeeks, subMonths, subYears } from 'date-fns';
+
+/**
+ * WordPress dependencies
+ */
+import { getDate } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -13,6 +19,22 @@ import {
 	OPERATOR_IS_ANY,
 	OPERATOR_IS_ALL,
 	OPERATOR_IS_NOT_ALL,
+	OPERATOR_LESS_THAN,
+	OPERATOR_GREATER_THAN,
+	OPERATOR_LESS_THAN_OR_EQUAL,
+	OPERATOR_GREATER_THAN_OR_EQUAL,
+	OPERATOR_BEFORE,
+	OPERATOR_AFTER,
+	OPERATOR_BEFORE_INC,
+	OPERATOR_AFTER_INC,
+	OPERATOR_CONTAINS,
+	OPERATOR_NOT_CONTAINS,
+	OPERATOR_STARTS_WITH,
+	OPERATOR_BETWEEN,
+	OPERATOR_ON,
+	OPERATOR_NOT_ON,
+	OPERATOR_IN_THE_PAST,
+	OPERATOR_OVER,
 } from './constants';
 import { normalizeFields } from './normalize-fields';
 import type { Field, View } from './types';
@@ -23,6 +45,28 @@ function normalizeSearchInput( input = '' ) {
 
 const EMPTY_ARRAY: [] = [];
 
+/**
+ * Calculates a date offset from now.
+ *
+ * @param value Number of units to offset.
+ * @param unit  Unit of time to offset.
+ * @return      Date offset from now.
+ */
+function getRelativeDate( value: number, unit: string ): Date {
+	switch ( unit ) {
+		case 'days':
+			return subDays( new Date(), value );
+		case 'weeks':
+			return subWeeks( new Date(), value );
+		case 'months':
+			return subMonths( new Date(), value );
+		case 'years':
+			return subYears( new Date(), value );
+		default:
+			return new Date();
+	}
+}
+
 /**
  * Applies the filtering, sorting and pagination to the raw data based on the view configuration.
  *
@@ -54,10 +98,17 @@ export function filterSortAndPaginate< Item >(
 		filteredData = filteredData.filter( ( item ) => {
 			return _fields
 				.filter( ( field ) => field.enableGlobalSearch )
-				.map( ( field ) => {
-					return normalizeSearchInput( field.getValue( { item } ) );
-				} )
-				.some( ( field ) => field.includes( normalizedSearch ) );
+				.some( ( field ) => {
+					const fieldValue = field.getValue( { item } );
+					const values = Array.isArray( fieldValue )
+						? fieldValue
+						: [ fieldValue ];
+					return values.some( ( value ) =>
+						normalizeSearchInput( String( value ) ).includes(
+							normalizedSearch
+						)
+					);
+				} );
 		} );
 	}
 
@@ -121,28 +172,244 @@ export function filterSortAndPaginate< Item >(
 					} );
 				} else if ( filter.operator === OPERATOR_IS ) {
 					filteredData = filteredData.filter( ( item ) => {
-						return filter.value === field.getValue( { item } );
+						return (
+							filter.value === field.getValue( { item } ) ||
+							filter.value === undefined
+						);
 					} );
 				} else if ( filter.operator === OPERATOR_IS_NOT ) {
 					filteredData = filteredData.filter( ( item ) => {
 						return filter.value !== field.getValue( { item } );
 					} );
+				} else if (
+					filter.operator === OPERATOR_ON &&
+					filter.value !== undefined
+				) {
+					const filterDate = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldDate = getDate( field.getValue( { item } ) );
+						return filterDate.getTime() === fieldDate.getTime();
+					} );
+				} else if (
+					filter.operator === OPERATOR_NOT_ON &&
+					filter.value !== undefined
+				) {
+					const filterDate = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldDate = getDate( field.getValue( { item } ) );
+						return filterDate.getTime() !== fieldDate.getTime();
+					} );
+				} else if (
+					filter.operator === OPERATOR_LESS_THAN &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue < filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_GREATER_THAN &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue > filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_LESS_THAN_OR_EQUAL &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue <= filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_GREATER_THAN_OR_EQUAL &&
+					filter.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return fieldValue >= filter.value;
+					} );
+				} else if (
+					filter.operator === OPERATOR_CONTAINS &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							fieldValue
+								.toLowerCase()
+								.includes(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_NOT_CONTAINS &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							! fieldValue
+								.toLowerCase()
+								.includes(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_STARTS_WITH &&
+					filter?.value !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						return (
+							typeof fieldValue === 'string' &&
+							filter.value &&
+							fieldValue
+								.toLowerCase()
+								.startsWith(
+									String( filter.value ).toLowerCase()
+								)
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_BEFORE &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue < filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_AFTER &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue > filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_BEFORE_INC &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue <= filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_AFTER_INC &&
+					filter.value !== undefined
+				) {
+					const filterValue = getDate( filter.value );
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue >= filterValue;
+					} );
+				} else if (
+					filter.operator === OPERATOR_BETWEEN &&
+					Array.isArray( filter.value ) &&
+					filter.value.length === 2 &&
+					filter.value[ 0 ] !== undefined &&
+					filter.value[ 1 ] !== undefined
+				) {
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = field.getValue( { item } );
+						if (
+							typeof fieldValue === 'number' ||
+							fieldValue instanceof Date ||
+							typeof fieldValue === 'string'
+						) {
+							return (
+								fieldValue >= filter.value[ 0 ] &&
+								fieldValue <= filter.value[ 1 ]
+							);
+						}
+						return false;
+					} );
+				} else if (
+					filter.operator === OPERATOR_IN_THE_PAST &&
+					filter.value?.value !== undefined &&
+					filter.value?.unit !== undefined
+				) {
+					const targetDate = getRelativeDate(
+						filter.value.value,
+						filter.value.unit
+					);
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return (
+							fieldValue >= targetDate && fieldValue <= new Date()
+						);
+					} );
+				} else if (
+					filter.operator === OPERATOR_OVER &&
+					filter.value?.value !== undefined &&
+					filter.value?.unit !== undefined
+				) {
+					const targetDate = getRelativeDate(
+						filter.value.value,
+						filter.value.unit
+					);
+					filteredData = filteredData.filter( ( item ) => {
+						const fieldValue = getDate(
+							field.getValue( { item } )
+						);
+						return fieldValue < targetDate;
+					} );
 				}
 			}
 		} );
 	}
 
 	// Handle sorting.
-	if ( view.sort ) {
-		const fieldId = view.sort.field;
-		const fieldToSort = _fields.find( ( field ) => {
-			return field.id === fieldId;
+	const sortByField = view.sort?.field
+		? _fields.find( ( field ) => {
+				return field.id === view.sort?.field;
+		  } )
+		: null;
+	const groupByField = view.groupByField
+		? _fields.find( ( field ) => {
+				return field.id === view.groupByField;
+		  } )
+		: null;
+	if ( sortByField || groupByField ) {
+		filteredData.sort( ( a, b ) => {
+			if ( groupByField ) {
+				const groupCompare = groupByField.sort( a, b, 'asc' );
+
+				// If items are in different groups, return the group comparison result.
+				// Otherwise, fall back to sorting by the sort field.
+				if ( groupCompare !== 0 ) {
+					return groupCompare;
+				}
+			}
+
+			if ( sortByField ) {
+				return sortByField.sort( a, b, view.sort?.direction ?? 'desc' );
+			}
+
+			return 0;
 		} );
-		if ( fieldToSort ) {
-			filteredData.sort( ( a, b ) => {
-				return fieldToSort.sort( a, b, view.sort?.direction ?? 'desc' );
-			} );
-		}
 	}
 
 	// Handle pagination.
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index 2ed87cbe112229..b0188652f08f26 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -1,9 +1,25 @@
+/**
+ * External dependencies
+ */
+import type { FunctionComponent } from 'react';
+
 /**
  * Internal dependencies
  */
 import getFieldTypeDefinition from './field-types';
-import type { Field, NormalizedField } from './types';
+import type {
+	DataViewRenderFieldProps,
+	Field,
+	FieldTypeDefinition,
+	NormalizedFilterByConfig,
+	NormalizedField,
+} from './types';
 import { getControl } from './dataform-controls';
+import {
+	ALL_OPERATORS,
+	OPERATOR_BETWEEN,
+	SINGLE_SELECTION_OPERATORS,
+} from './constants';
 
 const getValueFromId =
 	( id: string ) =>
@@ -21,6 +37,83 @@ const getValueFromId =
 		return value;
 	};
 
+function getFilterBy< Item >(
+	field: Field< Item >,
+	fieldTypeDefinition: FieldTypeDefinition< Item >
+): NormalizedFilterByConfig | false {
+	if ( field.filterBy === false ) {
+		return false;
+	}
+
+	if ( typeof field.filterBy === 'object' ) {
+		let operators = field.filterBy.operators;
+
+		// Assign default values if no operator was provided.
+		if ( ! operators || ! Array.isArray( operators ) ) {
+			operators = !! fieldTypeDefinition.filterBy
+				? fieldTypeDefinition.filterBy.defaultOperators
+				: [];
+		}
+
+		// Make sure only valid operators are included.
+		let validOperators = ALL_OPERATORS;
+		if ( typeof fieldTypeDefinition.filterBy === 'object' ) {
+			validOperators = fieldTypeDefinition.filterBy.validOperators;
+		}
+		operators = operators.filter( ( operator ) =>
+			validOperators.includes( operator )
+		);
+
+		// The `between` operator is not supported when elements are provided.
+		if ( field.elements && operators.includes( OPERATOR_BETWEEN ) ) {
+			operators = operators.filter(
+				( operator ) => operator !== OPERATOR_BETWEEN
+			);
+		}
+
+		// Do not allow mixing single & multiselection operators.
+		// Remove multiselection operators if any of the single selection ones is present.
+		const hasSingleSelectionOperator = operators.some( ( operator ) =>
+			SINGLE_SELECTION_OPERATORS.includes( operator )
+		);
+		if ( hasSingleSelectionOperator ) {
+			operators = operators.filter( ( operator ) =>
+				// The 'Between' operator is unique as it can be combined with single selection operators.
+				[ ...SINGLE_SELECTION_OPERATORS, OPERATOR_BETWEEN ].includes(
+					operator
+				)
+			);
+		}
+
+		// If no operators are left at this point,
+		// the filters should be disabled.
+		if ( operators.length === 0 ) {
+			return false;
+		}
+
+		return {
+			isPrimary: !! field.filterBy.isPrimary,
+			operators,
+		};
+	}
+
+	if ( fieldTypeDefinition.filterBy === false ) {
+		return false;
+	}
+
+	let defaultOperators = fieldTypeDefinition.filterBy.defaultOperators;
+	// The `between` operator is not supported when elements are provided.
+	if ( field.elements && defaultOperators.includes( OPERATOR_BETWEEN ) ) {
+		defaultOperators = defaultOperators.filter(
+			( operator ) => operator !== OPERATOR_BETWEEN
+		);
+	}
+
+	return {
+		operators: defaultOperators,
+	};
+}
+
 /**
  * Apply default values and normalize the fields config.
  *
@@ -31,8 +124,9 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
-		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
-
+		const fieldTypeDefinition = getFieldTypeDefinition< Item >(
+			field.type
+		);
 		const getValue = field.getValue || getValueFromId( field.id );
 
 		const sort =
@@ -56,16 +150,20 @@ export function normalizeFields< Item >(
 
 		const Edit = getControl( field, fieldTypeDefinition );
 
-		const renderFromElements = ( { item }: { item: Item } ) => {
-			const value = getValue( { item } );
-			return (
-				field?.elements?.find( ( element ) => element.value === value )
-					?.label || getValue( { item } )
-			);
-		};
-
 		const render =
-			field.render || ( field.elements ? renderFromElements : getValue );
+			field.render ??
+			function render( {
+				item,
+				field: renderedField,
+			}: DataViewRenderFieldProps< Item > ) {
+				return (
+					fieldTypeDefinition.render as FunctionComponent<
+						DataViewRenderFieldProps< Item >
+					>
+				 )( { item, field: renderedField } );
+			};
+
+		const filterBy = getFilterBy( field, fieldTypeDefinition );
 
 		return {
 			...field,
@@ -77,7 +175,12 @@ export function normalizeFields< Item >(
 			isValid,
 			Edit,
 			enableHiding: field.enableHiding ?? true,
-			enableSorting: field.enableSorting ?? true,
+			enableSorting:
+				field.enableSorting ??
+				fieldTypeDefinition.enableSorting ??
+				true,
+			filterBy,
+			readOnly: field.readOnly ?? fieldTypeDefinition.readOnly ?? false,
 		};
 	} );
 }
diff --git a/packages/dataviews/src/test/dataviews.tsx b/packages/dataviews/src/test/dataviews.tsx
index fb55bf8064622f..58f46c2cd0f34f 100644
--- a/packages/dataviews/src/test/dataviews.tsx
+++ b/packages/dataviews/src/test/dataviews.tsx
@@ -268,7 +268,16 @@ describe( 'DataViews component', () => {
 					} }
 					actions={ actions }
 					isItemClickable={ () => true }
-					onClickItem={ onClickItemCallback }
+					renderItemLink={ ( { item, ...props } ) => (
+						<button
+							// @ts-expect-error
+							onClick={ ( event ) => {
+								event.preventDefault();
+								onClickItemCallback( item );
+							} }
+							{ ...props }
+						/>
+					) }
 				/>
 			);
 			const titleField = screen.getByText( data[ 0 ].title );
@@ -335,7 +344,16 @@ describe( 'DataViews component', () => {
 					} }
 					actions={ actions }
 					isItemClickable={ () => true }
-					onClickItem={ mediaClickItemCallback }
+					renderItemLink={ ( { item, ...props } ) => (
+						<button
+							// @ts-expect-error
+							onClick={ ( event ) => {
+								event.preventDefault();
+								mediaClickItemCallback( item );
+							} }
+							{ ...props }
+						/>
+					) }
 				/>
 			);
 			const imageField = screen.getByTestId(
diff --git a/packages/dataviews/src/test/filter-and-sort-data-view.js b/packages/dataviews/src/test/filter-and-sort-data-view.js
index 7f0b3a30e8587c..feb23bb95514a7 100644
--- a/packages/dataviews/src/test/filter-and-sort-data-view.js
+++ b/packages/dataviews/src/test/filter-and-sort-data-view.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { subDays, subYears } from 'date-fns';
+
 /**
  * Internal dependencies
  */
@@ -44,13 +49,13 @@ describe( 'filters', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{
-				search: 'photo',
+				search: 'earth',
 				filters: [],
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 1 );
-		expect( result[ 0 ].description ).toBe( 'NASA photo' );
+		expect( result ).toHaveLength( 2 );
+		expect( result[ 0 ].description ).toBe( "Earth's satellite" );
 	} );
 
 	it( 'should perform case-insensitive and accent-insensitive search', () => {
@@ -66,6 +71,54 @@ describe( 'filters', () => {
 		expect( result[ 0 ].description ).toBe( 'La planète Vénus' );
 	} );
 
+	it( 'should search over array fields when enableGlobalSearch is true', () => {
+		const fieldsWithArraySearch = fields.map( ( field ) =>
+			field.id === 'categories'
+				? { ...field, enableGlobalSearch: true }
+				: field
+		);
+
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'Moon',
+				filters: [],
+			},
+			fieldsWithArraySearch
+		);
+
+		// Should find items with "satellite" in categories
+		expect( result ).toHaveLength( 3 );
+		expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
+			'Europa',
+			'Io',
+			'Moon',
+		] );
+	} );
+
+	it( 'should search over array fields case-insensitively', () => {
+		const fieldsWithArraySearch = fields.map( ( field ) =>
+			field.id === 'categories'
+				? { ...field, enableGlobalSearch: true }
+				: field
+		);
+
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				search: 'planet',
+				filters: [],
+			},
+			fieldsWithArraySearch
+		);
+
+		// Should find items with "Planet" in categories (case-insensitive)
+		expect( result ).toHaveLength( 8 );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Neptune' );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Mercury' );
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Earth' );
+	} );
+
 	it( 'should search using IS filter', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
@@ -100,9 +153,9 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result ).toHaveLength( 9 );
-		expect( result[ 0 ].title ).toBe( 'Apollo' );
-		expect( result[ 1 ].title ).toBe( 'Space' );
-		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Io' );
+		expect( result[ 2 ].title ).toBe( 'Europa' );
 		expect( result[ 3 ].title ).toBe( 'Mercury' );
 		expect( result[ 4 ].title ).toBe( 'Venus' );
 		expect( result[ 5 ].title ).toBe( 'Earth' );
@@ -145,9 +198,9 @@ describe( 'filters', () => {
 			fields
 		);
 		expect( result ).toHaveLength( 3 );
-		expect( result[ 0 ].title ).toBe( 'Apollo' );
-		expect( result[ 1 ].title ).toBe( 'Space' );
-		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Io' );
+		expect( result[ 2 ].title ).toBe( 'Europa' );
 	} );
 
 	it( 'should search using IS ANY filter for ARRAY values', () => {
@@ -158,15 +211,15 @@ describe( 'filters', () => {
 					{
 						field: 'categories',
 						operator: 'isAny',
-						value: [ 'NASA' ],
+						value: [ 'Earth' ],
 					},
 				],
 			},
 			fields
 		);
 		expect( result ).toHaveLength( 2 );
-		expect( result[ 0 ].title ).toBe( 'Apollo' );
-		expect( result[ 1 ].title ).toBe( 'NASA' );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Earth' );
 	} );
 
 	it( 'should search using IS NONE filter for ARRAY values', () => {
@@ -177,14 +230,20 @@ describe( 'filters', () => {
 					{
 						field: 'categories',
 						operator: 'isNone',
-						value: [ 'Space' ],
+						value: [ 'Terrestrial' ],
 					},
 				],
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 1 );
-		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result ).toHaveLength( 7 );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Io' );
+		expect( result[ 2 ].title ).toBe( 'Europa' );
+		expect( result[ 3 ].title ).toBe( 'Neptune' );
+		expect( result[ 4 ].title ).toBe( 'Jupiter' );
+		expect( result[ 5 ].title ).toBe( 'Saturn' );
+		expect( result[ 6 ].title ).toBe( 'Uranus' );
 	} );
 
 	it( 'should search using IS ALL filter', () => {
@@ -201,7 +260,7 @@ describe( 'filters', () => {
 			},
 			fields
 		);
-		expect( result ).toHaveLength( 7 );
+		expect( result ).toHaveLength( 8 );
 		expect( result[ 0 ].title ).toBe( 'Neptune' );
 		expect( result[ 1 ].title ).toBe( 'Mercury' );
 		expect( result[ 2 ].title ).toBe( 'Venus' );
@@ -209,6 +268,7 @@ describe( 'filters', () => {
 		expect( result[ 4 ].title ).toBe( 'Mars' );
 		expect( result[ 5 ].title ).toBe( 'Jupiter' );
 		expect( result[ 6 ].title ).toBe( 'Saturn' );
+		expect( result[ 7 ].title ).toBe( 'Uranus' );
 	} );
 
 	it( 'should search using IS NOT ALL filter', () => {
@@ -219,20 +279,562 @@ describe( 'filters', () => {
 					{
 						field: 'categories',
 						operator: 'isNotAll',
-						value: [ 'Planet', 'Solar system' ],
+						value: [ 'Planet' ],
 					},
 				],
 			},
 			fields
 		);
 		expect( result ).toHaveLength( 3 );
-		expect( result[ 0 ].title ).toBe( 'Apollo' );
-		expect( result[ 1 ].title ).toBe( 'Space' );
-		expect( result[ 2 ].title ).toBe( 'NASA' );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Io' );
+		expect( result[ 2 ].title ).toBe( 'Europa' );
+	} );
+
+	it( 'should search using IS filter and return all values if filter.value is undefined', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'type',
+						operator: 'is',
+						value: undefined,
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Moon' );
+		expect( result[ 1 ].title ).toBe( 'Io' );
+		expect( result[ 2 ].title ).toBe( 'Europa' );
+		expect( result[ 3 ].title ).toBe( 'Neptune' );
+		expect( result[ 4 ].title ).toBe( 'Mercury' );
+		expect( result[ 5 ].title ).toBe( 'Venus' );
+		expect( result[ 6 ].title ).toBe( 'Earth' );
+		expect( result[ 7 ].title ).toBe( 'Mars' );
+		expect( result[ 8 ].title ).toBe( 'Jupiter' );
+		expect( result[ 9 ].title ).toBe( 'Saturn' );
+		expect( result[ 10 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should filter using LESS THAN operator for integer', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'lessThan',
+						value: 2,
+					},
+				],
+			},
+			fields
+		);
+		expect( result.every( ( item ) => item.satellites < 2 ) ).toBe( true );
+	} );
+
+	it( 'should filter using GREATER THAN operator for integer', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'greaterThan',
+						value: 10,
+					},
+				],
+			},
+			fields
+		);
+		expect( result.every( ( item ) => item.satellites > 10 ) ).toBe( true );
+	} );
+
+	it( 'should filter using LESS THAN OR EQUAL operator for integer', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'lessThanOrEqual',
+						value: 1,
+					},
+				],
+			},
+			fields
+		);
+		expect( result.every( ( item ) => item.satellites <= 1 ) ).toBe( true );
+	} );
+
+	it( 'should filter using GREATER THAN OR EQUAL operator for integer', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'greaterThanOrEqual',
+						value: 27,
+					},
+				],
+			},
+			fields
+		);
+		expect( result.every( ( item ) => item.satellites >= 27 ) ).toBe(
+			true
+		);
+	} );
+
+	it( 'should filter using CONTAINS operator for text fields', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'title',
+						operator: 'contains',
+						value: 'nep',
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should filter using NOT_CONTAINS operator for text fields', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'description',
+						operator: 'notContains',
+						value: 'Solar system',
+					},
+				],
+			},
+			fields
+		);
+		expect( result.map( ( r ) => r.description ) ).toEqual( [
+			"Earth's satellite",
+			'Moon of Jupiter',
+			'Moon of Jupiter',
+			'La planète Vénus',
+		] );
+	} );
+
+	it( 'should filter using STARTS_WITH operator for text fields', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'title',
+						operator: 'startsWith',
+						value: 'Mar',
+					},
+				],
+			},
+			fields
+		);
+		expect( result.map( ( r ) => r.title ) ).toContain( 'Mars' );
+	} );
+
+	it( 'should filter using BEFORE operator for datetime', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'before',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect(
+			result.every(
+				( item ) => new Date( item.date ) < new Date( '2020-01-01' )
+			)
+		).toBe( true );
+	} );
+
+	it( 'should filter using AFTER operator for datetime', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'after',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect(
+			result.every(
+				( item ) => new Date( item.date ) > new Date( '2020-01-01' )
+			)
+		).toBe( true );
+	} );
+
+	it( 'should filter using BEFORE (inc) operator for datetime', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'beforeInc',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect(
+			result.every(
+				( item ) => new Date( item.date ) <= new Date( '2020-01-01' )
+			)
+		).toBe( true );
+	} );
+
+	it( 'should filter using AFTER (inc) operator for datetime', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'afterInc',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect(
+			result.every(
+				( item ) => new Date( item.date ) >= new Date( '2020-01-01' )
+			)
+		).toBe( true );
+	} );
+
+	it( 'should filter using ON operator for datetime with exact date match', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'on',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect( result.length ).toBe( 2 );
+		expect( result[ 0 ].title ).toBe( 'Neptune' );
+	} );
+
+	it( 'should filter using ON operator for datetime with different date formats', () => {
+		// Test that '2019-03-01T00:00:00Z' matches '2019-03-01'
+		const testData = [
+			{ title: 'Test Item 1', date: '2019-03-01T00:00:00Z' },
+			{ title: 'Test Item 2', date: '2019-03-02' },
+		];
+		const testFields = [
+			{
+				id: 'date',
+				type: 'datetime',
+				getValue: ( { item } ) => item.date,
+			},
+		];
+
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'on',
+						value: '2019-03-01',
+					},
+				],
+			},
+			testFields
+		);
+		expect( result.length ).toBe( 1 );
+		expect( result[ 0 ].title ).toBe( 'Test Item 1' );
+	} );
+
+	it( 'should filter using NOT_ON operator for datetime', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'notOn',
+						value: '2020-01-01',
+					},
+				],
+			},
+			fields
+		);
+		expect( result.length ).toBe( 9 );
+		expect( result.map( ( r ) => r.title ) ).not.toContain( 'Neptune' );
+	} );
+
+	it( 'should filter using NOT_ON operator for datetime with different date formats', () => {
+		// Test that '2019-03-01T00:00:00Z' does not match '2019-03-02'
+		const testData = [
+			{ title: 'Test Item 1', date: '2019-03-01T00:00:00Z' },
+			{ title: 'Test Item 2', date: '2019-03-02T00:00:00Z' },
+		];
+		const testFields = [
+			{
+				id: 'date',
+				type: 'datetime',
+				getValue: ( { item } ) => item.date,
+			},
+		];
+
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'notOn',
+						value: '2019-03-01',
+					},
+				],
+			},
+			testFields
+		);
+		expect( result.length ).toBe( 1 );
+		expect( result[ 0 ].title ).toBe( 'Test Item 2' );
+	} );
+
+	it( 'should filter numbers inclusively between min and max using BETWEEN operator', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'between',
+						value: [ 10, 30 ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
+			'Neptune',
+			'Uranus',
+		] );
+	} );
+
+	it( 'should filter numbers inclusively at the edges using BETWEEN operator', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'between',
+						value: [ 28, 28 ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result.map( ( r ) => r.title ) ).toEqual( [ 'Uranus' ] );
+	} );
+
+	it( 'should filter dates inclusively between min and max using BETWEEN operator', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'between',
+						value: [ '1977-08-20', '1989-08-25' ],
+					},
+				],
+			},
+			fields
+		);
+		const allInRange = result.every(
+			( r ) => r.date >= '1977-08-20' && r.date <= '1989-08-25'
+		);
+		expect( allInRange ).toBe( true );
+	} );
+
+	it( 'should return no results if min > max using BETWEEN operator', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				filters: [
+					{
+						field: 'satellites',
+						operator: 'between',
+						value: [ 30, 10 ],
+					},
+				],
+			},
+			fields
+		);
+		expect( result ).toHaveLength( 0 );
+	} );
+
+	it( 'should filter using IN_THE_PAST operator for datetime (days)', () => {
+		const testData = [
+			{ title: 'Recent', date: subDays( new Date(), 5 ) },
+			{ title: 'Old', date: subDays( new Date(), 14 ) },
+		];
+		const testFields = [ { id: 'date', type: 'datetime', label: 'Date' } ];
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'inThePast',
+						value: { value: 7, unit: 'days' },
+					},
+				],
+			},
+			testFields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result ).toStrictEqual( [ testData[ 0 ] ] );
+	} );
+
+	it( 'should filter using OVER operator for datetime (days)', () => {
+		const testData = [
+			{ title: 'Recent', date: subDays( new Date(), 5 ) },
+			{ title: 'Old', date: subDays( new Date(), 14 ) },
+		];
+		const testFields = [ { id: 'date', type: 'datetime', label: 'Date' } ];
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'over',
+						value: { value: 10, unit: 'days' },
+					},
+				],
+			},
+			testFields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result ).toStrictEqual( [ testData[ 1 ] ] );
+	} );
+
+	it( 'should filter using IN_THE_PAST operator for datetime (years)', () => {
+		const testData = [
+			{ title: 'Recent', date: subYears( new Date(), 1 ) },
+			{ title: 'Old', date: subYears( new Date(), 5 ) },
+		];
+		const testFields = [ { id: 'date', type: 'datetime', label: 'Date' } ];
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'inThePast',
+						value: { value: 3, unit: 'years' },
+					},
+				],
+			},
+			testFields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result ).toStrictEqual( [ testData[ 0 ] ] );
+	} );
+
+	it( 'should filter using OVER operator for datetime (years)', () => {
+		const testData = [
+			{ title: 'Recent', date: subYears( new Date(), 1 ) },
+			{ title: 'Old', date: subYears( new Date(), 5 ) },
+		];
+		const testFields = [ { id: 'date', type: 'datetime', label: 'Date' } ];
+		const { data: result } = filterSortAndPaginate(
+			testData,
+			{
+				filters: [
+					{
+						field: 'date',
+						operator: 'over',
+						value: { value: 3, unit: 'years' },
+					},
+				],
+			},
+			testFields
+		);
+		expect( result ).toHaveLength( 1 );
+		expect( result ).toStrictEqual( [ testData[ 1 ] ] );
 	} );
 } );
 
 describe( 'sorting', () => {
+	it( 'should sort by groupByField first, then by sort.field', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'title', direction: 'desc' },
+				groupByField: 'type',
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+
+		expect( result[ 0 ].type ).toBe( 'Gas giant' );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].type ).toBe( 'Gas giant' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+
+		expect( result[ 2 ].type ).toBe( 'Ice giant' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+		expect( result[ 3 ].type ).toBe( 'Ice giant' );
+		expect( result[ 3 ].title ).toBe( 'Neptune' );
+
+		expect( result[ 4 ].type ).toBe( 'Satellite' );
+		expect( result[ 4 ].title ).toBe( 'Moon' );
+		expect( result[ 5 ].type ).toBe( 'Satellite' );
+		expect( result[ 5 ].title ).toBe( 'Io' );
+		expect( result[ 6 ].type ).toBe( 'Satellite' );
+		expect( result[ 6 ].title ).toBe( 'Europa' );
+
+		expect( result[ 7 ].type ).toBe( 'Terrestrial' );
+		expect( result[ 7 ].title ).toBe( 'Venus' );
+		expect( result[ 8 ].type ).toBe( 'Terrestrial' );
+		expect( result[ 8 ].title ).toBe( 'Mercury' );
+		expect( result[ 9 ].type ).toBe( 'Terrestrial' );
+		expect( result[ 9 ].title ).toBe( 'Mars' );
+		expect( result[ 10 ].type ).toBe( 'Terrestrial' );
+		expect( result[ 10 ].title ).toBe( 'Earth' );
+	} );
+
 	it( 'should sort integer field types', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
@@ -277,9 +879,9 @@ describe( 'sorting', () => {
 			fields
 		);
 		expect( resultDesc ).toHaveLength( 11 );
-		expect( resultDesc[ 0 ].title ).toBe( 'NASA' );
+		expect( resultDesc[ 0 ].title ).toBe( 'Europa' );
 		expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
-		expect( resultDesc[ 9 ].title ).toBe( 'Space' );
+		expect( resultDesc[ 9 ].title ).toBe( 'Io' );
 		expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
 
 		const { data: resultAsc } = filterSortAndPaginate(
@@ -291,9 +893,9 @@ describe( 'sorting', () => {
 		);
 		expect( resultAsc ).toHaveLength( 11 );
 		expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
-		expect( resultAsc[ 1 ].title ).toBe( 'Space' );
+		expect( resultAsc[ 1 ].title ).toBe( 'Io' );
 		expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
-		expect( resultAsc[ 10 ].title ).toBe( 'NASA' );
+		expect( resultAsc[ 10 ].title ).toBe( 'Europa' );
 	} );
 
 	it( 'should sort untyped fields if the value is a number', () => {
@@ -338,6 +940,28 @@ describe( 'sorting', () => {
 		expect( result[ 0 ].title ).toBe( 'Uranus' );
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 	} );
+
+	it( 'should sort only by groupByField when sort is not specified', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				groupByField: 'type',
+			},
+			fields
+		);
+
+		let currentType = result[ 0 ].type;
+		let groupCount = 1;
+
+		for ( let i = 1; i < result.length; i++ ) {
+			if ( result[ i ].type !== currentType ) {
+				currentType = result[ i ].type;
+				groupCount++;
+			}
+		}
+
+		expect( groupCount ).toBe( 4 );
+	} );
 } );
 
 describe( 'pagination', () => {
@@ -352,7 +976,7 @@ describe( 'pagination', () => {
 			fields
 		);
 		expect( result ).toHaveLength( 2 );
-		expect( result[ 0 ].title ).toBe( 'NASA' );
+		expect( result[ 0 ].title ).toBe( 'Europa' );
 		expect( result[ 1 ].title ).toBe( 'Neptune' );
 		expect( paginationInfo ).toStrictEqual( {
 			totalItems: data.length,
diff --git a/packages/dataviews/src/test/normalize-fields.ts b/packages/dataviews/src/test/normalize-fields.ts
index dce6a19766dcaa..6c114240946dd1 100644
--- a/packages/dataviews/src/test/normalize-fields.ts
+++ b/packages/dataviews/src/test/normalize-fields.ts
@@ -42,4 +42,159 @@ describe( 'normalizeFields: default getValue', () => {
 			expect( result ).toBe( 'value' );
 		} );
 	} );
+	describe( 'filterBy', () => {
+		it( 'returns the default field type definition if undefined for untyped field', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( { operators: [ 'is', 'isNot' ] } );
+		} );
+		it( 'returns the default field type definition if undefined for untyped field (for primary filters)', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					filterBy: {
+						isPrimary: true,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				isPrimary: true,
+				operators: [ 'is', 'isNot' ],
+			} );
+		} );
+
+		it( 'returns the field type definition for typed fields', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					type: 'integer',
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				operators: [
+					'is',
+					'isNot',
+					'lessThan',
+					'greaterThan',
+					'lessThanOrEqual',
+					'greaterThanOrEqual',
+					'between',
+				],
+			} );
+		} );
+
+		it( 'returns the field type definition for typed fields (for primary filters)', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					type: 'integer',
+					filterBy: {
+						isPrimary: true,
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				isPrimary: true,
+				operators: [
+					'is',
+					'isNot',
+					'lessThan',
+					'greaterThan',
+					'lessThanOrEqual',
+					'greaterThanOrEqual',
+					'between',
+				],
+			} );
+		} );
+
+		it( 'returns false if is false', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					filterBy: false,
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toBe( false );
+		} );
+
+		it( 'returns the config if it provides one', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					filterBy: {
+						isPrimary: true,
+						operators: [ 'is', 'isNot' ],
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				isPrimary: true,
+				operators: [ 'is', 'isNot' ],
+			} );
+		} );
+
+		it( 'returns false if the none of the operators are valid for the type', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					filterBy: {
+						// @ts-ignore
+						operators: [ 'invalid', 'operator' ],
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toBe( false );
+		} );
+
+		it( 'returns false if the list of operators is empty', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					filterBy: {
+						operators: [],
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toBe( false );
+		} );
+
+		it( 'removes invalid operators for the type', () => {
+			const fields: Field< {} >[] = [
+				{
+					id: 'user',
+					type: 'integer',
+					filterBy: {
+						isPrimary: true,
+						// @ts-ignore
+						operators: [ 'invalid', 'lessThan' ],
+					},
+				},
+			];
+			const normalizedFields = normalizeFields( fields );
+			const result = normalizedFields[ 0 ].filterBy;
+			expect( result ).toStrictEqual( {
+				isPrimary: true,
+				operators: [ 'lessThan' ],
+			} );
+		} );
+	} );
 } );
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index cf891913673063..01c8cd86959857 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -1,13 +1,18 @@
 /**
  * External dependencies
  */
-import type { ReactElement, ComponentType } from 'react';
+import type { ReactElement, ComponentType, ComponentProps } from 'react';
 
 /**
  * Internal dependencies
  */
 import type { SetSelection } from './private-types';
 
+/**
+ * WordPress dependencies
+ */
+import type { useFocusOnMount } from '@wordpress/compose';
+
 export type SortDirection = 'asc' | 'desc';
 
 /**
@@ -19,7 +24,7 @@ export interface Option< Value extends any = any > {
 	description?: string;
 }
 
-interface FilterByConfig {
+export interface FilterByConfig {
 	/**
 	 * The list of operators supported by the field.
 	 */
@@ -34,15 +39,66 @@ interface FilterByConfig {
 	isPrimary?: boolean;
 }
 
+export interface NormalizedFilterByConfig {
+	/**
+	 * The list of operators supported by the field.
+	 */
+	operators: Operator[];
+
+	/**
+	 * Whether it is a primary filter.
+	 *
+	 * A primary filter is always visible and is not listed in the "Add filter" component,
+	 * except for the list layout where it behaves like a secondary filter.
+	 */
+	isPrimary?: boolean;
+}
+
+interface FilterConfigForType {
+	/**
+	 * What operators are used by default.
+	 */
+	defaultOperators: Operator[];
+
+	/**
+	 * What operators are supported by the field.
+	 */
+	validOperators: Operator[];
+}
+
 export type Operator =
 	| 'is'
 	| 'isNot'
 	| 'isAny'
 	| 'isNone'
 	| 'isAll'
-	| 'isNotAll';
-
-export type FieldType = 'text' | 'integer' | 'datetime' | 'media';
+	| 'isNotAll'
+	| 'lessThan'
+	| 'greaterThan'
+	| 'lessThanOrEqual'
+	| 'greaterThanOrEqual'
+	| 'before'
+	| 'after'
+	| 'beforeInc'
+	| 'afterInc'
+	| 'contains'
+	| 'notContains'
+	| 'startsWith'
+	| 'between'
+	| 'on'
+	| 'notOn'
+	| 'inThePast'
+	| 'over';
+
+export type FieldType =
+	| 'text'
+	| 'integer'
+	| 'datetime'
+	| 'date'
+	| 'media'
+	| 'boolean'
+	| 'email'
+	| 'array';
 
 export type ValidationContext = {
 	elements?: Option[];
@@ -65,7 +121,28 @@ export type FieldTypeDefinition< Item > = {
 	/**
 	 * Callback used to render an edit control for the field or control name.
 	 */
-	Edit: ComponentType< DataFormControlProps< Item > > | string;
+	Edit: ComponentType< DataFormControlProps< Item > > | string | null;
+
+	/**
+	 * Callback used to render the field.
+	 */
+	render: ComponentType< DataViewRenderFieldProps< Item > >;
+
+	/**
+	 * The filter config for the field.
+	 */
+	filterBy: FilterConfigForType | false;
+
+	/**
+	 * Whether the field is readOnly.
+	 * If `true`, the value will be rendered using the `render` callback.
+	 */
+	readOnly?: boolean;
+
+	/**
+	 * Whether the field is sortable.
+	 */
+	enableSorting: boolean;
 };
 
 /**
@@ -151,7 +228,13 @@ export type Field< Item > = {
 	/**
 	 * Filter config for the field.
 	 */
-	filterBy?: FilterByConfig | undefined;
+	filterBy?: FilterByConfig | false;
+
+	/**
+	 * Whether the field is readOnly.
+	 * If `true`, the value will be rendered using the `render` callback.
+	 */
+	readOnly?: boolean;
 
 	/**
 	 * Callback used to retrieve the value of the field from the item.
@@ -160,16 +243,18 @@ export type Field< Item > = {
 	getValue?: ( args: { item: Item } ) => any;
 };
 
-export type NormalizedField< Item > = Field< Item > & {
+export type NormalizedField< Item > = Omit< Field< Item >, 'Edit' > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< DataViewRenderFieldProps< Item > >;
-	Edit: ComponentType< DataFormControlProps< Item > >;
+	Edit: ComponentType< DataFormControlProps< Item > > | null;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
 	enableHiding: boolean;
 	enableSorting: boolean;
+	filterBy: NormalizedFilterByConfig | false;
+	readOnly: boolean;
 };
 
 /**
@@ -184,10 +269,17 @@ export type DataFormControlProps< Item > = {
 	field: NormalizedField< Item >;
 	onChange: ( value: Record< string, any > ) => void;
 	hideLabelFromVision?: boolean;
+	/**
+	 * The currently selected filter operator for this field.
+	 *
+	 * Used by DataViews filters to determine which control to render based on the operator type.
+	 */
+	operator?: Operator;
 };
 
 export type DataViewRenderFieldProps< Item > = {
 	item: Item;
+	field: NormalizedField< Item >;
 };
 
 /**
@@ -327,6 +419,11 @@ interface ViewBase {
 	 * Whether to show the hierarchical levels.
 	 */
 	showLevels?: boolean;
+
+	/**
+	 * The field to group by.
+	 */
+	groupByField?: string;
 }
 
 export interface ColumnStyle {
@@ -344,6 +441,11 @@ export interface ColumnStyle {
 	 * The maximum width of the field column.
 	 */
 	minWidth?: string | number;
+
+	/**
+	 * The alignment of the field column, defaults to left.
+	 */
+	align?: 'start' | 'center' | 'end';
 }
 
 export type Density = 'compact' | 'balanced' | 'comfortable';
@@ -470,6 +572,13 @@ export interface ActionModal< Item > extends ActionBase< Item > {
 	 * @default 'medium'
 	 */
 	modalSize?: 'small' | 'medium' | 'large' | 'fill';
+
+	/**
+	 * The focus on mount property of the modal.
+	 */
+	modalFocusOnMount?:
+		| Parameters< typeof useFocusOnMount >[ 0 ]
+		| 'firstContentElement';
 }
 
 export interface ActionButton< Item > extends ActionBase< Item > {
@@ -488,6 +597,7 @@ export interface ActionButton< Item > extends ActionBase< Item > {
 export type Action< Item > = ActionModal< Item > | ActionButton< Item >;
 
 export interface ViewBaseProps< Item > {
+	className?: string;
 	actions: Action< Item >[];
 	data: Item[];
 	fields: NormalizedField< Item >[];
@@ -499,6 +609,11 @@ export interface ViewBaseProps< Item > {
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
 	onClickItem?: ( item: Item ) => void;
+	renderItemLink?: (
+		props: {
+			item: Item;
+		} & ComponentProps< 'a' >
+	) => ReactElement;
 	isItemClickable: ( item: Item ) => boolean;
 	view: View;
 }
diff --git a/packages/dataviews/src/utils.ts b/packages/dataviews/src/utils.ts
index 408288c5174897..239bf919b6cba7 100644
--- a/packages/dataviews/src/utils.ts
+++ b/packages/dataviews/src/utils.ts
@@ -1,38 +1,15 @@
 /**
  * Internal dependencies
  */
-import {
-	ALL_OPERATORS,
-	OPERATOR_IS,
-	OPERATOR_IS_NOT,
-	OPERATOR_IS_ANY,
-	OPERATOR_IS_NONE,
-} from './constants';
-import type { NormalizedField } from './types';
-
-export function sanitizeOperators< Item >( field: NormalizedField< Item > ) {
-	let operators = field.filterBy?.operators;
-
-	// Assign default values.
-	if ( ! operators || ! Array.isArray( operators ) ) {
-		operators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];
-	}
-
-	// Make sure only valid operators are used.
-	operators = operators.filter( ( operator ) =>
-		ALL_OPERATORS.includes( operator )
+import type { DataViewRenderFieldProps } from './types';
+
+export function renderFromElements< Item >( {
+	item,
+	field,
+}: DataViewRenderFieldProps< Item > ) {
+	const value = field.getValue( { item } );
+	return (
+		field?.elements?.find( ( element ) => element.value === value )
+			?.label || field.getValue( { item } )
 	);
-
-	// Do not allow mixing single & multiselection operators.
-	// Remove multiselection operators if any of the single selection ones is present.
-	if (
-		operators.includes( OPERATOR_IS ) ||
-		operators.includes( OPERATOR_IS_NOT )
-	) {
-		operators = operators.filter( ( operator ) =>
-			[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )
-		);
-	}
-
-	return operators;
 }
diff --git a/packages/dataviews/tsconfig.json b/packages/dataviews/tsconfig.json
index a7c8759d257cb2..76ee46db2e4222 100644
--- a/packages/dataviews/tsconfig.json
+++ b/packages/dataviews/tsconfig.json
@@ -13,11 +13,13 @@
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../data" },
+		{ "path": "../date" },
 		{ "path": "../element" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
 		{ "path": "../primitives" },
 		{ "path": "../private-apis" },
+		{ "path": "../url" },
 		{ "path": "../warning" }
 	],
 	"exclude": [
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index cd136e00a8c49e..9ba947eb777d53 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/date/package.json b/packages/date/package.json
index 99dbc3f4fe3dcb..1f2f60861673c5 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 4e118ec833c195..8e26318b2a38a2 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index 42a79a1beb8d71..834b8697701460 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 4f585ecd16c401..e5330fdc25723f 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/deprecated/README.md b/packages/deprecated/README.md
index 039629f17940a1..ee09f023356b54 100644
--- a/packages/deprecated/README.md
+++ b/packages/deprecated/README.md
@@ -46,7 +46,7 @@ _Usage_
 import deprecated from '@wordpress/deprecated';
 
 deprecated( 'Eating meat', {
-	since: '2019.01.01'
+	since: '2019.01.01',
 	version: '2020.01.01',
 	alternative: 'vegetables',
 	plugin: 'the earth',
@@ -59,13 +59,7 @@ deprecated( 'Eating meat', {
 _Parameters_
 
 -   _feature_ `string`: Name of the deprecated feature.
--   _options_ `[Object]`: Personalisation options
--   _options.since_ `[string]`: Version in which the feature was deprecated.
--   _options.version_ `[string]`: Version in which the feature will be removed.
--   _options.alternative_ `[string]`: Feature to use instead
--   _options.plugin_ `[string]`: Plugin name if it's a plugin feature
--   _options.link_ `[string]`: Link to documentation
--   _options.hint_ `[string]`: Additional message to help transition away from the deprecated feature.
+-   _options_ `[DeprecatedOptions]`: Personalisation options
 
 ### logged
 
@@ -73,7 +67,7 @@ Object map tracking messages which have been logged, for use in ensuring a messa
 
 _Type_
 
--   `Record<string, true | undefined>`
+-   `Record< string, true >`
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index 4a2e4c6b418b05..a2215d0ccd8184 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/deprecated/src/index.js b/packages/deprecated/src/index.ts
similarity index 51%
rename from packages/deprecated/src/index.js
rename to packages/deprecated/src/index.ts
index 3d2f2afaa3efea..aec58ff865528b 100644
--- a/packages/deprecated/src/index.js
+++ b/packages/deprecated/src/index.ts
@@ -6,29 +6,48 @@ import { doAction } from '@wordpress/hooks';
 /**
  * Object map tracking messages which have been logged, for use in ensuring a
  * message is only logged once.
- *
- * @type {Record<string, true | undefined>}
  */
-export const logged = Object.create( null );
+export const logged: Record< string, true > = Object.create( null );
+
+type DeprecatedOptions = {
+	/**
+	 * Version in which the feature was deprecated.
+	 */
+	since?: string;
+	/**
+	 * Version in which the feature will be removed.
+	 */
+	version?: string;
+	/**
+	 * Feature to use instead.
+	 */
+	alternative?: string;
+	/**
+	 * Plugin name if it's a plugin feature.
+	 */
+	plugin?: string;
+	/**
+	 * Link to documentation.
+	 */
+	link?: string;
+	/**
+	 * Additional message to help transition away from the deprecated feature.
+	 */
+	hint?: string;
+};
 
 /**
  * Logs a message to notify developers about a deprecated feature.
  *
- * @param {string} feature               Name of the deprecated feature.
- * @param {Object} [options]             Personalisation options
- * @param {string} [options.since]       Version in which the feature was deprecated.
- * @param {string} [options.version]     Version in which the feature will be removed.
- * @param {string} [options.alternative] Feature to use instead
- * @param {string} [options.plugin]      Plugin name if it's a plugin feature
- * @param {string} [options.link]        Link to documentation
- * @param {string} [options.hint]        Additional message to help transition away from the deprecated feature.
+ * @param {string}            feature   Name of the deprecated feature.
+ * @param {DeprecatedOptions} [options] Personalisation options
  *
  * @example
  * ```js
  * import deprecated from '@wordpress/deprecated';
  *
  * deprecated( 'Eating meat', {
- * 	since: '2019.01.01'
+ * 	since: '2019.01.01',
  * 	version: '2020.01.01',
  * 	alternative: 'vegetables',
  * 	plugin: 'the earth',
@@ -38,7 +57,10 @@ export const logged = Object.create( null );
  * // Logs: 'Eating meat is deprecated since version 2019.01.01 and will be removed from the earth in version 2020.01.01. Please use vegetables instead. Note: You may find it beneficial to transition gradually.'
  * ```
  */
-export default function deprecated( feature, options = {} ) {
+export default function deprecated(
+	feature: string,
+	options: DeprecatedOptions = {}
+) {
 	const { since, version, alternative, plugin, link, hint } = options;
 
 	const pluginMessage = plugin ? ` from ${ plugin }` : '';
@@ -61,15 +83,9 @@ export default function deprecated( feature, options = {} ) {
 	/**
 	 * Fires whenever a deprecated feature is encountered
 	 *
-	 * @param {string}  feature             Name of the deprecated feature.
-	 * @param {?Object} options             Personalisation options
-	 * @param {string}  options.since       Version in which the feature was deprecated.
-	 * @param {?string} options.version     Version in which the feature will be removed.
-	 * @param {?string} options.alternative Feature to use instead
-	 * @param {?string} options.plugin      Plugin name if it's a plugin feature
-	 * @param {?string} options.link        Link to documentation
-	 * @param {?string} options.hint        Additional message to help transition away from the deprecated feature.
-	 * @param {?string} message             Message sent to console.warn
+	 * @param {string}            feature Name of the deprecated feature.
+	 * @param {DeprecatedOptions} options Personalisation options
+	 * @param {string}            message Message sent to console.warn
 	 */
 	doAction( 'deprecated', feature, options, message );
 
@@ -78,5 +94,3 @@ export default function deprecated( feature, options = {} ) {
 
 	logged[ message ] = true;
 }
-
-/** @typedef {import('utility-types').NonUndefined<Parameters<typeof deprecated>[1]>} DeprecatedOptions */
diff --git a/packages/deprecated/src/test/index.js b/packages/deprecated/src/test/index.ts
similarity index 98%
rename from packages/deprecated/src/test/index.js
rename to packages/deprecated/src/test/index.ts
index 62f02079f0d195..094b71dda149eb 100644
--- a/packages/deprecated/src/test/index.js
+++ b/packages/deprecated/src/test/index.ts
@@ -6,7 +6,7 @@ import { didAction } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import deprecated, { logged } from '../';
+import deprecated, { logged } from '..';
 
 describe( 'deprecated', () => {
 	afterEach( () => {
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 3273cd8105098a..d1e94da833a1ac 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 393a55d04456b3..77358fd8a41421 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index e2a348a7381d83..0e6a414f5ed9d7 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 913e7bbae88297..00229d4f3e024f 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index aa4633a2a6bf11..1e3c93d95b2417 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/dom/package.json b/packages/dom/package.json
index c99f448c44acf0..34c8990337ef6c 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/src/dom/input-field-has-uncollapsed-selection.js b/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
index 2cc76df1d9a028..641c07fb677149 100644
--- a/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
+++ b/packages/dom/src/dom/input-field-has-uncollapsed-selection.js
@@ -19,7 +19,7 @@ import isHTMLInputElement from './is-html-input-element';
  *
  * @param {Element} element The HTML element.
  *
- * @return {boolean} Whether the input/textareaa element has some "selection".
+ * @return {boolean} Whether the input/textarea element has some "selection".
  */
 export default function inputFieldHasUncollapsedSelection( element ) {
 	if ( ! isHTMLInputElement( element ) && ! isTextField( element ) ) {
diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js
index ed0326fd264139..61b3c800da1853 100644
--- a/packages/dom/src/focusable.js
+++ b/packages/dom/src/focusable.js
@@ -39,6 +39,7 @@ function buildSelector( sequential ) {
 		'iframe:not([tabindex^="-"])',
 		'object',
 		'embed',
+		'summary',
 		'area[href]',
 		'[contenteditable]:not([contenteditable=false])',
 	].join( ',' );
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index fc4fb43d4661f0..573c0637642de6 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
+### Enhancements
+
+* Added new `PageUtils.emulateNetworkConditions()` helper to emulate network conditions such as Slow 3G, Fast 4G or Broadband ([#69865](https://github.com/WordPress/gutenberg/pull/69865)).
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index cec91cda58f306..55bdf67b78aa3d 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
index a9ddffcd6cd5e3..2b6218fad48599 100644
--- a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
@@ -14,6 +14,7 @@ export async function openDocumentSettingsSidebar( this: Editor ) {
 		.getByRole( 'region', { name: 'Editor top bar' } )
 		.getByRole( 'button', {
 			name: 'Settings',
+			exact: true,
 			disabled: false,
 		} );
 
diff --git a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
index 81451cd516f0ed..f22fd9fc843e34 100644
--- a/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/publish-post.ts
@@ -34,9 +34,12 @@ export async function publishPost( this: Editor ) {
 	}
 
 	// Handle saving just the post.
-	await this.page.click(
-		'role=region[name="Editor publish"i] >> role=button[name="Publish"i]'
-	);
+	await this.page
+		.getByRole( 'region', {
+			name: 'Editor publish',
+		} )
+		.getByRole( 'button', { name: 'Publish', exact: true } )
+		.click();
 
 	await this.page
 		.getByRole( 'button', { name: 'Dismiss this notice' } )
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/emulate-network-conditions.ts b/packages/e2e-test-utils-playwright/src/page-utils/emulate-network-conditions.ts
new file mode 100644
index 00000000000000..fc60acc2802ad5
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/page-utils/emulate-network-conditions.ts
@@ -0,0 +1,101 @@
+/**
+ * Internal dependencies
+ */
+import type { PageUtils } from './';
+
+interface NetworkConditions {
+	/**
+	 * True to emulate internet disconnection.
+	 */
+	offline: boolean;
+	/**
+	 * Minimum latency from request sent to response headers received (ms).
+	 */
+	latency: number;
+	/**
+	 * Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.
+	 */
+	downloadThroughput: number;
+	/**
+	 * Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.
+	 */
+	uploadThroughput: number;
+}
+
+// Defaults from https://github.com/puppeteer/puppeteer/blob/401355610874beac23a51dcb75739a4bb4191a2b/packages/puppeteer-core/src/cdp/PredefinedNetworkConditions.ts.
+const PredefinedNetworkConditions: Record< string, NetworkConditions > = {
+	// Generally aligned with DevTools
+	// https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/sdk/NetworkManager.ts;l=398;drc=225e1240f522ca684473f541ae6dae6cd766dd33.
+	'Slow 3G': {
+		offline: false,
+		// ~500Kbps down
+		downloadThroughput: ( ( 500 * 1000 ) / 8 ) * 0.8,
+		// ~500Kbps up
+		uploadThroughput: ( ( 500 * 1000 ) / 8 ) * 0.8,
+		// 400ms RTT
+		latency: 400 * 5,
+	},
+	'Fast 3G': {
+		offline: false,
+		// ~1.6 Mbps down
+		downloadThroughput: ( ( 1.6 * 1000 * 1000 ) / 8 ) * 0.9,
+		// ~0.75 Mbps up
+		uploadThroughput: ( ( 750 * 1000 ) / 8 ) * 0.9,
+		// 150ms RTT
+		latency: 150 * 3.75,
+	},
+	// alias to Fast 3G to align with Lighthouse (crbug.com/342406608)
+	// and DevTools (crbug.com/342406608),
+	'Slow 4G': {
+		offline: false,
+		// ~1.6 Mbps down
+		downloadThroughput: ( ( 1.6 * 1000 * 1000 ) / 8 ) * 0.9,
+		// ~0.75 Mbps up
+		uploadThroughput: ( ( 750 * 1000 ) / 8 ) * 0.9,
+		// 150ms RTT
+		latency: 150 * 3.75,
+	},
+	'Fast 4G': {
+		offline: false,
+		// 9 Mbps down
+		downloadThroughput: ( ( 9 * 1000 * 1000 ) / 8 ) * 0.9,
+		// 1.5 Mbps up
+		uploadThroughput: ( ( 1.5 * 1000 * 1000 ) / 8 ) * 0.9,
+		// 60ms RTT
+		latency: 60 * 2.75,
+	},
+	/**
+	 * Network conditions used for desktop in Lighthouse/PSI.
+	 *
+	 * 10,240 kb/s throughput with 40 ms TCP RTT.
+	 *
+	 * @see https://github.com/paulirish/lighthouse/blob/f0855904aaffaecf3089169449646960782d7e92/core/config/constants.js#L40-L49
+	 * @see https://docs.google.com/document/d/1-p4HSp42REEA5-jCBVB6PqQcVhI1nQIblBCNKhPJUXg/edit?tab=t.0#heading=h.jsap7yf4phk6
+	 */
+	Broadband: {
+		offline: false,
+		downloadThroughput: ( 10240 * 1000 ) / 8,
+		uploadThroughput: ( 10240 * 1000 ) / 8,
+		latency: 40,
+	},
+};
+
+export async function emulateNetworkConditions(
+	this: PageUtils,
+	condition: keyof typeof PredefinedNetworkConditions | NetworkConditions
+) {
+	if ( 'chromium' !== this.browserName ) {
+		throw new Error(
+			'CDP sessions are only supported on Chromium-based browsers'
+		);
+	}
+
+	const session = await this.page.context().newCDPSession( this.page );
+	await session.send(
+		'Network.emulateNetworkConditions',
+		'string' === typeof condition
+			? PredefinedNetworkConditions[ condition ]
+			: condition
+	);
+	await session.detach();
+}
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/index.ts b/packages/e2e-test-utils-playwright/src/page-utils/index.ts
index 50dbe71033fc6b..d5cb2639b12478 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/index.ts
@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { Browser, Page, BrowserContext } from '@playwright/test';
+import type {
+	Browser,
+	Page,
+	BrowserContext,
+	PlaywrightWorkerOptions,
+} from '@playwright/test';
 
 /**
  * Internal dependencies
@@ -10,20 +15,24 @@ import { dragFiles } from './drag-files';
 import { isCurrentURL } from './is-current-url';
 import { setClipboardData, pressKeys } from './press-keys';
 import { setBrowserViewport } from './set-browser-viewport';
+import { emulateNetworkConditions } from './emulate-network-conditions';
 
 type PageUtilConstructorParams = {
 	page: Page;
+	browserName: PlaywrightWorkerOptions[ 'browserName' ];
 };
 
 class PageUtils {
 	browser: Browser;
 	page: Page;
 	context: BrowserContext;
+	browserName: PlaywrightWorkerOptions[ 'browserName' ];
 
-	constructor( { page }: PageUtilConstructorParams ) {
+	constructor( { page, browserName }: PageUtilConstructorParams ) {
 		this.page = page;
 		this.context = page.context();
 		this.browser = this.context.browser()!;
+		this.browserName = browserName;
 	}
 
 	/** @borrows dragFiles as this.dragFiles */
@@ -37,6 +46,9 @@ class PageUtils {
 		setBrowserViewport.bind( this );
 	/** @borrows setClipboardData as this.setClipboardData */
 	setClipboardData: typeof setClipboardData = setClipboardData.bind( this );
+	/** @borrows emulateNetworkConditions as this.emulateNetworkConditions */
+	emulateNetworkConditions: typeof emulateNetworkConditions =
+		emulateNetworkConditions.bind( this );
 }
 
 export { PageUtils };
diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts
index 6ef614024d7d97..b7f915292f6cf7 100644
--- a/packages/e2e-test-utils-playwright/src/test.ts
+++ b/packages/e2e-test-utils-playwright/src/test.ts
@@ -159,8 +159,8 @@ const test = base.extend<
 
 		await page.close();
 	},
-	pageUtils: async ( { page }, use ) => {
-		await use( new PageUtils( { page } ) );
+	pageUtils: async ( { page, browserName }, use ) => {
+		await use( new PageUtils( { page, browserName } ) );
 	},
 	requestUtils: [
 		async ( {}, use, workerInfo ) => {
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 018d05ba942d1e..8032acd66e89d8 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 11.27.0 (2025-07-23)
+
+## 11.26.0 (2025-06-25)
+
+## 11.25.0 (2025-06-04)
+
+## 11.24.0 (2025-05-22)
+
+## 11.23.0 (2025-05-07)
+
+## 11.22.0 (2025-04-11)
+
 ## 11.21.0 (2025-03-27)
 
 ## 11.20.0 (2025-03-13)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 2f6c4d8a8c002c..40804e9ac1c1da 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.21.0",
+	"version": "11.27.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index d9ed132ddec6c5..4bda7c555ddac3 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 8.27.0 (2025-07-23)
+
+## 8.26.0 (2025-06-25)
+
+## 8.25.0 (2025-06-04)
+
+## 8.24.0 (2025-05-22)
+
+## 8.23.0 (2025-05-07)
+
+## 8.22.0 (2025-04-11)
+
 ## 8.21.0 (2025-03-27)
 
 ## 8.20.0 (2025-03-13)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 63866ed1b12508..f69b64fa94a67b 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.21.0",
+	"version": "8.27.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/interactive-blocks.php b/packages/e2e-tests/plugins/interactive-blocks.php
index 54bd4325bb29b1..fe40ae10d4c05e 100644
--- a/packages/e2e-tests/plugins/interactive-blocks.php
+++ b/packages/e2e-tests/plugins/interactive-blocks.php
@@ -25,7 +25,10 @@ function () {
 		 * required to ensure that client hydration works even when the rendered
 		 * HTML contains unbalanced tags and it couldn't be processed in the server.
 		 */
-		if ( 'true' === $_GET['disable_server_directive_processing'] ) {
+		if (
+			isset( $_GET['disable_server_directive_processing'] ) &&
+			'true' === $_GET['disable_server_directive_processing']
+		) {
 			// Ensure the interactivity API is loaded.
 			wp_interactivity();
 			// But remove the server directive processing.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php
index c9991e441627d1..cb8b590ec316a5 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/render.php
@@ -13,4 +13,7 @@
 	<input readonly data-wp-bind--value="context.result" data-testid="result" />
 	<button type="button" data-wp-on--click="callbacks.resolve" data-testid="resolve">Async resolve</button>
 	<button type="button" data-wp-on--click="callbacks.reject" data-testid="reject">Async reject</button>
+	<button type="button" data-wp-on--click="callbacks.capture" data-testid="capture">Async capture</button>
+	<button type="button" data-wp-on--click="callbacks.captureThrow" data-testid="captureThrow">Async captureThrow</button>
+	<button type="button" data-wp-on--click="callbacks.captureReturnReject" data-testid="captureReturnReject">Async captureReturnReject</button>
 </div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js
index 26d526263cb462..786dd304cf7c57 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/generator-scope/view.js
@@ -3,7 +3,7 @@
  */
 import { store, getContext } from '@wordpress/interactivity';
 
-store( 'test/generator-scope', {
+const { callbacks } = store( 'test/generator-scope', {
 	callbacks: {
 		*resolve() {
 			try {
@@ -19,5 +19,35 @@ store( 'test/generator-scope', {
 				getContext().result = err.toString();
 			}
 		},
+		*capture() {
+			let value = yield Promise.resolve( 1 );
+			try {
+				value = yield Promise.reject( 2 );
+			} catch ( e ) {
+				value = yield Promise.resolve( 3 );
+			}
+			getContext().result = value;
+		},
+		*throw() {
+			const value = yield Promise.resolve( '🤯' );
+			throw new Error( value );
+		},
+		*captureThrow() {
+			try {
+				yield callbacks.throw();
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
+		*returnReject() {
+			return Promise.reject( new Error( '🔚' ) );
+		},
+		*captureReturnReject() {
+			try {
+				yield callbacks.returnReject();
+			} catch ( err ) {
+				getContext().result = err.toString();
+			}
+		},
 	},
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
index 7cdd8f0cccdd35..f2f29425095279 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/render.php
@@ -11,7 +11,7 @@
 <section>
 	<h2>Region 1</h2>
 	<div
-		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-interactive="router-regions"
 		data-wp-router-region="region-1"
 	>
 		<p
@@ -51,11 +51,10 @@
 	>not hydrated</p>
 </div>
 
-
 <section>
 	<h2>Region 2</h2>
 	<div
-		data-wp-interactive='{"namespace": "router-regions"}'
+		data-wp-interactive="router-regions"
 		data-wp-router-region="region-2"
 	>
 		<p
@@ -74,7 +73,7 @@
 			data-wp-on--click="actions.counter.increment"
 		>NaN</button>
 
-		<div data-wp-ignore>
+		<div>
 			<div>
 				<p
 					data-testid="no-region-text-2"
@@ -85,14 +84,122 @@
 			<section>
 				<h2>Nested region</h2>
 				<div
-					data-wp-interactive='{"namespace": "router-regions"}'
+					data-wp-interactive="router-regions"
 					data-wp-router-region="nested-region"
 				>
-					<p
-						data-testid="nested-region-ssr"
-					>content from page <?php echo $attributes['page']; ?></p>
+					<p data-testid="nested-region-ssr">
+						content from page <?php echo $attributes['page']; ?>
+					</p>
+
+					<button data-testid="add-item" data-wp-on--click="actions.addItem">
+						Add item
+					</button>
+
+					<ul>
+						<template data-wp-each="state.items">
+							<li data-testid="nested-item" data-wp-key="context.item" data-wp-text="context.item"></li>	
+						</template>
+						<li data-testid="nested-item" data-wp-each-child>item 1</li>
+						<li data-testid="nested-item" data-wp-each-child>item 2</li>
+						<li data-testid="nested-item" data-wp-each-child>item 3</li>
+					</ul>
 				</div>
 			</section>
 		</div>
 	</div>
 </section>
+
+<div data-wp-interactive="router-regions">
+	<div data-wp-router-region="invalid-region-1">
+		<p data-testid="invalid-region-text-1">
+			content from page <?php echo $attributes['page']; ?>
+		</p>
+	</div>
+	<div data-wp-interactive="router-regions" data-wp-router-region="invalid-region-2">
+		<p data-testid="invalid-region-text-2">
+			content from page <?php echo $attributes['page']; ?>
+		</p>
+	</div>
+</div>
+
+<div id="regions-with-attach-to" data-testid="regions-with-attach-to">
+	<?php
+	/*
+	 * Set of router regions with the `attachTo` property specified,
+	 * as defined in the `regionsWithAttachTo` attribute.
+	 *
+	 * Each object inside such an attribute have the following properties:
+	 * - `type`: the type of the HTML element where the `data-wp-router-region` directive is defined, e.g. 'div'.
+	 * - `data`: the data passed to the `data-wp-router-region` directive, i.e., `id` and `attachTo`.
+	 * - `hasDirectives`: a boolean indicating that the top element of the router region have actual directives that
+	 *     make the element to be wrapped in a `Directives` component.
+	 */
+	foreach ( $attributes['regionsWithAttachTo'] ?? array() as $region ) {
+		$region_type    = esc_attr( $region['type'] );
+		$region_id      = esc_attr( $region['data']['id'] );
+		$region_data    = wp_json_encode( $region['data'] );
+		$has_directives = isset( $region['hasDirectives'] )
+			? ' data-wp-init="callbacks.init"'
+			: '';
+		$context_data   = wp_interactivity_data_wp_context(
+			array(
+				'text'    => $region['data']['id'],
+				'counter' => array(
+					'value'       => $attributes['counter'] ?? 0,
+					'serverValue' => $attributes['counter'] ?? 0,
+				),
+			)
+		);
+
+		$html = <<<HTML
+		<$region_type
+			data-wp-interactive="router-regions"
+			data-wp-router-region='$region_data'
+			data-testid="$region_id"
+			$has_directives
+		>
+			<div $context_data>
+				<h2>Region with <code>attachTo</code></h2>
+				<p
+					data-testid="text"
+					data-wp-text="context.text"
+				>not hydrated</p>
+
+				<p> Client value:
+					<button
+						data-testid="client-counter"
+						data-wp-text="context.counter.value"
+						data-wp-on--click="actions.counter.increment"
+					>
+						NaN
+					</button>
+				</p>
+				<p> Server value:
+					<output
+						data-testid="server-counter"
+						data-wp-text="context.counter.serverValue"
+						data-wp-watch="actions.counter.updateCounterFromServer"
+					>
+						NaN
+					</output>
+				</p>
+			</div>
+		</$region_type>
+HTML;
+
+		echo $html;
+	}
+	?>
+</div>
+
+<!--
+	Count of times the `actions.init` function has been executed.
+	Used to verify that `data-wp-init` works on regions with `attachTo`.
+-->
+<div
+	data-wp-interactive="router-regions"
+	data-testid="init-count"
+	data-wp-text="state.initCount"
+>
+	NaN
+</div>
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
index a3a35d792755c2..836bb8366a58bd 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-regions/view.js
@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getServerContext,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const { state } = store( 'router-regions', {
 	state: {
@@ -14,6 +19,8 @@ const { state } = store( 'router-regions', {
 		counter: {
 			value: 0,
 		},
+		items: [ 'item 1', 'item 2', 'item 3' ],
+		initCount: 0,
 	},
 	actions: {
 		router: {
@@ -43,6 +50,19 @@ const { state } = store( 'router-regions', {
 					context.counter.value = context.counter.initialValue;
 				}
 			},
+			updateCounterFromServer() {
+				const context = getContext();
+				const serverContext = getServerContext();
+				context.counter.serverValue = serverContext.counter.serverValue;
+			},
+		},
+		addItem() {
+			state.items.push( `item ${ state.items.length + 1 }` );
+		},
+	},
+	callbacks: {
+		init() {
+			state.initCount += 1;
 		},
 	},
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/block.json
new file mode 100644
index 00000000000000..e8d0f2ded9a77d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-script-modules-alpha",
+	"title": "E2E Interactivity tests - router modules - Alpha",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-1.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-1.js
new file mode 100644
index 00000000000000..83217a0ffce58a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-1.js
@@ -0,0 +1 @@
+export default 'alpha-1';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-2.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-2.js
new file mode 100644
index 00000000000000..84554b0b396e1e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/module-alpha-2.js
@@ -0,0 +1 @@
+export default 'alpha-2';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/render.php
new file mode 100644
index 00000000000000..039a3dd0be4aab
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'alpha-1', 'alpha-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'alpha-block',
+		'data-wp-interactive' => 'test/router-script-modules-alpha',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.asset.php
new file mode 100644
index 00000000000000..3851ce37c7d860
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.asset.php
@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-alpha-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-alpha-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.js
new file mode 100644
index 00000000000000..529b0af39d2a45
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-alpha/view.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-alpha-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-alpha', {
+	state: {
+		name: 'alpha',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-alpha-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/block.json
new file mode 100644
index 00000000000000..0eb8b8cc04cdc5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-script-modules-bravo",
+	"title": "E2E Interactivity tests - router modules - Bravo",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-1.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-1.js
new file mode 100644
index 00000000000000..33fca7cd7c60b6
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-1.js
@@ -0,0 +1 @@
+export default 'bravo-1';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-2.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-2.js
new file mode 100644
index 00000000000000..31c9f83e98f4b5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/module-bravo-2.js
@@ -0,0 +1 @@
+export default 'bravo-2';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/render.php
new file mode 100644
index 00000000000000..c2d7dad3e73b0a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'bravo-1', 'bravo-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'bravo-block',
+		'data-wp-interactive' => 'test/router-script-modules-bravo',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.asset.php
new file mode 100644
index 00000000000000..e080af21b54276
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.asset.php
@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-bravo-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-bravo-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.js
new file mode 100644
index 00000000000000..85be1235f0a125
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-bravo/view.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-bravo-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-bravo', {
+	state: {
+		name: 'bravo',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-bravo-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/block.json
new file mode 100644
index 00000000000000..161c04b026dc03
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-script-modules-charlie",
+	"title": "E2E Interactivity tests - router modules - Charlie",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-1.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-1.js
new file mode 100644
index 00000000000000..4e71a8e6b79bb5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-1.js
@@ -0,0 +1 @@
+export default 'charlie-1';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-2.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-2.js
new file mode 100644
index 00000000000000..3174332aaeb0b6
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/module-charlie-2.js
@@ -0,0 +1 @@
+export default 'charlie-2';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/render.php
new file mode 100644
index 00000000000000..9ed6746cf0ea6f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$modules = array( 'charlie-1', 'charlie-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array(
+		'data-testid'         => 'charlie-block',
+		'data-wp-interactive' => 'test/router-script-modules-charlie',
+	)
+);
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<span data-testid="text" data-wp-text="state.name"></span>
+	<button data-testid="static" data-wp-on--click="actions.updateFromStatic">Static</button>
+	<button data-testid="dynamic" data-wp-on--click="actions.updateFromDynamic">Dynamic</button>
+	<button data-testid="initial-static" data-wp-on--click="actions.updateFromInitialStatic">Static (initial)</button>
+	<button data-testid="initial-dynamic" data-wp-on--click="actions.updateFromInitialDynamic">Dynamic (initial)</button>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.asset.php
new file mode 100644
index 00000000000000..34088c23603484
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.asset.php
@@ -0,0 +1,15 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		'test/router-script-modules-charlie-1',
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-charlie-2',
+			'import' => 'dynamic',
+		),
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.js
new file mode 100644
index 00000000000000..531895aac16ea2
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-charlie/view.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line import/no-unresolved
+import nameStatic from 'test/router-script-modules-charlie-1';
+// eslint-disable-next-line import/no-unresolved
+import nameInitialStatic from 'test/router-script-modules-initial-1';
+
+const { state } = store( 'test/router-script-modules-charlie', {
+	state: {
+		name: 'charlie',
+	},
+	actions: {
+		updateFromStatic() {
+			state.name = nameStatic;
+		},
+		updateFromInitialStatic() {
+			state.name = nameInitialStatic;
+		},
+		*updateFromDynamic() {
+			const { default: nameDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-charlie-2'
+			);
+			state.name = nameDynamic;
+		},
+		*updateFromInitialDynamic() {
+			const { default: nameInitialDynamic } = yield import(
+				// eslint-disable-next-line import/no-unresolved
+				'test/router-script-modules-initial-2'
+			);
+			state.name = nameInitialDynamic;
+		},
+	},
+} );
+
+const { actions } = store( 'test/router-script-modules' );
+actions.pushName?.( state.name );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/block.json
new file mode 100644
index 00000000000000..2727e55c313baa
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-script-modules-wrapper",
+	"title": "E2E Interactivity tests - router modules - Wrapper",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-1.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-1.js
new file mode 100644
index 00000000000000..1df915fe387fde
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-1.js
@@ -0,0 +1 @@
+export default 'initial-1';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-2.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-2.js
new file mode 100644
index 00000000000000..cb969e7058bd39
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/module-initial-2.js
@@ -0,0 +1 @@
+export default 'initial-2';
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/render.php
new file mode 100644
index 00000000000000..f149cae4d13cdb
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/render.php
@@ -0,0 +1,60 @@
+<?php
+/**
+ * HTML for testing the iAPI's script module assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+$modules = array( 'initial-1', 'initial-2' );
+
+foreach ( $modules as $module ) {
+	$module_path = '/module-' . $module . '.js';
+	wp_register_script_module(
+		'test/router-script-modules-' . $module,
+		plugins_url( $module_path, __FILE__ ),
+		array(),
+		filemtime( plugin_dir_path( __FILE__ ) . $module_path )
+	);
+}
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- A name is appended here every time a module is executed. -->
+	<p data-testid="names" data-wp-text="state.names"></p>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-script-modules">
+		<?php if ( isset( $attributes['links'] ) ) : ?>
+			<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+				<a
+					data-testid="link <?php echo $label; ?>"
+					data-wp-on--click="actions.navigate"
+					data-wp-on-async--mouseenter="actions.prefetch"
+					href="<?php echo $link; ?>"
+				>
+					<?php echo $label; ?>
+				</a>
+			<?php endforeach; ?>
+		<?php endif; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-script-modules"
+		data-wp-router-region="router-script-modules"
+	>
+		<?php echo $content; ?>
+	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-script-modules"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+		hidden
+	>
+		Client-side navigation
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.asset.php
new file mode 100644
index 00000000000000..e7372d67df538d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.asset.php
@@ -0,0 +1,14 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+		'test/router-script-modules-initial-1',
+		array(
+			'id'     => 'test/router-script-modules-initial-2',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.js
new file mode 100644
index 00000000000000..e91b6be6b180b5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-script-modules-wrapper/view.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-script-modules', {
+	state: {
+		clientSideNavigation: false,
+		names: [],
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			state.clientSideNavigation = false;
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		},
+		*prefetch() {
+			const { ref } = getElement();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.prefetch( ref.href );
+		},
+		pushName( name ) {
+			state.names.push( name );
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png
new file mode 100644
index 00000000000000..c4f8e7c5146d36
Binary files /dev/null and b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/assets/10x10_e2e_test_image_blue.png differ
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
new file mode 100644
index 00000000000000..644ea70f74dca1
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-blue",
+	"title": "E2E Interactivity tests - router styles - Blue",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
new file mode 100644
index 00000000000000..3f5da308db092a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'blue-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.blue-from-inline {
+				color: rgb(0, 0, 255);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'blue-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Blue</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
new file mode 100644
index 00000000000000..f55f12f4d594cf
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style-from-link.css
@@ -0,0 +1,7 @@
+.blue-from-link {
+    color: rgb(0, 0, 255);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_blue.png');
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
new file mode 100644
index 00000000000000..84d891e90242a5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-blue/style.css
@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-blue,
+.blue  {
+    color: rgb(0, 0, 255);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png
new file mode 100644
index 00000000000000..34ec87925d8c50
Binary files /dev/null and b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/assets/10x10_e2e_test_image_green.png differ
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
new file mode 100644
index 00000000000000..e2edda625571b9
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-green",
+	"title": "E2E Interactivity tests - router styles - Green",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
new file mode 100644
index 00000000000000..4418a2d3ab0f3d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'green-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.green-from-inline {
+				color: rgb(0, 255, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'green-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Green</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
new file mode 100644
index 00000000000000..b3d7d7b111e52a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style-from-link.css
@@ -0,0 +1,7 @@
+.green-from-link {
+    color: rgb(0, 255, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_green.png');
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
new file mode 100644
index 00000000000000..0c457588f625cb
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-green/style.css
@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-green,
+.green {
+    color: rgb(0, 255, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png
new file mode 100644
index 00000000000000..3264bf6427c276
Binary files /dev/null and b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/assets/10x10_e2e_test_image_red.png differ
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
new file mode 100644
index 00000000000000..582d7019062c6e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-red",
+	"title": "E2E Interactivity tests - router styles - Red",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
new file mode 100644
index 00000000000000..e8474cf69b825a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/render.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'red-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+
+		$custom_css = '
+			.red-from-inline {
+				color: rgb(255, 0, 0);
+			}
+		';
+
+		wp_register_style( 'test-router-styles', false );
+		wp_enqueue_style( 'test-router-styles' );
+		wp_add_inline_style( 'test-router-styles', $custom_css );
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes(
+	array( 'data-testid' => 'red-block' )
+);
+?>
+<p <?php echo $wrapper_attributes; ?>>Red</p>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
new file mode 100644
index 00000000000000..0f7d6228079897
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style-from-link.css
@@ -0,0 +1,7 @@
+.red-from-link {
+    color: rgb(255, 0, 0);
+}
+
+.background-from-link {
+    background-image: url('./assets/10x10_e2e_test_image_red.png');
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css
new file mode 100644
index 00000000000000..eac7e3af16e0b5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-red/style.css
@@ -0,0 +1,4 @@
+.wp-block-test-router-styles-red,
+.red {
+    color: rgb(255, 0, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
new file mode 100644
index 00000000000000..a1a95b4c81e3b6
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/block.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/router-styles-wrapper",
+	"title": "E2E Interactivity tests - router styles - Wrapper",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"viewStyle": "file:./style.css",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
new file mode 100644
index 00000000000000..00cc98bfac2d83
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/render.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * HTML for testing the iAPI's style assets management.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+add_action(
+	'wp_enqueue_scripts',
+	function () {
+		wp_enqueue_style(
+			'wrapper-styles-from-link',
+			plugin_dir_url( __FILE__ ) . 'style-from-link.css',
+			array()
+		);
+		wp_enqueue_style(
+			'wrapper-styles-media-print',
+			plugin_dir_url( __FILE__ ) . 'style-media-print.css',
+			array(),
+			false,
+			'print'
+		);
+	}
+);
+
+$wrapper_attributes = get_block_wrapper_attributes();
+?>
+<div <?php echo $wrapper_attributes; ?>>
+	<!-- These get colored when the corresponding block is present. -->
+	<fieldset>
+		<legend>Styles from block styles</legend>
+		<p data-testid="red" class="red">Red</p>
+		<p data-testid="green" class="green">Green</p>
+		<p data-testid="blue" class="blue">Blue</p>
+		<p data-testid="all" class="red green blue">All</p>
+	</fieldset>
+
+	<!-- These get colored when the corresponding block enqueues a referenced stylesheet. -->
+	<fieldset>
+		<legend>Styles from referenced style sheets</legend>
+		<p data-testid="red-from-link" class="red-from-link">Red from link</p>
+		<p data-testid="green-from-link" class="green-from-link">Green from link</p>
+		<p data-testid="blue-from-link" class="blue-from-link">Blue from link</p>
+		<p data-testid="all-from-link" class="red-from-link green-from-link blue-from-link">All from link</p>
+		<div data-testid="background-from-link"class="background-from-link" style="width: 10px; height: 10px"></div>
+	</fieldset>
+
+	<!-- These get colored when the corresponding block adds inline style. -->
+	<fieldset>
+		<legend>Styles from inline styles</legend>
+		<p data-testid="red-from-inline" class="red-from-inline">Red</p>
+		<p data-testid="green-from-inline" class="green-from-inline">Green</p>
+		<p data-testid="blue-from-inline" class="blue-from-inline">Blue</p>
+		<p data-testid="all-from-inline" class="red-from-inline green-from-inline blue-from-inline">All</p>
+	</fieldset>
+
+	<!-- This one should remain green after navigation. -->
+	<fieldset>
+		<legend>Rule order checker</legend>
+		<p data-testid="order-checker" class="order-checker">I should remain green</p>
+	</fieldset>
+
+	<!-- Links to pages with different blocks combination. -->
+	<nav data-wp-interactive="test/router-styles">
+		<?php foreach ( $attributes['links'] as $label => $link ) : ?>
+			<a
+				data-testid="link <?php echo $label; ?>"
+				data-wp-on--click="actions.navigate"
+				data-wp-on-async--mouseenter="actions.prefetch"
+				href="<?php echo $link; ?>"
+			>
+				<?php echo $label; ?>
+			</a>
+		<?php endforeach; ?>
+	</nav>
+
+	<!-- HTML updated on navigation. -->
+	<div
+		data-wp-interactive="test/router-styles"
+		data-wp-router-region="router-styles"
+	>
+		<?php echo $content; ?>
+	</div>
+
+	<!-- Text to check whether a navigation was client-side. -->
+	<div
+		data-testid="client-side navigation"
+		data-wp-interactive="test/router-styles"
+		data-wp-bind--hidden="!state.clientSideNavigation"
+		hidden
+	>
+		Client-side navigation
+	</div>
+
+	<!-- Text to check whether a page is being prefetched. -->
+	<div data-wp-interactive="test/router-styles" >
+		Prefetching: <span data-testid="prefetching" data-wp-text="state.prefetching"></span>
+	</div>
+
+	<!-- Text hidden when media=print applies. -->
+	<div class="hide-on-print" data-testid="hide-on-print">This should be visible when media is not "print".</div>
+</div>
+
+
+
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css
new file mode 100644
index 00000000000000..5cf5b34914ee88
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-from-link.css
@@ -0,0 +1,7 @@
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(255, 0, 0);
+}
+
+.wp-block-test-router-styles-wrapper .order-checker {
+    color: rgb(0, 255, 0);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-media-print.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-media-print.css
new file mode 100644
index 00000000000000..3d5e03cff48103
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style-media-print.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-wrapper .hide-on-print {
+    display: none;
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
new file mode 100644
index 00000000000000..12773560c4180f
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/style.css
@@ -0,0 +1,3 @@
+.wp-block-test-router-styles-wrapper {
+    color: rgb(160, 12, 60);
+}
\ No newline at end of file
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php
new file mode 100644
index 00000000000000..bdaec8d1b67a9d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
new file mode 100644
index 00000000000000..c59e977e09ab89
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/router-styles-wrapper/view.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getElement } from '@wordpress/interactivity';
+
+const { state } = store( 'test/router-styles', {
+	state: {
+		clientSideNavigation: false,
+		prefetching: false,
+	},
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			state.clientSideNavigation = false;
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+			state.clientSideNavigation = true;
+		},
+		*prefetch() {
+			state.prefetching = true;
+			const { ref } = getElement();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.prefetch( ref.href );
+			state.prefetching = false;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
index 73a58042ec7af5..efa8b34457956a 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/store-tag/render.php
@@ -59,7 +59,7 @@
 	}
 
 	echo <<<HTML
-	<script type="application/json" id="wp-interactivity-data">
+	<script type="application/json" id="wp-script-module-data-@wordpress/interactivity">
 		$test_store_tag_json
 	</script>
 HTML;
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js
index b65095ef6cde4f..2702459ed9a4a2 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/processing-instructions.js
@@ -1,5 +1,6 @@
 const processingInstructions = `
 	<div>
+		<div>Processing instruction is <?xpacket ##last-child## ?></div>
 		<?xpacket ##1## ?>
 		<div data-testid="it should keep this node between processing instructions">
 			Processing instructions inner node
diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
index 5dc4e6d30097bd..a771d050bdd0b2 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
+++ b/packages/e2e-tests/plugins/interactive-blocks/tovdom/render.php
@@ -12,6 +12,7 @@
 
 <div data-wp-interactive="tovdom">
 	<div data-testid="it should delete comments">
+		<div>Comment is <!-- ##last-child## --></div>
 		<!-- ##1## -->
 		<div data-testid="it should keep this node between comments">
 			Comments inner node
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 982a6f5ea5bd83..fc1b4230405548 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 8.27.0 (2025-07-23)
+
+## 8.26.0 (2025-06-25)
+
+## 8.25.0 (2025-06-04)
+
+## 8.24.0 (2025-05-22)
+
+## 8.23.0 (2025-05-07)
+
+## 8.22.0 (2025-04-11)
+
 ## 8.21.0 (2025-03-27)
 
 ## 8.20.0 (2025-03-13)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 83f79dd6e45492..529e340106186f 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.21.0",
+	"version": "8.27.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index a3deb4a1ba79d2..7b7af4392d1fbc 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -149,7 +149,11 @@ function useEditorStyles( ...additionalStyles ) {
 	] );
 }
 
-function MetaBoxesMain() {
+/**
+ * @param {Object}  props
+ * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
+ */
+function MetaBoxesMain( { isLegacy } ) {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { isMetaBoxLocationVisible } = select( editPostStore );
@@ -229,15 +233,22 @@ function MetaBoxesMain() {
 
 	const contents = (
 		<div
-			// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
-			className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
-			hidden={ isShort && ! isOpen }
+			className={ clsx(
+				// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
+				'edit-post-layout__metaboxes',
+				! isLegacy && 'edit-post-meta-boxes-main__liner'
+			) }
+			hidden={ ! isLegacy && isShort && ! isOpen }
 		>
 			<MetaBoxes location="normal" />
 			<MetaBoxes location="advanced" />
 		</div>
 	);
 
+	if ( isLegacy ) {
+		return contents;
+	}
+
 	const isAutoHeight = openHeight === undefined;
 	let usedMax = '50%'; // Approximation before max has a value.
 	if ( max !== undefined ) {
@@ -388,6 +399,7 @@ function Layout( {
 		isWelcomeGuideVisible,
 		templateId,
 		enablePaddingAppender,
+		isDevicePreview,
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
@@ -406,8 +418,12 @@ function Layout( {
 			const { getBlockSelectionStart, isZoomOut } = unlock(
 				select( blockEditorStore )
 			);
-			const { getEditorMode, getRenderingMode, getDefaultRenderingMode } =
-				unlock( select( editorStore ) );
+			const {
+				getEditorMode,
+				getRenderingMode,
+				getDefaultRenderingMode,
+				getDeviceType,
+			} = unlock( select( editorStore ) );
 			const isRenderingPostOnly = getRenderingMode() === 'post-only';
 			const isNotDesignPostType =
 				! DESIGN_POST_TYPES.includes( currentPostType );
@@ -441,6 +457,7 @@ function Layout( {
 						: null,
 				enablePaddingAppender:
 					! isZoomOut() && isRenderingPostOnly && isNotDesignPostType,
+				isDevicePreview: getDeviceType() !== 'Desktop',
 			};
 		},
 		[
@@ -593,7 +610,13 @@ function Layout( {
 						}
 						extraContent={
 							! isDistractionFree &&
-							showMetaBoxes && <MetaBoxesMain />
+							showMetaBoxes && (
+								<MetaBoxesMain
+									isLegacy={
+										! shouldIframe || isDevicePreview
+									}
+								/>
+							)
 						}
 					>
 						<PostLockedModal />
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index c63f3eb2528177..b96a586edb498c 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -107,9 +107,14 @@
 	clear: both;
 }
 
-.has-metaboxes .editor-visual-editor {
-	// Contains z-indexes of children so that the block toolbar will appear behind
-	// the drop shadow of the meta box pane.
+// Only when the split view is active the visual editor should allow shrinking and
+// its main size should be zero.
+.has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
+	flex-shrink: 1;
+	flex-basis: 0%;
+}
+
+.has-metaboxes .editor-visual-editor.is-iframed {
 	isolation: isolate;
 }
 
diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
index cd2a893d8d1cd0..250f98afca2b05 100644
--- a/packages/edit-post/src/components/layout/use-should-iframe.js
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -11,24 +11,26 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { unlock } from '../../lock-unlock';
 
+const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
+
 export function useShouldIframe() {
 	return useSelect( ( select ) => {
 		const { getEditorSettings, getCurrentPostType, getDeviceType } =
 			select( editorStore );
 		return (
-			// If the theme is block based, we ALWAYS use the iframe for
-			// consistency across the post and site editor. The iframe was
-			// introduced long before the sited editor and block themes, so
-			// these themes are expecting it.
-			getEditorSettings().__unstableIsBlockBasedTheme ||
-			// For classic themes, we also still want to iframe all the special
+			// If the theme is block based and the Gutenberg plugin is active,
+			// we ALWAYS use the iframe for consistency across the post and site
+			// editor.
+			( isGutenbergPlugin &&
+				getEditorSettings().__unstableIsBlockBasedTheme ) ||
+			// We also still want to iframe all the special
 			// editor features and modes such as device previews, zoom out, and
 			// template/pattern editing.
 			getDeviceType() !== 'Desktop' ||
 			[ 'wp_template', 'wp_block' ].includes( getCurrentPostType() ) ||
 			unlock( select( blockEditorStore ) ).isZoomOut() ||
-			// Finally, still iframe the editor for classic themes if all blocks
-			// are v3 (which means they are marked as iframe-compatible).
+			// Finally, still iframe the editor if all blocks are v3 (which means
+			// they are marked as iframe-compatible).
 			select( blocksStore )
 				.getBlockTypes()
 				.every( ( type ) => type.apiVersion >= 3 )
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 22d02920a7d2ec..cfbb5e1ab2e310 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index cb1d6e0c4ccbc9..72127a0f3f2dda 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
index c3d12e4c96e1de..dd8ccce86f572d 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal-content.js
@@ -6,7 +6,7 @@ import { paramCase as kebabCase } from 'change-case';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
@@ -15,10 +15,19 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
+function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
 	const [ title, setTitle ] = useState( '' );
 	const defaultTitle = __( 'Custom Template' );
 	const [ isBusy, setIsBusy ] = useState( false );
+	const inputRef = useRef();
+
+	// Set focus to the name input when the component mounts
+	useEffect( () => {
+		if ( inputRef.current ) {
+			inputRef.current.focus();
+		}
+	}, [] );
+
 	async function onCreateTemplate( event ) {
 		event.preventDefault();
 		if ( isBusy ) {
@@ -50,6 +59,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					onChange={ setTitle }
 					placeholder={ defaultTitle }
 					disabled={ isBusy }
+					ref={ inputRef }
 					help={ __(
 						// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
@@ -62,11 +72,9 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					<Button
 						__next40pxDefaultSize
 						variant="tertiary"
-						onClick={ () => {
-							onClose();
-						} }
+						onClick={ onBack }
 					>
-						{ __( 'Cancel' ) }
+						{ __( 'Back' ) }
 					</Button>
 					<Button
 						__next40pxDefaultSize
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 69f1925c7b0e44..7a846985c8c6a6 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -16,6 +16,7 @@ import {
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useDebouncedInput } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -165,10 +166,27 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
+function AddCustomTemplateModalContent( {
+	onSelect,
+	entityForSuggestions,
+	onBack,
+	containerRef,
+} ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
+
+	// Focus on the first focusable element when the modal opens.
+	// We handle focus management in the parent modal, just need to focus on the first focusable element.
+	useEffect( () => {
+		if ( containerRef.current ) {
+			const [ firstFocusable ] = focus.focusable.find(
+				containerRef.current
+			);
+			firstFocusable?.focus();
+		}
+	}, [ showSearchEntities ] );
+
 	return (
 		<VStack
 			spacing={ 4 }
@@ -247,6 +265,15 @@ function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 							</Text>
 						</FlexItem>
 					</Flex>
+					<Flex justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onBack }
+						>
+							{ __( 'Back' ) }
+						</Button>
+					</Flex>
 				</>
 			) }
 			{ showSearchEntities && (
@@ -260,6 +287,23 @@ function AddCustomTemplateModalContent( { onSelect, entityForSuggestions } ) {
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
+					<Flex justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ () => {
+								// If general template exists, go directly back to main screen
+								// instead of showing the choice screen
+								if ( entityForSuggestions.hasGeneralTemplate ) {
+									onBack();
+								} else {
+									setShowSearchEntities( false );
+								}
+							} }
+						>
+							{ __( 'Back' ) }
+						</Button>
+					</Flex>
 				</>
 			) }
 		</VStack>
diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
index 5f06ecae6824ae..aa36fa2e59540f 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState, memo } from '@wordpress/element';
+import { useState, memo, useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useViewportMatch } from '@wordpress/compose';
@@ -41,6 +41,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -162,7 +163,7 @@ function NewTemplateModal( { onClose } ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-
+	const containerRef = useRef( null );
 	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const homeUrl = useSelect( ( select ) => {
@@ -180,6 +181,20 @@ function NewTemplateModal( { onClose } ) {
 		),
 	};
 
+	useEffect( () => {
+		// Focus the first focusable element when component mounts or UI changes
+		// We don't want to focus on the other modals because they have their own focus management.
+		if (
+			containerRef.current &&
+			modalContent === modalContentMap.templatesList
+		) {
+			const [ firstFocusable ] = focus.focusable.find(
+				containerRef.current
+			);
+			firstFocusable?.focus();
+		}
+	}, [ modalContent ] );
+
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isSubmitting ) {
 			return;
@@ -261,6 +276,7 @@ function NewTemplateModal( { onClose } ) {
 					? 'edit-site-custom-generic-template__modal'
 					: undefined
 			}
+			ref={ containerRef }
 		>
 			{ modalContent === modalContentMap.templatesList && (
 				<Grid
@@ -320,12 +336,18 @@ function NewTemplateModal( { onClose } ) {
 				<AddCustomTemplateModalContent
 					onSelect={ createTemplate }
 					entityForSuggestions={ entityForSuggestions }
+					onBack={ () =>
+						setModalContent( modalContentMap.templatesList )
+					}
+					containerRef={ containerRef }
 				/>
 			) }
 			{ modalContent === modalContentMap.customGenericTemplate && (
 				<AddCustomGenericTemplateModalContent
-					onClose={ onModalClose }
 					createTemplate={ createTemplate }
+					onBack={ () =>
+						setModalContent( modalContentMap.templatesList )
+					}
 				/>
 			) }
 		</Modal>
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
index fd7d2277fae042..e9f3961bee5a39 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -80,10 +80,20 @@ const usePublicPostTypes = () => {
 	);
 	return useMemo( () => {
 		const excludedPostTypes = [ 'attachment' ];
-		return postTypes?.filter(
-			( { viewable, slug } ) =>
-				viewable && ! excludedPostTypes.includes( slug )
-		);
+		return postTypes
+			?.filter(
+				( { viewable, slug } ) =>
+					viewable && ! excludedPostTypes.includes( slug )
+			)
+			.sort( ( a, b ) => {
+				// Sort post types alphabetically by name,
+				// but exclude the built-in 'post' type from sorting.
+				if ( a.slug === 'post' || b.slug === 'post' ) {
+					return 0;
+				}
+
+				return a.name.localeCompare( b.name );
+			} );
 	}, [ postTypes ] );
 };
 
@@ -412,7 +422,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 			if ( _needsUniqueIdentifier ) {
 				menuItemTitle = labels.template_name
 					? sprintf(
-							// translators: 1: Name of the template e.g: "Products by Category". 2s: Slug of the taxonomy e.g: "product_cat".
+							// translators: 1: Name of the template e.g: "Products by Category". 2: Slug of the taxonomy e.g: "product_cat".
 							_x( '%1$s (%2$s)', 'taxonomy template menu label' ),
 							labels.template_name,
 							slug
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 625b2633ab7244..7c0c1d132d8bbb 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -63,8 +63,8 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 60px;
-	height: 60px;
+	width: $header-height;
+	height: $header-height;
 	display: flex;
 	align-items: center;
 	justify-content: center;
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index 0b1d482c0a1b3d..606eb996ccccd3 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -5,15 +5,18 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { shuffle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
+import { useColorRandomizer } from './hooks';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -49,22 +52,37 @@ export default function ColorPalettePanel( { name } ) {
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
+	const [ randomizeThemeColors ] = useColorRandomizer();
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
 			spacing={ 8 }
 		>
-			{ !! themeColors && !! themeColors.length && (
-				<PaletteEdit
-					canReset={ themeColors !== baseThemeColors }
-					canOnlyChangeValues
-					colors={ themeColors }
-					onChange={ setThemeColors }
-					paletteLabel={ __( 'Theme' ) }
-					paletteLabelHeadingLevel={ 3 }
-					popoverProps={ popoverProps }
-				/>
-			) }
+			<VStack spacing={ 4 }>
+				{ !! themeColors && !! themeColors.length && (
+					<PaletteEdit
+						canReset={ themeColors !== baseThemeColors }
+						canOnlyChangeValues
+						colors={ themeColors }
+						onChange={ setThemeColors }
+						paletteLabel={ __( 'Theme' ) }
+						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
+					/>
+				) }
+				{ window.__experimentalEnableColorRandomizer &&
+					themeColors?.length > 0 && (
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							icon={ shuffle }
+							onClick={ randomizeThemeColors }
+						>
+							{ __( 'Randomize colors' ) }
+						</Button>
+					) }
+			</VStack>
 			{ !! defaultColors &&
 				!! defaultColors.length &&
 				!! defaultPaletteEnabled && (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 3aef0171ec358f..3f12adff41e6ee 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -344,7 +344,7 @@ function FontCollection( { slug } ) {
 								! fonts.length && (
 									<Text>
 										{ __(
-											'No fonts found. Try with a different search term'
+											'No fonts found. Try with a different search term.'
 										) }
 									</Text>
 								) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 46732132619f6a..a18bb9755460a3 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -107,6 +107,10 @@ $footer-height: 70px;
 		background-color: $gray-100;
 	}
 
+	&:focus {
+		position: relative;
+	}
+
 	.font-library-modal__font-card__name {
 		font-weight: bold;
 	}
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
index 5b759d1e0468d8..ce694a5020908f 100644
--- a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
+++ b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
@@ -69,9 +69,9 @@ function FontSizeGroup( {
 				/>
 			) }
 			<VStack spacing={ 4 }>
-				<HStack justify="space-between" align="center">
+				<HStack>
 					<Subtitle level={ 3 }>{ label }</Subtitle>
-					<FlexItem>
+					<FlexItem className="edit-site-global-styles__typography-panel__options-container">
 						{ origin === 'custom' && (
 							<Button
 								label={ __( 'Add font size' ) }
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 9b8c3f829d2426..ceb15ef3bb6976 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -8,10 +8,9 @@ import {
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,
-	Button,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -20,7 +19,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import { unlock } from '../../lock-unlock';
 
@@ -38,8 +36,6 @@ function Palette( { name } ) {
 		name
 	);
 
-	const [ randomizeThemeColors ] = useColorRandomizer();
-
 	const colors = useMemo(
 		() => [
 			...( customColors || EMPTY_COLORS ),
@@ -87,17 +83,6 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ window.__experimentalEnableColorRandomizer &&
-				themeColors?.length > 0 && (
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						icon={ shuffle }
-						onClick={ randomizeThemeColors }
-					>
-						{ __( 'Randomize colors' ) }
-					</Button>
-				) }
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index 93c6fe5751327e..ff6a3397165adc 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -327,12 +327,7 @@ function ShadowEditor( { shadow, onChange } ) {
 		<>
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
-					<Flex
-						align="center"
-						className="edit-site-global-styles__shadows-panel__title"
-					>
-						<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
-					</Flex>
+					<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
 					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
 						<Button
 							size="small"
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index bd6b0dec5dc1dc..080eb5ecd71d94 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -104,7 +104,8 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__shadows-panel__options-container {
+.edit-site-global-styles__shadows-panel__options-container,
+.edit-site-global-styles__typography-panel__options-container {
 	height: $grid-unit * 3;
 }
 
diff --git a/packages/edit-site/src/components/more-menu/index.js b/packages/edit-site/src/components/more-menu/index.js
index 4c4e9bb45c093e..5d0913d445a8bf 100644
--- a/packages/edit-site/src/components/more-menu/index.js
+++ b/packages/edit-site/src/components/more-menu/index.js
@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
@@ -15,14 +13,10 @@ import { unlock } from '../../lock-unlock';
 const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 
 export default function MoreMenu() {
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
-
 	return (
 		<>
 			<ToolsMoreMenuGroup>
-				{ isBlockBasedTheme && <SiteExport /> }
+				<SiteExport />
 				<WelcomeGuideMenuItem />
 			</ToolsMoreMenuGroup>
 			<PreferencesModal />
diff --git a/packages/edit-site/src/components/more-menu/site-export.js b/packages/edit-site/src/components/more-menu/site-export.js
index 85ec4f0dd7335e..87f93d0cc83003 100644
--- a/packages/edit-site/src/components/more-menu/site-export.js
+++ b/packages/edit-site/src/components/more-menu/site-export.js
@@ -5,13 +5,26 @@ import { __, _x } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { download } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { downloadBlob } from '@wordpress/blob';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
 export default function SiteExport() {
+	const canExport = useSelect( ( select ) => {
+		const targetHints =
+			select( coreStore ).getCurrentTheme()?._links?.[
+				'wp:export-theme'
+			]?.[ 0 ]?.targetHints ?? {};
+
+		return !! targetHints.allow?.includes( 'GET' );
+	}, [] );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	if ( ! canExport ) {
+		return null;
+	}
+
 	async function handleExport() {
 		try {
 			const response = await apiFetch( {
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
index a9890fc75c02c7..d340d0e385d76f 100644
--- a/packages/edit-site/src/components/page-templates/style.scss
+++ b/packages/edit-site/src/components/page-templates/style.scss
@@ -25,17 +25,6 @@
 		max-height: 160px;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-			border-radius: $radius-medium;
-		}
 	}
 }
 
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index b9445fb00d0918..a811210ab716fd 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -22,6 +22,13 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			{ isBlockBasedTheme && (
 				<>
+					<SidebarNavigationItemGlobalStyles
+						to="/styles"
+						uid="global-styles-navigation-item"
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
 					<SidebarNavigationItem
 						uid="navigation-navigation-item"
 						to="/navigation"
@@ -30,13 +37,6 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 					>
 						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
-					<SidebarNavigationItemGlobalStyles
-						to="/styles"
-						uid="global-styles-navigation-item"
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
 					<SidebarNavigationItem
 						uid="page-navigation-item"
 						to="/page"
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
index 6cc3138c9c2f7f..49d28bb2a272de 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -102,6 +102,7 @@ export default function NavigationMenuContent( { rootClientId } ) {
 					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
+					isExpanded
 				/>
 			) }
 			<div className="edit-site-sidebar-navigation-screen-navigation-menus__helper-block-editor">
diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
index 046f08524851eb..3561eff6f593df 100644
--- a/packages/edit-site/src/components/style-book/examples.tsx
+++ b/packages/edit-site/src/components/style-book/examples.tsx
@@ -115,8 +115,9 @@ function getOverviewBlockExamples(
 
 	if ( getBlockType( 'core/heading' ) ) {
 		const headingBlock = createBlock( 'core/heading', {
+			// translators: Typography example. Your local alphabet, numbers and some common special characters.
 			content: __(
-				`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+				`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(…)},.-<>?!*&:/A@HELFO™©`
 			),
 			level: 1,
 		} );
diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
index f05acdfdd30080..b210adbf93d627 100644
--- a/packages/edit-site/src/components/style-book/index.js
+++ b/packages/edit-site/src/components/style-book/index.js
@@ -51,6 +51,7 @@ import { getExamples } from './examples';
 import { store as siteEditorStore } from '../../store';
 import { useSection } from '../sidebar-global-styles-wrapper';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
+import { getVariationClassName } from '../global-styles/utils';
 import {
 	STYLE_BOOK_COLOR_GROUPS,
 	STYLE_BOOK_PREVIEW_CATEGORIES,
@@ -215,6 +216,32 @@ export function getExamplesForSinglePageUse( examples ) {
 	return examplesForSinglePageUse;
 }
 
+/**
+ * Applies a block variation to each example by updating its attributes.
+ *
+ * @param {Array}  examples  Array of examples
+ * @param {string} variation Block variation name.
+ * @return {Array} Updated examples with variation applied.
+ */
+function applyBlockVariationsToExamples( examples, variation ) {
+	if ( ! variation ) {
+		return examples;
+	}
+
+	return examples.map( ( example ) => ( {
+		...example,
+		variation,
+		blocks: {
+			...example.blocks,
+			attributes: {
+				...example.blocks.attributes,
+				style: undefined,
+				className: getVariationClassName( variation ),
+			},
+		},
+	} ) );
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -394,7 +421,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		);
 	};
 
-	const onSelect = ( blockName ) => {
+	const onSelect = ( blockName, isBlockVariation = false ) => {
 		if (
 			STYLE_BOOK_COLOR_GROUPS.find(
 				( group ) => group.slug === blockName
@@ -410,6 +437,10 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 			return;
 		}
 
+		if ( isBlockVariation ) {
+			return;
+		}
+
 		// Now go to the selected block.
 		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
 	};
@@ -419,14 +450,20 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	let previewCategory = null;
+	let blockVariation = null;
 	if ( section.includes( '/colors' ) ) {
 		previewCategory = 'colors';
 	} else if ( section.includes( '/typography' ) ) {
 		previewCategory = 'text';
 	} else if ( section.includes( '/blocks' ) ) {
 		previewCategory = 'blocks';
-		const blockName =
-			decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+		let blockName = decodeURIComponent( section ).split( '/blocks/' )[ 1 ];
+
+		// The blockName can contain variations, if so, extract the variation.
+		if ( blockName?.includes( '/variations' ) ) {
+			[ blockName, blockVariation ] = blockName.split( '/variations/' );
+		}
+
 		if (
 			blockName &&
 			examples.find( ( example ) => example.name === blockName )
@@ -440,21 +477,43 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		( category ) => category.slug === previewCategory
 	);
 
-	// If there's no category definition there may be a single block.
-	const filteredExamples = categoryDefinition
-		? getExamplesByCategory( categoryDefinition, examples )
-		: {
+	const filteredExamples = useMemo( () => {
+		// If there's no category definition there may be a single block.
+		if ( ! categoryDefinition ) {
+			return {
 				examples: [
 					examples.find(
 						( example ) => example.name === previewCategory
 					),
 				],
-		  };
+			};
+		}
+
+		return getExamplesByCategory( categoryDefinition, examples );
+	}, [ categoryDefinition, examples, previewCategory ] );
 
-	// If there's no preview category, show all examples.
-	const displayedExamples = previewCategory
-		? filteredExamples
-		: { examples: examplesForSinglePageUse };
+	const displayedExamples = useMemo( () => {
+		// If there's no preview category, show all examples.
+		if ( ! previewCategory ) {
+			return { examples: examplesForSinglePageUse };
+		}
+
+		if ( blockVariation ) {
+			return {
+				examples: applyBlockVariationsToExamples(
+					filteredExamples.examples,
+					blockVariation
+				),
+			};
+		}
+
+		return filteredExamples;
+	}, [
+		previewCategory,
+		examplesForSinglePageUse,
+		blockVariation,
+		filteredExamples,
+	] );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( section );
@@ -603,7 +662,11 @@ const Examples = memo(
 							isSelected={ isSelected?.( example.name ) }
 							onClick={
 								!! onSelect
-									? () => onSelect( example.name )
+									? () =>
+											onSelect(
+												example.name,
+												!! example.variation
+											)
 									: null
 							}
 						/>
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index bec47e82a3a620..5397f1ed098cdb 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 5feb2af6b7fe0b..fc8876b267fd5a 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss
index b909b79dc1d304..28140707fe14c2 100644
--- a/packages/edit-widgets/src/components/error-boundary/style.scss
+++ b/packages/edit-widgets/src/components/error-boundary/style.scss
@@ -2,6 +2,6 @@
 	margin: auto;
 	max-width: 780px;
 	padding: 20px;
-	margin-top: 60px;
+	margin-top: $header-height;
 	box-shadow: $elevation-large;
 }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 32214cb0f157ad..cd086100241f1c 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -25,7 +25,7 @@
 		.block-editor-block-toolbar {
 			height: 100%;
 			// Push down so that buttons are centered vertically.
-			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// It should be 16px (64px header height - 32px compact button height = 32 / 2),
 			// but there is a -1px top-margin down the stack that affects this.
 			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
 
diff --git a/packages/edit-widgets/src/components/save-button/index.js b/packages/edit-widgets/src/components/save-button/index.js
index d10f6a8d49f0db..a024147fe88616 100644
--- a/packages/edit-widgets/src/components/save-button/index.js
+++ b/packages/edit-widgets/src/components/save-button/index.js
@@ -11,18 +11,26 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editWidgetsStore } from '../../store';
 
 function SaveButton() {
-	const { hasEditedWidgetAreaIds, isSaving } = useSelect( ( select ) => {
-		const { getEditedWidgetAreas, isSavingWidgetAreas } =
-			select( editWidgetsStore );
+	const { hasEditedWidgetAreaIds, isSaving, isWidgetSaveLocked } = useSelect(
+		( select ) => {
+			const {
+				getEditedWidgetAreas,
+				isSavingWidgetAreas,
+				isWidgetSavingLocked,
+			} = select( editWidgetsStore );
 
-		return {
-			hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
-			isSaving: isSavingWidgetAreas(),
-		};
-	}, [] );
+			return {
+				hasEditedWidgetAreaIds: getEditedWidgetAreas()?.length > 0,
+				isSaving: isSavingWidgetAreas(),
+				isWidgetSaveLocked: isWidgetSavingLocked(),
+			};
+		},
+		[]
+	);
 	const { saveEditedWidgetAreas } = useDispatch( editWidgetsStore );
 
-	const isDisabled = isSaving || ! hasEditedWidgetAreaIds;
+	const isDisabled =
+		isWidgetSaveLocked || isSaving || ! hasEditedWidgetAreaIds;
 
 	return (
 		<Button
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index 72e04e5f62034c..09045dcf2a1a1e 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
@@ -25,19 +22,10 @@ export default function InserterSidebar() {
 		return setIsInserterOpened( false );
 	}, [ setIsInserterOpened ] );
 
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: closeInserter,
-		focusOnMount: true,
-	} );
-
 	const libraryRef = useRef();
 
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-widgets-layout__inserter-panel"
-		>
+		<div className="edit-widgets-layout__inserter-panel">
 			<div className="edit-widgets-layout__inserter-panel-content">
 				<Library
 					showInserterHelpPanel
diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
index 8124ace66bdb3a..2cd1053e4c96a7 100644
--- a/packages/edit-widgets/src/store/actions.js
+++ b/packages/edit-widgets/src/store/actions.js
@@ -431,3 +431,61 @@ export const moveBlockToWidgetArea =
 				destinationIndex
 			);
 	};
+
+/**
+ * Returns an action object used to signal that widget saving is unlocked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @example
+ * ```js
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useDispatch } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const { unlockWidgetSaving } = useDispatch( widgetStore );
+ * 	return (
+ * 		<Button onClick={ () => unlockWidgetSaving( 'lockName' ) }>
+ * 			{ __( 'Unlock Widget Saving' ) }
+ * 		</Button>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {Object} Action object
+ */
+export function unlockWidgetSaving( lockName ) {
+	return {
+		type: 'UNLOCK_WIDGET_SAVING',
+		lockName,
+	};
+}
+
+/**
+ * Returns an action object used to signal that widget saving is locked.
+ *
+ * @param {string} lockName The lock name.
+ *
+ * @example
+ * ```js
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useDispatch } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const { lockWidgetSaving } = useDispatch( widgetStore );
+ * 	return (
+ * 		<Button onClick={ () => lockWidgetSaving( 'lockName' ) }>
+ * 			{ __( 'Lock Widget Saving' ) }
+ * 		</Button>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {Object} Action object
+ */
+export function lockWidgetSaving( lockName ) {
+	return {
+		type: 'LOCK_WIDGET_SAVING',
+		lockName,
+	};
+}
diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js
index 3dbc95123a382a..dbf68210c09971 100644
--- a/packages/edit-widgets/src/store/reducer.js
+++ b/packages/edit-widgets/src/store/reducer.js
@@ -90,10 +90,36 @@ export function inserterSidebarToggleRef( state = { current: null } ) {
 	return state;
 }
 
+/**
+ * Widget saving lock.
+ *
+ * When widget saving is locked, the widget cannot be updated.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function widgetSavingLock( state = {}, action ) {
+	switch ( action.type ) {
+		case 'LOCK_WIDGET_SAVING':
+			return { ...state, [ action.lockName ]: true };
+
+		case 'UNLOCK_WIDGET_SAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blockInserterPanel,
 	inserterSidebarToggleRef,
 	listViewPanel,
 	listViewToggleRef,
 	widgetAreasOpenState,
+	widgetSavingLock,
 } );
diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
index 204c75e2daefbb..7303cb361da001 100644
--- a/packages/edit-widgets/src/store/selectors.js
+++ b/packages/edit-widgets/src/store/selectors.js
@@ -311,3 +311,34 @@ export const canInsertBlockInWidgetArea = createRegistrySelector(
 export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
+
+/**
+ * Returns whether widget saving is locked.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { store as widgetStore } from '@wordpress/edit-widgets';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const isSavingLocked = useSelect(
+ * 		( select ) => select( widgetStore ).isWidgetSavingLocked(),
+ * 		[]
+ * 	);
+ *
+ * 	return isSavingLocked ? (
+ * 		<p>{ __( 'Widget saving is locked' ) }</p>
+ * 	) : (
+ * 		<p>{ __( 'Widget saving is not locked' ) }</p>
+ * 	);
+ * };
+ * ```
+ *
+ * @return {boolean} Is locked.
+ */
+export function isWidgetSavingLocked( state ) {
+	return Object.keys( state.widgetSavingLock ).length > 0;
+}
diff --git a/packages/edit-widgets/src/store/test/reducer.js b/packages/edit-widgets/src/store/test/reducer.js
new file mode 100644
index 00000000000000..bf220c10cd0c4c
--- /dev/null
+++ b/packages/edit-widgets/src/store/test/reducer.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { widgetSavingLock } from '../reducer';
+
+describe( 'state', () => {
+	describe( 'widgetSavingLock', () => {
+		it( 'returns empty object by default', () => {
+			const state = widgetSavingLock( undefined, {} );
+
+			expect( state ).toEqual( {} );
+		} );
+
+		it( 'returns correct widget saving locks when locks added and removed', () => {
+			let state = widgetSavingLock( undefined, {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'LOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock': true,
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock',
+			} );
+
+			expect( state ).toEqual( {
+				'test-lock-2': true,
+			} );
+
+			state = widgetSavingLock( deepFreeze( state ), {
+				type: 'UNLOCK_WIDGET_SAVING',
+				lockName: 'test-lock-2',
+			} );
+
+			expect( state ).toEqual( {} );
+		} );
+	} );
+} );
diff --git a/packages/edit-widgets/src/store/test/selectors.js b/packages/edit-widgets/src/store/test/selectors.js
new file mode 100644
index 00000000000000..8666eedc3100a9
--- /dev/null
+++ b/packages/edit-widgets/src/store/test/selectors.js
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import * as _selectors from '../selectors';
+
+const selectors = { ..._selectors };
+const { isWidgetSavingLocked } = selectors;
+
+describe( 'selectors', () => {
+	describe( 'isWidgetSavingLocked', () => {
+		it( 'should return true if the post has widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: { example: true },
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if the post has no widgetSavingLocks', () => {
+			const state = {
+				widgetSavingLock: {},
+				currentWidget: {},
+				saving: {},
+			};
+
+			expect( isWidgetSavingLocked( state ) ).toBe( false );
+		} );
+	} );
+} );
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index bca74a97557d80..376855026ab986 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 14.27.0 (2025-07-23)
+
+## 14.26.0 (2025-06-25)
+
+## 14.25.0 (2025-06-04)
+
+## 14.24.0 (2025-05-22)
+
+## 14.23.0 (2025-05-07)
+
+## 14.22.0 (2025-04-11)
+
 ## 14.21.0 (2025-03-27)
 
 ## 14.20.0 (2025-03-13)
diff --git a/packages/editor/README.md b/packages/editor/README.md
index db77f771f52918..d38b37e7a37db4 100644
--- a/packages/editor/README.md
+++ b/packages/editor/README.md
@@ -489,7 +489,7 @@ The module also checks for sessionStorage support and conditionally exports the
 
 ### mediaUpload
 
-Upload a media file when the file upload button is activated. Wrapper around mediaUpload() that injects the current post ID.
+Upload a media file when the file upload button is activated. Wrapper around uploadMedia() that injects the current post ID.
 
 _Parameters_
 
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 968906d8dd9ff6..423713f1ad517e 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.21.0",
+	"version": "14.27.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
index bd139a682f5cb7..70d5bf7828afad 100644
--- a/packages/editor/src/components/collab-sidebar/comment-form.js
+++ b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -7,7 +7,7 @@ import {
 	Button,
 	TextareaControl,
 } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -36,6 +36,8 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 				__nextHasNoMarginBottom
 				value={ inputComment ?? '' }
 				onChange={ setInputComment }
+				label={ __( 'Comment' ) }
+				hideLabelFromVision
 			/>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<Button
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index d492d233956cb7..7abe2eff3582dc 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -144,7 +144,7 @@ function Thread( {
 					{ ! isFocused && (
 						<VStack className="editor-collab-sidebar-panel__show-more-reply">
 							{ sprintf(
-								// translators: 1: number of replies.
+								// translators: %s: number of replies.
 								_x(
 									'%s more replies..',
 									'Show replies button'
diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
index f559e1a055cdcd..e96bc1d07081f4 100644
--- a/packages/editor/src/components/collapsible-block-toolbar/style.scss
+++ b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -14,7 +14,7 @@
 	.block-editor-block-toolbar {
 		height: 100%;
 		// Push down so that buttons are centered vertically.
-		// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+		// It should be 16px (64px header height - 32px compact button height = 32 / 2),
 		// but there is a -1px top-margin down the stack that affects this.
 		padding-top: math.div($header-height - $button-size-compact, 2) + 1;
 
@@ -62,12 +62,13 @@
 			overflow: visible;
 		}
 
-		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		// Reduce height and move up a little to prevent the toolbar
+		// shift when focus is on the vertical movers.
 		@include break-small() {
 			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
 				height: $grid-unit-50;
 				position: relative;
-				top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+				top: #{$grid-unit-05 * -1};
 			}
 		}
 	}
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 6f6ffbec7b9c32..11743373396f3e 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -56,7 +56,6 @@ export default function EditorInterface( {
 } ) {
 	const {
 		mode,
-		isRichEditingEnabled,
 		isInserterOpened,
 		isListViewOpened,
 		isDistractionFree,
@@ -69,9 +68,16 @@ export default function EditorInterface( {
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
+		let _mode = select( editorStore ).getEditorMode();
+		if ( ! editorSettings.richEditingEnabled && _mode === 'visual' ) {
+			_mode = 'text';
+		}
+		if ( ! editorSettings.codeEditingEnabled && _mode === 'text' ) {
+			_mode = 'visual';
+		}
+
 		return {
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			mode: _mode,
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
@@ -148,23 +154,20 @@ export default function EditorInterface( {
 								editorCanvasView
 							) : (
 								<>
-									{ ! isPreviewMode &&
-										( mode === 'text' ||
-											! isRichEditingEnabled ) && (
-											<TextEditor
-												// We should auto-focus the canvas (title) on load.
-												// eslint-disable-next-line jsx-a11y/no-autofocus
-												autoFocus={ autoFocus }
-											/>
-										) }
+									{ ! isPreviewMode && mode === 'text' && (
+										<TextEditor
+											// We should auto-focus the canvas (title) on load.
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ autoFocus }
+										/>
+									) }
 									{ ! isPreviewMode &&
 										! isLargeViewport &&
 										mode === 'visual' && (
 											<BlockToolbar hideDragHandle />
 										) }
 									{ ( isPreviewMode ||
-										( isRichEditingEnabled &&
-											mode === 'visual' ) ) && (
+										mode === 'visual' ) && (
 										<VisualEditor
 											styles={ styles }
 											contentRef={ contentRef }
@@ -187,7 +190,6 @@ export default function EditorInterface( {
 				! isDistractionFree &&
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
-				isRichEditingEnabled &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
diff --git a/packages/editor/src/components/editor-interface/style.scss b/packages/editor/src/components/editor-interface/style.scss
index 7219e03058fc4c..05b23fe2304dd8 100644
--- a/packages/editor/src/components/editor-interface/style.scss
+++ b/packages/editor/src/components/editor-interface/style.scss
@@ -8,6 +8,5 @@
 }
 
 .editor-visual-editor {
-	// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
-	flex: 1 1 0%;
+	flex: 1 0 auto;
 }
diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
index 4d59c511667088..ceb2e9be143398 100644
--- a/packages/editor/src/components/error-boundary/style.scss
+++ b/packages/editor/src/components/error-boundary/style.scss
@@ -3,7 +3,7 @@
 	margin: auto;
 	max-width: 780px;
 	padding: 1em;
-	margin-top: 60px;
+	margin-top: $header-height;
 	box-shadow: $elevation-large;
 	border: $border-width solid $gray-900;
 	border-radius: $radius-small;
diff --git a/packages/editor/src/components/media-categories/index.js b/packages/editor/src/components/media-categories/index.js
index be1b2bdc2d6728..17cfd054710f65 100644
--- a/packages/editor/src/components/media-categories/index.js
+++ b/packages/editor/src/components/media-categories/index.js
@@ -63,7 +63,7 @@ const getOpenverseCaption = ( item ) => {
 	if ( _creator ) {
 		_caption = title
 			? sprintf(
-					// translators: %1s: Title of a media work from Openverse; %2s: Name of the work's creator; %3s: Work's licence e.g: "CC0 1.0".
+					// translators: %1s: Title of a media work from Openverse; %2$s: Name of the work's creator; %3s: Work's licence e.g: "CC0 1.0".
 					_x( '"%1$s" by %2$s/ %3$s', 'caption' ),
 					getExternalLink(
 						foreignLandingUrl,
diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
index 1c836c8f0506a4..ea2cbe009b099f 100644
--- a/packages/editor/src/components/post-actions/actions.js
+++ b/packages/editor/src/components/post-actions/actions.js
@@ -24,34 +24,55 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		[ postType ]
 	);
 
-	const { canManageOptions, hasFrontPageTemplate } = useSelect(
+	const shouldShowHomepageActions = useSelect(
 		( select ) => {
-			const { getEntityRecords, canUser } = select( coreStore );
+			if ( postType !== 'page' ) {
+				return false;
+			}
+
+			const { getDefaultTemplateId, getEntityRecord, canUser } =
+				select( coreStore );
 			const canUpdateSettings = canUser( 'update', {
 				kind: 'root',
 				name: 'site',
 			} );
-			const templates =
-				'page' === postType && canUpdateSettings
-					? getEntityRecords( 'postType', 'wp_template', {
-							per_page: -1,
-					  } )
-					: [];
 
-			return {
-				canManageOptions: canUpdateSettings,
-				hasFrontPageTemplate: !! templates?.find(
-					( template ) => template?.slug === 'front-page'
-				),
-			};
+			if ( ! canUpdateSettings ) {
+				return false;
+			}
+
+			// Note that resolved template for `front-page` is not necessarily a
+			// `front-page` template.
+			const frontPageTemplateId = getDefaultTemplateId( {
+				slug: 'front-page',
+			} );
+
+			if ( ! frontPageTemplateId ) {
+				return true;
+			}
+
+			// This won't trigger a second network request, getDefaultTemplateId
+			// will have received the whole template from the REST API.
+			const frontPageTemplate = getEntityRecord(
+				'postType',
+				'wp_template',
+				frontPageTemplateId
+			);
+
+			if ( ! frontPageTemplate ) {
+				return true;
+			}
+
+			// When there is a front page template, the front page cannot be
+			// changed. See
+			// https://developer.wordpress.org/themes/basics/template-hierarchy/
+			return frontPageTemplate.slug !== 'front-page';
 		},
 		[ postType ]
 	);
 
 	const setAsHomepageAction = useSetAsHomepageAction();
 	const setAsPostsPageAction = useSetAsPostsPageAction();
-	const shouldShowHomepageActions =
-		canManageOptions && ! hasFrontPageTemplate;
 
 	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
 	useEffect( () => {
diff --git a/packages/editor/src/components/post-actions/set-as-homepage.js b/packages/editor/src/components/post-actions/set-as-homepage.js
index cb67e251ed58c2..cf446218cb31ab 100644
--- a/packages/editor/src/components/post-actions/set-as-homepage.js
+++ b/packages/editor/src/components/post-actions/set-as-homepage.js
@@ -160,6 +160,7 @@ export const useSetAsHomepageAction = () => {
 
 				return true;
 			},
+			modalFocusOnMount: 'firstContentElement',
 			RenderModal: SetAsHomepageModal,
 		} ),
 		[ pageForPosts, pageOnFront ]
diff --git a/packages/editor/src/components/post-actions/set-as-posts-page.js b/packages/editor/src/components/post-actions/set-as-posts-page.js
index 830c2cac734f1f..dbfe43c0477677 100644
--- a/packages/editor/src/components/post-actions/set-as-posts-page.js
+++ b/packages/editor/src/components/post-actions/set-as-posts-page.js
@@ -157,6 +157,7 @@ export const useSetAsPostsPageAction = () => {
 
 				return true;
 			},
+			modalFocusOnMount: 'firstContentElement',
 			RenderModal: SetAsPostsPageModal,
 		} ),
 		[ pageForPosts, pageOnFront ]
diff --git a/packages/editor/src/components/post-author/check.js b/packages/editor/src/components/post-author/check.js
index de781038d2dfd5..ca8df253fdda3f 100644
--- a/packages/editor/src/components/post-author/check.js
+++ b/packages/editor/src/components/post-author/check.js
@@ -2,14 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
 
 /**
  * Wrapper component that renders its children only if the post type supports the author.
@@ -21,20 +19,17 @@ import { AUTHORS_QUERY } from './constants';
  * supports the author or if there are no authors available.
  */
 export default function PostAuthorCheck( { children } ) {
-	const { hasAssignAuthorAction, hasAuthors } = useSelect( ( select ) => {
+	const { hasAssignAuthorAction } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();
 		const canAssignAuthor = post?._links?.[ 'wp:action-assign-author' ]
 			? true
 			: false;
 		return {
 			hasAssignAuthorAction: canAssignAuthor,
-			hasAuthors: canAssignAuthor
-				? select( coreStore ).getUsers( AUTHORS_QUERY )?.length >= 1
-				: false,
 		};
 	}, [] );
 
-	if ( ! hasAssignAuthorAction || ! hasAuthors ) {
+	if ( ! hasAssignAuthorAction ) {
 		return null;
 	}
 
diff --git a/packages/editor/src/components/post-author/combobox.js b/packages/editor/src/components/post-author/combobox.js
index 9cc6e01f5b82ce..7cc71056646b77 100644
--- a/packages/editor/src/components/post-author/combobox.js
+++ b/packages/editor/src/components/post-author/combobox.js
@@ -32,15 +32,6 @@ export default function PostAuthorCombobox() {
 		editPost( { author: postAuthorId } );
 	};
 
-	/**
-	 * Handle user input.
-	 *
-	 * @param {string} inputValue The current value of the input field.
-	 */
-	const handleKeydown = ( inputValue ) => {
-		setFieldValue( inputValue );
-	};
-
 	return (
 		<ComboboxControl
 			__nextHasNoMarginBottom
@@ -48,7 +39,7 @@ export default function PostAuthorCombobox() {
 			label={ __( 'Author' ) }
 			options={ authorOptions }
 			value={ authorId }
-			onFilterValueChange={ debounce( handleKeydown, 300 ) }
+			onFilterValueChange={ debounce( setFieldValue, 300 ) }
 			onChange={ handleSelect }
 			allowReset={ false }
 			hideLabelFromVision
diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js
index 5a413aedac09cf..2ab3e4fdaf1991 100644
--- a/packages/editor/src/components/post-author/panel.js
+++ b/packages/editor/src/components/post-author/panel.js
@@ -6,6 +6,8 @@ import { Button, Dropdown } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -13,10 +15,16 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
-import { useAuthorsQuery } from './hook';
+import { BASE_QUERY } from './constants';
+import { store as editorStore } from '../../store';
 
 function PostAuthorToggle( { isOpen, onClick } ) {
-	const { postAuthor } = useAuthorsQuery();
+	const { postAuthor } = useSelect( ( select ) => {
+		const id = select( editorStore ).getEditedPostAttribute( 'author' );
+		return {
+			postAuthor: select( coreStore ).getUser( id, BASE_QUERY ),
+		};
+	}, [] );
 	const authorName =
 		decodeEntities( postAuthor?.name ) || __( '(No author)' );
 	return (
diff --git a/packages/editor/src/components/post-author/test/check.js b/packages/editor/src/components/post-author/test/check.js
index 597ab97ea2a8ad..6a2f3da1234f75 100644
--- a/packages/editor/src/components/post-author/test/check.js
+++ b/packages/editor/src/components/post-author/test/check.js
@@ -19,7 +19,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
-function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
+function setupUseSelectMock( hasAssignAuthorAction ) {
 	useSelect.mockImplementation( ( cb ) => {
 		return cb( () => ( {
 			getPostType: () => ( { supports: { author: true } } ),
@@ -29,28 +29,20 @@ function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
 					'wp:action-assign-author': hasAssignAuthorAction,
 				},
 			} ),
-			getUsers: () => Array( hasAuthors ? 1 : 0 ).fill( {} ),
 		} ) );
 	} );
 }
 
 describe( 'PostAuthorCheck', () => {
-	it( 'should not render anything if has no authors', () => {
-		setupUseSelectMock( false, true );
-
-		render( <PostAuthorCheck>authors</PostAuthorCheck> );
-		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
-	} );
-
 	it( "should not render anything if doesn't have author action", () => {
-		setupUseSelectMock( true, false );
+		setupUseSelectMock( false );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
-		setupUseSelectMock( true, true );
+		setupUseSelectMock( true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.getByText( 'authors' ) ).toBeVisible();
diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js
index 16cff5af976841..65225a96508ac1 100644
--- a/packages/editor/src/components/post-locked-modal/index.js
+++ b/packages/editor/src/components/post-locked-modal/index.js
@@ -7,6 +7,7 @@ import {
 	Button,
 	ExternalLink,
 	__experimentalHStack as HStack,
+	withFilters,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -20,13 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-/**
- * A modal component that is displayed when a post is locked for editing by another user.
- * The modal provides information about the lock status and options to take over or exit the editor.
- *
- * @return {React.ReactNode} The rendered PostLockedModal component.
- */
-export default function PostLockedModal() {
+function PostLockedModal() {
 	const instanceId = useInstanceId( PostLockedModal );
 	const hookName = 'core/editor/post-locked-modal-' + instanceId;
 	const { autosave, updatePostLock } = useDispatch( editorStore );
@@ -277,3 +272,13 @@ export default function PostLockedModal() {
 		</Modal>
 	);
 }
+
+/**
+ * A modal component that is displayed when a post is locked for editing by another user.
+ * The modal provides information about the lock status and options to take over or exit the editor.
+ *
+ * @return {React.ReactNode} The rendered PostLockedModal component.
+ */
+export default globalThis.IS_GUTENBERG_PLUGIN
+	? withFilters( 'editor.PostLockedModal' )( PostLockedModal )
+	: PostLockedModal;
diff --git a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
index a81168808f1af7..94fb8ed1723dc9 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-post-format-panel.js
@@ -75,7 +75,7 @@ export default function PostFormatPanel() {
 					onUpdatePostFormat={ onUpdatePostFormat }
 					suggestedPostFormat={ suggestion.id }
 					suggestionText={ sprintf(
-						/* translators: %s: post format */
+						/* translators: %1s: post format */
 						__( 'Apply the "%1$s" format.' ),
 						suggestion.caption
 					) }
diff --git a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
index a025638801dfef..c5072a91f06026 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-tags-panel.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
@@ -14,18 +14,30 @@ import FlatTermSelector from '../post-taxonomies/flat-term-selector';
 import { store as editorStore } from '../../store';
 
 const TagsPanel = () => {
+	const tagLabels = useSelect( ( select ) => {
+		const taxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
+		return taxonomy?.labels;
+	}, [] );
+
+	const addNewItem = tagLabels?.add_new_item ?? __( 'Add tag' );
+	const tagLabel = tagLabels?.name ?? __( 'Tags' );
+
 	const panelBodyTitle = [
 		__( 'Suggestion:' ),
 		<span className="editor-post-publish-panel__link" key="label">
-			{ __( 'Add tags' ) }
+			{ addNewItem }
 		</span>,
 	];
 
 	return (
 		<PanelBody initialOpen={ false } title={ panelBodyTitle }>
 			<p>
-				{ __(
-					'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
+				{ sprintf(
+					// translators: %s is the taxonomy name (e.g., "Tags").
+					__(
+						'%s help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
+					),
+					tagLabel
 				) }
 			</p>
 			<FlatTermSelector slug="post_tag" __nextHasNoMarginBottom />
diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js
index 98afb4d1d573e7..f3fd60417eb195 100644
--- a/packages/editor/src/components/post-publish-panel/postpublish.js
+++ b/packages/editor/src/components/post-publish-panel/postpublish.js
@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, Button, TextControl } from '@wordpress/components';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	ExternalLink,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -9,6 +15,7 @@ import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -118,9 +125,9 @@ export default function PostPublishPanelPostpublish( {
 	return (
 		<div className="post-publish-panel__postpublish">
 			<PanelBody className="post-publish-panel__postpublish-header">
-				<a ref={ postLinkRef } href={ link }>
+				<ExternalLink ref={ postLinkRef } href={ link }>
 					{ decodeEntities( post.title ) || __( '(no title)' ) }
-				</a>{ ' ' }
+				</ExternalLink>{ ' ' }
 				{ postPublishNonLinkHeader }
 			</PanelBody>
 			<PanelBody>
@@ -153,8 +160,17 @@ export default function PostPublishPanelPostpublish( {
 							variant="primary"
 							href={ link }
 							__next40pxDefaultSize
+							icon={ external }
+							iconPosition="right"
+							target="_blank"
 						>
 							{ viewPostLabel }
+							<VisuallyHidden as="span">
+								{
+									/* translators: accessibility text */
+									__( '(opens in a new tab)' )
+								}
+							</VisuallyHidden>
 						</Button>
 					) }
 					<Button
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 6221eaef52767b..ec6fbd01cb8520 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -129,6 +129,7 @@
 .post-publish-panel__postpublish .components-panel__body {
 	border-bottom: $border-width solid $gray-200;
 	border-top: none;
+	word-break: break-word;
 }
 
 .post-publish-panel__postpublish-buttons {
@@ -137,9 +138,11 @@
 	flex-wrap: wrap;
 	gap: $grid-unit-20;
 
-	.components-button {
+	.components-button,
+	.components-button.has-icon {
 		justify-content: center;
 		flex: 1;
+		min-width: unset;
 	}
 
 	.components-clipboard-button {
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 9fb3d24cd2931f..5f04209a079f12 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -27,7 +27,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -87,9 +87,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -143,9 +156,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -164,7 +199,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
@@ -219,7 +254,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -239,7 +274,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -279,9 +314,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -335,9 +383,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -356,7 +426,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
index 0bc4b17ba1aa49..c2293bfcd1467f 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -13,6 +13,7 @@ import {
 	Flex,
 	FlexItem,
 	SearchControl,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useDebounce } from '@wordpress/compose';
@@ -25,6 +26,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { buildTermsTree } from '../../utils/terms';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Module Constants
@@ -36,11 +38,11 @@ const DEFAULT_QUERY = {
 	_fields: 'id,name,parent',
 	context: 'view',
 };
-
 const MIN_TERMS_COUNT_FOR_FILTER = 8;
-
 const EMPTY_ARRAY = [];
 
+const { normalizeTextString } = unlock( componentsPrivateApis );
+
 /**
  * Sort Terms by Selected.
  *
@@ -132,7 +134,9 @@ export function getFilterMatcher( filterValue ) {
 		// (i.e. some child matched at some point in the tree) then return it.
 		if (
 			-1 !==
-				term.name.toLowerCase().indexOf( filterValue.toLowerCase() ) ||
+				normalizeTextString( term.name ).indexOf(
+					normalizeTextString( filterValue )
+				) ||
 			term.children.length > 0
 		) {
 			return term;
diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss
index 9adb80cf3c4ddd..b5f3ec2b8d8407 100644
--- a/packages/editor/src/components/post-template/style.scss
+++ b/packages/editor/src/components/post-template/style.scss
@@ -1,5 +1,15 @@
 .editor-post-template__swap-template-modal {
 	z-index: z-index(".editor-post-template__swap-template-modal");
+
+	.editor-post-template__swap-template-search {
+		background: $white;
+		position: sticky;
+		top: 0;
+		padding: $grid-unit-20 0;
+		transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container
+		margin-bottom: - $grid-unit-05;
+		z-index: z-index(".editor-post-template__swap-template-search");
+	}
 }
 
 .editor-post-template__create-template-modal {
diff --git a/packages/editor/src/components/post-template/swap-template-button.js b/packages/editor/src/components/post-template/swap-template-button.js
index ad1f7fa67b923f..75239bac879bca 100644
--- a/packages/editor/src/components/post-template/swap-template-button.js
+++ b/packages/editor/src/components/post-template/swap-template-button.js
@@ -4,7 +4,7 @@
 import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { MenuItem, Modal } from '@wordpress/components';
+import { MenuItem, Modal, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -14,6 +14,7 @@ import { parse } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useAvailableTemplates, useEditedPostContext } from './hooks';
+import { searchTemplates } from '../../utils/search-templates';
 
 export default function SwapTemplateButton( { onClick } ) {
 	const [ showModal, setShowModal ] = useState( false );
@@ -61,6 +62,7 @@ export default function SwapTemplateButton( { onClick } ) {
 }
 
 function TemplatesList( { postType, onSelect } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
 	const availableTemplates = useAvailableTemplates( postType );
 	const templatesAsPatterns = useMemo(
 		() =>
@@ -72,11 +74,26 @@ function TemplatesList( { postType, onSelect } ) {
 			} ) ),
 		[ availableTemplates ]
 	);
+
+	const filteredBlockTemplates = useMemo( () => {
+		return searchTemplates( templatesAsPatterns, searchValue );
+	}, [ templatesAsPatterns, searchValue ] );
+
 	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ templatesAsPatterns }
-			onClickPattern={ onSelect }
-		/>
+		<>
+			<SearchControl
+				__nextHasNoMarginBottom
+				onChange={ setSearchValue }
+				value={ searchValue }
+				label={ __( 'Search' ) }
+				placeholder={ __( 'Search' ) }
+				className="editor-post-template__swap-template-search"
+			/>
+			<BlockPatternsList
+				label={ __( 'Templates' ) }
+				blockPatterns={ filteredBlockTemplates }
+				onClickPattern={ onSelect }
+			/>
+		</>
 	);
 }
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index f8a70f5fdf760b..c4aab9fb85d814 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -18,7 +18,20 @@
 
 .editor-post-url__front-page-link {
 	// Match padding on tertiary buttons for alignment.
-	padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+	padding: $grid-unit-15 * 0.5 $grid-unit-15;
+	border-radius: $radius-small;
+	color: var(--wp-admin-theme-color);
+
+	&:hover {
+		background: color-mix(in srgb, var(--wp-admin-theme-color) 4%, transparent);
+		color: var(--wp-admin-theme-color-darker-20, #183ad6);
+	}
+
+	&:focus {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color);
+		outline: 3px solid #0000;
+	}
 }
 
 
diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js
index 14d052052e7005..a1661ee2fcbadf 100644
--- a/packages/editor/src/components/start-page-options/index.js
+++ b/packages/editor/src/components/start-page-options/index.js
@@ -17,6 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import { store as editorStore } from '../../store';
 
 export function useStartPatterns() {
@@ -152,7 +153,8 @@ export default function StartPageOptions() {
 		return {
 			postId: getCurrentPostId(),
 			enabled:
-				choosePatternModalEnabled && 'page' === getCurrentPostType(),
+				choosePatternModalEnabled &&
+				TEMPLATE_POST_TYPE !== getCurrentPostType(),
 		};
 	}, [] );
 
diff --git a/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js b/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js
index 9ce11772a34b7a..a74ea02838c665 100644
--- a/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js
+++ b/packages/editor/src/components/template-part-menu-items/convert-to-template-part.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -20,8 +21,10 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const { canCreate } = useSelect( ( select ) => {
+	const { isBlockBasedTheme, canCreate } = useSelect( ( select ) => {
 		return {
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
 			canCreate:
 				select( blockEditorStore ).canInsertBlockType(
 					'core/template-part'
@@ -29,7 +32,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 		};
 	}, [] );
 
-	if ( ! canCreate ) {
+	if ( ! isBlockBasedTheme || ! canCreate ) {
 		return null;
 	}
 
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index c726339d1e0495..4d9c14644d91d9 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -385,7 +385,6 @@ function VisualEditor( {
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
 					'is-iframed': ! disableIframe,
-					'is-scrollable': disableIframe || deviceType !== 'Desktop',
 				}
 			) }
 		>
diff --git a/packages/editor/src/components/visual-editor/style.scss b/packages/editor/src/components/visual-editor/style.scss
index 04ca0215e4fc66..63df28f0f1ba5a 100644
--- a/packages/editor/src/components/visual-editor/style.scss
+++ b/packages/editor/src/components/visual-editor/style.scss
@@ -6,9 +6,6 @@
 	// when the iframe doesn't cover the whole canvas
 	// like the "focused entities".
 	background-color: $gray-300;
-	// Allows the height to fit the parent container and avoids parent scrolling contexts from
-	// having overflow due to popovers of block tools.
-	overflow: hidden;
 
 	// This overrides the iframe background since it's applied again here
 	// It also prevents some style glitches if `editor-visual-editor`
@@ -28,6 +25,12 @@
 		padding: $grid-unit-30 $grid-unit-30 0;
 	}
 
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	&.is-iframed {
+		overflow: hidden;
+	}
+
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
 	// This is duplicated in edit-site.
@@ -41,30 +44,4 @@
 			padding: 6px;
 		}
 	}
-
-	// The cases for this are non-iframed editor canvas or previewing devices. The block canvas is
-	// made the scrolling context.
-	&.is-scrollable .block-editor-block-canvas {
-		overflow: auto;
-
-		// Applicable only when legacy (non-iframed).
-		> .block-editor-writing-flow {
-			display: flow-root;
-			min-height: 100%;
-			box-sizing: border-box; // Ensures that 100% min-height doesn’t create overflow.
-		}
-
-		// Applicable only when iframed. These styles ensure that if the the iframe is
-		// given a fixed height and it’s taller than the viewport then scrolling is
-		// allowed. This is needed for device previews.
-		> .block-editor-iframe__container {
-			display: flex;
-			flex-direction: column;
-
-			> .block-editor-iframe__scale-container {
-				flex: 1 0 fit-content;
-				display: flow-root;
-			}
-		}
-	}
 }
diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js
index f1aa458fdab98c..ad66c356435b41 100644
--- a/packages/editor/src/store/private-actions.js
+++ b/packages/editor/src/store/private-actions.js
@@ -216,6 +216,7 @@ export const saveDirtyEntities =
 								{
 									label: __( 'View site' ),
 									url: homeUrl,
+									openInNewTab: true,
 								},
 							],
 						} );
@@ -405,7 +406,7 @@ export const removeTemplates =
 				}
 				successMessage = isResetting
 					? sprintf(
-							/* translators: The template/part's name. */
+							/* translators: %s: The template/part's name. */
 							__( '"%s" reset.' ),
 							decodeEntities( title )
 					  )
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index c7b705ca18722e..3e7c6573bf92de 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -610,9 +610,14 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 		}
 
 		const postType = getCurrentPostType( state );
+		const postTypeObject = select( coreStore ).getPostType( postType );
 
 		// Currently template autosaving is not supported.
-		if ( postType === 'wp_template' ) {
+		// @todo: Remove hardcode check for template after bumping required WP version to 6.8.
+		if (
+			postType === 'wp_template' ||
+			! postTypeObject?.supports?.autosave
+		) {
 			return false;
 		}
 
@@ -1053,6 +1058,26 @@ export function isPostLocked( state ) {
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { store as editorStore } from '@wordpress/editor';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const isSavingLocked = useSelect(
+ * 		( select ) => select( editorStore ).isPostSavingLocked(),
+ * 		[]
+ * 	);
+ *
+ * 	return isSavingLocked ? (
+ * 		<p>{ __( 'Post saving is locked' ) }</p>
+ * 	) : (
+ * 		<p>{ __( 'Post saving is not locked' ) }</p>
+ * 	);
+ * };
+ * ```
+ *
  * @return {boolean} Is locked.
  */
 export function isPostSavingLocked( state ) {
@@ -1064,6 +1089,26 @@ export function isPostSavingLocked( state ) {
  *
  * @param {Object} state Global application state.
  *
+ * @example
+ * ```jsx
+ * import { __ } from '@wordpress/i18n';
+ * import { store as editorStore } from '@wordpress/editor';
+ * import { useSelect } from '@wordpress/data';
+ *
+ * const ExampleComponent = () => {
+ * 	const isAutoSavingLocked = useSelect(
+ * 		( select ) => select( editorStore ).isPostAutosavingLocked(),
+ * 		[]
+ * 	);
+ *
+ * 	return isAutoSavingLocked ? (
+ * 		<p>{ __( 'Post auto saving is locked' ) }</p>
+ * 	) : (
+ * 		<p>{ __( 'Post auto saving is not locked' ) }</p>
+ * 	);
+ * };
+ * ```
+ *
  * @return {boolean} Is locked.
  */
 export function isPostAutosavingLocked( state ) {
diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js
index 2a36fabcd2ec97..a24afe636d6090 100644
--- a/packages/editor/src/store/test/selectors.js
+++ b/packages/editor/src/store/test/selectors.js
@@ -124,6 +124,9 @@ selectorNames.forEach( ( name ) => {
 					labels: {
 						singular_name: postTypeLabel,
 					},
+					supports: {
+						autosave: state.postType !== 'without-autosave',
+					},
 				};
 			},
 
@@ -1590,6 +1593,33 @@ describe( 'selectors', () => {
 
 			expect( isEditedPostAutosaveable( state ) ).toBe( false );
 		} );
+
+		it( 'should return false if post type does not support autosave', () => {
+			const state = {
+				editor: {
+					present: {
+						blocks: {
+							value: [],
+						},
+						edits: {},
+					},
+				},
+				initialEdits: {},
+				currentPost: {
+					title: 'sassel',
+				},
+				saving: {},
+				getCurrentUser() {},
+				hasFetchedAutosaves() {
+					return true;
+				},
+				getAutosave() {},
+				postAutosavingLock: {},
+				postType: 'without-autosave',
+			};
+
+			expect( isEditedPostAutosaveable( state ) ).toBe( false );
+		} );
 	} );
 
 	describe( 'isEditedPostEmpty', () => {
diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js
index 9e1230b2ea88c5..f0d1f4329540c8 100644
--- a/packages/editor/src/store/utils/notice-builder.js
+++ b/packages/editor/src/store/utils/notice-builder.js
@@ -58,6 +58,7 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
 		actions.push( {
 			label: isDraft ? __( 'View Preview' ) : postType.labels.view_item,
 			url: post.link,
+			openInNewTab: true,
 		} );
 	}
 	return [
diff --git a/packages/editor/src/store/utils/test/notice-builder.js b/packages/editor/src/store/utils/test/notice-builder.js
index d97ec0f9f9483b..dddbd0c18222e5 100644
--- a/packages/editor/src/store/utils/test/notice-builder.js
+++ b/packages/editor/src/store/utils/test/notice-builder.js
@@ -70,7 +70,9 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 				'updated',
 				{
 					...defaultExpectedAction,
-					actions: [ { label: 'view', url: 'some_link' } ],
+					actions: [
+						{ label: 'view', openInNewTab: true, url: 'some_link' },
+					],
 				},
 			],
 		],
diff --git a/packages/editor/src/utils/media-upload/index.js b/packages/editor/src/utils/media-upload/index.js
index 02b2a039330d6d..4fd621149437d3 100644
--- a/packages/editor/src/utils/media-upload/index.js
+++ b/packages/editor/src/utils/media-upload/index.js
@@ -7,6 +7,7 @@ import { v4 as uuid } from 'uuid';
  * WordPress dependencies
  */
 import { select, dispatch } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
 import { uploadMedia } from '@wordpress/media-utils';
 
 /**
@@ -18,7 +19,7 @@ const noop = () => {};
 
 /**
  * Upload a media file when the file upload button is activated.
- * Wrapper around mediaUpload() that injects the current post ID.
+ * Wrapper around uploadMedia() that injects the current post ID.
  *
  * @param {Object}   $0                   Parameters object passed to the function.
  * @param {?Object}  $0.additionalData    Additional data to include in the request.
@@ -40,6 +41,7 @@ export default function mediaUpload( {
 	onSuccess,
 	multiple = true,
 } ) {
+	const { receiveEntityRecords } = dispatch( coreDataStore );
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
 	const {
 		lockPostAutosaving,
@@ -82,6 +84,21 @@ export default function mediaUpload( {
 				clearSaveLock();
 			}
 			onFileChange?.( file );
+
+			// Files are initially received by `onFileChange` as a blob.
+			// After that the function is called a second time with the file as an entity.
+			// For core-data, we only care about receiving/invalidating entities.
+			const entityFiles = file.filter( ( _file ) => _file?.id );
+			if ( entityFiles?.length ) {
+				const invalidateCache = true;
+				receiveEntityRecords(
+					'root',
+					'media',
+					entityFiles,
+					undefined,
+					invalidateCache
+				);
+			}
 		},
 		onSuccess,
 		additionalData: {
diff --git a/packages/editor/src/utils/search-templates.js b/packages/editor/src/utils/search-templates.js
new file mode 100644
index 00000000000000..e67b00a0f1e4b3
--- /dev/null
+++ b/packages/editor/src/utils/search-templates.js
@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
+
+/**
+ * Get the search rank for a given template and a specific search term.
+ *
+ * @param {Object} template    Template to rank
+ * @param {string} searchValue Search term
+ *
+ * @return {number} A template search rank
+ */
+function getTemplateSearchRank( template, searchValue ) {
+	const normalizedSearchValue = normalizeSearchInput( searchValue );
+	const normalizedTitle = normalizeSearchInput( template.title );
+
+	let rank = 0;
+
+	if ( normalizedSearchValue === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
+		rank += 20;
+	} else {
+		const searchTerms = normalizedSearchValue.split( ' ' );
+		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
+			normalizedTitle.includes( searchTerm )
+		);
+
+		// Prefer template with every search word in the title.
+		if ( hasMatchedTerms ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
+
+/**
+ * Filters a template list given a search term.
+ *
+ * @param {Array}  templates   Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered template list.
+ */
+export function searchTemplates( templates = [], searchValue = '' ) {
+	if ( ! searchValue ) {
+		return templates;
+	}
+
+	const rankedTemplates = templates
+		.map( ( template ) => {
+			return [ template, getTemplateSearchRank( template, searchValue ) ];
+		} )
+		.filter( ( [ , rank ] ) => rank > 0 );
+
+	rankedTemplates.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedTemplates.map( ( [ template ] ) => template );
+}
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index b13c6664944c0d..904aa852be5563 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/element/README.md b/packages/element/README.md
index eeed217ab6e90c..d4dd69186bc772 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -270,7 +270,23 @@ _Related_
 
 ### RawHTML
 
-Component used as equivalent of Fragment with unescaped HTML, in cases where it is desirable to render dangerous HTML without needing a wrapper element. To preserve additional props, a `div` wrapper _will_ be created if any props aside from `children` are passed.
+Component used to render unescaped HTML.
+
+Note: The `renderElement` serializer will remove the `div` wrapper unless non-children props are present; typically when preparing a block for saving.
+
+_Usage_
+
+```jsx
+import { RawHTML } from '@wordpress/element';
+
+const Component = () => (
+	<RawHTML>
+		<h3>Hello world</h3>
+	</RawHTML>
+);
+// Edit: <div><h3>Hello world</h3></div>
+// save: <h3>Hello world</h3>
+```
 
 _Parameters_
 
diff --git a/packages/element/package.json b/packages/element/package.json
index 80f2faa94e7eee..8b75beba605d87 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/element/src/raw-html.js b/packages/element/src/raw-html.js
index d94a290e9e0e9f..acd8c1e670cb10 100644
--- a/packages/element/src/raw-html.js
+++ b/packages/element/src/raw-html.js
@@ -6,10 +6,19 @@ import { Children, createElement } from './react';
 /** @typedef {{children: string} & import('react').ComponentPropsWithoutRef<'div'>} RawHTMLProps */
 
 /**
- * Component used as equivalent of Fragment with unescaped HTML, in cases where
- * it is desirable to render dangerous HTML without needing a wrapper element.
- * To preserve additional props, a `div` wrapper _will_ be created if any props
- * aside from `children` are passed.
+ * Component used to render unescaped HTML.
+ *
+ * Note: The `renderElement` serializer will remove the `div` wrapper
+ * unless non-children props are present; typically when preparing a block for saving.
+ *
+ * @example
+ * ```jsx
+ * import { RawHTML } from '@wordpress/element';
+ *
+ * const Component = () => <RawHTML><h3>Hello world</h3></RawHTML>;
+ * // Edit: <div><h3>Hello world</h3></div>
+ * // save: <h3>Hello world</h3>
+ * ```
  *
  * @param {RawHTMLProps} props Children should be a string of HTML or an array
  *                             of strings. Other props will be passed through
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 32e46665e85386..4a3239de8b03f0 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 10.27.0 (2025-07-23)
+
+### Enhancements
+
+-   Add config file for WP-CLI when creating an environment. ([#70661](https://github.com/WordPress/gutenberg/pull/70661)).
+
+## 10.26.0 (2025-06-25)
+
+## 10.25.0 (2025-06-04)
+
+## 10.24.0 (2025-05-22)
+
+## 10.23.0 (2025-05-07)
+
+## 10.22.0 (2025-04-11)
+
 ## 10.21.0 (2025-03-27)
 
 ## 10.20.0 (2025-03-13)
diff --git a/packages/env/lib/config/load-config.js b/packages/env/lib/config/load-config.js
index f8a61d278c8a0a..f23d79afcdbd43 100644
--- a/packages/env/lib/config/load-config.js
+++ b/packages/env/lib/config/load-config.js
@@ -37,7 +37,7 @@ const postProcessConfig = require( './post-process-config' );
  *
  * @param {string} configDirectoryPath The directory we want to load the config from.
  *
- * @return {WPConfig} The config object we've loaded.
+ * @return {Promise<WPConfig>} The config object we've loaded.
  */
 module.exports = async function loadConfig( configDirectoryPath ) {
 	const configFilePath = getConfigFilePath( configDirectoryPath );
diff --git a/packages/env/lib/init-config.js b/packages/env/lib/init-config.js
index 318bcae151b296..946a7800de1fea 100644
--- a/packages/env/lib/init-config.js
+++ b/packages/env/lib/init-config.js
@@ -129,6 +129,11 @@ RUN sed -i 's|deb.debian.org/debian stretch|archive.debian.org/debian stretch|g'
 RUN sed -i 's|security.debian.org/debian-security stretch|archive.debian.org/debian-security stretch|g' /etc/apt/sources.list
 RUN sed -i '/stretch-updates/d' /etc/apt/sources.list
 
+# buster (https://lists.debian.org/debian-devel-announce/2025/06/msg00001.html)
+RUN sed -i 's|deb.debian.org/debian buster|archive.debian.org/debian buster|g' /etc/apt/sources.list
+RUN sed -i 's|security.debian.org/debian-security buster/updates|archive.debian.org/debian-security buster/updates|g' /etc/apt/sources.list
+RUN sed -i '/buster-updates/d' /etc/apt/sources.list
+
 # Create the host's user so that we can match ownership in the container.
 ARG HOST_USERNAME
 ARG HOST_UID
@@ -196,6 +201,7 @@ function installDependencies( service, env, config ) {
 		case 'wordpress': {
 			dockerFileContent += `
 # Make sure we're working with the latest packages.
+RUN apt-get clean
 RUN apt-get -qy update
 
 # Install some basic PHP dependencies.
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index 8c08fb1f20ec78..64bcc2209c0255 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -86,13 +86,25 @@ async function configureWordPress( environment, config, spinner ) {
 		// Ignore error.
 	}
 
+	// Create a project-specific wp-cli configuration, important for the `rewrite` command.
+	// Don't overwrite existing configuration.
+	const cliConfigCommand = `[ -f /var/www/html/wp-cli.yml ] || (
+		exec > /var/www/html/wp-cli.yml
+		echo "apache_modules:"
+		echo "  - mod_rewrite"
+	)`;
+
 	const isMultisite = config.env[ environment ].multisite;
 
 	const installMethod = isMultisite ? 'multisite-install' : 'install';
 	const installCommand = `wp core ${ installMethod } --url="${ config.env[ environment ].config.WP_SITEURL }" --title="${ config.name }" --admin_user=admin --admin_password=password --admin_email=wordpress@example.com --skip-email`;
 
 	// -eo pipefail exits the command as soon as anything fails in bash.
-	const setupCommands = [ 'set -eo pipefail', installCommand ];
+	const setupCommands = [
+		'set -eo pipefail',
+		cliConfigCommand,
+		installCommand,
+	];
 
 	// Bootstrap .htaccess for multisite
 	if ( isMultisite ) {
diff --git a/packages/env/package.json b/packages/env/package.json
index 8021e32c49cc0e..6af342d93d62ec 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.21.0",
+	"version": "10.27.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index de15dd0f3213af..07ecacd5c6c695 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index e1abcec1244cca..fa2775092bc88c 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 97123b48b580e4..294bb42582b629 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+## 22.13.0 (2025-07-23)
+
+### Enhancements
+
+- Added stricter ESLint checks for translator comments.
+- Supports unnamed (%s, %d, %f), positional (%1$s, etc.) and named placeholders.
+- Flags missing and extra/outdated placeholders.
+
+## 22.12.0 (2025-06-25)
+
+## 22.11.0 (2025-06-04)
+
+## 22.10.0 (2025-05-22)
+
+## 22.9.0 (2025-05-07)
+
+## 22.8.0 (2025-04-11)
+
 ## 22.7.0 (2025-03-27)
 
 ## 22.6.0 (2025-03-13)
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 54af69a1c2d87c..9996bab62cd204 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "22.7.0",
+	"version": "22.13.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js b/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
index 59098aa9eac056..c19c57f0cb55a6 100644
--- a/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
+++ b/packages/eslint-plugin/rules/__tests__/i18n-translator-comments.js
@@ -18,84 +18,155 @@ ruleTester.run( 'i18n-translator-comments', rule, {
 	valid: [
 		{
 			code: `
-// translators: %s: Color
-sprintf( __( 'Color: %s' ), color );`,
+		// translators: %s: Color
+		sprintf( __( 'Color: %s' ), color );`,
 		},
 		{
 			code: `
-sprintf(
-	// translators: %s: Address.
-	__( 'Address: %s' ),
-	address
-);`,
+		sprintf(
+			// translators: %s: Address.
+			__( 'Address: %s' ),
+			address
+		);`,
 		},
 		{
 			code: `
-// translators: %s: Color
-i18n.sprintf( i18n.__( 'Color: %s' ), color );`,
+		// translators: %s: Color
+		i18n.sprintf( i18n.__( 'Color: %s' ), color );`,
 		},
 		{
 			code: `
-sprintf(
-	/*
-	 * translators: %s is the name of the city we couldn't locate.
-	 * Replace the examples with cities related to your locale. Test that
-	 * they match the expected location and have upcoming events before
-	 * including them. If no cities related to your locale have events,
-	 * then use cities related to your locale that would be recognizable
-	 * to most users. Use only the city name itself, without any region
-	 * or country. Use the endonym (native locale name) instead of the
-	 * English name if possible.
-	 */
-	__( 'We couldn’t locate %s. Please try another nearby city. For example: Kansas City; Springfield; Portland.' ),
-templateParams.unknownCity
-);`,
+		sprintf(
+			/*
+			 * translators: %s is the name of the city we couldn't locate.
+			 * Replace the examples with cities related to your locale. Test that
+			 * they match the expected location and have upcoming events before
+			 * including them. If no cities related to your locale have events,
+			 * then use cities related to your locale that would be recognizable
+			 * to most users. Use only the city name itself, without any region
+			 * or country. Use the endonym (native locale name) instead of the
+			 * English name if possible.
+			 */
+			__( 'We couldn’t locate %s. Please try another nearby city. For example: Kansas City; Springfield; Portland.' ),
+		templateParams.unknownCity
+		);`,
+		},
+		{
+			code: `
+		// translators: %s: Name
+		sprintf( __( 'Name: %s' ), 'hi' );`,
+		},
+		{
+			code: `// translators: city: City
+sprintf( __( 'City: %(city)s' ),{ city: 'New York' });`,
+		},
+		{
+			code: `
+// translators: 1: Address, 2: City
+sprintf( __( 'Address: %1$s, City: %2$s' ), address, city );`,
+		},
+		{
+			code: `
+// translators: %s: 1 or 2
+sprintf( __( '%s point' ), number );`,
+		},
+		{
+			code: `
+/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+	__( 'Move block left from position %1$s to position %2$s');`,
+		},
+		{
+			code: `
+// translators: %1s: Title of a media work from Openverse; %2s: Work's licence e.g: "CC0 1.0".
+_x( '"%1$s"/ %2$s', 'caption' );
+`,
+		},
+		{
+			code: `
+// translators: %1$s: Title of a media work from Openverse; %2$s: Work's licence e.g: "CC0 1.0".
+_x( '"%1$s"/ %2$s', 'caption' );
+			`,
 		},
 	],
 	invalid: [
 		{
 			code: `
-sprintf( __( 'Color: %s' ), color );`,
+		sprintf( __( 'Color: %s' ), color );`,
 			errors: [ { messageId: 'missing' } ],
 		},
 		{
 			code: `
-sprintf(
-	__( 'Address: %s' ),
-	address
-);`,
+		sprintf(
+			__( 'Address: %s' ),
+			address
+		);`,
 			errors: [ { messageId: 'missing' } ],
 		},
 		{
 			code: `
-// translators: %s: Name
-var name = '';
-sprintf( __( 'Name: %s' ), name );`,
+		// translators: %s: Name
+		var name = '';
+		sprintf( __( 'Name: %s' ), name );`,
 			errors: [ { messageId: 'missing' } ],
 		},
 		{
 			code: `
-// translators: %s: Surname
-console.log(
-	sprintf( __( 'Surname: %s' ), name )
-);`,
+		// translators: %s: Surname
+		console.log(
+			sprintf( __( 'Surname: %s' ), name )
+		);`,
 			errors: [ { messageId: 'missing' } ],
 		},
 		{
 			code: `
-// translators: %s: Preference
-console.log(
-	sprintf(
-		__( 'Preference: %s' ),
-		preference
-	)
-);`,
+		// translators: %s: Preference
+		console.log(
+			sprintf(
+				__( 'Preference: %s' ),
+				preference
+			)
+		);`,
 			errors: [ { messageId: 'missing' } ],
 		},
 		{
 			code: `
-i18n.sprintf( i18n.__( 'Color: %s' ), color );`,
+		i18n.sprintf( i18n.__( 'Color: %s' ), color );`,
 			errors: [ { messageId: 'missing' } ],
 		},
+		{
+			code: `// translators: %d: Address
+		i18n.sprintf( i18n.__( 'Address: %s' ), address );`,
+			errors: [ { messageId: 'missingKeys' } ],
+		},
+		{
+			code: ` // translators: %s: City
+		i18n.sprintf( i18n.__( 'City: %(city)s' ), { city: 'New York' } );`,
+			errors: [
+				{ messageId: 'missingKeys', data: { keys: [ 'city' ] } },
+			],
+		},
+		{
+			code: `// translators: 1: Address
+		i18n.sprintf( i18n.__( 'Address: %1$s, City: %2$s' ), address, city );`,
+			errors: [ { messageId: 'missingKeys', data: { keys: [ '2' ] } } ],
+		},
+		{
+			code: `// translators: %s: City %d: Number
+		i18n.sprintf( i18n.__( 'City: %s' ), city, number );`,
+			errors: [
+				{ messageId: 'extraPlaceholders', data: { keys: [ '%d' ] } },
+			],
+		},
+		{
+			code: `
+// translators: %s: hi, 1: okay, 2: bye
+		i18n.sprintf( i18n.__( '%s point' ), number );`,
+			errors: [
+				{
+					messageId: 'extraPlaceholders',
+					data: { keys: [ '1', '2' ] },
+				},
+			],
+		},
 	],
 } );
diff --git a/packages/eslint-plugin/rules/i18n-translator-comments.js b/packages/eslint-plugin/rules/i18n-translator-comments.js
index 56d563d3fdb72c..10a94d8a6c5d0e 100644
--- a/packages/eslint-plugin/rules/i18n-translator-comments.js
+++ b/packages/eslint-plugin/rules/i18n-translator-comments.js
@@ -8,6 +8,53 @@ const {
 	getTranslateFunctionArgs,
 	getTextContentFromNode,
 } = require( '../utils' );
+const { REGEXP_COMMENT_PLACEHOLDER } = require( '../utils/constants' );
+
+/**
+ * Extracts placeholders from a string.
+ *
+ * @param {string} str - The string to extract placeholders from.
+ * @return {string[]} An array of objects representing the placeholders found in the string.
+ */
+function extractPlaceholders( str ) {
+	const matches = [];
+	let match;
+	REGEXP_SPRINTF_PLACEHOLDER.lastIndex = 0;
+
+	while ( ( match = REGEXP_SPRINTF_PLACEHOLDER.exec( str ) ) !== null ) {
+		const index = match[ 3 ]; // from %1$s
+		const name = match[ 5 ]; // from %(name)s
+		matches.push( index ?? name ?? match[ 0 ] );
+	}
+	return matches;
+}
+
+/**
+ * Extracts translator keys from a comment text.
+ *
+ * @param {string} commentText - The text of the comment to extract keys from.
+ * @return	 {Map<string, boolean>} A set of translator keys found in the comment text.
+ */
+function extractTranslatorKeys( commentText ) {
+	const keys = new Map();
+	let match;
+
+	match = commentText.match( /translators:\s*(.*)/i );
+	if ( ! match ) {
+		return keys;
+	}
+
+	const commentBody = match[ 1 ];
+
+	// Match placeholders in the comment body.
+	while (
+		( match = REGEXP_COMMENT_PLACEHOLDER.exec( commentBody ) ) !== null
+	) {
+		keys.set( match[ 1 ], keys.get( match[ 1 ] ) || match[ 2 ] === ':' );
+	}
+
+	return keys;
+}
 
 module.exports = {
 	meta: {
@@ -15,6 +62,10 @@ module.exports = {
 		messages: {
 			missing:
 				'Translation function with placeholders is missing preceding translator comment',
+			missingKeys:
+				'Translator comment missing description(s) for placeholder(s): {{ keys }}.',
+			extraPlaceholders:
+				'Translator comment has extra placeholder(s): {{ keys }}.',
 		},
 	},
 	create( context ) {
@@ -98,6 +149,82 @@ module.exports = {
 					}
 
 					if ( /translators:\s*\S+/i.test( commentText ) ) {
+						const keysInComment =
+							extractTranslatorKeys( commentText );
+						const placeholdersUsed =
+							candidates.flatMap( extractPlaceholders );
+
+						const keysInCommentArr = [ ...keysInComment.keys() ];
+
+						// Check and filter placeholders that are not present in the comment.
+						const missing = placeholdersUsed.filter( ( key ) => {
+							// Regex to match the key and its potential formats in the array.
+							const regex = new RegExp( `%?${ key }(\\$[sdf])?` );
+							return ! keysInCommentArr.some( ( y ) =>
+								regex.test( y )
+							);
+						} );
+
+						if ( missing.length > 0 ) {
+							context.report( {
+								node,
+								messageId: 'missingKeys',
+								data: {
+									keys: missing.join( ', ' ),
+								},
+							} );
+
+							return;
+						}
+
+						const extra = keysInComment.size
+							? [ ...keysInComment.keys() ].filter( ( key ) => {
+									const normalizedKey = key.replace(
+										/^%/,
+										''
+									);
+
+									// Only allow numeric or printf-style placeholders
+									const isNumbered = /^[0-9]+$/.test(
+										normalizedKey
+									);
+									const isPrintf = [
+										'%s',
+										'%d',
+										'%f',
+									].includes( key );
+
+									// Only add if it's not already in allowedUsed
+									const isValidType =
+										( isNumbered &&
+											keysInComment.get(
+												normalizedKey
+											) ) ||
+										isPrintf;
+									const isUnused =
+										! placeholdersUsed.includes( key ) &&
+										! placeholdersUsed.includes(
+											normalizedKey
+										);
+
+									return isValidType && isUnused;
+							  } )
+							: [];
+
+						// console.log({extra, keysInComment, placeholdersUsed});
+
+						if ( extra.length > 0 ) {
+							context.report( {
+								node,
+								messageId: 'extraPlaceholders',
+								data: {
+									keys: extra.join( ',' ),
+								},
+							} );
+
+							return;
+						}
+
 						return;
 					}
 				}
diff --git a/packages/eslint-plugin/utils/constants.js b/packages/eslint-plugin/utils/constants.js
index 44e881fb867c78..16ae5dab17adcc 100644
--- a/packages/eslint-plugin/utils/constants.js
+++ b/packages/eslint-plugin/utils/constants.js
@@ -55,8 +55,24 @@ const REGEXP_SPRINTF_PLACEHOLDER =
 const REGEXP_SPRINTF_PLACEHOLDER_UNORDERED =
 	/(?:(?<!%)%[+-]?(?:(?:0|'.)?-?[0-9]*(?:\.(?:[ 0]|'.)?[0-9]+)?|(?:[ ])?-?[0-9]+(?:\.(?:[ 0]|'.)?[0-9]+)?)[bcdeEfFgGosuxX])/;
 
+/**
+ * Regular expression matching comment placeholders.
+ *
+ * /(?:^|\s|,)\s*(%[sdf]|%?[a-zA-Z0-9_]+|%[0-9]+\$?[sdf]{0,1})(:)?/g;
+ * 		▲			▲			▲				▲		  ▲
+ * 		│			 │			  │ 				│		  │
+ * 		│			 │			  │					│		  └─ Match colon at the end of the placeholder ( optional )
+ * 		│			 │			  │					└─ Match a Index placeholder but allow variations (e.g. %1, %1s, %1$d)
+ * 		│			 │			  └─ Match a placeholder with index or named argument (e.g. %1, %name, %2)
+ * 		│			 └─ Match Unamed placeholder (e.g. %s, %d)
+ * 		└─ Match the start of string, whitespace, or comma
+ */
+const REGEXP_COMMENT_PLACEHOLDER =
+	/(?:^|\s|,)\s*(%[sdf]|%?[a-zA-Z0-9_]+|%[0-9]+\$?[sdf]{0,1})(:)?/g;
+
 module.exports = {
 	TRANSLATION_FUNCTIONS,
 	REGEXP_SPRINTF_PLACEHOLDER,
 	REGEXP_SPRINTF_PLACEHOLDER_UNORDERED,
+	REGEXP_COMMENT_PLACEHOLDER,
 };
diff --git a/packages/fields/CHANGELOG.md b/packages/fields/CHANGELOG.md
index aca2459c3d3e27..8a57e7b8bf777c 100644
--- a/packages/fields/CHANGELOG.md
+++ b/packages/fields/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 0.19.0 (2025-07-23)
+
+## 0.18.0 (2025-06-25)
+
+## 0.17.0 (2025-06-04)
+
+## 0.16.0 (2025-05-22)
+
+## 0.15.0 (2025-05-07)
+
+## 0.14.0 (2025-04-11)
+
 ## 0.13.0 (2025-03-27)
 
 ## 0.12.0 (2025-03-13)
diff --git a/packages/fields/package.json b/packages/fields/package.json
index 30109202bf2563..3e3fe9e0ae57bd 100644
--- a/packages/fields/package.json
+++ b/packages/fields/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/fields",
-	"version": "0.13.0",
+	"version": "0.19.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/fields/src/actions/delete-post.tsx b/packages/fields/src/actions/delete-post.tsx
index 4a94796b6f0bdf..2cac40c17e0955 100644
--- a/packages/fields/src/actions/delete-post.tsx
+++ b/packages/fields/src/actions/delete-post.tsx
@@ -47,6 +47,7 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ isBusy, setIsBusy ] = useState( false );
 		const isResetting = items.every(
@@ -93,7 +94,7 @@ const deletePostAction: Action< Template | TemplatePart | Pattern > = {
 										getMessage: ( item ) => {
 											return isResetting
 												? sprintf(
-														/* translators: The template/part's name. */
+														/* translators: %s: The template/part's name. */
 														__( '"%s" reset.' ),
 														decodeEntities(
 															getItemTitle( item )
diff --git a/packages/fields/src/actions/duplicate-pattern.tsx b/packages/fields/src/actions/duplicate-pattern.tsx
index 274f57b0fe19dc..2df348a1cef3c0 100644
--- a/packages/fields/src/actions/duplicate-pattern.tsx
+++ b/packages/fields/src/actions/duplicate-pattern.tsx
@@ -21,6 +21,7 @@ const duplicatePattern: Action< Pattern > = {
 	label: _x( 'Duplicate', 'action label' ),
 	isEligible: ( item ) => item.type !== 'wp_template_part',
 	modalHeader: _x( 'Duplicate pattern', 'action label' ),
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
 		const duplicatedProps = useDuplicatePatternProps( {
diff --git a/packages/fields/src/actions/duplicate-post.tsx b/packages/fields/src/actions/duplicate-post.tsx
index 37cb8af049cc8c..012a4f5ed50661 100644
--- a/packages/fields/src/actions/duplicate-post.tsx
+++ b/packages/fields/src/actions/duplicate-post.tsx
@@ -33,6 +33,7 @@ const duplicatePost: Action< BasePost > = {
 	isEligible( { status } ) {
 		return status !== 'trash';
 	},
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item, setItem ] = useState< BasePost >( {
 			...items[ 0 ],
diff --git a/packages/fields/src/actions/duplicate-template-part.tsx b/packages/fields/src/actions/duplicate-template-part.tsx
index 795e40638a47a7..0524f5308da78c 100644
--- a/packages/fields/src/actions/duplicate-template-part.tsx
+++ b/packages/fields/src/actions/duplicate-template-part.tsx
@@ -24,6 +24,7 @@ const duplicateTemplatePart: Action< TemplatePart > = {
 	label: _x( 'Duplicate', 'action label' ),
 	isEligible: ( item ) => item.type === 'wp_template_part',
 	modalHeader: _x( 'Duplicate template part', 'action label' ),
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
 		const blocks = useMemo( () => {
diff --git a/packages/fields/src/actions/permanently-delete-post.tsx b/packages/fields/src/actions/permanently-delete-post.tsx
index 136fcdda9a3e68..ad262dafbbd75c 100644
--- a/packages/fields/src/actions/permanently-delete-post.tsx
+++ b/packages/fields/src/actions/permanently-delete-post.tsx
@@ -35,6 +35,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 		return status === 'trash' && permissions?.delete;
 	},
 	hideModalHeader: true,
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ isBusy, setIsBusy ] = useState( false );
 		const { createSuccessNotice, createErrorNotice } =
@@ -97,7 +98,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 								let successMessage;
 								if ( promiseResult.length === 1 ) {
 									successMessage = sprintf(
-										/* translators: The posts's title. */
+										/* translators: %s: The posts's title. */
 										__( '"%s" permanently deleted.' ),
 										getItemTitle( items[ 0 ] )
 									);
@@ -129,7 +130,7 @@ const permanentlyDeletePost: Action< PostWithPermissions > = {
 									}
 									// If we were trying to permanently delete multiple posts
 								} else {
-									const errorMessages = new Set();
+									const errorMessages = new Set< string >();
 									const failedPromises = promiseResult.filter(
 										( { status } ) => status === 'rejected'
 									);
diff --git a/packages/fields/src/actions/rename-post.tsx b/packages/fields/src/actions/rename-post.tsx
index be0e69db26cd80..5c79e07da0c8a5 100644
--- a/packages/fields/src/actions/rename-post.tsx
+++ b/packages/fields/src/actions/rename-post.tsx
@@ -35,6 +35,7 @@ const { PATTERN_TYPES } = unlock( patternsPrivateApis );
 const renamePost: Action< PostWithPermissions > = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
+	modalFocusOnMount: 'firstContentElement',
 	isEligible( post ) {
 		if ( post.status === 'trash' ) {
 			return false;
diff --git a/packages/fields/src/actions/reorder-page.tsx b/packages/fields/src/actions/reorder-page.tsx
index cffc4b924c0a5d..ac3a34b59f31b2 100644
--- a/packages/fields/src/actions/reorder-page.tsx
+++ b/packages/fields/src/actions/reorder-page.tsx
@@ -119,6 +119,7 @@ const reorderPage: Action< BasePost > = {
 	isEligible( { status } ) {
 		return status !== 'trash';
 	},
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ReorderModal,
 };
 
diff --git a/packages/fields/src/actions/reset-post.tsx b/packages/fields/src/actions/reset-post.tsx
index d8ac5730d6a166..3a020aff024265 100644
--- a/packages/fields/src/actions/reset-post.tsx
+++ b/packages/fields/src/actions/reset-post.tsx
@@ -189,6 +189,7 @@ const resetPostAction: Action< Template | TemplatePart > = {
 	icon: backup,
 	supportsBulk: true,
 	hideModalHeader: true,
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ isBusy, setIsBusy ] = useState( false );
 
@@ -210,12 +211,12 @@ const resetPostAction: Action< Template | TemplatePart > = {
 				createSuccessNotice(
 					items.length > 1
 						? sprintf(
-								/* translators: The number of items. */
-								__( '%s items reset.' ),
+								/* translators: %d: The number of items. */
+								__( '%d items reset.' ),
 								items.length
 						  )
 						: sprintf(
-								/* translators: The template/part's name. */
+								/* translators: %s: The template/part's name. */
 								__( '"%s" reset.' ),
 								getItemTitle( items[ 0 ] )
 						  ),
diff --git a/packages/fields/src/actions/restore-post.tsx b/packages/fields/src/actions/restore-post.tsx
index 6ea493a619ae80..e990bcb1b8b1dd 100644
--- a/packages/fields/src/actions/restore-post.tsx
+++ b/packages/fields/src/actions/restore-post.tsx
@@ -51,19 +51,19 @@ const restorePost: Action< PostWithPermissions > = {
 			let successMessage;
 			if ( posts.length === 1 ) {
 				successMessage = sprintf(
-					/* translators: The number of posts. */
+					/* translators: %s: The number of posts. */
 					__( '"%s" has been restored.' ),
 					getItemTitle( posts[ 0 ] )
 				);
 			} else if ( posts[ 0 ].type === 'page' ) {
 				successMessage = sprintf(
-					/* translators: The number of posts. */
+					/* translators: %d: The number of posts. */
 					__( '%d pages have been restored.' ),
 					posts.length
 				);
 			} else {
 				successMessage = sprintf(
-					/* translators: The number of posts. */
+					/* translators: %d: The number of posts. */
 					__( '%d posts have been restored.' ),
 					posts.length
 				);
@@ -92,7 +92,7 @@ const restorePost: Action< PostWithPermissions > = {
 				}
 				// If we were trying to move multiple posts to the trash
 			} else {
-				const errorMessages = new Set();
+				const errorMessages = new Set< string >();
 				const failedPromises = promiseResult.filter(
 					( { status } ) => status === 'rejected'
 				);
diff --git a/packages/fields/src/actions/trash-post.tsx b/packages/fields/src/actions/trash-post.tsx
index c0227996b5e866..d110d73670314d 100644
--- a/packages/fields/src/actions/trash-post.tsx
+++ b/packages/fields/src/actions/trash-post.tsx
@@ -39,6 +39,7 @@ const trashPost: Action< PostWithPermissions > = {
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
+	modalFocusOnMount: 'firstContentElement',
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ isBusy, setIsBusy ] = useState( false );
 		const { createSuccessNotice, createErrorNotice } =
@@ -100,16 +101,16 @@ const trashPost: Action< PostWithPermissions > = {
 								let successMessage;
 								if ( promiseResult.length === 1 ) {
 									successMessage = sprintf(
-										/* translators: The item's title. */
+										/* translators: %s: The item's title. */
 										__( '"%s" moved to the trash.' ),
 										getItemTitle( items[ 0 ] )
 									);
 								} else {
 									successMessage = sprintf(
-										/* translators: The number of items. */
+										/* translators: %d: The number of items. */
 										_n(
-											'%s item moved to the trash.',
-											'%s items moved to the trash.',
+											'%d item moved to the trash.',
+											'%d items moved to the trash.',
 											items.length
 										),
 										items.length
@@ -137,7 +138,7 @@ const trashPost: Action< PostWithPermissions > = {
 									}
 									// If we were trying to delete multiple items.
 								} else {
-									const errorMessages = new Set();
+									const errorMessages = new Set< string >();
 									const failedPromises = promiseResult.filter(
 										( { status } ) => status === 'rejected'
 									);
diff --git a/packages/fields/src/actions/view-post-revisions.tsx b/packages/fields/src/actions/view-post-revisions.tsx
index 40eecde5771311..6bf8661ee2c6de 100644
--- a/packages/fields/src/actions/view-post-revisions.tsx
+++ b/packages/fields/src/actions/view-post-revisions.tsx
@@ -17,8 +17,8 @@ const viewPostRevisions: Action< Post > = {
 		const revisionsCount =
 			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return sprintf(
-			/* translators: %s: number of revisions. */
-			__( 'View revisions (%s)' ),
+			/* translators: %d: number of revisions. */
+			__( 'View revisions (%d)' ),
 			revisionsCount
 		);
 	},
diff --git a/packages/fields/src/fields/author/index.tsx b/packages/fields/src/fields/author/index.tsx
index 22f9409e051556..abc7362c83a0b1 100644
--- a/packages/fields/src/fields/author/index.tsx
+++ b/packages/fields/src/fields/author/index.tsx
@@ -24,6 +24,10 @@ const authorField: Field< BasePostWithEmbeddedAuthor > = {
 			? nameA.localeCompare( nameB )
 			: nameB.localeCompare( nameA );
 	},
+
+	filterBy: {
+		operators: [ 'isAny', 'isNone' ],
+	},
 };
 
 /**
diff --git a/packages/fields/src/fields/comment-status/index.tsx b/packages/fields/src/fields/comment-status/index.tsx
index 7f373bc14e2108..c045e91aaf49ef 100644
--- a/packages/fields/src/fields/comment-status/index.tsx
+++ b/packages/fields/src/fields/comment-status/index.tsx
@@ -15,9 +15,7 @@ const commentStatusField: Field< BasePost > = {
 	type: 'text',
 	Edit: 'radio',
 	enableSorting: false,
-	filterBy: {
-		operators: [],
-	},
+	filterBy: false,
 	elements: [
 		{
 			value: 'open',
diff --git a/packages/fields/src/fields/date/index.tsx b/packages/fields/src/fields/date/index.tsx
index 49bd0807de6691..cf21d40b4d65d9 100644
--- a/packages/fields/src/fields/date/index.tsx
+++ b/packages/fields/src/fields/date/index.tsx
@@ -15,6 +15,7 @@ const dateField: Field< BasePost > = {
 	type: 'datetime',
 	label: __( 'Date' ),
 	render: DateView,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts
index 7e17fb482e01c9..8f07eb90a8c7c9 100644
--- a/packages/fields/src/fields/featured-image/index.ts
+++ b/packages/fields/src/fields/featured-image/index.ts
@@ -18,6 +18,7 @@ const featuredImageField: Field< BasePost > = {
 	Edit: FeaturedImageEdit,
 	render: FeaturedImageView,
 	enableSorting: false,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/featured-image/style.scss b/packages/fields/src/fields/featured-image/style.scss
index 918f69172f3023..8275044034e6b0 100644
--- a/packages/fields/src/fields/featured-image/style.scss
+++ b/packages/fields/src/fields/featured-image/style.scss
@@ -82,11 +82,27 @@ fieldset.fields-controls__featured-image {
 	}
 }
 
-.dataviews-view-table__cell-content-wrapper {
+.dataviews-view-grid__media,
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media,
+.dataviews-view-list__media-wrapper {
+	.fields-controls__featured-image-image,
+	.fields-controls__featured-image-placeholder {
+		width: 100%;
+		height: 100%;
+		display: block;
+		border-radius: $radius-medium;
+	}
+
+	.fields-controls__featured-image-placeholder {
+		box-shadow: none;
+		background: $gray-100;
+	}
+}
+
+.dataviews-view-table__cell-content-wrapper.dataviews-column-primary__media {
 	.fields-controls__featured-image-image,
 	.fields-controls__featured-image-placeholder {
 		width: 32px;
 		height: 32px;
-		display: block;
 	}
 }
diff --git a/packages/fields/src/fields/order/index.ts b/packages/fields/src/fields/order/index.ts
index 121fcb9d0f3bdc..acb684a2d04fd4 100644
--- a/packages/fields/src/fields/order/index.ts
+++ b/packages/fields/src/fields/order/index.ts
@@ -14,6 +14,7 @@ const orderField: Field< BasePost > = {
 	type: 'integer',
 	label: __( 'Order' ),
 	description: __( 'Determines the order of pages.' ),
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/page-title/index.ts b/packages/fields/src/fields/page-title/index.ts
index 8bbf051f2b5839..2aa7ee50cd0cbe 100644
--- a/packages/fields/src/fields/page-title/index.ts
+++ b/packages/fields/src/fields/page-title/index.ts
@@ -20,6 +20,7 @@ const pageTitleField: Field< BasePost > = {
 	render: PageTitleView,
 	enableHiding: false,
 	enableGlobalSearch: true,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/parent/index.ts b/packages/fields/src/fields/parent/index.ts
index f974608710bf7e..0f2040d9cd5354 100644
--- a/packages/fields/src/fields/parent/index.ts
+++ b/packages/fields/src/fields/parent/index.ts
@@ -18,6 +18,7 @@ const parentField: Field< BasePost > = {
 	Edit: ParentEdit,
 	render: ParentView,
 	enableSorting: true,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx
index 3d45641b0efd0e..b335a04b522768 100644
--- a/packages/fields/src/fields/password/index.tsx
+++ b/packages/fields/src/fields/password/index.tsx
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -12,10 +13,12 @@ import PasswordEdit from './edit';
 const passwordField: Field< BasePost > = {
 	id: 'password',
 	type: 'text',
+	label: __( 'Password' ),
 	Edit: PasswordEdit,
 	enableSorting: false,
 	enableHiding: false,
 	isVisible: ( item ) => item.status !== 'private',
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/pattern-title/index.ts b/packages/fields/src/fields/pattern-title/index.ts
index a3e54eea6f28d1..140493ba08536a 100644
--- a/packages/fields/src/fields/pattern-title/index.ts
+++ b/packages/fields/src/fields/pattern-title/index.ts
@@ -20,6 +20,7 @@ const patternTitleField: Field< Pattern > = {
 	render: PatternTitleView,
 	enableHiding: false,
 	enableGlobalSearch: true,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/slug/index.ts b/packages/fields/src/fields/slug/index.ts
index 7311b1d10a66f6..1dee7780cb4f24 100644
--- a/packages/fields/src/fields/slug/index.ts
+++ b/packages/fields/src/fields/slug/index.ts
@@ -17,6 +17,7 @@ const slugField: Field< BasePost > = {
 	label: __( 'Slug' ),
 	Edit: SlugEdit,
 	render: SlugView,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts
index e0d83d6ffda8f6..e9d1ba3ff6523c 100644
--- a/packages/fields/src/fields/template-title/index.ts
+++ b/packages/fields/src/fields/template-title/index.ts
@@ -20,6 +20,7 @@ const templateTitleField: Field< Template > = {
 	render: TitleView,
 	enableHiding: false,
 	enableGlobalSearch: true,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/template/index.ts b/packages/fields/src/fields/template/index.ts
index c419adedb537dd..dd4cbb28f94382 100644
--- a/packages/fields/src/fields/template/index.ts
+++ b/packages/fields/src/fields/template/index.ts
@@ -16,6 +16,7 @@ const templateField: Field< BasePost > = {
 	label: __( 'Template' ),
 	Edit: TemplateEdit,
 	enableSorting: false,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts
index b4a2399526fdd9..a4479c7569bc74 100644
--- a/packages/fields/src/fields/title/index.ts
+++ b/packages/fields/src/fields/title/index.ts
@@ -20,6 +20,7 @@ const titleField: Field< CommonPost > = {
 	render: TitleView,
 	enableHiding: false,
 	enableGlobalSearch: true,
+	filterBy: false,
 };
 
 /**
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index 2a51051180a58e..9fe4f9460e6991 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 99a409afae682e..74cb7ef33754d2 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index d1c16308480dd7..6e226b764d4c64 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -26,6 +26,23 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const name = 'core/image';
 const title = __( 'Inline image' );
 
+/**
+ * Extracts the image ID from the className attribute.
+ *
+ * @param {Object} activeObjectAttributes The attributes of the active object.
+ * @return {number|undefined} The extracted image ID or undefined if not found.
+ */
+function getCurrentImageId( activeObjectAttributes ) {
+	if ( ! activeObjectAttributes?.className ) {
+		return undefined;
+	}
+
+	const [ , id ] =
+		activeObjectAttributes.className.match( /wp-image-(\d+)/ ) ?? [];
+
+	return id ? parseInt( id, 10 ) : undefined;
+}
+
 export const image = {
 	name,
 	title,
@@ -149,6 +166,7 @@ function Edit( {
 		<MediaUploadCheck>
 			<MediaUpload
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				value={ getCurrentImageId( activeObjectAttributes ) }
 				onSelect={ ( { id, url, alt, width: imgWidth } ) => {
 					onChange(
 						insertObject( value, {
@@ -176,7 +194,7 @@ function Edit( {
 								<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
 							</SVG>
 						}
-						title={ title }
+						title={ isObjectActive ? __( 'Replace image' ) : title }
 						onClick={ open }
 						isActive={ isObjectActive }
 					/>
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index 26f37dc67f7944..b0e30b59bd8971 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a57b57907e3ba5..62af7e4137ea4f 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/src/createAddHook.js b/packages/hooks/src/createAddHook.ts
similarity index 70%
rename from packages/hooks/src/createAddHook.js
rename to packages/hooks/src/createAddHook.ts
index 1fcfcfab1a7d21..acc6ad555058c7 100644
--- a/packages/hooks/src/createAddHook.js
+++ b/packages/hooks/src/createAddHook.ts
@@ -1,29 +1,43 @@
 /**
  * Internal dependencies
  */
-import validateNamespace from './validateNamespace.js';
-import validateHookName from './validateHookName.js';
+import validateNamespace from './validateNamespace';
+import validateHookName from './validateHookName';
+import type { Callback, Hooks, StoreKey } from '.';
+import type { Handler, HookInfo } from './types';
 
 /**
- * @callback AddHook
  *
  * Adds the hook to the appropriate hooks container.
- *
- * @param {string}               hookName      Name of hook to add
- * @param {string}               namespace     The unique namespace identifying the callback in the form `vendor/plugin/function`.
- * @param {import('.').Callback} callback      Function to call when the hook is run
- * @param {number}               [priority=10] Priority of this hook
  */
+export type AddHook = (
+	/**
+	 * Name of hook to add
+	 */
+	hookName: string,
+	/**
+	 * The unique namespace identifying the callback in the form.
+	 */
+	namespace: string,
+	/**
+	 * Function to call when the hook is run.
+	 */
+	callback: Callback,
+	/**
+	 * Priority of this hook
+	 */
+	priority?: number
+) => void;
 
 /**
  * Returns a function which, when invoked, will add a hook.
  *
- * @param {import('.').Hooks}    hooks    Hooks instance.
- * @param {import('.').StoreKey} storeKey
+ * @param hooks    Hooks instance.
+ * @param storeKey
  *
- * @return {AddHook} Function that adds a new hook.
+ * @return  Function that adds a new hook.
  */
-function createAddHook( hooks, storeKey ) {
+function createAddHook( hooks: Hooks, storeKey: StoreKey ): AddHook {
 	return function addHook( hookName, namespace, callback, priority = 10 ) {
 		const hooksStore = hooks[ storeKey ];
 
@@ -50,14 +64,13 @@ function createAddHook( hooks, storeKey ) {
 			return;
 		}
 
-		const handler = { callback, priority, namespace };
+		const handler: Handler = { callback, priority, namespace };
 
 		if ( hooksStore[ hookName ] ) {
 			// Find the correct insert index of the new hook.
 			const handlers = hooksStore[ hookName ].handlers;
 
-			/** @type {number} */
-			let i;
+			let i: number;
 			for ( i = handlers.length; i > 0; i-- ) {
 				if ( priority >= handlers[ i - 1 ].priority ) {
 					break;
@@ -76,7 +89,7 @@ function createAddHook( hooks, storeKey ) {
 			// we're adding would come after the current callback, there's no
 			// problem; otherwise we need to increase the execution index of
 			// any other runs by 1 to account for the added element.
-			hooksStore.__current.forEach( ( hookInfo ) => {
+			hooksStore.__current.forEach( ( hookInfo: HookInfo ) => {
 				if (
 					hookInfo.name === hookName &&
 					hookInfo.currentIndex >= i
diff --git a/packages/hooks/src/createCurrentHook.js b/packages/hooks/src/createCurrentHook.ts
similarity index 57%
rename from packages/hooks/src/createCurrentHook.js
rename to packages/hooks/src/createCurrentHook.ts
index 3ada0322496004..60cfffc99fd609 100644
--- a/packages/hooks/src/createCurrentHook.js
+++ b/packages/hooks/src/createCurrentHook.ts
@@ -1,14 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import type { Hooks, StoreKey } from './types';
+
 /**
  * Returns a function which, when invoked, will return the name of the
  * currently running hook, or `null` if no hook of the given type is currently
  * running.
  *
- * @param {import('.').Hooks}    hooks    Hooks instance.
- * @param {import('.').StoreKey} storeKey
+ * @param hooks    Hooks instance.
+ * @param storeKey
  *
- * @return {() => string | null} Function that returns the current hook name or null.
+ * @return Function that returns the current hook name or null.
  */
-function createCurrentHook( hooks, storeKey ) {
+function createCurrentHook(
+	hooks: Hooks,
+	storeKey: StoreKey
+): () => string | null {
 	return function currentHook() {
 		const hooksStore = hooks[ storeKey ];
 		const currentArray = Array.from( hooksStore.__current );
diff --git a/packages/hooks/src/createDidHook.js b/packages/hooks/src/createDidHook.ts
similarity index 55%
rename from packages/hooks/src/createDidHook.js
rename to packages/hooks/src/createDidHook.ts
index 882ced1760c131..e8ef6f5aed77d5 100644
--- a/packages/hooks/src/createDidHook.js
+++ b/packages/hooks/src/createDidHook.ts
@@ -1,28 +1,31 @@
 /**
  * Internal dependencies
  */
-import validateHookName from './validateHookName.js';
+import validateHookName from './validateHookName';
+import type { Hooks, StoreKey } from './types';
 
 /**
- * @callback DidHook
  *
  * Returns the number of times an action has been fired.
  *
- * @param {string} hookName The hook name to check.
- *
- * @return {number | undefined} The number of times the hook has run.
  */
+export type DidHook = (
+	/**
+	 * The hook name to check.
+	 */
+	hookName: string
+) => number | undefined;
 
 /**
  * Returns a function which, when invoked, will return the number of times a
  * hook has been called.
  *
- * @param {import('.').Hooks}    hooks    Hooks instance.
- * @param {import('.').StoreKey} storeKey
+ * @param hooks    Hooks instance.
+ * @param storeKey
  *
- * @return {DidHook} Function that returns a hook's call count.
+ * @return  Function that returns a hook's call count.
  */
-function createDidHook( hooks, storeKey ) {
+function createDidHook( hooks: Hooks, storeKey: StoreKey ): DidHook {
 	return function didHook( hookName ) {
 		const hooksStore = hooks[ storeKey ];
 
diff --git a/packages/hooks/src/createDoingHook.js b/packages/hooks/src/createDoingHook.ts
similarity index 58%
rename from packages/hooks/src/createDoingHook.js
rename to packages/hooks/src/createDoingHook.ts
index 9fccf38171f332..85fbf442d63490 100644
--- a/packages/hooks/src/createDoingHook.js
+++ b/packages/hooks/src/createDoingHook.ts
@@ -1,24 +1,30 @@
 /**
- * @callback DoingHook
+ * Internal dependencies
+ */
+import type { Hooks, StoreKey } from './types';
+
+/**
  * Returns whether a hook is currently being executed.
  *
- * @param {string} [hookName] The name of the hook to check for.  If
- *                            omitted, will check for any hook being executed.
- *
- * @return {boolean} Whether the hook is being executed.
  */
+export type DoingHook = (
+	/**
+	 * The name of the hook to check for.
+	 * If omitted, will check for any hook being executed.
+	 */ hookName?: string
+) => boolean;
 
 /**
  * Returns a function which, when invoked, will return whether a hook is
  * currently being executed.
  *
- * @param {import('.').Hooks}    hooks    Hooks instance.
- * @param {import('.').StoreKey} storeKey
+ * @param hooks    Hooks instance.
+ * @param storeKey
  *
- * @return {DoingHook} Function that returns whether a hook is currently
+ * @return Function that returns whether a hook is currently
  *                     being executed.
  */
-function createDoingHook( hooks, storeKey ) {
+function createDoingHook( hooks: Hooks, storeKey: StoreKey ): DoingHook {
 	return function doingHook( hookName ) {
 		const hooksStore = hooks[ storeKey ];
 
diff --git a/packages/hooks/src/createHasHook.js b/packages/hooks/src/createHasHook.ts
similarity index 55%
rename from packages/hooks/src/createHasHook.js
rename to packages/hooks/src/createHasHook.ts
index 5ed82127f2cc77..73a217fcbe7ff5 100644
--- a/packages/hooks/src/createHasHook.js
+++ b/packages/hooks/src/createHasHook.ts
@@ -1,25 +1,33 @@
 /**
- * @callback HasHook
+ * Internal dependencies
+ */
+import type { Hooks, StoreKey } from './types';
+/**
  *
  * Returns whether any handlers are attached for the given hookName and optional namespace.
- *
- * @param {string} hookName    The name of the hook to check for.
- * @param {string} [namespace] Optional. The unique namespace identifying the callback
- *                             in the form `vendor/plugin/function`.
- *
- * @return {boolean} Whether there are handlers that are attached to the given hook.
  */
+export type HasHook = (
+	/**
+	 * The name of the hook to check for.
+	 */
+	hookname: string,
+	/**
+	 * The unique namespace identifying the callback in the form `vendor/plugin/function`.
+	 */
+	namespace?: string
+) => boolean;
+
 /**
  * Returns a function which, when invoked, will return whether any handlers are
  * attached to a particular hook.
  *
- * @param {import('.').Hooks}    hooks    Hooks instance.
- * @param {import('.').StoreKey} storeKey
+ * @param hooks    Hooks instance.
+ * @param storeKey
  *
- * @return {HasHook} Function that returns whether any handlers are
+ * @return  Function that returns whether any handlers are
  *                   attached to a particular hook and optional namespace.
  */
-function createHasHook( hooks, storeKey ) {
+function createHasHook( hooks: Hooks, storeKey: StoreKey ): HasHook {
 	return function hasHook( hookName, namespace ) {
 		const hooksStore = hooks[ storeKey ];
 
diff --git a/packages/hooks/src/createHooks.js b/packages/hooks/src/createHooks.ts
similarity index 61%
rename from packages/hooks/src/createHooks.js
rename to packages/hooks/src/createHooks.ts
index 1f9b1a8206b020..e114cc3849bf4d 100644
--- a/packages/hooks/src/createHooks.js
+++ b/packages/hooks/src/createHooks.ts
@@ -8,6 +8,7 @@ import createRunHook from './createRunHook';
 import createCurrentHook from './createCurrentHook';
 import createDoingHook from './createDoingHook';
 import createDidHook from './createDidHook';
+import type { Store } from './types';
 
 /**
  * Internal class for constructing hooks. Use `createHooks()` function
@@ -17,12 +18,32 @@ import createDidHook from './createDidHook';
  * @private
  */
 export class _Hooks {
+	public actions: Store;
+	public filters: Store;
+
+	public addAction: ReturnType< typeof createAddHook >;
+	public addFilter: ReturnType< typeof createAddHook >;
+	public removeAction: ReturnType< typeof createRemoveHook >;
+	public removeFilter: ReturnType< typeof createRemoveHook >;
+	public hasAction: ReturnType< typeof createHasHook >;
+	public hasFilter: ReturnType< typeof createHasHook >;
+	public removeAllActions: ReturnType< typeof createRemoveHook >;
+	public removeAllFilters: ReturnType< typeof createRemoveHook >;
+	public doAction: ReturnType< typeof createRunHook >;
+	public doActionAsync: ReturnType< typeof createRunHook >;
+	public applyFilters: ReturnType< typeof createRunHook >;
+	public applyFiltersAsync: ReturnType< typeof createRunHook >;
+	public currentAction: ReturnType< typeof createCurrentHook >;
+	public currentFilter: ReturnType< typeof createCurrentHook >;
+	public doingAction: ReturnType< typeof createDoingHook >;
+	public doingFilter: ReturnType< typeof createDoingHook >;
+	public didAction: ReturnType< typeof createDidHook >;
+	public didFilter: ReturnType< typeof createDidHook >;
+
 	constructor() {
-		/** @type {import('.').Store} actions */
 		this.actions = Object.create( null );
 		this.actions.__current = new Set();
 
-		/** @type {import('.').Store} filters */
 		this.filters = Object.create( null );
 		this.filters.__current = new Set();
 
@@ -47,14 +68,14 @@ export class _Hooks {
 	}
 }
 
-/** @typedef {_Hooks} Hooks */
+export type Hooks = _Hooks;
 
 /**
  * Returns an instance of the hooks object.
  *
- * @return {Hooks} A Hooks instance.
+ * @return A Hooks instance.
  */
-function createHooks() {
+function createHooks(): Hooks {
 	return new _Hooks();
 }
 
diff --git a/packages/hooks/src/createRemoveHook.js b/packages/hooks/src/createRemoveHook.ts
similarity index 65%
rename from packages/hooks/src/createRemoveHook.js
rename to packages/hooks/src/createRemoveHook.ts
index 2719d83074d65c..55b4b9dbcf8ce6 100644
--- a/packages/hooks/src/createRemoveHook.js
+++ b/packages/hooks/src/createRemoveHook.ts
@@ -1,34 +1,42 @@
 /**
  * Internal dependencies
  */
-import validateNamespace from './validateNamespace.js';
-import validateHookName from './validateHookName.js';
+import validateNamespace from './validateNamespace';
+import validateHookName from './validateHookName';
+import type { Hooks, StoreKey } from './types';
 
 /**
- * @callback RemoveHook
  * Removes the specified callback (or all callbacks) from the hook with a given hookName
  * and namespace.
- *
- * @param {string} hookName  The name of the hook to modify.
- * @param {string} namespace The unique namespace identifying the callback in the
- *                           form `vendor/plugin/function`.
- *
- * @return {number | undefined} The number of callbacks removed.
  */
+export type RemoveHook = (
+	/**
+	 * The name of the hook to modify.
+	 */
+	hookName: string,
+	/**
+	 * The unique namespace identifying the callback in the form `vendor/plugin/function`.
+	 */
+	namespace: string
+) => number | undefined;
 
 /**
  * Returns a function which, when invoked, will remove a specified hook or all
  * hooks by the given name.
  *
- * @param {import('.').Hooks}    hooks             Hooks instance.
- * @param {import('.').StoreKey} storeKey
- * @param {boolean}              [removeAll=false] Whether to remove all callbacks for a hookName,
- *                                                 without regard to namespace. Used to create
- *                                                 `removeAll*` functions.
+ * @param hooks             Hooks instance.
+ * @param storeKey
+ * @param [removeAll=false] Whether to remove all callbacks for a hookName,
+ *                          without regard to namespace. Used to create
+ *                          `removeAll*` functions.
  *
- * @return {RemoveHook} Function that removes hooks.
+ * @return Function that removes hooks.
  */
-function createRemoveHook( hooks, storeKey, removeAll = false ) {
+function createRemoveHook(
+	hooks: Hooks,
+	storeKey: StoreKey,
+	removeAll: boolean = false
+): RemoveHook {
 	return function removeHook( hookName, namespace ) {
 		const hooksStore = hooks[ storeKey ];
 
diff --git a/packages/hooks/src/createRunHook.js b/packages/hooks/src/createRunHook.ts
similarity index 78%
rename from packages/hooks/src/createRunHook.js
rename to packages/hooks/src/createRunHook.ts
index f2a56dbdc0d717..18b35649f321f7 100644
--- a/packages/hooks/src/createRunHook.js
+++ b/packages/hooks/src/createRunHook.ts
@@ -1,16 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { Hooks, StoreKey } from './types';
+
+export type RunHook = (
+	hookName: string,
+	...args: unknown[]
+) => undefined | unknown;
+
 /**
  * Returns a function which, when invoked, will execute all callbacks
  * 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('.').StoreKey} storeKey
- * @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
+ * @param hooks          Hooks instance.
+ * @param storeKey
+ * @param returnFirstArg Whether each hook callback is expected to return its first argument.
+ * @param async          Whether the hook callback should be run asynchronously
  *
- * @return {(hookName:string, ...args: unknown[]) => undefined|unknown} Function that runs hook callbacks.
+ * @return Function that runs hook callbacks.
  */
-function createRunHook( hooks, storeKey, returnFirstArg, async ) {
+function createRunHook(
+	hooks: Hooks,
+	storeKey: StoreKey,
+	returnFirstArg: boolean,
+	async: boolean
+): RunHook {
 	return function runHook( hookName, ...args ) {
 		const hooksStore = hooks[ storeKey ];
 
diff --git a/packages/hooks/src/index.js b/packages/hooks/src/index.ts
similarity index 52%
rename from packages/hooks/src/index.js
rename to packages/hooks/src/index.ts
index 1d13397e406c6b..b9684276c6f1c5 100644
--- a/packages/hooks/src/index.js
+++ b/packages/hooks/src/index.ts
@@ -3,38 +3,7 @@
  */
 import createHooks from './createHooks';
 
-/** @typedef {(...args: any[])=>any} Callback */
-
-/**
- * @typedef Handler
- * @property {Callback} callback  The callback
- * @property {string}   namespace The namespace
- * @property {number}   priority  The namespace
- */
-
-/**
- * @typedef Hook
- * @property {Handler[]} handlers Array of handlers
- * @property {number}    runs     Run counter
- */
-
-/**
- * @typedef Current
- * @property {string} name         Hook name
- * @property {number} currentIndex The index
- */
-
-/**
- * @typedef {Record<string, Hook> & {__current: Set<Current>}} Store
- */
-
-/**
- * @typedef {'actions' | 'filters'} StoreKey
- */
-
-/**
- * @typedef {import('./createHooks').Hooks} Hooks
- */
+export * from './types';
 
 export const defaultHooks = createHooks();
 
diff --git a/packages/hooks/src/types.ts b/packages/hooks/src/types.ts
new file mode 100644
index 00000000000000..8038c7473198ee
--- /dev/null
+++ b/packages/hooks/src/types.ts
@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+export type { Hooks } from './createHooks';
+
+export type Callback = ( ...args: any[] ) => any;
+
+export type Handler = {
+	callback: Callback;
+	namespace: string;
+	priority: number;
+};
+
+export type Hook = {
+	handlers: Handler[];
+	runs: number;
+};
+
+export type Current = {
+	name: string;
+	currentIndex: number;
+};
+
+export type HookInfo = {
+	name: string;
+	currentIndex: number;
+};
+
+export type Store = Record< string, Hook > & { __current: Set< Current > };
+
+export type StoreKey = 'actions' | 'filters';
diff --git a/packages/hooks/src/validateHookName.js b/packages/hooks/src/validateHookName.ts
similarity index 65%
rename from packages/hooks/src/validateHookName.js
rename to packages/hooks/src/validateHookName.ts
index 03409384dab599..9bf5f354532921 100644
--- a/packages/hooks/src/validateHookName.js
+++ b/packages/hooks/src/validateHookName.ts
@@ -1,13 +1,13 @@
 /**
  * Validate a hookName string.
  *
- * @param {string} hookName The hook name to validate. Should be a non empty string containing
- *                          only numbers, letters, dashes, periods and underscores. Also,
- *                          the hook name cannot begin with `__`.
+ * @param hookName The hook name to validate. Should be a non empty string containing
+ *                 only numbers, letters, dashes, periods and underscores. Also,
+ *                 the hook name cannot begin with `__`.
  *
- * @return {boolean} Whether the hook name is valid.
+ * @return Whether the hook name is valid.
  */
-function validateHookName( hookName ) {
+function validateHookName( hookName: string ): boolean {
 	if ( 'string' !== typeof hookName || '' === hookName ) {
 		// eslint-disable-next-line no-console
 		console.error( 'The hook name must be a non-empty string.' );
diff --git a/packages/hooks/src/validateNamespace.js b/packages/hooks/src/validateNamespace.ts
similarity index 69%
rename from packages/hooks/src/validateNamespace.js
rename to packages/hooks/src/validateNamespace.ts
index fdf451e1053d21..11c1ff23b7c21a 100644
--- a/packages/hooks/src/validateNamespace.js
+++ b/packages/hooks/src/validateNamespace.ts
@@ -1,12 +1,12 @@
 /**
  * Validate a namespace string.
  *
- * @param {string} namespace The namespace to validate - should take the form
- *                           `vendor/plugin/function`.
+ * @param namespace The namespace to validate - should take the form
+ *                  `vendor/plugin/function`.
  *
- * @return {boolean} Whether the namespace is valid.
+ * @return Whether the namespace is valid.
  */
-function validateNamespace( namespace ) {
+function validateNamespace( namespace: string ): boolean {
 	if ( 'string' !== typeof namespace || '' === namespace ) {
 		// eslint-disable-next-line no-console
 		console.error( 'The namespace must be a non-empty string.' );
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index cf88130d368fba..8fcead8c3cef65 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index f8946909a4a40d..72feb9b409594e 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/src/index.js b/packages/html-entities/src/index.ts
similarity index 85%
rename from packages/html-entities/src/index.js
rename to packages/html-entities/src/index.ts
index 1df4ec41484bdd..bf59674554eab1 100644
--- a/packages/html-entities/src/index.js
+++ b/packages/html-entities/src/index.ts
@@ -1,10 +1,9 @@
-/** @type {HTMLTextAreaElement} */
-let _decodeTextArea;
+let _decodeTextArea: HTMLTextAreaElement | undefined;
 
 /**
  * Decodes the HTML entities from a given string.
  *
- * @param {string} html String that contain HTML entities.
+ * @param html String that contain HTML entities.
  *
  * @example
  * ```js
@@ -14,9 +13,9 @@ let _decodeTextArea;
  * console.log( result ); // result will be "á"
  * ```
  *
- * @return {string} The decoded string.
+ * @return The decoded string.
  */
-export function decodeEntities( html ) {
+export function decodeEntities( html: string ): string {
 	// Not a string, or no entities to decode.
 	if ( 'string' !== typeof html || -1 === html.indexOf( '&' ) ) {
 		return html;
@@ -37,7 +36,7 @@ export function decodeEntities( html ) {
 	}
 
 	_decodeTextArea.innerHTML = html;
-	const decoded = _decodeTextArea.textContent;
+	const decoded = _decodeTextArea.textContent ?? '';
 	_decodeTextArea.innerHTML = '';
 
 	/**
@@ -57,5 +56,5 @@ export function decodeEntities( html ) {
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
 	 */
-	return /** @type {string} */ ( decoded );
+	return decoded;
 }
diff --git a/packages/html-entities/src/test/entities.js b/packages/html-entities/src/test/entities.ts
similarity index 96%
rename from packages/html-entities/src/test/entities.js
rename to packages/html-entities/src/test/entities.ts
index 27c77ed480cdba..bb721d5b2b05dc 100644
--- a/packages/html-entities/src/test/entities.js
+++ b/packages/html-entities/src/test/entities.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { decodeEntities } from '../';
+import { decodeEntities } from '..';
 
 describe( 'decodeEntities', () => {
 	it( 'should not change html with no entities', () => {
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 0879ed3744c5e6..ace341b8b00055 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 ## Unreleased
 
+## 6.0.0 (2025-07-23)
+
+### Breaking Changes
+
+-   Improve type declarations for `sprintf` by replacing the `sprintf-js` dependency with `@tannin/sprintf` ([#70434](https://github.com/WordPress/gutenberg/pull/70434))
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/i18n/README.md b/packages/i18n/README.md
index 128b05c7c20299..7d83844fe402fc 100644
--- a/packages/i18n/README.md
+++ b/packages/i18n/README.md
@@ -33,13 +33,13 @@ Create an i18n instance
 
 _Parameters_
 
--   _initialData_ `[LocaleData]`: Locale data configuration.
--   _initialDomain_ `[string]`: Domain for which configuration applies.
+-   _initialData_ `[LocaleData< TextDomain >]`: Locale data configuration.
+-   _initialDomain_ `[TextDomain]`: Domain for which configuration applies.
 -   _hooks_ `[Hooks]`: Hooks implementation.
 
 _Returns_
 
--   `I18n`: I18n instance.
+-   `I18n< TextDomain >`: I18n instance.
 
 ### defaultI18n
 
@@ -55,7 +55,7 @@ _Related_
 
 _Parameters_
 
--   _domain_ `[string]`: Domain for which to get the data.
+-   _domain_ `[ string | undefined ]`: Domain for which to get the data.
 
 _Returns_
 
@@ -68,8 +68,8 @@ Check if there is a translation for a given string (in singular form).
 _Parameters_
 
 -   _single_ `string`: Singular form of the string to look up.
--   _context_ `[string]`: Context information for the translators.
--   _domain_ `[string]`: Domain to retrieve the translated text.
+-   _context_ `string`: Context information for the translators.
+-   _domain_ `string`: Domain to retrieve the translated text.
 
 _Returns_
 
@@ -96,7 +96,7 @@ _Related_
 _Parameters_
 
 -   _data_ `[LocaleData]`: Locale data configuration.
--   _domain_ `[string]`: Domain for which configuration applies.
+-   _domain_ `[string | undefined]`: Domain for which configuration applies.
 
 ### setLocaleData
 
@@ -108,21 +108,21 @@ _Related_
 
 _Parameters_
 
--   _data_ `[LocaleData]`: Locale data configuration.
--   _domain_ `[string]`: Domain for which configuration applies.
+-   _data_ `[LocaleData ]`: Locale data configuration.
+-   _domain_ `[string | undefined]`: Domain for which configuration applies.
 
 ### sprintf
 
-Returns a formatted string. If an error occurs in applying the format, the original format string is returned.
+Returns a formatted string.
 
 _Related_
 
--   <https://www.npmjs.com/package/sprintf-js>
+-   <https://www.npmjs.com/package/@tannin/sprintf>
 
 _Parameters_
 
--   _format_ `string`: The format of the string to generate.
--   _args_ `...*`: Arguments to apply to the format.
+-   _format_ `T | TranslatableText< T >`: The format of the string to generate.
+-   _args_ `DistributeSprintfArgs< T >`: Arguments to apply to the format.
 
 _Returns_
 
@@ -150,14 +150,14 @@ _Related_
 
 _Parameters_
 
--   _single_ `string`: The text to be used if the number is singular.
--   _plural_ `string`: The text to be used if the number is plural.
+-   _single_ `Single`: The text to be used if the number is singular.
+-   _plural_ `Plural`: The text to be used if the number is plural.
 -   _number_ `number`: The number to compare against to use either the singular or plural form.
--   _domain_ `[string]`: Domain to retrieve the translated text.
+-   _domain_ `string | undefined`: Domain to retrieve the translated text.
 
 _Returns_
 
--   `string`: The translated singular or plural form.
+-   `TranslatableText<Single | Plural>`: The translated singular or plural form.
 
 ### \_nx
 
@@ -169,15 +169,16 @@ _Related_
 
 _Parameters_
 
--   _single_ `string`: The text to be used if the number is singular.
--   _plural_ `string`: The text to be used if the number is plural.
+-   _single_ `Single`: The text to be used if the number is singular.
+-   _single_ `Single`: The text to be used if the number is singular.
+-   _plural_ `Plural`: The text to be used if the number is plural.
 -   _number_ `number`: The number to compare against to use either the singular or plural form.
 -   _context_ `string`: Context information for the translators.
--   _domain_ `[string]`: Domain to retrieve the translated text.
+-   _domain_ `[string | undefined]`: Domain to retrieve the translated text.
 
 _Returns_
 
--   `string`: The translated singular or plural form.
+-   `TranslatableText<Single | Plural>`: The translated singular or plural form.
 
 ### \_x
 
@@ -189,13 +190,13 @@ _Related_
 
 _Parameters_
 
--   _text_ `string`: Text to translate.
+-   _text_ `Text`: Text to translate.
 -   _context_ `string`: Context information for the translators.
--   _domain_ `[string]`: Domain to retrieve the translated text.
+-   _domain_ `string | undefined`: Domain to retrieve the translated text.
 
 _Returns_
 
--   `string`: Translated context string without pipe.
+-   `TranslatableText<Text>`: Translated context string without pipe.
 
 ### \_\_
 
@@ -207,12 +208,12 @@ _Related_
 
 _Parameters_
 
--   _text_ `string`: Text to translate.
--   _domain_ `[string]`: Domain to retrieve the translated text.
+-   _text_ `Text`: Text to translate.
+-   _domain_ `string | undefined`: Domain to retrieve the translated text.
 
 _Returns_
 
--   `string`: Translated text.
+-   `TranslatableText<Text>`: Translated text.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index de85e8a182c25d..90a9f5804850c7 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.21.0",
+	"version": "6.0.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,10 +32,10 @@
 	},
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
+		"@tannin/sprintf": "^1.3.1",
 		"@wordpress/hooks": "file:../hooks",
 		"gettext-parser": "^1.3.1",
 		"memize": "^2.1.0",
-		"sprintf-js": "^1.1.1",
 		"tannin": "^1.2.0"
 	},
 	"publishConfig": {
diff --git a/packages/i18n/src/create-i18n.js b/packages/i18n/src/create-i18n.js
deleted file mode 100644
index 7ad5decdb65495..00000000000000
--- a/packages/i18n/src/create-i18n.js
+++ /dev/null
@@ -1,506 +0,0 @@
-/**
- * External dependencies
- */
-import Tannin from 'tannin';
-
-/**
- * @typedef {Record<string,any>} LocaleData
- */
-
-/**
- * Default locale data to use for Tannin domain when not otherwise provided.
- * Assumes an English plural forms expression.
- *
- * @type {LocaleData}
- */
-const DEFAULT_LOCALE_DATA = {
-	'': {
-		/** @param {number} n */
-		plural_forms( n ) {
-			return n === 1 ? 0 : 1;
-		},
-	},
-};
-
-/*
- * Regular expression that matches i18n hooks like `i18n.gettext`, `i18n.ngettext`,
- * `i18n.gettext_domain` or `i18n.ngettext_with_context` or `i18n.has_translation`.
- */
-const I18N_HOOK_REGEXP = /^i18n\.(n?gettext|has_translation)(_|$)/;
-
-/**
- * @typedef {(domain?: string) => LocaleData} GetLocaleData
- *
- * Returns locale data by domain in a
- * Jed-formatted JSON object shape.
- *
- * @see http://messageformat.github.io/Jed/
- */
-/**
- * @typedef {(data?: LocaleData, domain?: string) => void} SetLocaleData
- *
- * Merges locale data into the Tannin instance by domain. Note that this
- * function will overwrite the domain configuration. Accepts data in a
- * Jed-formatted JSON object shape.
- *
- * @see http://messageformat.github.io/Jed/
- */
-/**
- * @typedef {(data?: LocaleData, domain?: string) => void} AddLocaleData
- *
- * Merges locale data into the Tannin instance by domain. Note that this
- * function will also merge the domain configuration. Accepts data in a
- * Jed-formatted JSON object shape.
- *
- * @see http://messageformat.github.io/Jed/
- */
-/**
- * @typedef {(data?: LocaleData, domain?: string) => void} ResetLocaleData
- *
- * Resets all current Tannin instance locale data and sets the specified
- * locale data for the domain. Accepts data in a Jed-formatted JSON object shape.
- *
- * @see http://messageformat.github.io/Jed/
- */
-/** @typedef {() => void} SubscribeCallback */
-/** @typedef {() => void} UnsubscribeCallback */
-/**
- * @typedef {(callback: SubscribeCallback) => UnsubscribeCallback} Subscribe
- *
- * Subscribes to changes of locale data
- */
-/**
- * @typedef {(domain?: string) => string} GetFilterDomain
- * Retrieve the domain to use when calling domain-specific filters.
- */
-/**
- * @typedef {(text: string, domain?: string) => string} __
- *
- * Retrieve the translation of text.
- *
- * @see https://developer.wordpress.org/reference/functions/__/
- */
-/**
- * @typedef {(text: string, context: string, domain?: string) => string} _x
- *
- * Retrieve translated string with gettext context.
- *
- * @see https://developer.wordpress.org/reference/functions/_x/
- */
-/**
- * @typedef {(single: string, plural: string, number: number, domain?: string) => string} _n
- *
- * Translates and retrieves the singular or plural form based on the supplied
- * number.
- *
- * @see https://developer.wordpress.org/reference/functions/_n/
- */
-/**
- * @typedef {(single: string, plural: string, number: number, context: string, domain?: string) => string} _nx
- *
- * Translates and retrieves the singular or plural form based on the supplied
- * number, with gettext context.
- *
- * @see https://developer.wordpress.org/reference/functions/_nx/
- */
-/**
- * @typedef {() => boolean} IsRtl
- *
- * Check if current locale is RTL.
- *
- * **RTL (Right To Left)** is a locale property indicating that text is written from right to left.
- * For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (ar) is another common
- * language written RTL. The opposite of RTL, LTR (Left To Right) is used in other languages,
- * including English (`en`, `en-US`, `en-GB`, etc.), Spanish (`es`), and French (`fr`).
- */
-/**
- * @typedef {(single: string, context?: string, domain?: string) => boolean} HasTranslation
- *
- * Check if there is a translation for a given string in singular form.
- */
-/** @typedef {import('@wordpress/hooks').Hooks} Hooks */
-
-/**
- * An i18n instance
- *
- * @typedef I18n
- * @property {GetLocaleData}   getLocaleData   Returns locale data by domain in a Jed-formatted JSON object shape.
- * @property {SetLocaleData}   setLocaleData   Merges locale data into the Tannin instance by domain. Note that this
- *                                             function will overwrite the domain configuration. Accepts data in a
- *                                             Jed-formatted JSON object shape.
- * @property {AddLocaleData}   addLocaleData   Merges locale data into the Tannin instance by domain. Note that this
- *                                             function will also merge the domain configuration. Accepts data in a
- *                                             Jed-formatted JSON object shape.
- * @property {ResetLocaleData} resetLocaleData Resets all current Tannin instance locale data and sets the specified
- *                                             locale data for the domain. Accepts data in a Jed-formatted JSON object shape.
- * @property {Subscribe}       subscribe       Subscribes to changes of Tannin locale data.
- * @property {__}              __              Retrieve the translation of text.
- * @property {_x}              _x              Retrieve translated string with gettext context.
- * @property {_n}              _n              Translates and retrieves the singular or plural form based on the supplied
- *                                             number.
- * @property {_nx}             _nx             Translates and retrieves the singular or plural form based on the supplied
- *                                             number, with gettext context.
- * @property {IsRtl}           isRTL           Check if current locale is RTL.
- * @property {HasTranslation}  hasTranslation  Check if there is a translation for a given string.
- */
-
-/**
- * Create an i18n instance
- *
- * @param {LocaleData} [initialData]   Locale data configuration.
- * @param {string}     [initialDomain] Domain for which configuration applies.
- * @param {Hooks}      [hooks]         Hooks implementation.
- *
- * @return {I18n} I18n instance.
- */
-export const createI18n = ( initialData, initialDomain, hooks ) => {
-	/**
-	 * The underlying instance of Tannin to which exported functions interface.
-	 *
-	 * @type {Tannin}
-	 */
-	const tannin = new Tannin( {} );
-
-	const listeners = new Set();
-
-	const notifyListeners = () => {
-		listeners.forEach( ( listener ) => listener() );
-	};
-
-	/**
-	 * Subscribe to changes of locale data.
-	 *
-	 * @param {SubscribeCallback} callback Subscription callback.
-	 * @return {UnsubscribeCallback} Unsubscribe callback.
-	 */
-	const subscribe = ( callback ) => {
-		listeners.add( callback );
-		return () => listeners.delete( callback );
-	};
-
-	/** @type {GetLocaleData} */
-	const getLocaleData = ( domain = 'default' ) => tannin.data[ domain ];
-
-	/**
-	 * @param {LocaleData} [data]
-	 * @param {string}     [domain]
-	 */
-	const doSetLocaleData = ( data, domain = 'default' ) => {
-		tannin.data[ domain ] = {
-			...tannin.data[ domain ],
-			...data,
-		};
-
-		// Populate default domain configuration (supported locale date which omits
-		// a plural forms expression).
-		tannin.data[ domain ][ '' ] = {
-			...DEFAULT_LOCALE_DATA[ '' ],
-			...tannin.data[ domain ]?.[ '' ],
-		};
-
-		// Clean up cached plural forms functions cache as it might be updated.
-		delete tannin.pluralForms[ domain ];
-	};
-
-	/** @type {SetLocaleData} */
-	const setLocaleData = ( data, domain ) => {
-		doSetLocaleData( data, domain );
-		notifyListeners();
-	};
-
-	/** @type {AddLocaleData} */
-	const addLocaleData = ( data, domain = 'default' ) => {
-		tannin.data[ domain ] = {
-			...tannin.data[ domain ],
-			...data,
-			// Populate default domain configuration (supported locale date which omits
-			// a plural forms expression).
-			'': {
-				...DEFAULT_LOCALE_DATA[ '' ],
-				...tannin.data[ domain ]?.[ '' ],
-				...data?.[ '' ],
-			},
-		};
-
-		// Clean up cached plural forms functions cache as it might be updated.
-		delete tannin.pluralForms[ domain ];
-
-		notifyListeners();
-	};
-
-	/** @type {ResetLocaleData} */
-	const resetLocaleData = ( data, domain ) => {
-		// Reset all current Tannin locale data.
-		tannin.data = {};
-
-		// Reset cached plural forms functions cache.
-		tannin.pluralForms = {};
-
-		setLocaleData( data, domain );
-	};
-
-	/**
-	 * Wrapper for Tannin's `dcnpgettext`. Populates default locale data if not
-	 * otherwise previously assigned.
-	 *
-	 * @param {string|undefined} domain   Domain to retrieve the translated text.
-	 * @param {string|undefined} context  Context information for the translators.
-	 * @param {string}           single   Text to translate if non-plural. Used as
-	 *                                    fallback return value on a caught error.
-	 * @param {string}           [plural] The text to be used if the number is
-	 *                                    plural.
-	 * @param {number}           [number] The number to compare against to use
-	 *                                    either the singular or plural form.
-	 *
-	 * @return {string} The translated string.
-	 */
-	const dcnpgettext = (
-		domain = 'default',
-		context,
-		single,
-		plural,
-		number
-	) => {
-		if ( ! tannin.data[ domain ] ) {
-			// Use `doSetLocaleData` to set silently, without notifying listeners.
-			doSetLocaleData( undefined, domain );
-		}
-
-		return tannin.dcnpgettext( domain, context, single, plural, number );
-	};
-
-	/** @type {GetFilterDomain} */
-	const getFilterDomain = ( domain = 'default' ) => domain;
-
-	/** @type {__} */
-	const __ = ( text, domain ) => {
-		let translation = dcnpgettext( domain, undefined, text );
-		if ( ! hooks ) {
-			return translation;
-		}
-
-		/**
-		 * Filters text with its translation.
-		 *
-		 * @param {string} translation Translated text.
-		 * @param {string} text        Text to translate.
-		 * @param {string} domain      Text domain. Unique identifier for retrieving translated strings.
-		 */
-		translation = /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.gettext',
-				translation,
-				text,
-				domain
-			)
-		);
-		return /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.gettext_' + getFilterDomain( domain ),
-				translation,
-				text,
-				domain
-			)
-		);
-	};
-
-	/** @type {_x} */
-	const _x = ( text, context, domain ) => {
-		let translation = dcnpgettext( domain, context, text );
-		if ( ! hooks ) {
-			return translation;
-		}
-
-		/**
-		 * Filters text with its translation based on context information.
-		 *
-		 * @param {string} translation Translated text.
-		 * @param {string} text        Text to translate.
-		 * @param {string} context     Context information for the translators.
-		 * @param {string} domain      Text domain. Unique identifier for retrieving translated strings.
-		 */
-		translation = /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.gettext_with_context',
-				translation,
-				text,
-				context,
-				domain
-			)
-		);
-		return /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.gettext_with_context_' + getFilterDomain( domain ),
-				translation,
-				text,
-				context,
-				domain
-			)
-		);
-	};
-
-	/** @type {_n} */
-	const _n = ( single, plural, number, domain ) => {
-		let translation = dcnpgettext(
-			domain,
-			undefined,
-			single,
-			plural,
-			number
-		);
-		if ( ! hooks ) {
-			return translation;
-		}
-
-		/**
-		 * Filters the singular or plural form of a string.
-		 *
-		 * @param {string} translation Translated text.
-		 * @param {string} single      The text to be used if the number is singular.
-		 * @param {string} plural      The text to be used if the number is plural.
-		 * @param {string} number      The number to compare against to use either the singular or plural form.
-		 * @param {string} domain      Text domain. Unique identifier for retrieving translated strings.
-		 */
-		translation = /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.ngettext',
-				translation,
-				single,
-				plural,
-				number,
-				domain
-			)
-		);
-		return /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.ngettext_' + getFilterDomain( domain ),
-				translation,
-				single,
-				plural,
-				number,
-				domain
-			)
-		);
-	};
-
-	/** @type {_nx} */
-	const _nx = ( single, plural, number, context, domain ) => {
-		let translation = dcnpgettext(
-			domain,
-			context,
-			single,
-			plural,
-			number
-		);
-		if ( ! hooks ) {
-			return translation;
-		}
-
-		/**
-		 * Filters the singular or plural form of a string with gettext context.
-		 *
-		 * @param {string} translation Translated text.
-		 * @param {string} single      The text to be used if the number is singular.
-		 * @param {string} plural      The text to be used if the number is plural.
-		 * @param {string} number      The number to compare against to use either the singular or plural form.
-		 * @param {string} context     Context information for the translators.
-		 * @param {string} domain      Text domain. Unique identifier for retrieving translated strings.
-		 */
-		translation = /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.ngettext_with_context',
-				translation,
-				single,
-				plural,
-				number,
-				context,
-				domain
-			)
-		);
-
-		return /** @type {string} */ (
-			/** @type {*} */ hooks.applyFilters(
-				'i18n.ngettext_with_context_' + getFilterDomain( domain ),
-				translation,
-				single,
-				plural,
-				number,
-				context,
-				domain
-			)
-		);
-	};
-
-	/** @type {IsRtl} */
-	const isRTL = () => {
-		return 'rtl' === _x( 'ltr', 'text direction' );
-	};
-
-	/** @type {HasTranslation} */
-	const hasTranslation = ( single, context, domain ) => {
-		const key = context ? context + '\u0004' + single : single;
-		let result = !! tannin.data?.[ domain ?? 'default' ]?.[ key ];
-		if ( hooks ) {
-			/**
-			 * Filters the presence of a translation in the locale data.
-			 *
-			 * @param {boolean} hasTranslation Whether the translation is present or not..
-			 * @param {string}  single         The singular form of the translated text (used as key in locale data)
-			 * @param {string}  context        Context information for the translators.
-			 * @param {string}  domain         Text domain. Unique identifier for retrieving translated strings.
-			 */
-			result = /** @type { boolean } */ (
-				/** @type {*} */ hooks.applyFilters(
-					'i18n.has_translation',
-					result,
-					single,
-					context,
-					domain
-				)
-			);
-
-			result = /** @type { boolean } */ (
-				/** @type {*} */ hooks.applyFilters(
-					'i18n.has_translation_' + getFilterDomain( domain ),
-					result,
-					single,
-					context,
-					domain
-				)
-			);
-		}
-		return result;
-	};
-
-	if ( initialData ) {
-		setLocaleData( initialData, initialDomain );
-	}
-
-	if ( hooks ) {
-		/**
-		 * @param {string} hookName
-		 */
-		const onHookAddedOrRemoved = ( hookName ) => {
-			if ( I18N_HOOK_REGEXP.test( hookName ) ) {
-				notifyListeners();
-			}
-		};
-
-		hooks.addAction( 'hookAdded', 'core/i18n', onHookAddedOrRemoved );
-		hooks.addAction( 'hookRemoved', 'core/i18n', onHookAddedOrRemoved );
-	}
-
-	return {
-		getLocaleData,
-		setLocaleData,
-		addLocaleData,
-		resetLocaleData,
-		subscribe,
-		__,
-		_x,
-		_n,
-		_nx,
-		isRTL,
-		hasTranslation,
-	};
-};
diff --git a/packages/i18n/src/create-i18n.ts b/packages/i18n/src/create-i18n.ts
new file mode 100644
index 00000000000000..f1ec3ab5c70f38
--- /dev/null
+++ b/packages/i18n/src/create-i18n.ts
@@ -0,0 +1,405 @@
+/**
+ * External dependencies
+ */
+import type { TanninLocaleDomain } from 'tannin';
+import Tannin from 'tannin';
+/**
+ * Internal dependencies
+ */
+import type {
+	getFilterDomain,
+	I18n,
+	LocaleData,
+	SubscribeCallback,
+	TranslatableText,
+	UnsubscribeCallback,
+} from './types';
+/**
+ * WordPress dependencies
+ */
+import type { Hooks } from '@wordpress/hooks';
+/**
+ * Default locale data to use for Tannin domain when not otherwise provided.
+ * Assumes an English plural forms expression.
+ */
+const DEFAULT_LOCALE_DATA: LocaleData = {
+	'': {
+		plural_forms( n: number ) {
+			return n === 1 ? 0 : 1;
+		},
+	},
+};
+
+/*
+ * Regular expression that matches i18n hooks like `i18n.gettext`, `i18n.ngettext`,
+ * `i18n.gettext_domain` or `i18n.ngettext_with_context` or `i18n.has_translation`.
+ */
+const I18N_HOOK_REGEXP = /^i18n\.(n?gettext|has_translation)(_|$)/;
+
+/**
+ * Create an i18n instance
+ *
+ * @param [initialData]   Locale data configuration.
+ * @param [initialDomain] Domain for which configuration applies.
+ * @param [hooks]         Hooks implementation.
+ *
+ * @return I18n instance.
+ */
+export const createI18n = < TextDomain extends string >(
+	initialData?: LocaleData< TextDomain >,
+	initialDomain?: TextDomain,
+	hooks?: Hooks
+): I18n< TextDomain > => {
+	/**
+	 * The underlying instance of Tannin to which exported functions interface.
+	 */
+	const tannin = new Tannin( {} );
+
+	const listeners = new Set< () => void >();
+
+	const notifyListeners = () => {
+		listeners.forEach( ( listener ) => listener() );
+	};
+
+	/**
+	 * Subscribe to changes of locale data.
+	 *
+	 * @param callback Subscription callback.
+	 * @return Unsubscribe callback.
+	 */
+	const subscribe = ( callback: SubscribeCallback ): UnsubscribeCallback => {
+		listeners.add( callback );
+		return () => listeners.delete( callback );
+	};
+
+	const getLocaleData: I18n< TextDomain >[ 'getLocaleData' ] = (
+		domain = 'default' as TextDomain
+	) => tannin.data[ domain ] as LocaleData< TextDomain >;
+
+	/**
+	 * @param [data]
+	 * @param [domain]
+	 */
+	const doSetLocaleData = (
+		data?: LocaleData,
+		domain: TextDomain = 'default' as TextDomain
+	) => {
+		tannin.data[ domain ] = {
+			...tannin.data[ domain ],
+			...data,
+		} as TanninLocaleDomain;
+
+		// Populate default domain configuration (supported locale date which omits
+		// a plural forms expression).
+		tannin.data[ domain ][ '' ] = {
+			...DEFAULT_LOCALE_DATA[ '' ],
+			...tannin.data[ domain ]?.[ '' ],
+		};
+
+		// Clean up cached plural forms functions cache as it might be updated.
+		delete tannin.pluralForms[ domain ];
+	};
+
+	const setLocaleData: I18n< TextDomain >[ 'setLocaleData' ] = (
+		data,
+		domain
+	) => {
+		doSetLocaleData( data, domain );
+		notifyListeners();
+	};
+
+	const addLocaleData: I18n< TextDomain >[ 'addLocaleData' ] = (
+		data,
+		domain = 'default' as TextDomain
+	) => {
+		tannin.data[ domain ] = {
+			...tannin.data[ domain ],
+			...data,
+			// Populate default domain configuration (supported locale date which omits
+			// a plural forms expression).
+			'': {
+				...DEFAULT_LOCALE_DATA[ '' ],
+				...tannin.data[ domain ]?.[ '' ],
+				...data?.[ '' ],
+			},
+		} as TanninLocaleDomain;
+
+		// Clean up cached plural forms functions cache as it might be updated.
+		delete tannin.pluralForms[ domain ];
+
+		notifyListeners();
+	};
+
+	const resetLocaleData: I18n< TextDomain >[ 'resetLocaleData' ] = (
+		data,
+		domain
+	) => {
+		// Reset all current Tannin locale data.
+		tannin.data = {};
+
+		// Reset cached plural forms functions cache.
+		tannin.pluralForms = {};
+
+		setLocaleData( data, domain );
+	};
+
+	/**
+	 * Wrapper for Tannin's `dcnpgettext`. Populates default locale data if not
+	 * otherwise previously assigned.
+	 *
+	 * @param domain   Domain to retrieve the translated text.
+	 * @param context  Context information for the translators.
+	 * @param single   Text to translate if non-plural. Used as
+	 *                 fallback return value on a caught error.
+	 * @param [plural] The text to be used if the number is
+	 *                 plural.
+	 * @param [number] The number to compare against to use
+	 *                 either the singular or plural form.
+	 *
+	 * @return The translated string.
+	 */
+	const dcnpgettext = (
+		domain = 'default' as TextDomain,
+		context: string | void,
+		single: string,
+		plural?: string,
+		number?: number
+	): string => {
+		if ( ! tannin.data[ domain ] ) {
+			// Use `doSetLocaleData` to set silently, without notifying listeners.
+			doSetLocaleData( undefined, domain );
+		}
+
+		return tannin.dcnpgettext( domain, context, single, plural, number );
+	};
+
+	const getFilterDomain: getFilterDomain = ( domain ) => domain || 'default';
+
+	const __: I18n< TextDomain >[ '__' ] = ( text, domain ) => {
+		let translation = dcnpgettext( domain, undefined, text );
+		if ( ! hooks ) {
+			return translation as TranslatableText< typeof text >;
+		}
+
+		/**
+		 * Filters text with its translation.
+		 *
+		 * @param translation Translated text.
+		 * @param text        Text to translate.
+		 * @param domain      Text domain. Unique identifier for retrieving translated strings.
+		 */
+		translation = hooks.applyFilters(
+			'i18n.gettext',
+			translation,
+			text,
+			domain
+		) as TranslatableText< typeof text >;
+
+		return hooks.applyFilters(
+			'i18n.gettext_' + getFilterDomain( domain ),
+			translation,
+			text,
+			domain
+		) as TranslatableText< typeof text >;
+	};
+
+	const _x: I18n< TextDomain >[ '_x' ] = ( text, context, domain ) => {
+		let translation = dcnpgettext( domain, context, text );
+		if ( ! hooks ) {
+			return translation as TranslatableText< typeof text >;
+		}
+
+		/**
+		 * Filters text with its translation based on context information.
+		 *
+		 * @param translation Translated text.
+		 * @param text        Text to translate.
+		 * @param context     Context information for the translators.
+		 * @param domain      Text domain. Unique identifier for retrieving translated strings.
+		 */
+		translation = hooks.applyFilters(
+			'i18n.gettext_with_context',
+			translation,
+			text,
+			context,
+			domain
+		) as TranslatableText< typeof text >;
+
+		return hooks.applyFilters(
+			'i18n.gettext_with_context_' + getFilterDomain( domain ),
+			translation,
+			text,
+			context,
+			domain
+		) as TranslatableText< typeof text >;
+	};
+
+	const _n: I18n< TextDomain >[ '_n' ] = (
+		single,
+		plural,
+		number,
+		domain
+	) => {
+		let translation = dcnpgettext(
+			domain,
+			undefined,
+			single,
+			plural,
+			number
+		);
+		if ( ! hooks ) {
+			return translation as TranslatableText<
+				typeof single | typeof plural
+			>;
+		}
+
+		/**
+		 * Filters the singular or plural form of a string.
+		 *
+		 * @param translation Translated text.
+		 * @param single      The text to be used if the number is singular.
+		 * @param plural      The text to be used if the number is plural.
+		 * @param number      The number to compare against to use either the singular or plural form.
+		 * @param domain      Text domain. Unique identifier for retrieving translated strings.
+		 */
+		translation = hooks.applyFilters(
+			'i18n.ngettext',
+			translation,
+			single,
+			plural,
+			number,
+			domain
+		) as TranslatableText< typeof single | typeof plural >;
+
+		return hooks.applyFilters(
+			'i18n.ngettext_' + getFilterDomain( domain ),
+			translation,
+			single,
+			plural,
+			number,
+			domain
+		) as TranslatableText< typeof single | typeof plural >;
+	};
+
+	const _nx: I18n< TextDomain >[ '_nx' ] = (
+		single,
+		plural,
+		number,
+		context,
+		domain
+	) => {
+		let translation = dcnpgettext(
+			domain,
+			context,
+			single,
+			plural,
+			number
+		);
+		if ( ! hooks ) {
+			return translation as TranslatableText<
+				typeof single | typeof plural
+			>;
+		}
+
+		/**
+		 * Filters the singular or plural form of a string with gettext context.
+		 *
+		 * @param translation Translated text.
+		 * @param single      The text to be used if the number is singular.
+		 * @param plural      The text to be used if the number is plural.
+		 * @param number      The number to compare against to use either the singular or plural form.
+		 * @param context     Context information for the translators.
+		 * @param domain      Text domain. Unique identifier for retrieving translated strings.
+		 */
+		translation = hooks.applyFilters(
+			'i18n.ngettext_with_context',
+			translation,
+			single,
+			plural,
+			number,
+			context,
+			domain
+		) as TranslatableText< typeof single | typeof plural >;
+
+		return hooks.applyFilters(
+			'i18n.ngettext_with_context_' + getFilterDomain( domain ),
+			translation,
+			single,
+			plural,
+			number,
+			context,
+			domain
+		) as TranslatableText< typeof single | typeof plural >;
+	};
+
+	const isRTL: I18n< TextDomain >[ 'isRTL' ] = () => {
+		return 'rtl' === _x( 'ltr', 'text direction' );
+	};
+
+	const hasTranslation: I18n< TextDomain >[ 'hasTranslation' ] = (
+		single,
+		context,
+		domain
+	) => {
+		const key = context ? context + '\u0004' + single : single;
+		let result = !! tannin.data?.[ domain ?? 'default' ]?.[ key ];
+		if ( hooks ) {
+			/**
+			 * Filters the presence of a translation in the locale data.
+			 *
+			 * @param hasTranslation Whether the translation is present or not..
+			 * @param single         The singular form of the translated text (used as key in locale data)
+			 * @param context        Context information for the translators.
+			 * @param domain         Text domain. Unique identifier for retrieving translated strings.
+			 */
+			result = hooks.applyFilters(
+				'i18n.has_translation',
+				result,
+				single,
+				context,
+				domain
+			) as boolean;
+
+			result = hooks.applyFilters(
+				'i18n.has_translation_' + getFilterDomain( domain ),
+				result,
+				single,
+				context,
+				domain
+			) as boolean;
+		}
+		return result;
+	};
+
+	if ( initialData ) {
+		setLocaleData( initialData, initialDomain );
+	}
+
+	if ( hooks ) {
+		/**
+		 * @param hookName
+		 */
+		const onHookAddedOrRemoved = ( hookName: string ) => {
+			if ( I18N_HOOK_REGEXP.test( hookName ) ) {
+				notifyListeners();
+			}
+		};
+
+		hooks.addAction( 'hookAdded', 'core/i18n', onHookAddedOrRemoved );
+		hooks.addAction( 'hookRemoved', 'core/i18n', onHookAddedOrRemoved );
+	}
+
+	return {
+		getLocaleData,
+		setLocaleData,
+		addLocaleData,
+		resetLocaleData,
+		subscribe,
+		__,
+		_x,
+		_n,
+		_nx,
+		isRTL,
+		hasTranslation,
+	};
+};
diff --git a/packages/i18n/src/default-i18n.js b/packages/i18n/src/default-i18n.ts
similarity index 53%
rename from packages/i18n/src/default-i18n.js
rename to packages/i18n/src/default-i18n.ts
index bdcb3149439748..ccd8e96f102229 100644
--- a/packages/i18n/src/default-i18n.js
+++ b/packages/i18n/src/default-i18n.ts
@@ -7,6 +7,12 @@ import { createI18n } from './create-i18n';
  * WordPress dependencies
  */
 import { defaultHooks } from '@wordpress/hooks';
+import {
+	LocaleData,
+	SubscribeCallback,
+	TranslatableText,
+	UnsubscribeCallback,
+} from './types';
 
 const i18n = createI18n( undefined, undefined, defaultHooks );
 
@@ -20,19 +26,13 @@ export default i18n;
  * https://github.com/WordPress/gutenberg/pull/20318#issuecomment-590837722
  */
 
-/**
- * @typedef {import('./create-i18n').LocaleData} LocaleData
- * @typedef {import('./create-i18n').SubscribeCallback} SubscribeCallback
- * @typedef {import('./create-i18n').UnsubscribeCallback} UnsubscribeCallback
- */
-
 /**
  * Returns locale data by domain in a Jed-formatted JSON object shape.
  *
  * @see http://messageformat.github.io/Jed/
  *
- * @param {string} [domain] Domain for which to get the data.
- * @return {LocaleData} Locale data.
+ * @param { string | undefined } [domain] Domain for which to get the data.
+ * @return { LocaleData } Locale data.
  */
 export const getLocaleData = i18n.getLocaleData.bind( i18n );
 
@@ -42,8 +42,8 @@ export const getLocaleData = i18n.getLocaleData.bind( i18n );
  *
  * @see http://messageformat.github.io/Jed/
  *
- * @param {LocaleData} [data]   Locale data configuration.
- * @param {string}     [domain] Domain for which configuration applies.
+ * @param {LocaleData }        [data]   Locale data configuration.
+ * @param {string | undefined} [domain] Domain for which configuration applies.
  */
 export const setLocaleData = i18n.setLocaleData.bind( i18n );
 
@@ -53,8 +53,8 @@ export const setLocaleData = i18n.setLocaleData.bind( i18n );
  *
  * @see http://messageformat.github.io/Jed/
  *
- * @param {LocaleData} [data]   Locale data configuration.
- * @param {string}     [domain] Domain for which configuration applies.
+ * @param {LocaleData}         [data]   Locale data configuration.
+ * @param {string | undefined} [domain] Domain for which configuration applies.
  */
 export const resetLocaleData = i18n.resetLocaleData.bind( i18n );
 
@@ -71,10 +71,12 @@ export const subscribe = i18n.subscribe.bind( i18n );
  *
  * @see https://developer.wordpress.org/reference/functions/__/
  *
- * @param {string} text     Text to translate.
- * @param {string} [domain] Domain to retrieve the translated text.
+ * @template {string} Text
+ *
+ * @param {Text}               text   Text to translate.
+ * @param {string | undefined} domain Domain to retrieve the translated text.
  *
- * @return {string} Translated text.
+ * @return {TranslatableText<Text>} Translated text.
  */
 export const __ = i18n.__.bind( i18n );
 
@@ -83,11 +85,13 @@ export const __ = i18n.__.bind( i18n );
  *
  * @see https://developer.wordpress.org/reference/functions/_x/
  *
- * @param {string} text     Text to translate.
- * @param {string} context  Context information for the translators.
- * @param {string} [domain] Domain to retrieve the translated text.
+ * @template {string} Text
  *
- * @return {string} Translated context string without pipe.
+ * @param {Text}               text    Text to translate.
+ * @param {string}             context Context information for the translators.
+ * @param {string | undefined} domain  Domain to retrieve the translated text.
+ *
+ * @return {TranslatableText<Text>} Translated context string without pipe.
  */
 export const _x = i18n._x.bind( i18n );
 
@@ -97,13 +101,16 @@ export const _x = i18n._x.bind( i18n );
  *
  * @see https://developer.wordpress.org/reference/functions/_n/
  *
- * @param {string} single   The text to be used if the number is singular.
- * @param {string} plural   The text to be used if the number is plural.
- * @param {number} number   The number to compare against to use either the
- *                          singular or plural form.
- * @param {string} [domain] Domain to retrieve the translated text.
+ * @template {string} Single
+ * @template {string} Plural
+ *
+ * @param {Single}             single The text to be used if the number is singular.
+ * @param {Plural}             plural The text to be used if the number is plural.
+ * @param {number}             number The number to compare against to use either the
+ *                                    singular or plural form.
+ * @param {string | undefined} domain Domain to retrieve the translated text.
  *
- * @return {string} The translated singular or plural form.
+ * @return {TranslatableText<Single | Plural>} The translated singular or plural form.
  */
 export const _n = i18n._n.bind( i18n );
 
@@ -113,14 +120,18 @@ export const _n = i18n._n.bind( i18n );
  *
  * @see https://developer.wordpress.org/reference/functions/_nx/
  *
- * @param {string} single   The text to be used if the number is singular.
- * @param {string} plural   The text to be used if the number is plural.
- * @param {number} number   The number to compare against to use either the
- *                          singular or plural form.
- * @param {string} context  Context information for the translators.
- * @param {string} [domain] Domain to retrieve the translated text.
+ * @template {string} Single
+ * @template {string} Plural
+ * @param {Single}             single   The text to be used if the number is singular.
  *
- * @return {string} The translated singular or plural form.
+ * @param {Single}             single   The text to be used if the number is singular.
+ * @param {Plural}             plural   The text to be used if the number is plural.
+ * @param {number}             number   The number to compare against to use either the
+ *                                      singular or plural form.
+ * @param {string}             context  Context information for the translators.
+ * @param {string | undefined} [domain] Domain to retrieve the translated text.
+ *
+ * @return {TranslatableText<Single | Plural>} The translated singular or plural form.
  */
 export const _nx = i18n._nx.bind( i18n );
 
@@ -139,9 +150,10 @@ export const isRTL = i18n.isRTL.bind( i18n );
 /**
  * Check if there is a translation for a given string (in singular form).
  *
- * @param {string} single    Singular form of the string to look up.
- * @param {string} [context] Context information for the translators.
- * @param {string} [domain]  Domain to retrieve the translated text.
+ * @param {string} single  Singular form of the string to look up.
+ * @param {string} context Context information for the translators.
+ * @param {string} domain  Domain to retrieve the translated text.
+ *
  * @return {boolean} Whether the translation exists or not.
  */
 export const hasTranslation = i18n.hasTranslation.bind( i18n );
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
new file mode 100644
index 00000000000000..996388a7baab0c
--- /dev/null
+++ b/packages/i18n/src/index.ts
@@ -0,0 +1,16 @@
+export { sprintf } from './sprintf';
+export * from './create-i18n';
+export type * from './types';
+export {
+	default as defaultI18n,
+	setLocaleData,
+	resetLocaleData,
+	getLocaleData,
+	subscribe,
+	__,
+	_x,
+	_n,
+	_nx,
+	isRTL,
+	hasTranslation,
+} from './default-i18n';
diff --git a/packages/i18n/src/sprintf.js b/packages/i18n/src/sprintf.js
deleted file mode 100644
index 550248a81c9e9e..00000000000000
--- a/packages/i18n/src/sprintf.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import memoize from 'memize';
-import sprintfjs from 'sprintf-js';
-
-/**
- * Log to console, once per message; or more precisely, per referentially equal
- * argument set. Because Jed throws errors, we log these to the console instead
- * to avoid crashing the application.
- *
- * @param {...*} args Arguments to pass to `console.error`
- */
-const logErrorOnce = memoize( console.error ); // eslint-disable-line no-console
-
-/**
- * Returns a formatted string. If an error occurs in applying the format, the
- * original format string is returned.
- *
- * @param {string} format The format of the string to generate.
- * @param {...*}   args   Arguments to apply to the format.
- *
- * @see https://www.npmjs.com/package/sprintf-js
- *
- * @return {string} The formatted string.
- */
-export function sprintf( format, ...args ) {
-	try {
-		return sprintfjs.sprintf( format, ...args );
-	} catch ( error ) {
-		if ( error instanceof Error ) {
-			logErrorOnce( 'sprintf error: \n\n' + error.toString() );
-		}
-		return format;
-	}
-}
diff --git a/packages/i18n/src/sprintf.ts b/packages/i18n/src/sprintf.ts
new file mode 100644
index 00000000000000..ae1b7e6b86d743
--- /dev/null
+++ b/packages/i18n/src/sprintf.ts
@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+// Disable reason: `eslint-plugin-import` doesn't support `exports` (https://github.com/import-js/eslint-plugin-import/issues/1810)
+// eslint-disable-next-line import/no-unresolved
+import _sprintf from '@tannin/sprintf';
+
+/**
+ * Internal dependencies
+ */
+import type { DistributeSprintfArgs, TranslatableText } from './types';
+
+export function sprintf< T extends string >(
+	format: T | TranslatableText< T >,
+	...args: DistributeSprintfArgs< T >
+): string;
+export function sprintf< T extends string >(
+	format: T | TranslatableText< T >,
+	args: DistributeSprintfArgs< T >
+): string;
+
+/**
+ * Returns a formatted string.
+ *
+ * @param format The format of the string to generate.
+ * @param args   Arguments to apply to the format.
+ *
+ * @see https://www.npmjs.com/package/@tannin/sprintf
+ *
+ * @return The formatted string.
+ */
+export function sprintf< T extends string >(
+	format: T | TranslatableText< T >,
+	...args: DistributeSprintfArgs< T >
+): string {
+	return _sprintf( format as T, ...( args as DistributeSprintfArgs< T > ) );
+}
diff --git a/packages/i18n/src/test/create-i18n.js b/packages/i18n/src/test/create-i18n.ts
similarity index 87%
rename from packages/i18n/src/test/create-i18n.js
rename to packages/i18n/src/test/create-i18n.ts
index d588f5e37a30e7..fb54625baa7660 100644
--- a/packages/i18n/src/test/create-i18n.js
+++ b/packages/i18n/src/test/create-i18n.ts
@@ -9,16 +9,19 @@ import { createHooks } from '@wordpress/hooks';
  * Internal dependencies
  */
 import { createI18n } from '..';
+import type { I18nDomainMetadata, LocaleData } from '../types';
 
-const strayaLocale = {
-	hello: [ 'gday' ],
+type AllowedTextDomain = 'test_domain' | 'test_domain2';
+
+const strayaLocale: LocaleData = {
+	hello: [ 'gday', '' ],
 };
 
-const frenchLocale = {
-	hello: [ 'bonjour' ],
+const frenchLocale: LocaleData = {
+	hello: [ 'bonjour', '' ],
 };
 
-const localeData = {
+const localeData: LocaleData< AllowedTextDomain > = {
 	'': {
 		// Domain name.
 		domain: 'test_domain',
@@ -27,23 +30,24 @@ const localeData = {
 		plural_forms: 'nplurals=2; plural=(n != 1);',
 	},
 
-	hello: [ 'bonjour' ],
+	hello: [ 'bonjour', '' ],
 
-	'verb\u0004feed': [ 'nourrir' ],
+	'verb\u0004feed': [ 'nourrir', '' ],
 
-	'hello %s': [ 'bonjour %s' ],
+	'hello %s': [ 'bonjour %s', '' ],
 
 	'%d banana': [ '%d banane', '%d bananes' ],
 
 	'fruit\u0004%d apple': [ '%d pomme', '%d pommes' ],
 };
 
-const additionalLocaleData = {
-	cheeseburger: [ 'hamburger au fromage' ],
+const additionalLocaleData: LocaleData< AllowedTextDomain > = {
+	cheeseburger: [ 'hamburger au fromage', '' ],
 	'%d cat': [ '%d chat', '%d chats' ],
 };
 
-const createTestLocale = () => createI18n( localeData, 'test_domain' );
+const createTestLocale = () =>
+	createI18n< AllowedTextDomain >( localeData, 'test_domain' );
 
 describe( 'createI18n', () => {
 	test( 'instantiated with locale data', () => {
@@ -111,15 +115,14 @@ describe( 'createI18n', () => {
 	} );
 
 	describe( 'isRTL', () => {
-		const ARLocaleData = {
+		const ARLocaleData: LocaleData = {
 			'': {
 				plural_forms:
 					'nplurals=6; plural=n==0 ? 0 : n==1 ? 1 : n==2 ? 2 : n%100>=3 && n%100<=10 ? 3 : n%100>=11 && n%100<=99 ? 4 : 5;',
-				language: 'ar',
-				localeSlug: 'ar',
+				lang: 'ar',
 			},
-			'text direction\u0004ltr': [ 'rtl' ],
-			Back: [ 'رجوع' ],
+			'text direction\u0004ltr': [ 'rtl', '' ],
+			Back: [ 'رجوع', '' ],
 		};
 
 		it( 'is false for non-rtl', () => {
@@ -135,7 +138,10 @@ describe( 'createI18n', () => {
 
 	describe( 'setLocaleData', () => {
 		const createTestLocaleWithAdditionalData = () => {
-			const locale = createI18n( localeData, 'test_domain' );
+			const locale = createI18n< 'test_domain' | 'test_domain2' >(
+				localeData,
+				'test_domain'
+			);
 			locale.setLocaleData( additionalLocaleData, 'test_domain' );
 			return locale;
 		};
@@ -153,6 +159,7 @@ describe( 'createI18n', () => {
 				},
 				'test_domain2'
 			);
+
 			expect(
 				locale._n( '%d banana', '%d bananes', 2, 'test_domain2' )
 			).toBe( '%d bananes' );
@@ -171,13 +178,22 @@ describe( 'createI18n', () => {
 				domain
 			);
 
+			const domainMeta = locale.getLocaleData( domain )[ '' ];
 			expect(
-				locale.getLocaleData( domain )[ '' ].domain
+				typeof domainMeta === 'object' && ! Array.isArray( domainMeta )
+					? domainMeta.domain
+					: undefined
 			).toBeUndefined();
-			expect( locale.getLocaleData( domain )[ '' ].lang ).toBeUndefined();
-			expect( locale.getLocaleData( domain )[ '' ].additionalData ).toBe(
-				domainConfiguration.additionalData
-			);
+			expect(
+				typeof domainMeta === 'object' && ! Array.isArray( domainMeta )
+					? domainMeta.lang
+					: undefined
+			).toBeUndefined();
+			expect(
+				typeof domainMeta === 'object' && ! Array.isArray( domainMeta )
+					? domainMeta.additionalData
+					: undefined
+			).toBe( domainConfiguration.additionalData );
 		} );
 
 		describe( '__', () => {
@@ -220,7 +236,10 @@ describe( 'createI18n', () => {
 
 	describe( 'addLocaleData', () => {
 		const createTestLocaleWithAdditionalData = () => {
-			const locale = createI18n( localeData, 'test_domain' );
+			const locale = createI18n< 'test_domain' | 'test_domain2' >(
+				localeData,
+				'test_domain'
+			);
 			locale.addLocaleData( additionalLocaleData, 'test_domain' );
 			return locale;
 		};
@@ -256,13 +275,27 @@ describe( 'createI18n', () => {
 				domain
 			);
 
-			expect( locale.getLocaleData( domain )[ '' ].domain ).toBe(
-				domain
-			);
-			expect( locale.getLocaleData( domain )[ '' ].lang ).toBe( 'fr' );
-			expect( locale.getLocaleData( domain )[ '' ].additionalData ).toBe(
-				domainConfiguration.additionalData
-			);
+			expect(
+				(
+					locale.getLocaleData( domain )[
+						''
+					] as I18nDomainMetadata< 'test_domain' >
+				 ).domain
+			).toBe( domain );
+			expect(
+				(
+					locale.getLocaleData( domain )[
+						''
+					] as I18nDomainMetadata< 'test_domain' >
+				 ).lang
+			).toBe( 'fr' );
+			expect(
+				(
+					locale.getLocaleData( domain )[
+						''
+					] as I18nDomainMetadata< 'test_domain' >
+				 ).additionalData
+			).toBe( domainConfiguration.additionalData );
 		} );
 
 		describe( '__', () => {
diff --git a/packages/i18n/src/test/default-i18n.js b/packages/i18n/src/test/default-i18n.ts
similarity index 100%
rename from packages/i18n/src/test/default-i18n.js
rename to packages/i18n/src/test/default-i18n.ts
diff --git a/packages/i18n/src/test/sprintf.js b/packages/i18n/src/test/sprintf.ts
similarity index 60%
rename from packages/i18n/src/test/sprintf.js
rename to packages/i18n/src/test/sprintf.ts
index 05000ce401a57d..2aa8e17bc38c3d 100644
--- a/packages/i18n/src/test/sprintf.js
+++ b/packages/i18n/src/test/sprintf.ts
@@ -1,6 +1,10 @@
 // Mock memoization as identity function. Inline since Jest errors on
 // out-of-scope references in a mock callback.
-jest.mock( 'memize', () => ( fn ) => fn );
+interface MemizeMock {
+	< T extends ( ...args: any[] ) => any >( fn: T ): T;
+}
+
+jest.mock( 'memize', (): MemizeMock => ( fn ) => fn );
 
 /**
  * Internal dependencies
@@ -9,15 +13,6 @@ import { sprintf } from '../sprintf';
 
 describe( 'i18n', () => {
 	describe( 'sprintf', () => {
-		it( 'absorbs errors', () => {
-			// Disable reason: Failing case is the purpose of the test.
-			// eslint-disable-next-line @wordpress/valid-sprintf
-			const result = sprintf( 'Hello %(placeholder-not-provided)s' );
-
-			expect( console ).toHaveErrored();
-			expect( result ).toBe( 'Hello %(placeholder-not-provided)s' );
-		} );
-
 		it( 'replaces placeholders', () => {
 			const result = sprintf( 'bonjour %s', 'Riad' );
 
diff --git a/packages/i18n/src/test/subscribe-i18n.js b/packages/i18n/src/test/subscribe-i18n.ts
similarity index 86%
rename from packages/i18n/src/test/subscribe-i18n.js
rename to packages/i18n/src/test/subscribe-i18n.ts
index b6c28b90b7ae4f..28fb59fcff2a42 100644
--- a/packages/i18n/src/test/subscribe-i18n.js
+++ b/packages/i18n/src/test/subscribe-i18n.ts
@@ -13,7 +13,7 @@ describe( 'i18n updates', () => {
 		const hooks = createHooks();
 		const i18n = createI18n( undefined, undefined, hooks );
 
-		const doneTranslations = [];
+		const doneTranslations: string[] = [];
 
 		function doTranslation() {
 			doneTranslations.push( i18n.__( 'original' ) );
@@ -30,9 +30,9 @@ describe( 'i18n updates', () => {
 		} );
 
 		// Add a filter and then remove it.
-		const filter = ( text ) => '[' + text + ']';
+		const filter = ( text: string ) => `[${ text }]`;
 		hooks.addFilter( 'i18n.gettext', 'test', filter );
-		hooks.removeFilter( 'i18n.gettext', 'test', filter );
+		hooks.removeFilter( 'i18n.gettext', 'test' );
 
 		expect( doneTranslations ).toEqual( [
 			'original', // No translations before setLocaleData.
diff --git a/packages/i18n/src/types.ts b/packages/i18n/src/types.ts
new file mode 100644
index 00000000000000..5ef38d85e076c1
--- /dev/null
+++ b/packages/i18n/src/types.ts
@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+import type sprintf from '@tannin/sprintf';
+import { type TanninDomainMetadata } from 'tannin';
+
+/**
+ * Return type for string translation functions.
+ *
+ * This type should be treated as if it were `string`.
+ */
+export type TranslatableText< T extends string > = string & {
+	/**
+	 * DO NOT USE! This property _does not exist_.
+	 * @private
+	 */
+	readonly __translatableText: T;
+};
+
+/**
+ * Type to extends TanninDomainMetadata to support additional properties.
+ */
+export type I18nDomainMetadata< TextDomain extends string > =
+	TanninDomainMetadata & {
+		domain?: TextDomain;
+		[ key: string ]: unknown;
+	};
+
+/**
+ * Locale data is a record of domain names to their metadata or translations.
+ */
+export type LocaleData< TextDomain extends string = string > = Record<
+	string,
+	I18nDomainMetadata< TextDomain > | string[]
+>;
+
+export type SubscribeCallback = () => void;
+export type UnsubscribeCallback = () => void;
+
+/**
+ * Retrieve the domain to use when calling domain-specific filters.
+ */
+export type getFilterDomain = ( domain?: string ) => string;
+
+/**
+ * An i18n instance
+ */
+export interface I18n< TextDomain extends string = string > {
+	/**
+	 * Returns locale data by domain in a
+	 * Jed-formatted JSON object shape.
+	 *
+	 * @see http://messageformat.github.io/Jed/
+	 */
+	getLocaleData: ( domain?: TextDomain ) => LocaleData< TextDomain >;
+
+	/**
+	 * Merges locale data into the Tannin instance by domain. Note that this
+	 * function will overwrite the domain configuration. Accepts data in a
+	 * Jed-formatted JSON object shape.
+	 *
+	 * @see http://messageformat.github.io/Jed/
+	 */
+	setLocaleData: (
+		data?: LocaleData< TextDomain >,
+		domain?: TextDomain
+	) => void;
+
+	/**
+	 * Merges locale data into the Tannin instance by domain. Note that this
+	 * function will also merge the domain configuration. Accepts data in a
+	 * Jed-formatted JSON object shape.
+	 *
+	 * @see http://messageformat.github.io/Jed/
+	 */
+	addLocaleData: (
+		data?: LocaleData< TextDomain >,
+		domain?: TextDomain
+	) => void;
+
+	/**
+	 * Resets all current Tannin instance locale data and sets the specified
+	 * locale data for the domain. Accepts data in a Jed-formatted JSON object shape.
+	 *
+	 * @see http://messageformat.github.io/Jed/
+	 */
+	resetLocaleData: (
+		data?: LocaleData< TextDomain >,
+		domain?: TextDomain
+	) => void;
+
+	/**
+	 * Subscribes to changes of locale data
+	 */
+	subscribe: ( callback: SubscribeCallback ) => UnsubscribeCallback;
+
+	/**
+	 * Retrieve the translation of text.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/__/
+	 */
+	__: < Text extends string >(
+		text: Text,
+		domain?: TextDomain
+	) => TranslatableText< Text >;
+
+	/**
+	 * Retrieve translated string with gettext context.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/_x/
+	 */
+	_x: < Text extends string >(
+		text: Text,
+		context: string,
+		domain?: TextDomain
+	) => TranslatableText< Text >;
+
+	/**
+	 * Translates and retrieves the singular or plural form based on the supplied
+	 * number.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/_n/
+	 */
+	_n: < Single extends string, Plural extends string >(
+		single: Single,
+		plural: Plural,
+		number: number,
+		domain?: TextDomain
+	) => TranslatableText< Single | Plural >;
+
+	/**
+	 * Translates and retrieves the singular or plural form based on the supplied
+	 * number, with gettext context.
+	 *
+	 * @see https://developer.wordpress.org/reference/functions/_nx/
+	 */
+	_nx: < Single extends string, Plural extends string >(
+		single: Single,
+		plural: Plural,
+		number: number,
+		context: string,
+		domain?: TextDomain
+	) => TranslatableText< Single | Plural >;
+
+	/**
+	 * Check if current locale is RTL.
+	 *
+	 * **RTL (Right To Left)** is a locale property indicating that text is written from right to left.
+	 * For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (ar) is another common
+	 * language written RTL. The opposite of RTL, LTR (Left To Right) is used in other languages,
+	 * including English (`en`, `en-US`, `en-GB`, etc.), Spanish (`es`), and French (`fr`).
+	 */
+	isRTL: () => boolean;
+
+	/**
+	 * Check if there is a translation for a given string in singular form.
+	 */
+	hasTranslation: (
+		single: string,
+		context?: string,
+		domain?: TextDomain
+	) => boolean;
+}
+
+export type DistributeSprintfArgs< T extends string > = T extends any
+	? Parameters< typeof sprintf< T > >[ 1 ]
+	: never;
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 3fdb5677f5c151..121b2554bc5ccc 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+-   Add new `dashboard` icon ([#70300](https://github.com/WordPress/gutenberg/pull/70300)).
+
+## 10.27.0 (2025-07-23)
+
+-  Update `cancelCircleFilled`, `currencyDollar`, `currencyPound`, `currencyEuro`, `globe`, `helpFilled`, `siteLogo`, `swatch`, to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70581](#70581)).
+-  Update `help`, `plusCircle`, and `typography` icons to have a unified circular footprint that matches other circle icons. ([#70299](https://github.com/WordPress/gutenberg/pull/70299)).
+-  Update `plusCircleFilled` to have unified circular size footprints. ([https://github.com/WordPress/gutenberg/pull/70650](#70650)).
+
+## 10.26.0 (2025-06-25)
+
+## 10.25.0 (2025-06-04)
+
+## 10.24.0 (2025-05-22)
+
+## 10.23.0 (2025-05-07)
+
+## 10.22.0 (2025-04-11)
+
 ## 10.21.0 (2025-03-27)
 
 ## 10.20.0 (2025-03-13)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ab333743ee54c9..41f4e358c8eb7e 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.21.0",
+	"version": "10.27.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/icon/index.js b/packages/icons/src/icon/index.js
deleted file mode 100644
index 221970bd21b930..00000000000000
--- a/packages/icons/src/icon/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { cloneElement, forwardRef } from '@wordpress/element';
-
-/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */
-
-/**
- * Return an SVG icon.
- *
- * @param {IconProps}                                 props icon is the SVG component to render
- *                                                          size is a number specifying the icon size in pixels
- *                                                          Other props will be passed to wrapped SVG component
- * @param {import('react').ForwardedRef<HTMLElement>} ref   The forwarded ref to the SVG element.
- *
- * @return {JSX.Element}  Icon component
- */
-function Icon( { icon, size = 24, ...props }, ref ) {
-	return cloneElement( icon, {
-		width: size,
-		height: size,
-		...props,
-		ref,
-	} );
-}
-
-export default forwardRef( Icon );
diff --git a/packages/icons/src/icon/index.ts b/packages/icons/src/icon/index.ts
new file mode 100644
index 00000000000000..e30a0d6a00e154
--- /dev/null
+++ b/packages/icons/src/icon/index.ts
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneElement, forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+import type { SVGProps } from '@wordpress/primitives';
+
+export interface IconProps extends SVGProps {
+	/**
+	 * The SVG component to render
+	 */
+	icon: ReactElement;
+	/**
+	 * The size of the icon in pixels
+	 *
+	 * @default 24
+	 */
+	size?: number;
+}
+
+/**
+ * Return an SVG icon.
+ *
+ * @param props The component props.
+ *
+ * @return Icon component
+ */
+export default forwardRef< HTMLElement, IconProps >(
+	( { icon, size = 24, ...props }: IconProps, ref ) => {
+		return cloneElement( icon, {
+			width: size,
+			height: size,
+			...props,
+			ref,
+		} );
+	}
+);
diff --git a/packages/icons/src/icon/stories/index.story.js b/packages/icons/src/icon/stories/index.story.tsx
similarity index 86%
rename from packages/icons/src/icon/stories/index.story.js
rename to packages/icons/src/icon/stories/index.story.tsx
index 406f986e6ef5dc..1aa715f9d1b163 100644
--- a/packages/icons/src/icon/stories/index.story.js
+++ b/packages/icons/src/icon/stories/index.story.tsx
@@ -11,6 +11,11 @@ import check from '../../library/check';
 import * as icons from '../../';
 import keywords from './keywords';
 
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
 const {
 	Icon: _Icon,
 
@@ -29,7 +34,7 @@ const meta = {
 };
 export default meta;
 
-export const Default = () => {
+export const Default = (): ReactElement => {
 	return (
 		<>
 			<div>
@@ -50,8 +55,8 @@ export const Default = () => {
 	);
 };
 
-const LibraryExample = () => {
-	const [ filter, setFilter ] = useState( '' );
+const LibraryExample = (): ReactElement => {
+	const [ filter, setFilter ] = useState< string >( '' );
 	const filteredIcons = filter.length
 		? Object.fromEntries(
 				Object.entries( availableIcons ).filter( ( [ name ] ) => {
@@ -61,7 +66,7 @@ const LibraryExample = () => {
 					return (
 						normalizedName.includes( normalizedFilter ) ||
 						// @ts-expect-error - Not worth the effort to cast `name`
-						keywords[ name ]?.some( ( keyword ) =>
+						keywords[ name ]?.some( ( keyword: string ) =>
 							keyword.toLowerCase().includes( normalizedFilter )
 						)
 					);
@@ -108,4 +113,4 @@ const LibraryExample = () => {
 	);
 };
 
-export const Library = () => <LibraryExample />;
+export const Library = (): ReactElement => <LibraryExample />;
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.ts
similarity index 99%
rename from packages/icons/src/index.js
rename to packages/icons/src/index.ts
index e82b09e5d5afe9..8dc5f3fa9fddb3 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.ts
@@ -80,6 +80,7 @@ export { default as currencyDollar } from './library/currency-dollar';
 export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as customPostType } from './library/custom-post-type';
+export { default as dashboard } from './library/dashboard';
 export { default as desktop } from './library/desktop';
 export { default as details } from './library/details';
 export { default as drafts } from './library/drafts';
diff --git a/packages/icons/src/library/add-card.js b/packages/icons/src/library/add-card.tsx
similarity index 100%
rename from packages/icons/src/library/add-card.js
rename to packages/icons/src/library/add-card.tsx
diff --git a/packages/icons/src/library/add-submenu.js b/packages/icons/src/library/add-submenu.tsx
similarity index 100%
rename from packages/icons/src/library/add-submenu.js
rename to packages/icons/src/library/add-submenu.tsx
diff --git a/packages/icons/src/library/add-template.js b/packages/icons/src/library/add-template.tsx
similarity index 100%
rename from packages/icons/src/library/add-template.js
rename to packages/icons/src/library/add-template.tsx
diff --git a/packages/icons/src/library/align-center.js b/packages/icons/src/library/align-center.tsx
similarity index 100%
rename from packages/icons/src/library/align-center.js
rename to packages/icons/src/library/align-center.tsx
diff --git a/packages/icons/src/library/align-justify.js b/packages/icons/src/library/align-justify.tsx
similarity index 100%
rename from packages/icons/src/library/align-justify.js
rename to packages/icons/src/library/align-justify.tsx
diff --git a/packages/icons/src/library/align-left.js b/packages/icons/src/library/align-left.tsx
similarity index 100%
rename from packages/icons/src/library/align-left.js
rename to packages/icons/src/library/align-left.tsx
diff --git a/packages/icons/src/library/align-none.js b/packages/icons/src/library/align-none.tsx
similarity index 100%
rename from packages/icons/src/library/align-none.js
rename to packages/icons/src/library/align-none.tsx
diff --git a/packages/icons/src/library/align-right.js b/packages/icons/src/library/align-right.tsx
similarity index 100%
rename from packages/icons/src/library/align-right.js
rename to packages/icons/src/library/align-right.tsx
diff --git a/packages/icons/src/library/archive.js b/packages/icons/src/library/archive.tsx
similarity index 100%
rename from packages/icons/src/library/archive.js
rename to packages/icons/src/library/archive.tsx
diff --git a/packages/icons/src/library/arrow-down-right.js b/packages/icons/src/library/arrow-down-right.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-down-right.js
rename to packages/icons/src/library/arrow-down-right.tsx
diff --git a/packages/icons/src/library/arrow-down.js b/packages/icons/src/library/arrow-down.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-down.js
rename to packages/icons/src/library/arrow-down.tsx
diff --git a/packages/icons/src/library/arrow-left.js b/packages/icons/src/library/arrow-left.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-left.js
rename to packages/icons/src/library/arrow-left.tsx
diff --git a/packages/icons/src/library/arrow-right.js b/packages/icons/src/library/arrow-right.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-right.js
rename to packages/icons/src/library/arrow-right.tsx
diff --git a/packages/icons/src/library/arrow-up-left.js b/packages/icons/src/library/arrow-up-left.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-up-left.js
rename to packages/icons/src/library/arrow-up-left.tsx
diff --git a/packages/icons/src/library/arrow-up.js b/packages/icons/src/library/arrow-up.tsx
similarity index 100%
rename from packages/icons/src/library/arrow-up.js
rename to packages/icons/src/library/arrow-up.tsx
diff --git a/packages/icons/src/library/aspect-ratio.js b/packages/icons/src/library/aspect-ratio.tsx
similarity index 100%
rename from packages/icons/src/library/aspect-ratio.js
rename to packages/icons/src/library/aspect-ratio.tsx
diff --git a/packages/icons/src/library/at-symbol.js b/packages/icons/src/library/at-symbol.tsx
similarity index 92%
rename from packages/icons/src/library/at-symbol.js
rename to packages/icons/src/library/at-symbol.tsx
index a67f74ecbd662f..67b1a26d7ffc07 100644
--- a/packages/icons/src/library/at-symbol.js
+++ b/packages/icons/src/library/at-symbol.tsx
@@ -4,12 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const atSymbol = (
-	<SVG
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<Path d="M12.5939 21C14.1472 21 16.1269 20.5701 17.0711 20.1975L16.6447 18.879C16.0964 19.051 14.3299 19.6242 12.6548 19.6242C7.4467 19.6242 4.67513 16.8726 4.67513 12C4.67513 7.21338 7.50762 4.34713 12.2893 4.34713C17.132 4.34713 19.4162 7.55732 19.4162 10.7675C19.4162 14.035 19.0508 15.4968 17.4975 15.4968C16.5838 15.4968 16.0964 14.7803 16.0964 13.9777V7.5H14.4822V8.30255H14.3909C14.1777 7.67198 12.9898 7.12739 11.467 7.2707C9.18274 7.5 7.4467 9.27707 7.4467 11.8567C7.4467 14.5796 8.81726 16.672 11.467 16.758C13.203 16.8153 14.1168 16.0127 14.4822 15.1815H14.5736C14.7563 16.414 16.401 16.8439 17.467 16.8439C20.6954 16.8439 21 13.5764 21 10.7962C21 6.86943 18.0761 3 12.3807 3C6.50254 3 3 6.3535 3 11.9427C3 17.7325 6.38071 21 12.5939 21ZM11.7107 15.2962C9.73096 15.2962 9.03046 13.6051 9.03046 11.7707C9.03046 10.1083 10.0355 8.67516 11.7716 8.67516C13.599 8.67516 14.5736 9.36306 14.5736 11.7707C14.5736 14.1497 13.7513 15.2962 11.7107 15.2962Z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/audio.js b/packages/icons/src/library/audio.tsx
similarity index 100%
rename from packages/icons/src/library/audio.js
rename to packages/icons/src/library/audio.tsx
diff --git a/packages/icons/src/library/background.js b/packages/icons/src/library/background.tsx
similarity index 100%
rename from packages/icons/src/library/background.js
rename to packages/icons/src/library/background.tsx
diff --git a/packages/icons/src/library/backup.js b/packages/icons/src/library/backup.tsx
similarity index 100%
rename from packages/icons/src/library/backup.js
rename to packages/icons/src/library/backup.tsx
diff --git a/packages/icons/src/library/bell-unread.js b/packages/icons/src/library/bell-unread.tsx
similarity index 100%
rename from packages/icons/src/library/bell-unread.js
rename to packages/icons/src/library/bell-unread.tsx
diff --git a/packages/icons/src/library/bell.js b/packages/icons/src/library/bell.tsx
similarity index 100%
rename from packages/icons/src/library/bell.js
rename to packages/icons/src/library/bell.tsx
diff --git a/packages/icons/src/library/block-default.js b/packages/icons/src/library/block-default.tsx
similarity index 100%
rename from packages/icons/src/library/block-default.js
rename to packages/icons/src/library/block-default.tsx
diff --git a/packages/icons/src/library/block-meta.js b/packages/icons/src/library/block-meta.tsx
similarity index 100%
rename from packages/icons/src/library/block-meta.js
rename to packages/icons/src/library/block-meta.tsx
diff --git a/packages/icons/src/library/block-table.js b/packages/icons/src/library/block-table.tsx
similarity index 100%
rename from packages/icons/src/library/block-table.js
rename to packages/icons/src/library/block-table.tsx
diff --git a/packages/icons/src/library/border.js b/packages/icons/src/library/border.tsx
similarity index 100%
rename from packages/icons/src/library/border.js
rename to packages/icons/src/library/border.tsx
diff --git a/packages/icons/src/library/box.js b/packages/icons/src/library/box.tsx
similarity index 100%
rename from packages/icons/src/library/box.js
rename to packages/icons/src/library/box.tsx
diff --git a/packages/icons/src/library/brush.js b/packages/icons/src/library/brush.tsx
similarity index 100%
rename from packages/icons/src/library/brush.js
rename to packages/icons/src/library/brush.tsx
diff --git a/packages/icons/src/library/bug.js b/packages/icons/src/library/bug.tsx
similarity index 100%
rename from packages/icons/src/library/bug.js
rename to packages/icons/src/library/bug.tsx
diff --git a/packages/icons/src/library/button.js b/packages/icons/src/library/button.tsx
similarity index 100%
rename from packages/icons/src/library/button.js
rename to packages/icons/src/library/button.tsx
diff --git a/packages/icons/src/library/buttons.js b/packages/icons/src/library/buttons.tsx
similarity index 100%
rename from packages/icons/src/library/buttons.js
rename to packages/icons/src/library/buttons.tsx
diff --git a/packages/icons/src/library/calendar.js b/packages/icons/src/library/calendar.tsx
similarity index 100%
rename from packages/icons/src/library/calendar.js
rename to packages/icons/src/library/calendar.tsx
diff --git a/packages/icons/src/library/cancel-circle-filled.js b/packages/icons/src/library/cancel-circle-filled.js
deleted file mode 100644
index 092ac5534ce9e9..00000000000000
--- a/packages/icons/src/library/cancel-circle-filled.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const cancelCircleFilled = (
-	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z" />
-	</SVG>
-);
-
-export default cancelCircleFilled;
diff --git a/packages/icons/src/library/cancel-circle-filled.tsx b/packages/icons/src/library/cancel-circle-filled.tsx
new file mode 100644
index 00000000000000..fb3555523dbcf9
--- /dev/null
+++ b/packages/icons/src/library/cancel-circle-filled.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const cancelCircleFilled = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm3.8 10.7-1.1 1.1-2.7-2.7-2.7 2.7-1.1-1.1 2.7-2.7-2.7-2.7 1.1-1.1 2.7 2.7 2.7-2.7 1.1 1.1-2.7 2.7 2.7 2.7Z" />
+	</SVG>
+);
+
+export default cancelCircleFilled;
diff --git a/packages/icons/src/library/caption.js b/packages/icons/src/library/caption.tsx
similarity index 100%
rename from packages/icons/src/library/caption.js
rename to packages/icons/src/library/caption.tsx
diff --git a/packages/icons/src/library/capture-photo.js b/packages/icons/src/library/capture-photo.tsx
similarity index 100%
rename from packages/icons/src/library/capture-photo.js
rename to packages/icons/src/library/capture-photo.tsx
diff --git a/packages/icons/src/library/capture-video.js b/packages/icons/src/library/capture-video.tsx
similarity index 100%
rename from packages/icons/src/library/capture-video.js
rename to packages/icons/src/library/capture-video.tsx
diff --git a/packages/icons/src/library/category.js b/packages/icons/src/library/category.tsx
similarity index 100%
rename from packages/icons/src/library/category.js
rename to packages/icons/src/library/category.tsx
diff --git a/packages/icons/src/library/caution-filled.js b/packages/icons/src/library/caution-filled.tsx
similarity index 100%
rename from packages/icons/src/library/caution-filled.js
rename to packages/icons/src/library/caution-filled.tsx
diff --git a/packages/icons/src/library/caution.js b/packages/icons/src/library/caution.tsx
similarity index 100%
rename from packages/icons/src/library/caution.js
rename to packages/icons/src/library/caution.tsx
diff --git a/packages/icons/src/library/chart-bar.js b/packages/icons/src/library/chart-bar.tsx
similarity index 100%
rename from packages/icons/src/library/chart-bar.js
rename to packages/icons/src/library/chart-bar.tsx
diff --git a/packages/icons/src/library/check.js b/packages/icons/src/library/check.tsx
similarity index 100%
rename from packages/icons/src/library/check.js
rename to packages/icons/src/library/check.tsx
diff --git a/packages/icons/src/library/chevron-down-small.js b/packages/icons/src/library/chevron-down-small.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-down-small.js
rename to packages/icons/src/library/chevron-down-small.tsx
diff --git a/packages/icons/src/library/chevron-down.js b/packages/icons/src/library/chevron-down.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-down.js
rename to packages/icons/src/library/chevron-down.tsx
diff --git a/packages/icons/src/library/chevron-left-small.js b/packages/icons/src/library/chevron-left-small.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-left-small.js
rename to packages/icons/src/library/chevron-left-small.tsx
diff --git a/packages/icons/src/library/chevron-left.js b/packages/icons/src/library/chevron-left.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-left.js
rename to packages/icons/src/library/chevron-left.tsx
diff --git a/packages/icons/src/library/chevron-right-small.js b/packages/icons/src/library/chevron-right-small.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-right-small.js
rename to packages/icons/src/library/chevron-right-small.tsx
diff --git a/packages/icons/src/library/chevron-right.js b/packages/icons/src/library/chevron-right.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-right.js
rename to packages/icons/src/library/chevron-right.tsx
diff --git a/packages/icons/src/library/chevron-up-down.js b/packages/icons/src/library/chevron-up-down.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-up-down.js
rename to packages/icons/src/library/chevron-up-down.tsx
diff --git a/packages/icons/src/library/chevron-up.js b/packages/icons/src/library/chevron-up.tsx
similarity index 100%
rename from packages/icons/src/library/chevron-up.js
rename to packages/icons/src/library/chevron-up.tsx
diff --git a/packages/icons/src/library/classic.js b/packages/icons/src/library/classic.tsx
similarity index 100%
rename from packages/icons/src/library/classic.js
rename to packages/icons/src/library/classic.tsx
diff --git a/packages/icons/src/library/close-small.js b/packages/icons/src/library/close-small.tsx
similarity index 100%
rename from packages/icons/src/library/close-small.js
rename to packages/icons/src/library/close-small.tsx
diff --git a/packages/icons/src/library/close.js b/packages/icons/src/library/close.tsx
similarity index 100%
rename from packages/icons/src/library/close.js
rename to packages/icons/src/library/close.tsx
diff --git a/packages/icons/src/library/cloud-download.js b/packages/icons/src/library/cloud-download.tsx
similarity index 100%
rename from packages/icons/src/library/cloud-download.js
rename to packages/icons/src/library/cloud-download.tsx
diff --git a/packages/icons/src/library/cloud-upload.js b/packages/icons/src/library/cloud-upload.tsx
similarity index 100%
rename from packages/icons/src/library/cloud-upload.js
rename to packages/icons/src/library/cloud-upload.tsx
diff --git a/packages/icons/src/library/cloud.js b/packages/icons/src/library/cloud.tsx
similarity index 100%
rename from packages/icons/src/library/cloud.js
rename to packages/icons/src/library/cloud.tsx
diff --git a/packages/icons/src/library/code.js b/packages/icons/src/library/code.tsx
similarity index 100%
rename from packages/icons/src/library/code.js
rename to packages/icons/src/library/code.tsx
diff --git a/packages/icons/src/library/cog.js b/packages/icons/src/library/cog.tsx
similarity index 100%
rename from packages/icons/src/library/cog.js
rename to packages/icons/src/library/cog.tsx
diff --git a/packages/icons/src/library/color.js b/packages/icons/src/library/color.tsx
similarity index 100%
rename from packages/icons/src/library/color.js
rename to packages/icons/src/library/color.tsx
diff --git a/packages/icons/src/library/column.js b/packages/icons/src/library/column.tsx
similarity index 100%
rename from packages/icons/src/library/column.js
rename to packages/icons/src/library/column.tsx
diff --git a/packages/icons/src/library/columns.js b/packages/icons/src/library/columns.tsx
similarity index 100%
rename from packages/icons/src/library/columns.js
rename to packages/icons/src/library/columns.tsx
diff --git a/packages/icons/src/library/comment-author-avatar.js b/packages/icons/src/library/comment-author-avatar.tsx
similarity index 100%
rename from packages/icons/src/library/comment-author-avatar.js
rename to packages/icons/src/library/comment-author-avatar.tsx
diff --git a/packages/icons/src/library/comment-author-name.js b/packages/icons/src/library/comment-author-name.tsx
similarity index 100%
rename from packages/icons/src/library/comment-author-name.js
rename to packages/icons/src/library/comment-author-name.tsx
diff --git a/packages/icons/src/library/comment-content.js b/packages/icons/src/library/comment-content.tsx
similarity index 100%
rename from packages/icons/src/library/comment-content.js
rename to packages/icons/src/library/comment-content.tsx
diff --git a/packages/icons/src/library/comment-edit-link.js b/packages/icons/src/library/comment-edit-link.tsx
similarity index 80%
rename from packages/icons/src/library/comment-edit-link.js
rename to packages/icons/src/library/comment-edit-link.tsx
index 0cb4d941d657a8..0f320bea20d5c6 100644
--- a/packages/icons/src/library/comment-edit-link.js
+++ b/packages/icons/src/library/comment-edit-link.tsx
@@ -4,12 +4,7 @@
 import { Path, SVG } from '@wordpress/primitives';
 
 const commentEditLink = (
-	<SVG
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<Path d="m6.249 11.065.44-.44h3.186l-1.5 1.5H7.31l-1.957 1.96A.792.792 0 0 1 4 13.524V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1.5L12.5 8V5.5h-7v6.315l.749-.75ZM20 19.75H7v-1.5h13v1.5Zm0-12.653-8.967 9.064L8 17l.867-2.935L17.833 5 20 7.097Z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/comment-reply-link.js b/packages/icons/src/library/comment-reply-link.tsx
similarity index 91%
rename from packages/icons/src/library/comment-reply-link.js
rename to packages/icons/src/library/comment-reply-link.tsx
index 147478e33818cf..406a3f141627a7 100644
--- a/packages/icons/src/library/comment-reply-link.js
+++ b/packages/icons/src/library/comment-reply-link.tsx
@@ -4,12 +4,7 @@
 import { Path, SVG } from '@wordpress/primitives';
 
 const commentReplyLink = (
-	<SVG
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<Path d="M6.68822 10.625L6.24878 11.0649L5.5 11.8145L5.5 5.5L12.5 5.5V8L14 6.5V5C14 4.44772 13.5523 4 13 4H5C4.44772 4 4 4.44771 4 5V13.5247C4 13.8173 4.16123 14.086 4.41935 14.2237C4.72711 14.3878 5.10601 14.3313 5.35252 14.0845L7.31 12.125H8.375L9.875 10.625H7.31H6.68822ZM14.5605 10.4983L11.6701 13.75H16.9975C17.9963 13.75 18.7796 14.1104 19.3553 14.7048C19.9095 15.2771 20.2299 16.0224 20.4224 16.7443C20.7645 18.0276 20.7543 19.4618 20.7487 20.2544C20.7481 20.345 20.7475 20.4272 20.7475 20.4999L19.2475 20.5001C19.2475 20.4191 19.248 20.3319 19.2484 20.2394V20.2394C19.2526 19.4274 19.259 18.2035 18.973 17.1307C18.8156 16.5401 18.586 16.0666 18.2778 15.7483C17.9909 15.4521 17.5991 15.25 16.9975 15.25H11.8106L14.5303 17.9697L13.4696 19.0303L8.96956 14.5303L13.4394 9.50171L14.5605 10.4983Z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/comment.js b/packages/icons/src/library/comment.tsx
similarity index 100%
rename from packages/icons/src/library/comment.js
rename to packages/icons/src/library/comment.tsx
diff --git a/packages/icons/src/library/connection.js b/packages/icons/src/library/connection.tsx
similarity index 100%
rename from packages/icons/src/library/connection.js
rename to packages/icons/src/library/connection.tsx
diff --git a/packages/icons/src/library/copy-small.js b/packages/icons/src/library/copy-small.tsx
similarity index 100%
rename from packages/icons/src/library/copy-small.js
rename to packages/icons/src/library/copy-small.tsx
diff --git a/packages/icons/src/library/copy.js b/packages/icons/src/library/copy.tsx
similarity index 100%
rename from packages/icons/src/library/copy.js
rename to packages/icons/src/library/copy.tsx
diff --git a/packages/icons/src/library/cover.js b/packages/icons/src/library/cover.tsx
similarity index 100%
rename from packages/icons/src/library/cover.js
rename to packages/icons/src/library/cover.tsx
diff --git a/packages/icons/src/library/create.js b/packages/icons/src/library/create.tsx
similarity index 100%
rename from packages/icons/src/library/create.js
rename to packages/icons/src/library/create.tsx
diff --git a/packages/icons/src/library/crop.js b/packages/icons/src/library/crop.tsx
similarity index 100%
rename from packages/icons/src/library/crop.js
rename to packages/icons/src/library/crop.tsx
diff --git a/packages/icons/src/library/currency-dollar.js b/packages/icons/src/library/currency-dollar.js
deleted file mode 100644
index a93d2037346390..00000000000000
--- a/packages/icons/src/library/currency-dollar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-const currencyDollar = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zm-1.338 4.877c-.314.22-.412.452-.412.623 0 .171.098.403.412.623.312.218.783.377 1.338.377.825 0 1.605.233 2.198.648.59.414 1.052 1.057 1.052 1.852 0 .795-.461 1.438-1.052 1.852-.41.286-.907.486-1.448.582v.316a.75.75 0 01-1.5 0v-.316a3.64 3.64 0 01-1.448-.582c-.59-.414-1.052-1.057-1.052-1.852a.75.75 0 011.5 0c0 .171.098.403.412.623.312.218.783.377 1.338.377s1.026-.159 1.338-.377c.314-.22.412-.452.412-.623 0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377-.825 0-1.605-.233-2.198-.648-.59-.414-1.052-1.057-1.052-1.852 0-.795.461-1.438 1.052-1.852a3.64 3.64 0 011.448-.582V7.5a.75.75 0 011.5 0v.316c.54.096 1.039.296 1.448.582.59.414 1.052 1.057 1.052 1.852a.75.75 0 01-1.5 0c0-.171-.098-.403-.412-.623-.312-.218-.783-.377-1.338-.377s-1.026.159-1.338.377z" />
-	</SVG>
-);
-
-export default currencyDollar;
diff --git a/packages/icons/src/library/currency-dollar.tsx b/packages/icons/src/library/currency-dollar.tsx
new file mode 100644
index 00000000000000..76760ea28fee69
--- /dev/null
+++ b/packages/icons/src/library/currency-dollar.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const currencyDollar = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7.1 5.7 8 6.9c.4-.3.9-.6 1.5-.8l-.6-1.4c-.7.3-1.3.6-1.8 1ZM4.6 8.9l1.4.6c.2-.5.5-1 .8-1.5l-1.2-.9c-.4.6-.8 1.2-1 1.8Zm14.8 0c-.3-.7-.6-1.3-1-1.8l-1.2.9c.3.4.6.9.8 1.5l1.4-.6ZM7.1 18.3c.6.4 1.2.8 1.8 1l.6-1.4c-.5-.2-1-.5-1.5-.8l-.9 1.2ZM5.5 12v-.9h-.7l-.7-.2v2l1.5-.2v-.9Zm-.7 3h-.2c.3.7.6 1.3 1 1.9l1.2-.9c-.3-.4-.6-.9-.8-1.5l-1.2.5Zm9.7 3 .5 1.2v.2c.7-.3 1.3-.6 1.9-1l-.9-1.2c-.4.3-.9.6-1.5.8Zm-2.5.5h-.9l-.2 1.3v.2h2l-.2-1.5h-.9Zm7.9-7.5-1.5.2V13h.7l.7.2v-2ZM18 14.5c-.2.5-.5 1-.8 1.5l1.2.9c.4-.6.8-1.2 1-1.8h-.2l-1.2-.6ZM11 4.1l.2 1.5H13V4.2h-1.9ZM14.5 6c.5.2 1 .5 1.5.8l.9-1.2c-.6-.4-1.2-.8-1.8-1L14.5 6Z" />
+	</SVG>
+);
+
+export default currencyDollar;
diff --git a/packages/icons/src/library/currency-euro.js b/packages/icons/src/library/currency-euro.js
deleted file mode 100644
index 9522211027175e..00000000000000
--- a/packages/icons/src/library/currency-euro.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-const currencyEuro = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M12 3.25a8.75 8.75 0 100 17.5 8.75 8.75 0 000-17.5zM4.75 12a7.25 7.25 0 1114.5 0 7.25 7.25 0 01-14.5 0zm9.195 1.944a2.75 2.75 0 01-4.066-.194h.621a.75.75 0 000-1.5H9.262a2.767 2.767 0 010-.5H11.5a.75.75 0 000-1.5H9.88a2.75 2.75 0 014.066-.194.75.75 0 001.06-1.061 4.25 4.25 0 00-6.88 1.255H7.5a.75.75 0 000 1.5h.258c-.01.166-.01.334 0 .5H7.5a.75.75 0 000 1.5h.626a4.25 4.25 0 006.88 1.255.75.75 0 00-1.06-1.06z" />
-	</SVG>
-);
-
-export default currencyEuro;
diff --git a/packages/icons/src/library/currency-euro.tsx b/packages/icons/src/library/currency-euro.tsx
new file mode 100644
index 00000000000000..b46554e98bcbdd
--- /dev/null
+++ b/packages/icons/src/library/currency-euro.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const currencyEuro = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M11.9 9.3c.4 0 .8 0 1.1.2.4.1.7.3 1 .6.1.1.3.2.5.2s.4 0 .5-.2c.1-.1.2-.3.2-.5s0-.4-.2-.5c-.5-.5-1.1-.8-1.7-1.1-.7-.2-1.4-.2-2-.1-.7.1-1.3.4-1.9.8-.5.4-1 1-1.3 1.6h-.6c-.2 0-.4 0-.5.2-.1.1-.2.3-.2.5s0 .4.2.5c.1.1.3.2.5.2h.3v.5h-.3c-.2 0-.4 0-.5.2-.1.1-.2.3-.2.5s0 .4.2.5c.1.1.3.2.5.2h.6c.3.6.7 1.2 1.3 1.6.5.4 1.2.7 1.9.8.7.1 1.4 0 2-.1.7-.2 1.3-.6 1.7-1.1.1-.1.2-.3.2-.5s0-.4-.2-.5-.3-.2-.5-.2-.4 0-.5.2c-.3.3-.6.5-1 .6-.4.1-.7.2-1.1.2-.4 0-.8-.1-1.1-.3-.3-.2-.6-.4-.9-.7h.6c.2 0 .4 0 .5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2H9.3v-.5h2.2c.2 0 .4 0 .5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2H9.9c.2-.3.5-.5.9-.7s.7-.3 1.1-.3ZM12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm0 14.5c-3.6 0-6.5-2.9-6.5-6.5S8.4 5.5 12 5.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5Z" />
+	</SVG>
+);
+
+export default currencyEuro;
diff --git a/packages/icons/src/library/currency-pound.js b/packages/icons/src/library/currency-pound.js
deleted file mode 100644
index e027e2ba955c33..00000000000000
--- a/packages/icons/src/library/currency-pound.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-const currencyPound = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path
-			fillRule="evenodd"
-			d="M3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zm.25 4c-.787 0-1.425.638-1.425 1.425 0 .058.014.147.069.3.04.113.088.223.147.36a26.094 26.094 0 01.173.415H12.5a.75.75 0 010 1.5h-.953c.002.047.003.095.003.144 0 .617-.236 1.168-.511 1.606h3.386a.75.75 0 010 1.5H9.35a.75.75 0 01-.452-1.349l.007-.005a4.417 4.417 0 00.596-.581c.328-.39.549-.806.549-1.171 0-.05-.002-.097-.004-.144H9.5a.75.75 0 010-1.5h.088a5.875 5.875 0 01-.106-.27 2.382 2.382 0 01-.157-.805 2.925 2.925 0 015.637-1.097.75.75 0 01-1.39.563 1.426 1.426 0 00-1.322-.891zm-3.35 5.9l.45.6-.45-.6z"
-		/>
-	</SVG>
-);
-
-export default currencyPound;
diff --git a/packages/icons/src/library/currency-pound.tsx b/packages/icons/src/library/currency-pound.tsx
new file mode 100644
index 00000000000000..00838a6f2f5ac5
--- /dev/null
+++ b/packages/icons/src/library/currency-pound.tsx
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const currencyPound = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			d="M14.4 14.5H11c.3-.4.5-1 .5-1.6v-.1h1c.2 0 .4 0 .5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2h-1.3c0-.1-.1-.3-.2-.4 0-.1-.1-.2-.1-.4v-.3c0-.8.6-1.4 1.4-1.4s.6 0 .8.2c.2.2.4.4.5.6 0 .2.2.3.4.4h.6c.2 0 .3-.2.4-.4v-.6c-.3-.6-.7-1.2-1.3-1.5-.6-.3-1.3-.4-2-.3s-1.3.5-1.7 1c-.4.5-.7 1.2-.7 1.9 0 .3 0 .5.2.8 0 0 0 .2.1.3-.2 0-.4 0-.5.2-.1.1-.2.3-.2.5s0 .4.2.5c.1.1.3.2.5.2h.5v.1c0 .4-.2.8-.5 1.2l-.6.6c-.1 0-.2.2-.3.4v.5c0 .1.1.3.3.4.1 0 .3.1.4.1h5.1c.2 0 .4 0 .5-.2.1-.1.2-.3.2-.5s0-.4-.2-.5c-.1-.1-.3-.2-.5-.2ZM12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm0 14.5c-3.6 0-6.5-2.9-6.5-6.5S8.4 5.5 12 5.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5Z"
+		/>
+	</SVG>
+);
+
+export default currencyPound;
diff --git a/packages/icons/src/library/custom-link.js b/packages/icons/src/library/custom-link.tsx
similarity index 100%
rename from packages/icons/src/library/custom-link.js
rename to packages/icons/src/library/custom-link.tsx
diff --git a/packages/icons/src/library/custom-post-type.js b/packages/icons/src/library/custom-post-type.tsx
similarity index 100%
rename from packages/icons/src/library/custom-post-type.js
rename to packages/icons/src/library/custom-post-type.tsx
diff --git a/packages/icons/src/library/dashboard.tsx b/packages/icons/src/library/dashboard.tsx
new file mode 100644
index 00000000000000..81e8498beae3e5
--- /dev/null
+++ b/packages/icons/src/library/dashboard.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const dashboard = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12 5a8 8 0 0 1 3.842.984L14.726 7.1a6.502 6.502 0 0 0-7.323 1.303 6.5 6.5 0 0 0 0 9.194l-1.06 1.06A8 8 0 0 1 12 5Zm7.021 4.168a8 8 0 0 1-1.364 9.49l-1.06-1.061a6.5 6.5 0 0 0 1.307-7.312l1.117-1.117ZM17.47 6.47a.75.75 0 1 1 1.06 1.06l-5.083 5.082a1.5 1.5 0 1 1-1.06-1.06L17.47 6.47Z" />
+	</SVG>
+);
+
+export default dashboard;
diff --git a/packages/icons/src/library/desktop.js b/packages/icons/src/library/desktop.tsx
similarity index 100%
rename from packages/icons/src/library/desktop.js
rename to packages/icons/src/library/desktop.tsx
diff --git a/packages/icons/src/library/details.js b/packages/icons/src/library/details.tsx
similarity index 100%
rename from packages/icons/src/library/details.js
rename to packages/icons/src/library/details.tsx
diff --git a/packages/icons/src/library/download.js b/packages/icons/src/library/download.tsx
similarity index 100%
rename from packages/icons/src/library/download.js
rename to packages/icons/src/library/download.tsx
diff --git a/packages/icons/src/library/drafts.js b/packages/icons/src/library/drafts.tsx
similarity index 100%
rename from packages/icons/src/library/drafts.js
rename to packages/icons/src/library/drafts.tsx
diff --git a/packages/icons/src/library/drag-handle.js b/packages/icons/src/library/drag-handle.tsx
similarity index 72%
rename from packages/icons/src/library/drag-handle.js
rename to packages/icons/src/library/drag-handle.tsx
index ae5b78c12bc787..ca55795d4f4027 100644
--- a/packages/icons/src/library/drag-handle.js
+++ b/packages/icons/src/library/drag-handle.tsx
@@ -4,12 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const dragHandle = (
-	<SVG
-		width="24"
-		height="24"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-	>
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path d="M8 7h2V5H8v2zm0 6h2v-2H8v2zm0 6h2v-2H8v2zm6-14v2h2V5h-2zm0 8h2v-2h-2v2zm0 6h2v-2h-2v2z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/drawer-left.js b/packages/icons/src/library/drawer-left.tsx
similarity index 80%
rename from packages/icons/src/library/drawer-left.js
rename to packages/icons/src/library/drawer-left.tsx
index 2e1626fb1fe17a..132412463a38d6 100644
--- a/packages/icons/src/library/drawer-left.js
+++ b/packages/icons/src/library/drawer-left.tsx
@@ -4,12 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const drawerLeft = (
-	<SVG
-		width="24"
-		height="24"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-	>
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path
 			fillRule="evenodd"
 			clipRule="evenodd"
diff --git a/packages/icons/src/library/drawer-right.js b/packages/icons/src/library/drawer-right.tsx
similarity index 80%
rename from packages/icons/src/library/drawer-right.js
rename to packages/icons/src/library/drawer-right.tsx
index 95a8e72f775fb1..bc06bd7f9e7dbb 100644
--- a/packages/icons/src/library/drawer-right.js
+++ b/packages/icons/src/library/drawer-right.tsx
@@ -4,12 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const drawerRight = (
-	<SVG
-		width="24"
-		height="24"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-	>
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 		<Path
 			fillRule="evenodd"
 			clipRule="evenodd"
diff --git a/packages/icons/src/library/edit.js b/packages/icons/src/library/edit.tsx
similarity index 100%
rename from packages/icons/src/library/edit.js
rename to packages/icons/src/library/edit.tsx
diff --git a/packages/icons/src/library/envelope.js b/packages/icons/src/library/envelope.tsx
similarity index 100%
rename from packages/icons/src/library/envelope.js
rename to packages/icons/src/library/envelope.tsx
diff --git a/packages/icons/src/library/error.js b/packages/icons/src/library/error.tsx
similarity index 100%
rename from packages/icons/src/library/error.js
rename to packages/icons/src/library/error.tsx
diff --git a/packages/icons/src/library/external.js b/packages/icons/src/library/external.tsx
similarity index 100%
rename from packages/icons/src/library/external.js
rename to packages/icons/src/library/external.tsx
diff --git a/packages/icons/src/library/file.js b/packages/icons/src/library/file.tsx
similarity index 100%
rename from packages/icons/src/library/file.js
rename to packages/icons/src/library/file.tsx
diff --git a/packages/icons/src/library/filter.js b/packages/icons/src/library/filter.tsx
similarity index 100%
rename from packages/icons/src/library/filter.js
rename to packages/icons/src/library/filter.tsx
diff --git a/packages/icons/src/library/flip-horizontal.js b/packages/icons/src/library/flip-horizontal.tsx
similarity index 100%
rename from packages/icons/src/library/flip-horizontal.js
rename to packages/icons/src/library/flip-horizontal.tsx
diff --git a/packages/icons/src/library/flip-vertical.js b/packages/icons/src/library/flip-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/flip-vertical.js
rename to packages/icons/src/library/flip-vertical.tsx
diff --git a/packages/icons/src/library/footer.js b/packages/icons/src/library/footer.tsx
similarity index 100%
rename from packages/icons/src/library/footer.js
rename to packages/icons/src/library/footer.tsx
diff --git a/packages/icons/src/library/format-bold.js b/packages/icons/src/library/format-bold.tsx
similarity index 100%
rename from packages/icons/src/library/format-bold.js
rename to packages/icons/src/library/format-bold.tsx
diff --git a/packages/icons/src/library/format-capitalize.js b/packages/icons/src/library/format-capitalize.tsx
similarity index 100%
rename from packages/icons/src/library/format-capitalize.js
rename to packages/icons/src/library/format-capitalize.tsx
diff --git a/packages/icons/src/library/format-indent-rtl.js b/packages/icons/src/library/format-indent-rtl.tsx
similarity index 100%
rename from packages/icons/src/library/format-indent-rtl.js
rename to packages/icons/src/library/format-indent-rtl.tsx
diff --git a/packages/icons/src/library/format-indent.js b/packages/icons/src/library/format-indent.tsx
similarity index 100%
rename from packages/icons/src/library/format-indent.js
rename to packages/icons/src/library/format-indent.tsx
diff --git a/packages/icons/src/library/format-italic.js b/packages/icons/src/library/format-italic.tsx
similarity index 100%
rename from packages/icons/src/library/format-italic.js
rename to packages/icons/src/library/format-italic.tsx
diff --git a/packages/icons/src/library/format-list-bullets-rtl.js b/packages/icons/src/library/format-list-bullets-rtl.tsx
similarity index 100%
rename from packages/icons/src/library/format-list-bullets-rtl.js
rename to packages/icons/src/library/format-list-bullets-rtl.tsx
diff --git a/packages/icons/src/library/format-list-bullets.js b/packages/icons/src/library/format-list-bullets.tsx
similarity index 100%
rename from packages/icons/src/library/format-list-bullets.js
rename to packages/icons/src/library/format-list-bullets.tsx
diff --git a/packages/icons/src/library/format-list-numbered-rtl.js b/packages/icons/src/library/format-list-numbered-rtl.tsx
similarity index 100%
rename from packages/icons/src/library/format-list-numbered-rtl.js
rename to packages/icons/src/library/format-list-numbered-rtl.tsx
diff --git a/packages/icons/src/library/format-list-numbered.js b/packages/icons/src/library/format-list-numbered.tsx
similarity index 100%
rename from packages/icons/src/library/format-list-numbered.js
rename to packages/icons/src/library/format-list-numbered.tsx
diff --git a/packages/icons/src/library/format-lowercase.js b/packages/icons/src/library/format-lowercase.tsx
similarity index 100%
rename from packages/icons/src/library/format-lowercase.js
rename to packages/icons/src/library/format-lowercase.tsx
diff --git a/packages/icons/src/library/format-ltr.js b/packages/icons/src/library/format-ltr.tsx
similarity index 100%
rename from packages/icons/src/library/format-ltr.js
rename to packages/icons/src/library/format-ltr.tsx
diff --git a/packages/icons/src/library/format-outdent-rtl.js b/packages/icons/src/library/format-outdent-rtl.tsx
similarity index 100%
rename from packages/icons/src/library/format-outdent-rtl.js
rename to packages/icons/src/library/format-outdent-rtl.tsx
diff --git a/packages/icons/src/library/format-outdent.js b/packages/icons/src/library/format-outdent.tsx
similarity index 100%
rename from packages/icons/src/library/format-outdent.js
rename to packages/icons/src/library/format-outdent.tsx
diff --git a/packages/icons/src/library/format-rtl.js b/packages/icons/src/library/format-rtl.tsx
similarity index 100%
rename from packages/icons/src/library/format-rtl.js
rename to packages/icons/src/library/format-rtl.tsx
diff --git a/packages/icons/src/library/format-strikethrough.js b/packages/icons/src/library/format-strikethrough.tsx
similarity index 100%
rename from packages/icons/src/library/format-strikethrough.js
rename to packages/icons/src/library/format-strikethrough.tsx
diff --git a/packages/icons/src/library/format-underline.js b/packages/icons/src/library/format-underline.tsx
similarity index 100%
rename from packages/icons/src/library/format-underline.js
rename to packages/icons/src/library/format-underline.tsx
diff --git a/packages/icons/src/library/format-uppercase.js b/packages/icons/src/library/format-uppercase.tsx
similarity index 100%
rename from packages/icons/src/library/format-uppercase.js
rename to packages/icons/src/library/format-uppercase.tsx
diff --git a/packages/icons/src/library/fullscreen.js b/packages/icons/src/library/fullscreen.tsx
similarity index 100%
rename from packages/icons/src/library/fullscreen.js
rename to packages/icons/src/library/fullscreen.tsx
diff --git a/packages/icons/src/library/funnel.js b/packages/icons/src/library/funnel.tsx
similarity index 100%
rename from packages/icons/src/library/funnel.js
rename to packages/icons/src/library/funnel.tsx
diff --git a/packages/icons/src/library/gallery.js b/packages/icons/src/library/gallery.tsx
similarity index 100%
rename from packages/icons/src/library/gallery.js
rename to packages/icons/src/library/gallery.tsx
diff --git a/packages/icons/src/library/globe.js b/packages/icons/src/library/globe.js
deleted file mode 100644
index fa2214bd639ef2..00000000000000
--- a/packages/icons/src/library/globe.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const globe = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M12 3.3c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8s-4-8.8-8.8-8.8zm6.5 5.5h-2.6C15.4 7.3 14.8 6 14 5c2 .6 3.6 2 4.5 3.8zm.7 3.2c0 .6-.1 1.2-.2 1.8h-2.9c.1-.6.1-1.2.1-1.8s-.1-1.2-.1-1.8H19c.2.6.2 1.2.2 1.8zM12 18.7c-1-.7-1.8-1.9-2.3-3.5h4.6c-.5 1.6-1.3 2.9-2.3 3.5zm-2.6-4.9c-.1-.6-.1-1.1-.1-1.8 0-.6.1-1.2.1-1.8h5.2c.1.6.1 1.1.1 1.8s-.1 1.2-.1 1.8H9.4zM4.8 12c0-.6.1-1.2.2-1.8h2.9c-.1.6-.1 1.2-.1 1.8 0 .6.1 1.2.1 1.8H5c-.2-.6-.2-1.2-.2-1.8zM12 5.3c1 .7 1.8 1.9 2.3 3.5H9.7c.5-1.6 1.3-2.9 2.3-3.5zM10 5c-.8 1-1.4 2.3-1.8 3.8H5.5C6.4 7 8 5.6 10 5zM5.5 15.3h2.6c.4 1.5 1 2.8 1.8 3.7-1.8-.6-3.5-2-4.4-3.7zM14 19c.8-1 1.4-2.2 1.8-3.7h2.6C17.6 17 16 18.4 14 19z" />
-	</SVG>
-);
-
-export default globe;
diff --git a/packages/icons/src/library/globe.tsx b/packages/icons/src/library/globe.tsx
new file mode 100644
index 00000000000000..11855f2caf7c70
--- /dev/null
+++ b/packages/icons/src/library/globe.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const globe = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm6.5 8c0 .6 0 1.2-.2 1.8h-2.7c0-.6.2-1.1.2-1.8s0-1.2-.2-1.8h2.7c.2.6.2 1.1.2 1.8Zm-.9-3.2h-2.4c-.3-.9-.7-1.8-1.1-2.4-.1-.2-.2-.4-.3-.5 1.6.5 3 1.6 3.8 3ZM12.8 17c-.3.5-.6 1-.8 1.3-.2-.3-.5-.8-.8-1.3-.3-.5-.6-1.1-.8-1.7h3.3c-.2.6-.5 1.2-.8 1.7Zm-2.9-3.2c-.1-.6-.2-1.1-.2-1.8s0-1.2.2-1.8H14c.1.6.2 1.1.2 1.8s0 1.2-.2 1.8H9.9ZM11.2 7c.3-.5.6-1 .8-1.3.2.3.5.8.8 1.3.3.5.6 1.1.8 1.7h-3.3c.2-.6.5-1.2.8-1.7Zm-1-1.2c-.1.2-.2.3-.3.5-.4.7-.8 1.5-1.1 2.4H6.4c.8-1.4 2.2-2.5 3.8-3Zm-1.8 8H5.7c-.2-.6-.2-1.1-.2-1.8s0-1.2.2-1.8h2.7c0 .6-.2 1.1-.2 1.8s0 1.2.2 1.8Zm-2 1.4h2.4c.3.9.7 1.8 1.1 2.4.1.2.2.4.3.5-1.6-.5-3-1.6-3.8-3Zm7.4 3c.1-.2.2-.3.3-.5.4-.7.8-1.5 1.1-2.4h2.4c-.8 1.4-2.2 2.5-3.8 3Z" />
+	</SVG>
+);
+
+export default globe;
diff --git a/packages/icons/src/library/grid.js b/packages/icons/src/library/grid.tsx
similarity index 100%
rename from packages/icons/src/library/grid.js
rename to packages/icons/src/library/grid.tsx
diff --git a/packages/icons/src/library/group.js b/packages/icons/src/library/group.tsx
similarity index 100%
rename from packages/icons/src/library/group.js
rename to packages/icons/src/library/group.tsx
diff --git a/packages/icons/src/library/handle.js b/packages/icons/src/library/handle.tsx
similarity index 100%
rename from packages/icons/src/library/handle.js
rename to packages/icons/src/library/handle.tsx
diff --git a/packages/icons/src/library/header.js b/packages/icons/src/library/header.tsx
similarity index 100%
rename from packages/icons/src/library/header.js
rename to packages/icons/src/library/header.tsx
diff --git a/packages/icons/src/library/heading-level-1.js b/packages/icons/src/library/heading-level-1.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-1.js
rename to packages/icons/src/library/heading-level-1.tsx
diff --git a/packages/icons/src/library/heading-level-2.js b/packages/icons/src/library/heading-level-2.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-2.js
rename to packages/icons/src/library/heading-level-2.tsx
diff --git a/packages/icons/src/library/heading-level-3.js b/packages/icons/src/library/heading-level-3.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-3.js
rename to packages/icons/src/library/heading-level-3.tsx
diff --git a/packages/icons/src/library/heading-level-4.js b/packages/icons/src/library/heading-level-4.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-4.js
rename to packages/icons/src/library/heading-level-4.tsx
diff --git a/packages/icons/src/library/heading-level-5.js b/packages/icons/src/library/heading-level-5.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-5.js
rename to packages/icons/src/library/heading-level-5.tsx
diff --git a/packages/icons/src/library/heading-level-6.js b/packages/icons/src/library/heading-level-6.tsx
similarity index 100%
rename from packages/icons/src/library/heading-level-6.js
rename to packages/icons/src/library/heading-level-6.tsx
diff --git a/packages/icons/src/library/heading.js b/packages/icons/src/library/heading.tsx
similarity index 100%
rename from packages/icons/src/library/heading.js
rename to packages/icons/src/library/heading.tsx
diff --git a/packages/icons/src/library/help-filled.js b/packages/icons/src/library/help-filled.js
deleted file mode 100644
index 06c8d0437a97c7..00000000000000
--- a/packages/icons/src/library/help-filled.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const helpFilled = (
-	<SVG
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		width="24"
-		height="24"
-	>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-1 16v-2h2v2h-2zm2-3v-1.141A3.991 3.991 0 0016 10a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2z"
-		/>
-	</SVG>
-);
-
-export default helpFilled;
diff --git a/packages/icons/src/library/help-filled.tsx b/packages/icons/src/library/help-filled.tsx
new file mode 100644
index 00000000000000..7cea3d1fd7292b
--- /dev/null
+++ b/packages/icons/src/library/help-filled.tsx
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const helpFilled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm.8 12.5h-1.5V15h1.5v1.5Zm2.1-5.6c-.1.5-.4 1.1-.8 1.5-.4.4-.9.7-1.4.8v.8h-1.5v-1.2c0-.6.5-1 .9-1s.7-.2 1-.5c.2-.3.4-.7.4-1 0-.4-.2-.7-.5-1-.3-.3-.6-.4-1-.4s-.8.2-1.1.4c-.3.3-.4.7-.4 1.1H9c0-.6.2-1.1.5-1.6s.7-.9 1.2-1.1c.5-.2 1.1-.3 1.6-.3s1.1.3 1.5.6c.4.3.8.8 1 1.3.2.5.2 1.1.1 1.6Z"
+		/>
+	</SVG>
+);
+
+export default helpFilled;
diff --git a/packages/icons/src/library/help.js b/packages/icons/src/library/help.js
deleted file mode 100644
index 9de427fd0f6d65..00000000000000
--- a/packages/icons/src/library/help.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const help = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M12 4.75a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zM3.25 12a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0zM12 8.75a1.5 1.5 0 01.167 2.99c-.465.052-.917.44-.917 1.01V14h1.5v-.845A3 3 0 109 10.25h1.5a1.5 1.5 0 011.5-1.5zM11.25 15v1.5h1.5V15h-1.5z" />
-	</SVG>
-);
-
-export default help;
diff --git a/packages/icons/src/library/help.tsx b/packages/icons/src/library/help.tsx
new file mode 100644
index 00000000000000..f2fae9356f61d8
--- /dev/null
+++ b/packages/icons/src/library/help.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const help = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12 4a8 8 0 1 1 .001 16.001A8 8 0 0 1 12 4Zm0 1.5a6.5 6.5 0 1 0-.001 13.001A6.5 6.5 0 0 0 12 5.5Zm.75 11h-1.5V15h1.5v1.5Zm-.445-9.234a3 3 0 0 1 .445 5.89V14h-1.5v-1.25c0-.57.452-.958.917-1.01A1.5 1.5 0 0 0 12 8.75a1.5 1.5 0 0 0-1.5 1.5H9a3 3 0 0 1 3.305-2.984Z" />
+	</SVG>
+);
+
+export default help;
diff --git a/packages/icons/src/library/home-button.js b/packages/icons/src/library/home-button.tsx
similarity index 100%
rename from packages/icons/src/library/home-button.js
rename to packages/icons/src/library/home-button.tsx
diff --git a/packages/icons/src/library/home.js b/packages/icons/src/library/home.tsx
similarity index 100%
rename from packages/icons/src/library/home.js
rename to packages/icons/src/library/home.tsx
diff --git a/packages/icons/src/library/html.js b/packages/icons/src/library/html.tsx
similarity index 100%
rename from packages/icons/src/library/html.js
rename to packages/icons/src/library/html.tsx
diff --git a/packages/icons/src/library/image.js b/packages/icons/src/library/image.tsx
similarity index 100%
rename from packages/icons/src/library/image.js
rename to packages/icons/src/library/image.tsx
diff --git a/packages/icons/src/library/inbox.js b/packages/icons/src/library/inbox.tsx
similarity index 100%
rename from packages/icons/src/library/inbox.js
rename to packages/icons/src/library/inbox.tsx
diff --git a/packages/icons/src/library/info.js b/packages/icons/src/library/info.tsx
similarity index 100%
rename from packages/icons/src/library/info.js
rename to packages/icons/src/library/info.tsx
diff --git a/packages/icons/src/library/insert-after.js b/packages/icons/src/library/insert-after.tsx
similarity index 100%
rename from packages/icons/src/library/insert-after.js
rename to packages/icons/src/library/insert-after.tsx
diff --git a/packages/icons/src/library/insert-before.js b/packages/icons/src/library/insert-before.tsx
similarity index 100%
rename from packages/icons/src/library/insert-before.js
rename to packages/icons/src/library/insert-before.tsx
diff --git a/packages/icons/src/library/institution.js b/packages/icons/src/library/institution.tsx
similarity index 100%
rename from packages/icons/src/library/institution.js
rename to packages/icons/src/library/institution.tsx
diff --git a/packages/icons/src/library/justify-bottom.js b/packages/icons/src/library/justify-bottom.tsx
similarity index 100%
rename from packages/icons/src/library/justify-bottom.js
rename to packages/icons/src/library/justify-bottom.tsx
diff --git a/packages/icons/src/library/justify-center-vertical.js b/packages/icons/src/library/justify-center-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/justify-center-vertical.js
rename to packages/icons/src/library/justify-center-vertical.tsx
diff --git a/packages/icons/src/library/justify-center.js b/packages/icons/src/library/justify-center.tsx
similarity index 100%
rename from packages/icons/src/library/justify-center.js
rename to packages/icons/src/library/justify-center.tsx
diff --git a/packages/icons/src/library/justify-left.js b/packages/icons/src/library/justify-left.tsx
similarity index 100%
rename from packages/icons/src/library/justify-left.js
rename to packages/icons/src/library/justify-left.tsx
diff --git a/packages/icons/src/library/justify-right.js b/packages/icons/src/library/justify-right.tsx
similarity index 100%
rename from packages/icons/src/library/justify-right.js
rename to packages/icons/src/library/justify-right.tsx
diff --git a/packages/icons/src/library/justify-space-between-vertical.js b/packages/icons/src/library/justify-space-between-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/justify-space-between-vertical.js
rename to packages/icons/src/library/justify-space-between-vertical.tsx
diff --git a/packages/icons/src/library/justify-space-between.js b/packages/icons/src/library/justify-space-between.tsx
similarity index 100%
rename from packages/icons/src/library/justify-space-between.js
rename to packages/icons/src/library/justify-space-between.tsx
diff --git a/packages/icons/src/library/justify-stretch-vertical.js b/packages/icons/src/library/justify-stretch-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/justify-stretch-vertical.js
rename to packages/icons/src/library/justify-stretch-vertical.tsx
diff --git a/packages/icons/src/library/justify-stretch.js b/packages/icons/src/library/justify-stretch.tsx
similarity index 100%
rename from packages/icons/src/library/justify-stretch.js
rename to packages/icons/src/library/justify-stretch.tsx
diff --git a/packages/icons/src/library/justify-top.js b/packages/icons/src/library/justify-top.tsx
similarity index 100%
rename from packages/icons/src/library/justify-top.js
rename to packages/icons/src/library/justify-top.tsx
diff --git a/packages/icons/src/library/key.js b/packages/icons/src/library/key.tsx
similarity index 100%
rename from packages/icons/src/library/key.js
rename to packages/icons/src/library/key.tsx
diff --git a/packages/icons/src/library/keyboard-close.js b/packages/icons/src/library/keyboard-close.tsx
similarity index 100%
rename from packages/icons/src/library/keyboard-close.js
rename to packages/icons/src/library/keyboard-close.tsx
diff --git a/packages/icons/src/library/keyboard-return.js b/packages/icons/src/library/keyboard-return.tsx
similarity index 100%
rename from packages/icons/src/library/keyboard-return.js
rename to packages/icons/src/library/keyboard-return.tsx
diff --git a/packages/icons/src/library/keyboard.js b/packages/icons/src/library/keyboard.tsx
similarity index 100%
rename from packages/icons/src/library/keyboard.js
rename to packages/icons/src/library/keyboard.tsx
diff --git a/packages/icons/src/library/language.js b/packages/icons/src/library/language.tsx
similarity index 100%
rename from packages/icons/src/library/language.js
rename to packages/icons/src/library/language.tsx
diff --git a/packages/icons/src/library/layout.js b/packages/icons/src/library/layout.tsx
similarity index 100%
rename from packages/icons/src/library/layout.js
rename to packages/icons/src/library/layout.tsx
diff --git a/packages/icons/src/library/level-up.js b/packages/icons/src/library/level-up.tsx
similarity index 100%
rename from packages/icons/src/library/level-up.js
rename to packages/icons/src/library/level-up.tsx
diff --git a/packages/icons/src/library/lifesaver.js b/packages/icons/src/library/lifesaver.tsx
similarity index 100%
rename from packages/icons/src/library/lifesaver.js
rename to packages/icons/src/library/lifesaver.tsx
diff --git a/packages/icons/src/library/line-dashed.js b/packages/icons/src/library/line-dashed.tsx
similarity index 100%
rename from packages/icons/src/library/line-dashed.js
rename to packages/icons/src/library/line-dashed.tsx
diff --git a/packages/icons/src/library/line-dotted.js b/packages/icons/src/library/line-dotted.tsx
similarity index 100%
rename from packages/icons/src/library/line-dotted.js
rename to packages/icons/src/library/line-dotted.tsx
diff --git a/packages/icons/src/library/line-solid.js b/packages/icons/src/library/line-solid.tsx
similarity index 100%
rename from packages/icons/src/library/line-solid.js
rename to packages/icons/src/library/line-solid.tsx
diff --git a/packages/icons/src/library/link-off.js b/packages/icons/src/library/link-off.tsx
similarity index 100%
rename from packages/icons/src/library/link-off.js
rename to packages/icons/src/library/link-off.tsx
diff --git a/packages/icons/src/library/link.js b/packages/icons/src/library/link.tsx
similarity index 100%
rename from packages/icons/src/library/link.js
rename to packages/icons/src/library/link.tsx
diff --git a/packages/icons/src/library/list-item.js b/packages/icons/src/library/list-item.tsx
similarity index 100%
rename from packages/icons/src/library/list-item.js
rename to packages/icons/src/library/list-item.tsx
diff --git a/packages/icons/src/library/list-view.js b/packages/icons/src/library/list-view.tsx
similarity index 100%
rename from packages/icons/src/library/list-view.js
rename to packages/icons/src/library/list-view.tsx
diff --git a/packages/icons/src/library/list.js b/packages/icons/src/library/list.tsx
similarity index 100%
rename from packages/icons/src/library/list.js
rename to packages/icons/src/library/list.tsx
diff --git a/packages/icons/src/library/lock-outline.js b/packages/icons/src/library/lock-outline.tsx
similarity index 100%
rename from packages/icons/src/library/lock-outline.js
rename to packages/icons/src/library/lock-outline.tsx
diff --git a/packages/icons/src/library/lock-small.js b/packages/icons/src/library/lock-small.tsx
similarity index 100%
rename from packages/icons/src/library/lock-small.js
rename to packages/icons/src/library/lock-small.tsx
diff --git a/packages/icons/src/library/lock.js b/packages/icons/src/library/lock.tsx
similarity index 100%
rename from packages/icons/src/library/lock.js
rename to packages/icons/src/library/lock.tsx
diff --git a/packages/icons/src/library/login.js b/packages/icons/src/library/login.tsx
similarity index 100%
rename from packages/icons/src/library/login.js
rename to packages/icons/src/library/login.tsx
diff --git a/packages/icons/src/library/loop.js b/packages/icons/src/library/loop.tsx
similarity index 100%
rename from packages/icons/src/library/loop.js
rename to packages/icons/src/library/loop.tsx
diff --git a/packages/icons/src/library/map-marker.js b/packages/icons/src/library/map-marker.tsx
similarity index 100%
rename from packages/icons/src/library/map-marker.js
rename to packages/icons/src/library/map-marker.tsx
diff --git a/packages/icons/src/library/media-and-text.js b/packages/icons/src/library/media-and-text.tsx
similarity index 100%
rename from packages/icons/src/library/media-and-text.js
rename to packages/icons/src/library/media-and-text.tsx
diff --git a/packages/icons/src/library/media.js b/packages/icons/src/library/media.tsx
similarity index 100%
rename from packages/icons/src/library/media.js
rename to packages/icons/src/library/media.tsx
diff --git a/packages/icons/src/library/megaphone.js b/packages/icons/src/library/megaphone.tsx
similarity index 100%
rename from packages/icons/src/library/megaphone.js
rename to packages/icons/src/library/megaphone.tsx
diff --git a/packages/icons/src/library/menu.js b/packages/icons/src/library/menu.tsx
similarity index 100%
rename from packages/icons/src/library/menu.js
rename to packages/icons/src/library/menu.tsx
diff --git a/packages/icons/src/library/mobile.js b/packages/icons/src/library/mobile.tsx
similarity index 100%
rename from packages/icons/src/library/mobile.js
rename to packages/icons/src/library/mobile.tsx
diff --git a/packages/icons/src/library/more-horizontal-mobile.js b/packages/icons/src/library/more-horizontal-mobile.tsx
similarity index 100%
rename from packages/icons/src/library/more-horizontal-mobile.js
rename to packages/icons/src/library/more-horizontal-mobile.tsx
diff --git a/packages/icons/src/library/more-horizontal.js b/packages/icons/src/library/more-horizontal.tsx
similarity index 100%
rename from packages/icons/src/library/more-horizontal.js
rename to packages/icons/src/library/more-horizontal.tsx
diff --git a/packages/icons/src/library/more-vertical.js b/packages/icons/src/library/more-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/more-vertical.js
rename to packages/icons/src/library/more-vertical.tsx
diff --git a/packages/icons/src/library/more.js b/packages/icons/src/library/more.tsx
similarity index 100%
rename from packages/icons/src/library/more.js
rename to packages/icons/src/library/more.tsx
diff --git a/packages/icons/src/library/move-to.js b/packages/icons/src/library/move-to.tsx
similarity index 100%
rename from packages/icons/src/library/move-to.js
rename to packages/icons/src/library/move-to.tsx
diff --git a/packages/icons/src/library/navigation.js b/packages/icons/src/library/navigation.tsx
similarity index 100%
rename from packages/icons/src/library/navigation.js
rename to packages/icons/src/library/navigation.tsx
diff --git a/packages/icons/src/library/next.js b/packages/icons/src/library/next.tsx
similarity index 100%
rename from packages/icons/src/library/next.js
rename to packages/icons/src/library/next.tsx
diff --git a/packages/icons/src/library/not-allowed.js b/packages/icons/src/library/not-allowed.tsx
similarity index 100%
rename from packages/icons/src/library/not-allowed.js
rename to packages/icons/src/library/not-allowed.tsx
diff --git a/packages/icons/src/library/not-found.js b/packages/icons/src/library/not-found.tsx
similarity index 100%
rename from packages/icons/src/library/not-found.js
rename to packages/icons/src/library/not-found.tsx
diff --git a/packages/icons/src/library/offline.js b/packages/icons/src/library/offline.tsx
similarity index 100%
rename from packages/icons/src/library/offline.js
rename to packages/icons/src/library/offline.tsx
diff --git a/packages/icons/src/library/overlay-text.js b/packages/icons/src/library/overlay-text.tsx
similarity index 100%
rename from packages/icons/src/library/overlay-text.js
rename to packages/icons/src/library/overlay-text.tsx
diff --git a/packages/icons/src/library/page-break.js b/packages/icons/src/library/page-break.tsx
similarity index 100%
rename from packages/icons/src/library/page-break.js
rename to packages/icons/src/library/page-break.tsx
diff --git a/packages/icons/src/library/page.js b/packages/icons/src/library/page.tsx
similarity index 100%
rename from packages/icons/src/library/page.js
rename to packages/icons/src/library/page.tsx
diff --git a/packages/icons/src/library/pages.js b/packages/icons/src/library/pages.tsx
similarity index 100%
rename from packages/icons/src/library/pages.js
rename to packages/icons/src/library/pages.tsx
diff --git a/packages/icons/src/library/paragraph.js b/packages/icons/src/library/paragraph.tsx
similarity index 100%
rename from packages/icons/src/library/paragraph.js
rename to packages/icons/src/library/paragraph.tsx
diff --git a/packages/icons/src/library/payment.js b/packages/icons/src/library/payment.tsx
similarity index 100%
rename from packages/icons/src/library/payment.js
rename to packages/icons/src/library/payment.tsx
diff --git a/packages/icons/src/library/pencil.js b/packages/icons/src/library/pencil.tsx
similarity index 100%
rename from packages/icons/src/library/pencil.js
rename to packages/icons/src/library/pencil.tsx
diff --git a/packages/icons/src/library/pending.js b/packages/icons/src/library/pending.tsx
similarity index 100%
rename from packages/icons/src/library/pending.js
rename to packages/icons/src/library/pending.tsx
diff --git a/packages/icons/src/library/people.js b/packages/icons/src/library/people.tsx
similarity index 100%
rename from packages/icons/src/library/people.js
rename to packages/icons/src/library/people.tsx
diff --git a/packages/icons/src/library/percent.js b/packages/icons/src/library/percent.tsx
similarity index 100%
rename from packages/icons/src/library/percent.js
rename to packages/icons/src/library/percent.tsx
diff --git a/packages/icons/src/library/pin-small.js b/packages/icons/src/library/pin-small.tsx
similarity index 78%
rename from packages/icons/src/library/pin-small.js
rename to packages/icons/src/library/pin-small.tsx
index d479c27d77687a..aa3a579d4ca36c 100644
--- a/packages/icons/src/library/pin-small.js
+++ b/packages/icons/src/library/pin-small.tsx
@@ -4,12 +4,7 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const pinSmall = (
-	<SVG
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<Path d="M10.97 10.159a3.382 3.382 0 0 0-2.857.955l1.724 1.723-2.836 2.913L7 17h1.25l2.913-2.837 1.723 1.723a3.38 3.38 0 0 0 .606-.825c.33-.63.446-1.343.35-2.032L17 10.695 13.305 7l-2.334 3.159Z" />
 	</SVG>
 );
diff --git a/packages/icons/src/library/pin.js b/packages/icons/src/library/pin.tsx
similarity index 100%
rename from packages/icons/src/library/pin.js
rename to packages/icons/src/library/pin.tsx
diff --git a/packages/icons/src/library/plugins.js b/packages/icons/src/library/plugins.tsx
similarity index 100%
rename from packages/icons/src/library/plugins.js
rename to packages/icons/src/library/plugins.tsx
diff --git a/packages/icons/src/library/plus-circle-filled.js b/packages/icons/src/library/plus-circle-filled.tsx
similarity index 56%
rename from packages/icons/src/library/plus-circle-filled.js
rename to packages/icons/src/library/plus-circle-filled.tsx
index 7b5a2da8e9ae07..0e990f758f7b7d 100644
--- a/packages/icons/src/library/plus-circle-filled.js
+++ b/packages/icons/src/library/plus-circle-filled.tsx
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const plusCircleFilled = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M2 12C2 6.44444 6.44444 2 12 2C17.5556 2 22 6.44444 22 12C22 17.5556 17.5556 22 12 22C6.44444 22 2 17.5556 2 12ZM13 11V7H11V11H7V13H11V17H13V13H17V11H13Z" />
+		<Path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm3.8 8.8h-3v3h-1.5v-3h-3v-1.5h3v-3h1.5v3h3v1.5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/plus-circle.js b/packages/icons/src/library/plus-circle.js
deleted file mode 100644
index 405fa5803d2ba2..00000000000000
--- a/packages/icons/src/library/plus-circle.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const plusCircle = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6zM10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6z" />
-	</SVG>
-);
-
-export default plusCircle;
diff --git a/packages/icons/src/library/plus-circle.tsx b/packages/icons/src/library/plus-circle.tsx
new file mode 100644
index 00000000000000..cec6e49517504d
--- /dev/null
+++ b/packages/icons/src/library/plus-circle.tsx
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const plusCircle = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"
+		/>
+	</SVG>
+);
+
+export default plusCircle;
diff --git a/packages/icons/src/library/plus.js b/packages/icons/src/library/plus.tsx
similarity index 100%
rename from packages/icons/src/library/plus.js
rename to packages/icons/src/library/plus.tsx
diff --git a/packages/icons/src/library/position-center.js b/packages/icons/src/library/position-center.tsx
similarity index 100%
rename from packages/icons/src/library/position-center.js
rename to packages/icons/src/library/position-center.tsx
diff --git a/packages/icons/src/library/position-left.js b/packages/icons/src/library/position-left.tsx
similarity index 100%
rename from packages/icons/src/library/position-left.js
rename to packages/icons/src/library/position-left.tsx
diff --git a/packages/icons/src/library/position-right.js b/packages/icons/src/library/position-right.tsx
similarity index 100%
rename from packages/icons/src/library/position-right.js
rename to packages/icons/src/library/position-right.tsx
diff --git a/packages/icons/src/library/post-author.js b/packages/icons/src/library/post-author.tsx
similarity index 100%
rename from packages/icons/src/library/post-author.js
rename to packages/icons/src/library/post-author.tsx
diff --git a/packages/icons/src/library/post-categories.js b/packages/icons/src/library/post-categories.tsx
similarity index 100%
rename from packages/icons/src/library/post-categories.js
rename to packages/icons/src/library/post-categories.tsx
diff --git a/packages/icons/src/library/post-comments-count.js b/packages/icons/src/library/post-comments-count.tsx
similarity index 100%
rename from packages/icons/src/library/post-comments-count.js
rename to packages/icons/src/library/post-comments-count.tsx
diff --git a/packages/icons/src/library/post-comments-form.js b/packages/icons/src/library/post-comments-form.tsx
similarity index 100%
rename from packages/icons/src/library/post-comments-form.js
rename to packages/icons/src/library/post-comments-form.tsx
diff --git a/packages/icons/src/library/post-comments.js b/packages/icons/src/library/post-comments.tsx
similarity index 100%
rename from packages/icons/src/library/post-comments.js
rename to packages/icons/src/library/post-comments.tsx
diff --git a/packages/icons/src/library/post-content.js b/packages/icons/src/library/post-content.tsx
similarity index 100%
rename from packages/icons/src/library/post-content.js
rename to packages/icons/src/library/post-content.tsx
diff --git a/packages/icons/src/library/post-date.js b/packages/icons/src/library/post-date.tsx
similarity index 100%
rename from packages/icons/src/library/post-date.js
rename to packages/icons/src/library/post-date.tsx
diff --git a/packages/icons/src/library/post-excerpt.js b/packages/icons/src/library/post-excerpt.tsx
similarity index 100%
rename from packages/icons/src/library/post-excerpt.js
rename to packages/icons/src/library/post-excerpt.tsx
diff --git a/packages/icons/src/library/post-featured-image.js b/packages/icons/src/library/post-featured-image.tsx
similarity index 100%
rename from packages/icons/src/library/post-featured-image.js
rename to packages/icons/src/library/post-featured-image.tsx
diff --git a/packages/icons/src/library/post-list.js b/packages/icons/src/library/post-list.tsx
similarity index 100%
rename from packages/icons/src/library/post-list.js
rename to packages/icons/src/library/post-list.tsx
diff --git a/packages/icons/src/library/post-terms.js b/packages/icons/src/library/post-terms.tsx
similarity index 100%
rename from packages/icons/src/library/post-terms.js
rename to packages/icons/src/library/post-terms.tsx
diff --git a/packages/icons/src/library/post.js b/packages/icons/src/library/post.tsx
similarity index 100%
rename from packages/icons/src/library/post.js
rename to packages/icons/src/library/post.tsx
diff --git a/packages/icons/src/library/preformatted.js b/packages/icons/src/library/preformatted.tsx
similarity index 100%
rename from packages/icons/src/library/preformatted.js
rename to packages/icons/src/library/preformatted.tsx
diff --git a/packages/icons/src/library/previous.js b/packages/icons/src/library/previous.tsx
similarity index 100%
rename from packages/icons/src/library/previous.js
rename to packages/icons/src/library/previous.tsx
diff --git a/packages/icons/src/library/published.js b/packages/icons/src/library/published.tsx
similarity index 100%
rename from packages/icons/src/library/published.js
rename to packages/icons/src/library/published.tsx
diff --git a/packages/icons/src/library/pull-left.js b/packages/icons/src/library/pull-left.tsx
similarity index 100%
rename from packages/icons/src/library/pull-left.js
rename to packages/icons/src/library/pull-left.tsx
diff --git a/packages/icons/src/library/pull-right.js b/packages/icons/src/library/pull-right.tsx
similarity index 100%
rename from packages/icons/src/library/pull-right.js
rename to packages/icons/src/library/pull-right.tsx
diff --git a/packages/icons/src/library/pullquote.js b/packages/icons/src/library/pullquote.tsx
similarity index 100%
rename from packages/icons/src/library/pullquote.js
rename to packages/icons/src/library/pullquote.tsx
diff --git a/packages/icons/src/library/query-pagination-next.js b/packages/icons/src/library/query-pagination-next.tsx
similarity index 100%
rename from packages/icons/src/library/query-pagination-next.js
rename to packages/icons/src/library/query-pagination-next.tsx
diff --git a/packages/icons/src/library/query-pagination-numbers.js b/packages/icons/src/library/query-pagination-numbers.tsx
similarity index 100%
rename from packages/icons/src/library/query-pagination-numbers.js
rename to packages/icons/src/library/query-pagination-numbers.tsx
diff --git a/packages/icons/src/library/query-pagination-previous.js b/packages/icons/src/library/query-pagination-previous.tsx
similarity index 100%
rename from packages/icons/src/library/query-pagination-previous.js
rename to packages/icons/src/library/query-pagination-previous.tsx
diff --git a/packages/icons/src/library/query-pagination.js b/packages/icons/src/library/query-pagination.tsx
similarity index 100%
rename from packages/icons/src/library/query-pagination.js
rename to packages/icons/src/library/query-pagination.tsx
diff --git a/packages/icons/src/library/quote.js b/packages/icons/src/library/quote.tsx
similarity index 100%
rename from packages/icons/src/library/quote.js
rename to packages/icons/src/library/quote.tsx
diff --git a/packages/icons/src/library/receipt.js b/packages/icons/src/library/receipt.tsx
similarity index 100%
rename from packages/icons/src/library/receipt.js
rename to packages/icons/src/library/receipt.tsx
diff --git a/packages/icons/src/library/redo.js b/packages/icons/src/library/redo.tsx
similarity index 100%
rename from packages/icons/src/library/redo.js
rename to packages/icons/src/library/redo.tsx
diff --git a/packages/icons/src/library/remove-bug.js b/packages/icons/src/library/remove-bug.tsx
similarity index 100%
rename from packages/icons/src/library/remove-bug.js
rename to packages/icons/src/library/remove-bug.tsx
diff --git a/packages/icons/src/library/remove-submenu.js b/packages/icons/src/library/remove-submenu.tsx
similarity index 100%
rename from packages/icons/src/library/remove-submenu.js
rename to packages/icons/src/library/remove-submenu.tsx
diff --git a/packages/icons/src/library/replace.js b/packages/icons/src/library/replace.tsx
similarity index 100%
rename from packages/icons/src/library/replace.js
rename to packages/icons/src/library/replace.tsx
diff --git a/packages/icons/src/library/reset.js b/packages/icons/src/library/reset.tsx
similarity index 100%
rename from packages/icons/src/library/reset.js
rename to packages/icons/src/library/reset.tsx
diff --git a/packages/icons/src/library/resize-corner-n-e.js b/packages/icons/src/library/resize-corner-n-e.tsx
similarity index 100%
rename from packages/icons/src/library/resize-corner-n-e.js
rename to packages/icons/src/library/resize-corner-n-e.tsx
diff --git a/packages/icons/src/library/reusable-block.js b/packages/icons/src/library/reusable-block.tsx
similarity index 100%
rename from packages/icons/src/library/reusable-block.js
rename to packages/icons/src/library/reusable-block.tsx
diff --git a/packages/icons/src/library/rotate-left.js b/packages/icons/src/library/rotate-left.tsx
similarity index 100%
rename from packages/icons/src/library/rotate-left.js
rename to packages/icons/src/library/rotate-left.tsx
diff --git a/packages/icons/src/library/rotate-right.js b/packages/icons/src/library/rotate-right.tsx
similarity index 100%
rename from packages/icons/src/library/rotate-right.js
rename to packages/icons/src/library/rotate-right.tsx
diff --git a/packages/icons/src/library/row.js b/packages/icons/src/library/row.tsx
similarity index 100%
rename from packages/icons/src/library/row.js
rename to packages/icons/src/library/row.tsx
diff --git a/packages/icons/src/library/rss.js b/packages/icons/src/library/rss.tsx
similarity index 100%
rename from packages/icons/src/library/rss.js
rename to packages/icons/src/library/rss.tsx
diff --git a/packages/icons/src/library/scheduled.js b/packages/icons/src/library/scheduled.tsx
similarity index 100%
rename from packages/icons/src/library/scheduled.js
rename to packages/icons/src/library/scheduled.tsx
diff --git a/packages/icons/src/library/search.js b/packages/icons/src/library/search.tsx
similarity index 100%
rename from packages/icons/src/library/search.js
rename to packages/icons/src/library/search.tsx
diff --git a/packages/icons/src/library/seen.js b/packages/icons/src/library/seen.tsx
similarity index 100%
rename from packages/icons/src/library/seen.js
rename to packages/icons/src/library/seen.tsx
diff --git a/packages/icons/src/library/send.js b/packages/icons/src/library/send.tsx
similarity index 100%
rename from packages/icons/src/library/send.js
rename to packages/icons/src/library/send.tsx
diff --git a/packages/icons/src/library/separator.js b/packages/icons/src/library/separator.tsx
similarity index 100%
rename from packages/icons/src/library/separator.js
rename to packages/icons/src/library/separator.tsx
diff --git a/packages/icons/src/library/settings.js b/packages/icons/src/library/settings.tsx
similarity index 100%
rename from packages/icons/src/library/settings.js
rename to packages/icons/src/library/settings.tsx
diff --git a/packages/icons/src/library/shadow.js b/packages/icons/src/library/shadow.tsx
similarity index 100%
rename from packages/icons/src/library/shadow.js
rename to packages/icons/src/library/shadow.tsx
diff --git a/packages/icons/src/library/share.js b/packages/icons/src/library/share.tsx
similarity index 100%
rename from packages/icons/src/library/share.js
rename to packages/icons/src/library/share.tsx
diff --git a/packages/icons/src/library/shield.js b/packages/icons/src/library/shield.tsx
similarity index 100%
rename from packages/icons/src/library/shield.js
rename to packages/icons/src/library/shield.tsx
diff --git a/packages/icons/src/library/shipping.js b/packages/icons/src/library/shipping.tsx
similarity index 100%
rename from packages/icons/src/library/shipping.js
rename to packages/icons/src/library/shipping.tsx
diff --git a/packages/icons/src/library/shortcode.js b/packages/icons/src/library/shortcode.tsx
similarity index 100%
rename from packages/icons/src/library/shortcode.js
rename to packages/icons/src/library/shortcode.tsx
diff --git a/packages/icons/src/library/shuffle.js b/packages/icons/src/library/shuffle.tsx
similarity index 100%
rename from packages/icons/src/library/shuffle.js
rename to packages/icons/src/library/shuffle.tsx
diff --git a/packages/icons/src/library/sidebar.js b/packages/icons/src/library/sidebar.tsx
similarity index 100%
rename from packages/icons/src/library/sidebar.js
rename to packages/icons/src/library/sidebar.tsx
diff --git a/packages/icons/src/library/sides-all.js b/packages/icons/src/library/sides-all.tsx
similarity index 100%
rename from packages/icons/src/library/sides-all.js
rename to packages/icons/src/library/sides-all.tsx
diff --git a/packages/icons/src/library/sides-axial.js b/packages/icons/src/library/sides-axial.tsx
similarity index 100%
rename from packages/icons/src/library/sides-axial.js
rename to packages/icons/src/library/sides-axial.tsx
diff --git a/packages/icons/src/library/sides-bottom.js b/packages/icons/src/library/sides-bottom.tsx
similarity index 100%
rename from packages/icons/src/library/sides-bottom.js
rename to packages/icons/src/library/sides-bottom.tsx
diff --git a/packages/icons/src/library/sides-horizontal.js b/packages/icons/src/library/sides-horizontal.tsx
similarity index 100%
rename from packages/icons/src/library/sides-horizontal.js
rename to packages/icons/src/library/sides-horizontal.tsx
diff --git a/packages/icons/src/library/sides-left.js b/packages/icons/src/library/sides-left.tsx
similarity index 100%
rename from packages/icons/src/library/sides-left.js
rename to packages/icons/src/library/sides-left.tsx
diff --git a/packages/icons/src/library/sides-right.js b/packages/icons/src/library/sides-right.tsx
similarity index 100%
rename from packages/icons/src/library/sides-right.js
rename to packages/icons/src/library/sides-right.tsx
diff --git a/packages/icons/src/library/sides-top.js b/packages/icons/src/library/sides-top.tsx
similarity index 100%
rename from packages/icons/src/library/sides-top.js
rename to packages/icons/src/library/sides-top.tsx
diff --git a/packages/icons/src/library/sides-vertical.js b/packages/icons/src/library/sides-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/sides-vertical.js
rename to packages/icons/src/library/sides-vertical.tsx
diff --git a/packages/icons/src/library/site-logo.js b/packages/icons/src/library/site-logo.js
deleted file mode 100644
index 94d5567a00e419..00000000000000
--- a/packages/icons/src/library/site-logo.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const siteLogo = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M12 3c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 1.5c4.1 0 7.5 3.4 7.5 7.5v.1c-1.4-.8-3.3-1.7-3.4-1.8-.2-.1-.5-.1-.8.1l-2.9 2.1L9 11.3c-.2-.1-.4 0-.6.1l-3.7 2.2c-.1-.5-.2-1-.2-1.5 0-4.2 3.4-7.6 7.5-7.6zm0 15c-3.1 0-5.7-1.9-6.9-4.5l3.7-2.2 3.5 1.2c.2.1.5 0 .7-.1l2.9-2.1c.8.4 2.5 1.2 3.5 1.9-.9 3.3-3.9 5.8-7.4 5.8z" />
-	</SVG>
-);
-
-export default siteLogo;
diff --git a/packages/icons/src/library/site-logo.tsx b/packages/icons/src/library/site-logo.tsx
new file mode 100644
index 00000000000000..c2653d495f8080
--- /dev/null
+++ b/packages/icons/src/library/site-logo.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const siteLogo = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M12 4c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8Zm0 1.5c3.4 0 6.2 2.7 6.5 6l-1.2-.6-.8-.4c-.1 0-.2 0-.3-.1H16c-.1-.2-.4-.2-.7 0l-2.9 2.1L9 11.3h-.7L5.5 13v-1.1c0-3.6 2.9-6.5 6.5-6.5Zm0 13c-2.7 0-5-1.7-6-4l2.8-1.7 3.5 1.2h.4s.2 0 .4-.2l2.9-2.1.4.2c.6.3 1.4.7 2.1 1.1-.5 3.1-3.2 5.4-6.4 5.4Z" />
+	</SVG>
+);
+
+export default siteLogo;
diff --git a/packages/icons/src/library/square.js b/packages/icons/src/library/square.tsx
similarity index 100%
rename from packages/icons/src/library/square.js
rename to packages/icons/src/library/square.tsx
diff --git a/packages/icons/src/library/stack.js b/packages/icons/src/library/stack.tsx
similarity index 100%
rename from packages/icons/src/library/stack.js
rename to packages/icons/src/library/stack.tsx
diff --git a/packages/icons/src/library/star-empty.js b/packages/icons/src/library/star-empty.tsx
similarity index 100%
rename from packages/icons/src/library/star-empty.js
rename to packages/icons/src/library/star-empty.tsx
diff --git a/packages/icons/src/library/star-filled.js b/packages/icons/src/library/star-filled.tsx
similarity index 100%
rename from packages/icons/src/library/star-filled.js
rename to packages/icons/src/library/star-filled.tsx
diff --git a/packages/icons/src/library/star-half.js b/packages/icons/src/library/star-half.tsx
similarity index 100%
rename from packages/icons/src/library/star-half.js
rename to packages/icons/src/library/star-half.tsx
diff --git a/packages/icons/src/library/store.js b/packages/icons/src/library/store.tsx
similarity index 100%
rename from packages/icons/src/library/store.js
rename to packages/icons/src/library/store.tsx
diff --git a/packages/icons/src/library/stretch-full-width.js b/packages/icons/src/library/stretch-full-width.tsx
similarity index 100%
rename from packages/icons/src/library/stretch-full-width.js
rename to packages/icons/src/library/stretch-full-width.tsx
diff --git a/packages/icons/src/library/stretch-wide.js b/packages/icons/src/library/stretch-wide.tsx
similarity index 100%
rename from packages/icons/src/library/stretch-wide.js
rename to packages/icons/src/library/stretch-wide.tsx
diff --git a/packages/icons/src/library/styles.js b/packages/icons/src/library/styles.tsx
similarity index 100%
rename from packages/icons/src/library/styles.js
rename to packages/icons/src/library/styles.tsx
diff --git a/packages/icons/src/library/subscript.js b/packages/icons/src/library/subscript.tsx
similarity index 100%
rename from packages/icons/src/library/subscript.js
rename to packages/icons/src/library/subscript.tsx
diff --git a/packages/icons/src/library/superscript.js b/packages/icons/src/library/superscript.tsx
similarity index 100%
rename from packages/icons/src/library/superscript.js
rename to packages/icons/src/library/superscript.tsx
diff --git a/packages/icons/src/library/swatch.js b/packages/icons/src/library/swatch.js
deleted file mode 100644
index 1d9a63e84838ef..00000000000000
--- a/packages/icons/src/library/swatch.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Path, SVG } from '@wordpress/primitives';
-
-const swatch = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" />
-	</SVG>
-);
-
-export default swatch;
diff --git a/packages/icons/src/library/swatch.tsx b/packages/icons/src/library/swatch.tsx
new file mode 100644
index 00000000000000..c8f7f86f54fdd9
--- /dev/null
+++ b/packages/icons/src/library/swatch.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const swatch = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7.1 5.7 8 6.9c.4-.3.9-.6 1.5-.8l-.6-1.4c-.7.3-1.3.6-1.8 1ZM4.6 8.9l1.4.6c.2-.5.5-1 .8-1.5l-1.2-.9c-.4.6-.8 1.2-1 1.8Zm14.8 0c-.3-.7-.6-1.3-1-1.8l-1.2.9c.3.4.6.9.8 1.5l1.4-.6ZM7.1 18.3c.6.4 1.2.8 1.8 1l.6-1.4c-.5-.2-1-.5-1.5-.8l-.9 1.2ZM5.5 12v-.9h-.7l-.7-.2v2l1.5-.2v-.9Zm-.7 3h-.2c.3.7.6 1.3 1 1.9l1.2-.9c-.3-.4-.6-.9-.8-1.5l-1.2.5Zm9.7 3 .5 1.2v.2c.7-.3 1.3-.6 1.9-1l-.9-1.2c-.4.3-.9.6-1.5.8Zm-2.5.5h-.9l-.2 1.3v.2h2l-.2-1.5h-.9Zm7.9-7.5-1.5.2V13h.7l.7.2v-2ZM18 14.5c-.2.5-.5 1-.8 1.5l1.2.9c.4-.6.8-1.2 1-1.8h-.2l-1.2-.6ZM11 4.1l.2 1.5H13V4.2h-1.9ZM14.5 6c.5.2 1 .5 1.5.8l.9-1.2c-.6-.4-1.2-.8-1.8-1L14.5 6Z" />
+	</SVG>
+);
+
+export default swatch;
diff --git a/packages/icons/src/library/symbol-filled.js b/packages/icons/src/library/symbol-filled.tsx
similarity index 100%
rename from packages/icons/src/library/symbol-filled.js
rename to packages/icons/src/library/symbol-filled.tsx
diff --git a/packages/icons/src/library/symbol.js b/packages/icons/src/library/symbol.tsx
similarity index 100%
rename from packages/icons/src/library/symbol.js
rename to packages/icons/src/library/symbol.tsx
diff --git a/packages/icons/src/library/table-column-after.js b/packages/icons/src/library/table-column-after.tsx
similarity index 100%
rename from packages/icons/src/library/table-column-after.js
rename to packages/icons/src/library/table-column-after.tsx
diff --git a/packages/icons/src/library/table-column-before.js b/packages/icons/src/library/table-column-before.tsx
similarity index 100%
rename from packages/icons/src/library/table-column-before.js
rename to packages/icons/src/library/table-column-before.tsx
diff --git a/packages/icons/src/library/table-column-delete.js b/packages/icons/src/library/table-column-delete.tsx
similarity index 100%
rename from packages/icons/src/library/table-column-delete.js
rename to packages/icons/src/library/table-column-delete.tsx
diff --git a/packages/icons/src/library/table-of-contents.js b/packages/icons/src/library/table-of-contents.tsx
similarity index 100%
rename from packages/icons/src/library/table-of-contents.js
rename to packages/icons/src/library/table-of-contents.tsx
diff --git a/packages/icons/src/library/table-row-after.js b/packages/icons/src/library/table-row-after.tsx
similarity index 100%
rename from packages/icons/src/library/table-row-after.js
rename to packages/icons/src/library/table-row-after.tsx
diff --git a/packages/icons/src/library/table-row-before.js b/packages/icons/src/library/table-row-before.tsx
similarity index 100%
rename from packages/icons/src/library/table-row-before.js
rename to packages/icons/src/library/table-row-before.tsx
diff --git a/packages/icons/src/library/table-row-delete.js b/packages/icons/src/library/table-row-delete.tsx
similarity index 100%
rename from packages/icons/src/library/table-row-delete.js
rename to packages/icons/src/library/table-row-delete.tsx
diff --git a/packages/icons/src/library/table.js b/packages/icons/src/library/table.tsx
similarity index 100%
rename from packages/icons/src/library/table.js
rename to packages/icons/src/library/table.tsx
diff --git a/packages/icons/src/library/tablet.js b/packages/icons/src/library/tablet.tsx
similarity index 100%
rename from packages/icons/src/library/tablet.js
rename to packages/icons/src/library/tablet.tsx
diff --git a/packages/icons/src/library/tag.js b/packages/icons/src/library/tag.tsx
similarity index 100%
rename from packages/icons/src/library/tag.js
rename to packages/icons/src/library/tag.tsx
diff --git a/packages/icons/src/library/term-description.js b/packages/icons/src/library/term-description.tsx
similarity index 100%
rename from packages/icons/src/library/term-description.js
rename to packages/icons/src/library/term-description.tsx
diff --git a/packages/icons/src/library/text-color.js b/packages/icons/src/library/text-color.tsx
similarity index 100%
rename from packages/icons/src/library/text-color.js
rename to packages/icons/src/library/text-color.tsx
diff --git a/packages/icons/src/library/text-horizontal.js b/packages/icons/src/library/text-horizontal.tsx
similarity index 100%
rename from packages/icons/src/library/text-horizontal.js
rename to packages/icons/src/library/text-horizontal.tsx
diff --git a/packages/icons/src/library/text-vertical.js b/packages/icons/src/library/text-vertical.tsx
similarity index 100%
rename from packages/icons/src/library/text-vertical.js
rename to packages/icons/src/library/text-vertical.tsx
diff --git a/packages/icons/src/library/thumbs-down.js b/packages/icons/src/library/thumbs-down.tsx
similarity index 100%
rename from packages/icons/src/library/thumbs-down.js
rename to packages/icons/src/library/thumbs-down.tsx
diff --git a/packages/icons/src/library/thumbs-up.js b/packages/icons/src/library/thumbs-up.tsx
similarity index 100%
rename from packages/icons/src/library/thumbs-up.js
rename to packages/icons/src/library/thumbs-up.tsx
diff --git a/packages/icons/src/library/tip.js b/packages/icons/src/library/tip.tsx
similarity index 100%
rename from packages/icons/src/library/tip.js
rename to packages/icons/src/library/tip.tsx
diff --git a/packages/icons/src/library/title.js b/packages/icons/src/library/title.tsx
similarity index 100%
rename from packages/icons/src/library/title.js
rename to packages/icons/src/library/title.tsx
diff --git a/packages/icons/src/library/tool.js b/packages/icons/src/library/tool.tsx
similarity index 100%
rename from packages/icons/src/library/tool.js
rename to packages/icons/src/library/tool.tsx
diff --git a/packages/icons/src/library/trash.js b/packages/icons/src/library/trash.tsx
similarity index 100%
rename from packages/icons/src/library/trash.js
rename to packages/icons/src/library/trash.tsx
diff --git a/packages/icons/src/library/trending-down.js b/packages/icons/src/library/trending-down.tsx
similarity index 100%
rename from packages/icons/src/library/trending-down.js
rename to packages/icons/src/library/trending-down.tsx
diff --git a/packages/icons/src/library/trending-up.js b/packages/icons/src/library/trending-up.tsx
similarity index 100%
rename from packages/icons/src/library/trending-up.js
rename to packages/icons/src/library/trending-up.tsx
diff --git a/packages/icons/src/library/typography.js b/packages/icons/src/library/typography.js
deleted file mode 100644
index 944a559207567f..00000000000000
--- a/packages/icons/src/library/typography.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const typography = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M6.9 7L3 17.8h1.7l1-2.8h4.1l1 2.8h1.7L8.6 7H6.9zm-.7 6.6l1.5-4.3 1.5 4.3h-3zM21.6 17c-.1.1-.2.2-.3.2-.1.1-.2.1-.4.1s-.3-.1-.4-.2c-.1-.1-.1-.3-.1-.6V12c0-.5 0-1-.1-1.4-.1-.4-.3-.7-.5-1-.2-.2-.5-.4-.9-.5-.4 0-.8-.1-1.3-.1s-1 .1-1.4.2c-.4.1-.7.3-1 .4-.2.2-.4.3-.6.5-.1.2-.2.4-.2.7 0 .3.1.5.2.8.2.2.4.3.8.3.3 0 .6-.1.8-.3.2-.2.3-.4.3-.7 0-.3-.1-.5-.2-.7-.2-.2-.4-.3-.6-.4.2-.2.4-.3.7-.4.3-.1.6-.1.8-.1.3 0 .6 0 .8.1.2.1.4.3.5.5.1.2.2.5.2.9v1.1c0 .3-.1.5-.3.6-.2.2-.5.3-.9.4-.3.1-.7.3-1.1.4-.4.1-.8.3-1.1.5-.3.2-.6.4-.8.7-.2.3-.3.7-.3 1.2 0 .6.2 1.1.5 1.4.3.4.9.5 1.6.5.5 0 1-.1 1.4-.3.4-.2.8-.6 1.1-1.1 0 .4.1.7.3 1 .2.3.6.4 1.2.4.4 0 .7-.1.9-.2.2-.1.5-.3.7-.4h-.3zm-3-.9c-.2.4-.5.7-.8.8-.3.2-.6.2-.8.2-.4 0-.6-.1-.9-.3-.2-.2-.3-.6-.3-1.1 0-.5.1-.9.3-1.2s.5-.5.8-.7c.3-.2.7-.3 1-.5.3-.1.6-.3.7-.6v3.4z" />
-	</SVG>
-);
-
-export default typography;
diff --git a/packages/icons/src/library/typography.tsx b/packages/icons/src/library/typography.tsx
new file mode 100644
index 00000000000000..c4c554fd5fd51a
--- /dev/null
+++ b/packages/icons/src/library/typography.tsx
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const typography = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m8.6 7 3.9 10.8h-1.7l-1-2.8H5.7l-1 2.8H3L6.9 7h1.7Zm-2.4 6.6h3L7.7 9.3l-1.5 4.3ZM17.691 8.879c.473 0 .88.055 1.221.165.352.1.643.264.875.495.274.253.456.572.544.957.088.374.132.83.132 1.37v4.554c0 .274.033.472.099.593.077.11.198.166.363.166.11 0 .215-.028.313-.083.11-.055.237-.137.38-.247l.165.28a3.304 3.304 0 0 1-.71.446c-.23.11-.527.165-.89.165-.352 0-.639-.055-.858-.165-.22-.11-.386-.27-.495-.479-.1-.209-.149-.468-.149-.775-.286.462-.627.814-1.023 1.056-.396.242-.858.363-1.386.363-.462 0-.858-.088-1.188-.264a1.752 1.752 0 0 1-.742-.726 2.201 2.201 0 0 1-.248-1.056c0-.484.11-.875.33-1.172.22-.308.5-.556.841-.742.352-.187.721-.341 1.106-.462.396-.132.765-.253 1.106-.363.351-.121.637-.259.857-.413.232-.154.347-.357.347-.61V10.81c0-.396-.066-.71-.198-.941a1.05 1.05 0 0 0-.511-.511 1.763 1.763 0 0 0-.76-.149c-.253 0-.522.039-.808.116a1.165 1.165 0 0 0-.677.412 1.1 1.1 0 0 1 .595.396c.165.187.247.424.247.71 0 .307-.104.55-.313.726-.198.176-.451.263-.76.263-.34 0-.594-.104-.758-.313a1.231 1.231 0 0 1-.248-.759c0-.297.072-.539.214-.726.154-.187.352-.363.595-.528.264-.176.6-.324 1.006-.445.418-.121.88-.182 1.386-.182Zm.99 3.729a1.57 1.57 0 0 1-.528.462c-.231.121-.479.248-.742.38a5.377 5.377 0 0 0-.76.462c-.23.165-.423.38-.577.643-.154.264-.231.6-.231 1.007 0 .429.11.77.33 1.023.22.242.517.363.891.363.308 0 .594-.088.858-.264.275-.176.528-.44.759-.792v-3.284Z" />
+	</SVG>
+);
+
+export default typography;
diff --git a/packages/icons/src/library/undo.js b/packages/icons/src/library/undo.tsx
similarity index 100%
rename from packages/icons/src/library/undo.js
rename to packages/icons/src/library/undo.tsx
diff --git a/packages/icons/src/library/ungroup.js b/packages/icons/src/library/ungroup.tsx
similarity index 100%
rename from packages/icons/src/library/ungroup.js
rename to packages/icons/src/library/ungroup.tsx
diff --git a/packages/icons/src/library/unlock.js b/packages/icons/src/library/unlock.tsx
similarity index 100%
rename from packages/icons/src/library/unlock.js
rename to packages/icons/src/library/unlock.tsx
diff --git a/packages/icons/src/library/unseen.js b/packages/icons/src/library/unseen.tsx
similarity index 100%
rename from packages/icons/src/library/unseen.js
rename to packages/icons/src/library/unseen.tsx
diff --git a/packages/icons/src/library/update.js b/packages/icons/src/library/update.tsx
similarity index 100%
rename from packages/icons/src/library/update.js
rename to packages/icons/src/library/update.tsx
diff --git a/packages/icons/src/library/upload.js b/packages/icons/src/library/upload.tsx
similarity index 100%
rename from packages/icons/src/library/upload.js
rename to packages/icons/src/library/upload.tsx
diff --git a/packages/icons/src/library/verse.js b/packages/icons/src/library/verse.tsx
similarity index 100%
rename from packages/icons/src/library/verse.js
rename to packages/icons/src/library/verse.tsx
diff --git a/packages/icons/src/library/video.js b/packages/icons/src/library/video.tsx
similarity index 100%
rename from packages/icons/src/library/video.js
rename to packages/icons/src/library/video.tsx
diff --git a/packages/icons/src/library/widget.js b/packages/icons/src/library/widget.tsx
similarity index 100%
rename from packages/icons/src/library/widget.js
rename to packages/icons/src/library/widget.tsx
diff --git a/packages/icons/src/library/wordpress.js b/packages/icons/src/library/wordpress.tsx
similarity index 100%
rename from packages/icons/src/library/wordpress.js
rename to packages/icons/src/library/wordpress.tsx
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 75a703b181881c..0aebb34016658b 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,37 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+### Bug Fixes
+
+-   Preserve `media` attribute on intial style sheets after client-side navigation. ([70668](https://github.com/WordPress/gutenberg/pull/70668))
+
+## 2.26.0 (2025-06-25)
+
+### New Features
+
+-   Add support for new router regions with `attachTo` from new pages. ([70421](https://github.com/WordPress/gutenberg/pull/70421))
+
+### Enhancements
+
+-   Export `NavigateOptions` and `PrefetchOptions` types. ([#70315](https://github.com/WordPress/gutenberg/pull/70315))
+-   Support new styles and script modules on client-side navigation, including a new full-page client-side navigation mode. ([#70353](https://github.com/WordPress/gutenberg/pull/70353))
+-   Introduce `AsyncAction` and `TypeYield` type helpers. ([#70422](https://github.com/WordPress/gutenberg/pull/70422))
+
+### Bug Fixes
+
+-   Prevents duplicating nested router regions after a client-side navigation. ([#70302](https://github.com/WordPress/gutenberg/pull/70302))
+-   Fix dynamic imports on new visited pages. ([#70489](https://github.com/WordPress/gutenberg/pull/70489))
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/interactivity-router/README.md b/packages/interactivity-router/README.md
index 3491ad3b459a47..a2637c12e3a0cb 100644
--- a/packages/interactivity-router/README.md
+++ b/packages/interactivity-router/README.md
@@ -72,6 +72,8 @@ const { state, actions } = store( 'core/router', {
 
 It defines a region that is updated on navigation. It requires a unique ID as the value and can only be used in root interactive elements, i.e., elements with `data-wp-interactive` that are not nested inside other elements with `data-wp-interactive`.
 
+The value can be a string with the region ID, or a JSON object containing the `id` and an optional `attachTo` property.
+
 Example:
 
 ```html
@@ -85,6 +87,26 @@ Example:
 </div>
 ```
 
+The `attachTo` property is a CSS selector that points to the parent element where the new router region should be rendered. This is useful for regions that may not exist on the initial page but are present on subsequent pages, like a modal or an overlay.
+
+When navigating between pages:
+
+-   If a region exists on both the current and the new page, its content is updated. `attachTo` is ignored in this case.
+-   If a region without `attachTo` exists on the new page but not on the current one, it is not added to the DOM.
+-   If a region with `attachTo` exists on the new page but not on the current one, it is created and appended to the parent element specified in `attachTo`.
+-   If a region exists on the current page but not on the new one, it is removed from the DOM. `attachTo` is ignored in this case.
+
+Example with `attachTo`:
+
+```html
+<div
+  data-wp-interactive="myblock"
+  data-wp-router-region='{ "id": "myblock/overlay", "attachTo": "body" }'
+>
+  I'm in a new region!
+</div>
+```
+
 ### Actions
 
 #### `navigate`
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index 9d8dd7890aa966..df12cf522d53a6 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,11 +25,15 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
-	"wpScriptModuleExports": "./build-module/index.js",
+	"wpScriptModuleExports": {
+		".": "./build-module/index.js",
+		"./full-page": "./build-module/full-page.js"
+	},
 	"types": "build-types",
 	"dependencies": {
 		"@wordpress/a11y": "file:../a11y",
-		"@wordpress/interactivity": "file:../interactivity"
+		"@wordpress/interactivity": "file:../interactivity",
+		"es-module-lexer": "^1.5.4"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/interactivity-router/src/assets/dynamic-importmap/fetch.ts b/packages/interactivity-router/src/assets/dynamic-importmap/fetch.ts
new file mode 100644
index 00000000000000..b95c9a74858ab0
--- /dev/null
+++ b/packages/interactivity-router/src/assets/dynamic-importmap/fetch.ts
@@ -0,0 +1,58 @@
+/**
+ * This code is derived from the following projects:
+ *
+ * 1. dynamic-importmap (https://github.com/keller-mark/dynamic-importmap)
+ * 2. es-module-shims (https://github.com/guybedford/es-module-shims)
+ *
+ * The original implementation was created by Guy Bedford in es-module-shims,
+ * then adapted by Mark Keller in dynamic-importmap, and further modified
+ * for use in this project.
+ *
+ * Both projects are licensed under the MIT license.
+ *
+ * MIT License: https://opensource.org/licenses/MIT
+ */
+
+/**
+ * Internal dependencies
+ */
+import { type ModuleLoad } from './loader';
+
+const fetching = ( url: string, parent?: string ) => {
+	return ` fetching ${ url }${ parent ? ` from ${ parent }` : '' }`;
+};
+
+const jsContentType = /^(text|application)\/(x-)?javascript(;|$)/;
+
+/**
+ * Fetches the passed module URL and return the corresponding `ModuleLoad`
+ * instance. If the passed URL does not point to a JS file, the function
+ * throws and error.
+ *
+ * @param url       Module URL.
+ * @param fetchOpts Fetch init options.
+ * @param parent    Parent module URL referencing this URL (if any).
+ * @return Promise with a `ModuleLoad` instance.
+ */
+export async function fetchModule(
+	url: string,
+	fetchOpts: RequestInit,
+	parent: string
+): Promise< ModuleLoad > {
+	let res: Response;
+	try {
+		res = await fetch( url, fetchOpts );
+	} catch ( e ) {
+		throw Error( `Network error${ fetching( url, parent ) }.` );
+	}
+	if ( ! res.ok ) {
+		throw Error( `Error ${ res.status }${ fetching( url, parent ) }.` );
+	}
+	const contentType = res.headers.get( 'content-type' );
+	if ( ! jsContentType.test( contentType ) ) {
+		throw Error(
+			`Bad Content-Type "${ contentType }"${ fetching( url, parent ) }.`
+		);
+	}
+	return { responseUrl: res.url, source: await res.text() };
+}
diff --git a/packages/interactivity-router/src/assets/dynamic-importmap/index.ts b/packages/interactivity-router/src/assets/dynamic-importmap/index.ts
new file mode 100644
index 00000000000000..0a965cf7289142
--- /dev/null
+++ b/packages/interactivity-router/src/assets/dynamic-importmap/index.ts
@@ -0,0 +1,87 @@
+/**
+ * This code is derived from the following projects:
+ *
+ * 1. dynamic-importmap (https://github.com/keller-mark/dynamic-importmap)
+ * 2. es-module-shims (https://github.com/guybedford/es-module-shims)
+ *
+ * The original implementation was created by Guy Bedford in es-module-shims,
+ * then adapted by Mark Keller in dynamic-importmap, and further modified
+ * for use in this project.
+ *
+ * Both projects are licensed under the MIT license.
+ *
+ * MIT License: https://opensource.org/licenses/MIT
+ */
+
+/**
+ * Internal dependencies
+ */
+import { addImportMap, resolve } from './resolver';
+import { initPromise, topLevelLoad, preloadModule } from './loader';
+
+type ImportMap = {
+	imports?: Record< string, string >;
+	scopes?: Record< string, Record< string, string > >;
+};
+
+// TODO: check if this baseURI should change per document, and so
+// it need to be passed as a parameter to methods like `importWithMap`
+// and `preloadWithMap`.
+const baseUrl = document.baseURI;
+const pageBaseUrl = baseUrl;
+
+Object.defineProperty( self, 'wpInteractivityRouterImport', {
+	value: importShim,
+	writable: false,
+	enumerable: false,
+	configurable: false,
+} );
+
+async function importShim< Module = unknown >( id: string ) {
+	await initPromise;
+	return topLevelLoad< Module >( resolve( id, pageBaseUrl ), {
+		credentials: 'same-origin',
+	} );
+}
+
+/**
+ * Imports the module with the passed ID.
+ *
+ * The module is resolved against the internal dynamic import map,
+ * extended with the passed import map.
+ *
+ * @param id          Module ID.
+ * @param importMapIn Import map.
+ * @return Resolved module.
+ */
+export async function importWithMap< Module = unknown >(
+	id: string,
+	importMapIn: ImportMap
+) {
+	addImportMap( importMapIn );
+	return importShim< Module >( id );
+}
+
+/**
+ * Preloads the module with the passed ID along with its dependencies.
+ *
+ * The module is resolved against the internal dynamic import map,
+ * extended with the passed import map.
+ *
+ * @param id          Module ID.
+ * @param importMapIn Import map.
+ * @return Resolved `ModuleLoad` instance.
+ */
+export async function preloadWithMap( id: string, importMapIn: ImportMap ) {
+	addImportMap( importMapIn );
+	await initPromise;
+	return preloadModule( resolve( id, pageBaseUrl ), {
+		credentials: 'same-origin',
+	} );
+}
+
+export {
+	initialImportMap,
+	importPreloadedModule,
+	type ModuleLoad,
+} from './loader';
diff --git a/packages/interactivity-router/src/assets/dynamic-importmap/loader.ts b/packages/interactivity-router/src/assets/dynamic-importmap/loader.ts
new file mode 100644
index 00000000000000..e2101216fc8340
--- /dev/null
+++ b/packages/interactivity-router/src/assets/dynamic-importmap/loader.ts
@@ -0,0 +1,366 @@
+/**
+ * This code is derived from the following projects:
+ *
+ * 1. dynamic-importmap (https://github.com/keller-mark/dynamic-importmap)
+ * 2. es-module-shims (https://github.com/guybedford/es-module-shims)
+ *
+ * The original implementation was created by Guy Bedford in es-module-shims,
+ * then adapted by Mark Keller in dynamic-importmap, and further modified
+ * for use in this project.
+ *
+ * Both projects are licensed under the MIT license.
+ *
+ * MIT License: https://opensource.org/licenses/MIT
+ */
+
+/**
+ * External dependencies
+ */
+import * as lexer from 'es-module-lexer';
+
+/**
+ * Internal dependencies
+ */
+import { fetchModule } from './fetch';
+import { resolve } from './resolver';
+
+export interface ModuleLoad {
+	url?: string; // original URL
+	responseUrl?: string; // response url
+	fetchPromise?: Promise< ModuleLoad >; // fetch promise
+	source?: string; // source code
+	linkPromise?: Promise< void >; // link-promise (dependency fetch)
+	analysis?: ReturnType< typeof lexer.parse >; // analysis ([ imports, exports, ... ])
+	deps?: ModuleLoad[]; // deps
+	blobUrl?: string; // blobUrl
+	shellUrl?: string; // shellUrl for circular references
+}
+
+export const initPromise = lexer.init;
+
+/**
+ * Script element containing the initial page's import map.
+ */
+const initialImportMapElement =
+	window.document.querySelector< HTMLScriptElement >(
+		'script#wp-importmap[type=importmap]'
+	);
+
+/**
+ * Data from the initial page's import map.
+ *
+ * Pages containing any of the imports present on the original page
+ * in their import maps should ignore them, as those imports would
+ * be handled natively.
+ */
+export const initialImportMap = initialImportMapElement
+	? JSON.parse( initialImportMapElement.text )
+	: { imports: {}, scopes: {} };
+
+const skip = ( id ) => Object.keys( initialImportMap.imports ).includes( id );
+
+const fetchCache: Record< string, Promise< ModuleLoad > > = {};
+export const registry = {};
+
+// Init registry with importamp content.
+Object.keys( initialImportMap.imports ).forEach( ( id ) => {
+	registry[ id ] = {
+		blobUrl: id,
+	};
+} );
+
+async function loadAll( load: ModuleLoad, seen: Record< string, any > ) {
+	if ( load.blobUrl || seen[ load.url ] ) {
+		return;
+	}
+	seen[ load.url ] = 1;
+	await load.linkPromise;
+	await Promise.all( load.deps.map( ( dep ) => loadAll( dep, seen ) ) );
+}
+
+function urlJsString( url: string ) {
+	return `'${ url.replace( /'/g, "\\'" ) }'`;
+}
+
+const createBlob = ( source: string, type = 'text/javascript' ) =>
+	URL.createObjectURL( new Blob( [ source ], { type } ) );
+
+function resolveDeps( load: ModuleLoad, seen: Record< string, any > ) {
+	if ( load.blobUrl || ! seen[ load.url ] ) {
+		return;
+	}
+	seen[ load.url ] = 0;
+
+	for ( const dep of load.deps ) {
+		resolveDeps( dep, seen );
+	}
+
+	const [ imports, exports ] = load.analysis;
+	const source = load.source;
+
+	let resolvedSource = '';
+
+	if ( ! imports.length ) {
+		resolvedSource += source;
+	} else {
+		let lastIndex = 0;
+		let depIndex = 0;
+		const dynamicImportEndStack = [];
+
+		function pushStringTo( originalIndex: number ) {
+			while (
+				dynamicImportEndStack.length &&
+				dynamicImportEndStack[ dynamicImportEndStack.length - 1 ] <
+					originalIndex
+			) {
+				const dynamicImportEnd = dynamicImportEndStack.pop();
+				resolvedSource += `${ source.slice(
+					lastIndex,
+					dynamicImportEnd
+				) }, ${ urlJsString( load.responseUrl ) }`;
+				lastIndex = dynamicImportEnd;
+			}
+			resolvedSource += source.slice( lastIndex, originalIndex );
+			lastIndex = originalIndex;
+		}
+
+		for ( const {
+			s: start,
+			ss: statementStart,
+			se: statementEnd,
+			d: dynamicImportIndex,
+		} of imports ) {
+			// static import
+			if ( dynamicImportIndex === -1 ) {
+				const depLoad = load.deps[ depIndex++ ];
+				let blobUrl = depLoad.blobUrl;
+				const cycleShell = ! blobUrl;
+				if ( cycleShell ) {
+					// Circular shell creation
+					if ( ! ( blobUrl = depLoad.shellUrl ) ) {
+						blobUrl = depLoad.shellUrl = createBlob(
+							`export function u$_(m){${ depLoad.analysis[ 1 ]
+								.map( ( { s, e }, i ) => {
+									const q =
+										depLoad.source[ s ] === '"' ||
+										depLoad.source[ s ] === "'";
+									return `e$_${ i }=m${
+										q ? `[` : '.'
+									}${ depLoad.source.slice( s, e ) }${
+										q ? `]` : ''
+									}`;
+								} )
+								.join( ',' ) }}${
+								depLoad.analysis[ 1 ].length
+									? `let ${ depLoad.analysis[ 1 ]
+											.map( ( _, i ) => `e$_${ i }` )
+											.join( ',' ) };`
+									: ''
+							}export {${ depLoad.analysis[ 1 ]
+								.map(
+									( { s, e }, i ) =>
+										`e$_${ i } as ${ depLoad.source.slice(
+											s,
+											e
+										) }`
+								)
+								.join( ',' ) }}\n//# sourceURL=${
+								depLoad.responseUrl
+							}?cycle`
+						);
+					}
+				}
+
+				pushStringTo( start - 1 );
+				resolvedSource += `/*${ source.slice(
+					start - 1,
+					statementEnd
+				) }*/${ urlJsString( blobUrl ) }`;
+
+				// circular shell execution
+				if ( ! cycleShell && depLoad.shellUrl ) {
+					resolvedSource += `;import*as m$_${ depIndex } from'${ depLoad.blobUrl }';import{u$_ as u$_${ depIndex }}from'${ depLoad.shellUrl }';u$_${ depIndex }(m$_${ depIndex })`;
+					depLoad.shellUrl = undefined;
+				}
+				lastIndex = statementEnd;
+			}
+			// import.meta
+			else if ( dynamicImportIndex === -2 ) {
+				throw Error( 'The import.meta property is not supported.' );
+			}
+			// dynamic import
+			else {
+				pushStringTo( statementStart );
+				resolvedSource += `wpInteractivityRouterImport(`;
+				dynamicImportEndStack.push( statementEnd - 1 );
+				lastIndex = start;
+			}
+		}
+
+		// progressive cycle binding updates
+		if ( load.shellUrl ) {
+			resolvedSource += `\n;import{u$_}from'${
+				load.shellUrl
+			}';try{u$_({${ exports
+				.filter( ( e ) => e.ln )
+				.map( ( { s, e, ln } ) => `${ source.slice( s, e ) }:${ ln }` )
+				.join( ',' ) }})}catch(_){};\n`;
+		}
+
+		pushStringTo( source.length );
+	}
+
+	// ensure we have a proper sourceURL
+	let hasSourceURL = false;
+	resolvedSource = resolvedSource.replace(
+		sourceMapURLRegEx,
+		( match, isMapping, url ) => {
+			hasSourceURL = ! isMapping;
+			return match.replace( url, () =>
+				new URL( url, load.responseUrl ).toString()
+			);
+		}
+	);
+	if ( ! hasSourceURL ) {
+		resolvedSource += '\n//# sourceURL=' + load.responseUrl;
+	}
+
+	load.blobUrl = createBlob( resolvedSource );
+	load.source = undefined; // free memory
+}
+
+const sourceMapURLRegEx =
+	/\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]*)\s*)*$/;
+
+function getOrCreateLoad(
+	url: string,
+	fetchOpts: RequestInit,
+	parent: string
+): ModuleLoad {
+	let load: ModuleLoad = registry[ url ];
+	if ( load ) {
+		return load;
+	}
+
+	load = { url };
+
+	if ( registry[ url ] ) {
+		// If there's a naming conflict, keep incrementing until unique
+		let i = 0;
+		while ( registry[ load.url + ++i ] ) {
+			/* no-op */
+		}
+		load.url += i;
+	}
+	registry[ load.url ] = load;
+
+	load.fetchPromise = ( async () => {
+		let source;
+		( { responseUrl: load.responseUrl, source: source } =
+			await ( fetchCache[ url ] ||
+				fetchModule( url, fetchOpts, parent ) ) );
+		try {
+			load.analysis = lexer.parse( source, load.url );
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			load.analysis = [ [], [], false, false ];
+		}
+		load.source = source;
+		return load;
+	} )();
+
+	load.linkPromise = load.fetchPromise.then( async () => {
+		let childFetchOpts = fetchOpts;
+		load.deps = (
+			await Promise.all(
+				load.analysis[ 0 ].map( async ( { n, d } ) => {
+					if ( d !== -1 || ! n ) {
+						return undefined;
+					}
+					const responseUrl = resolve(
+						n,
+						load.responseUrl || load.url
+					);
+					if ( skip && skip( responseUrl ) ) {
+						return { blobUrl: responseUrl } as ModuleLoad;
+					}
+					// remove integrity for child fetches
+					if ( childFetchOpts.integrity ) {
+						childFetchOpts = {
+							...childFetchOpts,
+							integrity: undefined,
+						};
+					}
+					return getOrCreateLoad(
+						responseUrl,
+						childFetchOpts,
+						load.responseUrl
+					).fetchPromise;
+				} )
+			)
+		).filter( ( l ) => l );
+	} );
+
+	return load;
+}
+
+const dynamicImport = ( u: string ) => import( /* webpackIgnore: true */ u );
+
+/**
+ * Resolves the passed module URL and fetches the corresponding module
+ * and their dependencies, returning a `ModuleLoad` object once all
+ * of them have been fetched.
+ *
+ * @param url       Module URL.
+ * @param fetchOpts Fetch options.
+ * @return A promise with a `ModuleLoad` instance.
+ */
+export async function preloadModule(
+	url: string,
+	fetchOpts?: RequestInit
+): Promise< ModuleLoad > {
+	await initPromise;
+	const load = getOrCreateLoad( url, fetchOpts, null );
+	const seen = {};
+	await loadAll( load, seen );
+	resolveDeps( load, seen );
+	// microtask scheduling – can help ensure Blob is fully ready
+	await Promise.resolve();
+	return load;
+}
+
+/**
+ * Imports the module represented by the passed `ModuleLoad` instance.
+ *
+ * @param load The `ModuleLoad` instance representing the module.
+ * @return A promise with the imported module.
+ */
+export async function importPreloadedModule< Module = unknown >(
+	load: ModuleLoad
+): Promise< Module > {
+	const module = await dynamicImport( load.blobUrl );
+	// if the preloaded module ended up with a shell (circular refs), finalize it
+	if ( load.shellUrl ) {
+		( await dynamicImport( load.shellUrl ) ).u$_( module );
+	}
+	return module;
+}
+
+/**
+ * Imports the module represented by the passed module URL.
+ *
+ * The module URL and all its dependencies are resolved using the
+ * current status of the internal dynamic import map.
+ *
+ * @param url       Module URL.
+ * @param fetchOpts Fetch options.
+ * @return A promise with the imported module.
+ */
+export async function topLevelLoad< Module = unknown >(
+	url: string,
+	fetchOpts?: RequestInit
+): Promise< Module > {
+	const load = await preloadModule( url, fetchOpts );
+	return importPreloadedModule< Module >( load );
+}
diff --git a/packages/interactivity-router/src/assets/dynamic-importmap/resolver.ts b/packages/interactivity-router/src/assets/dynamic-importmap/resolver.ts
new file mode 100644
index 00000000000000..bffb0db82e8b3b
--- /dev/null
+++ b/packages/interactivity-router/src/assets/dynamic-importmap/resolver.ts
@@ -0,0 +1,292 @@
+/**
+ * This code is derived from the following projects:
+ *
+ * 1. dynamic-importmap (https://github.com/keller-mark/dynamic-importmap)
+ * 2. es-module-shims (https://github.com/guybedford/es-module-shims)
+ *
+ * The original implementation was created by Guy Bedford in es-module-shims,
+ * then adapted by Mark Keller in dynamic-importmap, and further modified
+ * for use in this project.
+ *
+ * Both projects are licensed under the MIT license.
+ *
+ * MIT License: https://opensource.org/licenses/MIT
+ */
+
+const backslashRegEx = /\\/g;
+
+function isURL( url: string ) {
+	if ( url.indexOf( ':' ) === -1 ) {
+		return false;
+	}
+	try {
+		new URL( url );
+		return true;
+	} catch ( _ ) {
+		return false;
+	}
+}
+
+function resolveIfNotPlainOrUrl( relUrl, parentUrl ) {
+	const hIdx = parentUrl.indexOf( '#' ),
+		qIdx = parentUrl.indexOf( '?' );
+	if ( hIdx + qIdx > -2 ) {
+		parentUrl = parentUrl.slice(
+			0,
+			// eslint-disable-next-line no-nested-ternary
+			hIdx === -1 ? qIdx : qIdx === -1 || qIdx > hIdx ? hIdx : qIdx
+		);
+	}
+	if ( relUrl.indexOf( '\\' ) !== -1 ) {
+		relUrl = relUrl.replace( backslashRegEx, '/' );
+	}
+	// protocol-relative
+	if ( relUrl[ 0 ] === '/' && relUrl[ 1 ] === '/' ) {
+		return parentUrl.slice( 0, parentUrl.indexOf( ':' ) + 1 ) + relUrl;
+	}
+	// relative-url
+	else if (
+		( relUrl[ 0 ] === '.' &&
+			( relUrl[ 1 ] === '/' ||
+				( relUrl[ 1 ] === '.' &&
+					( relUrl[ 2 ] === '/' ||
+						( relUrl.length === 2 && ( relUrl += '/' ) ) ) ) ||
+				( relUrl.length === 1 && ( relUrl += '/' ) ) ) ) ||
+		relUrl[ 0 ] === '/'
+	) {
+		const parentProtocol = parentUrl.slice(
+			0,
+			parentUrl.indexOf( ':' ) + 1
+		);
+		// Disabled, but these cases will give inconsistent results for deep backtracking
+		//if (parentUrl[parentProtocol.length] !== '/')
+		//  throw new Error('Cannot resolve');
+		// read pathname from parent URL
+		// pathname taken to be part after leading "/"
+		let pathname;
+		if ( parentUrl[ parentProtocol.length + 1 ] === '/' ) {
+			// resolving to a :// so we need to read out the auth and host
+			if ( parentProtocol !== 'file:' ) {
+				pathname = parentUrl.slice( parentProtocol.length + 2 );
+				pathname = pathname.slice( pathname.indexOf( '/' ) + 1 );
+			} else {
+				pathname = parentUrl.slice( 8 );
+			}
+		} else {
+			// resolving to :/ so pathname is the /... part
+			pathname = parentUrl.slice(
+				parentProtocol.length +
+					( parentUrl[ parentProtocol.length ] === '/' )
+			);
+		}
+
+		if ( relUrl[ 0 ] === '/' ) {
+			return (
+				parentUrl.slice( 0, parentUrl.length - pathname.length - 1 ) +
+				relUrl
+			);
+		}
+
+		// join together and split for removal of .. and . segments
+		// looping the string instead of anything fancy for perf reasons
+		// '../../../../../z' resolved to 'x/y' is just 'z'
+		const segmented =
+			pathname.slice( 0, pathname.lastIndexOf( '/' ) + 1 ) + relUrl;
+
+		const output = [];
+		let segmentIndex = -1;
+		for ( let i = 0; i < segmented.length; i++ ) {
+			// busy reading a segment - only terminate on '/'
+			if ( segmentIndex !== -1 ) {
+				if ( segmented[ i ] === '/' ) {
+					output.push( segmented.slice( segmentIndex, i + 1 ) );
+					segmentIndex = -1;
+				}
+				continue;
+			}
+			// new segment - check if it is relative
+			else if ( segmented[ i ] === '.' ) {
+				// ../ segment
+				if (
+					segmented[ i + 1 ] === '.' &&
+					( segmented[ i + 2 ] === '/' || i + 2 === segmented.length )
+				) {
+					output.pop();
+					i += 2;
+					continue;
+				}
+				// ./ segment
+				else if (
+					segmented[ i + 1 ] === '/' ||
+					i + 1 === segmented.length
+				) {
+					i += 1;
+					continue;
+				}
+			}
+			// it is the start of a new segment
+			while ( segmented[ i ] === '/' ) {
+				i++;
+			}
+			segmentIndex = i;
+		}
+		// finish reading out the last segment
+		if ( segmentIndex !== -1 ) {
+			output.push( segmented.slice( segmentIndex ) );
+		}
+		return (
+			parentUrl.slice( 0, parentUrl.length - pathname.length ) +
+			output.join( '' )
+		);
+	}
+}
+
+function resolveUrl( relUrl, parentUrl ) {
+	return (
+		resolveIfNotPlainOrUrl( relUrl, parentUrl ) ||
+		( isURL( relUrl )
+			? relUrl
+			: resolveIfNotPlainOrUrl( './' + relUrl, parentUrl ) )
+	);
+}
+
+function getMatch( path, matchObj ) {
+	if ( matchObj[ path ] ) {
+		return path;
+	}
+	let sepIndex = path.length;
+	do {
+		const segment = path.slice( 0, sepIndex + 1 );
+		if ( segment in matchObj ) {
+			return segment;
+		}
+	} while ( ( sepIndex = path.lastIndexOf( '/', sepIndex - 1 ) ) !== -1 );
+}
+
+function applyPackages( id, packages ) {
+	const pkgName = getMatch( id, packages );
+	if ( pkgName ) {
+		const pkg = packages[ pkgName ];
+		if ( pkg === null ) {
+			return;
+		}
+		return pkg + id.slice( pkgName.length );
+	}
+}
+
+function resolveImportMap( importMap, resolvedOrPlain, parentUrl ) {
+	let scopeUrl = parentUrl && getMatch( parentUrl, importMap.scopes );
+	while ( scopeUrl ) {
+		const packageResolution = applyPackages(
+			resolvedOrPlain,
+			importMap.scopes[ scopeUrl ]
+		);
+		if ( packageResolution ) {
+			return packageResolution;
+		}
+		scopeUrl = getMatch(
+			scopeUrl.slice( 0, scopeUrl.lastIndexOf( '/' ) ),
+			importMap.scopes
+		);
+	}
+	return (
+		applyPackages( resolvedOrPlain, importMap.imports ) ||
+		( resolvedOrPlain.indexOf( ':' ) !== -1 && resolvedOrPlain )
+	);
+}
+
+function resolveAndComposePackages(
+	packages,
+	outPackages,
+	baseUrl,
+	parentMap
+) {
+	for ( const p in packages ) {
+		const resolvedLhs = resolveIfNotPlainOrUrl( p, baseUrl ) || p;
+		const target = packages[ p ];
+		if ( typeof target !== 'string' ) {
+			continue;
+		}
+		const mapped = resolveImportMap(
+			parentMap,
+			resolveIfNotPlainOrUrl( target, baseUrl ) || target,
+			baseUrl
+		);
+		if ( mapped ) {
+			outPackages[ resolvedLhs ] = mapped;
+			continue;
+		}
+		// console.warn(
+		// 	`Mapping "${ p }" -> "${ packages[ p ] }" does not resolve`
+		// );
+	}
+}
+
+function resolveAndComposeImportMap( json, baseUrl, parentMap ) {
+	const outMap = {
+		imports: Object.assign( {}, parentMap.imports ),
+		scopes: Object.assign( {}, parentMap.scopes ),
+	};
+
+	if ( json.imports ) {
+		resolveAndComposePackages(
+			json.imports,
+			outMap.imports,
+			baseUrl,
+			parentMap
+		);
+	}
+
+	if ( json.scopes ) {
+		for ( const s in json.scopes ) {
+			const resolvedScope = resolveUrl( s, baseUrl );
+			resolveAndComposePackages(
+				json.scopes[ s ],
+				outMap.scopes[ resolvedScope ] ||
+					( outMap.scopes[ resolvedScope ] = {} ),
+				baseUrl,
+				parentMap
+			);
+		}
+	}
+
+	return outMap;
+}
+
+let importMap = { imports: {}, scopes: {} };
+
+// TODO: check if this baseURI should change per document, and so
+// it need to be passed as a parameter to methods like `resolve`.
+const baseUrl = document.baseURI;
+const pageBaseUrl = baseUrl;
+
+/**
+ * Extends the internal dynamic import map with the passed one.
+ *
+ * @param importMapIn         Import map.
+ * @param importMapIn.imports Imports declaration.
+ * @param importMapIn.scopes  Scopes declaration.
+ */
+export function addImportMap( importMapIn: {
+	imports?: Record< string, string >;
+	scopes?: Record< string, any >;
+} ) {
+	importMap = resolveAndComposeImportMap(
+		importMapIn,
+		pageBaseUrl,
+		importMap
+	);
+}
+
+/**
+ * Resolves the URL of the passed module ID against the current internal
+ * dynamic import map.
+ *
+ * @param id        Module ID.
+ * @param parentUrl Parent URL, in case the module ID is relative.
+ * @return Resolved module URL.
+ */
+export function resolve( id: string, parentUrl: string ): string {
+	const urlResolved = resolveIfNotPlainOrUrl( id, parentUrl );
+	return resolveImportMap( importMap, urlResolved || id, parentUrl ) || id;
+}
diff --git a/packages/interactivity-router/src/assets/script-modules.ts b/packages/interactivity-router/src/assets/script-modules.ts
new file mode 100644
index 00000000000000..7bb1bd13fb278c
--- /dev/null
+++ b/packages/interactivity-router/src/assets/script-modules.ts
@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import {
+	initialImportMap,
+	importPreloadedModule,
+	preloadWithMap,
+	type ModuleLoad,
+} from './dynamic-importmap';
+
+/**
+ * IDs of modules that should be resolved by the browser rather than
+ * processed internally.
+ */
+const resolvedScriptModules = new Set< string >();
+
+/**
+ * Marks the specified module as natively resolved.
+ * @param url Script module URL.
+ */
+export const markScriptModuleAsResolved = ( url: string ) => {
+	resolvedScriptModules.add( url );
+};
+
+/**
+ * Resolves and fetches modules present in the passed document, using the
+ * document's import map to resolve them.
+ *
+ * @param doc Document containing the modules to preload.
+ * @return Array of promises that resolve to a `ScriptModuleLoad` instance.
+ */
+export const preloadScriptModules = ( doc: Document ) => {
+	// Extract the import map from the document.
+	const importMapElement = doc.querySelector< HTMLScriptElement >(
+		'script#wp-importmap[type=importmap]'
+	);
+	const importMap = importMapElement
+		? JSON.parse( importMapElement.text )
+		: { imports: {}, scopes: {} };
+
+	// Remove imports also in the initial page's import map.
+	// Those should be handled natively.
+	for ( const key in initialImportMap.imports ) {
+		delete importMap.imports[ key ];
+	}
+
+	// Get the URL of all modules contained in the document.
+	const moduleUrls = [
+		...doc.querySelectorAll< HTMLScriptElement >(
+			'script[type=module][src]'
+		),
+	].map( ( s ) => s.src );
+
+	// Resolve and fetch those not resolved natively.
+	return moduleUrls
+		.filter( ( url ) => ! resolvedScriptModules.has( url ) )
+		.map( ( url ) => preloadWithMap( url, importMap ) );
+};
+
+/**
+ * Imports modules respresented by the passed `ScriptModuleLoad` instances.
+ *
+ * @param modules Array of `MoudleLoad` instances.
+ * @return Promise that resolves once all modules are imported.
+ */
+export const importScriptModules = ( modules: ScriptModuleLoad[] ) =>
+	Promise.all( modules.map( ( m ) => importPreloadedModule( m ) ) );
+
+export type ScriptModuleLoad = ModuleLoad;
diff --git a/packages/interactivity-router/src/assets/scs.ts b/packages/interactivity-router/src/assets/scs.ts
new file mode 100644
index 00000000000000..af1377baf70ac5
--- /dev/null
+++ b/packages/interactivity-router/src/assets/scs.ts
@@ -0,0 +1,61 @@
+/**
+ * Calculates the Shortest Common Supersequence (SCS) of two sequences.
+ *
+ * A supersequence is a sequence that contains both input sequences as subsequences.
+ * The shortest common supersequence is the shortest possible such sequence.
+ *
+ * This implementation uses dynamic programming with a time complexity of O(mn)
+ * and space complexity of O(mn), where m and n are the lengths of sequences X and Y.
+ *
+ * @example
+ * ```ts
+ * const seq1 = [1, 3, 5];
+ * const seq2 = [2, 3, 4];
+ * const scs = shortestCommonSupersequence(seq1, seq2); // [1, 2, 3, 4, 5]
+ * ```
+ *
+ * @param X       The first sequence.
+ * @param Y       The second sequence.
+ * @param isEqual Optional equality function to compare elements.
+ *                Defaults to strict equality (===).
+ * @return The shortest common supersequence of X and Y.
+ */
+export function shortestCommonSupersequence< E = unknown >(
+	X: E[],
+	Y: E[],
+	isEqual = ( a: E, b: E ) => a === b
+) {
+	const m = X.length;
+	const n = Y.length;
+
+	// Create a 2D dp table where dp[i][j] is the SCS for X[0..i-1] and Y[0..j-1].
+	const dp: E[][][] = Array.from( { length: m + 1 }, () =>
+		Array( n + 1 ).fill( null )
+	);
+
+	// Base cases: one of the sequences is empty.
+	for ( let i = 0; i <= m; i++ ) {
+		dp[ i ][ 0 ] = X.slice( 0, i );
+	}
+	for ( let j = 0; j <= n; j++ ) {
+		dp[ 0 ][ j ] = Y.slice( 0, j );
+	}
+
+	// Fill in the dp table.
+	for ( let i = 1; i <= m; i++ ) {
+		for ( let j = 1; j <= n; j++ ) {
+			if ( isEqual( X[ i - 1 ], Y[ j - 1 ] ) ) {
+				// When X[i-1] equals Y[j-1], use the reference from X.
+				dp[ i ][ j ] = dp[ i - 1 ][ j - 1 ].concat( X[ i - 1 ] );
+			} else {
+				// Choose the shorter option between appending X[i-1] or Y[j-1].
+				const option1 = dp[ i - 1 ][ j ].concat( X[ i - 1 ] );
+				const option2 = dp[ i ][ j - 1 ].concat( Y[ j - 1 ] );
+				dp[ i ][ j ] =
+					option1.length <= option2.length ? option1 : option2;
+			}
+		}
+	}
+
+	return dp[ m ][ n ];
+}
diff --git a/packages/interactivity-router/src/assets/styles.ts b/packages/interactivity-router/src/assets/styles.ts
new file mode 100644
index 00000000000000..f0afcd4dbcedc6
--- /dev/null
+++ b/packages/interactivity-router/src/assets/styles.ts
@@ -0,0 +1,275 @@
+/**
+ * Internal dependencies
+ */
+import { shortestCommonSupersequence } from './scs';
+
+export type StyleElement = HTMLLinkElement | HTMLStyleElement;
+
+/**
+ * Compares the passed style or link elements to check if they can be
+ * considered equal.
+ *
+ * @param a `<style>` or `<link>` element.
+ * @param b `<style>` or `<link>` element.
+ * @return Whether they are considered equal.
+ */
+const areNodesEqual = ( a: StyleElement, b: StyleElement ): boolean =>
+	a.isEqualNode( b );
+
+/**
+ * Normalizes the passed style or link element, reverting the changes
+ * made by {@link prepareStylePromise|`prepareStylePromise`} to the
+ * `data-original-media` and `media`.
+ *
+ * @example
+ * The following elements should be normalized to the same element:
+ * ```html
+ * <link rel="stylesheet" src="./assets/styles.css">
+ * <link rel="stylesheet" src="./assets/styles.css" media="all">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+ * ```
+ *
+ * @param element `<style>` or `<link>` element.
+ * @return Normalized node.
+ */
+export const normalizeMedia = ( element: StyleElement ): StyleElement => {
+	element = element.cloneNode( true ) as StyleElement;
+	const media = element.media;
+	const { originalMedia } = element.dataset;
+
+	if ( media === 'preload' ) {
+		element.media = originalMedia || 'all';
+		element.removeAttribute( 'data-original-media' );
+	} else if ( ! element.media ) {
+		element.media = 'all';
+	}
+	return element;
+};
+
+/**
+ * Adds the minimum style elements from Y around those in X using a
+ * shortest common supersequence algorithm, returning a list of
+ * promises for all the elements in Y.
+ *
+ * If X is empty, it appends all elements in Y to the passed parent
+ * element or to `document.head` instead.
+ *
+ * The returned promises resolve once the corresponding style element
+ * is loaded and ready. Those elements that are also in X return a
+ * cached promise.
+ *
+ * The algorithm ensures that the final style elements present in the
+ * document (or the passed `parent` element) are in the correct order
+ * and they are included in either X or Y.
+ *
+ * @param X      Base list of style elements.
+ * @param Y      List of style elements.
+ * @param parent Optional parent element to append to the new style elements.
+ * @return List of promises that resolve once the elements in Y are ready.
+ */
+export function updateStylesWithSCS(
+	X: StyleElement[],
+	Y: StyleElement[],
+	parent: Element = window.document.head
+) {
+	if ( X.length === 0 ) {
+		return Y.map( ( element ) => {
+			const promise = prepareStylePromise( element );
+			parent.appendChild( element );
+			return promise;
+		} );
+	}
+
+	// Create normalized arrays for comparison.
+	const xNormalized = X.map( normalizeMedia );
+	const yNormalized = Y.map( normalizeMedia );
+
+	// The `scs` array contains normalized elements.
+	const scs = shortestCommonSupersequence(
+		xNormalized,
+		yNormalized,
+		areNodesEqual
+	);
+	const xLength = X.length;
+	const yLength = Y.length;
+	const promises = [];
+	let last = X[ xLength - 1 ];
+	let xIndex = 0;
+	let yIndex = 0;
+
+	for ( const scsElement of scs ) {
+		// Actual elements that will end up in the DOM.
+		const xElement = X[ xIndex ];
+		const yElement = Y[ yIndex ];
+		// Normalized elements for comparison.
+		const xNormEl = xNormalized[ xIndex ];
+		const yNormEl = yNormalized[ yIndex ];
+		if ( xIndex < xLength && areNodesEqual( xNormEl, scsElement ) ) {
+			if ( yIndex < yLength && areNodesEqual( yNormEl, scsElement ) ) {
+				promises.push( prepareStylePromise( xElement ) );
+				yIndex++;
+			}
+			xIndex++;
+		} else {
+			promises.push( prepareStylePromise( yElement ) );
+			if ( xIndex < xLength ) {
+				xElement.before( yElement );
+			} else {
+				last.after( yElement );
+				last = yElement;
+			}
+			yIndex++;
+		}
+	}
+
+	return promises;
+}
+
+/**
+ * Cache of promises per style elements.
+ *
+ * Each style element has their own associated `Promise` that resolves
+ * once the element has been loaded and is ready.
+ */
+const stylePromiseCache = new WeakMap<
+	StyleElement,
+	Promise< StyleElement >
+>();
+
+/**
+ * Prepares and returns the corresponding `Promise` for the passed style
+ * element.
+ *
+ * It returns the cached promise if it exists. Otherwise, constructs
+ * a `Promise` that resolves once the element has finished loading.
+ *
+ * For those elements that are not in the DOM yet, this function
+ * injects a `media="preload"` attribute to the passed element so the
+ * style is loaded without applying any styles to the document.
+ *
+ * @param element Style element.
+ * @return The associated `Promise` to the passed element.
+ */
+const prepareStylePromise = (
+	element: StyleElement
+): Promise< StyleElement > => {
+	if ( stylePromiseCache.has( element ) ) {
+		return stylePromiseCache.get( element );
+	}
+
+	// When the element exists in the main document and its media attribute
+	// is not "preload", that means the element comes from the initial page.
+	// The `media` attribute doesn't need to be handled in this case.
+	if ( window.document.contains( element ) && element.media !== 'preload' ) {
+		const promise = Promise.resolve( element );
+		stylePromiseCache.set( element, promise );
+		return promise;
+	}
+
+	if ( element.hasAttribute( 'media' ) && element.media !== 'all' ) {
+		element.dataset.originalMedia = element.media;
+	}
+
+	element.media = 'preload';
+
+	if ( element instanceof HTMLStyleElement ) {
+		const promise = Promise.resolve( element );
+		stylePromiseCache.set( element, promise );
+		return promise;
+	}
+
+	const promise = new Promise< HTMLLinkElement >( ( resolve, reject ) => {
+		element.addEventListener( 'load', () => resolve( element ) );
+		element.addEventListener( 'error', ( event ) => {
+			const { href } = event.target as HTMLLinkElement;
+			reject(
+				Error(
+					`The style sheet with the following URL failed to load: ${ href }`
+				)
+			);
+		} );
+	} );
+
+	stylePromiseCache.set( element, promise );
+	return promise;
+};
+
+/**
+ * Cache of style promise lists per URL.
+ *
+ * It contains the list of style elements associated to the page with the
+ * passed URL. The original order is preserved to respect the CSS cascade.
+ *
+ * Each included promise resolves when the associated style element is ready.
+ */
+const styleSheetCache = new Map< string, Promise< StyleElement >[] >();
+
+/**
+ * Prepares all style elements contained in the passed document.
+ *
+ * This function calls {@link updateStylesWithSCS|`updateStylesWithSCS`}
+ * to insert only the minimum amount of style elements into the DOM, so
+ * those present in the passed document end up in the DOM while the order
+ * is respected.
+ *
+ * New appended style elements contain a `media=preload` attribute to
+ * make them effectively disabled until they are applied with the
+ * {@link applyStyles|`applyStyles`} function.
+ *
+ * @param doc Document instance.
+ * @param url URL for the passed document.
+ * @return A list of promises for each style element in the passed document.
+ */
+export const preloadStyles = (
+	doc: Document,
+	url: string
+): Promise< StyleElement >[] => {
+	if ( ! styleSheetCache.has( url ) ) {
+		const currentStyleElements = Array.from(
+			window.document.querySelectorAll< StyleElement >(
+				'style,link[rel=stylesheet]'
+			)
+		);
+		const newStyleElements = Array.from(
+			doc.querySelectorAll< StyleElement >( 'style,link[rel=stylesheet]' )
+		);
+
+		// Set styles in order.
+		const stylePromises = updateStylesWithSCS(
+			currentStyleElements,
+			newStyleElements
+		);
+
+		styleSheetCache.set( url, stylePromises );
+	}
+	return styleSheetCache.get( url );
+};
+
+/**
+ * Traverses all style elements in the DOM, enabling only those included
+ * in the passed list and disabling the others.
+ *
+ * If the style element has the `data-original-media` attribute, the
+ * original `media` value is restored.
+ *
+ * @param styles List of style elements to apply.
+ */
+export const applyStyles = ( styles: StyleElement[] ) => {
+	window.document
+		.querySelectorAll( 'style,link[rel=stylesheet]' )
+		.forEach( ( el: HTMLLinkElement | HTMLStyleElement ) => {
+			if ( el.sheet ) {
+				if ( styles.includes( el ) ) {
+					// Only update mediaText when necessary.
+					if ( el.sheet.media.mediaText === 'preload' ) {
+						const { originalMedia = 'all' } = el.dataset;
+						el.sheet.media.mediaText = originalMedia;
+					}
+					el.sheet.disabled = false;
+				} else {
+					el.sheet.disabled = true;
+				}
+			}
+		} );
+};
diff --git a/packages/interactivity-router/src/assets/test/scs.test.ts b/packages/interactivity-router/src/assets/test/scs.test.ts
new file mode 100644
index 00000000000000..6f67412f9a422f
--- /dev/null
+++ b/packages/interactivity-router/src/assets/test/scs.test.ts
@@ -0,0 +1,367 @@
+/**
+ * Internal dependencies
+ */
+import { shortestCommonSupersequence } from '../scs';
+
+/**
+ * Checks if the passed array is a contained sequence of the given
+ * supersequence.
+ *
+ * @param arr      Array.
+ * @param superseq Supersequence.
+ * @param isEqual  Optional comparator.
+ * @return True if the passed array is contained. False otherwise.
+ */
+function isSubsequence(
+	arr: unknown[],
+	superseq: unknown[],
+	isEqual = ( a: unknown, b: unknown ): boolean => a === b
+) {
+	let i = 0;
+	let j = 0;
+	while ( i < arr.length && j < superseq.length ) {
+		if ( isEqual( arr[ i ], superseq[ j ] ) ) {
+			i++;
+		}
+		j++;
+	}
+	return i === arr.length;
+}
+
+describe( 'shortestCommonSupersequence', () => {
+	describe( 'Basic functionality', () => {
+		it( 'should handle empty arrays', () => {
+			// Both arrays empty.
+			expect( shortestCommonSupersequence( [], [] ) ).toEqual( [] );
+
+			// X empty, Y with values.
+			const Y = [ 1, 2, 3 ];
+			expect( shortestCommonSupersequence( [], Y ) ).toEqual( Y );
+
+			// Y empty, X with values.
+			const X = [ 1, 2, 3 ];
+			expect( shortestCommonSupersequence( X, [] ) ).toEqual( X );
+		} );
+
+		it( 'should handle identical arrays', () => {
+			// Same elements, same order.
+			const X = [ 1, 2, 3 ];
+			const Y = [ 1, 2, 3 ];
+			expect( shortestCommonSupersequence( X, Y ) ).toEqual( [
+				1, 2, 3,
+			] );
+		} );
+
+		it( 'should handle simple cases with partial overlap', () => {
+			// Overlap at the beginning.
+			const result1 = shortestCommonSupersequence(
+				[ 1, 2, 3 ],
+				[ 1, 2, 4 ]
+			);
+			// Verify it's a valid supersequence.
+			expect( isSubsequence( [ 1, 2, 3 ], result1 ) ).toBe( true );
+			expect( isSubsequence( [ 1, 2, 4 ], result1 ) ).toBe( true );
+			// Verify optimal length.
+			expect( result1.length ).toBe( 4 );
+
+			// Overlap at the end.
+			const result2 = shortestCommonSupersequence(
+				[ 1, 2, 3 ],
+				[ 0, 2, 3 ]
+			);
+			// Verify it's a valid supersequence.
+			expect( isSubsequence( [ 1, 2, 3 ], result2 ) ).toBe( true );
+			expect( isSubsequence( [ 0, 2, 3 ], result2 ) ).toBe( true );
+			// Verify optimal length.
+			expect( result2.length ).toBe( 4 );
+
+			// Middle overlap.
+			const result3 = shortestCommonSupersequence(
+				[ 1, 2, 3 ],
+				[ 0, 2, 4 ]
+			);
+			// Verify it's a valid supersequence.
+			expect( isSubsequence( [ 1, 2, 3 ], result3 ) ).toBe( true );
+			expect( isSubsequence( [ 0, 2, 4 ], result3 ) ).toBe( true );
+			// Verify optimal length.
+			expect( result3.length ).toBe( 5 );
+		} );
+
+		it( 'should handle arrays with no overlap', () => {
+			const X = [ 1, 2, 3 ];
+			const Y = [ 4, 5, 6 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Result length should be X.length + Y.length.
+			expect( result.length ).toBe( X.length + Y.length );
+		} );
+
+		it( 'should verify the supersequence length is optimal', () => {
+			// Example where the shortest supersequence is shorter than just concatenating.
+			const X = [ 1, 2, 3 ];
+			const Y = [ 2, 3, 4 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			expect( result.length ).toBe( 4 );
+			expect( result ).toEqual( [ 1, 2, 3, 4 ] );
+		} );
+	} );
+
+	describe( 'Edge cases', () => {
+		it( 'should handle subsequence cases', () => {
+			// X is a subsequence of Y.
+			const X1 = [ 1, 3 ];
+			const Y1 = [ 1, 2, 3, 4 ];
+			expect( shortestCommonSupersequence( X1, Y1 ) ).toEqual( Y1 );
+
+			// Y is a subsequence of X.
+			const X2 = [ 1, 2, 3, 4 ];
+			const Y2 = [ 1, 3 ];
+			expect( shortestCommonSupersequence( X2, Y2 ) ).toEqual( X2 );
+		} );
+
+		it( 'should handle arrays with duplicate elements', () => {
+			// Duplicates in X.
+			const resultX = shortestCommonSupersequence(
+				[ 1, 2, 2, 3 ],
+				[ 1, 3, 4 ]
+			);
+			expect( isSubsequence( [ 1, 2, 2, 3 ], resultX ) ).toBe( true );
+			expect( isSubsequence( [ 1, 3, 4 ], resultX ) ).toBe( true );
+			expect( resultX.length ).toBe( 5 );
+
+			// Duplicates in Y.
+			const resultY = shortestCommonSupersequence(
+				[ 1, 3, 4 ],
+				[ 1, 2, 2, 3 ]
+			);
+			expect( isSubsequence( [ 1, 3, 4 ], resultY ) ).toBe( true );
+			expect( isSubsequence( [ 1, 2, 2, 3 ], resultY ) ).toBe( true );
+			expect( resultY.length ).toBe( 5 );
+
+			// Duplicates in both X and Y.
+			const resultXY = shortestCommonSupersequence(
+				[ 1, 2, 2, 3 ],
+				[ 1, 2, 3, 3 ]
+			);
+			expect( isSubsequence( [ 1, 2, 2, 3 ], resultXY ) ).toBe( true );
+			expect( isSubsequence( [ 1, 2, 3, 3 ], resultXY ) ).toBe( true );
+			expect( resultXY.length ).toBe( 5 );
+
+			// Multiple duplicate occurrences.
+			const result = shortestCommonSupersequence(
+				[ 1, 2, 1, 2 ],
+				[ 2, 1, 2, 1 ]
+			);
+
+			expect( isSubsequence( [ 1, 2, 1, 2 ], result ) ).toBe( true );
+			expect( isSubsequence( [ 2, 1, 2, 1 ], result ) ).toBe( true );
+			expect( result.length ).toBe( 5 );
+		} );
+
+		it( 'should handle completely duplicate array', () => {
+			expect(
+				shortestCommonSupersequence( [ 1, 1, 1 ], [ 1, 1 ] )
+			).toEqual( [ 1, 1, 1 ] );
+		} );
+
+		it( 'should handle asymmetric cases with different array lengths', () => {
+			// X much longer than Y.
+			const X1 = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
+			const Y1 = [ 2, 5 ];
+			const result1 = shortestCommonSupersequence( X1, Y1 );
+
+			// Result should be same as X since Y is a subsequence.
+			expect( result1 ).toEqual( X1 );
+
+			// Y much longer than X.
+			const X2 = [ 2, 5 ];
+			const Y2 = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
+			const result2 = shortestCommonSupersequence( X2, Y2 );
+
+			// Result should be same as Y since X is a subsequence.
+			expect( result2 ).toEqual( Y2 );
+		} );
+	} );
+
+	describe( 'Order preservation', () => {
+		it( 'should preserve order of elements from input arrays', () => {
+			const X = [ 1, 3, 5 ];
+			const Y = [ 5, 3, 1 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Verify optimal length.
+			expect( result.length ).toBe( 5 );
+
+			// Test reverse case.
+			const result2 = shortestCommonSupersequence( Y, X );
+			expect( isSubsequence( X, result2 ) ).toBe( true );
+			expect( isSubsequence( Y, result2 ) ).toBe( true );
+
+			// Verify optimal length.
+			expect( result2.length ).toBe( 5 );
+		} );
+
+		it( 'should handle zigzag patterns correctly', () => {
+			const X = [ 1, 3, 5, 7, 9 ];
+			const Y = [ 2, 4, 6, 8, 10 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Verify it's a valid supersequence.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Verify optimal length (should be X.length + Y.length because no common elements).
+			expect( result.length ).toBe( 10 );
+		} );
+	} );
+
+	describe( 'Advanced cases', () => {
+		it( 'should handle complex interleavings', () => {
+			const X = [ 1, 2, 3, 1, 2, 3 ];
+			const Y = [ 3, 2, 1, 3, 2, 1 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Result should be a valid supersequence.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Verify optimal length.
+			expect( result.length ).toBe( 9 );
+		} );
+
+		it( 'should handle almost identical arrays with one difference', () => {
+			const X = [ 1, 2, 3, 4, 5 ];
+			const Y = [ 1, 2, 3, 5, 4 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Result should contain 6 elements (optimal length).
+			expect( result.length ).toBe( 6 );
+
+			// The first 3 elements should be 1,2,3.
+			expect( result.slice( 0, 3 ) ).toEqual( [ 1, 2, 3 ] );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+		} );
+
+		it( 'should handle multiple matching possibilities optimally', () => {
+			const X = [ 1, 1, 2, 2 ];
+			const Y = [ 1, 2, 1, 2 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Result should be a valid supersequence.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Verify optimal length.
+			expect( result.length ).toBe( 5 );
+		} );
+	} );
+
+	describe( 'Custom equality function', () => {
+		it( 'should use custom equality function for comparing elements', () => {
+			const X = [
+				{ id: 1, name: 'a' },
+				{ id: 2, name: 'b' },
+			];
+			const Y = [
+				{ id: 1, name: 'c' },
+				{ id: 2, name: 'd' },
+			];
+
+			// Custom equality function that only compares 'id' property.
+			const isEqual = ( a, b ) => a.id === b.id;
+
+			const result = shortestCommonSupersequence( X, Y, isEqual );
+
+			// Should treat objects with same ids as equal.
+			expect( result.length ).toBe( 2 );
+			expect( result[ 0 ].id ).toBe( 1 );
+			expect( result[ 1 ].id ).toBe( 2 );
+
+			// Should use references from X.
+			expect( result[ 0 ] ).toBe( X[ 0 ] );
+			expect( result[ 1 ] ).toBe( X[ 1 ] );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result, isEqual ) ).toBe( true );
+			expect( isSubsequence( Y, result, isEqual ) ).toBe( true );
+		} );
+
+		it( 'should handle case-insensitive comparison', () => {
+			const X = [ 'A', 'B', 'C' ];
+			const Y = [ 'a', 'b', 'D' ];
+
+			// Case-insensitive comparison.
+			const isEqual = ( a, b ) => a.toLowerCase() === b.toLowerCase();
+
+			const result = shortestCommonSupersequence( X, Y, isEqual );
+
+			// Check references are from X when elements are considered equal.
+			expect( result[ 0 ] ).toBe( X[ 0 ] ); // 'A' instead of 'a'
+			expect( result[ 1 ] ).toBe( X[ 1 ] ); // 'B' instead of 'b'
+
+			// Verify it contains C and D (which don't match).
+			expect( result.includes( 'C' ) ).toBe( true );
+			expect( result.includes( 'D' ) ).toBe( true );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result, isEqual ) ).toBe( true );
+			expect( isSubsequence( Y, result, isEqual ) ).toBe( true );
+
+			// Check length is correct (4 instead of 6).
+			expect( result.length ).toBe( 4 );
+		} );
+	} );
+
+	describe( 'Null and undefined handling', () => {
+		it( 'should handle arrays with null values', () => {
+			const X = [ 1, null, 3 ];
+			const Y = [ null, 2, 3 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Should treat null values correctly.
+			expect( result ).toEqual( [ 1, null, 2, 3 ] );
+		} );
+
+		it( 'should handle arrays with undefined', () => {
+			const X = [ 1, undefined, 3 ];
+			const Y = [ 2, undefined, 4 ];
+			const result = shortestCommonSupersequence( X, Y );
+
+			// Test that it's a valid supersequence of both arrays.
+			expect( isSubsequence( X, result ) ).toBe( true );
+			expect( isSubsequence( Y, result ) ).toBe( true );
+
+			// Length should be shorter than concatenating the arrays.
+			expect( result.length ).toBeLessThan( X.length + Y.length );
+		} );
+	} );
+
+	describe( 'Mutation checks', () => {
+		it( 'should not modify the input arrays', () => {
+			const X = [ 1, 2, 3 ];
+			const Y = [ 2, 3, 4 ];
+
+			// Create copies for comparison.
+			const originalX = [ ...X ];
+			const originalY = [ ...Y ];
+
+			shortestCommonSupersequence( X, Y );
+
+			// Input arrays should remain unchanged.
+			expect( X ).toEqual( originalX );
+			expect( Y ).toEqual( originalY );
+		} );
+	} );
+} );
diff --git a/packages/interactivity-router/src/assets/test/styles.test.ts b/packages/interactivity-router/src/assets/test/styles.test.ts
new file mode 100644
index 00000000000000..26e140d9de3ff6
--- /dev/null
+++ b/packages/interactivity-router/src/assets/test/styles.test.ts
@@ -0,0 +1,776 @@
+/**
+ * Internal dependencies
+ */
+import {
+	normalizeMedia,
+	updateStylesWithSCS,
+	preloadStyles,
+	applyStyles,
+	type StyleElement,
+} from '../styles';
+
+/**
+ * Mocks the `sheet` property for the
+ * passed HTMLStyleElement or HTMLLinkElement instance.
+ *
+ * @param element          Style or Link element.
+ * @param params           Values for certain props.
+ * @param params.disabled  Value for the `sheet.disabled` prop.
+ * @param params.mediaText Value for the `sheet.media.mediaText` prop.
+ */
+const mockSheet = (
+	element: StyleElement,
+	{ disabled, mediaText }: { disabled: boolean; mediaText: string }
+) => {
+	if ( element.sheet ) {
+		Object.assign( element.sheet, { disabled, media: { mediaText } } );
+	} else {
+		Object.defineProperty( element, 'sheet', {
+			value: {
+				disabled,
+				media: { mediaText },
+			},
+		} );
+	}
+};
+
+/**
+ * Creates an `HTMLStyleElement` instance for testing.
+ *
+ * @param id Value for the `id` attribute.
+ * @return An `HTMLStyleElement` instance.
+ */
+const createStyleElement = ( id: string ): HTMLStyleElement => {
+	const element = document.createElement( 'style' );
+	element.id = id;
+	element.textContent = `/* Style ${ id } */`;
+	return element;
+};
+
+/**
+ * Creates an `HTMLLinkElement` instance for testing.
+ *
+ * @param id   Value for the `id` attribute.
+ * @param href Value for the `href` attribute.
+ * @return An `HTMLLinkElement` instance.
+ */
+const createLinkElement = (
+	id: string,
+	href: string = `https://example.com/${ id }.css`
+): HTMLLinkElement => {
+	const element = document.createElement( 'link' );
+	element.id = id;
+	element.rel = 'stylesheet';
+	element.href = href;
+	return element;
+};
+
+describe( 'Router styles management', () => {
+	const parent = document.head;
+
+	beforeEach( () => {
+		document.head.replaceChildren();
+	} );
+
+	afterAll( () => {
+		document.head.replaceChildren();
+	} );
+
+	describe( 'updateStylesWithSCS', () => {
+		it( 'should append all elements when X is empty in the correct order', () => {
+			const X = [];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+				createStyleElement( 'style2' ),
+			];
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 3 );
+			expect( childNodes.length ).toBe( 3 );
+
+			// Verify elements are in the correct order.
+			expect( childNodes[ 0 ] ).toBe( Y[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( Y[ 2 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle when both X and Y are empty', () => {
+			const promises = updateStylesWithSCS( [], [], parent );
+
+			expect( promises.length ).toBe( 0 );
+			expect( parent.childNodes.length ).toBe( 0 );
+		} );
+
+		it( 'should do nothing when X is non-empty but Y is empty', () => {
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const X = [ style1, style2 ];
+			// Pre-append X so they are in the DOM.
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, [], parent );
+			const { childNodes } = parent;
+
+			// No new promises should be generated.
+			expect( promises.length ).toBe( 0 );
+
+			// The DOM should still only have the original X elements.
+			expect( childNodes.length ).toBe( X.length );
+			expect( childNodes[ 0 ] ).toBe( style1 );
+			expect( childNodes[ 1 ] ).toBe( style2 );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should keep existing elements when they match in both X and Y', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+			];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link1' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 2 );
+			expect( childNodes.length ).toBe( 2 );
+
+			// Should maintain the original elements (not replace with clones).
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( X[ 1 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should insert new elements from Y in correct positions relative to X', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style3' ),
+			];
+			const Y = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style3' ),
+				createStyleElement( 'style4' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 4 );
+			expect( childNodes.length ).toBe( 4 );
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( X[ 1 ] );
+			expect( childNodes[ 3 ] ).toBe( Y[ 3 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle Y having completely different elements than X', () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style2' ),
+			];
+			const Y = [
+				createStyleElement( 'style3' ),
+				createStyleElement( 'style4' ),
+			];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 2 );
+
+			// Check the specific order - based on the SCS algorithm.
+			// When X and Y are completely different, the SCS places.
+			// all elements from Y before X.
+			expect( childNodes[ 0 ] ).toBe( Y[ 0 ] );
+			expect( childNodes[ 1 ] ).toBe( Y[ 1 ] );
+			expect( childNodes[ 2 ] ).toBe( X[ 0 ] );
+			expect( childNodes[ 3 ] ).toBe( X[ 1 ] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should consider normalized media attributes when comparing elements', () => {
+			// These should be considered equal after normalizing the media attribute.
+			const X = [ createLinkElement( 'same-link' ) ];
+			const Y = [ createLinkElement( 'same-link' ) ];
+
+			X[ 0 ].setAttribute( 'media', 'preload' );
+			X[ 0 ].dataset.originalMedia = 'screen';
+
+			Y[ 0 ].setAttribute( 'media', 'screen' );
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( childNodes.length ).toBe( 1 );
+			expect( promises.length ).toBe( 1 );
+			expect( childNodes[ 0 ] ).toBe( X[ 0 ] );
+
+			// Verify the media attribute has not changed.
+			expect( childNodes[ 0 ] ).toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should treat style elements as already loaded', async () => {
+			const X = [ createStyleElement( 'style1' ) ];
+			const Y = [ createStyleElement( 'style1' ) ];
+
+			parent.append( ...X );
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+
+			expect( promises.length ).toBe( 1 );
+			expect( await promises[ 0 ] ).toBe( X[ 0 ] );
+		} );
+
+		it( 'should return the same promise for equivalent link elements', () => {
+			const X = [ createLinkElement( 'link1' ) ];
+			const Y = [ createLinkElement( 'link1' ) ];
+
+			// First, add it to the DOM.
+			const promises1 = updateStylesWithSCS( [], X, parent );
+
+			// Then, use it in a second call.
+			const promises2 = updateStylesWithSCS( X, Y, parent );
+
+			// The promises should be the same.
+			expect( promises1[ 0 ] ).toBe( promises2[ 0 ] );
+		} );
+
+		it( 'should return the same promise for equivalent style elements', () => {
+			const X = [ createStyleElement( 'style1' ) ];
+			const Y = [ createStyleElement( 'style1' ) ];
+
+			// First, add it to the DOM.
+			const promises1 = updateStylesWithSCS( [], X, parent );
+
+			// Then, use it in a second call.
+			const promises2 = updateStylesWithSCS( X, Y, parent );
+
+			// The promises should be the same.
+			expect( promises1[ 0 ] ).toBe( promises2[ 0 ] );
+		} );
+
+		it( 'should handle complex reordering of elements maintaining the correct order', async () => {
+			// Initial set of elements.
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const style3 = createStyleElement( 'style3' );
+			const style4 = createStyleElement( 'style4' );
+
+			const X = [ style1, style2, style3, style4 ];
+			parent.append( ...X );
+
+			// New set with reordering and some new elements.
+			const newStyle1 = createStyleElement( 'style1' );
+			const newStyle3 = createStyleElement( 'style3' );
+			const newStyle5 = createStyleElement( 'style5' );
+			const newStyle2 = createStyleElement( 'style2' );
+			const newStyle6 = createStyleElement( 'style6' );
+
+			const Y = [ newStyle1, newStyle3, newStyle5, newStyle2, newStyle6 ];
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			expect( promises.length ).toBe( 5 );
+
+			// Verify the exact order.
+			expect( childNodes[ 0 ] ).toBe( style1 );
+			expect( childNodes[ 1 ] ).toBe( newStyle3 );
+			expect( childNodes[ 2 ] ).toBe( newStyle5 );
+			expect( childNodes[ 3 ] ).toBe( style2 );
+			expect( childNodes[ 4 ] ).toBe( newStyle6 );
+			expect( childNodes[ 5 ] ).toBe( style3 );
+			expect( childNodes[ 6 ] ).toBe( style4 );
+
+			// Verify the promise values.
+			const values = await Promise.all( promises );
+			expect( values[ 0 ] ).toBe( style1 );
+			expect( values[ 1 ] ).toBe( newStyle3 );
+			expect( values[ 2 ] ).toBe( newStyle5 );
+			expect( values[ 3 ] ).toBe( style2 );
+			expect( values[ 4 ] ).toBe( newStyle6 );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 4 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 5 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 6 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should handle link elements with load events', async () => {
+			const link1 = createLinkElement( 'link1' );
+			const promises = updateStylesWithSCS( [], [ link1 ], parent );
+
+			// Manually trigger a load event.
+			link1.dispatchEvent( new Event( 'load' ) );
+
+			// The promise should resolve with the link element.
+			const result = await promises[ 0 ];
+			expect( result ).toBe( link1 );
+		} );
+
+		it( 'should reject the promise when a link element fails to load', async () => {
+			const link1 = createLinkElement( 'link-fail' );
+			// Remove load/error listeners by not adding it to the DOM initially.
+			const promises = updateStylesWithSCS( [], [ link1 ], parent );
+
+			// Simulate an error event.
+			const errorEvent = new Event( 'error' );
+			link1.dispatchEvent( errorEvent );
+
+			await expect( promises[ 0 ] ).rejects.toThrow(
+				`The style sheet with the following URL failed to load: ${ link1.href }`
+			);
+		} );
+
+		it( 'should handle mixed style and link elements', async () => {
+			const X = [
+				createLinkElement( 'link1' ),
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link2' ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style3' ),
+			];
+			parent.append( ...X );
+
+			const Y = [
+				createLinkElement( 'link1' ),
+				createLinkElement( 'link3' ),
+				createStyleElement( 'style1' ),
+				createLinkElement( 'link2' ),
+				createStyleElement( 'style2' ),
+				createLinkElement( 'link1' ),
+			];
+
+			// Run the update using X and Y.
+			const promises = updateStylesWithSCS( X, Y, parent );
+			const { childNodes } = parent;
+
+			// Expected DOM outcome (based on the SCS algorithm):.
+			// We expect that the existing link1 and link2 are reused, and the new link3 is inserted.
+			// The duplicate occurrences of link1 (via link1Clone and link1 itself in Y).
+			// should resolve to the original link1.
+			expect( childNodes.length ).toBe( 7 );
+			expect( [ ...childNodes ] ).toEqual( [
+				X[ 0 ],
+				Y[ 1 ],
+				X[ 1 ],
+				X[ 2 ],
+				X[ 3 ],
+				Y[ 5 ],
+				X[ 4 ],
+			] );
+
+			( childNodes as NodeListOf< StyleElement > ).forEach( ( element ) =>
+				element.dispatchEvent( new Event( 'load' ) )
+			);
+
+			// Verify that the returned promises resolve to the appropriate elements.
+			const resolved = await Promise.all( promises );
+
+			expect( promises.length ).toBe( 6 );
+			expect( resolved ).toEqual( [
+				X[ 0 ],
+				Y[ 1 ],
+				X[ 1 ],
+				X[ 2 ],
+				X[ 3 ],
+				Y[ 5 ],
+			] );
+
+			// Verify the correct media attribute is set.
+			expect( childNodes[ 0 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 1 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 2 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 3 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 4 ] ).not.toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 5 ] ).toHaveAttribute( 'media', 'preload' );
+			expect( childNodes[ 6 ] ).not.toHaveAttribute( 'media', 'preload' );
+		} );
+
+		it( 'should set media and data-original-media correctly on new elements', async () => {
+			const X = [
+				createStyleElement( 'style1' ),
+				createStyleElement( 'style1Media' ),
+				createLinkElement( 'link1' ),
+				createLinkElement( 'link1Media' ),
+			];
+
+			X[ 1 ].setAttribute( 'media', 'screen' ); // style1Media
+			X[ 3 ].setAttribute( 'media', 'screen' ); // link1Media
+
+			mockSheet( X[ 2 ], { disabled: false, mediaText: 'all' } ); // link1
+			mockSheet( X[ 3 ], { disabled: false, mediaText: 'screen' } ); // link1Media
+
+			parent.append( ...X );
+
+			const Y = [
+				...X.map( ( e ) => e.cloneNode( true ) as StyleElement ),
+				createStyleElement( 'style2' ),
+				createStyleElement( 'style2Media' ),
+				createLinkElement( 'link2' ),
+				createLinkElement( 'link2Media' ),
+			];
+
+			Y[ 5 ].setAttribute( 'media', 'screen' ); // style2Media
+			Y[ 7 ].setAttribute( 'media', 'screen' ); // link2Media
+
+			const promises = updateStylesWithSCS( X, Y, parent );
+
+			( parent.childNodes as NodeListOf< StyleElement > ).forEach(
+				( element ) => element.dispatchEvent( new Event( 'load' ) )
+			);
+
+			const elements = await Promise.all( promises );
+
+			const attributes = elements.map( ( e ) => ( {
+				id: e.id,
+				media: e.getAttribute( 'media' ),
+				originalMedia: e.getAttribute( 'data-original-media' ),
+			} ) );
+
+			expect( attributes ).toEqual( [
+				{
+					id: 'style1',
+					media: null,
+					originalMedia: null,
+				},
+				{
+					id: 'style1Media',
+					media: 'screen',
+					originalMedia: null,
+				},
+				{
+					id: 'link1',
+					media: null,
+					originalMedia: null,
+				},
+				{
+					id: 'link1Media',
+					media: 'screen',
+					originalMedia: null,
+				},
+				{
+					id: 'style2',
+					media: 'preload',
+					originalMedia: null,
+				},
+				{
+					id: 'style2Media',
+					media: 'preload',
+					originalMedia: 'screen',
+				},
+				{
+					id: 'link2',
+					media: 'preload',
+					originalMedia: null,
+				},
+				{
+					id: 'link2Media',
+					media: 'preload',
+					originalMedia: 'screen',
+				},
+			] );
+		} );
+	} );
+
+	// Tests for preloadStyles function.
+	describe( 'preloadStyles', () => {
+		it( 'should use cached promises for the same URL', () => {
+			// Create a test document.
+			const doc = document.implementation.createHTMLDocument();
+			const style = doc.createElement( 'style' );
+			doc.head.appendChild( style );
+
+			// First call should update the DOM.
+			const firstResult = preloadStyles(
+				doc,
+				'https://example.com/test'
+			);
+			expect( firstResult ).toBeTruthy();
+
+			// Second call should return the same promises.
+			const secondResult = preloadStyles(
+				doc,
+				'https://example.com/test'
+			);
+			expect( secondResult ).toBe( firstResult );
+		} );
+
+		it( 'should extract style elements from the provided document', () => {
+			// Create a test document with style elements.
+			const doc = document.implementation.createHTMLDocument();
+			const style1 = doc.createElement( 'style' );
+			style1.id = 'test-style-1';
+			const style2 = doc.createElement( 'link' );
+			style2.id = 'test-link-1';
+			style2.rel = 'stylesheet';
+			doc.head.appendChild( style1 );
+			doc.head.appendChild( style2 );
+
+			preloadStyles( doc, 'https://example.com/another-test-page' );
+
+			// Check that styles were extracted and added to the document.
+			const addedStyle1 = document.querySelector( '#test-style-1' );
+			const addedLink1 = document.querySelector( '#test-link-1' );
+			expect( addedStyle1 ).toBeTruthy();
+			expect( addedLink1 ).toBeTruthy();
+			expect( addedStyle1 ).toHaveAttribute( 'media', 'preload' );
+			expect( addedLink1 ).toHaveAttribute( 'media', 'preload' );
+		} );
+	} );
+
+	// Tests for applyStyles function.
+	describe( 'applyStyles', () => {
+		it( 'should enable included styles and disable others', () => {
+			// Create some style elements.
+			const style1 = createStyleElement( 'style1' );
+			const style2 = createStyleElement( 'style2' );
+			const style3 = createStyleElement( 'style3' );
+
+			// Add all to document.
+			document.head.appendChild( style1 );
+			document.head.appendChild( style2 );
+			document.head.appendChild( style3 );
+
+			// Init `sheet` property.
+			mockSheet( style1, { disabled: true, mediaText: 'all' } );
+			mockSheet( style2, { disabled: false, mediaText: 'all' } );
+			mockSheet( style3, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles to only style1 and style3.
+			applyStyles( [ style1, style3 ] );
+
+			// style1 and style3 should be enabled, style2 should be disabled.
+			expect( style1.sheet!.disabled ).toBe( false );
+			expect( style2.sheet!.disabled ).toBe( true );
+			expect( style3.sheet!.disabled ).toBe( false );
+		} );
+
+		it( 'should set media appropriately based on originalMedia', () => {
+			// Create link elements with originalMedia.
+			const link1 = createLinkElement( 'link1' );
+			link1.setAttribute( 'media', 'preload' );
+			link1.dataset.originalMedia = 'print';
+			const link2 = createLinkElement( 'link2' );
+			link2.setAttribute( 'media', 'preload' );
+			link2.dataset.originalMedia = 'screen';
+
+			// Add to document.
+			document.head.appendChild( link1 );
+			document.head.appendChild( link2 );
+
+			// Init `sheet` property.
+			mockSheet( link1, { disabled: false, mediaText: 'preload' } );
+			mockSheet( link2, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles.
+			applyStyles( [ link1, link2 ] );
+
+			// Check that media was set correctly.
+			expect( link1.sheet!.media.mediaText ).toBe( 'print' );
+			expect( link2.sheet!.media.mediaText ).toBe( 'screen' );
+		} );
+
+		it( 'should use "all" as default media if no originalMedia specified', () => {
+			// Create elements without originalMedia.
+			const link = createLinkElement( 'link' );
+			const style = createStyleElement( 'style' );
+			link.setAttribute( 'media', 'preload' );
+			style.setAttribute( 'media', 'preload' );
+
+			// Add to document.
+			document.head.append( link, style );
+
+			// Init `sheet` property.
+			mockSheet( link, { disabled: false, mediaText: 'preload' } );
+			mockSheet( style, { disabled: false, mediaText: 'preload' } );
+
+			// Apply styles.
+			applyStyles( [ link, style ] );
+
+			// Default should be "all".
+			expect( link.sheet!.media.mediaText ).toBe( 'all' );
+			expect( style.sheet!.media.mediaText ).toBe( 'all' );
+		} );
+
+		it( 'should preserve media if it was initially set', () => {
+			// Create link elements with originalMedia.
+			const link = createLinkElement( 'link' );
+			link.setAttribute( 'media', 'print' );
+
+			// Add to document.
+			document.head.appendChild( link );
+
+			// Init `sheet` property.
+			mockSheet( link, { disabled: false, mediaText: 'print' } );
+
+			// Apply styles.
+			applyStyles( [ link ] );
+
+			// Check that media was preserved correctly.
+			expect( link.sheet!.media.mediaText ).toBe( 'print' );
+		} );
+	} );
+
+	describe( 'normalizeMedia', () => {
+		let linkElement: HTMLLinkElement;
+		let styleElement: HTMLStyleElement;
+
+		beforeEach( () => {
+			// Create fresh elements before each test
+			linkElement = document.createElement( 'link' );
+			linkElement.rel = 'stylesheet';
+			linkElement.href = './styles.css';
+
+			styleElement = document.createElement( 'style' );
+			styleElement.textContent = 'body { color: red; }';
+		} );
+
+		it( 'should always return a clone of the element', () => {
+			// Test with no media attribute
+			const result1 = normalizeMedia( linkElement );
+			expect( result1 ).not.toBe( linkElement );
+			expect( result1 ).toHaveAttribute( 'media', 'all' );
+
+			// Test with media attribute other than "preload"
+			linkElement.setAttribute( 'media', 'all' );
+			const result2 = normalizeMedia( linkElement );
+			expect( result2 ).not.toBe( linkElement );
+			expect( result2 ).toHaveAttribute( 'media', 'all' );
+
+			linkElement.setAttribute( 'media', 'preload' );
+			const result3 = normalizeMedia( linkElement );
+			expect( result3 ).not.toBe( linkElement );
+			expect( result3 ).toHaveAttribute(
+				'href',
+				linkElement.getAttribute( 'href' )
+			);
+		} );
+
+		it( 'should remove media attribute when media="preload" and no data-original-media exists', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+		} );
+
+		it( 'should restore original media when media="preload" and data-original-media exists', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = 'all';
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should work with style elements too', () => {
+			styleElement.setAttribute( 'media', 'preload' );
+			styleElement.dataset.originalMedia = 'print';
+			const result = normalizeMedia( styleElement );
+			expect( result ).not.toBe( styleElement );
+			expect( result ).toHaveAttribute( 'media', 'print' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should handle empty original media correctly', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = '';
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result.dataset.originalMedia ).toBeUndefined();
+		} );
+
+		it( 'should preserve other attributes when normalizing', () => {
+			linkElement.setAttribute( 'media', 'preload' );
+			linkElement.dataset.originalMedia = 'all';
+			linkElement.setAttribute( 'data-test', 'value' );
+			linkElement.setAttribute( 'integrity', 'hash123' );
+
+			const result = normalizeMedia( linkElement );
+			expect( result ).toHaveAttribute( 'media', 'all' );
+			expect( result ).toHaveAttribute( 'data-test', 'value' );
+			expect( result ).toHaveAttribute( 'integrity', 'hash123' );
+		} );
+
+		it( 'should output the same for equivalent link elements', () => {
+			const head = document.createElement( 'head' );
+			head.innerHTML = `
+				<link rel="stylesheet" src="./assets/styles.css">
+				<link rel="stylesheet" src="./assets/styles.css" media="all">
+				<link rel="stylesheet" src="./assets/styles.css" media="preload">
+				<link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+			`;
+
+			const links = [ ...head.childNodes ]
+				.filter( ( e ) => e instanceof HTMLLinkElement )
+				.map( normalizeMedia );
+
+			expect( links[ 0 ].isEqualNode( links[ 1 ] ) ).toBe( true );
+			expect( links[ 0 ].isEqualNode( links[ 2 ] ) ).toBe( true );
+			expect( links[ 0 ].isEqualNode( links[ 3 ] ) ).toBe( true );
+		} );
+
+		it( 'should output the same for equivalent style elements', () => {
+			const head = document.createElement( 'head' );
+			head.innerHTML = `
+				<style>
+					body { background: pink; }
+				</style>
+				<style media="all">
+					body { background: pink; }
+				</style>
+				<style media="preload">
+					body { background: pink; }
+				</style>
+				<style media="preload" data-original-media="all">
+					body { background: pink; }
+				</style>
+			`;
+
+			const styles = [ ...head.childNodes ]
+				.filter( ( e ) => e instanceof HTMLStyleElement )
+				.map( normalizeMedia );
+
+			expect( styles[ 0 ].isEqualNode( styles[ 1 ] ) ).toBe( true );
+			expect( styles[ 0 ].isEqualNode( styles[ 2 ] ) ).toBe( true );
+			expect( styles[ 0 ].isEqualNode( styles[ 3 ] ) ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/interactivity-router/src/full-page.ts b/packages/interactivity-router/src/full-page.ts
new file mode 100644
index 00000000000000..a27f33d2c3ba36
--- /dev/null
+++ b/packages/interactivity-router/src/full-page.ts
@@ -0,0 +1,47 @@
+// Check if the link is valid for client-side navigation.
+const isValidLink = ( ref: HTMLAnchorElement ) =>
+	ref &&
+	ref instanceof window.HTMLAnchorElement &&
+	ref.href &&
+	( ! ref.target || ref.target === '_self' ) &&
+	ref.origin === window.location.origin &&
+	! ref.pathname.startsWith( '/wp-admin' ) &&
+	! ref.pathname.startsWith( '/wp-login.php' ) &&
+	! ref.getAttribute( 'href' ).startsWith( '#' ) &&
+	! new URL( ref.href ).searchParams.has( '_wpnonce' );
+
+// Check if the event is valid for client-side navigation.
+const isValidEvent = ( event: MouseEvent ) =>
+	event &&
+	event.button === 0 && // Left clicks only.
+	! event.metaKey && // Open in new tab (Mac).
+	! event.ctrlKey && // Open in new tab (Windows).
+	! event.altKey && // Download.
+	! event.shiftKey &&
+	! event.defaultPrevented;
+
+// Navigate on click.
+document.addEventListener( 'click', async ( event ) => {
+	const ref = ( event.target as Element ).closest( 'a' );
+	if ( isValidLink( ref ) && isValidEvent( event ) ) {
+		event.preventDefault();
+		const { actions } = await import( '@wordpress/interactivity-router' );
+		actions.navigate( ref.href );
+	}
+} );
+// Prefetch on hover.
+document.addEventListener(
+	'mouseenter',
+	async ( event ) => {
+		if ( ( event.target as Element )?.nodeName === 'A' ) {
+			const ref = ( event.target as Element ).closest( 'a' );
+			if ( isValidLink( ref ) && isValidEvent( event ) ) {
+				const { actions } = await import(
+					'@wordpress/interactivity-router'
+				);
+				actions.prefetch( ref.href );
+			}
+		}
+	},
+	true
+);
diff --git a/packages/interactivity-router/src/head.ts b/packages/interactivity-router/src/head.ts
deleted file mode 100644
index 69139348b582ff..00000000000000
--- a/packages/interactivity-router/src/head.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * The cache of prefetched stylesheets and scripts.
- */
-export const headElements = new Map<
-	string,
-	{ tag: HTMLElement; text?: string }
->();
-
-/**
- * Helper to update only the necessary tags in the head.
- *
- * @async
- * @param newHead The head elements of the new page.
- */
-export const updateHead = async ( newHead: HTMLHeadElement[] ) => {
-	// Helper to get the tag id store in the cache.
-	const getTagId = ( tag: Element ) => tag.id || tag.outerHTML;
-
-	// Map incoming head tags by their content.
-	const newHeadMap = new Map< string, Element >();
-	for ( const child of newHead ) {
-		newHeadMap.set( getTagId( child ), child );
-	}
-
-	const toRemove: Element[] = [];
-
-	// Detect nodes that should be added or removed.
-	for ( const child of document.head.children ) {
-		const id = getTagId( child );
-		// Always remove styles and links as they might change.
-		if ( child.nodeName === 'LINK' || child.nodeName === 'STYLE' ) {
-			toRemove.push( child );
-		} else if ( newHeadMap.has( id ) ) {
-			newHeadMap.delete( id );
-		} else if ( child.nodeName !== 'SCRIPT' && child.nodeName !== 'META' ) {
-			toRemove.push( child );
-		}
-	}
-
-	await Promise.all(
-		[ ...headElements.entries() ]
-			.filter( ( [ , { tag } ] ) => tag.nodeName === 'SCRIPT' )
-			.map( async ( [ url ] ) => {
-				await import( /* webpackIgnore: true */ url );
-			} )
-	);
-
-	// Prepare new assets.
-	const toAppend = [ ...newHeadMap.values() ];
-
-	// Apply the changes.
-	toRemove.forEach( ( n ) => n.remove() );
-	document.head.append( ...toAppend );
-};
-
-/**
- * Fetches and processes head assets (stylesheets and scripts) from a specified document.
- *
- * @async
- * @param doc The document from which to fetch head assets. It should support standard DOM querying methods.
- *
- * @return Returns an array of HTML elements representing the head assets.
- */
-export const fetchHeadAssets = async (
-	doc: Document
-): Promise< HTMLElement[] > => {
-	const headTags = [];
-
-	// We only want to fetch module scripts because regular scripts (without
-	// `async` or `defer` attributes) can depend on the execution of other scripts.
-	// Scripts found in the head are blocking and must be executed in order.
-	const scripts = doc.querySelectorAll< HTMLScriptElement >(
-		'script[type="module"][src]'
-	);
-
-	scripts.forEach( ( script ) => {
-		const src = script.getAttribute( 'src' );
-		if ( ! headElements.has( src ) ) {
-			// add the <link> elements to prefetch the module scripts
-			const link = doc.createElement( 'link' );
-			link.rel = 'modulepreload';
-			link.href = src;
-			document.head.append( link );
-			headElements.set( src, { tag: script } );
-		}
-	} );
-
-	const stylesheets = doc.querySelectorAll< HTMLLinkElement >(
-		'link[rel=stylesheet]'
-	);
-
-	await Promise.all(
-		Array.from( stylesheets ).map( async ( tag ) => {
-			const href = tag.getAttribute( 'href' );
-			if ( ! href ) {
-				return;
-			}
-
-			if ( ! headElements.has( href ) ) {
-				try {
-					const response = await fetch( href );
-					const text = await response.text();
-					headElements.set( href, {
-						tag,
-						text,
-					} );
-				} catch ( e ) {
-					// eslint-disable-next-line no-console
-					console.error( e );
-				}
-			}
-
-			const headElement = headElements.get( href );
-			const styleElement = doc.createElement( 'style' );
-			styleElement.textContent = headElement.text;
-
-			headTags.push( styleElement );
-		} )
-	);
-
-	return [
-		doc.querySelector( 'title' ),
-		...doc.querySelectorAll( 'style' ),
-		...headTags,
-	];
-};
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index b26fc79be4fb67..4a186227619708 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -6,7 +6,13 @@ import { store, privateApis, getConfig } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { fetchHeadAssets, updateHead, headElements } from './head';
+import { preloadStyles, applyStyles, type StyleElement } from './assets/styles';
+import {
+	preloadScriptModules,
+	importScriptModules,
+	markScriptModuleAsResolved,
+	type ScriptModuleLoad,
+} from './assets/script-modules';
 
 const {
 	directivePrefix,
@@ -21,7 +27,11 @@ const {
 	'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.'
 );
 
-interface NavigateOptions {
+const regionAttr = `data-${ directivePrefix }-router-region`;
+const interactiveAttr = `data-${ directivePrefix }-interactive`;
+const regionsSelector = `[${ interactiveAttr }][${ regionAttr }]:not([${ interactiveAttr }] [${ interactiveAttr }])`;
+
+export interface NavigateOptions {
 	force?: boolean;
 	html?: string;
 	replace?: boolean;
@@ -30,7 +40,7 @@ interface NavigateOptions {
 	screenReaderAnnouncement?: boolean;
 }
 
-interface PrefetchOptions {
+export interface PrefetchOptions {
 	force?: boolean;
 	html?: string;
 }
@@ -40,17 +50,20 @@ interface VdomParams {
 }
 
 interface Page {
+	url: string;
 	regions: Record< string, any >;
-	head: HTMLHeadElement[];
+	regionsToAttach: Record< string, string >;
+	styles: StyleElement[];
+	scriptModules: ScriptModuleLoad[];
 	title: string;
 	initialData: any;
 }
 
-type RegionsToVdom = ( dom: Document, params?: VdomParams ) => Promise< Page >;
-
-// Check if the navigation mode is full page or region based.
-const navigationMode: 'regionBased' | 'fullPage' =
-	getConfig( 'core/router' ).navigationMode ?? 'regionBased';
+type PreparePage = (
+	url: string,
+	dom: Document,
+	params?: VdomParams
+) => Promise< Page >;
 
 // The cache of visited and prefetched pages, stylesheets and scripts.
 const pages = new Map< string, Promise< Page | false > >();
@@ -62,7 +75,32 @@ const getPagePath = ( url: string ) => {
 	return u.pathname + u.search;
 };
 
-// Fetch a new page and convert it to a static virtual DOM.
+/**
+ * Parses the given region's directive.
+ *
+ * @param region Region element.
+ * @return Data contained in the region directive value.
+ */
+const parseRegionAttribute = ( region: Element ) => {
+	const value = region.getAttribute( regionAttr );
+	try {
+		const { id, attachTo } = JSON.parse( value );
+		return { id, attachTo };
+	} catch ( e ) {
+		return { id: value };
+	}
+};
+
+/**
+ * Fetches and prepares a page from a given URL.
+ *
+ * @param url          The URL of the page to fetch.
+ * @param options      Options for the fetch operation.
+ * @param options.html Optional HTML content. If provided, the function will use
+ *                     this instead of fetching from the URL.
+ * @return             A Promise that resolves to the prepared page, or false if
+ *                     there was an error during fetching or preparation.
+ */
 const fetchPage = async ( url: string, { html }: { html: string } ) => {
 	try {
 		if ( ! html ) {
@@ -73,72 +111,113 @@ const fetchPage = async ( url: string, { html }: { html: string } ) => {
 			html = await res.text();
 		}
 		const dom = new window.DOMParser().parseFromString( html, 'text/html' );
-		return regionsToVdom( dom );
+		return await preparePage( url, dom );
 	} catch ( e ) {
 		return false;
 	}
 };
 
-// Return an object with VDOM trees of those HTML regions marked with a
-// `router-region` directive.
-const regionsToVdom: RegionsToVdom = async ( dom, { vdom } = {} ) => {
-	const regions = { body: undefined };
-	let head: HTMLElement[];
-	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-		if ( navigationMode === 'fullPage' ) {
-			head = await fetchHeadAssets( dom );
-			regions.body = vdom
-				? vdom.get( document.body )
-				: toVdom( dom.body );
+/**
+ * Processes a DOM document to extract router regions and related resources.
+ *
+ * This function analyzes the provided DOM document and creates a virtual DOM
+ * representation of all HTML regions marked with a `router-region` directive.
+ * It also extracts and preloads associated styles and scripts to prepare for
+ * rendering the page.
+ *
+ * @param url             The URL associated with the page, used for asset
+ *                        loading and caching.
+ * @param dom             The DOM document to process.
+ * @param vdomParams      Optional parameters for virtual DOM processing.
+ * @param vdomParams.vdom An optional existing virtual DOM cache to check for
+ *                        regions. If a region exists in this cache, it will be
+ *                        reused instead of creating a new vDOM representation.
+ * @return                A Promise that resolves to a {@link Page} object
+ *                        containing the virtual DOM for all router regions,
+ *                        preloaded styles and scripts, page title, and initial
+ *                        server-rendered data.
+ */
+const preparePage: PreparePage = async ( url, dom, { vdom } = {} ) => {
+	const regions = {};
+	const regionsToAttach = {};
+	dom.querySelectorAll( regionsSelector ).forEach( ( region ) => {
+		const { id, attachTo } = parseRegionAttribute( region );
+		regions[ id ] = vdom?.has( region )
+			? vdom.get( region )
+			: toVdom( region );
+		if ( attachTo ) {
+			regionsToAttach[ id ] = attachTo;
 		}
-	}
-	if ( navigationMode === 'regionBased' ) {
-		const attrName = `data-${ directivePrefix }-router-region`;
-		dom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {
-			const id = region.getAttribute( attrName );
-			regions[ id ] = vdom?.has( region )
-				? vdom.get( region )
-				: toVdom( region );
-		} );
-	}
+	} );
+
 	const title = dom.querySelector( 'title' )?.innerText;
 	const initialData = parseServerData( dom );
-	return { regions, head, title, initialData };
+
+	// Wait for styles and modules to be ready.
+	const [ styles, scriptModules ] = await Promise.all( [
+		Promise.all( preloadStyles( dom, url ) ),
+		Promise.all( preloadScriptModules( dom ) ),
+	] );
+
+	return {
+		regions,
+		regionsToAttach,
+		styles,
+		scriptModules,
+		title,
+		initialData,
+		url,
+	};
 };
 
-// Render all interactive regions contained in the given page.
-const renderRegions = async ( page: Page ) => {
-	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-		if ( navigationMode === 'fullPage' ) {
-			// Once this code is tested and more mature, the head should be updated for region based navigation as well.
-			await updateHead( page.head );
-			const fragment = getRegionRootFragment( document.body );
-			batch( () => {
-				populateServerData( page.initialData );
-				render( page.regions.body, fragment );
-			} );
-		}
-	}
-	if ( navigationMode === 'regionBased' ) {
-		const attrName = `data-${ directivePrefix }-router-region`;
-		batch( () => {
-			populateServerData( page.initialData );
-			document
-				.querySelectorAll( `[${ attrName }]` )
-				.forEach( ( region ) => {
-					const id = region.getAttribute( attrName );
-					const fragment = getRegionRootFragment( region );
-					render( page.regions[ id ], fragment );
-				} );
+/**
+ * Renders a page by applying styles, populating server data, rendering regions,
+ * and updating the document title.
+ *
+ * @param page The {@link Page} object to render.
+ */
+const renderPage = ( page: Page ) => {
+	applyStyles( page.styles );
+
+	// Clone regionsToAttach.
+	const regionsToAttach = { ...page.regionsToAttach };
+
+	batch( () => {
+		populateServerData( page.initialData );
+		document.querySelectorAll( regionsSelector ).forEach( ( region ) => {
+			const { id } = parseRegionAttribute( region );
+			const fragment = getRegionRootFragment( region );
+			render( page.regions[ id ], fragment );
+			// If this is an attached region, remove it from the list.
+			delete regionsToAttach[ id ];
 		} );
-	}
+
+		// Render unattached regions.
+		for ( const id in regionsToAttach ) {
+			const parent = document.querySelector( regionsToAttach[ id ] );
+
+			// Get the type from the vnode. If wrapped with Directives, get the
+			// original type from `props.type`.
+			const { props, type } = page.regions[ id ];
+			const elementType = typeof type === 'function' ? props.type : type;
+
+			// Create an element with the obtained type where the region will be
+			// rendered. The type should match the one of the root vnode.
+			const region = document.createElement( elementType );
+			parent.appendChild( region );
+
+			const fragment = getRegionRootFragment( region );
+			render( page.regions[ id ], fragment );
+		}
+	} );
+
 	if ( page.title ) {
 		document.title = page.title;
 	}
 };
 
 /**
- * Load the given page forcing a full page reload.
+ * Loads the given page forcing a full page reload.
  *
  * The function returns a promise that won't resolve, useful to prevent any
  * potential feedback indicating that the navigation has finished while the new
@@ -158,7 +237,7 @@ window.addEventListener( 'popstate', async () => {
 	const pagePath = getPagePath( window.location.href ); // Remove hash.
 	const page = pages.has( pagePath ) && ( await pages.get( pagePath ) );
 	if ( page ) {
-		await renderRegions( page );
+		renderPage( page );
 		// Update the URL in the state.
 		state.url = window.location.href;
 	} else {
@@ -167,49 +246,18 @@ window.addEventListener( 'popstate', async () => {
 } );
 
 // Initialize the router and cache the initial page using the initial vDOM.
-// Once this code is tested and more mature, the head should be updated for
-// region based navigation as well.
-if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-	if ( navigationMode === 'fullPage' ) {
-		// Cache the scripts. Has to be called before fetching the assets.
-		[].map.call(
-			document.querySelectorAll( 'script[type="module"][src]' ),
-			( script ) => {
-				headElements.set( script.getAttribute( 'src' ), {
-					tag: script,
-				} );
-			}
-		);
-		await fetchHeadAssets( document );
-	}
-}
+window.document
+	.querySelectorAll< HTMLScriptElement >( 'script[type=module][src]' )
+	.forEach( ( { src } ) => markScriptModuleAsResolved( src ) );
 pages.set(
 	getPagePath( window.location.href ),
-	Promise.resolve( regionsToVdom( document, { vdom: initialVdom } ) )
+	Promise.resolve(
+		preparePage( getPagePath( window.location.href ), document, {
+			vdom: initialVdom,
+		} )
+	)
 );
 
-// Check if the link is valid for client-side navigation.
-const isValidLink = ( ref: HTMLAnchorElement ) =>
-	ref &&
-	ref instanceof window.HTMLAnchorElement &&
-	ref.href &&
-	( ! ref.target || ref.target === '_self' ) &&
-	ref.origin === window.location.origin &&
-	! ref.pathname.startsWith( '/wp-admin' ) &&
-	! ref.pathname.startsWith( '/wp-login.php' ) &&
-	! ref.getAttribute( 'href' ).startsWith( '#' ) &&
-	! new URL( ref.href ).searchParams.has( '_wpnonce' );
-
-// Check if the event is valid for client-side navigation.
-const isValidEvent = ( event: MouseEvent ) =>
-	event &&
-	event.button === 0 && // Left clicks only.
-	! event.metaKey && // Open in new tab (Mac).
-	! event.ctrlKey && // Open in new tab (Windows).
-	! event.altKey && // Download.
-	! event.shiftKey &&
-	! event.defaultPrevented;
-
 // Variable to store the current navigation.
 let navigatingTo = '';
 
@@ -228,8 +276,11 @@ interface Store {
 		};
 	};
 	actions: {
-		navigate: ( href: string, options?: NavigateOptions ) => void;
-		prefetch: ( url: string, options?: PrefetchOptions ) => void;
+		navigate: (
+			href: string,
+			options?: NavigateOptions
+		) => Promise< void >;
+		prefetch: ( url: string, options?: PrefetchOptions ) => Promise< void >;
 	};
 }
 
@@ -318,7 +369,8 @@ export const { state, actions } = store< Store >( 'core/router', {
 				! page.initialData?.config?.[ 'core/router' ]
 					?.clientNavigationDisabled
 			) {
-				yield renderRegions( page );
+				yield importScriptModules( page.scriptModules );
+				renderPage( page );
 				window.history[
 					options.replace ? 'replaceState' : 'pushState'
 				]( {}, '', href );
@@ -357,8 +409,10 @@ export const { state, actions } = store< Store >( 'core/router', {
 		 * @param [options]       Options object.
 		 * @param [options.force] Force fetching the URL again.
 		 * @param [options.html]  HTML string to be used instead of fetching the requested URL.
+		 *
+		 * @return  Promise that resolves once the page has been fetched.
 		 */
-		prefetch( url: string, options: PrefetchOptions = {} ) {
+		*prefetch( url: string, options: PrefetchOptions = {} ) {
 			const { clientNavigationDisabled } = getConfig();
 			if ( clientNavigationDisabled ) {
 				return;
@@ -371,6 +425,8 @@ export const { state, actions } = store< Store >( 'core/router', {
 					fetchPage( pagePath, { html: options.html } )
 				);
 			}
+
+			yield pages.get( pagePath );
 		},
 	},
 } );
@@ -379,7 +435,7 @@ export const { state, actions } = store< Store >( 'core/router', {
  * Announces a message to screen readers.
  *
  * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
- * the package on demand and should be used instead of calling `ally.speak` direacly.
+ * the package on demand and should be used instead of calling `a11y.speak` directly.
  *
  * @param messageKey The message to be announced by assistive technologies.
  */
@@ -424,34 +480,3 @@ function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
 		() => {}
 	);
 }
-
-// Add click and prefetch to all links.
-if ( globalThis.IS_GUTENBERG_PLUGIN ) {
-	if ( navigationMode === 'fullPage' ) {
-		// Navigate on click.
-		document.addEventListener(
-			'click',
-			function ( event ) {
-				const ref = ( event.target as Element ).closest( 'a' );
-				if ( isValidLink( ref ) && isValidEvent( event ) ) {
-					event.preventDefault();
-					actions.navigate( ref.href );
-				}
-			},
-			true
-		);
-		// Prefetch on hover.
-		document.addEventListener(
-			'mouseenter',
-			function ( event ) {
-				if ( ( event.target as Element )?.nodeName === 'A' ) {
-					const ref = ( event.target as Element ).closest( 'a' );
-					if ( isValidLink( ref ) && isValidEvent( event ) ) {
-						actions.prefetch( ref.href );
-					}
-				}
-			},
-			true
-		);
-	}
-}
diff --git a/packages/interactivity-router/tsconfig.full-page.json b/packages/interactivity-router/tsconfig.full-page.json
new file mode 100644
index 00000000000000..caf0cb2d703a60
--- /dev/null
+++ b/packages/interactivity-router/tsconfig.full-page.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"allowJs": false,
+		"checkJs": false,
+		"strict": false
+	},
+	"references": [ { "path": "tsconfig.main.json" } ],
+	"files": [ "src/full-page.ts" ],
+	"include": []
+}
diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json
index 616718560d02cc..5785e94a169c9f 100644
--- a/packages/interactivity-router/tsconfig.json
+++ b/packages/interactivity-router/tsconfig.json
@@ -1,9 +1,14 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"checkJs": false,
-		"strict": false
+		"composite": true
 	},
-	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ]
+	"files": [],
+	"references": [
+		{ "path": "../a11y" },
+		{ "path": "../interactivity" },
+		{ "path": "tsconfig.main.json" },
+		{ "path": "tsconfig.full-page.json" }
+	]
 }
+ 
\ No newline at end of file
diff --git a/packages/interactivity-router/tsconfig.main.json b/packages/interactivity-router/tsconfig.main.json
new file mode 100644
index 00000000000000..c00c009a8ab1d9
--- /dev/null
+++ b/packages/interactivity-router/tsconfig.main.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"allowJs": false,
+		"checkJs": false,
+		"strict": false
+	},
+	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
+	"exclude": [
+		"**/*.android.js",
+		"**/*.ios.js",
+		"**/*.native.js",
+		"**/benchmark",
+		"build-*/**",
+		"build/**",
+		"**/test/**",
+		"**/react-native-*/**",
+		"src/full-page.ts"
+	]
+}
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 885a8fd18a5bd0..81863aca4fbd1e 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,24 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+### Bug Fixes
+
+-   Fix `store()` types to support typing it without passing a store part. ([#70296](https://github.com/WordPress/gutenberg/pull/70296))
+-   Fix captured errors in `withScope` for passed generators. ([#70303](https://github.com/WordPress/gutenberg/pull/70303))
+-   Fix parsing of HTML comments without siblings. ([#70304](https://github.com/WordPress/gutenberg/pull/70304))
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index ada1c0e805a5e0..14238fb28bebf4 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index 4568eba013c3bd..cdc8faead413d9 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -30,7 +30,7 @@ import { getScope } from './scopes';
 import { proxifyState, proxifyContext, deepMerge } from './proxies';
 
 /**
- * Recursively clone the passed object.
+ * Recursively clones the passed object.
  *
  * @param source Source object.
  * @return Cloned object.
@@ -105,7 +105,7 @@ const ruleNewline = /\n+/g;
 const empty = ' ';
 
 /**
- * Convert a css style string into a object.
+ * Converts a css style string into a object.
  *
  * Made by Cristian Bote (@cristianbote) for Goober.
  * https://unpkg.com/browse/goober@2.1.13/src/core/astish.js
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 3d75fb03aa728c..d2560537523410 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -120,7 +120,7 @@ const directiveCallbacks: Record< string, DirectiveCallback > = {};
 const directivePriorities: Record< string, number > = {};
 
 /**
- * Register a new directive type in the Interactivity API runtime.
+ * Registers a new directive type in the Interactivity API runtime.
  *
  * @example
  * ```js
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index b7d68fd2007055..8c8132cef26f94 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -16,7 +16,13 @@ import { getNamespace } from './namespaces';
 import { parseServerData, populateServerData } from './store';
 import { proxifyState } from './proxies';
 
-export { store, getConfig, getServerState } from './store';
+export {
+	store,
+	getConfig,
+	getServerState,
+	type AsyncAction,
+	type TypeYield,
+} from './store';
 export { getContext, getServerContext, getElement } from './scopes';
 export {
 	withScope,
diff --git a/packages/interactivity/src/init.ts b/packages/interactivity/src/init.ts
index fa1eec51c3e27e..f91d695cf0b9f3 100644
--- a/packages/interactivity/src/init.ts
+++ b/packages/interactivity/src/init.ts
@@ -25,7 +25,7 @@ export const getRegionRootFragment = ( region: Element ): ContainerNode => {
 };
 
 // Initial vDOM regions associated with its DOM element.
-export const initialVdom = new WeakMap< Element, ComponentChild[] >();
+export const initialVdom = new WeakMap< Element, ComponentChild >();
 
 // Initialize the router with the initial DOM.
 export const init = async () => {
diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts
index 8d5bc54a8b831a..e470817692ef0b 100644
--- a/packages/interactivity/src/proxies/context.ts
+++ b/packages/interactivity/src/proxies/context.ts
@@ -44,7 +44,7 @@ const contextHandlers: ProxyHandler< object > = {
 };
 
 /**
- * Wrap a context object with a proxy to reproduce the context stack. The proxy
+ * Wraps a context object with a proxy to reproduce the context stack. The proxy
  * uses the passed `inherited` context as a fallback to look up for properties
  * that don't exist in the given context. Also, updated properties are modified
  * where they are defined, or added to the main context when they don't exist.
diff --git a/packages/interactivity/src/proxies/signals.ts b/packages/interactivity/src/proxies/signals.ts
index 29bd58aaa4fced..1396ade2669a3b 100644
--- a/packages/interactivity/src/proxies/signals.ts
+++ b/packages/interactivity/src/proxies/signals.ts
@@ -119,7 +119,7 @@ export class PropSignal {
 	}
 
 	/**
-	 *  Update the internal signals for the value and the getter of the
+	 *  Updates the internal signals for the value and the getter of the
 	 *  corresponding prop.
 	 *
 	 * @param param0
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
index 08977e8e18efae..dbdfa2f95c8e4b 100644
--- a/packages/interactivity/src/proxies/state.ts
+++ b/packages/interactivity/src/proxies/state.ts
@@ -379,7 +379,7 @@ const deepMergeRecursive = (
 };
 
 /**
- * Recursively update prop values inside the passed `target` and nested plain
+ * Recursively updates prop values inside the passed `target` and nested plain
  * objects, using the values present in `source`. References to plain objects
  * are kept, only updating props containing primitives or arrays. Arrays are
  * replaced instead of merged or concatenated.
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index 0b37e043733bb7..71f0b066f25ef7 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -15,7 +15,7 @@ const storeConfigs = new Map();
 const serverStates = new Map();
 
 /**
- * Get the defined config for the store with the passed namespace.
+ * Gets the defined config for the store with the passed namespace.
  *
  * @param namespace Store's namespace from which to retrieve the config.
  * @return Defined config for the given namespace.
@@ -24,7 +24,7 @@ export const getConfig = ( namespace?: string ) =>
 	storeConfigs.get( namespace || getNamespace() ) || {};
 
 /**
- * Get the part of the state defined and updated from the server.
+ * Gets the part of the state defined and updated from the server.
  *
  * The object returned is read-only, and includes the state defined in PHP with
  * `wp_interactivity_state()`. When using `actions.navigate()`, this object is
@@ -61,7 +61,7 @@ interface StoreOptions {
 	 * Property to block/unblock private store namespaces.
 	 *
 	 * If the passed value is `true`, it blocks the given namespace, making it
-	 * accessible only trough the returned variables of the `store()` call. In
+	 * accessible only through the returned variables of the `store()` call. In
 	 * the case a lock string is passed, it also blocks the namespace, but can
 	 * be unblocked for other `store()` calls using the same lock string.
 	 *
@@ -84,6 +84,9 @@ interface StoreOptions {
 	lock?: boolean | string;
 }
 
+export type AsyncAction< T > = Generator< any, T, unknown >;
+export type TypeYield< T extends ( ...args: any[] ) => Promise< any > > =
+	Awaited< ReturnType< T > >;
 type Prettify< T > = { [ K in keyof T ]: T[ K ] } & {};
 type DeepPartial< T > = T extends object
 	? { [ P in keyof T ]?: DeepPartial< T[ P ] > }
@@ -179,14 +182,14 @@ export function store< T extends object >(
 // Overload for when types are passed via generics and they contain state.
 export function store< T extends { state: object } >(
 	namespace: string,
-	storePart: ConvertPromisesToGenerators< DeepPartialState< T > >,
+	storePart?: ConvertPromisesToGenerators< DeepPartialState< T > >,
 	options?: StoreOptions
 ): Prettify< ConvertGeneratorsToPromises< T > >;
 
 // Overload for when types are passed via generics and they don't contain state.
 export function store< T extends object >(
 	namespace: string,
-	storePart: ConvertPromisesToGenerators< T >,
+	storePart?: ConvertPromisesToGenerators< T >,
 	options?: StoreOptions
 ): Prettify< ConvertGeneratorsToPromises< T > >;
 
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
index 1092001db03143..f15ec4bc09b746 100644
--- a/packages/interactivity/src/test/store.ts
+++ b/packages/interactivity/src/test/store.ts
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { store } from '../store';
+import { store, type AsyncAction, type TypeYield } from '../store';
 
 describe( 'Interactivity API', () => {
 	describe( 'store', () => {
@@ -74,7 +74,7 @@ describe( 'Interactivity API', () => {
 							sync( n ) {
 								return n;
 							},
-							*async( n ): Generator< unknown, number, unknown > {
+							*async( n ): AsyncAction< number > {
 								const n1 = myStore.actions.sync( n );
 								return myStore.state.derived + n1 + n;
 							},
@@ -114,13 +114,17 @@ describe( 'Interactivity API', () => {
 							sync( n: number ) {
 								return n;
 							},
-							*async(
-								n: number
-							): Generator< unknown, number, number > {
-								const n1: number =
-									yield myStore.actions.sync( n );
+							*async( n: number ): AsyncAction< number > {
+								const n1 = ( yield myStore.actions.async2(
+									n
+								) ) as TypeYield<
+									typeof myStore.actions.async2
+								> satisfies number;
 								return myStore.state.derived + n1 + n;
 							},
+							*async2( n: number ) {
+								return n;
+							},
 						},
 					};
 
@@ -161,13 +165,17 @@ describe( 'Interactivity API', () => {
 							sync( n: number ) {
 								return n;
 							},
-							*async(
-								n: number
-							): Generator< unknown, number, number > {
-								const n1: number =
-									yield myStore.actions.sync( n );
+							*async( n: number ): AsyncAction< number > {
+								const n1 = ( yield myStore.actions.async2(
+									n
+								) ) as TypeYield<
+									typeof myStore.actions.async2
+								> satisfies number;
 								return myStore.state.derived + n1 + n;
 							},
+							*async2( n: number ) {
+								return n;
+							},
 						},
 					} );
 
@@ -191,6 +199,7 @@ describe( 'Interactivity API', () => {
 						actions: {
 							sync: ( n: number ) => number;
 							async: ( n: number ) => Promise< number >;
+							async2: ( n: number ) => AsyncAction< number >;
 						};
 						callbacks: {
 							existent: number;
@@ -202,11 +211,17 @@ describe( 'Interactivity API', () => {
 							sync( n ) {
 								return n;
 							},
-							*async( n ): Generator< unknown, number, number > {
-								const n1: number =
-									yield myStore.actions.sync( n );
+							*async( n ): AsyncAction< number > {
+								const n1 = ( yield myStore.actions.async2(
+									n
+								) ) as TypeYield<
+									typeof myStore.actions.async2
+								> satisfies number;
 								return n1 + n;
 							},
+							*async2( n: number ) {
+								return n;
+							},
 						},
 						callbacks: {
 							existent: 1,
@@ -281,6 +296,78 @@ describe( 'Interactivity API', () => {
 					myStore.state.nonExistent satisfies {};
 				};
 			} );
+
+			describe( 'a typed store can be returned without adding a new store part', () => {
+				type State = {
+					someValue: number;
+				};
+				type Actions = {
+					incrementValue: ( n: number ) => void;
+				};
+
+				const { state, actions } = store< {
+					state: State;
+					actions: Actions;
+				} >( 'storeWithState', {
+					actions: {
+						incrementValue( n ) {
+							state.someValue += n;
+						},
+					},
+				} );
+
+				state.someValue satisfies number;
+				actions.incrementValue( 1 ) satisfies void;
+
+				const { actions: actions2 } = store< { actions: Actions } >(
+					'storeWithoutState',
+					{
+						actions: {
+							incrementValue( n ) {
+								state.someValue += n;
+							},
+						},
+					}
+				);
+
+				actions2.incrementValue( 1 ) satisfies void;
+			} );
+
+			describe( 'async actions can pass state to yields and type the yield returns', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type Store = {
+						state: {
+							someValue: string;
+						};
+						actions: {
+							asyncAction: () => Promise< number >;
+						};
+					};
+
+					const asyncFunction = async (
+						someValue: string
+					): Promise< string > => {
+						return someValue;
+					};
+
+					const { state, actions } = store< Store >( 'test', {
+						actions: {
+							*asyncAction(): AsyncAction< number > {
+								( yield asyncFunction(
+									state.someValue
+								) ) as TypeYield<
+									typeof asyncFunction
+								> satisfies string;
+
+								return 1;
+							},
+						},
+					} );
+
+					( await actions.asyncAction() ) satisfies number;
+				};
+			} );
 		} );
 	} );
 } );
diff --git a/packages/interactivity/src/test/utils.ts b/packages/interactivity/src/test/utils.ts
index 2de0ffe6d31e06..2001f06450706b 100644
--- a/packages/interactivity/src/test/utils.ts
+++ b/packages/interactivity/src/test/utils.ts
@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import { kebabToCamelCase } from '../utils';
+import { kebabToCamelCase, withScope } from '../utils';
+import { setScope, getScope, resetScope, type Scope } from '../scopes';
+import { setNamespace, getNamespace, resetNamespace } from '../namespaces';
 
 describe( 'Interactivity API', () => {
 	describe( 'kebabToCamelCase', () => {
@@ -25,4 +27,209 @@ describe( 'Interactivity API', () => {
 			expect( kebabToCamelCase( '-my-item-' ) ).toBe( 'myItem' );
 		} );
 	} );
+
+	describe( 'withScope', () => {
+		const previousNamespace = 'previousNamespace';
+		const previousScope = {
+			evaluate: () => {},
+			context: {},
+			serverContext: {},
+			ref: { current: null },
+			attributes: {},
+		};
+
+		const dummyNamespace = 'testNamespace';
+		const dummyScope = {
+			evaluate: () => {},
+			context: { test: 'normal' },
+			serverContext: { test: 'normal' },
+			ref: { current: null },
+			attributes: {},
+		};
+
+		// Helper to mimic the wrapper used in state-proxy.ts and store-proxy.ts.
+		const dummyScopeAndNS = ( callback: () => any ) => {
+			setScope( dummyScope );
+			setNamespace( dummyNamespace );
+			try {
+				return callback();
+			} finally {
+				resetNamespace();
+				resetScope();
+			}
+		};
+
+		beforeEach( () => {
+			setScope( previousScope );
+			setNamespace( previousNamespace );
+		} );
+
+		afterEach( () => {
+			resetNamespace();
+			resetScope();
+		} );
+
+		it( 'should return a function when passed a normal function', () => {
+			function normalFn( x: number ) {
+				return x + 1;
+			}
+			const wrapped = withScope( normalFn );
+			expect( typeof wrapped ).toBe( 'function' );
+		} );
+
+		it( 'should call the original function, set the scope and namespace and restore them afterwards', () => {
+			let called = false;
+			let scope: Scope;
+			let namespace: string;
+			function normalFn( x: number ) {
+				called = true;
+				scope = getScope();
+				namespace = getNamespace();
+				return x * 2;
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( normalFn ) );
+			const result = wrapped( 5 );
+
+			expect( result ).toBe( 10 );
+			expect( called ).toBe( true );
+			expect( scope! ).toBe( dummyScope );
+			expect( namespace! ).toBe( dummyNamespace );
+			// After invocation, scope and namespace are reset.
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should return an async function when passed a generator function', async () => {
+			function* gen() {
+				yield Promise.resolve( 'value' );
+				return 'done';
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			const resultPromise = wrapped();
+
+			expect( resultPromise ).toBeInstanceOf( Promise );
+
+			const result = await resultPromise;
+
+			expect( result ).toBe( 'done' );
+			// After invocation, scope and namespace are reset.
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should execute a generator function step by step and yield the correct values, maintaining scope and namespace', async () => {
+			const steps: Array< { scope: any; namespace: string } > = [];
+			function* gen() {
+				steps.push( { scope: getScope(), namespace: getNamespace() } );
+				const a = yield Promise.resolve( 1 );
+				steps.push( { scope: getScope(), namespace: getNamespace() } );
+				const b = yield Promise.resolve( a + 1 );
+				steps.push( { scope: getScope(), namespace: getNamespace() } );
+				return b * 2;
+			}
+			const callback = dummyScopeAndNS( () => withScope( gen ) );
+			const result = await callback();
+
+			expect( result ).toBe( 4 );
+			steps.forEach( ( step ) => {
+				expect( step.scope ).toBe( dummyScope );
+				expect( step.namespace ).toBe( dummyNamespace );
+			} );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should return the resolved value when a promise is returned in generator functions', async () => {
+			function* gen() {
+				const a = yield Promise.resolve( 3 );
+				return Promise.resolve( a + 2 );
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			const result = await wrapped();
+			expect( result ).toBe( 5 );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should accept arguments in generator functions like in normal functions', async () => {
+			function* gen( ...values: number[] ) {
+				let result = 0;
+				for ( const value of values ) {
+					result += yield Promise.resolve( value );
+				}
+				return result;
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			const result = await wrapped( 1, 2, 3, 4 );
+			expect( result ).toBe( 10 );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should propagate errors thrown inside a generator function', async () => {
+			function* gen() {
+				throw new Error( 'Test Error' );
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			await expect( wrapped() ).rejects.toThrow( 'Test Error' );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should propagate errors when a generator function returns a rejected promise', async () => {
+			function* gen() {
+				return Promise.reject( new Error( 'Test Error' ) );
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			await expect( wrapped() ).rejects.toThrow( 'Test Error' );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'hould handle captured errors within generator execution and resume correctly, maintaining scope and namespace', async () => {
+			const steps: Array< { scope: any; namespace: string } > = [];
+			function* gen() {
+				let a: number;
+				try {
+					steps.push( {
+						scope: getScope(),
+						namespace: getNamespace(),
+					} );
+					a = yield Promise.reject( new Error( 'CatchMe' ) );
+				} catch ( e ) {
+					steps.push( {
+						scope: getScope(),
+						namespace: getNamespace(),
+					} );
+					a = 10;
+				}
+				steps.push( { scope: getScope(), namespace: getNamespace() } );
+				const b = yield Promise.resolve( a + 5 );
+				steps.push( { scope: getScope(), namespace: getNamespace() } );
+				return b;
+			}
+			const callback = dummyScopeAndNS( () => withScope( gen ) );
+			const result = await callback();
+
+			expect( result ).toBe( 15 );
+			steps.forEach( ( step ) => {
+				expect( step.scope ).toBe( dummyScope );
+				expect( step.namespace ).toBe( dummyNamespace );
+			} );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+
+		it( 'should handle rejected promises within a generator function and throw after yielding', async () => {
+			function* gen() {
+				const a = yield Promise.resolve( 2 );
+				yield Promise.reject( new Error( 'FinalReject' ) );
+				return a;
+			}
+			const wrapped = dummyScopeAndNS( () => withScope( gen ) );
+			await expect( wrapped() ).rejects.toThrow( 'FinalReject' );
+			expect( getScope() ).toBe( previousScope );
+			expect( getNamespace() ).toBe( previousNamespace );
+		} );
+	} );
 } );
diff --git a/packages/interactivity/src/test/vdom.ts b/packages/interactivity/src/test/vdom.ts
new file mode 100644
index 00000000000000..7e2a55e70f20ef
--- /dev/null
+++ b/packages/interactivity/src/test/vdom.ts
@@ -0,0 +1,778 @@
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+import type { VNode } from 'preact';
+
+/**
+ * Internal dependencies
+ */
+import { toVdom, hydratedIslands } from '../vdom';
+
+function createElementFromHTML( html: string ): HTMLElement {
+	const div = document.createElement( 'div' );
+	div.innerHTML = html.trim();
+	return div.firstChild as HTMLElement;
+}
+
+const normalizeVNode = ( obj: object ) =>
+	JSON.stringify( obj ).replace( /"__v":\d+/g, '"__v":null' );
+
+expect.extend( {
+	toMatchVNode( received: VNode, expected: VNode ) {
+		const pass = normalizeVNode( received ) === normalizeVNode( expected );
+		return {
+			pass,
+			message: () =>
+				pass ? "Expected VNodes don't match" : 'Expected VNode match',
+		};
+	},
+} );
+
+describe( 'toVdom', () => {
+	beforeEach( () => {
+		// @ts-ignore - Accessing private property for testing.
+		hydratedIslands._values = new WeakMap();
+	} );
+
+	describe( 'Basic node types', () => {
+		it( 'should convert text nodes to strings', () => {
+			const textNode = createElementFromHTML( 'Hello World' );
+			expect( toVdom( textNode ) ).toMatchVNode( 'Hello World' );
+		} );
+
+		it( 'should convert element nodes to vDOM elements', () => {
+			const element = createElementFromHTML( '<div></div>' );
+			expect( toVdom( element ) ).toMatchVNode( h( 'div', null, [] ) );
+		} );
+
+		it( 'should handle nested elements', () => {
+			const element = createElementFromHTML(
+				'<div><span>Test 1</span>Test 2</div>'
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h( 'div', null, [ h( 'span', null, [ 'Test 1' ] ), 'Test 2' ] )
+			);
+		} );
+
+		it( 'should convert CDATA sections to text nodes and continue to their siblings', () => {
+			const parser = new DOMParser();
+			const xml = parser.parseFromString(
+				'<div>Test 1<![CDATA[CDATA content]]>Test 2</div>',
+				'application/xml'
+			);
+			expect( toVdom( xml.querySelector( 'div' ) as Node ) ).toMatchVNode(
+				h( 'div', null, [ 'Test 1', 'CDATA content', 'Test 2' ] )
+			);
+			expect( xml.querySelector( 'div' )?.outerHTML ).toBe(
+				'<div>Test 1CDATA contentTest 2</div>'
+			);
+		} );
+
+		it( 'should convert CDATA sections to text nodes and continue to their parent', () => {
+			const parser = new DOMParser();
+			const xml = parser.parseFromString(
+				'<div><div>Test 1<![CDATA[CDATA content]]></div><div>Test 2</div></div>',
+				'application/xml'
+			);
+			expect( toVdom( xml.querySelector( 'div' ) as Node ) ).toMatchVNode(
+				h( 'div', null, [
+					h( 'div', null, [ 'Test 1', 'CDATA content' ] ),
+					h( 'div', null, [ 'Test 2' ] ),
+				] )
+			);
+			expect( xml.querySelector( 'div' )?.outerHTML ).toBe(
+				'<div><div>Test 1CDATA content</div><div>Test 2</div></div>'
+			);
+		} );
+
+		it( 'should remove comment nodes and continue to their siblings', () => {
+			const container = createElementFromHTML(
+				'<div>Test 1<!-- This is a comment --><div>Test 2</div></div>'
+			);
+			expect( toVdom( container ) ).toMatchVNode(
+				h( 'div', null, [ 'Test 1', h( 'div', null, [ 'Test 2' ] ) ] )
+			);
+			expect( container.outerHTML ).toBe(
+				'<div>Test 1<div>Test 2</div></div>'
+			);
+		} );
+
+		it( 'should remove multiple comment nodes', () => {
+			const container = createElementFromHTML(
+				'<div><div>Test 1<!-- This is a comment --><!-- This is another comment --></div><div>Test 2</div></div>'
+			);
+			expect( toVdom( container ) ).toMatchVNode(
+				h( 'div', null, [
+					h( 'div', null, [ 'Test 1' ] ),
+					h( 'div', null, [ 'Test 2' ] ),
+				] )
+			);
+			expect( container.outerHTML ).toBe(
+				'<div><div>Test 1</div><div>Test 2</div></div>'
+			);
+		} );
+
+		it( 'should remove comment nodes and continue to their parents', () => {
+			const container = createElementFromHTML(
+				'<div><div>Test 1<!-- This is a comment --></div><div>Test 2</div></div>'
+			);
+			expect( toVdom( container ) ).toMatchVNode(
+				h( 'div', null, [
+					h( 'div', null, [ 'Test 1' ] ),
+					h( 'div', null, [ 'Test 2' ] ),
+				] )
+			);
+			expect( container.outerHTML ).toBe(
+				'<div><div>Test 1</div><div>Test 2</div></div>'
+			);
+		} );
+
+		it( 'should remove processing instruction nodes', () => {
+			const parser = new DOMParser();
+			const xml = parser.parseFromString(
+				'<div><?xml-stylesheet type="text/css" href="style.css"?></div>',
+				'application/xml'
+			);
+			expect( toVdom( xml.querySelector( 'div' ) as Node ) ).toMatchVNode(
+				h( 'div', null, [] )
+			);
+			expect( xml.querySelector( 'div' )?.outerHTML ).toBe( '<div/>' );
+		} );
+
+		it( 'should handle template elements', () => {
+			const template = createElementFromHTML(
+				`<template>Test</template>`
+			);
+			expect( toVdom( template ) ).toMatchVNode(
+				h(
+					'template' as any,
+					{
+						content: [ 'Test' ],
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should remove comment nodes inside templates', () => {
+			const container = createElementFromHTML(
+				'<div><!-- This is a comment --><template><div>Test 1<!-- This is a comment --></div></template></div>'
+			);
+			expect( toVdom( container ) ).toMatchVNode(
+				h( 'div', null, [
+					h(
+						'template' as any,
+						{
+							content: [ h( 'div', null, [ 'Test 1' ] ) ],
+						},
+						[]
+					),
+				] )
+			);
+			expect( container.outerHTML ).toBe(
+				'<div><template><div>Test 1</div></template></div>'
+			);
+		} );
+	} );
+
+	describe( 'Attribute handling', () => {
+		it( 'should properly parse regular HTML attributes', () => {
+			const element = createElementFromHTML(
+				'<div id="test-id" class="test-class" data-test="test-value"></div>'
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						id: 'test-id',
+						class: 'test-class',
+						'data-test': 'test-value',
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should skip ref attributes', () => {
+			const element = createElementFromHTML(
+				'<div id="test-id" ref="some-ref"></div>'
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h( 'div', { id: 'test-id' }, [] )
+			);
+		} );
+
+		it( 'should warn about malformed directive names', () => {
+			const console = global.console;
+			const originalWarn = console.warn;
+			console.warn = jest.fn();
+
+			toVdom(
+				createElementFromHTML( `<div data-wp-invalid[name]></div>` )
+			);
+
+			expect( console.warn ).toHaveBeenCalledWith(
+				`Found malformed directive name: data-wp-invalid[name].`
+			);
+
+			console.warn = originalWarn;
+		} );
+	} );
+
+	describe( 'Directive processing', () => {
+		it( 'should process simple directives', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test-one data-wp-test-two="test value"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test-one': '',
+						'data-wp-test-two': 'test value',
+						__directives: {
+							'test-one': [
+								{
+									namespace: null,
+									value: '',
+									suffix: null,
+								},
+							],
+							'test-two': [
+								{
+									namespace: null,
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should parse JSON values in directives', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test='{"key": "value"}'></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test': '{"key": "value"}',
+						__directives: {
+							test: [
+								{
+									namespace: null,
+									value: { key: 'value' },
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should handle malformed JSON and keep as string', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test="{malformed: json}"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test': '{malformed: json}',
+						__directives: {
+							test: [
+								{
+									namespace: null,
+									value: '{malformed: json}',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should process directive suffixes', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test--one="test value 1" data-wp-test--two="test value 2"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test--one': 'test value 1',
+						'data-wp-test--two': 'test value 2',
+						__directives: {
+							test: [
+								{
+									namespace: null,
+									value: 'test value 1',
+									suffix: 'one',
+								},
+								{
+									namespace: null,
+									value: 'test value 2',
+									suffix: 'two',
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should preserve values that JSON would parse but are not objects', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test--one='true' data-wp-test--two='"test value"'></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test--one': 'true',
+						'data-wp-test--two': '"test value"',
+						__directives: {
+							test: [
+								{
+									namespace: null,
+									value: 'true',
+									suffix: 'one',
+								},
+								{
+									namespace: null,
+									value: '"test value"',
+									suffix: 'two',
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should handle directives in template elements', () => {
+			const template = createElementFromHTML(
+				`<template data-wp-test="test value"><div></div></template>`
+			);
+			expect( toVdom( template ) ).toMatchVNode(
+				h(
+					'template' as any,
+					{
+						'data-wp-test': 'test value',
+						__directives: {
+							test: [
+								{
+									namespace: null,
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+						content: [ h( 'div' as any, null, [] ) ],
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should handle directives inside template elements', () => {
+			const template = createElementFromHTML(
+				`<template><div data-wp-test="test value"></div></template>`
+			);
+			expect( toVdom( template ) ).toMatchVNode(
+				h(
+					'template' as any,
+					{
+						content: [
+							h(
+								'div' as any,
+								{
+									'data-wp-test': 'test value',
+									__directives: {
+										test: [
+											{
+												namespace: null,
+												value: 'test value',
+												suffix: null,
+											},
+										],
+									},
+								},
+								[]
+							),
+						],
+					},
+					[]
+				)
+			);
+		} );
+	} );
+
+	describe( 'Namespaces', () => {
+		it( 'should process directives with a custom namespace', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test="my-namespace::test value"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test': 'my-namespace::test value',
+						__directives: {
+							test: [
+								{
+									namespace: 'my-namespace',
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should parse JSON values with a custom namespace', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-test='my-namespace::{"key": "value"}'></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-test': 'my-namespace::{"key": "value"}',
+						__directives: {
+							test: [
+								{
+									namespace: 'my-namespace',
+									value: { key: 'value' },
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should use the default namespace provided in the same element', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive="my-namespace" data-wp-test="test value"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'my-namespace',
+						'data-wp-test': 'test value',
+						__directives: {
+							test: [
+								{
+									namespace: 'my-namespace',
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should override the default namespace provided in a parent element', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive="parent-namespace"><div data-wp-interactive="my-namespace" data-wp-test="test value"></div></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'parent-namespace',
+					},
+					[
+						h(
+							'div' as any,
+							{
+								'data-wp-interactive': 'my-namespace',
+								'data-wp-test': 'test value',
+								__directives: {
+									test: [
+										{
+											namespace: 'my-namespace',
+											value: 'test value',
+											suffix: null,
+										},
+									],
+								},
+							},
+							[]
+						),
+					]
+				)
+			);
+		} );
+
+		it( 'should handle default namespaces provided in the a JSON object', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive='{ "namespace": "my-namespace" }' data-wp-test="test value"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive':
+							'{ "namespace": "my-namespace" }',
+						'data-wp-test': 'test value',
+						__directives: {
+							test: [
+								{
+									namespace: 'my-namespace',
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should recover the parent default namespace after a closing element', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive="parent-namespace"><div data-wp-interactive="child-namespace"></div><div data-wp-test="test value"></div></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'parent-namespace',
+					},
+					[
+						h(
+							'div' as any,
+							{
+								'data-wp-interactive': 'child-namespace',
+							},
+							[]
+						),
+						h(
+							'div' as any,
+							{
+								'data-wp-test': 'test value',
+								__directives: {
+									test: [
+										{
+											namespace: 'parent-namespace',
+											value: 'test value',
+											suffix: null,
+										},
+									],
+								},
+							},
+							[]
+						),
+					]
+				)
+			);
+		} );
+
+		it( 'should reset the default namespace after that last closing element', () => {
+			const element = createElementFromHTML(
+				`<div><div data-wp-interactive="my-namespace"></div><div data-wp-test="test value"></div></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h( 'div' as any, null, [
+					h(
+						'div' as any,
+						{
+							'data-wp-interactive': 'my-namespace',
+						},
+						[]
+					),
+					h(
+						'div' as any,
+						{
+							'data-wp-test': 'test value',
+							__directives: {
+								test: [
+									{
+										namespace: null,
+										value: 'test value',
+										suffix: null,
+									},
+								],
+							},
+						},
+						[]
+					),
+				] )
+			);
+		} );
+
+		it( 'should override the default namespace with a custom one in the same element', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive="my-namespace" data-wp-test="custom-namespace::test value"></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'my-namespace',
+						'data-wp-test': 'custom-namespace::test value',
+						__directives: {
+							test: [
+								{
+									namespace: 'custom-namespace',
+									value: 'test value',
+									suffix: null,
+								},
+							],
+						},
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should override the default namespace with a custom one in a child element', () => {
+			const element = createElementFromHTML(
+				`<div data-wp-interactive="my-namespace"><div data-wp-test="custom-namespace::test value"></div></div>`
+			);
+			expect( toVdom( element ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'my-namespace',
+					},
+					[
+						h(
+							'div' as any,
+							{
+								'data-wp-test': 'custom-namespace::test value',
+								__directives: {
+									test: [
+										{
+											namespace: 'custom-namespace',
+											value: 'test value',
+											suffix: null,
+										},
+									],
+								},
+							},
+							[]
+						),
+					]
+				)
+			);
+		} );
+
+		it( 'should pass down namespaces defined in template elements', () => {
+			const template = createElementFromHTML(
+				`<template data-wp-interactive="my-namespace"><div data-wp-test="test value"></div></template>`
+			);
+			expect( toVdom( template ) ).toMatchVNode(
+				h(
+					'template' as any,
+					{
+						'data-wp-interactive': 'my-namespace',
+						content: [
+							h(
+								'div' as any,
+								{
+									'data-wp-test': 'test value',
+									__directives: {
+										test: [
+											{
+												namespace: 'my-namespace',
+												value: 'test value',
+												suffix: null,
+											},
+										],
+									},
+								},
+								[]
+							),
+						],
+					},
+					[]
+				)
+			);
+		} );
+
+		it( 'should pass down namespaces defined in template parents', () => {
+			const template = createElementFromHTML(
+				`<div data-wp-interactive="my-namespace"><template><div data-wp-test="test value"></div></template></div>`
+			);
+			expect( toVdom( template ) ).toMatchVNode(
+				h(
+					'div' as any,
+					{
+						'data-wp-interactive': 'my-namespace',
+					},
+					[
+						h(
+							'template' as any,
+							{
+								content: [
+									h(
+										'div' as any,
+										{
+											'data-wp-test': 'test value',
+											__directives: {
+												test: [
+													{
+														namespace:
+															'my-namespace',
+														value: 'test value',
+														suffix: null,
+													},
+												],
+											},
+										},
+										[]
+									),
+								],
+							},
+							[]
+						),
+					]
+				)
+			);
+		} );
+	} );
+
+	describe( 'Hydrated islands', () => {
+		it( 'should add a topmost island', () => {
+			const element = createElementFromHTML( `
+				<div data-wp-interactive="my-namespace"></div>
+			` );
+			toVdom( element );
+			expect( hydratedIslands.has( element ) ).toBe( true );
+		} );
+
+		it( 'should add nested islands', () => {
+			const outer = createElementFromHTML(
+				`<div data-wp-interactive="outer"><div data-wp-interactive="inner"></div></div>`
+			);
+			const inner = outer.querySelector( '[data-wp-interactive="inner"' );
+			toVdom( outer );
+			expect( hydratedIslands.has( outer ) ).toBe( true );
+			expect( hydratedIslands.has( inner! ) ).toBe( true );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/utils.ts b/packages/interactivity/src/utils.ts
index 7069088a8836be..271c3649c31eb4 100644
--- a/packages/interactivity/src/utils.ts
+++ b/packages/interactivity/src/utils.ts
@@ -150,11 +150,15 @@ export function withScope( func: ( ...args: unknown[] ) => unknown ) {
 			const gen = func( ...args ) as Generator;
 			let value: any;
 			let it: any;
+			let error: any;
 			while ( true ) {
 				setNamespace( ns );
 				setScope( scope );
 				try {
-					it = gen.next( value );
+					it = error ? gen.throw( error ) : gen.next( value );
+					error = undefined;
+				} catch ( e ) {
+					throw e;
 				} finally {
 					resetScope();
 					resetNamespace();
@@ -163,16 +167,14 @@ export function withScope( func: ( ...args: unknown[] ) => unknown ) {
 				try {
 					value = await it.value;
 				} catch ( e ) {
-					setNamespace( ns );
-					setScope( scope );
-					gen.throw( e );
-				} finally {
-					resetScope();
-					resetNamespace();
+					error = e;
 				}
-
 				if ( it.done ) {
-					break;
+					if ( error ) {
+						throw error;
+					} else {
+						break;
+					}
 				}
 			}
 
@@ -285,16 +287,17 @@ export function useCallback< T extends Function >(
 }
 
 /**
- * Pass a factory function and an array of inputs. `useMemo` will only recompute
- * the memoized value when one of the inputs has changed.
+ * Returns the memoized output of the passed factory function, allowing access
+ * to the current element's scope.
  *
  * This hook is equivalent to Preact's `useMemo` and makes the element's scope
  * available so functions like `getElement()` and `getContext()` can be used
- * inside the passed factory function.
+ * inside the passed factory function. Note that `useMemo` will only recompute
+ * the memoized value when one of the inputs has changed.
  *
  * @param factory Factory function that returns that value for memoization.
- * @param inputs  If present, the factory will only be run to recompute if
- *                the values in the list change (using `===`).
+ * @param inputs  If present, the factory will only be run to recompute if the
+ *                values in the list change (using `===`).
  *
  * @return The memoized value.
  */
diff --git a/packages/interactivity/src/vdom.ts b/packages/interactivity/src/vdom.ts
index 6528dc07858c79..3fc20b49a3b1b8 100644
--- a/packages/interactivity/src/vdom.ts
+++ b/packages/interactivity/src/vdom.ts
@@ -54,36 +54,33 @@ export const hydratedIslands = new WeakSet();
  * @param root The root element or node to start traversing on.
  * @return The resulting vDOM tree.
  */
-export function toVdom( root: Node ): Array< ComponentChild > {
+export function toVdom( root: Node ): ComponentChild {
+	const nodesToRemove = new Set< Node >();
+	const nodesToReplace = new Set< Node >();
+
 	const treeWalker = document.createTreeWalker(
 		root,
 		205 // TEXT + CDATA_SECTION + COMMENT + PROCESSING_INSTRUCTION + ELEMENT
 	);
 
-	function walk(
-		node: Node
-	): [ ComponentChild ] | [ ComponentChild, Node | null ] {
+	function walk( node: Node ): ComponentChild | null {
 		const { nodeType } = node;
 
 		// TEXT_NODE (3)
 		if ( nodeType === 3 ) {
-			return [ ( node as Text ).data ];
+			return ( node as Text ).data;
 		}
 
 		// CDATA_SECTION_NODE (4)
 		if ( nodeType === 4 ) {
-			const next = treeWalker.nextSibling();
-			( node as CDATASection ).replaceWith(
-				new window.Text( ( node as CDATASection ).nodeValue ?? '' )
-			);
-			return [ node.nodeValue, next ];
+			nodesToReplace.add( node );
+			return node.nodeValue;
 		}
 
 		// COMMENT_NODE (8) || PROCESSING_INSTRUCTION_NODE (7)
 		if ( nodeType === 8 || nodeType === 7 ) {
-			const next = treeWalker.nextSibling();
-			( node as Comment | ProcessingInstruction ).remove();
-			return [ null, next ];
+			nodesToRemove.add( node );
+			return null;
 		}
 
 		const elementNode = node as HTMLElement;
@@ -178,11 +175,11 @@ export function toVdom( root: Node ): Array< ComponentChild > {
 			let child = treeWalker.firstChild();
 			if ( child ) {
 				while ( child ) {
-					const [ vnode, nextChild ] = walk( child );
+					const vnode = walk( child );
 					if ( vnode ) {
 						children.push( vnode );
 					}
-					child = nextChild || treeWalker.nextSibling();
+					child = treeWalker.nextSibling();
 				}
 				treeWalker.parentNode();
 			}
@@ -193,8 +190,19 @@ export function toVdom( root: Node ): Array< ComponentChild > {
 			namespaces.pop();
 		}
 
-		return [ h( localName, props, children ) ];
+		return h( localName, props, children );
 	}
 
-	return walk( treeWalker.currentNode );
+	const vdom = walk( treeWalker.currentNode );
+
+	nodesToRemove.forEach( ( node: Node ) =>
+		( node as Comment | ProcessingInstruction ).remove()
+	);
+	nodesToReplace.forEach( ( node: Node ) =>
+		( node as CDATASection ).replaceWith(
+			new window.Text( ( node as CDATASection ).nodeValue ?? '' )
+		)
+	);
+
+	return vdom;
 }
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 2e9ec71e3b3e43..0df92d81e22cc7 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 9.12.0 (2025-07-23)
+
+## 9.11.0 (2025-06-25)
+
+## 9.10.0 (2025-06-04)
+
+## 9.9.0 (2025-05-22)
+
+## 9.8.0 (2025-05-07)
+
+## 9.7.0 (2025-04-11)
+
 ## 9.6.0 (2025-03-27)
 
 ## 9.5.0 (2025-03-13)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 9202d0bd5450ec..48f28ba5e27d9f 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "9.6.0",
+	"version": "9.12.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 7d152932da12e0..de260c254cacd0 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 8201ec434c580f..a7b297832e9707 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/src/arrays.js b/packages/is-shallow-equal/src/arrays.ts
similarity index 58%
rename from packages/is-shallow-equal/src/arrays.js
rename to packages/is-shallow-equal/src/arrays.ts
index 88adc7617e3bb3..48c67794d4d833 100644
--- a/packages/is-shallow-equal/src/arrays.js
+++ b/packages/is-shallow-equal/src/arrays.ts
@@ -1,12 +1,15 @@
 /**
  * Returns true if the two arrays are shallow equal, or false otherwise.
  *
- * @param {any[]} a First array to compare.
- * @param {any[]} b Second array to compare.
+ * @param a First array to compare.
+ * @param b Second array to compare.
  *
- * @return {boolean} Whether the two arrays are shallow equal.
+ * @return Whether the two arrays are shallow equal.
  */
-export default function isShallowEqualArrays( a, b ) {
+export default function isShallowEqualArrays(
+	a: unknown[],
+	b: unknown[]
+): boolean {
 	if ( a === b ) {
 		return true;
 	}
diff --git a/packages/is-shallow-equal/src/index.js b/packages/is-shallow-equal/src/index.ts
similarity index 69%
rename from packages/is-shallow-equal/src/index.js
rename to packages/is-shallow-equal/src/index.ts
index be0174421baef0..1da14d3d993b8d 100644
--- a/packages/is-shallow-equal/src/index.js
+++ b/packages/is-shallow-equal/src/index.ts
@@ -7,20 +7,18 @@ import isShallowEqualArrays from './arrays';
 export { default as isShallowEqualObjects } from './objects';
 export { default as isShallowEqualArrays } from './arrays';
 
-/**
- * @typedef {Record<string, any>} ComparableObject
- */
+export type ComparableObject = Record< string, any >;
 
 /**
  * Returns true if the two arrays or objects are shallow equal, or false
  * otherwise. Also handles primitive values, just in case.
  *
- * @param {unknown} a First object or array to compare.
- * @param {unknown} b Second object or array to compare.
+ * @param a First object or array to compare.
+ * @param b Second object or array to compare.
  *
- * @return {boolean} Whether the two values are shallow equal.
+ * @return Whether the two values are shallow equal.
  */
-export default function isShallowEqual( a, b ) {
+export default function isShallowEqual( a: unknown, b: unknown ): boolean {
 	if ( a && b ) {
 		if ( a.constructor === Object && b.constructor === Object ) {
 			return isShallowEqualObjects( a, b );
diff --git a/packages/is-shallow-equal/src/objects.js b/packages/is-shallow-equal/src/objects.ts
similarity index 71%
rename from packages/is-shallow-equal/src/objects.js
rename to packages/is-shallow-equal/src/objects.ts
index e2dc6867c7d51b..34fabbf38a815b 100644
--- a/packages/is-shallow-equal/src/objects.js
+++ b/packages/is-shallow-equal/src/objects.ts
@@ -1,12 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { ComparableObject } from '.';
+
 /**
  * Returns true if the two objects are shallow equal, or false otherwise.
  *
- * @param {import('.').ComparableObject} a First object to compare.
- * @param {import('.').ComparableObject} b Second object to compare.
+ * @param a First object to compare.
+ * @param b Second object to compare.
  *
- * @return {boolean} Whether the two objects are shallow equal.
+ * @return Whether the two objects are shallow equal.
  */
-export default function isShallowEqualObjects( a, b ) {
+export default function isShallowEqualObjects(
+	a: ComparableObject,
+	b: ComparableObject
+): boolean {
 	if ( a === b ) {
 		return true;
 	}
diff --git a/packages/is-shallow-equal/test/index.js b/packages/is-shallow-equal/test/index.ts
similarity index 100%
rename from packages/is-shallow-equal/test/index.js
rename to packages/is-shallow-equal/test/index.ts
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index a5459158559b40..fb1472bdb30138 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 8.27.0 (2025-07-23)
+
+## 8.26.0 (2025-06-25)
+
+## 8.25.0 (2025-06-04)
+
+## 8.24.0 (2025-05-22)
+
+## 8.23.0 (2025-05-07)
+
+## 8.22.0 (2025-04-11)
+
 ## 8.21.0 (2025-03-27)
 
 ## 8.20.0 (2025-03-13)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 2ae89ff461f26f..2a887b93e92a8b 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.21.0",
+	"version": "8.27.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,11 +27,11 @@
 	"files": [
 		"build",
 		"build-module",
-		"types"
+		"build-types"
 	],
 	"main": "build/index.js",
 	"module": "build-module/index.js",
-	"types": "types",
+	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"jest-matcher-utils": "^29.6.2"
diff --git a/packages/jest-console/types/index.d.ts b/packages/jest-console/src/declarations.d.ts
similarity index 84%
rename from packages/jest-console/types/index.d.ts
rename to packages/jest-console/src/declarations.d.ts
index 817fd407c4e9d2..ee4f48fd27edf5 100644
--- a/packages/jest-console/types/index.d.ts
+++ b/packages/jest-console/src/declarations.d.ts
@@ -11,7 +11,7 @@ declare namespace jest {
 		/**
 		 * Ensure that `console.error` function was called with specific arguments.
 		 */
-		toHaveErroredWith( ...args: any[] ): R;
+		toHaveErroredWith( ...args: unknown[] ): R;
 
 		/**
 		 * Ensure that `console.info` function was called.
@@ -21,7 +21,7 @@ declare namespace jest {
 		/**
 		 * Ensure that `console.info` function was called with specific arguments.
 		 */
-		toHaveInformedWith( ...args: any[] ): R;
+		toHaveInformedWith( ...args: unknown[] ): R;
 
 		/**
 		 * Ensure that `console.log` function was called.
@@ -31,7 +31,7 @@ declare namespace jest {
 		/**
 		 * Ensure that `console.log` function was called with specific arguments.
 		 */
-		toHaveLoggedWith( ...args: any[] ): R;
+		toHaveLoggedWith( ...args: unknown[] ): R;
 
 		/**
 		 * Ensure that `console.warn` function was called.
@@ -41,6 +41,6 @@ declare namespace jest {
 		/**
 		 * Ensure that `console.warn` function was called with specific arguments.
 		 */
-		toHaveWarnedWith( ...args: any[] ): R;
+		toHaveWarnedWith( ...args: unknown[] ): R;
 	}
 }
diff --git a/packages/jest-console/src/index.js b/packages/jest-console/src/index.ts
similarity index 73%
rename from packages/jest-console/src/index.js
rename to packages/jest-console/src/index.ts
index 84cdb6f1d73ad2..09cd7bccc78f37 100644
--- a/packages/jest-console/src/index.js
+++ b/packages/jest-console/src/index.ts
@@ -3,18 +3,18 @@
  */
 import './matchers';
 import supportedMatchers from './supported-matchers';
+import type { ExtendedMock } from './types';
 
 /**
  * Sets spy on the console object's method to make it possible to fail test when method called without assertion.
  *
- * @param {Array}  args
- * @param {string} args."0" Name of console method.
- * @param {string} args."1" Name of Jest matcher.
+ * @param args
  */
-const setConsoleMethodSpy = ( [ methodName, matcherName ] ) => {
+const setConsoleMethodSpy = ( args: [ string, string ] ) => {
+	const [ methodName, matcherName ] = args;
 	const spy = jest
-		.spyOn( console, methodName )
-		.mockName( `console.${ methodName }` );
+		.spyOn( console, methodName as 'error' | 'info' | 'log' | 'warn' )
+		.mockName( `console.${ methodName }` ) as ExtendedMock;
 
 	/**
 	 * Resets the spy to its initial state.
diff --git a/packages/jest-console/src/matchers.js b/packages/jest-console/src/matchers.ts
similarity index 65%
rename from packages/jest-console/src/matchers.js
rename to packages/jest-console/src/matchers.ts
index 9793164f532b32..de25c186128a3b 100644
--- a/packages/jest-console/src/matchers.js
+++ b/packages/jest-console/src/matchers.ts
@@ -7,8 +7,24 @@ import { matcherHint, printExpected, printReceived } from 'jest-matcher-utils';
  * Internal dependencies
  */
 import supportedMatchers from './supported-matchers';
+import type { Mock } from 'jest-mock';
+import type {
+	ExtendedMock,
+	MatcherFunction,
+	MatcherResult,
+	MatcherWithArgsFunction,
+} from './types';
 
-const createErrorMessage = ( spyInfo ) => {
+interface SpyInfo {
+	spy: Mock;
+	pass: boolean;
+	calls: unknown[][];
+	matcherName: string;
+	methodName: string;
+	expected?: unknown[];
+}
+
+const createErrorMessage = ( spyInfo: SpyInfo ) => {
 	const { spy, pass, calls, matcherName, methodName, expected } = spyInfo;
 	const hint = pass ? `.not${ matcherName }` : matcherName;
 	const message = pass
@@ -28,7 +44,12 @@ const createErrorMessage = ( spyInfo ) => {
 		'See https://www.npmjs.com/package/@wordpress/jest-console for details.';
 };
 
-const createSpyInfo = ( spy, matcherName, methodName, expected ) => {
+const createSpyInfo = (
+	spy: Mock,
+	matcherName: string,
+	methodName: string,
+	expected?: unknown[]
+) => {
 	const calls = spy.mock.calls;
 
 	const pass = expected
@@ -51,27 +72,35 @@ const createSpyInfo = ( spy, matcherName, methodName, expected ) => {
 };
 
 const createToHaveBeenCalledMatcher =
-	( matcherName, methodName ) => ( received ) => {
-		const spy = received[ methodName ];
+	( matcherName: string, methodName: string ) =>
+	( received: Record< string, Mock > ): MatcherResult => {
+		const spy = received[ methodName ] as ExtendedMock;
 		const spyInfo = createSpyInfo( spy, matcherName, methodName );
-
 		spy.assertionsNumber += 1;
-
 		return spyInfo;
 	};
 
-const createToHaveBeenCalledWith = ( matcherName, methodName ) =>
-	function ( received, ...expected ) {
-		const spy = received[ methodName ];
+const createToHaveBeenCalledWith = (
+	matcherName: string,
+	methodName: string
+) =>
+	function (
+		received: Record< string, Mock >,
+		...expected: unknown[]
+	): MatcherResult {
+		const spy = received[ methodName ] as ExtendedMock;
 		const spyInfo = createSpyInfo( spy, matcherName, methodName, expected );
-
 		spy.assertionsNumber += 1;
-
 		return spyInfo;
 	};
 
+type MatchersObject = Record<
+	string,
+	MatcherFunction | MatcherWithArgsFunction
+>;
+
 expect.extend(
-	Object.entries( supportedMatchers ).reduce(
+	Object.entries( supportedMatchers ).reduce< MatchersObject >(
 		( result, [ methodName, matcherName ] ) => {
 			const matcherNameWith = `${ matcherName }With`;
 
diff --git a/packages/jest-console/src/supported-matchers.js b/packages/jest-console/src/supported-matchers.ts
similarity index 71%
rename from packages/jest-console/src/supported-matchers.js
rename to packages/jest-console/src/supported-matchers.ts
index 636ad897e00efe..6bff52eb04e49b 100644
--- a/packages/jest-console/src/supported-matchers.js
+++ b/packages/jest-console/src/supported-matchers.ts
@@ -1,4 +1,4 @@
-const supportedMatchers = {
+const supportedMatchers: Record< string, string > = {
 	error: 'toHaveErrored',
 	info: 'toHaveInformed',
 	log: 'toHaveLogged',
diff --git a/packages/jest-console/src/test/index.test.js b/packages/jest-console/src/test/index.test.ts
similarity index 100%
rename from packages/jest-console/src/test/index.test.js
rename to packages/jest-console/src/test/index.test.ts
diff --git a/packages/jest-console/src/types.ts b/packages/jest-console/src/types.ts
new file mode 100644
index 00000000000000..77de3d28e8ca60
--- /dev/null
+++ b/packages/jest-console/src/types.ts
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import type { Mock } from 'jest-mock';
+
+/**
+ * Interface for the extended Jest Mock that includes the assertionsNumber property
+ */
+export interface ExtendedMock extends Mock {
+	assertionsNumber: number;
+}
+
+/**
+ * Interface for the matcher result object
+ */
+export interface MatcherResult {
+	pass: boolean;
+	message: () => string;
+}
+
+/**
+ * Interface for the matcher function
+ */
+export type MatcherFunction = (
+	received: Record< string, Mock >
+) => MatcherResult;
+
+/**
+ * Interface for the matcher function with arguments
+ */
+export type MatcherWithArgsFunction = (
+	received: Record< string, Mock >,
+	...expected: unknown[]
+) => MatcherResult;
diff --git a/packages/jest-console/tsconfig.json b/packages/jest-console/tsconfig.json
new file mode 100644
index 00000000000000..f58ead725263bf
--- /dev/null
+++ b/packages/jest-console/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"files": [ "src/declarations.d.ts" ],
+	"compilerOptions": {
+		"types": [ "jest", "@testing-library/jest-dom" ]
+	}
+}
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index e02f70b04fea9a..bc218504ad2a47 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 12.27.0 (2025-07-23)
+
+## 12.26.0 (2025-06-25)
+
+## 12.25.0 (2025-06-04)
+
+## 12.24.0 (2025-05-22)
+
+## 12.23.0 (2025-05-07)
+
+## 12.22.0 (2025-04-11)
+
 ## 12.21.0 (2025-03-27)
 
 ## 12.20.0 (2025-03-13)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 4a0ef87f1cdcb2..ac8b044e55e94e 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.21.0",
+	"version": "12.27.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 21aecef72afb70..9b260cf840afba 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index 97d0c525f86753..750ea9a20f71be 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index ef9bba44d714ed..6263f3521d28d6 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index ac83cbd0bdb0a8..7e20d52057e892 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index e2977192aee59b..448d8c2f6bda9d 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 691f7ccfbb0848..9b7be5f974b535 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index 1e9fca44bac3d2..4ef3b6eaf60fbb 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/lazy-import/lib/index.js b/packages/lazy-import/lib/index.ts
similarity index 70%
rename from packages/lazy-import/lib/index.js
rename to packages/lazy-import/lib/index.ts
index 46ecbb53b0229d..04446ebd5e230e 100644
--- a/packages/lazy-import/lib/index.js
+++ b/packages/lazy-import/lib/index.ts
@@ -1,27 +1,34 @@
 /**
  * External dependencies
  */
-const npmPackageArg = require( 'npm-package-arg' );
-const semver = require( 'semver' );
-const execa = require( 'execa' );
-const { join } = require( 'path' );
-const { createHash } = require( 'crypto' );
+import npmPackageArg from 'npm-package-arg';
+import semver from 'semver';
+import execa from 'execa';
+import { join } from 'path';
+import { createHash } from 'crypto';
 
 /**
- * @typedef WPLazyImportOptions
- *
- * @property {string}   [localPath] Path to the local directory or file.
- * @property {()=>void} [onInstall] Callback to invoke when install starts.
+ * Options for lazy importing a package.
  */
-
+export interface LazyImportOptions {
+	/**
+	 * Path to the local directory or file.
+	 */
+	localPath?: string;
+	/**
+	 *
+	 * Callback to invoke when install starts.
+	 */
+	onInstall?: () => void;
+}
 /**
  * Returns an md5 hash of the given string.
  *
- * @param {string} text Text for which to generate hash.
+ * @param text Text for which to generate hash.
  *
- * @return {string} md5 hash of string.
+ * @return md5 hash of string.
  */
-function md5( text ) {
+function md5( text: string ): string {
 	return createHash( 'md5' ).update( text ).digest( 'hex' );
 }
 
@@ -29,11 +36,11 @@ function md5( text ) {
  * Given an arg string as would be passed to `npm install`, returns a string to
  * use as the alias name of the package to install locally if needed.
  *
- * @param {string} arg A string that you might pass to `npm install`.
+ * @param arg A string that you might pass to `npm install`.
  *
- * @return {string} Module to use as local package alias.
+ * @return  Module to use as local package alias.
  */
-function getLocalModuleName( arg ) {
+function getLocalModuleName( arg: string ): string {
 	return '@wordpress/lazy-import.' + md5( arg );
 }
 
@@ -41,12 +48,12 @@ function getLocalModuleName( arg ) {
  * Installs npm package by arg name at the given prefix path. Creates the prefix
  * path if it doesn't yet exist.
  *
- * @param {string} arg   Package install arg (name and version specification).
- * @param {string} alias Alias to use for local module name.
+ * @param arg   Package install arg (name and version specification).
+ * @param alias Alias to use for local module name.
  *
- * @return {Promise<void>} Promise resolving once package is installed.
+ * @return  Promise resolving once package is installed.
  */
-async function install( arg, alias ) {
+async function install( arg: string, alias: string ): Promise< void > {
 	await execa( 'npm', [ 'install', '--no-save', alias + '@npm:' + arg ] );
 }
 
@@ -57,13 +64,16 @@ async function install( arg, alias ) {
  * to a temporary directory at `node_modules/.wp-lazy` relative to where the
  * current working directory.
  *
- * @param {string}                       arg       A string that you might pass
- *                                                 to `npm install`.
- * @param {Partial<WPLazyImportOptions>} [options] Optional options object.
+ * @param arg       A string that you might pass
+ *                  to `npm install`.
+ * @param [options] Optional options object.
  *
- * @return {Promise<NodeRequire>} Promise resolving to required module.
+ * @return  Promise resolving to required module.
  */
-async function lazyImport( arg, options = {} ) {
+export async function lazyImport(
+	arg: string,
+	options: Partial< LazyImportOptions > = {}
+): Promise< NodeRequire > {
 	const { localPath = '' } = options;
 	const { rawSpec, name } = npmPackageArg( arg );
 
@@ -138,4 +148,4 @@ async function lazyImport( arg, options = {} ) {
 	return require( join( localModule, localPath ) );
 }
 
-module.exports = lazyImport;
+export default lazyImport;
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index c17d833c787538..6263e687138100 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index a64e745be8743d..892ce8d577ff5d 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index e3f9570c2a2fe9..1602c91981ae6f 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 2e06cb1f0d38e1..500713f6a97bb3 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 336562318b2755..5bd1bde3ca4782 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 95274bf57faba0..29e6e26af4bff9 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 650deab473a7e8..1c30584ccd5e4c 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/src/store/actions.js b/packages/notices/src/store/actions.js
index fb1c4243073511..e78e3059c11f32 100644
--- a/packages/notices/src/store/actions.js
+++ b/packages/notices/src/store/actions.js
@@ -209,7 +209,7 @@ export function createInfoNotice( content, options ) {
  *             }
  *         >
  *             { __(
- *                 'Generate an snackbar error notice with explicit dismiss button.'
+ *                 'Generate a snackbar error notice with explicit dismiss button.'
  *             ) }
  *         </Button>
  *     );
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 1ce4a0ff443328..76eeb645bd3fd4 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index 7c23b6d689f645..24850e89efd4b0 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index e1230ad7ec64a2..cb2bd384944d5a 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 9.27.0 (2025-07-23)
+
+## 9.26.0 (2025-06-25)
+
+## 9.25.0 (2025-06-04)
+
+## 9.24.0 (2025-05-22)
+
+## 9.23.0 (2025-05-07)
+
+## 9.22.0 (2025-04-11)
+
 ## 9.21.0 (2025-03-27)
 
 ## 9.20.0 (2025-03-13)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index eed20c75305c1c..d743fb07315ff0 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.21.0",
+	"version": "9.27.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index bf375fa268605a..325cbaa8acb936 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index a1f9fde7f51e83..ce7c3385900264 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/patterns/src/components/patterns-manage-button.js b/packages/patterns/src/components/patterns-manage-button.js
index f836fe65cf3a40..d154aeae23a469 100644
--- a/packages/patterns/src/components/patterns-manage-button.js
+++ b/packages/patterns/src/components/patterns-manage-button.js
@@ -18,8 +18,7 @@ import { unlock } from '../lock-unlock';
 function PatternsManageButton( { clientId } ) {
 	const { canRemove, isVisible, managePatternsUrl } = useSelect(
 		( select ) => {
-			const { getBlock, canRemoveBlock, getBlockCount } =
-				select( blockEditorStore );
+			const { getBlock, canRemoveBlock } = select( blockEditorStore );
 			const { canUser } = select( coreStore );
 			const reusableBlock = getBlock( clientId );
 
@@ -33,7 +32,6 @@ function PatternsManageButton( { clientId } ) {
 						name: 'wp_block',
 						id: reusableBlock.attributes.ref,
 					} ),
-				innerBlockCount: getBlockCount( clientId ),
 				// The site editor and templates both check whether the user
 				// has edit_theme_options capabilities. We can leverage that here
 				// and omit the manage patterns link if the user can't access it.
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index 189c08139e54a5..0e4e938f6d2fca 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index f618e1872c01de..ae80f850c1e123 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/plugins/src/components/index.js b/packages/plugins/src/components/index.ts
similarity index 100%
rename from packages/plugins/src/components/index.js
rename to packages/plugins/src/components/index.ts
diff --git a/packages/plugins/src/components/plugin-error-boundary/index.js b/packages/plugins/src/components/plugin-error-boundary/index.tsx
similarity index 50%
rename from packages/plugins/src/components/plugin-error-boundary/index.js
rename to packages/plugins/src/components/plugin-error-boundary/index.tsx
index 28798e117f6a77..d3fb60a9a5b81a 100644
--- a/packages/plugins/src/components/plugin-error-boundary/index.js
+++ b/packages/plugins/src/components/plugin-error-boundary/index.tsx
@@ -3,32 +3,34 @@
  */
 import { Component } from '@wordpress/element';
 
-export class PluginErrorBoundary extends Component {
-	/**
-	 * @param {Object} props
-	 */
-	constructor( props ) {
+/**
+ * Internal dependencies
+ */
+import type {
+	PluginErrorBoundaryProps as Props,
+	PluginErrorBoundaryState as State,
+} from '../../types';
+
+export class PluginErrorBoundary extends Component< Props, State > {
+	constructor( props: Props ) {
 		super( props );
 		this.state = {
 			hasError: false,
 		};
 	}
 
-	static getDerivedStateFromError() {
+	static getDerivedStateFromError(): State {
 		return { hasError: true };
 	}
 
-	/**
-	 * @param {Error} error Error object passed by React.
-	 */
-	componentDidCatch( error ) {
+	componentDidCatch( error: Error ): void {
 		const { name, onError } = this.props;
 		if ( onError ) {
 			onError( name, error );
 		}
 	}
 
-	render() {
+	render(): React.ReactNode {
 		if ( ! this.state.hasError ) {
 			return this.props.children;
 		}
diff --git a/packages/plugins/src/index.js b/packages/plugins/src/index.ts
similarity index 100%
rename from packages/plugins/src/index.js
rename to packages/plugins/src/index.ts
diff --git a/packages/plugins/src/types.ts b/packages/plugins/src/types.ts
new file mode 100644
index 00000000000000..fdf8af94f4e9be
--- /dev/null
+++ b/packages/plugins/src/types.ts
@@ -0,0 +1,24 @@
+/**
+ * Props for the PluginErrorBoundary component.
+ */
+export interface PluginErrorBoundaryProps {
+	/**
+	 * The name of the plugin that may encounter an error.
+	 */
+	name: string;
+	/**
+	 * The child components to render.
+	 */
+	children: React.ReactNode;
+	/**
+	 * Callback function called when an error occurs.
+	 */
+	onError?: ( name: string, error: Error ) => void;
+}
+
+/**
+ * State for the PluginErrorBoundary component.
+ */
+export interface PluginErrorBoundaryState {
+	hasError: boolean;
+}
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 08f12c02cdd9ca..1384aba4164a6f 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index 4d74dc05bc98cc..8825986610a7fb 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 7b9575bf570fc5..02bede81d36632 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index a15c6e9347ca01..8b7d498243cae6 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 9e2d2e7d8d361a..6885cfec9122d4 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 8b47f6af1f3102..1e2c5e022cff11 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 8b55ce562a0263..cafc5822c2af32 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 9ea483a097e71b..cad5f73b836316 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/src/components/preferences-modal-section/style.scss b/packages/preferences/src/components/preferences-modal-section/style.scss
index 2f6480dd71dab7..88755a76f81fbc 100644
--- a/packages/preferences/src/components/preferences-modal-section/style.scss
+++ b/packages/preferences/src/components/preferences-modal-section/style.scss
@@ -1,4 +1,8 @@
 .preferences-modal__section {
+	// Reset `fieldset` browser defaults.
+	border: 0;
+	padding: 0;
+
 	margin: 0 0 2.5rem 0;
 
 	&:last-child {
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index afd6a8c12d560b..6fbbfce186699f 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index 4904f0fb324aaf..72d30d87742fcc 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index e8d36bac0da761..3421983fd09cfa 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 2e6b04a7d1ac0b..8fa9042849ce59 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 012615ad0931cc..73454d4d3283e5 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index 7b37222e3413d1..d7f6a359b0748c 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/src/index.js b/packages/priority-queue/src/index.ts
similarity index 73%
rename from packages/priority-queue/src/index.js
rename to packages/priority-queue/src/index.ts
index 505624693ad837..68a3ae27ac0959 100644
--- a/packages/priority-queue/src/index.js
+++ b/packages/priority-queue/src/index.ts
@@ -5,44 +5,43 @@ import requestIdleCallback from './request-idle-callback';
 
 /**
  * Enqueued callback to invoke once idle time permits.
- *
- * @typedef {()=>void} WPPriorityQueueCallback
  */
+export type WPPriorityQueueCallback = VoidFunction;
 
 /**
  * An object used to associate callbacks in a particular context grouping.
- *
- * @typedef {{}} WPPriorityQueueContext
  */
+export type WPPriorityQueueContext = object;
 
 /**
- * Function to add callback to priority queue.
- *
- * @typedef {(element:WPPriorityQueueContext,item:WPPriorityQueueCallback)=>void} WPPriorityQueueAdd
+ * Interface for the priority queue instance.
  */
+export interface WPPriorityQueue {
+	/**
+	 * Add a callback to the queue for a given context.
+	 */
+	add: (
+		element: WPPriorityQueueContext,
+		item: WPPriorityQueueCallback
+	) => void;
 
-/**
- * Function to flush callbacks from priority queue.
- *
- * @typedef {(element:WPPriorityQueueContext)=>boolean} WPPriorityQueueFlush
- */
+	/**
+	 * Flush and run the callback for a given context immediately.
+	 * @return true if a callback was run, false otherwise.
+	 */
+	flush: ( element: WPPriorityQueueContext ) => boolean;
 
-/**
- * Reset the queue.
- *
- * @typedef {()=>void} WPPriorityQueueReset
- */
+	/**
+	 * Cancel (remove) the callback for a given context without running it.
+	 * @return true if a callback was cancelled, false otherwise.
+	 */
+	cancel: ( element: WPPriorityQueueContext ) => boolean;
 
-/**
- * Priority queue instance.
- *
- * @typedef {Object} WPPriorityQueue
- *
- * @property {WPPriorityQueueAdd}   add    Add callback to queue for context.
- * @property {WPPriorityQueueFlush} flush  Flush queue for context.
- * @property {WPPriorityQueueFlush} cancel Clear queue for context.
- * @property {WPPriorityQueueReset} reset  Reset queue.
- */
+	/**
+	 * Reset the entire queue, clearing pending callbacks.
+	 */
+	reset: VoidFunction;
+}
 
 /**
  * Creates a context-aware queue that only executes
@@ -66,9 +65,11 @@ import requestIdleCallback from './request-idle-callback';
  *
  * @return {WPPriorityQueue} Queue object with `add`, `flush` and `reset` methods.
  */
-export const createQueue = () => {
-	/** @type {Map<WPPriorityQueueContext, WPPriorityQueueCallback>} */
-	const waitingList = new Map();
+export const createQueue = (): WPPriorityQueue => {
+	const waitingList = new Map<
+		WPPriorityQueueContext,
+		WPPriorityQueueCallback
+	>();
 	let isRunning = false;
 
 	/**
@@ -87,7 +88,7 @@ export const createQueue = () => {
 	 * @param {IdleDeadline|number} deadline Idle callback deadline object, or
 	 *                                       animation frame timestamp.
 	 */
-	const runWaitingList = ( deadline ) => {
+	const runWaitingList = ( deadline: IdleDeadline | number ): void => {
 		for ( const [ nextElement, callback ] of waitingList ) {
 			waitingList.delete( nextElement );
 			callback();
@@ -116,12 +117,13 @@ export const createQueue = () => {
 	 * in their second parameter. Missing dependencies can cause unexpected
 	 * loops and race conditions in the queue.
 	 *
-	 * @type {WPPriorityQueueAdd}
-	 *
 	 * @param {WPPriorityQueueContext}  element Context object.
 	 * @param {WPPriorityQueueCallback} item    Callback function.
 	 */
-	const add = ( element, item ) => {
+	const add: WPPriorityQueue[ 'add' ] = (
+		element: WPPriorityQueueContext,
+		item: WPPriorityQueueCallback
+	) => {
 		waitingList.set( element, item );
 		if ( ! isRunning ) {
 			isRunning = true;
@@ -133,13 +135,13 @@ export const createQueue = () => {
 	 * Flushes queue for a given context, returning true if the flush was
 	 * performed, or false if there is no queue for the given context.
 	 *
-	 * @type {WPPriorityQueueFlush}
-	 *
 	 * @param {WPPriorityQueueContext} element Context object.
 	 *
 	 * @return {boolean} Whether flush was performed.
 	 */
-	const flush = ( element ) => {
+	const flush: WPPriorityQueue[ 'flush' ] = (
+		element: WPPriorityQueueContext
+	) => {
 		const callback = waitingList.get( element );
 		if ( undefined === callback ) {
 			return false;
@@ -156,22 +158,20 @@ export const createQueue = () => {
 	 * executing them. Returns `true` if there were scheduled callbacks to cancel,
 	 * or `false` if there was is no queue for the given context.
 	 *
-	 * @type {WPPriorityQueueFlush}
-	 *
 	 * @param {WPPriorityQueueContext} element Context object.
 	 *
 	 * @return {boolean} Whether any callbacks got cancelled.
 	 */
-	const cancel = ( element ) => {
+	const cancel: WPPriorityQueue[ 'cancel' ] = (
+		element: WPPriorityQueueContext
+	) => {
 		return waitingList.delete( element );
 	};
 
 	/**
 	 * Reset the queue without running the pending callbacks.
-	 *
-	 * @type {WPPriorityQueueReset}
 	 */
-	const reset = () => {
+	const reset: WPPriorityQueue[ 'reset' ] = () => {
 		waitingList.clear();
 		isRunning = false;
 	};
diff --git a/packages/priority-queue/src/request-idle-callback.js b/packages/priority-queue/src/request-idle-callback.ts
similarity index 55%
rename from packages/priority-queue/src/request-idle-callback.js
rename to packages/priority-queue/src/request-idle-callback.ts
index 0051ec737ed11a..a3af6fff1de0fe 100644
--- a/packages/priority-queue/src/request-idle-callback.js
+++ b/packages/priority-queue/src/request-idle-callback.ts
@@ -4,15 +4,16 @@
 import 'requestidlecallback';
 
 /**
- * @typedef {( timeOrDeadline: IdleDeadline | number ) => void} Callback
+ * Internal dependencies
  */
+import type { RequestIdleCallbackCallback } from './types';
 
 /**
- * @return {(callback: Callback) => void} RequestIdleCallback
+ * @return A function that schedules a callback when the browser is idle or via setTimeout on the server.
  */
 export function createRequestIdleCallback() {
 	if ( typeof window === 'undefined' ) {
-		return ( callback ) => {
+		return ( callback: RequestIdleCallbackCallback ) => {
 			setTimeout( () => callback( Date.now() ), 0 );
 		};
 	}
diff --git a/packages/priority-queue/src/test/index.js b/packages/priority-queue/src/test/index.ts
similarity index 95%
rename from packages/priority-queue/src/test/index.js
rename to packages/priority-queue/src/test/index.ts
index e5493953668034..b20148cb53fc2d 100644
--- a/packages/priority-queue/src/test/index.js
+++ b/packages/priority-queue/src/test/index.ts
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import { createQueue } from '../';
-import requestIdleCallback from '../request-idle-callback';
+import _requestIdleCallback from '../request-idle-callback';
+
+const requestIdleCallback =
+	_requestIdleCallback as typeof _requestIdleCallback & {
+		tick: ( deadline?: Partial< IdleDeadline > | number ) => void;
+	};
 
 jest.mock( '../request-idle-callback', () => {
 	const emitter = new ( jest.requireActual( 'events' ).EventEmitter )();
@@ -17,7 +22,7 @@ jest.mock( '../request-idle-callback', () => {
 } );
 
 describe( 'createQueue', () => {
-	let queue;
+	let queue: ReturnType< typeof createQueue >;
 	beforeEach( () => {
 		queue = createQueue();
 	} );
diff --git a/packages/priority-queue/src/types.ts b/packages/priority-queue/src/types.ts
new file mode 100644
index 00000000000000..d34095f913f4c7
--- /dev/null
+++ b/packages/priority-queue/src/types.ts
@@ -0,0 +1,6 @@
+export type RequestIdleCallbackCallback = (
+	/**
+	 * @param timeOrDeadline - IdleDeadline object or a timestamp number.
+	 */
+	timeOrDeadline: IdleDeadline | number
+) => void;
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index bafbb76b8ff5a3..a88da8501f5b4b 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index f25ee0aecb8f2f..54ce81f4eeb5bb 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index f608a4fb02c34d..11caaa029c1486 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index e522a05a13bf4b..b74ef54bc54492 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index 35d8dcf30658fe..544f78cf24eda9 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 81b176cd47bfa8..a087a802252d84 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index f154ffbf33935b..271948bed54dae 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index f6721a500d65b6..2a42a5bf39036f 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index 2c87b225c898ed..c98948f7509051 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/redux-routine/README.md b/packages/redux-routine/README.md
index a79196fb2dc906..f10c09e5a966b9 100644
--- a/packages/redux-routine/README.md
+++ b/packages/redux-routine/README.md
@@ -65,11 +65,11 @@ Creates a Redux middleware, given an object of controls where each key is an act
 
 _Parameters_
 
--   _controls_ `Record<string, (value: import('redux').AnyAction) => Promise<boolean> | boolean>`: Object of control handlers.
+-   _controls_ `Record< string, ( value: AnyAction ) => Promise< boolean > | boolean >`: Object of control handlers.
 
 _Returns_
 
--   `import('redux').Middleware`: Co-routine runtime
+-   `Middleware`: Co-routine runtime
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index b2eb849abb05b7..9a7afb9b015bf7 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/src/index.js b/packages/redux-routine/src/index.ts
similarity index 71%
rename from packages/redux-routine/src/index.js
rename to packages/redux-routine/src/index.ts
index cd7101a61d99bf..f53148b1bbe88f 100644
--- a/packages/redux-routine/src/index.js
+++ b/packages/redux-routine/src/index.ts
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { Middleware, AnyAction } from 'redux';
+
 /**
  * Internal dependencies
  */
@@ -12,11 +17,16 @@ import createRuntime from './runtime';
  * value of the yield assignment. If the control handler returns undefined, the
  * execution is not continued.
  *
- * @param {Record<string, (value: import('redux').AnyAction) => Promise<boolean> | boolean>} controls Object of control handlers.
+ * @param controls Object of control handlers.
  *
- * @return {import('redux').Middleware} Co-routine runtime
+ * @return Co-routine runtime
  */
-export default function createMiddleware( controls = {} ) {
+export default function createMiddleware(
+	controls: Record<
+		string,
+		( value: AnyAction ) => Promise< boolean > | boolean
+	> = {}
+): Middleware {
 	return ( store ) => {
 		const runtime = createRuntime( controls, store.dispatch );
 		return ( next ) => ( action ) => {
diff --git a/packages/redux-routine/src/is-action.js b/packages/redux-routine/src/is-action.js
deleted file mode 100644
index c7a642f72edb27..00000000000000
--- a/packages/redux-routine/src/is-action.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { isPlainObject } from 'is-plain-object';
-
-/* eslint-disable jsdoc/valid-types */
-/**
- * Returns true if the given object quacks like an action.
- *
- * @param {any} object Object to test
- *
- * @return {object is import('redux').AnyAction}  Whether object is an action.
- */
-export function isAction( object ) {
-	return isPlainObject( object ) && typeof object.type === 'string';
-}
-
-/**
- * Returns true if the given object quacks like an action and has a specific
- * action type
- *
- * @param {unknown} object       Object to test
- * @param {string}  expectedType The expected type for the action.
- *
- * @return {object is import('redux').AnyAction} Whether object is an action and is of specific type.
- */
-export function isActionOfType( object, expectedType ) {
-	/* eslint-enable jsdoc/valid-types */
-	return isAction( object ) && object.type === expectedType;
-}
diff --git a/packages/redux-routine/src/is-action.ts b/packages/redux-routine/src/is-action.ts
new file mode 100644
index 00000000000000..b231c0e0b89c3c
--- /dev/null
+++ b/packages/redux-routine/src/is-action.ts
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { isPlainObject } from 'is-plain-object';
+import type { Action } from 'redux';
+
+/**
+ * Returns true if the given object quacks like an action.
+ *
+ * @param object Object to test
+ *
+ * @return Whether object is an action.
+ */
+export function isAction( object: unknown ): object is Action {
+	return isPlainObject( object ) && typeof object.type === 'string';
+}
+
+/**
+ * Returns true if the given object quacks like an action and has a specific
+ * action type
+ *
+ * @param object       Object to test
+ * @param expectedType The expected type for the action.
+ *
+ * @return Whether object is an action and is of specific type.
+ */
+export function isActionOfType(
+	object: unknown,
+	expectedType: string
+): object is Action {
+	return isAction( object ) && object.type === expectedType;
+}
diff --git a/packages/redux-routine/src/is-generator.js b/packages/redux-routine/src/is-generator.ts
similarity index 67%
rename from packages/redux-routine/src/is-generator.js
rename to packages/redux-routine/src/is-generator.ts
index 414fc3f9dc17c3..28b9b66614deb8 100644
--- a/packages/redux-routine/src/is-generator.js
+++ b/packages/redux-routine/src/is-generator.ts
@@ -1,15 +1,13 @@
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns true if the given object is a generator, or false otherwise.
  *
  * @see https://www.ecma-international.org/ecma-262/6.0/#sec-generator-objects
  *
- * @param {any} object Object to test.
+ * @param object Object to test.
  *
- * @return {object is Generator} Whether object is a generator.
+ * @return Whether object is a generator.
  */
-export default function isGenerator( object ) {
-	/* eslint-enable jsdoc/valid-types */
+export default function isGenerator( object: any ): object is Generator {
 	// Check that iterator (next) and iterable (Symbol.iterator) interfaces are satisfied.
 	// These checks seem to be compatible with several generator helpers as well as the native implementation.
 	return (
diff --git a/packages/redux-routine/src/types.ts b/packages/redux-routine/src/types.ts
new file mode 100644
index 00000000000000..c115fb5e1667fe
--- /dev/null
+++ b/packages/redux-routine/src/types.ts
@@ -0,0 +1,11 @@
+/**
+ * Add type guard for isPlainObject until the below PR gets merged:
+ *
+ * @see https://github.com/jonschlinkert/is-plain-object/pull/29
+ */
+
+declare module 'is-plain-object' {
+	export function isPlainObject(
+		value: unknown
+	): value is Record< PropertyKey, unknown >;
+}
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 83503d3807272f..e3023d00f1fe43 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 5.27.0 (2025-07-23)
+
+## 5.26.0 (2025-06-25)
+
+## 5.25.0 (2025-06-04)
+
+## 5.24.0 (2025-05-22)
+
+## 5.23.0 (2025-05-07)
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 954d60b3b2e125..612a9e66ac90a4 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.21.0",
+	"version": "5.27.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
index 76d6bcc31598ba..dcb14b74daa998 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-blocks-manage-button.js
@@ -17,8 +17,7 @@ import { store as reusableBlocksStore } from '../../store';
 function ReusableBlocksManageButton( { clientId } ) {
 	const { canRemove, isVisible, managePatternsUrl } = useSelect(
 		( select ) => {
-			const { getBlock, canRemoveBlock, getBlockCount } =
-				select( blockEditorStore );
+			const { getBlock, canRemoveBlock } = select( blockEditorStore );
 			const { canUser } = select( coreStore );
 			const reusableBlock = getBlock( clientId );
 
@@ -32,7 +31,6 @@ function ReusableBlocksManageButton( { clientId } ) {
 						name: 'wp_block',
 						id: reusableBlock.attributes.ref,
 					} ),
-				innerBlockCount: getBlockCount( clientId ),
 				// The site editor and templates both check whether the user
 				// has edit_theme_options capabilities. We can leverage that here
 				// and omit the manage patterns link if the user can't access it.
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index f321eaab83ca42..dd6303fed523f0 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 7.27.0 (2025-07-23)
+
+## 7.26.0 (2025-06-25)
+
+## 7.25.0 (2025-06-04)
+
+## 7.24.0 (2025-05-22)
+
+## 7.23.0 (2025-05-07)
+
+## 7.22.0 (2025-04-11)
+
 ## 7.21.0 (2025-03-27)
 
 ## 7.20.0 (2025-03-13)
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index 44f6fb059cb963..d4a953042a2ac6 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.21.0",
+	"version": "7.27.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,6 +41,7 @@
 		"@wordpress/escape-html": "file:../escape-html",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/keycodes": "file:../keycodes",
+		"colord": "2.9.3",
 		"memize": "^2.1.0"
 	},
 	"peerDependencies": {
diff --git a/packages/rich-text/src/component/use-boundary-style.js b/packages/rich-text/src/component/use-boundary-style.js
index 9f29b24e3ecc6b..dd5b930b168af6 100644
--- a/packages/rich-text/src/component/use-boundary-style.js
+++ b/packages/rich-text/src/component/use-boundary-style.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+
 /**
  * WordPress dependencies
  */
@@ -31,9 +36,9 @@ export function useBoundaryStyle( { record } ) {
 		const { ownerDocument } = element;
 		const { defaultView } = ownerDocument;
 		const computedStyle = defaultView.getComputedStyle( element );
-		const newColor = computedStyle.color
-			.replace( ')', ', 0.2)' )
-			.replace( 'rgb', 'rgba' );
+		const newColor = colord( computedStyle.color )
+			.alpha( 0.2 )
+			.toRgbString();
 		const selector = `.rich-text:focus ${ boundarySelector }`;
 		const rule = `background-color: ${ newColor }`;
 		const style = `${ selector } {${ rule }}`;
diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js
index c8aa45f022154c..d9e635c6799ad9 100644
--- a/packages/rich-text/src/register-format-type.js
+++ b/packages/rich-text/src/register-format-type.js
@@ -14,6 +14,8 @@ import { store as richTextStore } from './store';
  * @property {string}        tagName     The HTML tag this format will wrap the
  *                                       selection with.
  * @property {boolean}       interactive Whether format makes content interactive or not.
+ * @property {boolean}       object      Whether the format represents an object (e.g., `img`, `br`),
+ *                                       an object cannot contain other format types.
  * @property {string | null} [className] A class to match the format.
  * @property {string}        title       Name of the format.
  * @property {Function}      edit        Should return a component for the user to
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index 49e90e3be73231..34d14aac05250a 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/router/package.json b/packages/router/package.json
index ddeffb6241881f..6f16b3325490ec 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 9535e4dab6e390..1ba00da80f189a 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,25 @@
 
 ## Unreleased
 
+## 30.20.0 (2025-07-23)
+
+## 30.19.0 (2025-06-25)
+
+## 30.18.0 (2025-06-04)
+
+## 30.17.0 (2025-05-22)
+
+## 30.16.0 (2025-05-07)
+
+## 30.15.0 (2025-04-11)
+
+## 30.14.1 (2025-04-01)
+
+### Bug Fixes
+
+-   Fix: `--blocks-manifest` CLI flag doesn't work when the directory name has space ([#69766](https://github.com/WordPress/gutenberg/pull/69766)).
+
+
 ## 30.14.0 (2025-03-27)
 
 ### New Features
diff --git a/packages/scripts/config/playwright.config.js b/packages/scripts/config/playwright.config.js
index 03ccbb848554b2..531f03c2b904ec 100644
--- a/packages/scripts/config/playwright.config.js
+++ b/packages/scripts/config/playwright.config.js
@@ -10,6 +10,8 @@ process.env.STORAGE_STATE_PATH ??= path.join(
 	'storage-states/admin.json'
 );
 
+const baseUrl = new URL( process.env.WP_BASE_URL || 'http://localhost:8889' );
+
 const config = defineConfig( {
 	reporter: process.env.CI ? [ [ 'github' ] ] : [ [ 'list' ] ],
 	forbidOnly: !! process.env.CI,
@@ -25,7 +27,7 @@ const config = defineConfig( {
 		'{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}',
 	globalSetup: require.resolve( './playwright/global-setup.js' ),
 	use: {
-		baseURL: process.env.WP_BASE_URL || 'http://localhost:8889',
+		baseURL: baseUrl.href,
 		headless: true,
 		viewport: {
 			width: 960,
@@ -45,7 +47,7 @@ const config = defineConfig( {
 	},
 	webServer: {
 		command: 'npm run wp-env start',
-		port: 8889,
+		port: baseUrl.port,
 		timeout: 120_000, // 120 seconds.
 		reuseExistingServer: true,
 	},
diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js
index fc7592a5eaf585..74ce5e0553e217 100644
--- a/packages/scripts/config/webpack.config.js
+++ b/packages/scripts/config/webpack.config.js
@@ -275,9 +275,9 @@ class BlocksManifestPlugin {
 	apply( compiler ) {
 		compiler.hooks.afterEmit.tap( 'BlocksManifest', () => {
 			exec(
-				`node ${ fromScriptsRoot(
+				`node "${ fromScriptsRoot(
 					'build-blocks-manifest'
-				) } --input="${ compiler.options.output.path }"`
+				) }" --input="${ compiler.options.output.path }"`
 			);
 		} );
 	}
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index c8e8af3968cef7..f94aac94619ee3 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "30.14.0",
+	"version": "30.20.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -96,9 +96,15 @@
 	},
 	"peerDependencies": {
 		"@playwright/test": "^1.51.1",
+		"@wordpress/env": "^10.0.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@wordpress/env": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/packages/scripts/scripts/test-playwright.js b/packages/scripts/scripts/test-playwright.js
index 9657ef23bdfe70..c0f1ac6783633d 100644
--- a/packages/scripts/scripts/test-playwright.js
+++ b/packages/scripts/scripts/test-playwright.js
@@ -14,6 +14,7 @@ process.on( 'unhandledRejection', ( err ) => {
  */
 const { resolve } = require( 'node:path' );
 const { sync: spawn } = require( 'cross-spawn' );
+const path = require( 'path' );
 
 /**
  * Internal dependencies
@@ -26,6 +27,26 @@ const {
 	getAsBooleanFromENV,
 } = require( '../utils' );
 
+/**
+ * @typedef {import('../../env/lib/config/load-config').WPConfig} WPConfig
+ */
+
+/**
+ * Loads any configuration from a given directory.
+ *
+ * @type {(configDirectoryPath: string) => Promise<WPConfig> | null}
+ */
+let loadConfig = null;
+
+try {
+	// First, try to load the package installed from among the optional peerDependencies.
+	loadConfig = require( '@wordpress/env/lib/config/load-config' );
+} catch ( error ) {
+	window.console.log(
+		'Notice: Could not find @wordpress/env package. Using WP_BASE_URL environment variable or else the default http://localhost:8889 URL for tests.'
+	);
+}
+
 if ( ! getAsBooleanFromENV( 'PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD' ) ) {
 	const result = spawn( 'npx', [ 'playwright', 'install' ], {
 		stdio: 'inherit',
@@ -51,19 +72,32 @@ if ( ! process.env.WP_ARTIFACTS_PATH ) {
 	);
 }
 
-const testResult = spawn(
-	'node',
-	[
-		require.resolve( '@playwright/test/cli' ),
-		'test',
-		...config,
-		...getArgsFromCLI(),
-	],
-	{
-		stdio: 'inherit',
+function spawnProcess() {
+	const testResult = spawn(
+		'node',
+		[
+			require.resolve( '@playwright/test/cli' ),
+			'test',
+			...config,
+			...getArgsFromCLI(),
+		],
+		{
+			stdio: 'inherit',
+		}
+	);
+
+	if ( testResult.status > 0 ) {
+		process.exit( testResult.status );
 	}
-);
+}
 
-if ( testResult.status > 0 ) {
-	process.exit( testResult.status );
+if ( loadConfig ) {
+	loadConfig( path.resolve( '.' ) ).then( ( envConfig ) => {
+		if ( ! process.env.WP_BASE_URL && envConfig?.env?.tests?.port ) {
+			process.env.WP_BASE_URL = `http://localhost:${ envConfig.env.tests.port }`;
+		}
+		spawnProcess();
+	} );
+} else {
+	spawnProcess();
 }
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index f8a9258af8de86..03673f5ac7aac6 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,26 @@
 
 ## Unreleased
 
+## 6.3.0 (2025-07-23)
+
+## 6.2.0 (2025-06-25)
+
+## 6.1.0 (2025-06-04)
+
+## 6.0.0 (2025-05-22)
+
+### Breaking Changes
+
+-   The `LoadingResponsePlaceholder` prop will no longer receive `showLoader`. The spinner rendering logic is now located in the same component ([#70147](https://github.com/WordPress/gutenberg/pull/70147)).
+
+## 5.23.0 (2025-05-07)
+
+### Bug Fixes
+
+-   Fix `ServerSideRender` not updating when attributes change by properly implementing debounced fetch with refs ([#69237](https://github.com/WordPress/gutenberg/pull/69237)).
+
+## 5.22.0 (2025-04-11)
+
 ## 5.21.0 (2025-03-27)
 
 ## 5.20.0 (2025-03-13)
diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md
index ba6fae302ca0a8..6d0deb08697e2b 100644
--- a/packages/server-side-render/README.md
+++ b/packages/server-side-render/README.md
@@ -52,31 +52,12 @@ Examples: "my-custom-server-side-rendered".
 
 ### httpMethod
 
-The HTTP request method to use, either 'GET' or 'POST'. It's 'GET' by default. The 'POST' value will cause an error on WP earlier than 5.5, unless 'rest_endpoints' is filtered in PHP to allow this. If 'POST', this sends the attributes in the request body, not in the URL. This can allow a bigger attributes object.
+The HTTP request method to use is either `GET` or `POST`, with `GET` as the default. When using `POST`, attributes are sent in the request body rather than the URL, allowing for a larger attributes object.
 
 -   Type: `String`
 -   Required: No
 -   Default: 'GET'
 
-#### Example:
-
-```php
-function add_rest_method( $endpoints ) {
-    if ( is_wp_version_compatible( '5.5' ) ) {
-        return $endpoints;
-    }
-
-    foreach ( $endpoints as $route => $handler ) {
-        if ( isset( $endpoints[ $route ][0] ) ) {
-            $endpoints[ $route ][0]['methods'] = [ WP_REST_Server::READABLE, WP_REST_Server::CREATABLE ];
-        }
-    }
-
-    return $endpoints;
-}
-add_filter( 'rest_endpoints', 'add_rest_method');
-```
-
 ### skipBlockSupportAttributes
 
 Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `__experimentalSkipSerialization`, all attributes and style properties are removed.
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 9c41202c87d045..39099c8d5e395c 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.21.0",
+	"version": "6.3.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/src/index.js b/packages/server-side-render/src/index.js
index 6dcdc31f461091..5d90709bea2f13 100644
--- a/packages/server-side-render/src/index.js
+++ b/packages/server-side-render/src/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,25 +14,23 @@ import ServerSideRender from './server-side-render';
  */
 const EMPTY_OBJECT = {};
 
-const ExportedServerSideRender = withSelect( ( select ) => {
-	// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
-	// It is used by blocks that can be loaded into a *non-post* block editor.
-	// eslint-disable-next-line @wordpress/data-no-store-string-literals
-	const coreEditorSelect = select( 'core/editor' );
-	if ( coreEditorSelect ) {
-		const currentPostId = coreEditorSelect.getCurrentPostId();
+export default function ExportedServerSideRender( {
+	urlQueryArgs = EMPTY_OBJECT,
+	...props
+} ) {
+	const currentPostId = useSelect( ( select ) => {
+		// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.
+		// It is used by blocks that can be loaded into a *non-post* block editor.
+		// eslint-disable-next-line @wordpress/data-no-store-string-literals
+		const postId = select( 'core/editor' )?.getCurrentPostId();
+
 		// For templates and template parts we use a custom ID format.
 		// Since they aren't real posts, we don't want to use their ID
 		// for server-side rendering. Since they use a string based ID,
 		// we can assume real post IDs are numbers.
-		if ( currentPostId && typeof currentPostId === 'number' ) {
-			return {
-				currentPostId,
-			};
-		}
-	}
-	return EMPTY_OBJECT;
-} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {
+		return postId && typeof postId === 'number' ? postId : null;
+	}, [] );
+
 	const newUrlQueryArgs = useMemo( () => {
 		if ( ! currentPostId ) {
 			return urlQueryArgs;
@@ -44,6 +42,4 @@ const ExportedServerSideRender = withSelect( ( select ) => {
 	}, [ currentPostId, urlQueryArgs ] );
 
 	return <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;
-} );
-
-export default ExportedServerSideRender;
+}
diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js
index 45a651e8cced6c..31598bc3ff2e6a 100644
--- a/packages/server-side-render/src/server-side-render.js
+++ b/packages/server-side-render/src/server-side-render.js
@@ -7,7 +7,14 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useDebounce, usePrevious } from '@wordpress/compose';
-import { RawHTML, useEffect, useRef, useState } from '@wordpress/element';
+import {
+	RawHTML,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -62,7 +69,17 @@ function DefaultErrorResponsePlaceholder( { response, className } ) {
 	return <Placeholder className={ className }>{ errorMessage }</Placeholder>;
 }
 
-function DefaultLoadingResponsePlaceholder( { children, showLoader } ) {
+function DefaultLoadingResponsePlaceholder( { children } ) {
+	const [ showLoader, setShowLoader ] = useState( false );
+
+	useEffect( () => {
+		// Schedule showing the Spinner after 1 second.
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, 1000 );
+		return () => clearTimeout( timeout );
+	}, [] );
+
 	return (
 		<div style={ { position: 'relative' } }>
 			{ showLoader && (
@@ -87,35 +104,37 @@ function DefaultLoadingResponsePlaceholder( { children, showLoader } ) {
 
 export default function ServerSideRender( props ) {
 	const {
-		attributes,
-		block,
 		className,
-		httpMethod = 'GET',
-		urlQueryArgs,
-		skipBlockSupportAttributes = false,
 		EmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,
 		ErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,
 		LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,
 	} = props;
 
 	const isMountedRef = useRef( false );
-	const [ showLoader, setShowLoader ] = useState( false );
 	const fetchRequestRef = useRef();
 	const [ response, setResponse ] = useState( null );
 	const prevProps = usePrevious( props );
 	const [ isLoading, setIsLoading ] = useState( false );
+	const latestPropsRef = useRef( props );
 
-	function fetchData() {
+	useLayoutEffect( () => {
+		latestPropsRef.current = props;
+	}, [ props ] );
+
+	const fetchData = useCallback( () => {
 		if ( ! isMountedRef.current ) {
 			return;
 		}
 
-		setIsLoading( true );
+		const {
+			attributes,
+			block,
+			skipBlockSupportAttributes = false,
+			httpMethod = 'GET',
+			urlQueryArgs,
+		} = latestPropsRef.current;
 
-		// Schedule showing the Spinner after 1 second.
-		const timeout = setTimeout( () => {
-			setShowLoader( true );
-		}, 1000 );
+		setIsLoading( true );
 
 		let sanitizedAttributes =
 			attributes &&
@@ -170,14 +189,11 @@ export default function ServerSideRender( props ) {
 					fetchRequest === fetchRequestRef.current
 				) {
 					setIsLoading( false );
-					// Cancel the timeout to show the Spinner.
-					setShowLoader( false );
-					clearTimeout( timeout );
 				}
 			} ) );
 
 		return fetchRequest;
-	}
+	}, [] );
 
 	const debouncedFetchData = useDebounce( fetchData, 500 );
 
@@ -202,12 +218,12 @@ export default function ServerSideRender( props ) {
 
 	const hasResponse = !! response;
 	const hasEmptyResponse = response === '';
-	const hasError = response?.error;
+	const hasError = !! response?.error;
 
 	if ( isLoading ) {
 		return (
-			<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>
-				{ hasResponse && (
+			<LoadingResponsePlaceholder { ...props }>
+				{ hasResponse && ! hasError && (
 					<RawHTML className={ className }>{ response }</RawHTML>
 				) }
 			</LoadingResponsePlaceholder>
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index b64937a92d9d48..6c82462c20c7f9 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 2f18dfbce46bc4..5f2dee49f0c263 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 80b4370673b90d..c48964c81b6a85 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 2.27.0 (2025-07-23)
+
+## 2.26.0 (2025-06-25)
+
+## 2.25.0 (2025-06-04)
+
+## 2.24.0 (2025-05-22)
+
+## 2.23.0 (2025-05-07)
+
+## 2.22.0 (2025-04-11)
+
 ## 2.21.0 (2025-03-27)
 
 ## 2.20.0 (2025-03-13)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 52e31157147ec9..846cc65e47a0f5 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.21.0",
+	"version": "2.27.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 74a18d2c2a6e45..e50bc487b1db50 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -98,7 +98,7 @@ export function generateBoxRules(
 		rules.push( {
 			selector: options?.selector,
 			key: ruleKeys.default,
-			value: boxStyle,
+			value: getCSSValueFromRawStyle( boxStyle ),
 		} );
 	} else {
 		const sideRules = individualProperties.reduce(
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index db255f59504b36..cf5c924603dd80 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 23.19.0 (2025-07-23)
+
+## 23.18.0 (2025-06-25)
+
+## 23.17.0 (2025-06-04)
+
+## 23.16.0 (2025-05-22)
+
+## 23.15.0 (2025-05-07)
+
+## 23.14.0 (2025-04-11)
+
 ## 23.13.0 (2025-03-27)
 
 ## 23.12.0 (2025-03-13)
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index aa1e5ab5e62d3c..41e3a5af344ca8 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "23.13.0",
+	"version": "23.19.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
@@ -39,7 +39,8 @@
 		"stylelint-config-recommended-scss": "^14.1.0"
 	},
 	"peerDependencies": {
-		"stylelint": "^16.8.2"
+		"stylelint": "^16.8.2",
+		"stylelint-scss": "^6.4.0"
 	},
 	"npmpackagejsonlint": {
 		"extends": "@wordpress/npm-package-json-lint-config",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index 755e663cf3442f..c122acbcbd797e 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index 992a440a8efd81..772979b2907c37 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index 4ade6c10f7390f..da68dd068deb4c 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 916c8224a33761..f64a0bc8a5a796 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index 7d0e59659cf14f..45f026c58b8262 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 1.27.0 (2025-07-23)
+
+## 1.26.0 (2025-06-25)
+
+## 1.25.0 (2025-06-04)
+
+## 1.24.0 (2025-05-22)
+
+## 1.23.0 (2025-05-07)
+
+## 1.22.0 (2025-04-11)
+
 ## 1.21.0 (2025-03-27)
 
 ## 1.20.0 (2025-03-13)
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 205edeb717af78..320acf6fc1e018 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.21.0",
+	"version": "1.27.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/upload-media/CHANGELOG.md b/packages/upload-media/CHANGELOG.md
index 246100c8427a20..5b95694b8ab093 100644
--- a/packages/upload-media/CHANGELOG.md
+++ b/packages/upload-media/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 0.12.0 (2025-07-23)
+
+## 0.11.0 (2025-06-25)
+
+## 0.10.0 (2025-06-04)
+
+## 0.9.0 (2025-05-22)
+
+## 0.8.0 (2025-05-07)
+
+## 0.7.0 (2025-04-11)
+
 ## 0.6.0 (2025-03-27)
 
 ## 0.5.0 (2025-03-13)
diff --git a/packages/upload-media/package.json b/packages/upload-media/package.json
index f8abb82a00e360..4505cf9a250647 100644
--- a/packages/upload-media/package.json
+++ b/packages/upload-media/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/upload-media",
-	"version": "0.6.0",
+	"version": "0.12.0",
 	"description": "Core media upload logic.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,7 +28,6 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@shopify/web-worker": "^6.4.0",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/blob": "file:../blob",
 		"@wordpress/compose": "file:../compose",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index 8d2e198e075b01..b21be08cab5ddc 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/url/README.md b/packages/url/README.md
index 0e4628669d11f2..86159b22c20343 100644
--- a/packages/url/README.md
+++ b/packages/url/README.md
@@ -28,8 +28,8 @@ const newURL = addQueryArgs( 'https://google.com', { q: 'test' } ); // https://g
 
 _Parameters_
 
--   _url_ `[string]`: URL to which arguments should be appended. If omitted, only the resulting querystring is returned.
--   _args_ `[Object]`: Query arguments to apply to URL.
+-   _url_ `string`: URL to which arguments should be appended. If omitted, only the resulting querystring is returned.
+-   _args_ `Record< string, unknown >`: Query arguments to apply to URL.
 
 _Returns_
 
@@ -58,7 +58,7 @@ const queryString = buildQueryString( {
 
 _Parameters_
 
--   _data_ `Record<string,*>`: Data to encode.
+-   _data_ `Record< string, unknown >`: Data to encode.
 
 _Returns_
 
@@ -68,7 +68,7 @@ _Returns_
 
 Performs some basic cleanup of a string for use as a post slug.
 
-This replicates some of what `sanitize_title()` does in WordPress core, but is only designed to approximate what the slug will be.
+This replicates some of what `sanitize_title_with_dashes()` does in WordPress core, but is only designed to approximate what the slug will be.
 
 Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin letters. Removes combining diacritical marks. Converts whitespace, periods, and forward slashes to hyphens. Removes any remaining non-word characters except hyphens. Converts remaining string to lowercase. It does not account for octets, HTML entities, or other encoded characters.
 
@@ -99,7 +99,7 @@ const imageUrl = filterURLForDisplay(
 _Parameters_
 
 -   _url_ `string`: Original URL.
--   _maxLength_ `number|null`: URL length.
+-   _maxLength_ `number | null`: URL length.
 
 _Returns_
 
@@ -122,7 +122,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The authority part of the URL.
+-   `string | void`: The authority part of the URL.
 
 ### getFilename
 
@@ -141,7 +141,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The filename part of the URL.
+-   `string | void`: The filename part of the URL.
 
 ### getFragment
 
@@ -164,7 +164,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The fragment part of the URL.
+-   `string | void`: The fragment part of the URL.
 
 ### getPath
 
@@ -183,7 +183,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The path part of the URL.
+-   `string | void`: The path part of the URL.
 
 ### getPathAndQueryString
 
@@ -225,7 +225,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The protocol part of the URL.
+-   `string | void`: The protocol part of the URL.
 
 ### getQueryArg
 
@@ -244,7 +244,7 @@ _Parameters_
 
 _Returns_
 
--   `QueryArgParsed|void`: Query arg value.
+-   `QueryArgParsed | undefined`: Query arg value.
 
 ### getQueryArgs
 
@@ -283,7 +283,7 @@ _Parameters_
 
 _Returns_
 
--   `string|void`: The query string part of the URL.
+-   `string | void`: The query string part of the URL.
 
 ### hasQueryArg
 
@@ -525,7 +525,7 @@ const newUrl = removeQueryArgs(
 _Parameters_
 
 -   _url_ `string`: URL.
--   _args_ `...string`: Query Args.
+-   _args_ `string[]`: Query Args.
 
 _Returns_
 
diff --git a/packages/url/package.json b/packages/url/package.json
index 2f0bb604623e28..b16ad17fa358de 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/src/add-query-args.js b/packages/url/src/add-query-args.ts
similarity index 78%
rename from packages/url/src/add-query-args.js
rename to packages/url/src/add-query-args.ts
index 556a3fb706a447..1f4c05de3bbdd6 100644
--- a/packages/url/src/add-query-args.js
+++ b/packages/url/src/add-query-args.ts
@@ -10,18 +10,21 @@ import { getFragment } from './get-fragment';
  * includes query arguments, the arguments are merged with (and take precedent
  * over) the existing set.
  *
- * @param {string} [url=''] URL to which arguments should be appended. If omitted,
- *                          only the resulting querystring is returned.
- * @param {Object} [args]   Query arguments to apply to URL.
+ * @param url  URL to which arguments should be appended. If omitted,
+ *             only the resulting querystring is returned.
+ * @param args Query arguments to apply to URL.
  *
  * @example
  * ```js
  * const newURL = addQueryArgs( 'https://google.com', { q: 'test' } ); // https://google.com/?q=test
  * ```
  *
- * @return {string} URL with arguments applied.
+ * @return URL with arguments applied.
  */
-export function addQueryArgs( url = '', args ) {
+export function addQueryArgs(
+	url: string = '',
+	args?: Record< string, unknown >
+): string {
 	// If no arguments are to be appended, return original URL.
 	if ( ! args || ! Object.keys( args ).length ) {
 		return url;
diff --git a/packages/url/src/build-query-string.js b/packages/url/src/build-query-string.ts
similarity index 82%
rename from packages/url/src/build-query-string.js
rename to packages/url/src/build-query-string.ts
index 5f8b6a68079a5b..5315d77bae03ad 100644
--- a/packages/url/src/build-query-string.js
+++ b/packages/url/src/build-query-string.ts
@@ -18,14 +18,14 @@
  * // "simple=is%20ok&arrays%5B0%5D=are&arrays%5B1%5D=fine&arrays%5B2%5D=too&objects%5BevenNested%5D%5Bok%5D=yes"
  * ```
  *
- * @param {Record<string,*>} data Data to encode.
+ * @param data Data to encode.
  *
- * @return {string} Query string.
+ * @return Query string.
  */
-export function buildQueryString( data ) {
+export function buildQueryString( data: Record< string, unknown > ): string {
 	let string = '';
 
-	const stack = Object.entries( data );
+	const stack: Array< [ string, unknown ] > = Object.entries( data );
 
 	let pair;
 	while ( ( pair = stack.shift() ) ) {
@@ -39,7 +39,7 @@ export function buildQueryString( data ) {
 			// Push array or object values onto the stack as composed of their
 			// original key and nested index or key, retaining order by a
 			// combination of Array#reverse and Array#unshift onto the stack.
-			const valuePairs = Object.entries( value ).reverse();
+			const valuePairs = Object.entries( value as object ).reverse();
 			for ( const [ member, memberValue ] of valuePairs ) {
 				stack.unshift( [ `${ key }[${ member }]`, memberValue ] );
 			}
@@ -50,7 +50,8 @@ export function buildQueryString( data ) {
 			}
 
 			string +=
-				'&' + [ key, value ].map( encodeURIComponent ).join( '=' );
+				'&' +
+				[ key, String( value ) ].map( encodeURIComponent ).join( '=' );
 		}
 	}
 
diff --git a/packages/url/src/clean-for-slug.js b/packages/url/src/clean-for-slug.ts
similarity index 74%
rename from packages/url/src/clean-for-slug.js
rename to packages/url/src/clean-for-slug.ts
index 0cee207073c3d0..a6dd495ff61f4f 100644
--- a/packages/url/src/clean-for-slug.js
+++ b/packages/url/src/clean-for-slug.ts
@@ -6,7 +6,7 @@ import removeAccents from 'remove-accents';
 /**
  * Performs some basic cleanup of a string for use as a post slug.
  *
- * This replicates some of what `sanitize_title()` does in WordPress core, but
+ * This replicates some of what `sanitize_title_with_dashes()` does in WordPress core, but
  * is only designed to approximate what the slug will be.
  *
  * Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin
@@ -15,18 +15,22 @@ import removeAccents from 'remove-accents';
  * except hyphens. Converts remaining string to lowercase. It does not account
  * for octets, HTML entities, or other encoded characters.
  *
- * @param {string} string Title or slug to be processed.
+ * @param string Title or slug to be processed.
  *
- * @return {string} Processed string.
+ * @return Processed string.
  */
-export function cleanForSlug( string ) {
+export function cleanForSlug( string: string ): string {
 	if ( ! string ) {
 		return '';
 	}
 	return (
 		removeAccents( string )
+			// Convert &nbsp, &ndash, and &mdash to hyphens.
+			.replace( /(&nbsp;|&ndash;|&mdash;)/g, '-' )
 			// Convert each group of whitespace, periods, and forward slashes to a hyphen.
 			.replace( /[\s\./]+/g, '-' )
+			// Remove all HTML entities.
+			.replace( /&\S+?;/g, '' )
 			// Remove anything that's not a letter, number, underscore or hyphen.
 			.replace( /[^\p{L}\p{N}_-]+/gu, '' )
 			// Convert to lowercase
diff --git a/packages/url/src/filter-url-for-display.js b/packages/url/src/filter-url-for-display.ts
similarity index 88%
rename from packages/url/src/filter-url-for-display.js
rename to packages/url/src/filter-url-for-display.ts
index 436070b667a3e6..848aac53efed03 100644
--- a/packages/url/src/filter-url-for-display.js
+++ b/packages/url/src/filter-url-for-display.ts
@@ -1,8 +1,8 @@
 /**
  * Returns a URL for display.
  *
- * @param {string}      url       Original URL.
- * @param {number|null} maxLength URL length.
+ * @param url       Original URL.
+ * @param maxLength URL length.
  *
  * @example
  * ```js
@@ -10,9 +10,12 @@
  * const imageUrl = filterURLForDisplay( 'https://www.wordpress.org/wp-content/uploads/img.png', 20 ); // …ent/uploads/img.png
  * ```
  *
- * @return {string} Displayed URL.
+ * @return Displayed URL.
  */
-export function filterURLForDisplay( url, maxLength = null ) {
+export function filterURLForDisplay(
+	url: string,
+	maxLength: number | null = null
+): string {
 	if ( ! url ) {
 		return '';
 	}
diff --git a/packages/url/src/get-authority.js b/packages/url/src/get-authority.ts
similarity index 75%
rename from packages/url/src/get-authority.js
rename to packages/url/src/get-authority.ts
index f29afd5411c11d..ae11cedef0566d 100644
--- a/packages/url/src/get-authority.js
+++ b/packages/url/src/get-authority.ts
@@ -1,7 +1,7 @@
 /**
  * Returns the authority part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const authority2 = getAuthority( 'https://localhost:8080/test/' ); // 'localhost:8080'
  * ```
  *
- * @return {string|void} The authority part of the URL.
+ * @return The authority part of the URL.
  */
-export function getAuthority( url ) {
+export function getAuthority( url: string ): string | void {
 	const matches = /^[^\/\s:]+:(?:\/\/)?\/?([^\/\s#?]+)[\/#?]{0,1}\S*$/.exec(
 		url
 	);
diff --git a/packages/url/src/get-filename.js b/packages/url/src/get-filename.ts
similarity index 78%
rename from packages/url/src/get-filename.js
rename to packages/url/src/get-filename.ts
index d744a8da6bccfe..d5550618734370 100644
--- a/packages/url/src/get-filename.js
+++ b/packages/url/src/get-filename.ts
@@ -1,7 +1,7 @@
 /**
  * Returns the filename part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const filename2 = getFilename( '/this/is/a/test.png' ); // 'test.png'
  * ```
  *
- * @return {string|void} The filename part of the URL.
+ * @return The filename part of the URL.
  */
-export function getFilename( url ) {
+export function getFilename( url: string ): string | void {
 	let filename;
 
 	if ( ! url ) {
diff --git a/packages/url/src/get-fragment.js b/packages/url/src/get-fragment.ts
similarity index 75%
rename from packages/url/src/get-fragment.js
rename to packages/url/src/get-fragment.ts
index 4f15ef0ce06af8..d6a48a0bfc7cda 100644
--- a/packages/url/src/get-fragment.js
+++ b/packages/url/src/get-fragment.ts
@@ -1,7 +1,7 @@
 /**
  * Returns the fragment part of the URL.
  *
- * @param {string} url The full URL
+ * @param url The full URL
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const fragment2 = getFragment( 'https://wordpress.org#another-fragment?query=true' ); // '#another-fragment'
  * ```
  *
- * @return {string|void} The fragment part of the URL.
+ * @return The fragment part of the URL.
  */
-export function getFragment( url ) {
+export function getFragment( url: string ): string | void {
 	const matches = /^\S+?(#[^\s\?]*)/.exec( url );
 	if ( matches ) {
 		return matches[ 1 ];
diff --git a/packages/url/src/get-path-and-query-string.js b/packages/url/src/get-path-and-query-string.ts
similarity index 80%
rename from packages/url/src/get-path-and-query-string.js
rename to packages/url/src/get-path-and-query-string.ts
index f858846b07802c..64869cab6272e9 100644
--- a/packages/url/src/get-path-and-query-string.js
+++ b/packages/url/src/get-path-and-query-string.ts
@@ -6,7 +6,7 @@ import { getPath, getQueryString } from '.';
 /**
  * Returns the path part and query string part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
@@ -14,9 +14,9 @@ import { getPath, getQueryString } from '.';
  * const pathAndQueryString2 = getPathAndQueryString( 'https://wordpress.org/help/faq/' ); // '/help/faq'
  * ```
  *
- * @return {string} The path part and query string part of the URL.
+ * @return The path part and query string part of the URL.
  */
-export function getPathAndQueryString( url ) {
+export function getPathAndQueryString( url: string ): string {
 	const path = getPath( url );
 	const queryString = getQueryString( url );
 	let value = '/';
diff --git a/packages/url/src/get-path.js b/packages/url/src/get-path.ts
similarity index 76%
rename from packages/url/src/get-path.js
rename to packages/url/src/get-path.ts
index e9c4c717f6b92b..3a3b192d179c7c 100644
--- a/packages/url/src/get-path.js
+++ b/packages/url/src/get-path.ts
@@ -1,7 +1,7 @@
 /**
  * Returns the path part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const path2 = getPath( 'https://wordpress.org/help/faq/' ); // 'help/faq'
  * ```
  *
- * @return {string|void} The path part of the URL.
+ * @return The path part of the URL.
  */
-export function getPath( url ) {
+export function getPath( url: string ): string | void {
 	const matches =
 		/^[^\/\s:]+:(?:\/\/)?[^\/\s#?]+[\/]([^\s#?]+)[#?]{0,1}\S*$/.exec( url );
 	if ( matches ) {
diff --git a/packages/url/src/get-protocol.js b/packages/url/src/get-protocol.ts
similarity index 70%
rename from packages/url/src/get-protocol.js
rename to packages/url/src/get-protocol.ts
index 07b375c10f841b..f0360580c47f0e 100644
--- a/packages/url/src/get-protocol.js
+++ b/packages/url/src/get-protocol.ts
@@ -1,7 +1,7 @@
 /**
  * Returns the protocol part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const protocol2 = getProtocol( 'https://wordpress.org' ); // 'https:'
  * ```
  *
- * @return {string|void} The protocol part of the URL.
+ * @return  The protocol part of the URL.
  */
-export function getProtocol( url ) {
+export function getProtocol( url: string ): string | void {
 	const matches = /^([^\s:]+:)/.exec( url );
 	if ( matches ) {
 		return matches[ 1 ];
diff --git a/packages/url/src/get-query-arg.js b/packages/url/src/get-query-arg.js
deleted file mode 100644
index 05f554cd8f67d4..00000000000000
--- a/packages/url/src/get-query-arg.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getQueryArgs } from './get-query-args';
-
-/**
- * @typedef {{[key: string]: QueryArgParsed}} QueryArgObject
- */
-
-/**
- * @typedef {string|string[]|QueryArgObject} QueryArgParsed
- */
-
-/**
- * Returns a single query argument of the url
- *
- * @param {string} url URL.
- * @param {string} arg Query arg name.
- *
- * @example
- * ```js
- * const foo = getQueryArg( 'https://wordpress.org?foo=bar&bar=baz', 'foo' ); // bar
- * ```
- *
- * @return {QueryArgParsed|void} Query arg value.
- */
-export function getQueryArg( url, arg ) {
-	return getQueryArgs( url )[ arg ];
-}
diff --git a/packages/url/src/get-query-arg.ts b/packages/url/src/get-query-arg.ts
new file mode 100644
index 00000000000000..7bc1872a5fe429
--- /dev/null
+++ b/packages/url/src/get-query-arg.ts
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { getQueryArgs } from './get-query-args';
+
+export interface QueryArgObject {
+	[ key: string ]: QueryArgParsed;
+}
+
+export type QueryArgParsed = string | string[] | QueryArgObject;
+
+/**
+ * Returns a single query argument of the url
+ *
+ * @param url URL.
+ * @param arg Query arg name.
+ *
+ * @example
+ * ```js
+ * const foo = getQueryArg( 'https://wordpress.org?foo=bar&bar=baz', 'foo' ); // bar
+ * ```
+ *
+ * @return Query arg value.
+ */
+export function getQueryArg(
+	url: string,
+	arg: string
+): QueryArgParsed | undefined {
+	return getQueryArgs( url )[ arg ];
+}
diff --git a/packages/url/src/get-query-args.js b/packages/url/src/get-query-args.ts
similarity index 84%
rename from packages/url/src/get-query-args.js
rename to packages/url/src/get-query-args.ts
index 45626f1d8a1e94..71fe6c06c0bb45 100644
--- a/packages/url/src/get-query-args.js
+++ b/packages/url/src/get-query-args.ts
@@ -3,22 +3,19 @@
  */
 import { safeDecodeURIComponent } from './safe-decode-uri-component';
 import { getQueryString } from './get-query-string';
+import type { QueryArgParsed } from './get-query-arg';
 
-/** @typedef {import('./get-query-arg').QueryArgParsed} QueryArgParsed */
-
-/**
- * @typedef {Record<string,QueryArgParsed>} QueryArgs
- */
+type QueryArgs = Record< string, QueryArgParsed >;
 
 /**
  * Sets a value in object deeply by a given array of path segments. Mutates the
  * object reference.
  *
- * @param {Record<string,*>} object Object in which to assign.
- * @param {string[]}         path   Path segment at which to set value.
- * @param {*}                value  Value to set.
+ * @param object Object in which to assign.
+ * @param path   Path segment at which to set value.
+ * @param value  Value to set.
  */
-function setPath( object, path, value ) {
+function setPath( object: Record< string, any >, path: string[], value: any ) {
 	const length = path.length;
 	const lastIndex = length - 1;
 	for ( let i = 0; i < length; i++ ) {
@@ -61,7 +58,7 @@ function setPath( object, path, value ) {
  * Returns an object of query arguments of the given URL. If the given URL is
  * invalid or has no querystring, an empty object is returned.
  *
- * @param {string} url URL.
+ * @param url URL.
  *
  * @example
  * ```js
@@ -69,9 +66,9 @@ function setPath( object, path, value ) {
  * // { "foo": "bar", "bar": "baz" }
  * ```
  *
- * @return {QueryArgs} Query args object.
+ * @return Query args object.
  */
-export function getQueryArgs( url ) {
+export function getQueryArgs( url: string ): QueryArgs {
 	return (
 		( getQueryString( url ) || '' )
 			// Normalize space encoding, accounting for PHP URL encoding
diff --git a/packages/url/src/get-query-string.js b/packages/url/src/get-query-string.ts
similarity index 72%
rename from packages/url/src/get-query-string.js
rename to packages/url/src/get-query-string.ts
index 8624ce5c6c8b9d..91f9947a61e664 100644
--- a/packages/url/src/get-query-string.js
+++ b/packages/url/src/get-query-string.ts
@@ -1,16 +1,16 @@
 /**
  * Returns the query string part of the URL.
  *
- * @param {string} url The full URL.
+ * @param url The full URL.
  *
  * @example
  * ```js
  * const queryString = getQueryString( 'http://localhost:8080/this/is/a/test?query=true#fragment' ); // 'query=true'
  * ```
  *
- * @return {string|void} The query string part of the URL.
+ * @return The query string part of the URL.
  */
-export function getQueryString( url ) {
+export function getQueryString( url: string ): string | void {
 	let query;
 	try {
 		query = new URL( url, 'http://example.com' ).search.substring( 1 );
diff --git a/packages/url/src/has-query-arg.js b/packages/url/src/has-query-arg.ts
similarity index 64%
rename from packages/url/src/has-query-arg.js
rename to packages/url/src/has-query-arg.ts
index a940338dd16655..41cf83cc552a86 100644
--- a/packages/url/src/has-query-arg.js
+++ b/packages/url/src/has-query-arg.ts
@@ -6,16 +6,16 @@ import { getQueryArg } from './get-query-arg';
 /**
  * Determines whether the URL contains a given query arg.
  *
- * @param {string} url URL.
- * @param {string} arg Query arg name.
+ * @param url URL.
+ * @param arg Query arg name.
  *
  * @example
  * ```js
  * const hasBar = hasQueryArg( 'https://wordpress.org?foo=bar&bar=baz', 'bar' ); // true
  * ```
  *
- * @return {boolean} Whether or not the URL contains the query arg.
+ * @return Whether or not the URL contains the query arg.
  */
-export function hasQueryArg( url, arg ) {
+export function hasQueryArg( url: string, arg: string ): boolean {
 	return getQueryArg( url, arg ) !== undefined;
 }
diff --git a/packages/url/src/index.js b/packages/url/src/index.ts
similarity index 100%
rename from packages/url/src/index.js
rename to packages/url/src/index.ts
diff --git a/packages/url/src/is-email.js b/packages/url/src/is-email.ts
similarity index 66%
rename from packages/url/src/is-email.js
rename to packages/url/src/is-email.ts
index 815c4cdbd5fece..1e4ff1e1d1ae01 100644
--- a/packages/url/src/is-email.js
+++ b/packages/url/src/is-email.ts
@@ -4,15 +4,15 @@ const EMAIL_REGEXP =
 /**
  * Determines whether the given string looks like an email.
  *
- * @param {string} email The string to scrutinise.
+ * @param email The string to scrutinise.
  *
  * @example
  * ```js
  * const isEmail = isEmail( 'hello@wordpress.org' ); // true
  * ```
  *
- * @return {boolean} Whether or not it looks like an email.
+ * @return Whether or not it looks like an email.
  */
-export function isEmail( email ) {
+export function isEmail( email: string ): boolean {
 	return EMAIL_REGEXP.test( email );
 }
diff --git a/packages/url/src/is-phone-number.js b/packages/url/src/is-phone-number.ts
similarity index 68%
rename from packages/url/src/is-phone-number.js
rename to packages/url/src/is-phone-number.ts
index ed7aad1a3540ea..d482b1ad7e25b1 100644
--- a/packages/url/src/is-phone-number.js
+++ b/packages/url/src/is-phone-number.ts
@@ -3,16 +3,16 @@ const PHONE_REGEXP = /^(tel:)?(\+)?\d{6,15}$/;
 /**
  * Determines whether the given string looks like a phone number.
  *
- * @param {string} phoneNumber The string to scrutinize.
+ * @param phoneNumber The string to scrutinize.
  *
  * @example
  * ```js
  * const isPhoneNumber = isPhoneNumber('+1 (555) 123-4567'); // true
  * ```
  *
- * @return {boolean} Whether or not it looks like a phone number.
+ * @return Whether or not it looks like a phone number.
  */
-export function isPhoneNumber( phoneNumber ) {
+export function isPhoneNumber( phoneNumber: string ): boolean {
 	// Remove any separator from phone number.
 	phoneNumber = phoneNumber.replace( /[-.() ]/g, '' );
 	return PHONE_REGEXP.test( phoneNumber );
diff --git a/packages/url/src/is-url.js b/packages/url/src/is-url.ts
similarity index 77%
rename from packages/url/src/is-url.js
rename to packages/url/src/is-url.ts
index 1fda847947ed46..6cb8202aa0b7d3 100644
--- a/packages/url/src/is-url.js
+++ b/packages/url/src/is-url.ts
@@ -1,7 +1,7 @@
 /**
  * Determines whether the given string looks like a URL.
  *
- * @param {string} url The string to scrutinise.
+ * @param url The string to scrutinise.
  *
  * @example
  * ```js
@@ -11,9 +11,9 @@
  * @see https://url.spec.whatwg.org/
  * @see https://url.spec.whatwg.org/#valid-url-string
  *
- * @return {boolean} Whether or not it looks like a URL.
+ * @return Whether or not it looks like a URL.
  */
-export function isURL( url ) {
+export function isURL( url: string ): boolean {
 	// A URL can be considered value if the `URL` constructor is able to parse
 	// it. The constructor throws an error for an invalid URL.
 	try {
diff --git a/packages/url/src/is-valid-authority.js b/packages/url/src/is-valid-authority.ts
similarity index 63%
rename from packages/url/src/is-valid-authority.js
rename to packages/url/src/is-valid-authority.ts
index 4734259b34b19c..2e93840d0e530d 100644
--- a/packages/url/src/is-valid-authority.js
+++ b/packages/url/src/is-valid-authority.ts
@@ -1,7 +1,7 @@
 /**
  * Checks for invalid characters within the provided authority.
  *
- * @param {string} authority A string containing the URL authority.
+ * @param authority A string containing the URL authority.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const isNotValid = isValidAuthority( 'wordpress#org' ); // false
  * ```
  *
- * @return {boolean} True if the argument contains a valid authority.
+ * @return True if the argument contains a valid authority.
  */
-export function isValidAuthority( authority ) {
+export function isValidAuthority( authority: string ): boolean {
 	if ( ! authority ) {
 		return false;
 	}
diff --git a/packages/url/src/is-valid-fragment.js b/packages/url/src/is-valid-fragment.ts
similarity index 67%
rename from packages/url/src/is-valid-fragment.js
rename to packages/url/src/is-valid-fragment.ts
index ce19c0f859e5a7..4a6579e0c40754 100644
--- a/packages/url/src/is-valid-fragment.js
+++ b/packages/url/src/is-valid-fragment.ts
@@ -1,7 +1,7 @@
 /**
  * Checks for invalid characters within the provided fragment.
  *
- * @param {string} fragment The url fragment.
+ * @param fragment The url fragment.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const isNotValid = isValidFragment( '#invalid-#fragment' ); // false
  * ```
  *
- * @return {boolean} True if the argument contains a valid fragment.
+ * @return True if the argument contains a valid fragment.
  */
-export function isValidFragment( fragment ) {
+export function isValidFragment( fragment: string ): boolean {
 	if ( ! fragment ) {
 		return false;
 	}
diff --git a/packages/url/src/is-valid-path.js b/packages/url/src/is-valid-path.ts
similarity index 68%
rename from packages/url/src/is-valid-path.js
rename to packages/url/src/is-valid-path.ts
index 7ab5d9d95eeca7..b0f58354e7b94c 100644
--- a/packages/url/src/is-valid-path.js
+++ b/packages/url/src/is-valid-path.ts
@@ -1,7 +1,7 @@
 /**
  * Checks for invalid characters within the provided path.
  *
- * @param {string} path The URL path.
+ * @param path The URL path.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const isNotValid = isValidPath( '/invalid?test/path/' ); // false
  * ```
  *
- * @return {boolean} True if the argument contains a valid path
+ * @return True if the argument contains a valid path
  */
-export function isValidPath( path ) {
+export function isValidPath( path: string ): boolean {
 	if ( ! path ) {
 		return false;
 	}
diff --git a/packages/url/src/is-valid-protocol.js b/packages/url/src/is-valid-protocol.ts
similarity index 62%
rename from packages/url/src/is-valid-protocol.js
rename to packages/url/src/is-valid-protocol.ts
index 689768114318c4..fa8a05271a739a 100644
--- a/packages/url/src/is-valid-protocol.js
+++ b/packages/url/src/is-valid-protocol.ts
@@ -1,7 +1,7 @@
 /**
  * Tests if a url protocol is valid.
  *
- * @param {string} protocol The url protocol.
+ * @param protocol The url protocol.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const isNotValid = isValidProtocol( 'https :' ); // false
  * ```
  *
- * @return {boolean} True if the argument is a valid protocol (e.g. http:, tel:).
+ * @return True if the argument is a valid protocol (e.g. http:, tel:).
  */
-export function isValidProtocol( protocol ) {
+export function isValidProtocol( protocol: string ): boolean {
 	if ( ! protocol ) {
 		return false;
 	}
diff --git a/packages/url/src/is-valid-query-string.js b/packages/url/src/is-valid-query-string.ts
similarity index 67%
rename from packages/url/src/is-valid-query-string.js
rename to packages/url/src/is-valid-query-string.ts
index 039cede44de959..16139f52b626f5 100644
--- a/packages/url/src/is-valid-query-string.js
+++ b/packages/url/src/is-valid-query-string.ts
@@ -1,7 +1,7 @@
 /**
  * Checks for invalid characters within the provided query string.
  *
- * @param {string} queryString The query string.
+ * @param queryString The query string.
  *
  * @example
  * ```js
@@ -9,9 +9,9 @@
  * const isNotValid = isValidQueryString( 'query=true?another=false' ); // false
  * ```
  *
- * @return {boolean} True if the argument contains a valid query string.
+ * @return True if the argument contains a valid query string.
  */
-export function isValidQueryString( queryString ) {
+export function isValidQueryString( queryString: string ): boolean {
 	if ( ! queryString ) {
 		return false;
 	}
diff --git a/packages/url/src/normalize-path.js b/packages/url/src/normalize-path.ts
similarity index 89%
rename from packages/url/src/normalize-path.js
rename to packages/url/src/normalize-path.ts
index eb1cafed083657..93d7cca54f9158 100644
--- a/packages/url/src/normalize-path.js
+++ b/packages/url/src/normalize-path.ts
@@ -3,11 +3,11 @@
  * will be treated as identical, regardless of order they appear in the original
  * text.
  *
- * @param {string} path Original path.
+ * @param path Original path.
  *
- * @return {string} Normalized path.
+ * @return Normalized path.
  */
-export function normalizePath( path ) {
+export function normalizePath( path: string ): string {
 	const split = path.split( '?' );
 	const query = split[ 1 ];
 	const base = split[ 0 ];
diff --git a/packages/url/src/prepend-http.js b/packages/url/src/prepend-http.ts
similarity index 81%
rename from packages/url/src/prepend-http.js
rename to packages/url/src/prepend-http.ts
index e76488c51a4266..47ebc6e536f65d 100644
--- a/packages/url/src/prepend-http.js
+++ b/packages/url/src/prepend-http.ts
@@ -8,16 +8,16 @@ const USABLE_HREF_REGEXP = /^(?:[a-z]+:|#|\?|\.|\/)/i;
 /**
  * Prepends "http://" to a url, if it looks like something that is meant to be a TLD.
  *
- * @param {string} url The URL to test.
+ * @param url The URL to test.
  *
  * @example
  * ```js
  * const actualURL = prependHTTP( 'wordpress.org' ); // http://wordpress.org
  * ```
  *
- * @return {string} The updated URL.
+ * @return The updated URL.
  */
-export function prependHTTP( url ) {
+export function prependHTTP( url: string ): string {
 	if ( ! url ) {
 		return url;
 	}
diff --git a/packages/url/src/prepend-https.js b/packages/url/src/prepend-https.ts
similarity index 83%
rename from packages/url/src/prepend-https.js
rename to packages/url/src/prepend-https.ts
index 237bf3e18cff70..8cc062ed000eb2 100644
--- a/packages/url/src/prepend-https.js
+++ b/packages/url/src/prepend-https.ts
@@ -8,16 +8,16 @@ import { prependHTTP } from './prepend-http';
  *
  * Note: this will not replace "http://" with "https://".
  *
- * @param {string} url The URL to test.
+ * @param url The URL to test.
  *
  * @example
  * ```js
  * const actualURL = prependHTTPS( 'wordpress.org' ); // https://wordpress.org
  * ```
  *
- * @return {string} The updated URL.
+ * @return The updated URL.
  */
-export function prependHTTPS( url ) {
+export function prependHTTPS( url: string ): string {
 	if ( ! url ) {
 		return url;
 	}
diff --git a/packages/url/src/remove-query-args.js b/packages/url/src/remove-query-args.ts
similarity index 84%
rename from packages/url/src/remove-query-args.js
rename to packages/url/src/remove-query-args.ts
index 5d31313b08a74e..7695d2527979f1 100644
--- a/packages/url/src/remove-query-args.js
+++ b/packages/url/src/remove-query-args.ts
@@ -7,17 +7,17 @@ import { buildQueryString } from './build-query-string';
 /**
  * Removes arguments from the query string of the url
  *
- * @param {string}    url  URL.
- * @param {...string} args Query Args.
+ * @param url  URL.
+ * @param args Query Args.
  *
  * @example
  * ```js
  * const newUrl = removeQueryArgs( 'https://wordpress.org?foo=bar&bar=baz&baz=foobar', 'foo', 'bar' ); // https://wordpress.org?baz=foobar
  * ```
  *
- * @return {string} Updated URL.
+ * @return Updated URL.
  */
-export function removeQueryArgs( url, ...args ) {
+export function removeQueryArgs( url: string, ...args: string[] ): string {
 	const fragment = url.replace( /^[^#]*/, '' );
 	url = url.replace( /#.*/, '' );
 
diff --git a/packages/url/src/safe-decode-uri-component.js b/packages/url/src/safe-decode-uri-component.ts
similarity index 61%
rename from packages/url/src/safe-decode-uri-component.js
rename to packages/url/src/safe-decode-uri-component.ts
index 2bf2047803fba3..236637bf768470 100644
--- a/packages/url/src/safe-decode-uri-component.js
+++ b/packages/url/src/safe-decode-uri-component.ts
@@ -2,11 +2,11 @@
  * Safely decodes a URI component with `decodeURIComponent`. Returns the URI component unmodified if
  * `decodeURIComponent` throws an error.
  *
- * @param {string} uriComponent URI component to decode.
+ * @param uriComponent URI component to decode.
  *
- * @return {string} Decoded URI component if possible.
+ * @return Decoded URI component if possible.
  */
-export function safeDecodeURIComponent( uriComponent ) {
+export function safeDecodeURIComponent( uriComponent: string ): string {
 	try {
 		return decodeURIComponent( uriComponent );
 	} catch ( uriComponentError ) {
diff --git a/packages/url/src/safe-decode-uri.js b/packages/url/src/safe-decode-uri.ts
similarity index 72%
rename from packages/url/src/safe-decode-uri.js
rename to packages/url/src/safe-decode-uri.ts
index f5f6379e19164a..ab0830597fd0df 100644
--- a/packages/url/src/safe-decode-uri.js
+++ b/packages/url/src/safe-decode-uri.ts
@@ -2,16 +2,16 @@
  * Safely decodes a URI with `decodeURI`. Returns the URI unmodified if
  * `decodeURI` throws an error.
  *
- * @param {string} uri URI to decode.
+ * @param uri URI to decode.
  *
  * @example
  * ```js
  * const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'
  * ```
  *
- * @return {string} Decoded URI if possible.
+ * @return Decoded URI if possible.
  */
-export function safeDecodeURI( uri ) {
+export function safeDecodeURI( uri: string ): string {
 	try {
 		return decodeURI( uri );
 	} catch ( uriError ) {
diff --git a/packages/url/src/test/index.js b/packages/url/src/test/index.js
index 763c2e71c9fcbe..9243471c8c079c 100644
--- a/packages/url/src/test/index.js
+++ b/packages/url/src/test/index.js
@@ -494,12 +494,12 @@ describe( 'getPathAndQueryString', () => {
 	beforeAll( jest.resetModules );
 	afterAll( jest.resetModules );
 	it( 'combines the results of `getPath` and `getQueryString`', () => {
-		jest.doMock( '../get-path.js', () => ( {
+		jest.doMock( '../get-path', () => ( {
 			getPath( { path } = {} ) {
 				return path;
 			},
 		} ) );
-		jest.doMock( '../get-query-string.js', () => ( {
+		jest.doMock( '../get-query-string', () => ( {
 			getQueryString( { queryString } = {} ) {
 				return queryString;
 			},
@@ -1202,6 +1202,24 @@ describe( 'cleanForSlug', () => {
 		expect( cleanForSlug( 'the long - cat' ) ).toBe( 'the-long-cat' );
 		expect( cleanForSlug( 'the----long---cat' ) ).toBe( 'the-long-cat' );
 	} );
+
+	it( 'Should remove ampersands', () => {
+		expect( cleanForSlug( 'the long cat & dog' ) ).toBe(
+			'the-long-cat-dog'
+		);
+		expect(
+			cleanForSlug( 'the long cat &amp; a dog &amp;&amp; fish' )
+		).toBe( 'the-long-cat-a-dog-fish' );
+		expect( cleanForSlug( 'the long cat &amp;amp; dog' ) ).toBe(
+			'the-long-cat-amp-dog'
+		);
+	} );
+
+	it( 'Should remove HTML entities', () => {
+		expect(
+			cleanForSlug( 'No &nbsp; Entities> &ndash; Here &mdash;&lt;' )
+		).toBe( 'no-entities-here' );
+	} );
 } );
 
 describe( 'normalizePath', () => {
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 0ef99522f99c88..21238e322dfb5b 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 6.27.0 (2025-07-23)
+
+## 6.26.0 (2025-06-25)
+
+## 6.25.0 (2025-06-04)
+
+## 6.24.0 (2025-05-22)
+
+## 6.23.0 (2025-05-07)
+
+## 6.22.0 (2025-04-11)
+
 ## 6.21.0 (2025-03-27)
 
 ## 6.20.0 (2025-03-13)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index 1bf6ad668c9d48..935b8b87173c48 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.21.0",
+	"version": "6.27.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index 083d600674f995..8c51a6cbba609a 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 3.27.0 (2025-07-23)
+
+## 3.26.0 (2025-06-25)
+
+## 3.25.0 (2025-06-04)
+
+## 3.24.0 (2025-05-22)
+
+## 3.23.0 (2025-05-07)
+
+## 3.22.0 (2025-04-11)
+
 ## 3.21.0 (2025-03-27)
 
 ## 3.20.0 (2025-03-13)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 1dd79743662f60..3227cc650470c3 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.21.0",
+	"version": "3.27.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index 4e5ce4b922e72f..097dcc9d33b88c 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 80cd8dbf859095..da4dd083acc4a1 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/src/blocks/legacy-widget/index.php b/packages/widgets/src/blocks/legacy-widget/index.php
index ee13ae9a1c612d..bec1b16b6ba8cf 100644
--- a/packages/widgets/src/blocks/legacy-widget/index.php
+++ b/packages/widgets/src/blocks/legacy-widget/index.php
@@ -10,7 +10,7 @@
  *
  * @since 5.8.0
  *
- * @global int $wp_widget_factory.
+ * @global WP_Widget_Factory $wp_widget_factory.
  *
  * @param array $attributes The block attributes.
  *
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 75c082c4630cea..c48dbe525475c6 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+## 4.27.0 (2025-07-23)
+
+## 4.26.0 (2025-06-25)
+
+## 4.25.0 (2025-06-04)
+
+## 4.24.0 (2025-05-22)
+
+## 4.23.0 (2025-05-07)
+
+## 4.22.0 (2025-04-11)
+
 ## 4.21.0 (2025-03-27)
 
 ## 4.20.0 (2025-03-13)
diff --git a/packages/wordcount/README.md b/packages/wordcount/README.md
index 4615f623f72250..28b52eed91213e 100644
--- a/packages/wordcount/README.md
+++ b/packages/wordcount/README.md
@@ -22,7 +22,7 @@ Count some words.
 
 _Usage_
 
-```js
+```ts
 import { count } from '@wordpress/wordcount';
 const numberOfWords = count( 'Words to count', 'words', {} );
 ```
@@ -30,8 +30,8 @@ const numberOfWords = count( 'Words to count', 'words', {} );
 _Parameters_
 
 -   _text_ `string`: The text being processed
--   _type_ `WPWordCountStrategy`: The type of count. Accepts 'words', 'characters_excluding_spaces', or 'characters_including_spaces'.
--   _userSettings_ `WPWordCountUserSettings`: Custom settings object.
+-   _type_ `Strategy`: The type of count. Accepts 'words', 'characters_excluding_spaces', or 'characters_including_spaces'.
+-   _userSettings_ `UserSettings`: Custom settings object.
 
 _Returns_
 
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index 951eb2acdaff8b..afb3a30ee645de 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.21.0",
+	"version": "4.27.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,6 +26,7 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"wpScript": true,
+	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "7.25.7"
diff --git a/packages/wordcount/src/defaultSettings.js b/packages/wordcount/src/defaultSettings.js
deleted file mode 100644
index cd20eb5b6a0cab..00000000000000
--- a/packages/wordcount/src/defaultSettings.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/** @typedef {import('./index').WPWordCountStrategy} WPWordCountStrategy */
-
-/** @typedef {Partial<{type: WPWordCountStrategy, shortcodes: string[]}>} WPWordCountL10n */
-
-/**
- * @typedef WPWordCountSettingsFields
- * @property {RegExp}              HTMLRegExp                        Regular expression that matches HTML tags
- * @property {RegExp}              HTMLcommentRegExp                 Regular expression that matches HTML comments
- * @property {RegExp}              spaceRegExp                       Regular expression that matches spaces in HTML
- * @property {RegExp}              HTMLEntityRegExp                  Regular expression that matches HTML entities
- * @property {RegExp}              connectorRegExp                   Regular expression that matches word connectors, like em-dash
- * @property {RegExp}              removeRegExp                      Regular expression that matches various characters to be removed when counting
- * @property {RegExp}              astralRegExp                      Regular expression that matches astral UTF-16 code points
- * @property {RegExp}              wordsRegExp                       Regular expression that matches words
- * @property {RegExp}              characters_excluding_spacesRegExp Regular expression that matches characters excluding spaces
- * @property {RegExp}              characters_including_spacesRegExp Regular expression that matches characters including spaces
- * @property {RegExp}              shortcodesRegExp                  Regular expression that matches WordPress shortcodes
- * @property {string[]}            shortcodes                        List of all shortcodes
- * @property {WPWordCountStrategy} type                              Describes what and how are we counting
- * @property {WPWordCountL10n}     l10n                              Object with human translations
- */
-
-/**
- * Lower-level settings for word counting that can be overridden.
- *
- * @typedef {Partial<WPWordCountSettingsFields>} WPWordCountUserSettings
- */
-
-// Disable reason: JSDoc linter doesn't seem to parse the union (`&`) correctly: https://github.com/jsdoc/jsdoc/issues/1285
-/* eslint-disable jsdoc/valid-types */
-/**
- * Word counting settings that include non-optional values we set if missing
- *
- * @typedef {WPWordCountUserSettings & typeof defaultSettings} WPWordCountDefaultSettings
- */
-/* eslint-enable jsdoc/valid-types */
-
-export const defaultSettings = {
-	HTMLRegExp: /<\/?[a-z][^>]*?>/gi,
-	HTMLcommentRegExp: /<!--[\s\S]*?-->/g,
-	spaceRegExp: /&nbsp;|&#160;/gi,
-	HTMLEntityRegExp: /&\S+?;/g,
-
-	// \u2014 = em-dash.
-	connectorRegExp: /--|\u2014/g,
-
-	// Characters to be removed from input text.
-	removeRegExp: new RegExp(
-		[
-			'[',
-
-			// Basic Latin (extract)
-			'\u0021-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u007E',
-
-			// Latin-1 Supplement (extract)
-			'\u0080-\u00BF\u00D7\u00F7',
-
-			/*
-			 * The following range consists of:
-			 * General Punctuation
-			 * Superscripts and Subscripts
-			 * Currency Symbols
-			 * Combining Diacritical Marks for Symbols
-			 * Letterlike Symbols
-			 * Number Forms
-			 * Arrows
-			 * Mathematical Operators
-			 * Miscellaneous Technical
-			 * Control Pictures
-			 * Optical Character Recognition
-			 * Enclosed Alphanumerics
-			 * Box Drawing
-			 * Block Elements
-			 * Geometric Shapes
-			 * Miscellaneous Symbols
-			 * Dingbats
-			 * Miscellaneous Mathematical Symbols-A
-			 * Supplemental Arrows-A
-			 * Braille Patterns
-			 * Supplemental Arrows-B
-			 * Miscellaneous Mathematical Symbols-B
-			 * Supplemental Mathematical Operators
-			 * Miscellaneous Symbols and Arrows
-			 */
-			'\u2000-\u2BFF',
-
-			// Supplemental Punctuation.
-			'\u2E00-\u2E7F',
-			']',
-		].join( '' ),
-		'g'
-	),
-
-	// Remove UTF-16 surrogate points, see https://en.wikipedia.org/wiki/UTF-16#U.2BD800_to_U.2BDFFF
-	astralRegExp: /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
-	wordsRegExp: /\S\s+/g,
-	characters_excluding_spacesRegExp: /\S/g,
-
-	/*
-	 * Match anything that is not a formatting character, excluding:
-	 * \f = form feed
-	 * \n = new line
-	 * \r = carriage return
-	 * \t = tab
-	 * \v = vertical tab
-	 * \u00AD = soft hyphen
-	 * \u2028 = line separator
-	 * \u2029 = paragraph separator
-	 */
-	characters_including_spacesRegExp: /[^\f\n\r\t\v\u00AD\u2028\u2029]/g,
-	l10n: {
-		type: 'words',
-	},
-};
diff --git a/packages/wordcount/src/defaultSettings.ts b/packages/wordcount/src/defaultSettings.ts
new file mode 100644
index 00000000000000..169c0fd952b185
--- /dev/null
+++ b/packages/wordcount/src/defaultSettings.ts
@@ -0,0 +1,85 @@
+/**
+ * Internal dependencies
+ */
+import type { UserSettings } from './types';
+
+/**
+ * Default settings for word counting operations.
+ */
+export const defaultSettings = {
+	HTMLRegExp: /<\/?[a-z][^>]*?>/gi,
+	HTMLcommentRegExp: /<!--[\s\S]*?-->/g,
+	spaceRegExp: /&nbsp;|&#160;/gi,
+	HTMLEntityRegExp: /&\S+?;/g,
+
+	// \u2014 = em-dash.
+	connectorRegExp: /--|\u2014/g,
+
+	// Characters to be removed from input text.
+	removeRegExp: new RegExp(
+		[
+			'[',
+
+			// Basic Latin (extract)
+			'\u0021-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u007E',
+
+			// Latin-1 Supplement (extract)
+			'\u0080-\u00BF\u00D7\u00F7',
+
+			/*
+			 * The following range consists of:
+			 * General Punctuation
+			 * Superscripts and Subscripts
+			 * Currency Symbols
+			 * Combining Diacritical Marks for Symbols
+			 * Letterlike Symbols
+			 * Number Forms
+			 * Arrows
+			 * Mathematical Operators
+			 * Miscellaneous Technical
+			 * Control Pictures
+			 * Optical Character Recognition
+			 * Enclosed Alphanumerics
+			 * Box Drawing
+			 * Block Elements
+			 * Geometric Shapes
+			 * Miscellaneous Symbols
+			 * Dingbats
+			 * Miscellaneous Mathematical Symbols-A
+			 * Supplemental Arrows-A
+			 * Braille Patterns
+			 * Supplemental Arrows-B
+			 * Miscellaneous Mathematical Symbols-B
+			 * Supplemental Mathematical Operators
+			 * Miscellaneous Symbols and Arrows
+			 */
+			'\u2000-\u2BFF',
+
+			// Supplemental Punctuation.
+			'\u2E00-\u2E7F',
+			']',
+		].join( '' ),
+		'g'
+	),
+
+	// Remove UTF-16 surrogate points, see https://en.wikipedia.org/wiki/UTF-16#U.2BD800_to_U.2BDFFF
+	astralRegExp: /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+	wordsRegExp: /\S\s+/g,
+	characters_excluding_spacesRegExp: /\S/g,
+
+	/*
+	 * Match anything that is not a formatting character, excluding:
+	 * \f = form feed
+	 * \n = new line
+	 * \r = carriage return
+	 * \t = tab
+	 * \v = vertical tab
+	 * \u00AD = soft hyphen
+	 * \u2028 = line separator
+	 * \u2029 = paragraph separator
+	 */
+	characters_including_spacesRegExp: /[^\f\n\r\t\v\u00AD\u2028\u2029]/g,
+	l10n: {
+		type: 'words',
+	},
+} satisfies UserSettings;
diff --git a/packages/wordcount/src/index.js b/packages/wordcount/src/index.ts
similarity index 59%
rename from packages/wordcount/src/index.js
rename to packages/wordcount/src/index.ts
index cc31cfc538c018..aa1f8af70f5261 100644
--- a/packages/wordcount/src/index.js
+++ b/packages/wordcount/src/index.ts
@@ -12,27 +12,26 @@ import stripShortcodes from './stripShortcodes';
 import stripSpaces from './stripSpaces';
 import transposeHTMLEntitiesToCountableChars from './transposeHTMLEntitiesToCountableChars';
 
-/**
- * @typedef {import('./defaultSettings').WPWordCountDefaultSettings}  WPWordCountSettings
- * @typedef {import('./defaultSettings').WPWordCountUserSettings}     WPWordCountUserSettings
- */
-
-/**
- * Possible ways of counting.
- *
- * @typedef {'words'|'characters_excluding_spaces'|'characters_including_spaces'} WPWordCountStrategy
- */
+import type { Settings, UserSettings, Strategy } from './types';
 
 /**
  * Private function to manage the settings.
  *
- * @param {WPWordCountStrategy}     type         The type of count to be done.
- * @param {WPWordCountUserSettings} userSettings Custom settings for the count.
- *
- * @return {WPWordCountSettings} The combined settings object to be used.
+ * @param type         The type of count to be done.
+ * @param userSettings Custom settings for the count.
+ * @return The combined settings object to be used.
  */
-function loadSettings( type, userSettings ) {
-	const settings = Object.assign( {}, defaultSettings, userSettings );
+function loadSettings(
+	type: Strategy = 'words',
+	userSettings: UserSettings = {}
+): Settings {
+	const mergedSettings = { ...defaultSettings, ...userSettings };
+
+	const settings: Settings = {
+		...mergedSettings,
+		type,
+		shortcodes: [],
+	};
 
 	settings.shortcodes = settings.l10n?.shortcodes ?? [];
 
@@ -43,8 +42,6 @@ function loadSettings( type, userSettings ) {
 		);
 	}
 
-	settings.type = type;
-
 	if (
 		settings.type !== 'characters_excluding_spaces' &&
 		settings.type !== 'characters_including_spaces'
@@ -58,13 +55,12 @@ function loadSettings( type, userSettings ) {
 /**
  * Count the words in text
  *
- * @param {string}              text     The text being processed
- * @param {RegExp}              regex    The regular expression pattern being matched
- * @param {WPWordCountSettings} settings Settings object containing regular expressions for each strip function
- *
- * @return {number} Count of words.
+ * @param text     The text being processed
+ * @param regex    The regular expression pattern being matched
+ * @param settings Settings object containing regular expressions for each strip function
+ * @return Count of words.
  */
-function countWords( text, regex, settings ) {
+function countWords( text: string, regex: RegExp, settings: Settings ): number {
 	text = [
 		stripTags.bind( null, settings ),
 		stripHTMLComments.bind( null, settings ),
@@ -81,13 +77,16 @@ function countWords( text, regex, settings ) {
 /**
  * Count the characters in text
  *
- * @param {string}              text     The text being processed
- * @param {RegExp}              regex    The regular expression pattern being matched
- * @param {WPWordCountSettings} settings Settings object containing regular expressions for each strip function
- *
- * @return {number} Count of characters.
+ * @param text     The text being processed
+ * @param regex    The regular expression pattern being matched
+ * @param settings Settings object containing regular expressions for each strip function
+ * @return Count of characters.
  */
-function countCharacters( text, regex, settings ) {
+function countCharacters(
+	text: string,
+	regex: RegExp,
+	settings: Settings
+): number {
 	text = [
 		stripTags.bind( null, settings ),
 		stripHTMLComments.bind( null, settings ),
@@ -103,21 +102,25 @@ function countCharacters( text, regex, settings ) {
 /**
  * Count some words.
  *
- * @param {string}                  text         The text being processed
- * @param {WPWordCountStrategy}     type         The type of count. Accepts 'words', 'characters_excluding_spaces', or 'characters_including_spaces'.
- * @param {WPWordCountUserSettings} userSettings Custom settings object.
+ * @param text         The text being processed
+ * @param type         The type of count. Accepts 'words', 'characters_excluding_spaces', or 'characters_including_spaces'.
+ * @param userSettings Custom settings object.
  *
  * @example
- * ```js
+ * ```ts
  * import { count } from '@wordpress/wordcount';
  * const numberOfWords = count( 'Words to count', 'words', {} )
  * ```
  *
- * @return {number} The word or character count.
+ * @return The word or character count.
  */
-export function count( text, type, userSettings ) {
+export function count(
+	text: string,
+	type: Strategy,
+	userSettings: UserSettings
+): number {
 	const settings = loadSettings( type, userSettings );
-	let matchRegExp;
+	let matchRegExp: RegExp;
 	switch ( settings.type ) {
 		case 'words':
 			matchRegExp = settings.wordsRegExp;
@@ -132,3 +135,6 @@ export function count( text, type, userSettings ) {
 			return 0;
 	}
 }
+
+// Export types for external usage
+export * from './types';
diff --git a/packages/wordcount/src/stripConnectors.js b/packages/wordcount/src/stripConnectors.js
deleted file mode 100644
index 1bb84a87c2dc05..00000000000000
--- a/packages/wordcount/src/stripConnectors.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Replaces items matched in the regex with spaces.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripConnectors( settings, text ) {
-	return text.replace( settings.connectorRegExp, ' ' );
-}
diff --git a/packages/wordcount/src/stripConnectors.ts b/packages/wordcount/src/stripConnectors.ts
new file mode 100644
index 00000000000000..8588c27e7b8ba9
--- /dev/null
+++ b/packages/wordcount/src/stripConnectors.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with spaces.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripConnectors(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.connectorRegExp, ' ' );
+}
diff --git a/packages/wordcount/src/stripHTMLComments.js b/packages/wordcount/src/stripHTMLComments.js
deleted file mode 100644
index 404f1703c51cd8..00000000000000
--- a/packages/wordcount/src/stripHTMLComments.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Removes items matched in the regex.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripHTMLComments( settings, text ) {
-	return text.replace( settings.HTMLcommentRegExp, '' );
-}
diff --git a/packages/wordcount/src/stripHTMLComments.ts b/packages/wordcount/src/stripHTMLComments.ts
new file mode 100644
index 00000000000000..c445f99fec94a3
--- /dev/null
+++ b/packages/wordcount/src/stripHTMLComments.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with new line.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripHTMLComments(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.HTMLcommentRegExp, '' );
+}
diff --git a/packages/wordcount/src/stripHTMLEntities.js b/packages/wordcount/src/stripHTMLEntities.js
deleted file mode 100644
index 684b8429970070..00000000000000
--- a/packages/wordcount/src/stripHTMLEntities.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Removes items matched in the regex.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripHTMLEntities( settings, text ) {
-	return text.replace( settings.HTMLEntityRegExp, '' );
-}
diff --git a/packages/wordcount/src/stripHTMLEntities.ts b/packages/wordcount/src/stripHTMLEntities.ts
new file mode 100644
index 00000000000000..d61fccf0b1ce63
--- /dev/null
+++ b/packages/wordcount/src/stripHTMLEntities.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Removes items matched in the regex.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripHTMLEntities(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.HTMLEntityRegExp, '' );
+}
diff --git a/packages/wordcount/src/stripRemovables.js b/packages/wordcount/src/stripRemovables.js
deleted file mode 100644
index 67d30e54252f6b..00000000000000
--- a/packages/wordcount/src/stripRemovables.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Removes items matched in the regex.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripRemovables( settings, text ) {
-	return text.replace( settings.removeRegExp, '' );
-}
diff --git a/packages/wordcount/src/stripRemovables.ts b/packages/wordcount/src/stripRemovables.ts
new file mode 100644
index 00000000000000..b3a9f9b82484fc
--- /dev/null
+++ b/packages/wordcount/src/stripRemovables.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with spaces.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripRemovables(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.removeRegExp, '' );
+}
diff --git a/packages/wordcount/src/stripShortcodes.js b/packages/wordcount/src/stripShortcodes.js
deleted file mode 100644
index f0d82ca5ec3582..00000000000000
--- a/packages/wordcount/src/stripShortcodes.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Replaces items matched in the regex with a new line.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripShortcodes( settings, text ) {
-	if ( settings.shortcodesRegExp ) {
-		return text.replace( settings.shortcodesRegExp, '\n' );
-	}
-	return text;
-}
diff --git a/packages/wordcount/src/stripShortcodes.ts b/packages/wordcount/src/stripShortcodes.ts
new file mode 100644
index 00000000000000..9a9dd68c229cda
--- /dev/null
+++ b/packages/wordcount/src/stripShortcodes.ts
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with a new line.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripShortcodes(
+	settings: Settings,
+	text: string
+): string {
+	if ( settings.shortcodesRegExp ) {
+		return text.replace( settings.shortcodesRegExp, '\n' );
+	}
+	return text;
+}
diff --git a/packages/wordcount/src/stripSpaces.js b/packages/wordcount/src/stripSpaces.js
deleted file mode 100644
index 4162a08e6825ad..00000000000000
--- a/packages/wordcount/src/stripSpaces.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Replaces items matched in the regex with spaces.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripSpaces( settings, text ) {
-	return text.replace( settings.spaceRegExp, ' ' );
-}
diff --git a/packages/wordcount/src/stripSpaces.ts b/packages/wordcount/src/stripSpaces.ts
new file mode 100644
index 00000000000000..182fdd79c532e6
--- /dev/null
+++ b/packages/wordcount/src/stripSpaces.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with spaces.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripSpaces(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.spaceRegExp, ' ' );
+}
diff --git a/packages/wordcount/src/stripTags.js b/packages/wordcount/src/stripTags.js
deleted file mode 100644
index 25b30b6f598adf..00000000000000
--- a/packages/wordcount/src/stripTags.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Replaces items matched in the regex with new line
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function stripTags( settings, text ) {
-	return text.replace( settings.HTMLRegExp, '\n' );
-}
diff --git a/packages/wordcount/src/stripTags.ts b/packages/wordcount/src/stripTags.ts
new file mode 100644
index 00000000000000..5f69f8a1f572ac
--- /dev/null
+++ b/packages/wordcount/src/stripTags.ts
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with new line
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function stripTags( settings: Settings, text: string ): string {
+	return text.replace( settings.HTMLRegExp, '\n' );
+}
diff --git a/packages/wordcount/src/test/index.test.js b/packages/wordcount/src/test/index.test.ts
similarity index 88%
rename from packages/wordcount/src/test/index.test.js
rename to packages/wordcount/src/test/index.test.ts
index 31980b4cfb15df..5a9b1a8ad3439e 100644
--- a/packages/wordcount/src/test/index.test.js
+++ b/packages/wordcount/src/test/index.test.ts
@@ -3,15 +3,24 @@
  */
 
 import { count } from '../';
+import type { UserSettings, Strategy } from '../types';
 
-const mockData = {
+const mockData: UserSettings = {
 	l10n: {
 		shortcodes: [ 'shortcode' ],
 	},
 };
 
+interface TestDataItem {
+	message: string;
+	string: string;
+	words: number;
+	characters_excluding_spaces: number;
+	characters_including_spaces: number;
+}
+
 describe( 'WordCounter', () => {
-	const dataProvider = [
+	const dataProvider: TestDataItem[] = [
 		{
 			message: 'Basic test.',
 			string: 'one two three',
@@ -105,7 +114,7 @@ describe( 'WordCounter', () => {
 		},
 	];
 
-	const types = [
+	const types: Strategy[] = [
 		'words',
 		'characters_excluding_spaces',
 		'characters_including_spaces',
diff --git a/packages/wordcount/src/transposeAstralsToCountableChar.js b/packages/wordcount/src/transposeAstralsToCountableChar.js
deleted file mode 100644
index 1b850349c0abf9..00000000000000
--- a/packages/wordcount/src/transposeAstralsToCountableChar.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Replaces items matched in the regex with character.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function transposeAstralsToCountableChar( settings, text ) {
-	return text.replace( settings.astralRegExp, 'a' );
-}
diff --git a/packages/wordcount/src/transposeAstralsToCountableChar.ts b/packages/wordcount/src/transposeAstralsToCountableChar.ts
new file mode 100644
index 00000000000000..3f577402b6f802
--- /dev/null
+++ b/packages/wordcount/src/transposeAstralsToCountableChar.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with a single character.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function transposeAstralsToCountableChar(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.astralRegExp, 'a' );
+}
diff --git a/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.js b/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.js
deleted file mode 100644
index f7ef0e165388fb..00000000000000
--- a/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Replaces items matched in the regex with a single character.
- *
- * @param {import('./index').WPWordCountSettings} settings The main settings object containing regular expressions
- * @param {string}                                text     The string being counted.
- *
- * @return {string} The manipulated text.
- */
-export default function transposeHTMLEntitiesToCountableChars(
-	settings,
-	text
-) {
-	return text.replace( settings.HTMLEntityRegExp, 'a' );
-}
diff --git a/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.ts b/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.ts
new file mode 100644
index 00000000000000..5ebdda1d70d86e
--- /dev/null
+++ b/packages/wordcount/src/transposeHTMLEntitiesToCountableChars.ts
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import type { Settings } from './types';
+
+/**
+ * Replaces items matched in the regex with a single character.
+ *
+ * @param settings The main settings object containing regular expressions
+ * @param text     The string being counted.
+ * @return The manipulated text.
+ */
+export default function transposeHTMLEntitiesToCountableChars(
+	settings: Settings,
+	text: string
+): string {
+	return text.replace( settings.HTMLEntityRegExp, 'a' );
+}
diff --git a/packages/wordcount/src/types.ts b/packages/wordcount/src/types.ts
new file mode 100644
index 00000000000000..752ed83fde6f84
--- /dev/null
+++ b/packages/wordcount/src/types.ts
@@ -0,0 +1,103 @@
+/**
+ * Possible ways of counting text.
+ */
+export type Strategy =
+	| 'words'
+	| 'characters_excluding_spaces'
+	| 'characters_including_spaces';
+
+/**
+ * L10n settings for word counting.
+ */
+export interface L10n {
+	/**
+	 * The type of count to perform.
+	 */
+	type?: Strategy;
+
+	/**
+	 * Array of shortcode names to be removed during counting.
+	 */
+	shortcodes?: string[];
+}
+
+/**
+ * Base settings fields that can be configured by users.
+ */
+export type UserSettings = Partial< Omit< Settings, 'type' | 'shortcodes' > >;
+
+/**
+ * Complete settings object with all required properties.
+ * This includes both static defaults and dynamic runtime properties.
+ */
+export interface Settings {
+	/**
+	 * The type of count being performed (set at runtime).
+	 */
+	type: Strategy;
+
+	/**
+	 * Regular expression that matches HTML tags.
+	 */
+	HTMLRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches HTML comments.
+	 */
+	HTMLcommentRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches spaces in HTML.
+	 */
+	spaceRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches HTML entities.
+	 */
+	HTMLEntityRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches word connectors, like em-dash.
+	 */
+	connectorRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches various characters to be removed when counting.
+	 */
+	removeRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches astral UTF-16 code points.
+	 */
+	astralRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches words.
+	 */
+	wordsRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches characters excluding spaces.
+	 */
+	characters_excluding_spacesRegExp: RegExp;
+
+	/**
+	 * Regular expression that matches characters including spaces.
+	 */
+	characters_including_spacesRegExp: RegExp;
+
+	/**
+	 * Localization settings.
+	 */
+	l10n: L10n;
+
+	/**
+	 * Array of shortcode names (set at runtime from l10n.shortcodes).
+	 */
+	shortcodes: string[];
+
+	/**
+	 * Regular expression for matching shortcodes (generated at runtime).
+	 */
+	shortcodesRegExp?: RegExp;
+}
diff --git a/phpunit/class-block-fixture-test.php b/phpunit/class-block-fixture-test.php
index adf49445261d15..841eec7fae7a21 100644
--- a/phpunit/class-block-fixture-test.php
+++ b/phpunit/class-block-fixture-test.php
@@ -26,6 +26,9 @@ public function test_kses_doesnt_change_fixtures( $block, $filename ) {
 		$block = preg_replace( "/href=['\"]data:[^'\"]+['\"]/", 'href="https://wordpress.org/foo.jpg"', $block );
 		$block = preg_replace( '/url\(data:[^)]+\)/', 'url(https://wordpress.org/foo.jpg)', $block );
 
+		// Account for a wp-env override using a port other than 8889 for the tests environment.
+		$block = preg_replace( '#http://localhost:\d+/#', home_url( '/' ), $block );
+
 		add_filter( 'wp_kses_allowed_html', array( $this, 'filter_allowed_html' ) );
 		$kses_block = wp_kses_post( $block );
 		remove_filter( 'wp_kses_allowed_html', array( $this, 'filter_allowed_html' ) );
diff --git a/phpunit/class-gutenberg-rest-server-test.php b/phpunit/class-gutenberg-rest-server-test.php
deleted file mode 100644
index 943d5b34b999ec..00000000000000
--- a/phpunit/class-gutenberg-rest-server-test.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<?php
-
-class Gutenberg_REST_Server_Test extends WP_Test_REST_TestCase {
-
-	protected static $admin_id;
-	protected static $post_id;
-
-	public static function wpSetupBeforeClass( $factory ) {
-		self::$admin_id = $factory->user->create(
-			array(
-				'role' => 'administrator',
-			)
-		);
-
-		self::$post_id = $factory->post->create();
-	}
-
-	public static function wpTearDownAfterClass() {
-		self::delete_user( self::$admin_id );
-		wp_delete_post( self::$post_id );
-	}
-
-	public function set_up() {
-		parent::set_up();
-		add_filter(
-			'wp_rest_server_class',
-			function () {
-				return 'Gutenberg_REST_Server';
-			}
-		);
-	}
-
-	public function test_populates_target_hints_for_administrator() {
-		wp_set_current_user( self::$admin_id );
-		$response = rest_do_request( '/wp/v2/posts' );
-		$post     = $response->get_data()[0];
-
-		$link = $post['_links']['self'][0];
-		$this->assertArrayHasKey( 'targetHints', $link );
-		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
-		$this->assertSame( array( 'GET', 'POST', 'PUT', 'PATCH', 'DELETE' ), $link['targetHints']['allow'] );
-	}
-
-	public function test_populates_target_hints_for_logged_out_user() {
-		$response = rest_do_request( '/wp/v2/posts' );
-		$post     = $response->get_data()[0];
-
-		$link = $post['_links']['self'][0];
-		$this->assertArrayHasKey( 'targetHints', $link );
-		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
-		$this->assertSame( array( 'GET' ), $link['targetHints']['allow'] );
-	}
-
-	public function test_does_not_error_on_invalid_urls() {
-		$response = new WP_REST_Response();
-		$response->add_link( 'self', 'this is not a real URL' );
-
-		$links = rest_get_server()::get_response_links( $response );
-		$this->assertArrayNotHasKey( 'targetHints', $links['self'][0] );
-	}
-
-	public function test_does_not_error_on_bad_rest_api_routes() {
-		$response = new WP_REST_Response();
-		$response->add_link( 'self', rest_url( '/this/is/not/a/real/route' ) );
-
-		$links = rest_get_server()::get_response_links( $response );
-		$this->assertArrayNotHasKey( 'targetHints', $links['self'][0] );
-	}
-
-	public function test_prefers_developer_defined_target_hints() {
-		$response = new WP_REST_Response();
-		$response->add_link(
-			'self',
-			'/wp/v2/posts/' . self::$post_id,
-			array(
-				'targetHints' => array(
-					'allow' => array( 'GET', 'PUT' ),
-				),
-			)
-		);
-
-		$links = rest_get_server()::get_response_links( $response );
-		$link  = $links['self'][0];
-		$this->assertArrayHasKey( 'targetHints', $link );
-		$this->assertArrayHasKey( 'allow', $link['targetHints'] );
-		$this->assertSame( array( 'GET', 'PUT' ), $link['targetHints']['allow'] );
-	}
-}
diff --git a/phpunit/class-gutenberg-rest-templates-controller-test.php b/phpunit/class-gutenberg-rest-templates-controller-test.php
deleted file mode 100644
index b69416c675305b..00000000000000
--- a/phpunit/class-gutenberg-rest-templates-controller-test.php
+++ /dev/null
@@ -1,119 +0,0 @@
-<?php
-/**
- * Unit tests covering Gutenberg_REST_Templates_Controller_6_7 functionality.
- */
-class Gutenberg_REST_Templates_Controller_6_7_Test extends WP_Test_REST_Controller_Testcase {
-
-	/**
-	 * @var int
-	 */
-	protected static $admin_id;
-
-	public static function wpSetupBeforeClass( $factory ) {
-		self::$admin_id = $factory->user->create(
-			array(
-				'role' => 'administrator',
-			)
-		);
-	}
-
-	public static function wpTearDownAfterClass() {
-		self::delete_user( self::$admin_id );
-	}
-
-	public function test_get_item() {
-		wp_set_current_user( self::$admin_id );
-
-		$template_name = 'test-plugin//test-template';
-		$args          = array(
-			'content'     => 'Template content',
-			'title'       => 'Test Template',
-			'description' => 'Description of test template',
-			'post_types'  => array( 'post', 'page' ),
-		);
-
-		register_block_template( $template_name, $args );
-
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
-		$response = rest_get_server()->dispatch( $request );
-
-		$this->assertNotWPError( $response, "Fetching a registered template shouldn't cause an error." );
-
-		$data = $response->get_data();
-
-		$this->assertSame( 'default//test-template', $data['id'], 'Template ID mismatch.' );
-		$this->assertSame( 'default', $data['theme'], 'Template theme mismatch.' );
-		$this->assertSame( 'Template content', $data['content']['raw'], 'Template content mismatch.' );
-		$this->assertSame( 'test-template', $data['slug'], 'Template slug mismatch.' );
-		$this->assertSame( 'plugin', $data['source'], "Template source should be 'plugin'." );
-		$this->assertSame( 'plugin', $data['origin'], "Template origin should be 'plugin'." );
-		$this->assertSame( 'test-plugin', $data['author_text'], 'Template author text mismatch.' );
-		$this->assertSame( 'Description of test template', $data['description'], 'Template description mismatch.' );
-		$this->assertSame( 'Test Template', $data['title']['rendered'], 'Template title mismatch.' );
-		$this->assertSame( 'test-plugin', $data['plugin'], 'Plugin name mismatch.' );
-
-		unregister_block_template( $template_name );
-
-		$request  = new WP_REST_Request( 'GET', '/wp/v2/templates/test-plugin//test-template' );
-		$response = rest_get_server()->dispatch( $request );
-
-		$this->assertNotWPError( $response, "Fetching an unregistered template shouldn't cause an error." );
-		$this->assertSame( 404, $response->get_status(), 'Fetching an unregistered template should return 404.' );
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_register_routes() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_items() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_create_item() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_update_item() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_delete_item() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_context_param() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_prepare_item() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-
-	/**
-	 * @doesNotPerformAssertions
-	 */
-	public function test_get_item_schema() {
-		// Already present in core test class: Tests_REST_WpRestTemplatesController.
-	}
-}
diff --git a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
index c9453f4bd8e5c3..343e6edd1400d0 100644
--- a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -166,7 +166,7 @@ public function test_get_theme_items() {
 					),
 					'wp:theme-file' => array(
 						array(
-							'href'   => 'http://localhost:8889/wp-content/themes/emptytheme/img/1024x768_emptytheme_test_image.jpg',
+							'href'   => home_url( '/wp-content/themes/emptytheme/img/1024x768_emptytheme_test_image.jpg' ),
 							'name'   => 'file:./img/1024x768_emptytheme_test_image.jpg',
 							'target' => 'styles.background.backgroundImage.url',
 							'type'   => 'image/jpeg',
diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
index d2339f2496290c..d2f5c32f4d9439 100644
--- a/phpunit/class-wp-theme-json-resolver-test.php
+++ b/phpunit/class-wp-theme-json-resolver-test.php
@@ -1161,12 +1161,12 @@ public function test_theme_shadow_presets_do_not_override_default_shadow_presets
 				),
 				array(
 					'name'   => 'Outlined',
-					'shadow' => '6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)',
+					'shadow' => '6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)',
 					'slug'   => 'outlined',
 				),
 				array(
 					'name'   => 'Crisp',
-					'shadow' => '6px 6px 0px rgba(0, 0, 0, 1)',
+					'shadow' => '6px 6px 0px rgb(0, 0, 0)',
 					'slug'   => 'crisp',
 				),
 			),
diff --git a/phpunit/script-dependencies-test.php b/phpunit/script-dependencies-test.php
index 66f5c0a7e3dc57..75064dd49cef89 100644
--- a/phpunit/script-dependencies-test.php
+++ b/phpunit/script-dependencies-test.php
@@ -4,7 +4,13 @@
  * @group script-dependencies
  */
 class Test_Script_Dependencies extends WP_UnitTestCase {
-	public $bundled_scripts = array( 'wp-upload-media' );
+	/**
+	 * The `wp-fileds` was accidintally bundled in WP 6.7, but removed later.
+	 * It's is listed here to avoid breaking previous WP version tests.
+	 *
+	 * @var array
+	 */
+	public $bundled_scripts = array( 'wp-upload-media', 'wp-fields' );
 
 	/**
 	 * Tests for accidental `wp-polyfill` script dependents.
diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
index d94103323fe792..a5b27ab4e4be5e 100644
--- a/platform-docs/package-lock.json
+++ b/platform-docs/package-lock.json
@@ -200,81 +200,19 @@
 			}
 		},
 		"node_modules/@babel/code-frame": {
-			"version": "7.23.5",
-			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-			"integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+			"version": "7.26.2",
+			"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+			"integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/highlight": "^7.23.4",
-				"chalk": "^2.4.2"
+				"@babel/helper-validator-identifier": "^7.25.9",
+				"js-tokens": "^4.0.0",
+				"picocolors": "^1.0.0"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
-		"node_modules/@babel/code-frame/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-		},
-		"node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/code-frame/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-			"dependencies": {
-				"has-flag": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/@babel/compat-data": {
 			"version": "7.23.5",
 			"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
@@ -605,17 +543,19 @@
 			}
 		},
 		"node_modules/@babel/helper-string-parser": {
-			"version": "7.23.4",
-			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-			"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+			"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
 		"node_modules/@babel/helper-validator-identifier": {
-			"version": "7.22.20",
-			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-			"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+			"version": "7.25.9",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+			"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -642,99 +582,26 @@
 			}
 		},
 		"node_modules/@babel/helpers": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
-			"integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
-			"dependencies": {
-				"@babel/template": "^7.24.0",
-				"@babel/traverse": "^7.24.0",
-				"@babel/types": "^7.24.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
-		"node_modules/@babel/highlight": {
-			"version": "7.23.4",
-			"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-			"integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+			"integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-validator-identifier": "^7.22.20",
-				"chalk": "^2.4.2",
-				"js-tokens": "^4.0.0"
+				"@babel/template": "^7.27.0",
+				"@babel/types": "^7.27.0"
 			},
 			"engines": {
 				"node": ">=6.9.0"
 			}
 		},
-		"node_modules/@babel/highlight/node_modules/ansi-styles": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-			"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-			"dependencies": {
-				"color-convert": "^1.9.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/chalk": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-			"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-			"dependencies": {
-				"ansi-styles": "^3.2.1",
-				"escape-string-regexp": "^1.0.5",
-				"supports-color": "^5.3.0"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-convert": {
-			"version": "1.9.3",
-			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-			"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-			"dependencies": {
-				"color-name": "1.1.3"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/color-name": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-			"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
-		},
-		"node_modules/@babel/highlight/node_modules/escape-string-regexp": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-			"integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/has-flag": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-			"integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/highlight/node_modules/supports-color": {
-			"version": "5.5.0",
-			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-			"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+		"node_modules/@babel/parser": {
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+			"integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
+			"license": "MIT",
 			"dependencies": {
-				"has-flag": "^3.0.0"
+				"@babel/types": "^7.27.0"
 			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/@babel/parser": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
-			"integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
 			"bin": {
 				"parser": "bin/babel-parser.js"
 			},
@@ -2054,9 +1921,10 @@
 			}
 		},
 		"node_modules/@babel/runtime-corejs3": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.24.0.tgz",
-			"integrity": "sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==",
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.27.0.tgz",
+			"integrity": "sha512-UWjX6t+v+0ckwZ50Y5ShZLnlk95pP5MyW/pon9tiYzl3+18pkTHTFNTKr7rQbfRXPkowt2QAn30o1b6oswszew==",
+			"license": "MIT",
 			"dependencies": {
 				"core-js-pure": "^3.30.2",
 				"regenerator-runtime": "^0.14.0"
@@ -2066,13 +1934,14 @@
 			}
 		},
 		"node_modules/@babel/template": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
-			"integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+			"integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/code-frame": "^7.23.5",
-				"@babel/parser": "^7.24.0",
-				"@babel/types": "^7.24.0"
+				"@babel/code-frame": "^7.26.2",
+				"@babel/parser": "^7.27.0",
+				"@babel/types": "^7.27.0"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -2099,13 +1968,13 @@
 			}
 		},
 		"node_modules/@babel/types": {
-			"version": "7.24.0",
-			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
-			"integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+			"version": "7.27.0",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+			"integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
+			"license": "MIT",
 			"dependencies": {
-				"@babel/helper-string-parser": "^7.23.4",
-				"@babel/helper-validator-identifier": "^7.22.20",
-				"to-fast-properties": "^2.0.0"
+				"@babel/helper-string-parser": "^7.25.9",
+				"@babel/helper-validator-identifier": "^7.25.9"
 			},
 			"engines": {
 				"node": ">=6.9.0"
@@ -4980,9 +4849,9 @@
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
 		},
 		"node_modules/cookie": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"version": "0.7.1",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+			"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
 			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
@@ -6268,9 +6137,9 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.21.0",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-			"integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+			"version": "4.21.2",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+			"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
 			"license": "MIT",
 			"dependencies": {
 				"accepts": "~1.3.8",
@@ -6278,7 +6147,7 @@
 				"body-parser": "1.20.3",
 				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
-				"cookie": "0.6.0",
+				"cookie": "0.7.1",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
@@ -6292,7 +6161,7 @@
 				"methods": "~1.1.2",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.10",
+				"path-to-regexp": "0.1.12",
 				"proxy-addr": "~2.0.7",
 				"qs": "6.13.0",
 				"range-parser": "~1.2.1",
@@ -6307,6 +6176,10 @@
 			},
 			"engines": {
 				"node": ">= 0.10.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/express"
 			}
 		},
 		"node_modules/express/node_modules/content-disposition": {
@@ -6334,9 +6207,9 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
 		"node_modules/express/node_modules/path-to-regexp": {
-			"version": "0.1.10",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-			"integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+			"version": "0.1.12",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+			"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
 			"license": "MIT"
 		},
 		"node_modules/express/node_modules/range-parser": {
@@ -11157,15 +11030,16 @@
 			}
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"version": "3.3.11",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
 			"funding": [
 				{
 					"type": "github",
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
@@ -12393,9 +12267,10 @@
 			}
 		},
 		"node_modules/prismjs": {
-			"version": "1.29.0",
-			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
-			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+			"version": "1.30.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+			"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -14387,14 +14262,6 @@
 			"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
 			"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
 		},
-		"node_modules/to-fast-properties": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-			"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-			"engines": {
-				"node": ">=4"
-			}
-		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/readme.txt b/readme.txt
index 066de4a678a552..1abe0d792f4dc9 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,6 +1,6 @@
 === Gutenberg ===
 Contributors: matveb, joen, karmatosed
-Tested up to: 6.7
+Tested up to: 6.8
 Stable tag: V.V.V
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
diff --git a/schemas/json/block.json b/schemas/json/block.json
index 8e314a45ae1cff..4b7a7e650e8777 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -185,6 +185,11 @@
 							"description": "Although attributes may be obtained from a post’s meta, meta attribute sources are considered deprecated; EntityProvider and related hook APIs should be used instead, as shown in the Create Meta Block how-to here:\n\nhttps://developer.wordpress.org/block-editor/how-to-guides/metabox/#step-2-add-meta-block",
 							"type": "string"
 						},
+						"role": {
+							"description": "Designates the conceptual type of the attribute.\n\nThe `content` value marks the attribute as user-editable content, and the `local` value marks the attribute as temporary and non-persistable.",
+							"type": "string",
+							"enum": [ "content", "local" ]
+						},
 						"default": {
 							"description": "A block attribute can contain a default value, which will be used if the type and source do not match anything within the block content.\n\nThe value is provided by the default field, and the value should match the expected format of the attribute."
 						}
@@ -740,7 +745,7 @@
 			}
 		},
 		"styles": {
-			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles",
+			"description": "Block styles can be used to provide alternative styles to block. It works by adding a class name to the block’s wrapper. Using CSS, a theme developer can target the class name for the block style if it is selected.\n\nPlugins and Themes can also register custom block style for existing blocks.\n\nhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/",
 			"type": "array",
 			"items": {
 				"type": "object",
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 158b72e648cc2d..bdb66bab429e99 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -3,9 +3,9 @@
 	"$schema": "http://json-schema.org/draft-07/schema#",
 	"definitions": {
 		"//": {
-			"explainer": "https://developer.wordpress.org/themes/advanced-topics/theme-json/",
+			"explainer": "https://developer.wordpress.org/themes/global-settings-and-styles/",
 			"createTheme": "https://developer.wordpress.org/themes/",
-			"reference": "https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/"
+			"reference": "https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles/"
 		},
 		"refComplete": {
 			"type": "object",
@@ -2579,15 +2579,15 @@
 			"const": 3
 		},
 		"title": {
-			"description": "Title of the global styles variation. If not defined, the file name will be used.",
+			"description": "Title of the styles variation. If not defined, the file name will be used.",
 			"type": "string"
 		},
 		"slug": {
-			"description": "Slug of the global styles variation. If not defined, the kebab-case title will be used.",
+			"description": "Slug of the styles variation. If not defined, the kebab-case title will be used.",
 			"type": "string"
 		},
 		"description": {
-			"description": "Description of the global styles variation.",
+			"description": "Description of the styles variation.",
 			"type": "string"
 		},
 		"blockTypes": {
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index b4bc99f06c9b4a..7830a934529aa4 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -60,7 +60,7 @@ test.describe( 'Buttons', () => {
 		).toBeFocused();
 		await pageUtils.pressKeys( 'primary+k' );
 		await expect(
-			page.locator( 'role=combobox[name="Link"i]' )
+			page.locator( 'role=combobox[name="Search or type URL"i]' )
 		).toBeFocused();
 		await page.keyboard.press( 'Escape' );
 		await expect(
@@ -91,7 +91,7 @@ test.describe( 'Buttons', () => {
 		).toBeFocused();
 		await pageUtils.pressKeys( 'primary+k' );
 		await expect(
-			page.locator( 'role=combobox[name="Link"i]' )
+			page.locator( 'role=combobox[name="Search or type URL"i]' )
 		).toBeFocused();
 		await page.keyboard.type( 'https://example.com' );
 		await page.keyboard.press( 'Enter' );
@@ -123,7 +123,9 @@ test.describe( 'Buttons', () => {
 		).toBeFocused();
 		await pageUtils.pressKeys( 'primary+k' );
 
-		const urlInput = page.locator( 'role=combobox[name="Link"i]' );
+		const urlInput = page.locator(
+			'role=combobox[name="Search or type URL"i]'
+		);
 
 		await expect( urlInput ).toBeFocused();
 		await page.keyboard.type( 'example.com' );
diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js
index bd7ccb2280d09e..f9578ef3151d27 100644
--- a/test/e2e/specs/editor/blocks/classic.spec.js
+++ b/test/e2e/specs/editor/blocks/classic.spec.js
@@ -59,13 +59,13 @@ test.describe( 'Classic', () => {
 		await expect( modalGalleryTab ).toBeVisible();
 		await modalGalleryTab.click();
 
-		const filename = await mediaUtils.upload(
+		const fileName = await mediaUtils.upload(
 			page.locator( '.media-modal .moxie-shim input[type=file]' )
 		);
 
 		// Wait for upload
 		await expect(
-			page.locator( `role=checkbox[name="${ filename }"i]` )
+			page.locator( `role=checkbox[name="${ fileName }"i]` )
 		).toBeChecked();
 
 		const createGallery = page.getByRole( 'button', {
@@ -161,12 +161,12 @@ class MediaUtils {
 		const tmpDirectory = await fs.mkdtemp(
 			path.join( os.tmpdir(), 'gutenberg-test-image-' )
 		);
-		const filename = uuid();
-		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
+		const fileName = uuid();
+		const tmpFileName = path.join( tmpDirectory, fileName + '.png' );
 		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
 
 		await inputElement.setInputFiles( tmpFileName );
 
-		return filename;
+		return fileName;
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index 29262aef810d21..56552d63032df5 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -407,4 +407,73 @@ test.describe( 'Columns', () => {
 			},
 		] );
 	} );
+
+	test.describe( 'Template Lock', () => {
+		for ( const templateLock of [ 'all', 'insert', 'contentOnly' ] ) {
+			test( `templateLock="${ templateLock }" should hide column count control`, async ( {
+				editor,
+				page,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/columns',
+					attributes: { templateLock },
+					innerBlocks: [
+						{
+							name: 'core/column',
+							innerBlocks: [
+								{
+									name: 'core/paragraph',
+									attributes: { content: 'Col 1' },
+								},
+							],
+						},
+					],
+				} );
+				await editor.openDocumentSettingsSidebar();
+
+				await expect(
+					page.getByRole( 'slider', { name: 'Columns' } )
+				).toBeHidden();
+			} );
+		}
+
+		test( 'templateLock=false should show column count control inside locked parent', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.insertBlock( {
+				name: 'core/group',
+				attributes: {
+					templateLock: 'insert',
+					layout: { type: 'constrained' },
+				},
+				innerBlocks: [
+					{
+						name: 'core/columns',
+						attributes: { templateLock: false },
+						innerBlocks: [
+							{
+								name: 'core/column',
+								innerBlocks: [
+									{
+										name: 'core/paragraph',
+										attributes: { content: 'Col 1' },
+									},
+								],
+							},
+						],
+					},
+				],
+			} );
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Columns' )
+			);
+
+			await editor.openDocumentSettingsSidebar();
+
+			await expect(
+				page.getByRole( 'slider', { name: 'Columns' } )
+			).toBeVisible();
+		} );
+	} );
 } );
diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js
index 7fddb22f6a763b..051121ad3c379c 100644
--- a/test/e2e/specs/editor/blocks/comments.spec.js
+++ b/test/e2e/specs/editor/blocks/comments.spec.js
@@ -76,9 +76,7 @@ test.describe( 'Comments', () => {
 		}
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// We check that there is a previous comments page link.
 		await expect(
@@ -130,9 +128,7 @@ test.describe( 'Comments', () => {
 		}
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// We check that there are no comments page link.
 		await expect(
@@ -195,9 +191,7 @@ test.describe( 'Comments', () => {
 		} );
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check that the Comment Template block (an inner block) is rendered.
 		await expect(
@@ -226,9 +220,7 @@ test.describe( 'Comments', () => {
 		} );
 
 		// Visit the post that was just published.
-		await page.click(
-			'role=region[name="Editor publish"] >> role=link[name="View Post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check that the Comment Template block (an inner block) is NOT rendered.
 		await expect(
diff --git a/test/e2e/specs/editor/blocks/cover.spec.js b/test/e2e/specs/editor/blocks/cover.spec.js
index bee2548c2305d2..263eff2bc7fa4f 100644
--- a/test/e2e/specs/editor/blocks/cover.spec.js
+++ b/test/e2e/specs/editor/blocks/cover.spec.js
@@ -57,10 +57,10 @@ test.describe( 'Cover', () => {
 			name: 'Block: Cover',
 		} );
 
-		const filename = await coverBlockUtils.upload(
+		const fileName = await coverBlockUtils.upload(
 			coverBlock.getByTestId( 'form-file-upload-input' )
 		);
-		const fileBasename = path.basename( filename );
+		const fileBasename = path.basename( fileName );
 
 		// Wait for the img's src attribute to be prefixed with http.
 		// Otherwise, the URL for the img src attribute starts is a placeholder
@@ -297,6 +297,52 @@ test.describe( 'Cover', () => {
 
 		expect( isClickable ).toBe( false );
 	} );
+
+	test( 'can use focal point picker to set the focal point of the cover image', async ( {
+		editor,
+		coverBlockUtils,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/cover' } );
+		const coverBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Cover',
+		} );
+
+		await coverBlockUtils.upload(
+			coverBlock.getByTestId( 'form-file-upload-input' )
+		);
+
+		await editor.selectBlocks( coverBlock );
+
+		const focalPointLeft = page.getByRole( 'spinbutton', {
+			name: 'Focal point left position',
+		} );
+
+		const focalPointTop = page.getByRole( 'spinbutton', {
+			name: 'Focal point top position',
+		} );
+
+		await focalPointLeft.fill( '20' );
+		await focalPointTop.fill( '30' );
+
+		await expect( focalPointLeft ).toHaveValue( '20' );
+		await expect( focalPointTop ).toHaveValue( '30' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/cover',
+				attributes: {
+					focalPoint: { x: 0.2, y: 0.3 },
+				},
+			},
+		] );
+
+		const coverImage = coverBlock.locator(
+			'img.wp-block-cover__image-background'
+		);
+
+		await expect( coverImage ).toHaveCSS( 'object-position', '20% 30%' );
+	} );
 } );
 
 class CoverBlockUtils {
@@ -318,12 +364,12 @@ class CoverBlockUtils {
 		const tmpDirectory = await fs.mkdtemp(
 			path.join( os.tmpdir(), 'gutenberg-test-image-' )
 		);
-		const filename = uuid();
-		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
+		const fileName = uuid();
+		const tmpFileName = path.join( tmpDirectory, fileName + '.png' );
 		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
 
 		await locator.setInputFiles( tmpFileName );
 
-		return filename;
+		return fileName;
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/details.spec.js b/test/e2e/specs/editor/blocks/details.spec.js
new file mode 100644
index 00000000000000..2b7e954b6eeaad
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/details.spec.js
@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Details', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can toggle hidden blocks by pressing enter', async ( {
+		editor,
+		page,
+	} ) => {
+		// Insert a details block with empty inner blocks.
+		await editor.insertBlock( {
+			name: 'core/details',
+			attributes: {
+				summary: 'Details summary',
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Details content',
+					},
+				},
+			],
+		} );
+
+		// Open the details block.
+		await page.keyboard.press( 'Enter' );
+
+		// The inner block should be visible.
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
+		).toContainText( 'Details content' );
+
+		// Close the details block.
+		await page.keyboard.press( 'Enter' );
+
+		// The inner block should be hidden.
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
+		).toBeHidden();
+	} );
+
+	test( 'can create a multiline summary with Shift+Enter', async ( {
+		editor,
+		page,
+	} ) => {
+		// Insert a details block.
+		await editor.insertBlock( {
+			name: 'core/details',
+		} );
+
+		const summary = editor.canvas.getByRole( 'textbox', {
+			name: 'Write summary',
+		} );
+
+		// Add a multiline summary.
+		await summary.type( 'First line' );
+		await page.keyboard.press( 'Shift+Enter' );
+		await summary.type( 'Second line' );
+
+		// Verify the summary is multiline.
+		await expect( summary ).toHaveText( 'First line\nSecond line', {
+			useInnerText: true,
+		} );
+	} );
+
+	test( 'typing space in summary rich-text should not toggle details', async ( {
+		editor,
+	} ) => {
+		// Insert a details block.
+		await editor.insertBlock( {
+			name: 'core/details',
+		} );
+
+		const summary = editor.canvas.getByRole( 'textbox', {
+			name: 'Write summary',
+		} );
+
+		// Type space in the summary rich-text.
+		await summary.type( ' ' );
+
+		// Verify the details block is not toggled.
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Empty block' } )
+		).toBeHidden();
+	} );
+
+	test( 'selecting hidden blocks in list view expands details and focuses content', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Insert a details block.
+		await editor.insertBlock( {
+			name: 'core/details',
+			attributes: {
+				summary: 'Details summary',
+			},
+			innerBlocks: [
+				{
+					name: 'core/paragraph',
+					attributes: {
+						content: 'Details content',
+					},
+				},
+			],
+		} );
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		// Open the list view.
+		await pageUtils.pressKeys( 'access+o' );
+
+		// Verify inner blocks appear in the list view.
+		await page.keyboard.press( 'ArrowRight' );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Paragraph',
+			} )
+		).toBeVisible();
+
+		// Verify the first inner block in the list view is focused.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect(
+			listView.getByRole( 'link', {
+				name: 'Paragraph',
+			} )
+		).toBeFocused();
+
+		// Verify the first inner block in the editor canvas is focused.
+		await page.keyboard.press( 'Enter' );
+		await expect(
+			editor.canvas.getByRole( 'document', { name: 'Block: Paragraph' } )
+		).toBeFocused();
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js
index ef693cb8b5bb9e..5ff1af05ba5c37 100644
--- a/test/e2e/specs/editor/blocks/gallery.spec.js
+++ b/test/e2e/specs/editor/blocks/gallery.spec.js
@@ -98,16 +98,16 @@ test.describe( 'Gallery', () => {
 		);
 		await expect( galleryBlock ).toBeVisible();
 
-		const filename = await galleryBlockUtils.upload(
+		const fileName = await galleryBlockUtils.upload(
 			galleryBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
 		const image = galleryBlock.locator( 'role=img' );
 		await expect( image ).toBeVisible();
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		const regex = new RegExp(
-			`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"(?:full|large)\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image (?:size-full|size-large)\\"><img src=\\"[^"]+\/${ filename }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
+			`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"(?:full|large)\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image (?:size-full|size-large)\\"><img src=\\"[^"]+\/${ fileName }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
 		);
 		await expect.poll( editor.getEditedPostContent ).toMatch( regex );
 	} );
@@ -239,12 +239,12 @@ class GalleryBlockUtils {
 		const tmpDirectory = await fs.mkdtemp(
 			path.join( os.tmpdir(), 'gutenberg-test-image-' )
 		);
-		const filename = uuid();
-		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
+		const fileName = uuid();
+		const tmpFileName = path.join( tmpDirectory, fileName + '.png' );
 		await fs.copyFile( this.TEST_IMAGE_FILE_PATH, tmpFileName );
 
 		await inputElement.setInputFiles( tmpFileName );
 
-		return filename;
+		return fileName;
 	}
 }
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 35c9340e9b923c..a27627da678ec3 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -43,7 +43,7 @@ test.describe( 'Image', () => {
 		);
 		await expect( imageBlock ).toBeVisible();
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
@@ -51,11 +51,11 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 		await expect( image ).toBeVisible();
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		const regex = new RegExp(
 			`<!-- wp:image {"id":(\\d+),"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
+<figure class="wp-block-image size-full"><img src="[^"]+\\/${ fileName }\\.png" alt="" class="wp-image-\\1"/></figure>
 <!-- \\/wp:image -->`
 		);
 		expect( await editor.getEditedPostContent() ).toMatch( regex );
@@ -75,10 +75,10 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 		await editor.clickBlockToolbarButton( 'Add caption' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
@@ -240,11 +240,11 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		// Assert that the image is initially unscaled and unedited.
 		const initialImageSrc = await image.getAttribute( 'src' );
@@ -308,11 +308,11 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		// Assert that the image is initially unscaled and unedited.
 		const initialImageSrc = await image.getAttribute( 'src' );
@@ -367,11 +367,11 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		// Rotate the image.
 		await editor.clickBlockToolbarButton( 'Crop' );
@@ -405,11 +405,11 @@ test.describe( 'Image', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 		await editor.canvas.locator( '.wp-block-image' ).focus();
 		await pageUtils.pressKeys( 'primary+z' );
 
@@ -590,7 +590,7 @@ test.describe( 'Image', () => {
 		);
 		await expect( imageBlock ).toBeVisible();
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
@@ -600,7 +600,7 @@ test.describe( 'Image', () => {
 		await expect( imageInEditor ).toBeVisible();
 		await expect( imageInEditor ).toHaveAttribute(
 			'src',
-			new RegExp( filename )
+			new RegExp( fileName )
 		);
 
 		const postId = await editor.publishPost();
@@ -613,7 +613,7 @@ test.describe( 'Image', () => {
 		await expect( imageDom ).toBeVisible();
 		await expect( imageDom ).toHaveAttribute(
 			'src',
-			new RegExp( filename )
+			new RegExp( fileName )
 		);
 	} );
 
@@ -1037,7 +1037,7 @@ test.describe( 'Image - Site editor', () => {
 		);
 		await expect( imageBlock ).toBeVisible();
 
-		const filename = await imageBlockUtils.upload(
+		const fileName = await imageBlockUtils.upload(
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 
@@ -1045,11 +1045,11 @@ test.describe( 'Image - Site editor', () => {
 			name: 'This image has an empty alt attribute',
 		} );
 		await expect( image ).toBeVisible();
-		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
+		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		const regex = new RegExp(
 			`<!-- wp:image {"id":(\\d+),"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\1"/></figure>
+<figure class="wp-block-image size-full"><img src="[^"]+\\/${ fileName }\\.png" alt="" class="wp-image-\\1"/></figure>
 <!-- \\/wp:image -->`
 		);
 		expect( await editor.getEditedPostContent() ).toMatch( regex );
@@ -1072,16 +1072,16 @@ class ImageBlockUtils {
 		const tmpDirectory = await fs.mkdtemp(
 			path.join( os.tmpdir(), 'gutenberg-test-image-' )
 		);
-		const filename = uuid();
-		const tmpFileName = path.join( tmpDirectory, filename + '.png' );
-		const filepath = customFile
+		const fileName = uuid();
+		const tmpFileName = path.join( tmpDirectory, fileName + '.png' );
+		const filePath = customFile
 			? path.join( this.basePath, customFile )
 			: this.TEST_IMAGE_FILE_PATH;
-		await fs.copyFile( filepath, tmpFileName );
+		await fs.copyFile( filePath, tmpFileName );
 
 		await inputElement.setInputFiles( tmpFileName );
 
-		return filename;
+		return fileName;
 	}
 
 	async getImageBuffer( url ) {
diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
index da4910f7d3cc09..b73d218aa61868 100644
--- a/test/e2e/specs/editor/blocks/links.spec.js
+++ b/test/e2e/specs/editor/blocks/links.spec.js
@@ -116,7 +116,7 @@ test.describe( 'Links', () => {
 
 		await expect(
 			page.getByRole( 'combobox', {
-				name: 'Link',
+				name: 'Search or type URL',
 			} )
 		).toHaveValue( '' );
 	} );
@@ -361,7 +361,7 @@ test.describe( 'Links', () => {
 		await pageUtils.pressKeys( 'primary+k' );
 
 		const urlInput = page.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		// Expect the "Link" combobox to be visible and focused
diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
index 75ba370072e342..47a1656f15abda 100644
--- a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
@@ -256,6 +256,15 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			// Tab outside the complex submenu.
 			await page.keyboard.press( 'Tab' );
 			await expect( firstLevelElement ).toBeHidden();
+
+			// Test: nested submenu closes on ESC key and focuses parent menu item:
+			// See: https://github.com/WordPress/gutenberg/issues/69834
+			await complexSubmenuButton.click();
+			await nestedSubmenuButton.click();
+			await expect( secondLevelElement ).toBeVisible();
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( secondLevelElement ).toBeHidden();
+			await expect( nestedSubmenuButton ).toBeFocused();
 		} );
 
 		/**
@@ -344,6 +353,15 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			await page.click( 'body' );
 			await expect( firstLevelElement ).toBeHidden();
 
+			// Test: nested submenu closes on ESC key and focuses parent menu item:
+			// See: https://github.com/WordPress/gutenberg/issues/69834
+			await complexSubmenuButton.click();
+			await nestedSubmenuButton.click();
+			await expect( secondLevelElement ).toBeVisible();
+			await pageUtils.pressKeys( 'Escape' );
+			await expect( secondLevelElement ).toBeHidden();
+			await expect( nestedSubmenuButton ).toBeFocused();
+
 			// Tests not covered: Tabbing to close menus
 		} );
 	} );
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
index 30a846e9f06089..47313590f65794 100644
--- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -591,7 +591,7 @@ class LinkControl {
 
 	getSearchInput() {
 		return this.page.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 	}
 
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index 75befdf5ebe9d9..83e95a08c0f6a2 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -276,7 +276,7 @@ test.describe( 'Navigation block', () => {
 			await pageUtils.pressKeys( 'ArrowDown' );
 
 			// remove the child link
-			await pageUtils.pressKeys( 'primaryShift+Backspace' );
+			await pageUtils.pressKeys( 'access+z' );
 
 			const submenuBlock2 = editor.canvas.getByRole( 'document', {
 				name: 'Block: Submenu',
@@ -494,7 +494,7 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );
 		await navigation.checkLabelFocus( 'wordpress.org' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		// Focus moved to sibling
 		await navigation.checkLabelFocus( 'Dog' );
 		// Add a link back so we can delete the first submenu link and see if focus returns to the parent submenu item
@@ -507,15 +507,15 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
 		await navigation.checkLabelFocus( 'Dog' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await pageUtils.pressKeys( 'ArrowDown' );
 		// Focus moved to parent submenu item
 		await navigation.checkLabelFocus( 'example.com' );
 		// Deleting this should move focus to the sibling item
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await navigation.checkLabelFocus( 'Cat' );
 		// Deleting with no more siblings should focus the navigation block again
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await expect( navBlock ).toBeFocused();
 		// Wait until the nav block inserter is visible before we continue.
 		await expect( navBlockInserter ).toBeVisible();
@@ -615,7 +615,7 @@ class Navigation {
 
 	getLinkControlSearch() {
 		return this.page.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 	}
 
@@ -668,7 +668,7 @@ class Navigation {
 	 */
 	async addPage( label ) {
 		const linkControlSearch = this.page.getByRole( 'combobox', {
-			name: 'Link',
+			name: 'Search or type URL',
 		} );
 
 		await expect( linkControlSearch ).toBeFocused();
diff --git a/test/e2e/specs/editor/plugins/block-api.spec.js b/test/e2e/specs/editor/plugins/block-api.spec.js
index dd2a89cd2beca2..4bb30eb8cfcbe2 100644
--- a/test/e2e/specs/editor/plugins/block-api.spec.js
+++ b/test/e2e/specs/editor/plugins/block-api.spec.js
@@ -17,12 +17,12 @@ test.describe( 'Using Block API', () => {
 		editor,
 	} ) => {
 		await admin.createNewPost();
-
 		await editor.insertBlock( { name: 'e2e-tests/hello-world' } );
 
-		const block = editor.canvas.locator(
-			'[data-type="e2e-tests/hello-world"]'
-		);
-		await expect( block ).toHaveText( 'Hello Editor!' );
+		await expect(
+			editor.canvas.getByRole( 'document', {
+				name: 'Block: Filtered Hello World',
+			} )
+		).toBeVisible();
 	} );
 } );
diff --git a/test/e2e/specs/editor/plugins/image-size.spec.js b/test/e2e/specs/editor/plugins/image-size.spec.js
index 1e0bc91407565d..674eb907d2fab7 100644
--- a/test/e2e/specs/editor/plugins/image-size.spec.js
+++ b/test/e2e/specs/editor/plugins/image-size.spec.js
@@ -28,17 +28,17 @@ test.describe( 'changing image size', () => {
 		page,
 		requestUtils,
 	} ) => {
-		const filename = '1024x768_e2e_test_image_size.jpeg';
-		const filepath = path.join( './test/e2e/assets', filename );
+		const fileName = '1024x768_e2e_test_image_size.jpeg';
+		const filePath = path.join( './test/e2e/assets', fileName );
 
 		await admin.createNewPost();
-		const media = await requestUtils.uploadMedia( filepath );
+		const media = await requestUtils.uploadMedia( filePath );
 
 		await editor.insertBlock( {
 			name: 'core/image',
 			attributes: {
 				// Specify alt text so that it can be queried by role selectors.
-				alt: filename,
+				alt: fileName,
 				id: media.id,
 				url: media.source_url,
 			},
@@ -52,7 +52,7 @@ test.describe( 'changing image size', () => {
 
 		// Verify that the custom size was applied to the image.
 		await expect(
-			editor.canvas.locator( `role=img[name="${ filename }"]` )
+			editor.canvas.locator( `role=img[name="${ fileName }"]` )
 		).toHaveCSS( 'width', '499px' );
 		await expect(
 			page.locator( 'role=spinbutton[name="Width"i]' )
diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
index c7826ebf262822..259995a87e0c7d 100644
--- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
+++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -40,8 +40,8 @@ test.describe( 'adding inline tokens', () => {
 			'assets',
 			'10x10_e2e_test_image_z9T8jK.png'
 		);
-		const filename = uuid();
-		const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
+		const fileName = uuid();
+		const tmpFileName = path.join( os.tmpdir(), fileName + '.png' );
 		fs.copyFileSync( testImagePath, tmpFileName );
 		await page
 			.locator( '.media-modal .moxie-shim input[type=file]' )
@@ -52,7 +52,7 @@ test.describe( 'adding inline tokens', () => {
 
 		// Check the content.
 		const contentRegex = new RegExp(
-			`a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?>`
+			`a <img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ fileName }\\.png" alt=""\\/?>`
 		);
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
@@ -73,7 +73,7 @@ test.describe( 'adding inline tokens', () => {
 
 		// Check the content.
 		const contentRegex2 = new RegExp(
-			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt="Alt"\\/?>`
+			`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ fileName }\\.png" alt="Alt"\\/?>`
 		);
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [
diff --git a/test/e2e/specs/editor/various/block-deletion.spec.js b/test/e2e/specs/editor/various/block-deletion.spec.js
index f90923c6dc3829..b491103b709f1a 100644
--- a/test/e2e/specs/editor/various/block-deletion.spec.js
+++ b/test/e2e/specs/editor/various/block-deletion.spec.js
@@ -134,7 +134,7 @@ test.describe( 'Block deletion', () => {
 		).toBeFocused();
 
 		// Remove the current paragraph via dedicated keyboard shortcut.
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 
 		// Ensure the last block was removed.
 		await expect.poll( editor.getBlocks ).toMatchObject( [
@@ -387,4 +387,50 @@ test.describe( 'Block deletion', () => {
 		// TODO: There should be expectations around where focus is placed in
 		// this scenario. Currently, a focus loss occurs, which is unacceptable.
 	} );
+
+	test( 'empty heading block below image block should be deleted on backspace', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add an image block first
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				url: 'https://cldup.com/cXyG__fTLN.jpg',
+			},
+		} );
+
+		// Add an empty heading block
+		await editor.insertBlock( {
+			name: 'core/heading',
+		} );
+
+		// Verify initial state - should have both blocks
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [
+				{ name: 'core/image' },
+				{ name: 'core/heading' },
+			] );
+
+		// Focus on the heading block (it should be empty by default)
+		const headingBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Heading',
+		} );
+		await headingBlock.click();
+
+		// Press backspace to trigger merge - this should remove the empty heading
+		await page.keyboard.press( 'Backspace' );
+
+		// After the fix: heading block should be removed, only image block should remain
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/image' } ] );
+
+		// Image block should now be focused
+		const imageBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		await expect( imageBlock ).toBeFocused();
+	} );
 } );
diff --git a/test/e2e/specs/editor/various/block-locking.spec.js b/test/e2e/specs/editor/various/block-locking.spec.js
index cf81fede4c31d5..a8895d282fb956 100644
--- a/test/e2e/specs/editor/various/block-locking.spec.js
+++ b/test/e2e/specs/editor/various/block-locking.spec.js
@@ -133,7 +133,7 @@ test.describe( 'Block Locking', () => {
 		).toBeVisible();
 
 		await paragraph.click();
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{
diff --git a/test/e2e/specs/editor/various/block-template-lock.spec.js b/test/e2e/specs/editor/various/block-template-lock.spec.js
new file mode 100644
index 00000000000000..3debe5c5f2a4dc
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-template-lock.spec.js
@@ -0,0 +1,264 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Template Lock', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	const createColumnsBlockWithLock = ( templateLock ) => ( {
+		name: 'core/columns',
+		attributes: { templateLock },
+		innerBlocks: [
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Col 1' },
+					},
+				],
+			},
+			{
+				name: 'core/column',
+				innerBlocks: [
+					{
+						name: 'core/paragraph',
+						attributes: { content: 'Col 2' },
+					},
+				],
+			},
+		],
+	} );
+
+	test.describe( 'templateLock="all"', () => {
+		test.beforeEach( async ( { editor } ) => {
+			await editor.insertBlock( createColumnsBlockWithLock( 'all' ) );
+
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Column (1 of 2)' )
+			);
+		} );
+
+		test( 'should prevent deleting columns', async ( { editor, page } ) => {
+			await editor.clickBlockToolbarButton( 'Options' );
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should prevent moving columns', async ( { page } ) => {
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeHidden();
+		} );
+
+		test( 'should prevent inserting blocks inside columns', async ( {
+			editor,
+		} ) => {
+			await expect(
+				editor.canvas.getByLabel( 'Add Block' )
+			).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'templateLock="insert"', () => {
+		test.beforeEach( async ( { editor } ) => {
+			await editor.insertBlock( createColumnsBlockWithLock( 'insert' ) );
+
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Column (1 of 2)' )
+			);
+		} );
+
+		test( 'should prevent deleting columns', async ( { editor, page } ) => {
+			await editor.clickBlockToolbarButton( 'Options' );
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should allow moving columns', async ( { page } ) => {
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move right' } )
+			).toBeVisible();
+		} );
+
+		test( 'should prevent inserting blocks inside columns', async ( {
+			editor,
+		} ) => {
+			await expect(
+				editor.canvas.getByLabel( 'Add Block' )
+			).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'templateLock="contentOnly"', () => {
+		test.beforeEach( async ( { editor } ) => {
+			await editor.insertBlock(
+				createColumnsBlockWithLock( 'contentOnly' )
+			);
+
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Column (1 of 2)' )
+			);
+		} );
+
+		test( 'should prevent deleting columns', async ( { page } ) => {
+			await expect(
+				page.getByRole( 'menu', { name: 'Options' } )
+			).toBeHidden();
+		} );
+
+		test( 'should prevent moving columns', async ( { page } ) => {
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeHidden();
+		} );
+
+		test( 'should prevent inserting blocks inside columns', async ( {
+			editor,
+		} ) => {
+			await expect(
+				editor.canvas.getByLabel( 'Add Block' )
+			).toBeHidden();
+		} );
+
+		test( 'should allow editing content inside columns', async ( {
+			editor,
+			page,
+		} ) => {
+			const paragraphLocator = editor.canvas.getByText( 'Col 1' );
+			await editor.selectBlocks( paragraphLocator );
+
+			await page.keyboard.type( 'Edited - ' );
+			await expect( paragraphLocator ).toHaveText( 'Edited - Col 1' );
+		} );
+	} );
+
+	test.describe( 'templateLock=false inside locked parent (Group block)', () => {
+		test.beforeEach( async ( { editor } ) => {
+			await editor.insertBlock( {
+				name: 'core/group',
+				attributes: {
+					templateLock: 'insert',
+					layout: { type: 'constrained' },
+				},
+				innerBlocks: [
+					{
+						name: 'core/columns',
+						attributes: { templateLock: false },
+						innerBlocks: [
+							{
+								name: 'core/column',
+								innerBlocks: [
+									{
+										name: 'core/paragraph',
+										attributes: {
+											content: 'Col 1',
+										},
+									},
+								],
+							},
+						],
+					},
+					{
+						name: 'core/paragraph',
+						attributes: {
+							content:
+								'Paragraph to enable moving of Columns block',
+						},
+					},
+				],
+			} );
+		} );
+
+		test( 'should prevent deleting the Columns block itself (due to parent lock)', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Columns' )
+			);
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeHidden();
+		} );
+
+		test( 'should allow moving the Columns block itself (due to parent lock)', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Columns' )
+			);
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeVisible();
+		} );
+
+		test( 'should allow deleting inner Column blocks (own lock=false)', async ( {
+			editor,
+			page,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Column (1 of 1)' )
+			);
+
+			await editor.clickBlockToolbarButton( 'Options' );
+
+			await expect(
+				page
+					.getByRole( 'menu', { name: 'Options' } )
+					.getByRole( 'menuitem', { name: 'Delete' } )
+			).toBeVisible();
+		} );
+
+		test( 'should allow inserting blocks inside inner Column blocks (own lock=false)', async ( {
+			editor,
+		} ) => {
+			await editor.selectBlocks(
+				editor.canvas.getByLabel( 'Block: Column (1 of 1)' )
+			);
+
+			await expect(
+				editor.canvas.getByLabel( 'Add Block' )
+			).toBeVisible();
+		} );
+
+		test( 'should allow editing content inside inner Column blocks', async ( {
+			editor,
+			page,
+		} ) => {
+			const paragraphLocator = editor.canvas.getByText( 'Col 1' );
+			await editor.selectBlocks( paragraphLocator );
+
+			await page.keyboard.type( 'Edited - ' );
+			await expect( paragraphLocator ).toHaveText( 'Edited - Col 1' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/color-support.spec.js b/test/e2e/specs/editor/various/color-support.spec.js
new file mode 100644
index 00000000000000..b3118b2a501e36
--- /dev/null
+++ b/test/e2e/specs/editor/various/color-support.spec.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Link color in themes', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should apply selected link color in editor and frontend', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content:
+					'This paragraph will have a <a href="https://example.com">custom link color set</a>',
+			},
+		} );
+
+		await editor.openDocumentSettingsSidebar();
+
+		await page.getByRole( 'button', { name: 'Color options' } ).click();
+
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
+			.click();
+
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'button', { name: 'Link', exact: true } )
+			.click();
+
+		await page
+			.getByRole( 'button', { name: 'Custom color picker' } )
+			.click();
+		await page
+			.getByRole( 'textbox', { name: 'Hex color' } )
+			.fill( 'ff0000' );
+
+		await page.getByRole( 'button', { name: 'Close Settings' } ).click();
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					style: {
+						elements: {
+							link: {
+								color: {
+									text: '#ff0000',
+								},
+							},
+						},
+					},
+				},
+			},
+		] );
+		const previewPage = await editor.openPreviewPage();
+
+		const previewContent = previewPage.getByRole( 'link', {
+			name: 'custom link color set',
+		} );
+		await expect( previewContent ).toBeVisible();
+
+		/**
+		 * Test: Check if the link color is set in the frontend.
+		 * #ff0000 is rgb(255, 0, 0).
+		 */
+		await expect( previewContent ).toHaveCSS( 'color', 'rgb(255, 0, 0)' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
index 71522c1d439a54..6b3aedbf79df99 100644
--- a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
+++ b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
@@ -22,11 +22,9 @@ test.describe( 'Compatibility with classic editor', () => {
 		await page.keyboard.type( 'Random Link' );
 		await page.keyboard.type( '</a> ' );
 		// Publish Post
-		await editor.publishPost();
+		const postId = await editor.publishPost();
 		// View Post
-		await page.click(
-			'role=region[name="Editor publish"i] >> role=link[name="View post"i]'
-		);
+		await page.goto( `/?p=${ postId }` );
 
 		// Check the content doesn't contain <p> tags.
 		// No accessible selector for now.
diff --git a/test/e2e/specs/editor/various/list-view.spec.js b/test/e2e/specs/editor/various/list-view.spec.js
index 98dfe5e304f802..2d5c0a9ee67298 100644
--- a/test/e2e/specs/editor/various/list-view.spec.js
+++ b/test/e2e/specs/editor/various/list-view.spec.js
@@ -499,7 +499,255 @@ test.describe( 'List View', () => {
 		).toBeFocused();
 	} );
 
-	test( 'should cut, copy, paste, select, duplicate, insert, delete, and deselect blocks using keyboard', async ( {
+	test( 'should duplicate block using keyboard', async ( {
+		editor,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert blocks of different types.
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.insertBlock( { name: 'core/file' } );
+		await editor.insertBlock( { name: 'core/image' } );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		// Move focus and selection to the file block to set up for testing duplication.
+		await listView
+			.getByRole( 'gridcell', { name: 'File', exact: true } )
+			.dblclick();
+
+		// Test duplication behaviour.
+		await pageUtils.pressKeys( 'primaryShift+d' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Duplicating a block should retain selection on existing block, move focus to duplicated block.'
+			)
+			.toMatchObject( [
+				{ name: 'core/group' },
+				{ name: 'core/file', selected: true },
+				{ name: 'core/file', focused: true },
+				{ name: 'core/image' },
+			] );
+	} );
+
+	test( 'should copy and paste blocks using keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert blocks of different types.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/file' } );
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph' },
+				{ name: 'core/pullquote' },
+			],
+		} );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		// Click the newly inserted Group block List View item to ensure it is focused.
+		await listView
+			.getByRole( 'link', {
+				name: 'Group',
+				expanded: false,
+			} )
+			.click();
+
+		// Move down to group block, expand, and then move to the paragraph block.
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'ArrowDown' );
+		await page.keyboard.press( 'ArrowDown' );
+		await pageUtils.pressKeys( 'primary+c' );
+		await page.keyboard.press( 'ArrowUp' );
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to copy focused block and paste in the list view via keyboard shortcuts'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{ name: 'core/file', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					innerBlocks: [
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: true,
+						},
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+	} );
+
+	test( 'should paste block styles using keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+		context,
+	} ) => {
+		// Grant clipboard access for copying and pasting styles between blocks.
+		await context.grantPermissions( [
+			'clipboard-read',
+			'clipboard-write',
+		] );
+
+		// Insert a block without styles.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'First Block',
+			},
+		} );
+
+		// Insert a block with styles.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Second Block',
+				style: {
+					color: {
+						text: '#ff0000',
+						background: '#00ff00',
+					},
+				},
+			},
+		} );
+
+		// Copy the styles from the second block.
+		await editor.clickBlockToolbarButton( 'Options' );
+		await page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem', {
+				name: 'Copy Styles',
+			} )
+			.click();
+
+		// Open List View.
+		await listViewUtils.openListView();
+
+		// Navigate to the block without styles.
+		await page.keyboard.press( 'ArrowUp' );
+
+		// Paste the copied styles.
+		await pageUtils.pressKeys( 'primaryAlt+v' );
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'First Block',
+					style: {
+						color: {
+							text: '#ff0000',
+							background: '#00ff00',
+						},
+					},
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Second Block',
+					style: {
+						color: {
+							text: '#ff0000',
+							background: '#00ff00',
+						},
+					},
+				},
+			},
+		] );
+	} );
+
+	test( 'should cut and paste blocks using keyboard', async ( {
+		editor,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert blocks of different types.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await editor.insertBlock( { name: 'core/file' } );
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/pullquote' },
+				{ name: 'core/pullquote' },
+			],
+		} );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		// Click the newly inserted Group block List View item to ensure it is focused.
+		await listView
+			.getByRole( 'link', {
+				name: 'Group',
+				expanded: false,
+			} )
+			.click();
+
+		// Cut the block.
+		await pageUtils.pressKeys( 'primary+x' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to cut a block in the list view, with the preceding block being selected'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{ name: 'core/file', selected: true, focused: true },
+			] );
+
+		await pageUtils.pressKeys( 'primary+v' );
+
+		await expect
+			.poll(
+				listViewUtils.getBlocksWithA11yAttributes,
+				'Should be able to paste previously cut block in the list view via keyboard shortcuts'
+			)
+			.toMatchObject( [
+				{ name: 'core/heading', selected: false, focused: false },
+				{
+					name: 'core/group',
+					selected: true,
+					focused: true,
+					innerBlocks: [
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+						{
+							name: 'core/pullquote',
+							selected: false,
+							focused: false,
+						},
+					],
+				},
+			] );
+	} );
+
+	test( 'should select blocks using keyboard', async ( {
 		editor,
 		page,
 		pageUtils,
@@ -529,7 +777,7 @@ test.describe( 'List View', () => {
 		await editor.insertBlock( { name: 'core/file' } );
 
 		// Open List View.
-		const listView = await listViewUtils.openListView();
+		await listViewUtils.openListView();
 
 		await expect
 			.poll(
@@ -625,46 +873,100 @@ test.describe( 'List View', () => {
 				},
 				{ name: 'core/file', selected: true, focused: false },
 			] );
+	} );
 
-		// Deselect blocks via Escape key.
+	test( 'should deselect blocks using keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( {
+			name: 'core/group',
+			innerBlocks: [ { name: 'core/pullquote' } ],
+		} );
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{ name: 'core/heading' },
+						{ name: 'core/paragraph' },
+					],
+				},
+				{
+					name: 'core/column',
+					innerBlocks: [ { name: 'core/verse' } ],
+				},
+			],
+		} );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		// Select all the blocks.
+		await pageUtils.pressKeys( 'primary+a' );
+
+		// Deselect all blocks via Escape key.
 		await page.keyboard.press( 'Escape' );
-		// Collapse the columns block.
-		await page.keyboard.press( 'ArrowLeft' );
 
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
-				'All blocks should be deselected, with focus on the Columns block.'
+				'All blocks should be deselected, with focus on the last inserted block.'
 			)
 			.toMatchObject( [
 				{ name: 'core/group', selected: false, focused: false },
 				{
 					name: 'core/columns',
 					selected: false,
-					focused: true,
+					focused: false,
 				},
-				{ name: 'core/file', selected: false, focused: false },
+				{ name: 'core/file', selected: false, focused: true },
 			] );
 
-		// Move focus and selection to the file block to set up for testing duplication.
+		// Select the columns block and focus the file block
 		await listView
-			.getByRole( 'gridcell', { name: 'File', exact: true } )
-			.dblclick();
+			.getByRole( 'gridcell', { name: 'Columns', exact: true } )
+			.click();
+		await listView
+			.getByRole( 'gridcell', { name: 'File' } )
+			.getByRole( 'link' )
+			.focus();
 
-		// Test duplication behaviour.
-		await pageUtils.pressKeys( 'primaryShift+d' );
+		// Deselect single block via Escape key.
+		await page.keyboard.press( 'Escape' );
 
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
-				'Duplicating a block should retain selection on existing block, move focus to duplicated block.'
+				'Pressing Escape should deselect the Columns block'
 			)
 			.toMatchObject( [
-				{ name: 'core/group' },
-				{ name: 'core/columns' },
-				{ name: 'core/file', selected: true },
-				{ name: 'core/file', focused: true },
+				{ name: 'core/group', selected: false, focused: false },
+				{
+					name: 'core/columns',
+					selected: false,
+					focused: false,
+				},
+				{ name: 'core/file', selected: false, focused: true },
 			] );
+	} );
+
+	test( 'should insert blocks using keyboard', async ( {
+		editor,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert multiple blocks of different types.
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		// Open List View.
+		await listViewUtils.openListView();
 
 		// Test insert before.
 		await pageUtils.pressKeys( 'primaryAlt+t' );
@@ -675,9 +977,7 @@ test.describe( 'List View', () => {
 				'Inserting a block before should move selection and focus to the inserted block.'
 			)
 			.toMatchObject( [
-				{ name: 'core/group' },
-				{ name: 'core/columns' },
-				{ name: 'core/file', selected: false },
+				{ name: 'core/group', focused: false, selected: false },
 				{ name: 'core/paragraph', focused: true, selected: true },
 				{ name: 'core/file', selected: false },
 			] );
@@ -688,20 +988,51 @@ test.describe( 'List View', () => {
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
-				'Inserting a block before should move selection and focus to the inserted block.'
+				'Inserting a block after should move selection and focus to the inserted block.'
 			)
 			.toMatchObject( [
-				{ name: 'core/group' },
-				{ name: 'core/columns' },
-				{ name: 'core/file', selected: false },
+				{ name: 'core/group', focused: false, selected: false },
 				{ name: 'core/paragraph', focused: false, selected: false },
 				{ name: 'core/paragraph', focused: true, selected: true },
 				{ name: 'core/file', selected: false },
 			] );
+	} );
 
-		// Remove the inserted blocks.
-		await page.keyboard.press( 'Delete' );
-		await page.keyboard.press( 'Delete' );
+	test( 'should delete blocks using keyboard', async ( {
+		editor,
+		page,
+		pageUtils,
+		listViewUtils,
+	} ) => {
+		// Insert some blocks of different types.
+		await editor.insertBlock( { name: 'core/group' } );
+		await editor.insertBlock( {
+			name: 'core/columns',
+			innerBlocks: [
+				{
+					name: 'core/column',
+					innerBlocks: [
+						{ name: 'core/heading' },
+						{ name: 'core/paragraph' },
+					],
+				},
+				{
+					name: 'core/column',
+					innerBlocks: [ { name: 'core/verse' } ],
+				},
+			],
+		} );
+		await editor.insertBlock( { name: 'core/file' } );
+		await editor.insertBlock( { name: 'core/file' } );
+
+		// Open List View.
+		const listView = await listViewUtils.openListView();
+
+		// Select the first file block.
+		await listView
+			.getByRole( 'gridcell', { name: 'File', exact: true } )
+			.first()
+			.dblclick();
 
 		// Delete the first File block.
 		await page.keyboard.press( 'Delete' );
@@ -812,8 +1143,8 @@ test.describe( 'List View', () => {
 
 		// Delete remaining blocks.
 		// Keyboard shortcut should also work.
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
+		await pageUtils.pressKeys( 'access+z' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -845,7 +1176,7 @@ test.describe( 'List View', () => {
 				{ name: 'core/heading', selected: false },
 			] );
 
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -868,11 +1199,7 @@ test.describe( 'List View', () => {
 			.getByRole( 'gridcell', { name: 'File' } )
 			.getByRole( 'link' )
 			.focus();
-		for ( const keys of [
-			'Delete',
-			'Backspace',
-			'primaryShift+Backspace',
-		] ) {
+		for ( const keys of [ 'Delete', 'Backspace', 'access+z' ] ) {
 			await pageUtils.pressKeys( keys );
 			await expect
 				.poll(
@@ -884,113 +1211,6 @@ test.describe( 'List View', () => {
 					{ name: 'core/file', selected: false, focused: true },
 				] );
 		}
-
-		// Deselect blocks via Escape key.
-		await page.keyboard.press( 'Escape' );
-
-		await expect
-			.poll(
-				listViewUtils.getBlocksWithA11yAttributes,
-				'Pressing Escape should deselect blocks'
-			)
-			.toMatchObject( [
-				{ name: 'core/heading', selected: false, focused: false },
-				{ name: 'core/file', selected: false, focused: true },
-			] );
-
-		// Copy and paste blocks. To begin, add another Group block.
-		await editor.insertBlock( {
-			name: 'core/group',
-			innerBlocks: [
-				{ name: 'core/paragraph' },
-				{ name: 'core/pullquote' },
-			],
-		} );
-
-		// Click the newly inserted Group block List View item to ensure it is focused.
-		await listView
-			.getByRole( 'link', {
-				name: 'Group',
-				expanded: false,
-			} )
-			.click();
-
-		// Move down to group block, expand, and then move to the paragraph block.
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'ArrowDown' );
-		await pageUtils.pressKeys( 'primary+c' );
-		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeys( 'primary+v' );
-
-		await expect
-			.poll(
-				listViewUtils.getBlocksWithA11yAttributes,
-				'Should be able to copy focused block and paste in the list view via keyboard shortcuts'
-			)
-			.toMatchObject( [
-				{ name: 'core/heading', selected: false, focused: false },
-				{ name: 'core/file', selected: false, focused: false },
-				{
-					name: 'core/group',
-					selected: true,
-					innerBlocks: [
-						{
-							name: 'core/pullquote',
-							selected: false,
-							focused: true,
-						},
-						{
-							name: 'core/pullquote',
-							selected: false,
-							focused: false,
-						},
-					],
-				},
-			] );
-
-		// Cut and paste blocks.
-		await page.keyboard.press( 'ArrowUp' );
-		await pageUtils.pressKeys( 'primary+x' );
-
-		await expect
-			.poll(
-				listViewUtils.getBlocksWithA11yAttributes,
-				'Should be able to cut a block in the list view, with the preceding block being selected'
-			)
-			.toMatchObject( [
-				{ name: 'core/heading', selected: false, focused: false },
-				{ name: 'core/file', selected: true, focused: true },
-			] );
-
-		await pageUtils.pressKeys( 'primary+v' );
-
-		await expect
-			.poll(
-				listViewUtils.getBlocksWithA11yAttributes,
-				'Should be able to paste previously cut block in the list view via keyboard shortcuts'
-			)
-			.toMatchObject( [
-				{ name: 'core/heading', selected: false, focused: false },
-				{
-					name: 'core/group',
-					selected: true,
-					focused: true,
-					innerBlocks: [
-						{
-							name: 'core/pullquote',
-							selected: false,
-							focused: false,
-						},
-						{
-							name: 'core/pullquote',
-							selected: false,
-							focused: false,
-						},
-					],
-				},
-			] );
 	} );
 
 	test( 'should create a group block from the selected multiple blocks', async ( {
@@ -1140,7 +1360,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu,
 			'Pressing Space should also open the menu dropdown'
 		).toBeVisible();
-		await pageUtils.pressKeys( 'primaryShift+Backspace' ); // Keyboard shortcut for Delete.
+		await pageUtils.pressKeys( 'access+z' ); // Keyboard shortcut for Delete.
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -1160,7 +1380,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu.getByRole( 'menuitem', { name: 'Delete' } ),
 			'The delete menu item should be hidden for locked blocks'
 		).toBeHidden();
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index d3ebf357615950..1b65b4087bcd5f 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -207,19 +207,8 @@ test.describe( 'Pattern Overrides', () => {
 				},
 			] );
 
-			await page
-				.getByRole( 'region', { name: 'Editor top bar' } )
-				.getByRole( 'button', { name: 'Publish' } )
-				.click();
-			const editorPublishPanel = page.getByRole( 'region', {
-				name: 'Editor publish',
-			} );
-			await editorPublishPanel
-				.getByRole( 'button', { name: 'Publish', exact: true } )
-				.click();
-			await editorPublishPanel
-				.getByRole( 'link', { name: 'View post' } )
-				.click();
+			const postId = await editor.publishPost();
+			await page.goto( `/?p=${ postId }` );
 
 			await expect( page.locator( 'p' ) ).toContainText( [
 				'I would word it this way',
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 1fe94ff334f3b2..daba30d6899ec1 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -90,7 +90,7 @@ test.describe( 'Post publish panel', () => {
 			page
 				.getByRole( 'region', { name: 'Editor publish' } )
 				.locator( ':focus' )
-		).toHaveText( 'Test Post' );
+		).toContainText( 'Test Post' );
 	} );
 
 	test( 'should retain focus within the panel', async ( {
diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
index 7f5c28c168f59c..5c8a9d9e160de7 100644
--- a/test/e2e/specs/editor/various/write-design-mode.spec.js
+++ b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -108,8 +108,8 @@ test.describe( 'Write/Design mode', () => {
 			.getByRole( 'menu', { name: 'Options' } )
 			.getByRole( 'menuitem' );
 
-		// we expect 4 items in the options menu
-		await expect( optionsMenu ).toHaveCount( 4 );
+		// we expect 6 items in the options menu
+		await expect( optionsMenu ).toHaveCount( 6 );
 
 		// We should be able to select the paragraph block and write in it.
 		await paragraph.click();
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png
new file mode 100644
index 00000000000000..4bc0f7a6b1dd70
Binary files /dev/null and b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-1-chromium.png differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png
new file mode 100644
index 00000000000000..7339cccdb78f28
Binary files /dev/null and b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-2-chromium.png differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png
new file mode 100644
index 00000000000000..97943030eb1e88
Binary files /dev/null and b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-3-chromium.png differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png
new file mode 100644
index 00000000000000..b7c455784e8a42
Binary files /dev/null and b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-4-chromium.png differ
diff --git a/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png
new file mode 100644
index 00000000000000..b7c455784e8a42
Binary files /dev/null and b/test/e2e/specs/interactivity/__snapshots__/Router-styles-should-support-relative-URLs-in-referenced-style-sheets-5-chromium.png differ
diff --git a/test/e2e/specs/interactivity/async-actions.spec.ts b/test/e2e/specs/interactivity/async-actions.spec.ts
index 55e44d6cd4a085..e337e037698e70 100644
--- a/test/e2e/specs/interactivity/async-actions.spec.ts
+++ b/test/e2e/specs/interactivity/async-actions.spec.ts
@@ -28,4 +28,34 @@ test.describe( 'async actions', () => {
 		await page.getByTestId( 'reject' ).click();
 		await expect( resultInput ).toHaveValue( 'Error: 😘' );
 	} );
+
+	test( 'Promise generator callbacks should yield the correct value after captured errors', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveValue( '' );
+
+		await page.getByTestId( 'capture' ).click();
+		await expect( resultInput ).toHaveValue( '3' );
+	} );
+
+	test( 'Promise generator callbacks should be able to throw errors', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveValue( '' );
+
+		await page.getByTestId( 'captureThrow' ).click();
+		await expect( resultInput ).toHaveValue( 'Error: 🤯' );
+	} );
+
+	test( 'Promise generator callbacks should throw when rejected promises are returned', async ( {
+		page,
+	} ) => {
+		const resultInput = page.getByTestId( 'result' );
+		await expect( resultInput ).toHaveValue( '' );
+
+		await page.getByTestId( 'captureReturnReject' ).click();
+		await expect( resultInput ).toHaveValue( 'Error: 🔚' );
+	} );
 } );
diff --git a/test/e2e/specs/interactivity/directive-priorities.spec.ts b/test/e2e/specs/interactivity/directive-priorities.spec.ts
index 56745bfad0c433..aaab8c29ffaf6c 100644
--- a/test/e2e/specs/interactivity/directive-priorities.spec.ts
+++ b/test/e2e/specs/interactivity/directive-priorities.spec.ts
@@ -88,14 +88,14 @@ test.describe( 'Directives (w/ priority)', () => {
 		const nonExistentDirectives = page.getByTestId(
 			'non-existent-directives'
 		);
+		// The element type should not be a component.
 		expect(
-			await nonExistentDirectives.evaluate(
-				// This returns undefined if type is a component.
-				( node ) => {
-					return ( node as any ).__k.__k.__k[ 0 ].__k[ 0 ].__k[ 0 ]
-						.type;
-				}
-			)
-		).toBe( 'div' );
+			await nonExistentDirectives.evaluate( ( node ) => {
+				return ( node as any ).__k.__k.__k[ 0 ].__k[ 0 ];
+			} )
+		).toMatchObject( {
+			type: 'div',
+			props: { 'data-wp-non-existent-directive': '' },
+		} );
 	} );
 } );
diff --git a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
index fd850a6e39fae2..74436673f10b79 100644
--- a/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
+++ b/test/e2e/specs/interactivity/fixtures/interactivity-utils.ts
@@ -6,6 +6,30 @@ import type { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
 type AddPostWithBlockOptions = {
 	alias?: string;
 	attributes?: Record< string, any >;
+	innerBlocks?: Block[];
+};
+
+type Block = [
+	type: string,
+	attributes?: Record< string, any >,
+	innerBlocks?: Block[],
+];
+
+const generateBlockMarkup = ( [
+	type,
+	attributes,
+	innerBlocks,
+]: Block ): string => {
+	const typeAndAttributes = attributes
+		? `${ type } ${ JSON.stringify( attributes ) }`
+		: type;
+
+	if ( ! innerBlocks ) {
+		return `<!-- wp:${ typeAndAttributes } /-->`;
+	}
+	return `<!-- wp:${ typeAndAttributes } -->${ innerBlocks
+		.map( generateBlockMarkup )
+		.join( '' ) }<!--/ wp:${ type } -->`;
 };
 
 export default class InteractivityUtils {
@@ -40,7 +64,7 @@ export default class InteractivityUtils {
 
 	async addPostWithBlock(
 		name: string,
-		{ attributes, alias }: AddPostWithBlockOptions = {}
+		{ attributes, alias, innerBlocks }: AddPostWithBlockOptions = {}
 	) {
 		const block = attributes
 			? `${ name } ${ JSON.stringify( attributes ) }`
@@ -50,8 +74,14 @@ export default class InteractivityUtils {
 			alias = block;
 		}
 
+		const content = generateBlockMarkup( [
+			name,
+			attributes,
+			innerBlocks,
+		] );
+
 		const payload = {
-			content: `<!-- wp:${ block } /-->`,
+			content,
 			status: 'publish' as 'publish',
 			date_gmt: '2023-01-01T00:00:00',
 			title: alias,
diff --git a/test/e2e/specs/interactivity/router-regions.spec.ts b/test/e2e/specs/interactivity/router-regions.spec.ts
index f1ea308d6c2563..ecce42160b48b3 100644
--- a/test/e2e/specs/interactivity/router-regions.spec.ts
+++ b/test/e2e/specs/interactivity/router-regions.spec.ts
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { type Locator } from '@playwright/test';
+
 /**
  * Internal dependencies
  */
@@ -14,6 +19,55 @@ test.describe( 'Router regions', () => {
 			alias: 'router regions - page 1',
 			attributes: { page: 1, next },
 		} );
+
+		// These pages are for testing router regions with `attachTo`.
+		const region3 = {
+			type: 'div',
+			data: { id: 'region3', attachTo: 'body' },
+		};
+		const region4 = {
+			type: 'div',
+			data: { id: 'region4', attachTo: '#regions-with-attach-to' },
+		};
+		const region5 = {
+			type: 'section',
+			data: { id: 'region5', attachTo: 'body' },
+		};
+		const region6 = {
+			type: 'section',
+			hasDirectives: true,
+			data: {
+				id: 'region6',
+				attachTo: '#regions-with-attach-to',
+			},
+		};
+
+		const pageAttachTo2 = await utils.addPostWithBlock(
+			'test/router-regions',
+			{
+				alias: 'router regions - page 2',
+				attributes: {
+					page: 'attachTo2',
+					regionsWithAttachTo: [ region3, region4, region5, region6 ],
+					counter: 10,
+				},
+			}
+		);
+		const pageAttachTo1 = await utils.addPostWithBlock(
+			'test/router-regions',
+			{
+				alias: 'router regions - page 2',
+				attributes: {
+					page: 'attachTo1',
+					next: pageAttachTo2,
+					regionsWithAttachTo: [ region3, region4, region5, region6 ],
+				},
+			}
+		);
+		await utils.addPostWithBlock( 'test/router-regions', {
+			alias: 'router regions - page 1 - attachTo',
+			attributes: { page: 1, next: pageAttachTo1 },
+		} );
 	} );
 
 	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
@@ -29,12 +83,10 @@ test.describe( 'Router regions', () => {
 		const region1Text = page.getByTestId( 'region-1-text' );
 		const region2Text = page.getByTestId( 'region-2-text' );
 		const noRegionText1 = page.getByTestId( 'no-region-text-1' );
-		const noRegionText2 = page.getByTestId( 'no-region-text-2' );
 
 		await expect( region1Text ).toHaveText( 'hydrated' );
 		await expect( region2Text ).toHaveText( 'hydrated' );
 		await expect( noRegionText1 ).toHaveText( 'not hydrated' );
-		await expect( noRegionText2 ).toHaveText( 'not hydrated' );
 	} );
 
 	test( 'should update after navigation', async ( { page } ) => {
@@ -89,13 +141,20 @@ test.describe( 'Router regions', () => {
 
 	test( 'can be nested', async ( { page } ) => {
 		const nestedRegionSsr = page.getByTestId( 'nested-region-ssr' );
+		const innerContent = page.getByTestId( 'nested-item' );
+
 		await expect( nestedRegionSsr ).toHaveText( 'content from page 1' );
+		await expect( innerContent ).toHaveCount( 3 );
 
 		await page.getByTestId( 'next' ).click();
 		await expect( nestedRegionSsr ).toHaveText( 'content from page 2' );
+		await expect( innerContent ).toHaveCount( 3 );
+		await page.getByTestId( 'add-item' ).click();
+		await expect( innerContent ).toHaveCount( 4 );
 
 		await page.getByTestId( 'back' ).click();
 		await expect( nestedRegionSsr ).toHaveText( 'content from page 1' );
+		await expect( innerContent ).toHaveCount( 4 );
 	} );
 
 	test( 'Page title is updated 2', async ( { page } ) => {
@@ -111,4 +170,169 @@ test.describe( 'Router regions', () => {
 			'router regions – page 1 – gutenberg'
 		);
 	} );
+
+	test( 'should not take into account regions that are not in the topmost `data-wp-interactive`.', async ( {
+		page,
+	} ) => {
+		const invalidRegionText1 = page.getByTestId( 'invalid-region-text-1' );
+		const invalidRegionText2 = page.getByTestId( 'invalid-region-text-2' );
+
+		await expect( invalidRegionText1 ).toHaveText( 'content from page 1' );
+		await expect( invalidRegionText2 ).toHaveText( 'content from page 1' );
+
+		await page.getByTestId( 'next' ).click();
+		// Waits until the navigation finishes so it doesn't read the text from
+		// the previous page.
+		await expect( page ).toHaveTitle(
+			'router regions – page 2 – gutenberg'
+		);
+		await expect( invalidRegionText1 ).toHaveText( 'content from page 1' );
+		await expect( invalidRegionText2 ).toHaveText( 'content from page 1' );
+
+		await page.getByTestId( 'back' ).click();
+		// Waits until the navigation finishes so it doesn't read the text from
+		// the previous page.
+		await expect( page ).toHaveTitle(
+			'router regions – page 1 – gutenberg'
+		);
+		await expect( invalidRegionText1 ).toHaveText( 'content from page 1' );
+		await expect( invalidRegionText2 ).toHaveText( 'content from page 1' );
+	} );
+
+	test( 'should support router regions with the `attachTo` property.', async ( {
+		page,
+		interactivityUtils: utils,
+	} ) => {
+		await page.goto(
+			utils.getLink( 'router regions - page 1 - attachTo' )
+		);
+
+		const bodyLocator = page.locator( 'body' );
+		const regionsLocator = page.locator( '#regions-with-attach-to' );
+
+		const region3 = bodyLocator.getByTestId( 'region3' );
+		const region4 = regionsLocator.getByTestId( 'region4' );
+		const region5 = bodyLocator.getByTestId( 'region5' );
+		const region6 = regionsLocator.getByTestId( 'region6' );
+
+		const regions: Record< string, Locator > = {
+			region3,
+			region4,
+			region5,
+			region6,
+		};
+
+		const initCount = page.getByTestId( 'init-count' );
+
+		// The text of this element is used to check a navigation is completed.
+		const region1Ssr = page.getByTestId( 'region-1-ssr' );
+
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+
+		// Regions with `attachTo` should initially be hidden.
+		await expect( region3 ).toBeHidden();
+		await expect( region4 ).toBeHidden();
+		await expect( region5 ).toBeHidden();
+		await expect( region6 ).toBeHidden();
+
+		// Navigate to "Page attachTo 1".
+		await page.getByTestId( 'next' ).click();
+
+		await expect( region1Ssr ).toHaveText( 'content from page attachTo1' );
+
+		// Regions should appear in place, be hydrated, and interactive.
+		for ( const regionId in regions ) {
+			const region = regions[ regionId ];
+			await expect( region ).toBeVisible();
+
+			const text = region.getByTestId( 'text' );
+			const clientCounter = region.getByTestId( 'client-counter' );
+			const serverCounter = region.getByTestId( 'server-counter' );
+
+			await expect( text ).toHaveText( regionId );
+			await expect( clientCounter ).toHaveText( '0' );
+			await expect( serverCounter ).toHaveText( '0' );
+
+			await clientCounter.click( { clickCount: 3, delay: 50 } );
+			await expect( clientCounter ).toHaveText( '3' );
+		}
+
+		// Region 6 has an init directive that should have been executed.
+		await expect( initCount ).toHaveText( '1' );
+
+		// Navigate to "Page attachTo 2".
+		await page.getByTestId( 'next' ).click();
+		await expect( region1Ssr ).toHaveText( 'content from page attachTo2' );
+
+		// Check that regions remains hydrated and interactive.
+		for ( const regionId in regions ) {
+			const region = regions[ regionId ];
+			await expect( region ).toBeVisible();
+
+			const text = region.getByTestId( 'text' );
+			const clientCounter = region.getByTestId( 'client-counter' );
+			const serverCounter = region.getByTestId( 'server-counter' );
+
+			await expect( text ).toHaveText( regionId );
+			await expect( clientCounter ).toHaveText( '3' );
+			await expect( serverCounter ).toHaveText( '10' );
+
+			await clientCounter.click( { clickCount: 3, delay: 50 } );
+			await expect( clientCounter ).toHaveText( '6' );
+		}
+
+		// Navigate back to "Page attachTo 1".
+		await page.goBack();
+
+		await expect( region1Ssr ).toHaveText( 'content from page attachTo1' );
+
+		// Check that regions remains hydrated and interactive.
+		for ( const regionId in regions ) {
+			const region = regions[ regionId ];
+			await expect( region ).toBeVisible();
+
+			const text = region.getByTestId( 'text' );
+			const clientCounter = region.getByTestId( 'client-counter' );
+			const serverCounter = region.getByTestId( 'server-counter' );
+
+			await expect( text ).toHaveText( regionId );
+			await expect( clientCounter ).toHaveText( '6' );
+			await expect( serverCounter ).toHaveText( '0' );
+
+			await clientCounter.click( { clickCount: 3, delay: 50 } );
+			await expect( clientCounter ).toHaveText( '9' );
+		}
+
+		// Navigate back to the initial page.
+		await page.goBack();
+
+		await expect( region1Ssr ).toHaveText( 'content from page 1' );
+
+		// Regions should be unmounted.
+		await expect( region3 ).toBeHidden();
+		await expect( region4 ).toBeHidden();
+		await expect( region5 ).toBeHidden();
+		await expect( region6 ).toBeHidden();
+
+		await page.goForward();
+
+		await expect( region1Ssr ).toHaveText( 'content from page attachTo1' );
+
+		// Regions should b reset when mounted again.
+		for ( const regionId in regions ) {
+			const region = regions[ regionId ];
+			await expect( region ).toBeVisible();
+
+			const text = region.getByTestId( 'text' );
+			const clientCounter = region.getByTestId( 'client-counter' );
+			const serverCounter = region.getByTestId( 'server-counter' );
+
+			await expect( text ).toHaveText( regionId );
+			await expect( clientCounter ).toHaveText( '0' );
+			await expect( serverCounter ).toHaveText( '0' );
+		}
+
+		// Region 6 has an init directive that should have been executed again.
+		await expect( initCount ).toHaveText( '2' );
+	} );
 } );
diff --git a/test/e2e/specs/interactivity/router-script-modules.spec.ts b/test/e2e/specs/interactivity/router-script-modules.spec.ts
new file mode 100644
index 00000000000000..9aa91c9b7df3c9
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-script-modules.spec.ts
@@ -0,0 +1,168 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'Router script modules', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const alpha = await utils.addPostWithBlock(
+			'test/router-script-modules-wrapper',
+			{
+				alias: 'alpha',
+				innerBlocks: [ [ 'test/router-script-modules-alpha' ] ],
+			}
+		);
+		const bravo = await utils.addPostWithBlock(
+			'test/router-script-modules-wrapper',
+			{
+				alias: 'bravo',
+				innerBlocks: [ [ 'test/router-script-modules-bravo' ] ],
+			}
+		);
+		const charlie = await utils.addPostWithBlock(
+			'test/router-script-modules-wrapper',
+			{
+				alias: 'charlie',
+				innerBlocks: [ [ 'test/router-script-modules-charlie' ] ],
+			}
+		);
+
+		const all = await utils.addPostWithBlock(
+			'test/router-script-modules-wrapper',
+			{
+				alias: 'all',
+				innerBlocks: [
+					[ 'test/router-script-modules-alpha' ],
+					[ 'test/router-script-modules-bravo' ],
+					[ 'test/router-script-modules-charlie' ],
+				],
+			}
+		);
+
+		await utils.addPostWithBlock( 'test/router-script-modules-wrapper', {
+			alias: 'none',
+			attributes: { links: { alpha, bravo, charlie, all } },
+		} );
+	} );
+
+	test.beforeEach( async ( { page, interactivityUtils: utils } ) => {
+		await page.goto( utils.getLink( 'none' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	for ( const [ testId, buttonId, expectedValues ] of [
+		[
+			'static modules from new blocks',
+			'static',
+			{ alpha: 'alpha-1', bravo: 'bravo-1', charlie: 'charlie-1' },
+		],
+		[
+			'dynamic modules from new blocks',
+			'dynamic',
+			{ alpha: 'alpha-2', bravo: 'bravo-2', charlie: 'charlie-2' },
+		],
+		[
+			'static modules from initial page',
+			'initial-static',
+			{ alpha: 'initial-1', bravo: 'initial-1', charlie: 'initial-1' },
+		],
+		[
+			'dynamic modules from initial page',
+			'initial-dynamic',
+			{ alpha: 'initial-2', bravo: 'initial-2', charlie: 'initial-2' },
+		],
+	] as const ) {
+		test( `should handle ${ testId }`, async ( { page } ) => {
+			const requestedModules = [];
+
+			await page.route( '**/*.js*', async ( route ) => {
+				requestedModules.push( route.request().url() );
+				await route.continue();
+			} );
+
+			const csn = page.getByTestId( 'client-side navigation' );
+			const alpha = page.getByTestId( 'alpha-block' );
+			const bravo = page.getByTestId( 'bravo-block' );
+			const charlie = page.getByTestId( 'charlie-block' );
+
+			await page.getByTestId( 'link alpha' ).click();
+
+			// This element disappears when a navigation starts.
+			await expect( csn ).toBeHidden();
+
+			// Check the page title to ensure navigation was successful.
+			await expect( page ).toHaveTitle( 'alpha – gutenberg' );
+
+			// This should be visible again after a successful client-side
+			// navigation.
+			await expect( csn ).toBeVisible();
+
+			await expect( alpha ).toBeVisible();
+			await expect( bravo ).toBeHidden();
+			await expect( charlie ).toBeHidden();
+			await expect( alpha.getByTestId( 'text' ) ).toHaveText( 'alpha' );
+
+			// This click executes an action that does a dynamic import and
+			// modifies the block text.
+			await alpha.getByTestId( buttonId ).click();
+			await expect( alpha.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.alpha
+			);
+
+			await page.getByTestId( 'link bravo' ).click();
+
+			await expect( csn ).toBeHidden();
+			await expect( page ).toHaveTitle( 'bravo – gutenberg' );
+			await expect( csn ).toBeVisible();
+
+			await expect( alpha ).toBeHidden();
+			await expect( bravo ).toBeVisible();
+			await expect( charlie ).toBeHidden();
+
+			await bravo.getByTestId( buttonId ).click();
+			await expect( bravo.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.bravo
+			);
+
+			await page.getByTestId( 'link charlie' ).click();
+
+			await expect( csn ).toBeHidden();
+			await expect( page ).toHaveTitle( 'charlie – gutenberg' );
+			await expect( csn ).toBeVisible();
+
+			await expect( alpha ).toBeHidden();
+			await expect( bravo ).toBeHidden();
+			await expect( charlie ).toBeVisible();
+
+			await charlie.getByTestId( buttonId ).click();
+			await expect( charlie.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.charlie
+			);
+
+			await page.getByTestId( 'link all' ).click();
+
+			await expect( csn ).toBeHidden();
+			await expect( page ).toHaveTitle( 'all – gutenberg' );
+			await expect( csn ).toBeVisible();
+
+			await expect( alpha ).toBeVisible();
+			await expect( bravo ).toBeVisible();
+			await expect( charlie ).toBeVisible();
+
+			await expect( alpha.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.alpha
+			);
+			await expect( bravo.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.bravo
+			);
+			await expect( charlie.getByTestId( 'text' ) ).toHaveText(
+				expectedValues.charlie
+			);
+		} );
+	}
+} );
diff --git a/test/e2e/specs/interactivity/router-styles.spec.ts b/test/e2e/specs/interactivity/router-styles.spec.ts
new file mode 100644
index 00000000000000..0955747c95fb7d
--- /dev/null
+++ b/test/e2e/specs/interactivity/router-styles.spec.ts
@@ -0,0 +1,433 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+const COLOR_RED = 'rgb(255, 0, 0)';
+const COLOR_GREEN = 'rgb(0, 255, 0)';
+const COLOR_BLUE = 'rgb(0, 0, 255)';
+const COLOR_WRAPPER = 'rgb(160, 12, 60)';
+
+test.describe( 'Router styles', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const red = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'red',
+				innerBlocks: [ [ 'test/router-styles-red' ] ],
+			}
+		);
+		const green = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'green',
+				innerBlocks: [ [ 'test/router-styles-green' ] ],
+			}
+		);
+		const blue = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'blue',
+				innerBlocks: [ [ 'test/router-styles-blue' ] ],
+			}
+		);
+
+		const all = await utils.addPostWithBlock(
+			'test/router-styles-wrapper',
+			{
+				alias: 'all',
+				innerBlocks: [
+					[ 'test/router-styles-red' ],
+					[ 'test/router-styles-green' ],
+					[ 'test/router-styles-blue' ],
+				],
+			}
+		);
+
+		await utils.addPostWithBlock( 'test/router-styles-wrapper', {
+			alias: 'none',
+			attributes: { links: { red, green, blue, all } },
+		} );
+	} );
+
+	test.beforeEach( async ( { page, interactivityUtils: utils } ) => {
+		await page.goto( utils.getLink( 'none' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should add and remove styles from style tags', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red' );
+		const green = page.getByTestId( 'green' );
+		const blue = page.getByTestId( 'blue' );
+		const all = page.getByTestId( 'all' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+	} );
+
+	test( 'should add and remove styles from referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-link' );
+		const green = page.getByTestId( 'green-from-link' );
+		const blue = page.getByTestId( 'blue-from-link' );
+		const all = page.getByTestId( 'all-from-link' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+	} );
+
+	test( 'should support relative URLs in referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const background = page.getByTestId( 'background-from-link' );
+
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( background ).toHaveScreenshot();
+	} );
+
+	test( 'should update style tags with modified content', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-inline' );
+		const green = page.getByTestId( 'green-from-inline' );
+		const blue = page.getByTestId( 'blue-from-inline' );
+		const all = page.getByTestId( 'all-from-inline' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_RED );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_BLUE );
+		await expect( all ).toHaveCSS( 'color', COLOR_BLUE );
+	} );
+
+	test( 'should preserve rule order from referenced style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const orderChecker = page.getByTestId( 'order-checker' );
+
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link blue' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+
+		await page.getByTestId( 'link all' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+		await expect( orderChecker ).toHaveCSS( 'color', COLOR_GREEN );
+	} );
+
+	test( 'should refresh the page when stylesheet loading fails', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-link' );
+		const redBlock = page.getByTestId( 'red-block' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( redBlock ).toBeHidden();
+
+		// Setup a route handler to make requests to the red stylesheet fail.
+		// The route handler is removed after navigation to simulate a
+		// temporary error.
+		const linkPattern = '**/router-styles-red/style-from-link.css*';
+		await page.route( linkPattern, async ( route ) => {
+			await page.unroute( linkPattern );
+			return route.abort( 'failed' );
+		} );
+
+		// Navigate to the page with the Red block
+		await page.getByTestId( 'link red' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( red ).toHaveCSS( 'color', COLOR_RED );
+		await expect( redBlock ).toBeVisible();
+	} );
+
+	test( 'should not apply preloaded styles in current page', async ( {
+		page,
+	} ) => {
+		const red = page.getByTestId( 'red-from-inline' );
+		const green = page.getByTestId( 'green-from-inline' );
+		const blue = page.getByTestId( 'blue-from-inline' );
+		const all = page.getByTestId( 'all-from-inline' );
+		const prefetching = page.getByTestId( 'prefetching' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link red' ).hover();
+		await expect( prefetching ).toHaveText( 'true' );
+
+		// Wait until the prefetching has finished.
+		await expect( prefetching ).toHaveText( 'false' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+	} );
+
+	test( 'should not cause race conditions during render', async ( {
+		page,
+	} ) => {
+		// Resolve functions for promises that fulfill once the target
+		// style is requested and resolved respectively.
+		let requestStyle: ( value?: unknown ) => void;
+		let resolveStyle: ( value?: unknown ) => void;
+
+		// Promise that will resolve once the target style is intercepted.
+		// See the `page.route()` below.
+		const styleHasBeenRequested = new Promise(
+			( resolve ) => ( requestStyle = resolve )
+		);
+
+		// Setup a route handler to intercept a specific style sheet.
+		const linkPattern = '**/router-styles-red/style-from-link.css*';
+		await page.route( linkPattern, async ( route ) => {
+			requestStyle();
+			await new Promise( ( resolve ) => ( resolveStyle = resolve ) );
+			await route.continue();
+		} );
+
+		const csn = page.getByTestId( 'client-side navigation' );
+		const red = page.getByTestId( 'red-from-inline' );
+		const green = page.getByTestId( 'green-from-inline' );
+		const blue = page.getByTestId( 'blue-from-inline' );
+		const all = page.getByTestId( 'all-from-inline' );
+
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		// Hover the red link.
+		await page.getByTestId( 'link red' ).hover();
+
+		// Wait until the target style has been requested.
+		await styleHasBeenRequested;
+
+		await page.getByTestId( 'link red' ).click();
+
+		// The red style is not ready yet; colors should stay the same.
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_WRAPPER );
+
+		await page.getByTestId( 'link green' ).click();
+
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// Colors should change after navigation.
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+
+		// Resolve the requested style.
+		resolveStyle!();
+
+		await expect( csn ).toBeVisible();
+
+		// Styles should not change.
+		await expect( red ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( green ).toHaveCSS( 'color', COLOR_GREEN );
+		await expect( blue ).toHaveCSS( 'color', COLOR_WRAPPER );
+		await expect( all ).toHaveCSS( 'color', COLOR_GREEN );
+	} );
+
+	test( 'should respect the original media attribute on initial style sheets', async ( {
+		page,
+	} ) => {
+		const csn = page.getByTestId( 'client-side navigation' );
+		const hideOnPrint = page.getByTestId( 'hide-on-print' );
+
+		await expect( hideOnPrint ).toBeVisible();
+
+		await page.getByTestId( 'link red' ).click();
+
+		// This element disappears when a navigation starts.
+		// It should be visible again after a successful navigation.
+		await expect( csn ).toBeHidden();
+		await expect( csn ).toBeVisible();
+
+		// The "hide-on-print" element should remain visible.
+		await expect( hideOnPrint ).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/tovdom.spec.ts b/test/e2e/specs/interactivity/tovdom.spec.ts
index cf08fb115db4fd..84c974a2d7efa1 100644
--- a/test/e2e/specs/interactivity/tovdom.spec.ts
+++ b/test/e2e/specs/interactivity/tovdom.spec.ts
@@ -19,6 +19,7 @@ test.describe( 'toVdom', () => {
 	test( 'it should delete comments', async ( { page } ) => {
 		const el = page.getByTestId( 'it should delete comments' );
 		const c = await el.innerHTML();
+		expect( c ).not.toContain( '##last-child##' );
 		expect( c ).not.toContain( '##1##' );
 		expect( c ).not.toContain( '##2##' );
 		const el2 = page.getByTestId(
@@ -32,6 +33,7 @@ test.describe( 'toVdom', () => {
 			'it should delete processing instructions'
 		);
 		const c = await el.innerHTML();
+		expect( c ).not.toContain( '##last-child##' );
 		expect( c ).not.toContain( '##1##' );
 		expect( c ).not.toContain( '##2##' );
 		const el2 = page.getByTestId(
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index d3feeb866619a2..d88273574bc4b0 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -375,7 +375,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( siteTitle );
 
 		// Remove the default site title block.
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 
 		// Insert a group block with a Site Title block inside.
 		await editor.insertBlock( {
diff --git a/test/e2e/specs/widgets/editing-widgets.spec.js b/test/e2e/specs/widgets/editing-widgets.spec.js
index 648b04d3e202b2..019e07fe87daac 100644
--- a/test/e2e/specs/widgets/editing-widgets.spec.js
+++ b/test/e2e/specs/widgets/editing-widgets.spec.js
@@ -573,7 +573,7 @@ test.describe( 'Widgets screen', () => {
 			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'Second Paragraph' } )
 			.focus();
-		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'access+z' );
 		await widgetsScreen.saveWidgets();
 
 		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {
diff --git a/test/integration/fixtures/blocks/core__post-content.json b/test/integration/fixtures/blocks/core__post-content.json
index 431deb79f277b4..f5699a85b1781d 100644
--- a/test/integration/fixtures/blocks/core__post-content.json
+++ b/test/integration/fixtures/blocks/core__post-content.json
@@ -2,7 +2,9 @@
 	{
 		"name": "core/post-content",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"tagName": "div"
+		},
 		"innerBlocks": []
 	}
 ]
diff --git a/test/native/jest.config.js b/test/native/jest.config.js
index 71232758734feb..015b417bc71361 100644
--- a/test/native/jest.config.js
+++ b/test/native/jest.config.js
@@ -27,6 +27,9 @@ const RAW_HANDLING_UNSUPPORTED_UNIT_TESTS = [
 	'figure-content-reducer',
 	'normalise-blocks',
 	'image-corrector',
+	// Disabled due to jsdom-jscore-rn limitations.
+	// See: https://github.com/WordPress/gutenberg/pull/69322#issuecomment-2789510963
+	'paste-handler',
 ];
 
 module.exports = {
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 8d363cc46e9157..23a594e52f1d0e 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -8,6 +8,9 @@ const transpiledPackageNames = glob( 'packages/*/src/index.{js,ts,tsx}' ).map(
 	( fileName ) => fileName.split( '/' )[ 1 ]
 );
 
+// Make sure the tests run in UTC timezone, regardless of the system timezone.
+process.env.TZ = 'UTC';
+
 module.exports = {
 	rootDir: '../../',
 	moduleNameMapper: {
diff --git a/tsconfig.json b/tsconfig.json
index d6bbcb27f0adb6..458315ef44a289 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -62,6 +62,7 @@
 		{ "path": "packages/warning" },
 		{ "path": "packages/wordcount" },
 		{ "path": "test/e2e" },
+		{ "path": "packages/jest-console" },
 		{ "path": "test/performance" }
 	],
 	"files": []