diff --git a/.eslintrc.js b/.eslintrc.js
index 87a98f5429d10..0fc100088bb56 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -81,6 +81,7 @@ module.exports = {
 						importNames: [
 							'camelCase',
 							'capitalize',
+							'castArray',
 							'chunk',
 							'clamp',
 							'cloneDeep',
@@ -96,6 +97,7 @@ module.exports = {
 							'differenceWith',
 							'dropRight',
 							'each',
+							'escape',
 							'escapeRegExp',
 							'every',
 							'extend',
@@ -112,6 +114,7 @@ module.exports = {
 							'fromPairs',
 							'has',
 							'identity',
+							'includes',
 							'invoke',
 							'isArray',
 							'isBoolean',
@@ -146,6 +149,7 @@ module.exports = {
 							'reverse',
 							'size',
 							'snakeCase',
+							'some',
 							'sortBy',
 							'startCase',
 							'startsWith',
@@ -166,6 +170,8 @@ module.exports = {
 							'uniqWith',
 							'upperFirst',
 							'values',
+							'without',
+							'words',
 							'xor',
 							'zip',
 						],
@@ -322,8 +328,20 @@ module.exports = {
 		},
 		{
 			files: [ '**/test/**/*.js' ],
-			excludedFiles: [ '**/*.@(android|ios|native).js' ],
-			extends: [ 'plugin:jest-dom/recommended' ],
+			excludedFiles: [
+				'**/*.@(android|ios|native).js',
+				'packages/react-native-*/**/*.js',
+				'test/native/**/*.js',
+				'test/e2e/**/*.[tj]s',
+			],
+			extends: [
+				'plugin:jest-dom/recommended',
+				'plugin:testing-library/react',
+			],
+			rules: {
+				'testing-library/no-container': 'off',
+				'testing-library/no-node-access': 'off',
+			},
 		},
 		{
 			files: [ 'packages/e2e-test*/**/*.js' ],
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 59542a88ffa3d..cd5fa3082d7d7 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,9 +2,9 @@
 version: 2
 
 updates:
-  # Check for updates to GitHub Actions.
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"
-    open-pull-requests-limit: 10
+    # Check for updates to GitHub Actions.
+    - package-ecosystem: 'github-actions'
+      directory: '/'
+      schedule:
+          interval: 'daily'
+      open-pull-requests-limit: 10
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 82758b78e1f29..92d323f8dc13c 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -180,7 +180,7 @@ jobs:
                   NO_CHECKS: 'true'
 
             - name: Upload artifact
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               with:
                   name: gutenberg-plugin
                   path: ./gutenberg.zip
@@ -203,7 +203,7 @@ jobs:
 
             - name: Upload release notes artifact
               if: ${{ needs.bump-version.outputs.new_version }}
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               with:
                   name: release-notes
                   path: ./release-notes.txt
@@ -266,12 +266,12 @@ jobs:
               run: echo ::set-output name=version::$(echo $VERSION | cut -d / -f 3 | sed 's/-rc./ RC/' )
 
             - name: Download Plugin Zip Artifact
-              uses: actions/download-artifact@fb598a63ae348fa914e94cd0ff38f362e927b741 # v3.0.0
+              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
               with:
                   name: gutenberg-plugin
 
             - name: Download Release Notes Artifact
-              uses: actions/download-artifact@fb598a63ae348fa914e94cd0ff38f362e927b741 # v3.0.0
+              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
               with:
                   name: release-notes
 
diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
index c65f56b824c91..e0aabb17afa01 100644
--- a/.github/workflows/end2end-test-playwright.yml
+++ b/.github/workflows/end2end-test-playwright.yml
@@ -39,7 +39,7 @@ jobs:
 
             - name: Install Playwright dependencies
               run: |
-                  npx playwright install chromium --with-deps
+                  npx playwright install chromium firefox webkit --with-deps
 
             - name: Install WordPress and start the server
               run: |
@@ -47,18 +47,18 @@ jobs:
 
             - name: Run the tests
               run: |
-                  npm run test:e2e:playwright
+                  xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test:e2e:playwright
 
             - name: Archive debug artifacts (screenshots, traces)
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: failures-artifacts
-                  path: artifacts
+                  path: artifacts/test-results
                   if-no-files-found: ignore
 
             - name: Archive flaky tests report
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: flaky-tests-report-playwright
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index 5dadd996945a7..172d3b090eaf0 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -49,7 +49,7 @@ jobs:
                   $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == ${{ matrix.part }} - 1' < ~/.jest-e2e-tests )
 
             - name: Archive debug artifacts (screenshots, HTML snapshots)
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: failures-artifacts
@@ -57,7 +57,7 @@ jobs:
                   if-no-files-found: ignore
 
             - name: Archive flaky tests report
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: flaky-tests-report-${{ matrix.part }}
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 27b89697f9656..e878724c1b5f1 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -35,7 +35,7 @@ jobs:
 
             - name: Compare performance with trunk
               if: github.event_name == 'pull_request'
-              run: ./bin/plugin/cli.js perf --ci $GITHUB_SHA trunk --tests-branch $GITHUB_SHA
+              run: ./bin/plugin/cli.js perf $GITHUB_SHA trunk --tests-branch $GITHUB_SHA
 
             - name: Compare performance with current WordPress Core and previous Gutenberg versions
               if: github.event_name == 'release'
@@ -50,7 +50,7 @@ jobs:
                   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 --ci "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf "wp/$WP_MAJOR" "$PREVIOUS_RELEASE_BRANCH" "$CURRENT_RELEASE_BRANCH" --wp-version "$WP_MAJOR"
 
             - name: Compare performance with base branch
               if: github.event_name == 'push'
@@ -61,9 +61,9 @@ jobs:
                   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 --ci $GITHUB_SHA debd225d007f4e441ceec80fbd6fa96653f94737 --tests-branch $GITHUB_SHA  --wp-version "$WP_MAJOR"
+                  ./bin/plugin/cli.js perf $GITHUB_SHA debd225d007f4e441ceec80fbd6fa96653f94737 --tests-branch $GITHUB_SHA  --wp-version "$WP_MAJOR"
 
-            - uses: actions/github-script@100527700e8b29ca817ac0e0dfbfc5e8ff38edda # v6.3.2
+            - uses: actions/github-script@d556feaca394842dc55e4734bf3bb9f685482fa0 # v6.3.3
               if: github.event_name == 'push'
               id: commit-timestamp
               with:
diff --git a/.github/workflows/rnmobile-android-runner.yml b/.github/workflows/rnmobile-android-runner.yml
index 5b35e24d091cb..dc16ff160495b 100644
--- a/.github/workflows/rnmobile-android-runner.yml
+++ b/.github/workflows/rnmobile-android-runner.yml
@@ -25,7 +25,7 @@ jobs:
               uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
 
             - name: Use desired version of Java
-              uses: actions/setup-java@a18c333f3f14249953dab3e186e5e21bf3390f1d # v3.5.1
+              uses: actions/setup-java@de1bb2b0c5634f0fc4438d7aa9944e68f9bf86cc # v3.6.0
               with:
                   distribution: 'temurin'
                   java-version: '11'
@@ -52,13 +52,13 @@ jobs:
                   profile: pixel_xl
                   script: npm run native test:e2e:android:local ${{ matrix.native-test-name }}
 
-            - uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: android-screen-recordings
                   path: packages/react-native-editor/android-screen-recordings
 
-            - uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: appium-logs
diff --git a/.github/workflows/rnmobile-ios-runner.yml b/.github/workflows/rnmobile-ios-runner.yml
index 6d1a127f05817..36dc3a5dc30c9 100644
--- a/.github/workflows/rnmobile-ios-runner.yml
+++ b/.github/workflows/rnmobile-ios-runner.yml
@@ -77,13 +77,13 @@ jobs:
                   rm packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle
                   rm -rf packages/react-native-editor/ios/build/GutenbergDemo/Build/Products/Release-iphonesimulator/GutenbergDemo.app/assets
 
-            - uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: ios-screen-recordings
                   path: packages/react-native-editor/ios-screen-recordings
 
-            - uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+            - uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               if: always()
               with:
                   name: appium-logs
diff --git a/.github/workflows/storybook-pages.yml b/.github/workflows/storybook-pages.yml
index 6665a1ef8f7b2..e0ce7283b28ba 100644
--- a/.github/workflows/storybook-pages.yml
+++ b/.github/workflows/storybook-pages.yml
@@ -29,7 +29,7 @@ jobs:
               run: npm run storybook:build
 
             - name: Deploy
-              uses: peaceiris/actions-gh-pages@068dc23d9710f1ba62e86896f84735d869951305 # v3.8.0
+              uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935 # v3.9.0
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   publish_dir: ./storybook/build
diff --git a/.github/workflows/upload-release-to-plugin-repo.yml b/.github/workflows/upload-release-to-plugin-repo.yml
index a8bdd00892e2e..6221dd30e5113 100644
--- a/.github/workflows/upload-release-to-plugin-repo.yml
+++ b/.github/workflows/upload-release-to-plugin-repo.yml
@@ -79,7 +79,7 @@ jobs:
             - name: Commit the Changelog update
               run: |
                   git add changelog.txt
-                  # Remove files that are not meant to be commited
+                  # Remove files that are not meant to be committed
                   # ie. release_notes.txt created on the previous step.
                   git clean -fd
                   # Only attempt to commit changelog if it has been modified.
@@ -89,7 +89,7 @@ jobs:
                   fi
 
             - name: Upload Changelog artifact
-              uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8 # v3.1.0
+              uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
               with:
                   name: changelog ${{ matrix.label }}
                   path: ./changelog.txt
@@ -134,7 +134,7 @@ jobs:
               run: sed -i "s/${STABLE_TAG_PLACEHOLDER}/${STABLE_TAG}/g" ./trunk/readme.txt
 
             - name: Download Changelog Artifact
-              uses: actions/download-artifact@fb598a63ae348fa914e94cd0ff38f362e927b741 # v3.0.0
+              uses: actions/download-artifact@9782bd6a9848b53b110e712e20e42d89988822b7 # v3.0.1
               with:
                   name: changelog trunk
                   path: trunk
diff --git a/bin/packages/watch.js b/bin/packages/watch.js
index ec5c504c0202f..8686aa82a588f 100644
--- a/bin/packages/watch.js
+++ b/bin/packages/watch.js
@@ -176,7 +176,7 @@ watch(
 	PACKAGES_DIR,
 	{ recursive: true, delay: 500, filter: isWatchableFile },
 	( event, filename ) => {
-		// Double check whether we're dealing with a file that needs watching, to accomodate for
+		// Double check whether we're dealing with a file that needs watching, to accommodate for
 		// the inability to watch recursively on linux-based operating systems.
 		if ( ! isSourceFile( filename ) || ! isModulePackage( filename ) ) {
 			return;
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index c4a500b105c26..0571a0e72955f 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -193,6 +193,8 @@ async function runTestSuite( testSuite, performanceTestDirectory ) {
  * @param {WPPerformanceCommandOptions} options  Command options.
  */
 async function runPerformanceTests( branches, options ) {
+	const runningInCI = !! process.env.CI || !! options.ci;
+
 	// The default value doesn't work because commander provides an array.
 	if ( branches.length === 0 ) {
 		branches = [ 'trunk' ];
@@ -201,11 +203,11 @@ async function runPerformanceTests( branches, options ) {
 	log(
 		formats.title( '\n💃 Performance Tests 🕺\n' ),
 		'\nWelcome! This tool runs the performance tests on multiple branches and displays a comparison table.\n' +
-			'In order to run the tests, the tool is going to load a WordPress environment on 8888 and 8889 ports.\n' +
+			'In order to run the tests, the tool is going to load a WordPress environment on ports 8888 and 8889.\n' +
 			'Make sure these ports are not used before continuing.\n'
 	);
 
-	if ( ! options.ci ) {
+	if ( ! runningInCI ) {
 		await askForConfirmation( 'Ready to go? ' );
 	}
 
diff --git a/changelog.txt b/changelog.txt
index 33f0b72af73e6..5d7af6602e020 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,539 @@
 == Changelog ==
 
+= 14.5.0-rc.1 =
+
+## Changelog
+
+### Enhancements
+
+- Create Block: Update templates to use APIs introduced in WP 6.1. ([44185](https://github.com/WordPress/gutenberg/pull/44185))
+- Style Engine: Add support for dimensions.minHeight property. ([45334](https://github.com/WordPress/gutenberg/pull/45334))
+
+#### Components
+- Block mover button: Do not show focus styles on pointer interactions. ([45126](https://github.com/WordPress/gutenberg/pull/45126))
+- Border Controls: Update control components to allow 40px height. ([41860](https://github.com/WordPress/gutenberg/pull/41860))
+- BorderControl test: Await floating-ui state changes when rendering/opening popover. ([45241](https://github.com/WordPress/gutenberg/pull/45241))
+- Change color on destructive button focus state. ([44427](https://github.com/WordPress/gutenberg/pull/44427))
+- Convert the `ColorPalette` component to TypeScript. ([44632](https://github.com/WordPress/gutenberg/pull/44632))
+- NumberControl: Add custom spin buttons. ([45333](https://github.com/WordPress/gutenberg/pull/45333))
+- Remove unnecessary wrappers in stories. ([45305](https://github.com/WordPress/gutenberg/pull/45305))
+- SelectControl: Add onChange, onBlur and onFocus to storybook actions. ([45432](https://github.com/WordPress/gutenberg/pull/45432))
+- Update design of FontSizePicker when withSlider is set. ([44598](https://github.com/WordPress/gutenberg/pull/44598))
+
+#### Block Library
+- Comment template: Add spacing support. ([45101](https://github.com/WordPress/gutenberg/pull/45101))
+- Post comment count: Add spacing support. ([45150](https://github.com/WordPress/gutenberg/pull/45150))
+- Post comments form: Add spacing support. ([45091](https://github.com/WordPress/gutenberg/pull/45091))
+
+#### Post Editor
+- Edit Post: Improve distraction-free mode notices. ([45348](https://github.com/WordPress/gutenberg/pull/45348))
+- Move document information and outline to list view panel. ([44788](https://github.com/WordPress/gutenberg/pull/44788))
+
+#### Patterns
+- Add block pattern categories' descriptions to the REST API and update the descriptions. ([45244](https://github.com/WordPress/gutenberg/pull/45244))
+
+#### Design Tools
+- Spacing visualizer: Add option to trigger with mousover as well as value change. ([44955](https://github.com/WordPress/gutenberg/pull/44955))
+
+
+### Bug Fixes
+
+- Fix distraction free shortcut typo. ([45186](https://github.com/WordPress/gutenberg/pull/45186))
+- Fix resizeable editor scrolling. ([45189](https://github.com/WordPress/gutenberg/pull/45189))
+- Hide insertion point when moving out of the canvas. ([45420](https://github.com/WordPress/gutenberg/pull/45420))
+- I18n: Fix handling of nullish pot comments. ([45414](https://github.com/WordPress/gutenberg/pull/45414))
+- Prevent unexpected copying of the post title. ([41284](https://github.com/WordPress/gutenberg/pull/41284))
+- Typo in id in URL. ([45232](https://github.com/WordPress/gutenberg/pull/45232))
+
+#### Components
+- AutocompleteUI: Close popup when click happens outside of the popover. ([44795](https://github.com/WordPress/gutenberg/pull/44795))
+- Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
+- ColorPalette: Fix transparent checkered background pattern. ([45295](https://github.com/WordPress/gutenberg/pull/45295))
+- Fix `UnitControl` disabled style is overridden by WP forms.css. ([45250](https://github.com/WordPress/gutenberg/pull/45250))
+- Fix popover deprecations. ([45195](https://github.com/WordPress/gutenberg/pull/45195))
+- InputControl: Allow inline styles to be applied to wrapper instead of inner input. ([45340](https://github.com/WordPress/gutenberg/pull/45340))
+- ItemGroup: Fix RTL text alignment when item is clickable. ([45280](https://github.com/WordPress/gutenberg/pull/45280))
+- Set AnglePickerControl Storybook Label Control type to text. ([45122](https://github.com/WordPress/gutenberg/pull/45122))
+- TabPanel: Add tests and changelog for onSelect behavior change. ([45211](https://github.com/WordPress/gutenberg/pull/45211))
+- Update ExternalLink to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
+
+#### Block Library
+- Allow direct selection of nested Page List block by avoiding dual rendering within block. ([45143](https://github.com/WordPress/gutenberg/pull/45143))
+- Fix Nav uncontrolled blocks saving/loading experience. ([45486](https://github.com/WordPress/gutenberg/pull/45486))
+- List v2: Fix migration when nested list is invalid. ([44822](https://github.com/WordPress/gutenberg/pull/44822))
+- Navigation block: Add padding to buttons when Submenus Open on click is enabled. ([44605](https://github.com/WordPress/gutenberg/pull/44605))
+- Site Tagline: Fix user permission HTTP errors. ([45140](https://github.com/WordPress/gutenberg/pull/45140))
+- Site Title: Avoid 403 errors for users with low permissions. ([45093](https://github.com/WordPress/gutenberg/pull/45093))
+
+#### Design Tools
+- Fix control widths for Cover, Search, and Spacer blocks. ([45329](https://github.com/WordPress/gutenberg/pull/45329))
+- SpacingSizesControl: Remove UnitControl inline style use. ([45412](https://github.com/WordPress/gutenberg/pull/45412))
+
+#### Testing
+- Fix uploading artifacts even when the tests are successful. ([45187](https://github.com/WordPress/gutenberg/pull/45187))
+- Migrate Gallery tests to Playwright. ([45202](https://github.com/WordPress/gutenberg/pull/45202))
+
+#### Patterns
+- Fix PHP warning in categories REST API controller. ([45410](https://github.com/WordPress/gutenberg/pull/45410))
+
+#### Build Tooling
+- ESLint: Exclude Playwright tests from testing library rules. ([45366](https://github.com/WordPress/gutenberg/pull/45366))
+
+#### Layout
+- Ensure block content is always returned as a string after processing. ([45330](https://github.com/WordPress/gutenberg/pull/45330))
+
+#### Plugin
+- Fix failing PHPUnit tests. ([45265](https://github.com/WordPress/gutenberg/pull/45265))
+
+#### Post Editor
+- Visual Editor: Fix permission error. ([45262](https://github.com/WordPress/gutenberg/pull/45262))
+
+#### Global Styles
+- Fix: Site editor clips body background style. ([45261](https://github.com/WordPress/gutenberg/pull/45261))
+
+#### Meta Boxes
+- Metaboxes save: Perform hasMetaBoxes check on every save. ([45145](https://github.com/WordPress/gutenberg/pull/45145))
+
+#### Webfonts
+- Web Font: Fix ascent/descent-override property typo. ([45125](https://github.com/WordPress/gutenberg/pull/45125))
+
+#### Accessibility
+- fix: Image caption supports Voice Control. ([44850](https://github.com/WordPress/gutenberg/pull/44850))
+
+#### Document Settings
+- PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
+
+#### Site Editor
+- Only mark the 'Site' menu item active when editing a home template. ([42807](https://github.com/WordPress/gutenberg/pull/42807))
+
+
+### Performance
+
+- Lodash: Refactor `@wordpress/blocks` away from `_.includes()`. ([45311](https://github.com/WordPress/gutenberg/pull/45311))
+- Lodash: Refactor `@wordpress/keycodes` away from `_.includes()`. ([45306](https://github.com/WordPress/gutenberg/pull/45306))
+- Lodash: Refactor away from `_.kebabCase()` in site editor. ([45192](https://github.com/WordPress/gutenberg/pull/45192))
+- Lodash: Refactor block editor away from `_.some()`. ([45335](https://github.com/WordPress/gutenberg/pull/45335))
+- Lodash: Refactor blocks away from `_.some()`. ([45338](https://github.com/WordPress/gutenberg/pull/45338))
+
+#### Post Editor
+- Lodash: Refactor `@wordpress/edit-post` away from `_.includes()`. ([45310](https://github.com/WordPress/gutenberg/pull/45310))
+- Lodash: Refactor away from `_.castArray()`. ([45098](https://github.com/WordPress/gutenberg/pull/45098))
+- Lodash: Refactor away from `_.escape()`. ([45282](https://github.com/WordPress/gutenberg/pull/45282))
+- Lodash: Refactor away from `_.includes()`. ([45316](https://github.com/WordPress/gutenberg/pull/45316))
+- Lodash: Refactor editor away from `_.some()`. ([45342](https://github.com/WordPress/gutenberg/pull/45342))
+
+#### Block Library
+- Lodash: Refactor `@wordpress/block-library` away from `_.includes()`. ([45307](https://github.com/WordPress/gutenberg/pull/45307))
+- Lodash: Refactor away from a few similar `_.pickBy()`. ([45312](https://github.com/WordPress/gutenberg/pull/45312))
+- Lodash: Refactor block library away from `_.some()`. ([45337](https://github.com/WordPress/gutenberg/pull/45337))
+
+#### Components
+- Lodash: Refactor away from `_.some()`. ([45367](https://github.com/WordPress/gutenberg/pull/45367))
+- Lodash: Refactor away from `_.without()`. ([44980](https://github.com/WordPress/gutenberg/pull/44980))
+
+#### Block Editor
+- Lodash: Refactor away from `_.words()` - take 2. ([45281](https://github.com/WordPress/gutenberg/pull/45281))
+
+
+### Documentation
+
+- Add a readme to the letter spacing component. ([45308](https://github.com/WordPress/gutenberg/pull/45308))
+- Add changelogs for internal refactorings using inert. ([45269](https://github.com/WordPress/gutenberg/pull/45269))
+- Add storybook intro. ([45115](https://github.com/WordPress/gutenberg/pull/45115))
+- Character Swap. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
+- Code Quality: Fix some misspelled words. ([45222](https://github.com/WordPress/gutenberg/pull/45222))
+- LinkControl: Use Popover new placement prop instead of legacy position prop in README. ([44388](https://github.com/WordPress/gutenberg/pull/44388))
+- Updating curation document to include content lock ability. ([44908](https://github.com/WordPress/gutenberg/pull/44908))
+- useAnchorRef: Update deprecation message. ([45302](https://github.com/WordPress/gutenberg/pull/45302))
+
+#### Components
+- Disabled: Update documentation to clarify the absence of inert polyfill. ([45272](https://github.com/WordPress/gutenberg/pull/45272))
+
+
+### Code Quality
+
+- Block Editor: Improve `MediaReplaceFlow` tests. ([45424](https://github.com/WordPress/gutenberg/pull/45424))
+- Block Editor: Refactor align tests to RTL. ([45152](https://github.com/WordPress/gutenberg/pull/45152))
+- Block switcher preview Popover: Use new placement prop instead of legacy position prop. ([44387](https://github.com/WordPress/gutenberg/pull/44387))
+- Button block Popover: Use placement prop instead of legacy position prop. ([44392](https://github.com/WordPress/gutenberg/pull/44392))
+- Fix indent and quote in dependbot.yml. ([45167](https://github.com/WordPress/gutenberg/pull/45167))
+- Fix: PHP 8.1 Deprecation - strncmp(): Passing null to parameter. ([44829](https://github.com/WordPress/gutenberg/pull/44829))
+- Format Toolbar Popover: Use new placement prop instead of legacy position prop. ([44389](https://github.com/WordPress/gutenberg/pull/44389))
+- Image format popover: Use placement prop instead of legacy position prop. ([44398](https://github.com/WordPress/gutenberg/pull/44398))
+- Link format Popover: Use placement prop instead of legacy position prop. ([44399](https://github.com/WordPress/gutenberg/pull/44399))
+- Navigation Link Popover: Use placement prop instead of legacy position prop. ([44394](https://github.com/WordPress/gutenberg/pull/44394))
+- Navigation Submenu Popover: Use placement prop instead of legacy position prop. ([44395](https://github.com/WordPress/gutenberg/pull/44395))
+- Replace the MainDashboardButton slot with a setting in the site editor. ([45149](https://github.com/WordPress/gutenberg/pull/45149))
+- Run script loader test. ([45288](https://github.com/WordPress/gutenberg/pull/45288))
+- Site Editor: Move the save view state to the edit site store. ([45200](https://github.com/WordPress/gutenberg/pull/45200))
+- Small follow-ups to the distraction free mode PR. ([45151](https://github.com/WordPress/gutenberg/pull/45151))
+- Tests: Use `container` instead of `container.firstChild` for snapshots. ([45278](https://github.com/WordPress/gutenberg/pull/45278))
+- URL Input Popover: Use new placement prop instead of legacy position prop. ([44390](https://github.com/WordPress/gutenberg/pull/44390))
+- useFocusOutside: Rewrite hook to TypeScript, rewrite tests to model RTL and user-event. ([45317](https://github.com/WordPress/gutenberg/pull/45317))
+- useFocusableIframe: Refactor to TypeScript. ([45428](https://github.com/WordPress/gutenberg/pull/45428))
+
+#### Components
+- Add a popover `variant` prop and refactor popovers to use it, deprecate `isAlternate`. ([45137](https://github.com/WordPress/gutenberg/pull/45137))
+- Add parseQuantityAndUnitFromRawValue tests. ([45260](https://github.com/WordPress/gutenberg/pull/45260))
+- Autocompleter Popover: Use placement prop instead of legacy position prop. ([44396](https://github.com/WordPress/gutenberg/pull/44396))
+- FontSizePicker: Rewrite unit tests to use userEvent and be more comprehensive. ([45298](https://github.com/WordPress/gutenberg/pull/45298))
+- Improve `BorderBoxControl` tests. ([45208](https://github.com/WordPress/gutenberg/pull/45208))
+- Refactor `ContextSystemProvider` and the `useUpdateEffect` util to ignore `exhaustive-deps`. ([45044](https://github.com/WordPress/gutenberg/pull/45044))
+- Refactor `SlotFill` to pass `exhaustive-deps`. ([44403](https://github.com/WordPress/gutenberg/pull/44403))
+- Refactor `Snackbar` to pass `exhaustive-deps`. ([44934](https://github.com/WordPress/gutenberg/pull/44934))
+- Refactor `TabPanel` to pass `exhaustive-deps`. ([44935](https://github.com/WordPress/gutenberg/pull/44935))
+- Remove unnecessary `.firstChild` from tests. ([45419](https://github.com/WordPress/gutenberg/pull/45419))
+- Update some React 18 related types. ([45279](https://github.com/WordPress/gutenberg/pull/45279))
+
+#### Global Styles
+- Add `wp_theme_has_theme_json` as a public API to know whether a theme has a `theme.json`. ([45168](https://github.com/WordPress/gutenberg/pull/45168))
+- Deprecate `WP_Theme_JSON_Resolver:Theme_has_support()`. ([45380](https://github.com/WordPress/gutenberg/pull/45380))
+
+#### Post Editor
+- Editors: Refactor icon tests to follow `no-container` rule. ([45422](https://github.com/WordPress/gutenberg/pull/45422))
+
+
+### Tools
+
+#### Testing
+- Add end-to-end tests for Drag-and-Drop in the inserter. ([44631](https://github.com/WordPress/gutenberg/pull/44631))
+- Cleanup after the writing flow end-to-end tests. ([45119](https://github.com/WordPress/gutenberg/pull/45119))
+- Migrate Fullscreen mode test to Playwright. ([43963](https://github.com/WordPress/gutenberg/pull/43963))
+- Migrate New Default Post Content Test to Playwright. ([45267](https://github.com/WordPress/gutenberg/pull/45267))
+- Migrate Splitting Merging test to Playwright. ([44916](https://github.com/WordPress/gutenberg/pull/44916))
+- Migrate `site-editor-inserter` end-to-end test to Playwright. ([44507](https://github.com/WordPress/gutenberg/pull/44507))
+- Migrate `templates` end-to-end test to Playwright. ([45393](https://github.com/WordPress/gutenberg/pull/45393))
+- Migrate columns test case to Playwright. ([43964](https://github.com/WordPress/gutenberg/pull/43964))
+- Re-enable skipped Gallery block end-to-end test. ([45266](https://github.com/WordPress/gutenberg/pull/45266))
+- Try fixing Site Title flaky end-to-end tests. ([45160](https://github.com/WordPress/gutenberg/pull/45160))
+- Update Playwright to v1.27. ([45193](https://github.com/WordPress/gutenberg/pull/45193))
+
+#### Build Tooling
+- ESLint: Add and enable `eslint-plugin-testing-library`. ([45103](https://github.com/WordPress/gutenberg/pull/45103))
+- Remove comments from compiled styles. ([43177](https://github.com/WordPress/gutenberg/pull/43177))
+- Upgrade rtlcss to v4.0.0. ([43208](https://github.com/WordPress/gutenberg/pull/43208))
+- build: Native demo editor supports Xcode 14. ([45120](https://github.com/WordPress/gutenberg/pull/45120))
+
+
+### Various
+
+- Add :Visited to theme.json schema. ([45236](https://github.com/WordPress/gutenberg/pull/45236))
+- Add Playwright Compatibility-classic-editor Test. ([43979](https://github.com/WordPress/gutenberg/pull/43979))
+- Add rel attribute for Social Icons. ([45469](https://github.com/WordPress/gutenberg/pull/45469))
+- Add: Do not use in production to content locking experimental API's. ([45291](https://github.com/WordPress/gutenberg/pull/45291))
+- Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
+- Post comments link: Add spacing support. ([45184](https://github.com/WordPress/gutenberg/pull/45184))
+- PostTextEditor test: Wrap .blur calls in act(). ([45243](https://github.com/WordPress/gutenberg/pull/45243))
+- Revert "Lodash: Refactor away from `_.kebabCase()` in site editor". ([45206](https://github.com/WordPress/gutenberg/pull/45206))
+
+#### Components
+- Button: Refactor Storybook to controls and align documentation. ([44105](https://github.com/WordPress/gutenberg/pull/44105))
+- DateTimePicker: Add `__next*` props in Storybook. ([45164](https://github.com/WordPress/gutenberg/pull/45164))
+- Font Size Picker: Update changelog for #45041. ([45180](https://github.com/WordPress/gutenberg/pull/45180))
+- FormFileUpload: Remove unused story file. ([45286](https://github.com/WordPress/gutenberg/pull/45286))
+- RadioGroup: Mark as deprecated. ([45389](https://github.com/WordPress/gutenberg/pull/45389))
+- Revert "Navigator: Remove overflow styles from NavigatorScreen". ([45303](https://github.com/WordPress/gutenberg/pull/45303))
+- Storybook: Addon to wrap stories in max-width div. ([45134](https://github.com/WordPress/gutenberg/pull/45134))
+- TextControl: Set Storybook control types on help, label and type. ([45405](https://github.com/WordPress/gutenberg/pull/45405))
+- ToggleGroupControl: Add de-selectable variant. ([45123](https://github.com/WordPress/gutenberg/pull/45123))
+- ToggleGroupControl: Remove invalid props from types. ([45114](https://github.com/WordPress/gutenberg/pull/45114))
+
+#### Block Library
+- Gallery: Register styles with style engine. ([43070](https://github.com/WordPress/gutenberg/pull/43070))
+- Navigation block: Return undefined from useEffect. ([45239](https://github.com/WordPress/gutenberg/pull/45239))
+- Reset background-image property for outline button style. ([45234](https://github.com/WordPress/gutenberg/pull/45234))
+- [Audio]: Add toolbar button to add/remove caption. ([45112](https://github.com/WordPress/gutenberg/pull/45112))
+- [Video]: Add toolbar button to add/remove caption. ([45113](https://github.com/WordPress/gutenberg/pull/45113))
+- [Video]: Update tracks editor icon to text button. ([45245](https://github.com/WordPress/gutenberg/pull/45245))
+
+#### Global Styles
+- Embed: Add deprecation for the caption element. ([45166](https://github.com/WordPress/gutenberg/pull/45166))
+- File Block: Add a deprecation for the button element class name. ([45159](https://github.com/WordPress/gutenberg/pull/45159))
+- Gallery: Add a deprecation for captions in the gallery block. ([45173](https://github.com/WordPress/gutenberg/pull/45173))
+- Table Block: Add a deprecation for the figcaption element class name. ([45161](https://github.com/WordPress/gutenberg/pull/45161))
+- Video: Add a deprecation for the caption element. ([45169](https://github.com/WordPress/gutenberg/pull/45169))
+
+#### Meta Boxes
+- setAvailableMetaBoxesPerLocation: Merge new metaboxes into existing. ([45156](https://github.com/WordPress/gutenberg/pull/45156))
+
+#### Post Editor
+- hasChangedContent: Remove obsolete blocks check. ([45090](https://github.com/WordPress/gutenberg/pull/45090))
+
+#### Block Editor
+- Raw handling: Markdown: Also convert bulleted list with bullet characters. ([45017](https://github.com/WordPress/gutenberg/pull/45017))
+
+#### Layout
+- Try adding layout classnames to inner block wrapper. ([44600](https://github.com/WordPress/gutenberg/pull/44600))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @alvitazwar: Migrate iframe-rendering test case. ([44535](https://github.com/WordPress/gutenberg/pull/44535))
+- @GeoJunkie: PublishDateTimePicker: Retrieve all future posts in a given month. ([44540](https://github.com/WordPress/gutenberg/pull/44540))
+- @Initsogar: Components: Update ExternalLink to support onClick handler. ([45214](https://github.com/WordPress/gutenberg/pull/45214))
+- @jornp: Button component: Fix RTL alignment when containing icon and text. ([44787](https://github.com/WordPress/gutenberg/pull/44787))
+- @pkorzelius: Character Swap. ([45355](https://github.com/WordPress/gutenberg/pull/45355))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @alvitazwar @andrewserong @annezazu @aristath @BE-Webdesign @bph @brookewp @carolinan @chad1008 @ciampo @dcalhoun @ellatrix @fluiddot @GeoJunkie @georgeh @getdave @glendaviesnz @gziolo @Initsogar @jorgefilipecosta @jornp @jsnajdr @kevin940726 @KevinBatdorf @kienstra @Mamaduka @mikachan @mirka @noisysocks @ntsekouras @oandregal @pkorzelius @pooja-muchandikar @ramonjd @SavPhill @scruffian @SiobhyB @Soean @t-hamano @talldan @tellthemachines @tyxla @walbo @youknowriad
+
+
+= 14.4.0 =
+
+
+
+## Changelog
+
+### Enhancements
+
+- Add prop to disable block selection clearer in BlockList. ([44517](https://github.com/WordPress/gutenberg/pull/44517))
+- Multi-select: Fix 1px indent. ([44709](https://github.com/WordPress/gutenberg/pull/44709))
+- ServerSideRender: Add new `skipBlockSupportAttributes` prop. ([44491](https://github.com/WordPress/gutenberg/pull/44491))
+- Tag Processor: Add get_updated_html as a non-toString method of stringifying the markup. ([44597](https://github.com/WordPress/gutenberg/pull/44597))
+- Try: Add a small radius to the multi selection style. ([44708](https://github.com/WordPress/gutenberg/pull/44708))
+- Block Locking: Adds content locking to navigation block. ([44739](https://github.com/WordPress/gutenberg/pull/44739))
+- Rich Text: Use fallback icon for highlight format. ([44705](https://github.com/WordPress/gutenberg/pull/44705))
+- Create Block: Allows custom keys to be generated in block.json files and package.json files. ([44649](https://github.com/WordPress/gutenberg/pull/44649))
+
+#### Block Library
+- Comments: Add spacing support. ([45102](https://github.com/WordPress/gutenberg/pull/45102))
+- Tag Cloud: Add typography supports (except font size). ([43452](https://github.com/WordPress/gutenberg/pull/43452))
+- Image: Add toolbar button to add a caption. ([44965](https://github.com/WordPress/gutenberg/pull/44965))
+- List Item: Adopt typography supports. ([43312](https://github.com/WordPress/gutenberg/pull/43312))
+
+#### Components
+- BorderBoxControl: Omit unit select when values are mixed. ([44592](https://github.com/WordPress/gutenberg/pull/44592))
+- SuggestionList: Use requestAnimationFrame instead of setTimeout when scrolling selected item into view. ([44573](https://github.com/WordPress/gutenberg/pull/44573))
+
+
+#### Block Editor
+- Introduce distraction free mode. ([41740](https://github.com/WordPress/gutenberg/pull/41740))
+- Redesign the main pattern inserter. ([44028](https://github.com/WordPress/gutenberg/pull/44028))
+- Inserter: Add a more pronounced hover effect. ([44711](https://github.com/WordPress/gutenberg/pull/44711))
+
+
+#### Design Tools
+- SpacingSizesControl: Increase slider's max value to 300. ([44956](https://github.com/WordPress/gutenberg/pull/44956))
+- Style engine: Permit wp custom CSS properties. ([43071](https://github.com/WordPress/gutenberg/pull/43071))
+- Try color theming. ([44668](https://github.com/WordPress/gutenberg/pull/44668))
+- Global Styles: Modify Frame animation of styles grid. ([39717](https://github.com/WordPress/gutenberg/pull/39717))
+
+
+
+### Bug Fixes
+
+
+- Clickable placeholder upload button. ([44817](https://github.com/WordPress/gutenberg/pull/44817))
+- Insertion point showing up unexpectedly. ([44702](https://github.com/WordPress/gutenberg/pull/44702))
+- Overflowing patterns. ([44853](https://github.com/WordPress/gutenberg/pull/44853))
+- Inspector is usable on the top level block even if it is content locked. ([44878](https://github.com/WordPress/gutenberg/pull/44878))
+- Use active variation as the parent block if available. ([44609](https://github.com/WordPress/gutenberg/pull/44609))
+- Placeholder for the navigation link label, to be about the label. ([44733](https://github.com/WordPress/gutenberg/pull/44733))
+- Hide the inbetween inserter consistently as you move the mouse. ([44814](https://github.com/WordPress/gutenberg/pull/44814))
+- Margin visualiser: Apply negative value to margins with calc(). ([44718](https://github.com/WordPress/gutenberg/pull/44718))
+- Placeholder: Fix hover style. ([44701](https://github.com/WordPress/gutenberg/pull/44701))
+- Post editor: Rename view to Preview. ([45074](https://github.com/WordPress/gutenberg/pull/45074))
+- Prevent empty block toolbars from showing empty slots. ([44704](https://github.com/WordPress/gutenberg/pull/44704))
+- Use inert attribute instead of useDisabled. ([44865](https://github.com/WordPress/gutenberg/pull/44865))
+- cleanForSlug: Replace multiple hyphens with a single one. ([44873](https://github.com/WordPress/gutenberg/pull/44873))
+- Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. ([44998](https://github.com/WordPress/gutenberg/pull/44998))
+- Most used tags: Try fixing label. ([44859](https://github.com/WordPress/gutenberg/pull/44859))
+- Only include theme.css if the theme declares support for wp-block-styles. ([44640](https://github.com/WordPress/gutenberg/pull/44640))
+- Merge inner blocks if wrappers are equal. ([43181](https://github.com/WordPress/gutenberg/pull/43181))
+- Try nested patterns previews with block editor setting. ([44784](https://github.com/WordPress/gutenberg/pull/44784))
+- Design Tools Adjust the custom range steps to match the units chosen. ([44959](https://github.com/WordPress/gutenberg/pull/44959))
+- Global Styles: Invoke zoomed-out view when selecting a style variation. ([44987](https://github.com/WordPress/gutenberg/pull/44987))
+- Plugin: Don't use the custom 'Template Parts' page with WP 6.1 and above. ([45158](https://github.com/WordPress/gutenberg/pull/45158))
+
+
+#### Block Library
+- Avoid querying block templates during installation. ([44584](https://github.com/WordPress/gutenberg/pull/44584))
+- Buttons: Add specificity for the editor. ([44731](https://github.com/WordPress/gutenberg/pull/44731))
+- Embed Block: Add support for Tumblr Dashboard URLs. ([44854](https://github.com/WordPress/gutenberg/pull/44854))
+- Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
+- Fix the cover block focal point picker. ([44991](https://github.com/WordPress/gutenberg/pull/44991))
+- Fix typo for word occurred. ([44914](https://github.com/WordPress/gutenberg/pull/44914))
+- Fix visibility of nested Group block appender. ([45050](https://github.com/WordPress/gutenberg/pull/45050))
+- Fix: Follow discussion settings in the comments block edit. ([44463](https://github.com/WordPress/gutenberg/pull/44463))
+- Group, Row, Stack, Columns. Fix missing border regression. ([44696](https://github.com/WordPress/gutenberg/pull/44696))
+- List Item: Allow Gutenberg to override core block type. ([44911](https://github.com/WordPress/gutenberg/pull/44911))
+- List v2: Selection when creating paragraph from empty list item. ([44864](https://github.com/WordPress/gutenberg/pull/44864))
+- Remove anchor support from the navigation block. ([44721](https://github.com/WordPress/gutenberg/pull/44721))
+- Removes __unstableMaxPages attribute from Page List block (and Nav block). ([44415](https://github.com/WordPress/gutenberg/pull/44415))
+- Site Logo: User permission HTTP errors. ([45104](https://github.com/WordPress/gutenberg/pull/45104))
+- Site logo: Centered state, for upload button. ([44861](https://github.com/WordPress/gutenberg/pull/44861))
+- Media: Cover block text color heuristic for cross origin media. ([44552](https://github.com/WordPress/gutenberg/pull/44552))
+- Icons: Arrow icons being misaligned. ([44666](https://github.com/WordPress/gutenberg/pull/44666))
+- Patterns: Hide list items from content area of content locked blocks. ([44676](https://github.com/WordPress/gutenberg/pull/44676))
+- Templates API: Avoid PHP warning when getting dynamic template data. ([44783](https://github.com/WordPress/gutenberg/pull/44783))
+- Block Settings: Show `move to` on nested blocks when only one root block. ([44827](https://github.com/WordPress/gutenberg/pull/44827))
+- Navigation: Fallback to a classic menu if one is available. ([44173](https://github.com/WordPress/gutenberg/pull/44173))
+
+#### Site Editor
+- Toggle Navigation Menus Sidebar. ([44860](https://github.com/WordPress/gutenberg/pull/44860))
+- Zoomed out view: Keep list view open when entering mode. ([44781](https://github.com/WordPress/gutenberg/pull/44781))
+
+
+#### Block Editor
+- Cover: Fix erroneous focus style in editor. ([44707](https://github.com/WordPress/gutenberg/pull/44707))
+- Native inner blocks merge where appropriate. ([45048](https://github.com/WordPress/gutenberg/pull/45048))
+
+
+#### Typography
+- Fluid typography: Convert server-side block support values. ([44762](https://github.com/WordPress/gutenberg/pull/44762))
+- Fluid typography: Covert font size number values to pixels. ([44807](https://github.com/WordPress/gutenberg/pull/44807))
+- Fluid typography: Ensure fontsizes are strings or integers. ([44847](https://github.com/WordPress/gutenberg/pull/44847))
+- Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined. ([45041](https://github.com/WordPress/gutenberg/pull/45041))
+- Make custom font sizes appear fluid in the block editor when fluid typography is enabled. ([44765](https://github.com/WordPress/gutenberg/pull/44765))
+- Search block: Ensure font sizes values are converted to fluid in the editor. ([44852](https://github.com/WordPress/gutenberg/pull/44852))
+- Fluid typography: Convert font size inline style attributes to fluid values. ([44764](https://github.com/WordPress/gutenberg/pull/44764))
+
+#### Components
+- FontSizePicker: Fix header order in RTL languages. ([44590](https://github.com/WordPress/gutenberg/pull/44590))
+- Navigator: Restore focus only once per location. ([44972](https://github.com/WordPress/gutenberg/pull/44972))
+- Spacing Sizes Control: Try improving layout spacing. ([44858](https://github.com/WordPress/gutenberg/pull/44858))
+
+
+#### Global Styles
+- Ensure style card effect doesn't cause scrollbars to appear. ([44823](https://github.com/WordPress/gutenberg/pull/44823))
+- Fluid Typography: Fix bug in global styles where fluid clamp rules were not calculated for custom values. ([44761](https://github.com/WordPress/gutenberg/pull/44761))
+
+### Accessibility
+- Fix the block toolbar styling when the 'Show button text labels' preference is enabled. ([44779](https://github.com/WordPress/gutenberg/pull/44779))
+- Fluid typography: Add font size constraints. ([44993](https://github.com/WordPress/gutenberg/pull/44993))
+
+
+### Performance
+
+- Lodash refactor away ([44892](https://github.com/WordPress/gutenberg/pull/44892), [45014](https://github.com/WordPress/gutenberg/pull/45014), [45010](https://github.com/WordPress/gutenberg/pull/45010), [44875](https://github.com/WordPress/gutenberg/pull/44875), [44901](https://github.com/WordPress/gutenberg/pull/44901), [44874](https://github.com/WordPress/gutenberg/pull/44874), [44894](https://github.com/WordPress/gutenberg/pull/44894))
+- Lodash: Remove completely from `@wordpress/viewport` package. ([44572](https://github.com/WordPress/gutenberg/pull/44572))
+- Remove unnecessary repeated function call. ([44545](https://github.com/WordPress/gutenberg/pull/44545))
+- Block Library, QueryInspectorControls: Avoid rerender of TaxonomyControls on every keystroke. ([44562](https://github.com/WordPress/gutenberg/pull/44562))
+
+### Documentation
+
+- Fix broken link to `01-basic-esnext` example. ([45000](https://github.com/WordPress/gutenberg/pull/45000))
+- Add `ariaLabel` support to block supports reference documentation. ([45006](https://github.com/WordPress/gutenberg/pull/45006))
+- Docs: Fix some typos. ([44713](https://github.com/WordPress/gutenberg/pull/44713))
+- Layout Docs: Fix broken link in table of contents. ([44719](https://github.com/WordPress/gutenberg/pull/44719))
+- Layout: Document the current state of the layout block support. ([42619](https://github.com/WordPress/gutenberg/pull/42619))
+- Make `spacingScale` description more accurate in theme.json schema. ([44794](https://github.com/WordPress/gutenberg/pull/44794))
+- Remove duplicate img tag. ([44936](https://github.com/WordPress/gutenberg/pull/44936))
+- Updating versions in WP in light of 6.0.3 release. ([45052](https://github.com/WordPress/gutenberg/pull/45052))
+- package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
+- Connect extend Query Loop documentation. ([44699](https://github.com/WordPress/gutenberg/pull/44699))
+- Update Extending the Query Loop block documentation. ([44703](https://github.com/WordPress/gutenberg/pull/44703))
+- Update link to plugin-sidebar example in documentation. ([44790](https://github.com/WordPress/gutenberg/pull/44790))
+- Update versions in WordPress documentation for 6.1. ([44785](https://github.com/WordPress/gutenberg/pull/44785))
+- Update visually hidden documentation to mention stacking context. ([44867](https://github.com/WordPress/gutenberg/pull/44867))
+
+
+
+### Code Quality
+
+- Fix comment in edit post reducer. ([44978](https://github.com/WordPress/gutenberg/pull/44978))
+- Fix: PHP 8.1 Deprecation messages. ([44828](https://github.com/WordPress/gutenberg/pull/44828))
+- Navigator: Remove overflow styles from NavigatorScreen. ([44973](https://github.com/WordPress/gutenberg/pull/44973))
+- Refactor the document actions component. ([45060](https://github.com/WordPress/gutenberg/pull/45060))
+- Simplify BlockStyles preview by removing the slot. ([44825](https://github.com/WordPress/gutenberg/pull/44825))
+- Update 6.1 CSS filter to match core. ([44962](https://github.com/WordPress/gutenberg/pull/44962))
+- Fluid Typography: Add missing style.css file to test theme. ([44958](https://github.com/WordPress/gutenberg/pull/44958))
+- Site Editor: Dynamic Templates Names and Descriptions: Code parity with wp/6.1. ([44646](https://github.com/WordPress/gutenberg/pull/44646))
+- Fluid Typography: Use wp_ prefixed function. ([44876](https://github.com/WordPress/gutenberg/pull/44876))
+- Remove gutenberg_ prefix for theme_json_get_style_nodes filter. ([44949](https://github.com/WordPress/gutenberg/pull/44949))
+-  Update the names of filters for global styles data. ([44940](https://github.com/WordPress/gutenberg/pull/44940))
+- Try: Refresh selection styles. ([44150](https://github.com/WordPress/gutenberg/pull/44150))
+- Design Tools, Archive Block: Prevent spacing styles and additional CSS classes from being printed twice. ([44438](https://github.com/WordPress/gutenberg/pull/44438))
+- Design Tools, Tag Cloud Block: Prevent block support styles and additional CSS classes from being printed twice. ([44439](https://github.com/WordPress/gutenberg/pull/44439))
+- Site Editor: Rename header and sidebar components in edit-site. ([44974](https://github.com/WordPress/gutenberg/pull/44974))
+- Refactor dropzone for unmodified default blocks with `useBlockDropZone` and `InsertionPoint`. ([44647](https://github.com/WordPress/gutenberg/pull/44647))
+- Data: Cleanup `useDispatch` tests. ([44856](https://github.com/WordPress/gutenberg/pull/44856))
+
+
+#### ESLint
+- ESLint: Fix rule violations. ([44927](https://github.com/WordPress/gutenberg/pull/44927), [44896](https://github.com/WordPress/gutenberg/pull/44896), [44895](https://github.com/WordPress/gutenberg/pull/44895), [44926](https://github.com/WordPress/gutenberg/pull/44926), [44939](https://github.com/WordPress/gutenberg/pull/44939), [44930](https://github.com/WordPress/gutenberg/pull/44930), [44902](https://github.com/WordPress/gutenberg/pull/44902), [44928](https://github.com/WordPress/gutenberg/pull/44928), [44925](https://github.com/WordPress/gutenberg/pull/44925), [45061](https://github.com/WordPress/gutenberg/pull/45061), [45067](https://github.com/WordPress/gutenberg/pull/45067), [45097](https://github.com/WordPress/gutenberg/pull/45097), [45064](https://github.com/WordPress/gutenberg/pull/45064), [45068](https://github.com/WordPress/gutenberg/pull/45068), [45062](https://github.com/WordPress/gutenberg/pull/45062), [45096](https://github.com/WordPress/gutenberg/pull/45096), [45106](https://github.com/WordPress/gutenberg/pull/45106), [45018](https://github.com/WordPress/gutenberg/pull/45018))
+- ESLint: Fix a few jsdoc/check-line-alignment warnings. ([44984](https://github.com/WordPress/gutenberg/pull/44984))
+- ESLint: Fix empty `toHaveTextContent`. ([45007](https://github.com/WordPress/gutenberg/pull/45007))
+
+#### Refactor tests to RTL
+- Data Layer ([44802](https://github.com/WordPress/gutenberg/pull/44802), [44855](https://github.com/WordPress/gutenberg/pull/44855), [45058](https://github.com/WordPress/gutenberg/pull/45058))
+- Block Editor ([44869](https://github.com/WordPress/gutenberg/pull/44869), [44870](https://github.com/WordPress/gutenberg/pull/44870), [44871](https://github.com/WordPress/gutenberg/pull/44871), [45071](https://github.com/WordPress/gutenberg/pull/45071))
+- Components ([45072](https://github.com/WordPress/gutenberg/pull/45072), [45012](https://github.com/WordPress/gutenberg/pull/45012), [44801](https://github.com/WordPress/gutenberg/pull/44801), [44826](https://github.com/WordPress/gutenberg/pull/44826), [44824](https://github.com/WordPress/gutenberg/pull/44824), [44821](https://github.com/WordPress/gutenberg/pull/44821), [44820](https://github.com/WordPress/gutenberg/pull/44820))
+- Post Editor([45011](https://github.com/WordPress/gutenberg/pull/45011), [44835](https://github.com/WordPress/gutenberg/pull/44835), [45066](https://github.com/WordPress/gutenberg/pull/45066), [44923](https://github.com/WordPress/gutenberg/pull/44923), [44872](https://github.com/WordPress/gutenberg/pull/44872))
+- Compose ([44818](https://github.com/WordPress/gutenberg/pull/44818), [44819](https://github.com/WordPress/gutenberg/pull/44819), [44912](https://github.com/WordPress/gutenberg/pull/44912), [45108](https://github.com/WordPress/gutenberg/pull/45108))
+- Viewport ([44766](https://github.com/WordPress/gutenberg/pull/44766), [44769](https://github.com/WordPress/gutenberg/pull/44769))
+- Element ([44804](https://github.com/WordPress/gutenberg/pull/44804))
+- Interface ([44803](https://github.com/WordPress/gutenberg/pull/44803))
+
+
+#### Components
+- Navigator: Refactor Storybook code to TypeScript and controls. ([44979](https://github.com/WordPress/gutenberg/pull/44979))
+- Navigator: Refactor tests to TypeScript and user-event. ([44970](https://github.com/WordPress/gutenberg/pull/44970))
+- Refactor `ToolsPanel` to pass `exhaustive-deps`. ([45028](https://github.com/WordPress/gutenberg/pull/45028))
+- Refactor `Tooltip` tests to always render inline. ([45105](https://github.com/WordPress/gutenberg/pull/45105))
+- Refactor to use `@testing-library/react`. ([44698](https://github.com/WordPress/gutenberg/pull/44698), [44695](https://github.com/WordPress/gutenberg/pull/44695), [44697](https://github.com/WordPress/gutenberg/pull/44697))
+- Refactor `Tooltip` to ignore `exhaustive-deps`. ([45043](https://github.com/WordPress/gutenberg/pull/45043))
+- Modal: Convert component to TypeScript. ([42949](https://github.com/WordPress/gutenberg/pull/42949))
+- Sandbox: Use toString to create observe and resize script string. ([42872](https://github.com/WordPress/gutenberg/pull/42872))
+
+
+
+### Tools
+
+- Combine stale issue gardening workflows into one. ([44754](https://github.com/WordPress/gutenberg/pull/44754))
+- Ensure stale github actions workflow only runs for particular issue labels. ([44910](https://github.com/WordPress/gutenberg/pull/44910))
+- Configure Dependabot pull requests for GitHub Actions. ([44677](https://github.com/WordPress/gutenberg/pull/44677))
+- Storybook: Add theme switcher tool. ([44715](https://github.com/WordPress/gutenberg/pull/44715))
+- Bug Fix, wp-env: Use case insensitive regex when checking WP version string. ([44887](https://github.com/WordPress/gutenberg/pull/44887))
+- Cherry Pick Script: Restore retrieval of merge_commit_sha. ([44890](https://github.com/WordPress/gutenberg/pull/44890))
+
+#### Schemas
+
+- Fix: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
+- Fix: typo in block.json schema. ([44798](https://github.com/WordPress/gutenberg/pull/44798))
+- Fix: theme json schema validation. ([44799](https://github.com/WordPress/gutenberg/pull/44799))
+- Add title property to theme.json schema. ([44797](https://github.com/WordPress/gutenberg/pull/44797))
+
+#### Build Tooling
+- Add `.eslintcache` to `.gitignore`. ([44938](https://github.com/WordPress/gutenberg/pull/44938))
+- ESLint: Add and enable `eslint-plugin-jest-dom`. ([44983](https://github.com/WordPress/gutenberg/pull/44983))
+- Style Engine: Move PHP unit tests to Gutenberg. ([44722](https://github.com/WordPress/gutenberg/pull/44722))
+
+#### Testing
+- Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
+- Migrate `nonce.test.js` to Playwright. ([44929](https://github.com/WordPress/gutenberg/pull/44929))
+- end-to-end Tests: Make attributes and innerblocks optional in insertBlock. ([44933](https://github.com/WordPress/gutenberg/pull/44933))
+- Bug Fix, end-to-end tests: Update button selector. ([45087](https://github.com/WordPress/gutenberg/pull/45087))
+- Mobile
+    - Code block - Migrate from React Test Render to React Native Testing Library. ([44833](https://github.com/WordPress/gutenberg/pull/44833))
+    - Tooltip - Migrate from React Test Render to React Native Testing Library. ([44831](https://github.com/WordPress/gutenberg/pull/44831))
+    - Update editor initial HTML test for iOS and update Appium. ([44732](https://github.com/WordPress/gutenberg/pull/44732))
+    - useResizeObserver - Migrate from React Test Render to React Native Testing Library. ([44832](https://github.com/WordPress/gutenberg/pull/44832))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @benridane: Fix list outdents on Enter in quote block. ([44809](https://github.com/WordPress/gutenberg/pull/44809))
+- @jeremylind: FIX: Typo in block.json schema default scope values. ([44944](https://github.com/WordPress/gutenberg/pull/44944))
+- @PooSham: Add support for React 18 and later to jest-preset-default. ([44680](https://github.com/WordPress/gutenberg/pull/44680))
+- @thelovekesh: package(prettier-config): Update documentation. ([44620](https://github.com/WordPress/gutenberg/pull/44620))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @adamziel @afercia @ajlende @alanjacobmathew @amustaque97 @andrewserong @annezazu @BE-Webdesign @benridane @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @costdev @danielbachhuber @dcalhoun @desrosj @dinhtungdu @draganescu @ellatrix @fabiankaegy @fluiddot @geriux @getdave @glendaviesnz @gvgvgvijayan @jasmussen @jeremylind @jorgefilipecosta @joshuatf @jrfnl @jsnajdr @kevin940726 @Mamaduka @mikachan @mirka @mtias @noisysocks @ntsekouras @oandregal @ockham @pento @PooSham @ramonjd @ryanwelcher @sabernhardt @SantosGuillamot @scruffian @Soean @t-hamano @talldan @tellthemachines @thelovekesh @tyxla @walbo @youknowriad
+
+
 = 14.3.1 =
 
 
diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md
index fa17909b4cd37..f68469f6a893f 100644
--- a/docs/contributors/code/testing-overview.md
+++ b/docs/contributors/code/testing-overview.md
@@ -367,13 +367,13 @@ describe( 'SolarSystem', () => {
 	test( 'should render', () => {
 		const { container } = render( <SolarSystem /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should contain mars if planets is true', () => {
 		const { container } = render( <SolarSystem planets /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( screen.getByText( /mars/i ) ).toBeInTheDocument();
 	} );
 } );
@@ -422,7 +422,7 @@ test( 'should contain mars if planets is true', () => {
 	const { container } = render( <SolarSystem planets /> );
 
 	// Snapshot will catch unintended changes
-	expect( container.firstChild ).toMatchSnapshot();
+	expect( container ).toMatchSnapshot();
 
 	// This is what we actually expect to find in our test
 	expect( screen.getByText( /mars/i ) ).toBeInTheDocument();
@@ -447,8 +447,8 @@ Similarly, the `toMatchStyleDiffSnapshot` function allows to snapshot only the d
 test( 'should render margin', () => {
 	const { container: spacer } = render( <Spacer /> );
 	const { container: spacerWithMargin } = render( <Spacer margin={ 5 } /> );
-	expect( spacerWithMargin.firstChild ).toMatchStyleDiffSnapshot(
-		spacer.firstChild
+	expect( spacerWithMargin ).toMatchStyleDiffSnapshot(
+		spacer
 	);
 } );
 ```
diff --git a/docs/explanations/faq.md b/docs/explanations/faq.md
index b1eb22b330964..c56dd2e0c3c6c 100644
--- a/docs/explanations/faq.md
+++ b/docs/explanations/faq.md
@@ -28,7 +28,7 @@ What follows is a set of questions that have come up from the last few years of
 
 ### The Development Experience
 - [How do I make my own block?](#how-do-i-make-my-own-block)
-- [Does Gutenberg involve editing posts/pages in the front-end?](#does-gutenberg-involve-editing-postspages-in-the-front-end)
+- [Does Gutenberg involve editing posts/pages in the front-end?](#does-gutenberg-involve-editing-posts-pages-in-the-front-end)
 - [Given Gutenberg is built in JavaScript, how do old meta boxes (PHP) work?](#given-gutenberg-is-built-in-javascript-how-do-old-meta-boxes-php-work)
 - [How can plugins extend the Gutenberg UI?](#how-can-plugins-extend-the-gutenberg-ui)
 - [Are Custom Post Types still supported?](#are-custom-post-types-still-supported)
diff --git a/docs/how-to-guides/curating-the-editor-experience.md b/docs/how-to-guides/curating-the-editor-experience.md
index 4c7ef0096d051..584e6dc18b8a0 100644
--- a/docs/how-to-guides/curating-the-editor-experience.md
+++ b/docs/how-to-guides/curating-the-editor-experience.md
@@ -14,10 +14,25 @@ Users have the ability to lock and unlock blocks via the editor. The locking UI
 
 Keep in mind that each block you want to lock will need to be individually locked as desired. There is not a way to mass lock blocks currently. 
 
-**Lock patterns or templates**
+**Apply block locking to patterns or templates**
 
 When building patterns or templates, theme authors can use these same UI tools to set the default locked state of blocks. For example, a theme author could lock various pieces of a header. Keep in mind that by default, users with editing access can unlock these blocks. [Here’s an example of a pattern](https://gist.github.com/annezazu/acee30f8b6e8995e1b1a52796e6ef805) with various blocks locked in different ways and here’s more context on [creating a template with locked blocks](https://make.wordpress.org/core/2022/02/09/core-editor-improvement-curated-experiences-with-locking-apis-theme-json/). You can build these patterns in the editor itself, including adding locking options, before following the [documentation to register them](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-patterns/).
 
+**Apply content only editing in patterns or templates**
+
+This functionality was introduced in WordPress 6.1. In contrast to block locking, which disables the ability to move or remove blocks, content only editing is both designed for use at the pattern or template level and hides all design tools, while still allowing for the ability to edit the content of the blocks. This provides a great way to simplify the interface for users and preserve a design. When this option is added, the following changes occur:  
+
+- Non-content child blocks (containers, spacers, columns, etc) are hidden from list view, un-clickable on the canvas, and entirely un-editable.
+- The Inspector will display a list of all child 'content' blocks. Clicking a block in this list reveals its settings panel. 
+- The main List View only shows content blocks, all at the same level regardless of actual nesting.
+- Children blocks within the overall content locked container are automatically move / remove locked.
+- Additional child blocks cannot be inserted, further preserving the design and layout.
+- There is a link in the block toolbar to ‘Modify’ that a user can toggle on/off to have access to the broader design tools. Currently, it's not possibly to programmatically remove this option.
+
+This option can be applied to Columns, Cover, and Group blocks as well as third-party blocks that have the templateLock attribute in its block.json. To adopt this functionality, you need to use `"templateLock":"contentOnly"`. [Here's an example of a pattern](https://gist.github.com/annezazu/d62acd2514cea558be6cea97fe28ff3c) with this functionality in place. For more information, please [review the relevant documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#locking). 
+
+Note: There is no UI in place to manage content locking and it must be managed at the code level. 
+
 **Change permissions to control locking ability**
 
 Agencies and plugin authors can offer an even more curated experience by limiting which users have [permission to lock and unlock blocks](https://make.wordpress.org/core/2022/05/05/block-locking-settings-in-wordpress-6-0/). By default, anyone who is an administrator will have access to lock and unlock blocks. 
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index 6ce54d8009dd7..6185043353fc2 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -13,7 +13,7 @@ Starting in WordPress 5.8 release, we encourage using the `block.json` metadata
 	"category": "text",
 	"parent": [ "core/group" ],
 	"icon": "star",
-	"description": "Shows warning, error or success notices…",
+	"description": "Shows warning, error or success notices...",
 	"keywords": [ "alert", "message" ],
 	"version": "1.0.3",
 	"textdomain": "my-plugin",
@@ -646,7 +646,7 @@ return array(
 Starting in the WordPress 5.8 release, it is possible to instruct WordPress to enqueue scripts and styles for a block type only when rendered on the frontend. It applies to the following asset fields in the `block.json` file:
 
 -   `script`
--   `viewScript` (when the block defines `render_callback` during registration in PHP or a `render` field in its `block.json`, then the script is registered but the block author is responsible for enqueuing it)
+-   `viewScript`
 -   `style`
 
 ## Internationalization
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 6d864b69d8bef..dd9fdbdc0566b 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -167,7 +167,7 @@ Contains the block elements used to display a comment, like the title, date, aut
 
 -	**Name:** core/comment-template
 -	**Category:** design
--	**Supports:** align, typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Comments
@@ -491,7 +491,7 @@ Display a post's comments count. ([Source](https://github.com/WordPress/gutenber
 
 -	**Name:** core/post-comments-count
 -	**Category:** theme
--	**Supports:** color (background, gradients, text), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Post Comments Form
@@ -500,7 +500,7 @@ Display a post's comments form. ([Source](https://github.com/WordPress/gutenberg
 
 -	**Name:** core/post-comments-form
 -	**Category:** theme
--	**Supports:** color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Post Comments Link
@@ -509,7 +509,7 @@ Displays the link to the current post comments. ([Source](https://github.com/Wor
 
 -	**Name:** core/post-comments-link
 -	**Category:** theme
--	**Supports:** color (background, link, ~~text~~), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** color (background, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** textAlign
 
 ## Post Content
@@ -753,7 +753,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
 -	**Name:** core/social-link
 -	**Category:** widgets
 -	**Supports:** ~~html~~, ~~reusable~~
--	**Attributes:** label, service, url
+-	**Attributes:** label, rel, service, url
 
 ## Social Icons
 
diff --git a/docs/reference-guides/data/data-core-edit-post.md b/docs/reference-guides/data/data-core-edit-post.md
index 26337e973bd34..1c082528485c3 100644
--- a/docs/reference-guides/data/data-core-edit-post.md
+++ b/docs/reference-guides/data/data-core-edit-post.md
@@ -433,8 +433,7 @@ Update a metabox.
 
 ### setAvailableMetaBoxesPerLocation
 
-Returns an action object used in signaling
-what Meta boxes are available in which location.
+Stores info about which Meta boxes are available in which location.
 
 _Parameters_
 
diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md
index 573d092472521..9ee5fea71801b 100644
--- a/docs/reference-guides/data/data-core-edit-site.md
+++ b/docs/reference-guides/data/data-core-edit-site.md
@@ -189,6 +189,18 @@ _Returns_
 
 -   `boolean`: True if the navigation panel should be open; false if closed.
 
+### isSaveViewOpened
+
+Returns the current opened/closed state of the save panel.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: True if the save panel should be open; false if closed.
+
 <!-- END TOKEN(Autogenerated selectors|../../../packages/edit-site/src/store/selectors.js) -->
 
 ## Actions
@@ -284,6 +296,14 @@ _Parameters_
 
 -   _isOpen_ `boolean`: If true, opens the nav panel. If false, closes it. It does not toggle the state, but sets it directly.
 
+### setIsSaveViewOpened
+
+Sets whether the save view panel should be open.
+
+_Parameters_
+
+-   _isOpen_ `boolean`: If true, opens the save view. If false, closes it. It does not toggle the state, but sets it directly.
+
 ### setNavigationPanelActiveMenu
 
 Action that sets the active navigation panel menu.
diff --git a/gutenberg.php b/gutenberg.php
index 9791f13a9a0a8..ab8a779c4622b 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the new block editor in core.
  * Requires at least: 5.9
  * Requires PHP: 5.6
- * Version: 14.4.0-rc.1
+ * Version: 14.5.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 15a7a131f8a9b..a50e1fb883717 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -291,6 +291,23 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 	return '';
 }
 
+/**
+ * Gets classname from last tag in a string of HTML.
+ *
+ * @param string $html markup to be processed.
+ * @return string String of inner wrapper classnames.
+ */
+function gutenberg_get_classnames_from_last_tag( $html ) {
+	$tags            = new WP_HTML_Tag_Processor( $html );
+	$last_classnames = '';
+
+	while ( $tags->next_tag() ) {
+		$last_classnames = $tags->get_attribute( 'class' );
+	}
+
+	return (string) $last_classnames;
+}
+
 /**
  * Renders the layout config to the block wrapper.
  *
@@ -320,7 +337,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	$class_names        = array();
 	$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
-	$block_classname    = wp_get_block_default_classname( $block['blockName'] );
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
 
@@ -397,7 +413,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
 
 		$style = gutenberg_get_layout_style(
-			".$block_classname.$container_class",
+			".$container_class.$container_class",
 			$used_layout,
 			$has_block_gap_support,
 			$gap_value,
@@ -412,18 +428,24 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		}
 	}
 
-	/*
-	 * This assumes the hook only applies to blocks with a single wrapper.
-	 * A limitation of this hook is that nested inner blocks wrappers are not yet supported.
-	 */
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
-		$block_content,
-		1
-	);
+	/**
+	* The first chunk of innerContent contains the block markup up until the inner blocks start.
+	* We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
+	*/
+	$inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? gutenberg_get_classnames_from_last_tag( $block['innerContent'][0] ) : '';
+
+	$content = new WP_HTML_Tag_Processor( $block_content );
+	if ( $inner_content_classnames ) {
+		$content->next_tag( array( 'class_name' => $inner_content_classnames ) );
+		foreach ( $class_names as $class_name ) {
+			$content->add_class( $class_name );
+		}
+	} else {
+		$content->next_tag();
+		$content->add_class( implode( ' ', $class_names ) );
+	}
 
-	return $content;
+	return (string) $content;
 }
 
 // Register the block support. (overrides core one).
@@ -433,6 +455,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		'register_attribute' => 'gutenberg_register_layout_support',
 	)
 );
+
 if ( function_exists( 'wp_render_layout_support_flag' ) ) {
 	remove_filter( 'render_block', 'wp_render_layout_support_flag' );
 }
@@ -454,7 +477,7 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
 		preg_quote( $tag_name, '/' )
 	);
 	if (
-		WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ||
+		wp_theme_has_theme_json() ||
 		1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
 		( isset( $block['attrs']['layout']['type'] ) && 'flex' === $block['attrs']['layout']['type'] )
 	) {
@@ -519,7 +542,7 @@ function gutenberg_restore_image_outer_container( $block_content, $block ) {
 )/iUx";
 
 	if (
-		WP_Theme_JSON_Resolver::theme_has_support() ||
+		wp_theme_has_theme_json() ||
 		0 === preg_match( $image_with_align, $block_content, $matches )
 	) {
 		return $block_content;
diff --git a/lib/client-assets.php b/lib/client-assets.php
index f1b94c0d46abf..ea199750fa10b 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -318,7 +318,7 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 
 	// Only load the default layout and margin styles for themes without theme.json file.
-	if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+	if ( ! wp_theme_has_theme_json() ) {
 		$wp_edit_blocks_dependencies[] = 'wp-editor-classic-layout-styles';
 	}
 
diff --git a/lib/compat/wordpress-6.0/block-patterns.php b/lib/compat/wordpress-6.0/block-patterns.php
index 6ba5a15035530..c42ec73152219 100644
--- a/lib/compat/wordpress-6.0/block-patterns.php
+++ b/lib/compat/wordpress-6.0/block-patterns.php
@@ -15,7 +15,7 @@ function _register_remote_theme_patterns() {
 			return;
 		}
 
-		if ( ! WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+		if ( ! wp_theme_has_theme_json() ) {
 			return;
 		}
 
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
index b85e8e335037a..45779d395e629 100644
--- a/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
+++ b/lib/compat/wordpress-6.0/class-wp-theme-json-resolver-6-0.php
@@ -86,7 +86,7 @@ public static function get_theme_data( $deprecated = array(), $options = array()
 		 * and merge the static::$theme upon that.
 		 */
 		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_default_block_editor_settings() );
-		if ( ! static::theme_has_support() ) {
+		if ( ! wp_theme_has_theme_json() ) {
 			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
 				$theme_support_data['settings']['color'] = array();
 			}
diff --git a/lib/compat/wordpress-6.0/client-assets.php b/lib/compat/wordpress-6.0/client-assets.php
index 0c5697817a94a..f9affb31af4b5 100644
--- a/lib/compat/wordpress-6.0/client-assets.php
+++ b/lib/compat/wordpress-6.0/client-assets.php
@@ -105,6 +105,11 @@ function gutenberg_resolve_assets() {
 add_filter(
 	'block_editor_settings_all',
 	function( $settings ) {
+		// The `__unstableResolvedAssets` are generated by `_wp_get_iframed_editor_assets` for WP >= 6.0.
+		if ( function_exists( '_wp_get_iframed_editor_assets' ) ) {
+			return $settings;
+		}
+
 		// In the future we can allow WP Dependency handles to be passed.
 		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets();
 		return $settings;
diff --git a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
index 1dfafe9f7631d..9ed3e891182cb 100644
--- a/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.0/get-global-styles-and-settings.php
@@ -85,7 +85,7 @@ function gutenberg_get_global_styles_svg_filters() {
 		}
 	}
 
-	$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
+	$supports_theme_json = wp_theme_has_theme_json();
 
 	$origins = array( 'default', 'theme', 'custom' );
 	if ( ! $supports_theme_json ) {
diff --git a/lib/compat/wordpress-6.0/rest-api.php b/lib/compat/wordpress-6.0/rest-api.php
index d8506911d18d1..0cf08533e33b7 100644
--- a/lib/compat/wordpress-6.0/rest-api.php
+++ b/lib/compat/wordpress-6.0/rest-api.php
@@ -35,14 +35,6 @@ function gutenberg_register_edit_site_export_endpoint() {
 }
 add_action( 'rest_api_init', 'gutenberg_register_edit_site_export_endpoint' );
 
-/**
- * Registers the block pattern categories REST API routes.
- */
-function gutenberg_register_rest_block_pattern_categories() {
-	$block_patterns = new WP_REST_Block_Pattern_Categories_Controller();
-	$block_patterns->register_routes();
-}
-add_action( 'rest_api_init', 'gutenberg_register_rest_block_pattern_categories' );
 
 /**
  * Register a core site settings.
diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php
index 3181329475df4..cafe91e787dc6 100644
--- a/lib/compat/wordpress-6.1/block-editor-settings.php
+++ b/lib/compat/wordpress-6.1/block-editor-settings.php
@@ -68,7 +68,7 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			}
 		}
 
-		if ( WP_Theme_JSON_Resolver::theme_has_support() ) {
+		if ( wp_theme_has_theme_json() ) {
 			$block_classes = array(
 				'css'            => 'styles',
 				'__unstableType' => 'theme',
diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index f06ecc93713f8..8e12d99a07490 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -1090,7 +1090,7 @@ protected static function compute_style_properties( $styles, $settings = array()
 	 * @param array $styles Styles subtree.
 	 * @param array $path   Which property to process.
 	 * @param array $theme_json Theme JSON array.
-	 * @return string Style property value.
+	 * @return string|array|null Style property value.
 	 */
 	protected static function get_property_value( $styles, $path, $theme_json = null ) {
 		$value = _wp_array_get( $styles, $path );
@@ -1113,7 +1113,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			}
 		}
 
-		if ( is_array( $value ) ) {
+		if ( ! $value || is_array( $value ) ) {
 			return $value;
 		}
 
diff --git a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php b/lib/compat/wordpress-6.1/get-global-styles-and-settings.php
index 1837aa04dbb20..35c540ce1c57a 100644
--- a/lib/compat/wordpress-6.1/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.1/get-global-styles-and-settings.php
@@ -83,7 +83,7 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 		}
 	}
 	$tree                = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
+	$supports_theme_json = wp_theme_has_theme_json();
 	if ( empty( $types ) && ! $supports_theme_json ) {
 		$types = array( 'variables', 'presets', 'base-layout-styles' );
 	} elseif ( empty( $types ) ) {
diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php
index 0e27c62a1bda5..2bb9edd2a204d 100644
--- a/lib/compat/wordpress-6.1/script-loader.php
+++ b/lib/compat/wordpress-6.1/script-loader.php
@@ -5,37 +5,6 @@
  * @package gutenberg
  */
 
-/**
- * This function takes care of adding inline styles
- * in the proper place, depending on the theme in use.
- *
- * This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
- * added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
- *
- * For block themes, it's loaded in the head.
- * For classic ones, it's loaded in the body
- * because the wp_head action  happens before
- * the render_block.
- *
- * @link https://core.trac.wordpress.org/ticket/53494.
- *
- * @param string $style String containing the CSS styles to be added.
- * @param int    $priority To set the priority for the add_action.
- */
-function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
-	$action_hook_name = 'wp_footer';
-	if ( wp_is_block_theme() ) {
-		$action_hook_name = 'wp_head';
-	}
-	add_action(
-		$action_hook_name,
-		static function () use ( $style ) {
-			echo "<style>$style</style>\n";
-		},
-		$priority
-	);
-}
-
 /**
  * This applies a filter to the list of style nodes that comes from `get_style_nodes` in WP_Theme_JSON.
  * This particular filter removes all of the blocks from the array.
diff --git a/lib/compat/wordpress-6.1/template-parts-screen.php b/lib/compat/wordpress-6.1/template-parts-screen.php
index 93b68436764b3..c8b5958bedcd4 100644
--- a/lib/compat/wordpress-6.1/template-parts-screen.php
+++ b/lib/compat/wordpress-6.1/template-parts-screen.php
@@ -24,6 +24,24 @@ function gutenberg_template_parts_screen_menu() {
 		return;
 	}
 
+	global $submenu;
+	if ( ! isset( $submenu['themes.php'] ) ) {
+		return;
+	}
+
+	$needs_custom_page = true;
+	foreach ( $submenu['themes.php'] as $menu_item ) {
+		if ( str_contains( $menu_item[2], 'site-editor.php?postType=wp_template_part' ) ) {
+			$needs_custom_page = false;
+			break;
+		}
+	}
+
+	// Don't use the custom 'Template Parts' page with WP 6.1 and above.
+	if ( ! $needs_custom_page ) {
+		return;
+	}
+
 	add_theme_page(
 		__( 'Template Parts', 'gutenberg' ),
 		__( 'Template Parts', 'gutenberg' ),
@@ -98,7 +116,7 @@ static function( $classes ) {
 		'styles'                    => get_block_editor_theme_styles(),
 		'defaultTemplateTypes'      => $indexed_template_types,
 		'defaultTemplatePartAreas'  => get_allowed_block_template_part_areas(),
-		'supportsLayout'            => WP_Theme_JSON_Resolver::theme_has_support(),
+		'supportsLayout'            => wp_theme_has_theme_json(),
 		'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ),
 		'__unstableHomeTemplate'    => gutenberg_resolve_home_template(),
 	);
diff --git a/lib/compat/wordpress-6.2/block-patterns.php b/lib/compat/wordpress-6.2/block-patterns.php
new file mode 100644
index 0000000000000..c06b385b7cc2c
--- /dev/null
+++ b/lib/compat/wordpress-6.2/block-patterns.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Overrides Core's wp-includes/block-patterns.php to add category descriptions for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the block pattern categories REST API routes.
+ */
+function gutenberg_register_core_block_patterns_and_categories() {
+	register_block_pattern_category(
+		'buttons',
+		array(
+			'label' => _x( 'Buttons', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'columns',
+		array(
+			'label' => _x( 'Columns', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'footer',
+		array(
+			'label' => _x( 'Footers', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'gallery',
+		array(
+			'label' => _x( 'Gallery', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'header',
+		array(
+			'label' => _x( 'Headers', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'text',
+		array(
+			'label' => _x( 'Text', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'query',
+		array(
+			'label'       => _x( 'Posts', 'Block pattern category', 'gutenberg' ),
+			'description' => __( 'Display post summaries in lists, grids, and other layouts.', 'gutenberg' ),
+		)
+	);
+	register_block_pattern_category(
+		'featured',
+		array(
+			'label' => _x( 'Featured', 'Block pattern category', 'gutenberg' ),
+		)
+	);
+}
+add_action( 'init', 'gutenberg_register_core_block_patterns_and_categories' );
diff --git a/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php
new file mode 100644
index 0000000000000..970b1c4a1a330
--- /dev/null
+++ b/lib/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php
@@ -0,0 +1,78 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Block_Pattern_Categories_Controller class
+ *
+ * Adds descriptions to the block pattern categories.
+ *
+ * @package    WordPress
+ * @subpackage REST_API
+ */
+
+/**
+ * Core class used to access block pattern categories via the REST API.
+ *
+ * @see   WP_REST_Controller
+ */
+class Gutenberg_REST_Block_Pattern_Categories_Controller extends WP_REST_Block_Pattern_Categories_Controller {
+	/**
+	 * Prepare a raw block pattern category before it gets output in a REST API response.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @param object          $item    Raw category as registered, before any changes.
+	 * @param WP_REST_Request $request Request object.
+	 * @return WP_REST_Response
+	 */
+	public function prepare_item_for_response( $item, $request ) {
+		$fields = $this->get_fields_for_response( $request );
+		$keys   = array( 'name', 'label', 'description' );
+		$data   = array();
+		foreach ( $keys as $key ) {
+			if ( isset( $item[ $key ] ) && rest_is_field_included( $key, $fields ) ) {
+				$data[ $key ] = $item[ $key ];
+			}
+		}
+
+		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
+		$data    = $this->add_additional_fields_to_object( $data, $request );
+		$data    = $this->filter_response_by_context( $data, $context );
+		return rest_ensure_response( $data );
+	}
+
+	/**
+	 * Retrieves the block pattern category schema, conforming to JSON Schema.
+	 *
+	 * @since 6.0.0
+	 *
+	 * @return array Item schema data.
+	 */
+	public function get_item_schema() {
+		$schema = array(
+			'$schema'    => 'http://json-schema.org/draft-04/schema#',
+			'title'      => 'block-pattern-category',
+			'type'       => 'object',
+			'properties' => array(
+				'name'        => array(
+					'description' => __( 'The category name.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'label'       => array(
+					'description' => __( 'The category label, in human readable format.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+				'description' => array(
+					'description' => __( 'The category description, in human readable format.', 'gutenberg' ),
+					'type'        => 'string',
+					'readonly'    => true,
+					'context'     => array( 'view', 'edit', 'embed' ),
+				),
+			),
+		);
+
+		return $this->add_additional_fields_schema( $schema );
+	}
+}
diff --git a/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
new file mode 100644
index 0000000000000..e10710e0f4709
--- /dev/null
+++ b/lib/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * WP_Theme_JSON_Resolver_6_1 class
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Class that abstracts the processing of the different data sources
+ * for site-level config and offers an API to work with them.
+ *
+ * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
+ * This is a low-level API that may need to do breaking changes. Please,
+ * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
+ *
+ * @access private
+ */
+class WP_Theme_JSON_Resolver_6_2 extends WP_Theme_JSON_Resolver_6_1 {
+
+	/**
+	 * Determines whether the active theme has a theme.json file.
+	 *
+	 * @since 5.8.0
+	 * @since 5.9.0 Added a check in the parent theme.
+	 * @deprecated 6.2.0 Use wp_theme_has_theme_json() instead.
+	 *
+	 * @return bool
+	 */
+	public static function theme_has_support() {
+		_deprecated_function( __METHOD__, '6.2.0', 'wp_theme_has_theme_json()' );
+
+		return wp_theme_has_theme_json();
+	}
+
+}
diff --git a/lib/compat/wordpress-6.2/default-filters.php b/lib/compat/wordpress-6.2/default-filters.php
new file mode 100644
index 0000000000000..ac1ce19b42551
--- /dev/null
+++ b/lib/compat/wordpress-6.2/default-filters.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Sets up the default filters and actions for most
+ * of the WordPress hooks.
+ *
+ * If you need to remove a default hook, this file will
+ * give you the priority to use for removing the hook.
+ *
+ * Not all of the default hooks are found in this file.
+ * For instance, administration-related hooks are located in
+ * wp-admin/includes/admin-filters.php.
+ *
+ * If a hook should only be called from a specific context
+ * (admin area, multisite environment…), please move it
+ * to a more appropriate file instead.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Note for backport: we should also remove the existing filters:
+ *
+ * > add_action( 'switch_theme', array( 'WP_Theme_JSON_Resolver', 'clean_cached_data' ) );
+ * > add_action( 'start_previewing_theme', array( 'WP_Theme_JSON_Resolver', 'clean_cached_data' ) );
+ */
+add_action( 'switch_theme', 'wp_theme_clean_theme_json_cached_data' );
+add_action( 'start_previewing_theme', 'wp_theme_clean_theme_json_cached_data' );
diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
new file mode 100644
index 0000000000000..4dbd9d0ba8bde
--- /dev/null
+++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * API to interact with global settings & styles.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'wp_theme_has_theme_json' ) ) {
+	/**
+	 * Whether a theme or its parent have a theme.json file.
+	 *
+	 * @param boolean $clear_cache Whether the cache should be cleared and theme support recomputed. Default is false.
+	 *
+	 * @return boolean
+	 */
+	function wp_theme_has_theme_json( $clear_cache = false ) {
+		static $theme_has_support = null;
+
+		if ( true === $clear_cache ) {
+			$theme_has_support = null;
+		}
+
+		if ( null !== $theme_has_support ) {
+			return $theme_has_support;
+		}
+
+		// Has the own theme a theme.json?
+		$theme_has_support = is_readable( get_stylesheet_directory() . '/theme.json' );
+
+		// Look up the parent if the child does not have a theme.json.
+		if ( ! $theme_has_support ) {
+			$theme_has_support = is_readable( get_template_directory() . '/theme.json' );
+		}
+
+		return $theme_has_support;
+	}
+}
+
+if ( ! function_exists( 'wp_theme_clean_theme_json_cached_data' ) ) {
+	/**
+	 * Clean theme.json related cached data.
+	 */
+	function wp_theme_clean_theme_json_cached_data() {
+		wp_theme_has_theme_json( true );
+		WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+	}
+}
diff --git a/lib/compat/wordpress-6.2/rest-api.php b/lib/compat/wordpress-6.2/rest-api.php
new file mode 100644
index 0000000000000..35a7a6178fd4d
--- /dev/null
+++ b/lib/compat/wordpress-6.2/rest-api.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * Overrides Core's wp-includes/rest-api.php and registers the new endpoint for WP 6.2.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the block pattern categories REST API routes.
+ */
+function gutenberg_register_rest_block_pattern_categories() {
+	$block_patterns = new Gutenberg_REST_Block_Pattern_Categories_Controller();
+	$block_patterns->register_routes();
+}
+add_action( 'rest_api_init', 'gutenberg_register_rest_block_pattern_categories' );
diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 06f01e03b6121..9d67cbd3ef1ad 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -28,3 +28,38 @@ function gutenberg_register_vendor_scripts_62( $scripts ) {
 	$script->deps = array_merge( $script->deps, array( 'wp-inert-polyfill' ) );
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts_62' );
+
+/**
+ * This function takes care of adding inline styles
+ * in the proper place, depending on the theme in use.
+ *
+ * This method was added to core in 5.9.1, but with a single param ($style). The second param ($priority) was
+ * added post 6.0, so the 6.1 release needs to have wp_enqueue_block_support_styles updated to include this param.
+ *
+ * For block themes, it's loaded in the head.
+ * For classic ones, it's loaded in the body
+ * because the wp_head action  happens before
+ * the render_block.
+ *
+ * @link https://core.trac.wordpress.org/ticket/53494.
+ *
+ * @deprecated 6.2 Block supports styles are now stored for enqueuing via the style engine API. See: packages/style-engine/README.md.
+ *
+ * @param string $style String containing the CSS styles to be added.
+ * @param int    $priority To set the priority for the add_action.
+ */
+function gutenberg_enqueue_block_support_styles( $style, $priority = 10 ) {
+	_deprecated_function( __FUNCTION__, '6.2' );
+
+	$action_hook_name = 'wp_footer';
+	if ( wp_is_block_theme() ) {
+		$action_hook_name = 'wp_head';
+	}
+	add_action(
+		$action_hook_name,
+		static function () use ( $style ) {
+			echo "<style>$style</style>\n";
+		},
+		$priority
+	);
+}
diff --git a/lib/experimental/block-editor-settings-mobile.php b/lib/experimental/block-editor-settings-mobile.php
index b0da17e929667..91e3694c199f8 100644
--- a/lib/experimental/block-editor-settings-mobile.php
+++ b/lib/experimental/block-editor-settings-mobile.php
@@ -22,7 +22,7 @@ function gutenberg_get_block_editor_settings_mobile( $settings ) {
 		isset( $_GET['context'] ) &&
 		'mobile' === $_GET['context']
 	) {
-		if ( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ) {
+		if ( wp_theme_has_theme_json() ) {
 			$settings['__experimentalStyles'] = gutenberg_get_global_styles();
 		}
 
diff --git a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
index bab54c9410ac8..2f1ee93db30b5 100644
--- a/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/experimental/class-wp-theme-json-resolver-gutenberg.php
@@ -15,7 +15,7 @@
  *
  * @access private
  */
-class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_1 {
+class WP_Theme_JSON_Resolver_Gutenberg extends WP_Theme_JSON_Resolver_6_2 {
 	/**
 	 * Returns the theme's data.
 	 *
@@ -73,7 +73,7 @@ public static function get_theme_data( $deprecated = array(), $settings = array(
 		 * and merge the static::$theme upon that.
 		 */
 		$theme_support_data = WP_Theme_JSON_Gutenberg::get_from_editor_settings( get_default_block_editor_settings() );
-		if ( ! static::theme_has_support() ) {
+		if ( ! wp_theme_has_theme_json() ) {
 			if ( ! isset( $theme_support_data['settings']['color'] ) ) {
 				$theme_support_data['settings']['color'] = array();
 			}
diff --git a/lib/experimental/class-wp-webfonts.php b/lib/experimental/class-wp-webfonts.php
index 02083d50cabc1..e40aca9e8671f 100644
--- a/lib/experimental/class-wp-webfonts.php
+++ b/lib/experimental/class-wp-webfonts.php
@@ -249,8 +249,8 @@ public function validate_webfont( $webfont ) {
 		}
 
 		$valid_props = array(
-			'ascend-override',
-			'descend-override',
+			'ascent-override',
+			'descent-override',
 			'font-display',
 			'font-family',
 			'font-stretch',
diff --git a/lib/load.php b/lib/load.php
index 65e8e3e2cb220..d457271d5eb37 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -49,6 +49,11 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php';
 	require_once __DIR__ . '/compat/wordpress-6.1/rest-api.php';
 
+	// WordPress 6.2 compat.
+	require_once __DIR__ . '/compat/wordpress-6.2/class-gutenberg-rest-block-pattern-categories-controller.php';
+	require_once __DIR__ . '/compat/wordpress-6.2/rest-api.php';
+	require_once __DIR__ . '/compat/wordpress-6.2/block-patterns.php';
+
 	// Experimental.
 	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
 		require_once __DIR__ . '/experimental/class-wp-rest-customizer-nonces.php';
@@ -97,6 +102,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // WordPress 6.2 compat.
 require __DIR__ . '/compat/wordpress-6.2/script-loader.php';
+require __DIR__ . '/compat/wordpress-6.2/get-global-styles-and-settings.php';
+require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
+require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
 
 // Experimental features.
 remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
diff --git a/package-lock.json b/package-lock.json
index a456100f2e462..90aefe53f89c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,34 @@
 {
 	"name": "gutenberg",
-	"version": "14.4.0-rc.1",
+	"version": "14.5.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
 		"@actions/core": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.8.0.tgz",
-			"integrity": "sha512-XirM+Zo/PFlA+1h+i4bkfvagujta+LIM2AOSzPbt8JqXbbuxb1HTB+FqIyaKmue9yiCx/JIJY6pXsOl3+T8JGw==",
+			"version": "1.9.1",
+			"resolved": "https://registry.npmjs.org/@actions/core/-/core-1.9.1.tgz",
+			"integrity": "sha512-5ad+U2YGrmmiw6du20AQW5XuWo7UKN2052FjSV7MX+Wfjf8sCqcsZe62NfgHys4QI4/Y+vQvLKYL8jWtA1ZBTA==",
 			"dev": true,
 			"requires": {
-				"@actions/http-client": "^1.0.11"
+				"@actions/http-client": "^2.0.1",
+				"uuid": "^8.3.2"
+			},
+			"dependencies": {
+				"@actions/http-client": {
+					"version": "2.0.1",
+					"resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.0.1.tgz",
+					"integrity": "sha512-PIXiMVtz6VvyaRsGY268qvj57hXQEpsYogYOu2nrQhlf+XCGmZstmuZBbAybUl1nQGnvS1k1eEsQ69ZoD7xlSw==",
+					"dev": true,
+					"requires": {
+						"tunnel": "^0.0.6"
+					}
+				},
+				"uuid": {
+					"version": "8.3.2",
+					"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+					"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+					"dev": true
+				}
 			}
 		},
 		"@actions/github": {
@@ -1763,23 +1781,6 @@
 			"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
 			"dev": true
 		},
-		"@choojs/findup": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz",
-			"integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==",
-			"dev": true,
-			"requires": {
-				"commander": "^2.15.1"
-			},
-			"dependencies": {
-				"commander": {
-					"version": "2.20.3",
-					"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-					"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-					"dev": true
-				}
-			}
-		},
 		"@cnakazawa/watch": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.3.tgz",
@@ -7970,19 +7971,19 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.25.1",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.25.1.tgz",
-			"integrity": "sha512-IJ4X0yOakXtwkhbnNzKkaIgXe6df7u3H3FnuhI9Jqh+CdO0e/lYQlDLYiyI9cnXK8E7UAppAWP+VqAv6VX7HQg==",
+			"version": "1.27.1",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.27.1.tgz",
+			"integrity": "sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==",
 			"dev": true,
 			"requires": {
 				"@types/node": "*",
-				"playwright-core": "1.25.1"
+				"playwright-core": "1.27.1"
 			},
 			"dependencies": {
 				"playwright-core": {
-					"version": "1.25.1",
-					"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.1.tgz",
-					"integrity": "sha512-lSvPCmA2n7LawD2Hw7gSCLScZ+vYRkhU8xH0AapMyzwN+ojoDqhkH/KIEUxwNu2PjPoE/fcE0wLAksdOhJ2O5g==",
+					"version": "1.27.1",
+					"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz",
+					"integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==",
 					"dev": true
 				}
 			}
@@ -16966,6 +16967,243 @@
 				}
 			}
 		},
+		"@typescript-eslint/utils": {
+			"version": "5.40.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.40.0.tgz",
+			"integrity": "sha512-MO0y3T5BQ5+tkkuYZJBjePewsY+cQnfkYeRqS6tPh28niiIwPnQ1t59CSRcs1ZwJJNOdWw7rv9pF8aP58IMihA==",
+			"dev": true,
+			"requires": {
+				"@types/json-schema": "^7.0.9",
+				"@typescript-eslint/scope-manager": "5.40.0",
+				"@typescript-eslint/types": "5.40.0",
+				"@typescript-eslint/typescript-estree": "5.40.0",
+				"eslint-scope": "^5.1.1",
+				"eslint-utils": "^3.0.0",
+				"semver": "^7.3.7"
+			},
+			"dependencies": {
+				"@nodelib/fs.stat": {
+					"version": "2.0.5",
+					"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+					"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+					"dev": true
+				},
+				"@types/json-schema": {
+					"version": "7.0.11",
+					"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+					"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+					"dev": true
+				},
+				"@typescript-eslint/scope-manager": {
+					"version": "5.40.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.40.0.tgz",
+					"integrity": "sha512-d3nPmjUeZtEWRvyReMI4I1MwPGC63E8pDoHy0BnrYjnJgilBD3hv7XOiETKLY/zTwI7kCnBDf2vWTRUVpYw0Uw==",
+					"dev": true,
+					"requires": {
+						"@typescript-eslint/types": "5.40.0",
+						"@typescript-eslint/visitor-keys": "5.40.0"
+					}
+				},
+				"@typescript-eslint/types": {
+					"version": "5.40.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.40.0.tgz",
+					"integrity": "sha512-V1KdQRTXsYpf1Y1fXCeZ+uhjW48Niiw0VGt4V8yzuaDTU8Z1Xl7yQDyQNqyAFcVhpYXIVCEuxSIWTsLDpHgTbw==",
+					"dev": true
+				},
+				"@typescript-eslint/typescript-estree": {
+					"version": "5.40.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.40.0.tgz",
+					"integrity": "sha512-b0GYlDj8TLTOqwX7EGbw2gL5EXS2CPEWhF9nGJiGmEcmlpNBjyHsTwbqpyIEPVpl6br4UcBOYlcI2FJVtJkYhg==",
+					"dev": true,
+					"requires": {
+						"@typescript-eslint/types": "5.40.0",
+						"@typescript-eslint/visitor-keys": "5.40.0",
+						"debug": "^4.3.4",
+						"globby": "^11.1.0",
+						"is-glob": "^4.0.3",
+						"semver": "^7.3.7",
+						"tsutils": "^3.21.0"
+					}
+				},
+				"@typescript-eslint/visitor-keys": {
+					"version": "5.40.0",
+					"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.40.0.tgz",
+					"integrity": "sha512-ijJ+6yig+x9XplEpG2K6FUdJeQGGj/15U3S56W9IqXKJqleuD7zJ2AX/miLezwxpd7ZxDAqO87zWufKg+RPZyQ==",
+					"dev": true,
+					"requires": {
+						"@typescript-eslint/types": "5.40.0",
+						"eslint-visitor-keys": "^3.3.0"
+					}
+				},
+				"array-union": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+					"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+					"dev": true
+				},
+				"braces": {
+					"version": "3.0.2",
+					"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+					"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+					"dev": true,
+					"requires": {
+						"fill-range": "^7.0.1"
+					}
+				},
+				"debug": {
+					"version": "4.3.4",
+					"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+					"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+					"dev": true,
+					"requires": {
+						"ms": "2.1.2"
+					}
+				},
+				"eslint-scope": {
+					"version": "5.1.1",
+					"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+					"integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+					"dev": true,
+					"requires": {
+						"esrecurse": "^4.3.0",
+						"estraverse": "^4.1.1"
+					}
+				},
+				"eslint-visitor-keys": {
+					"version": "3.3.0",
+					"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+					"integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+					"dev": true
+				},
+				"fast-glob": {
+					"version": "3.2.12",
+					"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+					"integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+					"dev": true,
+					"requires": {
+						"@nodelib/fs.stat": "^2.0.2",
+						"@nodelib/fs.walk": "^1.2.3",
+						"glob-parent": "^5.1.2",
+						"merge2": "^1.3.0",
+						"micromatch": "^4.0.4"
+					}
+				},
+				"fill-range": {
+					"version": "7.0.1",
+					"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+					"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+					"dev": true,
+					"requires": {
+						"to-regex-range": "^5.0.1"
+					}
+				},
+				"glob-parent": {
+					"version": "5.1.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+					"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.1"
+					}
+				},
+				"globby": {
+					"version": "11.1.0",
+					"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+					"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+					"dev": true,
+					"requires": {
+						"array-union": "^2.1.0",
+						"dir-glob": "^3.0.1",
+						"fast-glob": "^3.2.9",
+						"ignore": "^5.2.0",
+						"merge2": "^1.4.1",
+						"slash": "^3.0.0"
+					}
+				},
+				"ignore": {
+					"version": "5.2.0",
+					"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+					"integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+					"dev": true
+				},
+				"is-glob": {
+					"version": "4.0.3",
+					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+					"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+					"dev": true,
+					"requires": {
+						"is-extglob": "^2.1.1"
+					}
+				},
+				"is-number": {
+					"version": "7.0.0",
+					"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+					"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+					"dev": true
+				},
+				"lru-cache": {
+					"version": "6.0.0",
+					"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+					"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+					"dev": true,
+					"requires": {
+						"yallist": "^4.0.0"
+					}
+				},
+				"merge2": {
+					"version": "1.4.1",
+					"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+					"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+					"dev": true
+				},
+				"micromatch": {
+					"version": "4.0.5",
+					"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+					"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+					"dev": true,
+					"requires": {
+						"braces": "^3.0.2",
+						"picomatch": "^2.3.1"
+					}
+				},
+				"ms": {
+					"version": "2.1.2",
+					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+					"dev": true
+				},
+				"picomatch": {
+					"version": "2.3.1",
+					"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+					"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+					"dev": true
+				},
+				"semver": {
+					"version": "7.3.8",
+					"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
+					"integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+					"dev": true,
+					"requires": {
+						"lru-cache": "^6.0.0"
+					}
+				},
+				"to-regex-range": {
+					"version": "5.0.1",
+					"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+					"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+					"dev": true,
+					"requires": {
+						"is-number": "^7.0.0"
+					}
+				},
+				"yallist": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+					"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+					"dev": true
+				}
+			}
+		},
 		"@typescript-eslint/visitor-keys": {
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.3.0.tgz",
@@ -17356,6 +17594,7 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/warning": "file:packages/warning",
 				"@wordpress/wordcount": "file:packages/wordcount",
+				"change-case": "^4.1.2",
 				"classnames": "^2.3.1",
 				"colord": "^2.7.0",
 				"diff": "^4.0.2",
@@ -17402,6 +17641,7 @@
 				"change-case": "^4.1.2",
 				"classnames": "^2.3.1",
 				"colord": "^2.7.0",
+				"escape-html": "^1.0.3",
 				"fast-average-color": "^9.1.1",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
@@ -17886,11 +18126,20 @@
 				"@wordpress/url": "file:packages/url",
 				"@wordpress/wordcount": "file:packages/wordcount",
 				"classnames": "^2.3.1",
+				"date-fns": "^2.28.0",
+				"escape-html": "^1.0.3",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
 				"react-autosize-textarea": "^7.1.0",
 				"rememo": "^4.0.0",
 				"remove-accents": "^0.4.2"
+			},
+			"dependencies": {
+				"date-fns": {
+					"version": "2.29.3",
+					"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+					"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+				}
 			}
 		},
 		"@wordpress/element": {
@@ -18308,7 +18557,7 @@
 			"version": "file:packages/project-management-automation",
 			"dev": true,
 			"requires": {
-				"@actions/core": "1.8.0",
+				"@actions/core": "1.9.1",
 				"@actions/github": "^5.0.0",
 				"@babel/runtime": "^7.16.0",
 				"@octokit/request-error": "^2.1.0",
@@ -19350,7 +19599,7 @@
 		"app-root-dir": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
-			"integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==",
+			"integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=",
 			"dev": true
 		},
 		"app-root-path": {
@@ -27632,7 +27881,7 @@
 		"babel-plugin-add-react-displayname": {
 			"version": "0.0.5",
 			"resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz",
-			"integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==",
+			"integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=",
 			"dev": true
 		},
 		"babel-plugin-apply-mdx-type-prop": {
@@ -28055,7 +28304,7 @@
 		"batch-processor": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
-			"integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==",
+			"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=",
 			"dev": true
 		},
 		"bcrypt-pbkdf": {
@@ -31306,7 +31555,7 @@
 		"css.escape": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-			"integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+			"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
 			"dev": true
 		},
 		"cssesc": {
@@ -34114,6 +34363,15 @@
 				"globals": "^13.8.0"
 			}
 		},
+		"eslint-plugin-testing-library": {
+			"version": "5.7.2",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.7.2.tgz",
+			"integrity": "sha512-0ZmHeR/DUUgEzW8rwUBRWxuqntipDtpvxK0hymdHnLlABryJkzd+CAHr+XnISaVsTisZ5MLHp6nQF+8COHLLTA==",
+			"dev": true,
+			"requires": {
+				"@typescript-eslint/utils": "^5.13.0"
+			}
+		},
 		"eslint-scope": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
@@ -36858,7 +37116,7 @@
 		"has-glob": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz",
-			"integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==",
+			"integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=",
 			"dev": true,
 			"requires": {
 				"is-glob": "^3.0.0"
@@ -36867,7 +37125,7 @@
 				"is-glob": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-					"integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==",
+					"integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
 					"dev": true,
 					"requires": {
 						"is-extglob": "^2.1.0"
@@ -38754,7 +39012,7 @@
 		"is-window": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
-			"integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==",
+			"integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=",
 			"dev": true
 		},
 		"is-windows": {
@@ -42131,7 +42389,7 @@
 		"js-string-escape": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz",
-			"integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==",
+			"integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=",
 			"dev": true
 		},
 		"js-tokens": {
@@ -43539,7 +43797,7 @@
 		"lodash.isequal": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+			"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
 		},
 		"lodash.ismatch": {
 			"version": "4.4.0",
@@ -43819,7 +44077,7 @@
 		"lz-string": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-			"integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+			"integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=",
 			"dev": true
 		},
 		"macos-release": {
@@ -47064,7 +47322,7 @@
 		"num2fraction": {
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-			"integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
+			"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
 			"dev": true
 		},
 		"number-is-nan": {
@@ -48542,7 +48800,7 @@
 		"p-defer": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-			"integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==",
+			"integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
 			"dev": true
 		},
 		"p-event": {
@@ -49427,14 +49685,22 @@
 			"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
 		},
 		"postcss": {
-			"version": "8.4.5",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
-			"integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
+			"version": "8.4.16",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+			"integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
 			"dev": true,
 			"requires": {
-				"nanoid": "^3.1.30",
+				"nanoid": "^3.3.4",
 				"picocolors": "^1.0.0",
-				"source-map-js": "^1.0.1"
+				"source-map-js": "^1.0.2"
+			},
+			"dependencies": {
+				"nanoid": {
+					"version": "3.3.4",
+					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+					"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+					"dev": true
+				}
 			}
 		},
 		"postcss-calc": {
@@ -50108,7 +50374,7 @@
 		"pretty-hrtime": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-			"integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==",
+			"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
 			"dev": true
 		},
 		"prismjs": {
@@ -52414,7 +52680,7 @@
 		"relateurl": {
 			"version": "0.2.7",
 			"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-			"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+			"integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
 			"dev": true
 		},
 		"remark": {
@@ -53264,46 +53530,15 @@
 			"integrity": "sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA=="
 		},
 		"rtlcss": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz",
-			"integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==",
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.0.0.tgz",
+			"integrity": "sha512-j6oypPP+mgFwDXL1JkLCtm6U/DQntMUqlv5SOhpgHhdIE+PmBcjrtAHIpXfbIup47kD5Sgja9JDsDF1NNOsBwQ==",
 			"dev": true,
 			"requires": {
-				"@choojs/findup": "^0.2.1",
-				"chalk": "^2.4.2",
-				"mkdirp": "^0.5.1",
-				"postcss": "^6.0.23",
-				"strip-json-comments": "^2.0.0"
-			},
-			"dependencies": {
-				"chalk": {
-					"version": "2.4.2",
-					"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-					"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-					"dev": true,
-					"requires": {
-						"ansi-styles": "^3.2.1",
-						"escape-string-regexp": "^1.0.5",
-						"supports-color": "^5.3.0"
-					}
-				},
-				"postcss": {
-					"version": "6.0.23",
-					"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-					"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-					"dev": true,
-					"requires": {
-						"chalk": "^2.4.1",
-						"source-map": "^0.6.1",
-						"supports-color": "^5.4.0"
-					}
-				},
-				"source-map": {
-					"version": "0.6.1",
-					"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-					"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-					"dev": true
-				}
+				"escalade": "^3.1.1",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.6",
+				"strip-json-comments": "^3.1.1"
 			}
 		},
 		"run-async": {
@@ -55959,9 +56194,9 @@
 			}
 		},
 		"strip-json-comments": {
-			"version": "2.0.1",
-			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-			"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
 			"dev": true
 		},
 		"strip-outer": {
diff --git a/package.json b/package.json
old mode 100755
new mode 100644
index c7c955ffc570b..88cd1197fe65e
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "14.4.0-rc.1",
+	"version": "14.5.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -88,7 +88,7 @@
 		"wicg-inert": "3.1.2"
 	},
 	"devDependencies": {
-		"@actions/core": "1.8.0",
+		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@babel/core": "7.16.0",
 		"@babel/plugin-syntax-jsx": "7.16.0",
@@ -100,7 +100,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.6.0",
-		"@playwright/test": "1.25.1",
+		"@playwright/test": "1.27.1",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.2",
 		"@storybook/addon-a11y": "6.5.7",
 		"@storybook/addon-actions": "6.5.7",
@@ -182,12 +182,14 @@
 		"cssnano": "5.0.7",
 		"deep-freeze": "0.0.1",
 		"equivalent-key-map": "0.2.2",
+		"escape-html": "1.0.3",
 		"eslint-import-resolver-node": "0.3.4",
 		"eslint-plugin-eslint-comments": "3.1.2",
 		"eslint-plugin-import": "2.25.2",
 		"eslint-plugin-jest-dom": "4.0.2",
 		"eslint-plugin-playwright": "0.8.0",
 		"eslint-plugin-ssr-friendly": "1.0.6",
+		"eslint-plugin-testing-library": "5.7.2",
 		"execa": "4.0.2",
 		"fast-glob": "3.2.7",
 		"filenamify": "4.2.0",
@@ -211,7 +213,7 @@
 		"node-watch": "0.7.0",
 		"npm-run-all": "4.1.5",
 		"patch-package": "6.2.2",
-		"postcss": "8.4.5",
+		"postcss": "8.4.16",
 		"postcss-loader": "6.2.1",
 		"prettier": "npm:wp-prettier@2.6.2",
 		"progress": "2.0.3",
@@ -224,7 +226,7 @@
 		"redux": "4.1.2",
 		"resize-observer-polyfill": "1.5.1",
 		"rimraf": "3.0.2",
-		"rtlcss": "2.6.2",
+		"rtlcss": "4.0.0",
 		"sass": "1.35.2",
 		"sass-loader": "12.1.0",
 		"semver": "7.3.5",
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 1874e6f7852bc..25ebaac9760a8 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fix
+
+-   `InserterListItem`: Fix dragging and dropping in Firefox. ([#44631](https://github.com/WordPress/gutenberg/pull/44631))
+
 ## 10.3.0 (2022-10-19)
 
 ### Bug Fix
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index abe8775b3028d..b5d6212930a86 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -59,6 +59,7 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
index ed6c40f54b70b..f50e69044f9e5 100644
--- a/packages/block-editor/src/components/alignment-control/ui.js
+++ b/packages/block-editor/src/components/alignment-control/ui.js
@@ -30,7 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function AlignmentUI( {
diff --git a/packages/block-editor/src/components/block-alignment-control/constants.js b/packages/block-editor/src/components/block-alignment-control/constants.js
index f32a815b02f67..2fa133740a4cf 100644
--- a/packages/block-editor/src/components/block-alignment-control/constants.js
+++ b/packages/block-editor/src/components/block-alignment-control/constants.js
@@ -41,5 +41,5 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 export const DEFAULT_CONTROL = 'none';
 
 export const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };
diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
index 6e9ef0def5a5a..6ea7b2a49c8a9 100644
--- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js
+++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -24,7 +24,7 @@ function BlockAlignmentMatrixControl( props ) {
 	return (
 		<Dropdown
 			position="bottom right"
-			popoverProps={ { isAlternate: true } }
+			popoverProps={ { variant: 'toolbar' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {
diff --git a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
index 85dd26bc0a7f3..01f2d73d3e5f9 100644
--- a/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-breadcrumb/test/__snapshots__/index.js.snap
@@ -1,16 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BlockBreadcrumb should render correctly 1`] = `
-<ul
-  aria-label="Block breadcrumb"
-  class="block-editor-block-breadcrumb"
-  role="list"
->
-  <li
-    aria-current="true"
-    class="block-editor-block-breadcrumb__current"
+<div>
+  <ul
+    aria-label="Block breadcrumb"
+    class="block-editor-block-breadcrumb"
+    role="list"
   >
-    Document
-  </li>
-</ul>
+    <li
+      aria-current="true"
+      class="block-editor-block-breadcrumb__current"
+    >
+      Document
+    </li>
+  </ul>
+</div>
 `;
diff --git a/packages/block-editor/src/components/block-breadcrumb/test/index.js b/packages/block-editor/src/components/block-breadcrumb/test/index.js
index ee8d2bc57af03..dcdf242831c71 100644
--- a/packages/block-editor/src/components/block-breadcrumb/test/index.js
+++ b/packages/block-editor/src/components/block-breadcrumb/test/index.js
@@ -12,7 +12,7 @@ describe( 'BlockBreadcrumb', () => {
 	it( 'should render correctly', () => {
 		const { container } = render( <BlockBreadcrumb /> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'Root label text', () => {
diff --git a/packages/block-editor/src/components/block-compare/index.js b/packages/block-editor/src/components/block-compare/index.js
index b04cd3238dc9b..46454f82a070d 100644
--- a/packages/block-editor/src/components/block-compare/index.js
+++ b/packages/block-editor/src/components/block-compare/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { castArray } from 'lodash';
 // diff doesn't tree-shake correctly, so we import from the individual
 // module here, to avoid including too much of the library
 import { diffChars } from 'diff/lib/diff/character';
@@ -44,7 +43,9 @@ function BlockCompare( {
 
 	function getConvertedContent( convertedBlock ) {
 		// The convertor may return an array of items or a single item.
-		const newBlocks = castArray( convertedBlock );
+		const newBlocks = Array.isArray( convertedBlock )
+			? convertedBlock
+			: [ convertedBlock ];
 
 		// Get converted block details.
 		const newContent = newBlocks.map( ( item ) =>
diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
index 9b2875b3018a3..747e25b820847 100644
--- a/packages/block-editor/src/components/block-edit/index.js
+++ b/packages/block-editor/src/components/block-edit/index.js
@@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
+	const { name, isSelected, clientId, __unstableLayoutClassNames } = props;
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		__unstableLayoutClassNames,
 	};
 	return (
 		<BlockEditContextProvider
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index d8217e3592b10..9e4c9755ec225 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -84,6 +84,7 @@ function BlockListBlock( {
 	isSelected,
 	isSelectionEnabled,
 	className,
+	__unstableLayoutClassNames: layoutClassNames,
 	name,
 	isValid,
 	attributes,
@@ -146,6 +147,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			__unstableLayoutClassNames={ layoutClassNames }
 		/>
 	);
 
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 918906e62f8cc..66569fc6847a2 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -174,7 +174,7 @@
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
 	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
-	// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
+	// from the preceding paragraph showing, which is effectively the above selection bleeding in.
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
diff --git a/packages/block-editor/src/components/block-mover/stories/index.js b/packages/block-editor/src/components/block-mover/stories/index.js
index a6b5fad872f0b..aac98ecc84d6e 100644
--- a/packages/block-editor/src/components/block-mover/stories/index.js
+++ b/packages/block-editor/src/components/block-mover/stories/index.js
@@ -70,7 +70,7 @@ function BlockMoverStory() {
 			</Toolbar>
 
 			<p style={ { marginTop: 36 } }>
-				But it can also accomodate horizontal blocks.
+				But it can also accommodate horizontal blocks.
 			</p>
 			<Toolbar label="Block Mover">
 				<BlockMover
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index bb88d981adffa..eba7bbed68304 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -61,3 +61,38 @@
 		overflow: hidden;
 	}
 }
+
+// Specificity is necessary to override block toolbar button styles.
+.components-button.block-editor-block-mover-button {
+	// Focus and toggle pseudo elements.
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		border-radius: $radius-block-ui;
+		height: $grid-unit-40;
+
+		// Position the focus rectangle.
+		left: $grid-unit-10;
+		right: $grid-unit-10;
+		z-index: -1;
+
+		// Animate in.
+		animation: components-button__appear-animation 0.1s ease;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+	}
+
+	// Don't show the focus inherited by the Button component.
+	&:focus,
+	&:focus:enabled,
+	// Override focus styles from the block toolbar
+	&:focus::before {
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible::before {
+		@include block-toolbar-button-style__focus();
+	}
+}
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index ae8a3b3203800..9de5bd3663705 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -268,6 +268,7 @@ function BlockPopoverInbetween( {
 			resize={ false }
 			flip={ false }
 			placement="bottom-start"
+			variant="unstyled"
 		>
 			<div
 				className="block-editor-block-popover__inbetween-container"
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 4cd29a99be62a..5382949684abd 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -173,6 +173,7 @@ function BlockPopover(
 				'block-editor-block-popover',
 				props.className
 			) }
+			variant="unstyled"
 		>
 			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
 			{ ! __unstableCoverTarget && children }
diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
index 1744506179e67..2ce92991c9054 100644
--- a/packages/block-editor/src/components/block-popover/style.scss
+++ b/packages/block-editor/src/components/block-popover/style.scss
@@ -13,10 +13,6 @@
 		margin: 0 !important;
 		min-width: auto;
 		width: max-content;
-		background: none;
-		border: none;
-		outline: none;
-		box-shadow: none;
 		overflow-y: visible;
 	}
 
diff --git a/packages/block-editor/src/components/block-preview/index.js b/packages/block-editor/src/components/block-preview/index.js
index 02d68203d7eb3..b01411591f098 100644
--- a/packages/block-editor/src/components/block-preview/index.js
+++ b/packages/block-editor/src/components/block-preview/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -36,7 +35,10 @@ export function BlockPreview( {
 		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
@@ -99,7 +101,10 @@ export function useBlockPreview( {
 	);
 	const disabledRef = useDisabled();
 	const ref = useMergeRefs( [ props.ref, disabledRef ] );
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 
 	const children = (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>
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 df2111da3b33e..87fc6bc5e0585 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
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -41,7 +36,7 @@ const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function CopyMenuItem( { blocks, onCopy } ) {
@@ -58,7 +53,9 @@ export function BlockSettingsDropdown( {
 	__unstableDisplayLocation,
 	...props
 } ) {
-	const blockClientIds = castArray( clientIds );
+	const blockClientIds = Array.isArray( clientIds )
+		? clientIds
+		: [ clientIds ];
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 8213e60ec2f56..462d94f40089c 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -52,7 +47,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			const { getBlockStyles, getBlockType } = select( blocksStore );
 			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
-				castArray( clientIds )[ 0 ]
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
 			const [ { name: firstBlockName } ] = blocks;
 			const _isSingleBlockSelected = blocks.length === 1;
@@ -163,7 +158,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						label={ blockSwitcherLabel }
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={
diff --git a/packages/block-editor/src/components/block-switcher/preview-block-popover.js b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
index 53adb87f337ad..78e29f4ad09fb 100644
--- a/packages/block-editor/src/components/block-switcher/preview-block-popover.js
+++ b/packages/block-editor/src/components/block-switcher/preview-block-popover.js
@@ -15,7 +15,7 @@ export default function PreviewBlockPopover( { blocks } ) {
 			<div className="block-editor-block-switcher__popover__preview__container">
 				<Popover
 					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
+					placement="bottom-start"
 					focusOnMount={ false }
 				>
 					<div className="block-editor-block-switcher__preview">
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index 3b950ef87a754..b7cd30462e359 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -25,7 +25,7 @@ function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock, hideInsertionPoint } = useDispatch( blockEditorStore );
 	const openRef = useContext( InsertionPointOpenRef );
 	const ref = useRef();
 	const {
@@ -89,6 +89,14 @@ function InbetweenInsertionPointPopover( {
 		}
 	}
 
+	function maybeHideInserterPoint( event ) {
+		// Only hide the inserter if it's triggered on the wrapper,
+		// and the inserter is not open.
+		if ( event.target === ref.current && ! openRef.current ) {
+			hideInsertionPoint();
+		}
+	}
+
 	function onFocus( event ) {
 		// Only handle click on the wrapper specifically, and not an event
 		// bubbled from the inserter itself.
@@ -200,6 +208,7 @@ function InbetweenInsertionPointPopover( {
 				className={ classnames( className, {
 					'is-with-inserter': isInserterShown,
 				} ) }
+				onHoverEnd={ maybeHideInserterPoint }
 			>
 				<motion.div
 					variants={ lineVariants }
diff --git a/packages/block-editor/src/components/block-variation-picker/README.md b/packages/block-editor/src/components/block-variation-picker/README.md
index 1de44a9bcd406..4816822e535a2 100644
--- a/packages/block-editor/src/components/block-variation-picker/README.md
+++ b/packages/block-editor/src/components/block-variation-picker/README.md
@@ -68,7 +68,7 @@ The different variations of the block.
 
 -   Type: `Function`
 
-Callback called when a block variation is selected. It recieves the selected variation as a parameter.
+Callback called when a block variation is selected. It receives the selected variation as a parameter.
 
 #### `icon`
 
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
index 00f4ff6fd993c..3a243da1b9572 100644
--- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
+++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -28,7 +28,7 @@ const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
 const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function BlockVerticalAlignmentUI( {
diff --git a/packages/block-editor/src/components/border-radius-control/all-input-control.js b/packages/block-editor/src/components/border-radius-control/all-input-control.js
index 31ad2aa30df9f..27256f03547f0 100644
--- a/packages/block-editor/src/components/border-radius-control/all-input-control.js
+++ b/packages/block-editor/src/components/border-radius-control/all-input-control.js
@@ -61,6 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ '__unstable-large' }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/border-radius-control/index.js b/packages/block-editor/src/components/border-radius-control/index.js
index 9c2e96ba99b93..8754d39ac570f 100644
--- a/packages/block-editor/src/components/border-radius-control/index.js
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -113,6 +113,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							step={ step }
+							__nextHasNoMarginBottom
 						/>
 					</>
 				) : (
diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
index aa32c68c1a472..b33b79a482435 100644
--- a/packages/block-editor/src/components/border-radius-control/input-controls.js
+++ b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -80,6 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ '__unstable-large' }
 							/>
 						</div>
 					</Tooltip>
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 7e4f220709924..c94dfbbd0a8fd 100644
--- a/packages/block-editor/src/components/border-radius-control/style.scss
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -10,24 +10,21 @@
 		justify-content: space-between;
 		align-items: flex-start;
 
-		> .components-unit-control-wrapper {
-			width: 110px;
+		.components-border-radius-control__unit-control {
+			width: calc((100% - #{$grid-unit-20}) / 2);
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-15 };
+			margin-right: $grid-unit-20;
 			flex-shrink: 0;
 		}
 
-		.components-range-control {
+		.components-border-radius-control__range-control {
 			flex: 1;
-			margin-bottom: 0;
-
-			.components-base-control__field {
-				margin-bottom: 0;
-				height: 30px;
-			}
+			margin-right: $grid-unit-15;
 
-			.components-range-control__wrapper {
-				margin-right: 10px;
+			> div {
+				height: 40px;
+				display: flex;
+				align-items: center;
 			}
 		}
 
@@ -37,22 +34,16 @@
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
-		display: flex;
-		width: 70%;
-		flex-wrap: wrap;
-
-		.components-border-radius-control__tooltip-wrapper {
-			width: calc(50% - #{ $grid-unit-10 });
-			margin-bottom: $grid-unit-10;
-			margin-right: $grid-unit-10;
-		}
+		display: grid;
+		gap: $grid-unit-20;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button.has-icon {
+	.component-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-left: 2px;
-		margin-top: 3px;
+		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 0;
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 6ea0541d50696..ddc08d9985fbb 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -117,114 +117,116 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
   >
-    <fieldset
-      class="block-editor-color-gradient-control__fieldset"
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
-        data-wp-c16t="true"
-        data-wp-component="VStack"
+      <fieldset
+        class="block-editor-color-gradient-control__fieldset"
       >
-        <legend>
-          <div
-            class="block-editor-color-gradient-control__color-indicator"
-          >
-            <span
-              class="components-base-control__label emotion-6 emotion-7"
-            >
-              Test Color
-            </span>
-          </div>
-        </legend>
         <div
-          class="block-editor-color-gradient-control__panel"
+          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="VStack"
         >
+          <legend>
+            <div
+              class="block-editor-color-gradient-control__color-indicator"
+            >
+              <span
+                class="components-base-control__label emotion-6 emotion-7"
+              >
+                Test Color
+              </span>
+            </div>
+          </legend>
           <div
-            class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-            data-wp-c16t="true"
-            data-wp-component="VStack"
+            class="block-editor-color-gradient-control__panel"
           >
             <div
-              class="components-dropdown"
-              tabindex="-1"
+              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="VStack"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-                data-wp-c16t="true"
-                data-wp-component="Flex"
-                style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
+              <div
+                class="components-dropdown"
+                tabindex="-1"
               >
-                <span
-                  class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                  data-wp-c16t="true"
-                  data-wp-component="FlexItem"
-                >
-                  red
-                </span>
-                <span
-                  class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                   data-wp-c16t="true"
-                  data-wp-component="FlexItem"
+                  data-wp-component="Flex"
+                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
                 >
-                  f00
-                </span>
-              </button>
-            </div>
-            <div
-              class="components-circular-option-picker"
-            >
+                  <span
+                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                  >
+                    red
+                  </span>
+                  <span
+                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                  >
+                    f00
+                  </span>
+                </button>
+              </div>
               <div
-                class="components-circular-option-picker__swatches"
+                class="components-circular-option-picker"
               >
                 <div
-                  class="components-circular-option-picker__option-wrapper"
+                  class="components-circular-option-picker__swatches"
                 >
-                  <button
-                    aria-label="Color: red"
-                    aria-pressed="true"
-                    class="components-button components-circular-option-picker__option is-pressed"
-                    style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                    type="button"
-                  />
-                  <svg
-                    aria-hidden="true"
-                    fill="#000"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="components-circular-option-picker__option-wrapper"
                   >
-                    <path
-                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                    <button
+                      aria-label="Color: red"
+                      aria-pressed="true"
+                      class="components-button components-circular-option-picker__option is-pressed"
+                      style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+                      type="button"
                     />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      fill="#000"
+                      focusable="false"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                      />
+                    </svg>
+                  </div>
                 </div>
-              </div>
-              <div
-                class="components-circular-option-picker__custom-clear-wrapper"
-              >
-                <button
-                  class="components-button components-circular-option-picker__clear is-tertiary"
-                  type="button"
+                <div
+                  class="components-circular-option-picker__custom-clear-wrapper"
                 >
-                  Clear
-                </button>
+                  <button
+                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    type="button"
+                  >
+                    Clear
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/block-editor/src/components/color-palette/test/control.js b/packages/block-editor/src/components/color-palette/test/control.js
index e3e90ea0bac83..3a5dcc657a94c 100644
--- a/packages/block-editor/src/components/color-palette/test/control.js
+++ b/packages/block-editor/src/components/color-palette/test/control.js
@@ -22,6 +22,6 @@ describe( 'ColorPaletteControl', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js
index aeb67c8a9b878..d27e6863fe0df 100644
--- a/packages/block-editor/src/components/duotone-control/index.js
+++ b/packages/block-editor/src/components/duotone-control/index.js
@@ -36,7 +36,7 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				isAlternate: true,
+				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
diff --git a/packages/block-editor/src/components/font-sizes/with-font-sizes.js b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
index f8b37a1498c21..5d9956c8b91f1 100644
--- a/packages/block-editor/src/components/font-sizes/with-font-sizes.js
+++ b/packages/block-editor/src/components/font-sizes/with-font-sizes.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, pickBy, reduce, some } from 'lodash';
+import { find, pickBy, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -152,8 +152,7 @@ export default ( ...fontSizeNames ) => {
 						};
 
 						if (
-							! some(
-								fontSizeAttributeNames,
+							! Object.values( fontSizeAttributeNames ).some(
 								didAttributesChange
 							)
 						) {
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 29fe41f891636..25e36037ebac5 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -282,7 +282,7 @@ function Iframe(
 
 	head = (
 		<>
-			<style>{ 'body{margin:0}' }</style>
+			<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
 			{ styles.map(
 				( { tagName, href, id, rel, media, textContent } ) => {
 					const TagName = tagName.toLowerCase();
diff --git a/packages/block-editor/src/components/image-editor/constants.js b/packages/block-editor/src/components/image-editor/constants.js
index 0692a76895ca1..b2419aa07b7ce 100644
--- a/packages/block-editor/src/components/image-editor/constants.js
+++ b/packages/block-editor/src/components/image-editor/constants.js
@@ -2,5 +2,5 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 4105d7291957e..8afc6482eb33f 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -150,7 +150,9 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { clientId } = useBlockEditContext();
+	const { __unstableDisableLayoutClassNames } = options;
+	const { clientId, __unstableLayoutClassNames: layoutClassNames = '' } =
+		useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -200,12 +202,14 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
+
 	return {
 		...props,
 		ref,
 		className: classnames(
 			props.className,
 			'block-editor-block-list__layout',
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
 			{
 				'has-overlay': hasOverlay,
 			}
diff --git a/packages/block-editor/src/components/inner-blocks/test/index.js b/packages/block-editor/src/components/inner-blocks/test/index.js
index 04018b65eda35..c9d9279db2745 100644
--- a/packages/block-editor/src/components/inner-blocks/test/index.js
+++ b/packages/block-editor/src/components/inner-blocks/test/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * WordPress dependencies
  */
@@ -102,3 +104,5 @@ describe( 'InnerBlocks', () => {
 		expect( serialize( block ) ).toMatchSnapshot();
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */
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 981d470a81d6a..b3078adb519f1 100644
--- a/packages/block-editor/src/components/inserter-list-item/style.scss
+++ b/packages/block-editor/src/components/inserter-list-item/style.scss
@@ -49,6 +49,8 @@
 				border-radius: $radius-block-ui;
 				opacity: 0.04;
 				background: var(--wp-admin-theme-color);
+				// This fixes drag-and-drop in Firefox.
+				pointer-events: none;
 			}
 		}
 
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index fddc14f8dff1f..d2bbaa909d0a2 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -118,14 +113,11 @@ function useInsertionPoint( {
 					meta
 				);
 			}
+			const blockLength = Array.isArray( blocks ) ? blocks.length : 1;
 			const message = sprintf(
 				// translators: %d: the name of the block that has been added
-				_n(
-					'%d block added.',
-					'%d blocks added.',
-					castArray( blocks ).length
-				),
-				castArray( blocks ).length
+				_n( '%d block added.', '%d blocks added.', blockLength ),
+				blockLength
 			);
 			speak( message );
 
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index f8edd14fc5ff4..5451f19937b01 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import removeAccents from 'remove-accents';
-import { find, words } from 'lodash';
+import { find } from 'lodash';
+import { noCase } from 'change-case';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -12,6 +13,25 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input, {
+		splitRegexp: [
+			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+		],
+		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+	} )
+		.split( ' ' )
+		.filter( Boolean );
+}
+
 /**
  * Sanitizes the search input string.
  *
@@ -43,7 +63,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +170,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = words( normalizedSearchInput );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms
diff --git a/packages/block-editor/src/components/inserter/test/search-items.js b/packages/block-editor/src/components/inserter/test/search-items.js
index a33da9d580230..057432113b731 100644
--- a/packages/block-editor/src/components/inserter/test/search-items.js
+++ b/packages/block-editor/src/components/inserter/test/search-items.js
@@ -45,6 +45,12 @@ describe( 'getNormalizedSearchTerms', () => {
 
 	it( 'should support non-latin letters', () => {
 		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+		expect(
+			getNormalizedSearchTerms( '师父领进门，修行在个人。' )
+		).toEqual( [ '师父领进门', '修行在个人' ] );
+		expect(
+			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
 	} );
 } );
 
diff --git a/packages/block-editor/src/components/letter-spacing-control/README.md b/packages/block-editor/src/components/letter-spacing-control/README.md
new file mode 100644
index 0000000000000..fb4dd4fd23dac
--- /dev/null
+++ b/packages/block-editor/src/components/letter-spacing-control/README.md
@@ -0,0 +1,55 @@
+# Letter spacing control
+
+The `LetterSpacingControl` component renders a [`UnitControl`](https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/unit-control/README.md) that lets the user enter a numeric value and select a unit, for example px or rem.
+
+This component is used for blocks that display text, commonly inside a 
+[`ToolsPanelItem`](https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/tools-panel/tools-panel-item/README.md).
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a letter spacing control.
+
+```jsx
+import { LetterSpacingControl } from '@wordpress/block-editor';
+
+const MyLetterSpacingControl = () => (
+	<LetterSpacingControl
+		value={ value }
+		onChange={ onChange }
+		__unstableInputWidth="auto"
+	/>
+);
+```
+
+### Props
+
+### `value`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+The current value of the letter spacing setting.
+
+### `onChange`
+
+-   **Type:** `Function`
+
+A callback function invoked when the value is changed.
+
+### `_unstableInputWidth`
+
+-   **Type:** `string|number|undefined`
+-   **Default:** `undefined`
+
+Input width to pass through to inner UnitControl. Should be a valid CSS value.
+
+## Related components
+
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 127668002c7ac..670d6fac37e8d 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -99,6 +99,7 @@ const LineHeightControl = ( {
 				step={ STEP }
 				value={ value }
 				min={ 0 }
+				spinControls="custom"
 			/>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index ba6a4bbba5268..3d3dd7b0aaa21 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -192,7 +192,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
-### renderControlBottom 
+### renderControlBottom
 
 -   Type: `Function`
 -   Required: No
@@ -338,7 +338,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( { suggestions } ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <ul>
                     { suggestions.map( () => ( <li key={ `${ suggestion.id }-${ suggestion.type }` }>{ suggestion.title }</li> ) ) }
                 </ul>
@@ -352,7 +352,7 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 <LinkControlSearchInput
     renderSuggestions={( suggestionsProps ) => {
         return (
-            <Popover focusOnMount={ false } position="bottom">
+            <Popover focusOnMount={ false } placement="bottom">
                 <LinkControlSearchResults { ...suggestionsProps } />
             </Popover>
         );
diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
index 1500e2f887fad..1e8d51a73919a 100644
--- a/packages/block-editor/src/components/list-view/drop-indicator.js
+++ b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -115,6 +115,7 @@ export default function ListViewDropIndicator( {
 			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			className="block-editor-list-view-drop-indicator"
+			variant="unstyled"
 		>
 			<div
 				style={ style }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index ce5539dbe3aa7..9782dc7027bc7 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -249,39 +249,12 @@
 			}
 		}
 
-		// Don't show the focus inherited by the Button component.
-		&:focus:enabled {
-			box-shadow: none;
-			outline: none;
-		}
-
-		// Focus style.
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus::before {
-			@include block-toolbar-button-style__focus();
-		}
-
-		// Focus and toggle pseudo elements.
+		// Tweak size and position of focus ring.
 		&::before {
-			content: "";
-			position: absolute;
-			display: block;
-			border-radius: $radius-block-ui;
 			height: 16px;
 			min-width: 100%;
-
-			// Position the focus rectangle.
 			left: 0;
 			right: 0;
-
-			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
 		}
 	}
 
@@ -416,14 +389,6 @@ $block-navigation-max-indent: 8;
 	}
 }
 
-// Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator > .components-popover__content {
-	margin-left: 0;
-	border: none;
-	box-shadow: none;
-	outline: none;
-}
-
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index 21478b517c597..a2fb5f36036aa 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -131,7 +131,7 @@ const MediaReplaceFlow = ( {
 	const gallery = multiple && onlyAllowsImages();
 
 	const POPOVER_PROPS = {
-		isAlternate: true,
+		variant: 'toolbar',
 	};
 
 	return (
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 5e686386de60c..8d6bc6ca43378 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
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -31,80 +32,97 @@ function TestWrapper() {
 	);
 }
 
-function setUpMediaReplaceFlow() {
-	const { container } = render( <TestWrapper /> );
-	return container;
-}
-
 describe( 'General media replace flow', () => {
 	it( 'renders successfully', () => {
-		const container = setUpMediaReplaceFlow();
-
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-
-		expect( mediaReplaceButton ).not.toBeNull();
+		render( <TestWrapper /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		).toBeVisible();
 	} );
 
-	it( 'renders replace menu', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'renders replace menu', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const uploadMenu = container.querySelector(
-			'.block-editor-media-replace-flow__media-upload-menu'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		expect( uploadMenu ).not.toBeNull();
+		const uploadMenu = screen.getByRole( 'menu' );
+
+		expect( uploadMenu ).toBeInTheDocument();
+		expect( uploadMenu ).not.toBeVisible();
 	} );
 
-	it( 'displays media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'displays media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://example.media' );
 	} );
 
-	it( 'edits media URL', () => {
-		const container = setUpMediaReplaceFlow();
+	it( 'edits media URL', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const mediaReplaceButton = container.querySelector(
-			'button[aria-expanded="false"]'
-		);
-		mediaReplaceButton.click();
+		render( <TestWrapper /> );
 
-		const editMediaURL = container.querySelector(
-			'.block-editor-link-control__search-item-action'
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+				name: 'Replace',
+			} )
 		);
 
-		editMediaURL.click();
-
-		const mediaURLInput = container.querySelector(
-			'.block-editor-url-input__input'
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Edit',
+			} )
 		);
 
-		fireEvent.change( mediaURLInput, {
-			target: { value: 'https://new.example.media' },
+		const mediaURLInput = screen.getByRole( 'combobox', {
+			name: 'URL',
+			expanded: false,
 		} );
 
-		const saveMediaURLButton = container.querySelector(
-			'.block-editor-link-control__search-submit'
-		);
-
-		saveMediaURLButton.click();
+		await user.clear( mediaURLInput );
+		await user.type( mediaURLInput, 'https://new.example.media' );
 
-		const mediaURL = container.querySelector( '.components-external-link' );
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Submit',
+			} )
+		);
 
-		expect( mediaURL.href ).toEqual( 'https://new.example.media/' );
+		expect(
+			screen.getByRole( 'link', {
+				name: 'new.example.media (opens in a new tab)',
+			} )
+		).toHaveAttribute( 'href', 'https://new.example.media' );
 	} );
 } );
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index 18027af27a05f..0f89dd4b248f7 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -42,7 +42,7 @@ function InlineSelectionToolbar( {
 function InlineToolbar( { popoverAnchor } ) {
 	return (
 		<Popover
-			position="top center"
+			placement="top"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			className="block-editor-rich-text__inline-format-toolbar"
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
index 42fa804f9297f..12d14d2413068 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -15,7 +15,7 @@ import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 const FormatToolbar = () => {
diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
index 6e5383aabc167..5e4f4260f5001 100644
--- a/packages/block-editor/src/components/rich-text/use-paste-handler.js
+++ b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -255,7 +255,7 @@ export function usePasteHandler( props ) {
 
 /**
  * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
- * comments and any preceeding and trailing content.
+ * comments and any preceding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html
diff --git a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
index 8f9509349c2a5..f7f9686daee33 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/all-input-control.js
@@ -16,6 +16,8 @@ export default function AllInputControl( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const allValue = getAllRawValue( values );
 	const hasValues = isValuesDefined( values );
@@ -35,6 +37,8 @@ export default function AllInputControl( {
 			isMixed={ isMixed }
 			type={ type }
 			minimumCustomValue={ minimumCustomValue }
+			onMouseOver={ onMouseOver }
+			onMouseOut={ onMouseOut }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
index 563b595018696..3551e20ede759 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/axial-input-controls.js
@@ -13,6 +13,8 @@ export default function AxialInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const createHandleOnChange = ( side ) => ( next ) => {
 		if ( ! onChange ) {
@@ -54,6 +56,8 @@ export default function AxialInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/index.js b/packages/block-editor/src/components/spacing-sizes-control/index.js
index 7b016e7a08ee7..fb4ce2176b759 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/index.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/index.js
@@ -29,6 +29,8 @@ export default function SpacingSizesControl( {
 	splitOnAxis = false,
 	useSelect,
 	minimumCustomValue = 0,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const spacingSizes = [
 		{ name: 0, slug: '0', size: 0 },
@@ -70,6 +72,8 @@ export default function SpacingSizesControl( {
 		useSelect,
 		type: label,
 		minimumCustomValue,
+		onMouseOver,
+		onMouseOut,
 	};
 
 	return (
diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
index b8b71c22310b5..412dbad2030c9 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/input-controls.js
@@ -11,6 +11,8 @@ export default function BoxInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
@@ -38,6 +40,8 @@ export default function BoxInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
index a6262873af553..0e155c421d6ab 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -51,6 +51,8 @@ export default function SpacingInputControl( {
 	isMixed = false,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
 	value = getPresetValueFromCustomValue( value, spacingSizes );
@@ -218,6 +220,8 @@ export default function SpacingInputControl( {
 			{ showCustomValueControl && (
 				<>
 					<UnitControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -229,11 +233,12 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
-						style={ { gridColumn: '1' } }
 						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						value={ customRangeValue }
 						min={ 0 }
 						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
@@ -248,6 +253,8 @@ export default function SpacingInputControl( {
 			) }
 			{ showRangeControl && ! showCustomValueControl && (
 				<RangeControl
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					className="components-spacing-sizes-control__range-control"
 					value={ currentValue }
 					onChange={ ( newSize ) =>
@@ -293,6 +300,8 @@ export default function SpacingInputControl( {
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
 					size={ '__unstable-large' }
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 				/>
 			) }
 		</>
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 02731920c5e6f..4b60a744bfd90 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/style.scss
+++ b/packages/block-editor/src/components/spacing-sizes-control/style.scss
@@ -91,6 +91,7 @@
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
 		margin-top: 8px;
+		grid-column: 1;
 	}
 
 	.components-range-control {
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 1b33d471b1d73..3858f3983103a 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -543,7 +543,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" focusOnMount={ false }>
+				<Popover placement="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index ffaf5d4615783..11ee3e95f4d66 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -272,6 +272,7 @@ export function BorderPanel( props ) {
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
+						size="__unstable-large"
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 3eded40fc4a0a..171080934213d 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
+import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
 
@@ -44,6 +44,13 @@ export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
+function useVisualizerMouseOver() {
+	const [ isMouseOver, setIsMouseOver ] = useState( false );
+	const onMouseOver = () => setIsMouseOver( true );
+	const onMouseOut = () => setIsMouseOver( false );
+	return { isMouseOver, onMouseOver, onMouseOut };
+}
+
 /**
  * Inspector controls for dimensions support.
  *
@@ -58,6 +65,8 @@ export function DimensionsPanel( props ) {
 	const isDisabled = useIsDimensionsDisabled( props );
 	const isSupported = hasDimensionsSupport( props.name );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const paddingMouseOver = useVisualizerMouseOver();
+	const marginMouseOver = useVisualizerMouseOver();
 
 	if ( isDisabled || ! isSupported ) {
 		return null;
@@ -96,7 +105,11 @@ export function DimensionsPanel( props ) {
 						isShownByDefault={ defaultSpacingControls?.padding }
 						panelId={ props.clientId }
 					>
-						<PaddingEdit { ...props } />
+						<PaddingEdit
+							onMouseOver={ paddingMouseOver.onMouseOver }
+							onMouseOut={ paddingMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isMarginDisabled && (
@@ -109,7 +122,11 @@ export function DimensionsPanel( props ) {
 						isShownByDefault={ defaultSpacingControls?.margin }
 						panelId={ props.clientId }
 					>
-						<MarginEdit { ...props } />
+						<MarginEdit
+							onMouseOver={ marginMouseOver.onMouseOver }
+							onMouseOut={ marginMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isGapDisabled && (
@@ -126,8 +143,18 @@ export function DimensionsPanel( props ) {
 					</ToolsPanelItem>
 				) }
 			</InspectorControls>
-			{ ! isPaddingDisabled && <PaddingVisualizer { ...props } /> }
-			{ ! isMarginDisabled && <MarginVisualizer { ...props } /> }
+			{ ! isPaddingDisabled && (
+				<PaddingVisualizer
+					forceShow={ paddingMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
+			{ ! isMarginDisabled && (
+				<MarginVisualizer
+					forceShow={ marginMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
index f8fa94538f53a..6cb950afc4564 100644
--- a/packages/block-editor/src/hooks/font-size.js
+++ b/packages/block-editor/src/hooks/font-size.js
@@ -150,6 +150,7 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			withSlider
 			size="__unstable-large"
 			__nextHasNoMarginBottom
 		/>
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index 73d655c57c2ac..eeea8f3df2c8c 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -9,11 +9,7 @@ import { kebabCase } from 'lodash';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import {
-	getBlockDefaultClassName,
-	getBlockSupport,
-	hasBlockSupport,
-} from '@wordpress/blocks';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -366,9 +362,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const layoutClasses = hasLayoutBlockSupport
 			? useLayoutClasses( block )
 			: null;
-		const selector = `.${ getBlockDefaultClassName(
-			name
-		) }.wp-container-${ id }`;
+		// Higher specificity to override defaults from theme.json.
+		const selector = `.wp-container-${ id }.wp-container-${ id }`;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
@@ -413,7 +408,10 @@ export const withLayoutStyles = createHigherOrderComponent(
 						/>,
 						element
 					) }
-				<BlockListBlock { ...props } className={ className } />
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={ className }
+				/>
 			</>
 		);
 	}
diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
index 0e60717486d2b..d046685a23323 100644
--- a/packages/block-editor/src/hooks/margin.js
+++ b/packages/block-editor/src/hooks/margin.js
@@ -29,7 +29,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
 import SpacingSizesControl from '../components/spacing-sizes-control';
-import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
 /**
  * Determines if there is margin support.
@@ -101,6 +101,8 @@ export function MarginEdit( props ) {
 		name: blockName,
 		attributes: { style },
 		setAttributes,
+		onMouseOver,
+		onMouseOut,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -148,6 +150,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 				{ spacingSizes?.length > 0 && (
@@ -159,6 +163,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ false }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 			</>
@@ -167,22 +173,21 @@ export function MarginEdit( props ) {
 	} );
 }
 
-export function MarginVisualizer( { clientId, attributes } ) {
+export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 
 	const style = useMemo( () => {
 		const marginTop = margin?.top
-			? getCustomValueFromPreset( margin?.top, spacingSizes )
+			? getSpacingPresetCssVar( margin?.top )
 			: 0;
 		const marginRight = margin?.right
-			? getCustomValueFromPreset( margin?.right, spacingSizes )
+			? getSpacingPresetCssVar( margin?.right )
 			: 0;
 		const marginBottom = margin?.bottom
-			? getCustomValueFromPreset( margin?.bottom, spacingSizes )
+			? getSpacingPresetCssVar( margin?.bottom )
 			: 0;
 		const marginLeft = margin?.left
-			? getCustomValueFromPreset( margin?.left, spacingSizes )
+			? getSpacingPresetCssVar( margin?.left )
 			: 0;
 
 		return {
@@ -190,10 +195,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0,
-			right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0,
-			bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0,
-			left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0,
+			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );
 
@@ -208,7 +213,7 @@ export function MarginVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( margin, valueRef.current ) ) {
+		if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = margin;
 
@@ -220,9 +225,9 @@ export function MarginVisualizer( { clientId, attributes } ) {
 		}
 
 		return () => clearTimer();
-	}, [ margin ] );
+	}, [ margin, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
index 46015b1e16463..007bc799f9bf8 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -29,10 +29,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
 import SpacingSizesControl from '../components/spacing-sizes-control';
-import {
-	getSpacingPresetCssVar,
-	isValueSpacingPreset,
-} from '../components/spacing-sizes-control/utils';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 /**
  * Determines if there is padding support.
  *
@@ -103,6 +100,8 @@ export function PaddingEdit( props ) {
 		name: blockName,
 		attributes: { style },
 		setAttributes,
+		onMouseOver,
+		onMouseOut,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -150,6 +149,8 @@ export function PaddingEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 				{ spacingSizes?.length > 0 && (
@@ -161,6 +162,8 @@ export function PaddingEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 			</>
@@ -169,22 +172,22 @@ export function PaddingEdit( props ) {
 	} );
 }
 
-export function PaddingVisualizer( { clientId, attributes } ) {
+export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 	const padding = attributes?.style?.spacing?.padding;
 	const style = useMemo( () => {
 		return {
-			borderTopWidth: isValueSpacingPreset( padding?.top )
+			borderTopWidth: padding?.top
 				? getSpacingPresetCssVar( padding?.top )
-				: padding?.top,
-			borderRightWidth: isValueSpacingPreset( padding?.right )
+				: 0,
+			borderRightWidth: padding?.right
 				? getSpacingPresetCssVar( padding?.right )
-				: padding?.right,
-			borderBottomWidth: isValueSpacingPreset( padding?.bottom )
+				: 0,
+			borderBottomWidth: padding?.bottom
 				? getSpacingPresetCssVar( padding?.bottom )
-				: padding?.bottom,
-			borderLeftWidth: isValueSpacingPreset( padding?.left )
+				: 0,
+			borderLeftWidth: padding?.left
 				? getSpacingPresetCssVar( padding?.left )
-				: padding?.left,
+				: 0,
 		};
 	}, [ padding ] );
 
@@ -199,7 +202,7 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( padding, valueRef.current ) ) {
+		if ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = padding;
 
@@ -211,9 +214,9 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 		}
 
 		return () => clearTimer();
-	}, [ padding ] );
+	}, [ padding, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/hooks/test/align.js b/packages/block-editor/src/hooks/test/align.js
index 3677b495910c4..d6a9b3aba65ce 100644
--- a/packages/block-editor/src/hooks/test/align.js
+++ b/packages/block-editor/src/hooks/test/align.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import renderer, { act } from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,13 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockControls from '../../components/block-controls';
+import BlockEdit from '../../components/block-edit';
 import BlockEditorProvider from '../../components/provider';
 import {
 	getValidAlignments,
@@ -31,6 +34,7 @@ describe( 'align', () => {
 		save: noop,
 		category: 'text',
 		title: 'block title',
+		edit: ( { children } ) => <>{ children }</>,
 	};
 
 	afterEach( () => {
@@ -154,6 +158,12 @@ describe( 'align', () => {
 	} );
 
 	describe( 'withToolbarControls', () => {
+		const componentProps = {
+			name: 'core/foo',
+			attributes: {},
+			isSelected: true,
+		};
+
 		it( 'should do nothing if no valid alignments', () => {
 			registerBlockType( 'core/foo', blockSettings );
 
@@ -161,15 +171,21 @@ describe( 'align', () => {
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
-			const wrapper = renderer.create(
-				<EnhancedComponent
-					name="core/foo"
-					attributes={ {} }
-					isSelected
-				/>
+			render(
+				<SlotFillProvider>
+					<BlockEdit { ...componentProps }>
+						<EnhancedComponent { ...componentProps } />
+					</BlockEdit>
+					<BlockControls.Slot group="block" />
+				</SlotFillProvider>
 			);
-			// When there's only one child, `rendered` in the tree is an object not an array.
-			expect( wrapper.toTree().rendered ).toBeInstanceOf( Object );
+
+			expect(
+				screen.queryByRole( 'button', {
+					name: 'Align',
+					expanded: false,
+				} )
+			).not.toBeInTheDocument();
 		} );
 
 		it( 'should render toolbar controls if valid alignments', () => {
@@ -185,14 +201,21 @@ describe( 'align', () => {
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
-			const wrapper = renderer.create(
-				<EnhancedComponent
-					name="core/foo"
-					attributes={ {} }
-					isSelected
-				/>
+			render(
+				<SlotFillProvider>
+					<BlockEdit { ...componentProps }>
+						<EnhancedComponent { ...componentProps } />
+					</BlockEdit>
+					<BlockControls.Slot group="block" />
+				</SlotFillProvider>
 			);
-			expect( wrapper.toTree().rendered ).toHaveLength( 2 );
+
+			expect(
+				screen.getAllByRole( 'button', {
+					name: 'Align',
+					expanded: false,
+				} )
+			).toHaveLength( 2 );
 		} );
 	} );
 
@@ -207,28 +230,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: true, supportsLayout: false } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							attributes={ {
-								align: 'wide',
-							} }
-							name="core/foo"
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {
-				'data-align': 'wide',
-			} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: true, supportsLayout: false } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						attributes={ {
+							align: 'wide',
+						} }
+						name="core/foo"
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 
 		it( 'should not render wide/full wrapper props if wide controls are not enabled', () => {
@@ -241,26 +263,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: false } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							name="core/foo"
-							attributes={ {
-								align: 'wide',
-							} }
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: false } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						name="core/foo"
+						attributes={ {
+							align: 'wide',
+						} }
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 
 		it( 'should not render invalid align', () => {
@@ -273,26 +296,27 @@ describe( 'align', () => {
 			} );
 
 			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<div { ...wrapperProps } />
+				<button { ...wrapperProps } />
 			) );
 
-			let wrapper;
-			act( () => {
-				wrapper = renderer.create(
-					<BlockEditorProvider
-						settings={ { alignWide: true } }
-						value={ [] }
-					>
-						<EnhancedComponent
-							name="core/foo"
-							attributes={ {
-								align: 'wide',
-							} }
-						/>
-					</BlockEditorProvider>
-				);
-			} );
-			expect( wrapper.root.findByType( 'div' ).props ).toEqual( {} );
+			render(
+				<BlockEditorProvider
+					settings={ { alignWide: true } }
+					value={ [] }
+				>
+					<EnhancedComponent
+						name="core/foo"
+						attributes={ {
+							align: 'wide',
+						} }
+					/>
+				</BlockEditorProvider>
+			);
+
+			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+				'data-align',
+				'wide'
+			);
 		} );
 	} );
 
diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js
index 24cb2fa851bc4..f8feba34fabec 100644
--- a/packages/block-editor/src/hooks/utils.js
+++ b/packages/block-editor/src/hooks/utils.js
@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { pickBy, isEmpty, mapValues, get, setWith, clone } from 'lodash';
+import { isEmpty, mapValues, get, setWith, clone } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
 
-const identity = ( x ) => x;
-
 /**
  * Removed falsy values from nested object.
  *
@@ -24,9 +22,10 @@ export const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
index 935f2cb1d36c5..5e3b7eab405d8 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -116,7 +116,6 @@ export default {
 					) }
 				</p>
 				<ToggleGroupControl
-					__experimentalIsBorderless
 					label={ __( 'Justification' ) }
 					value={ justifyContent }
 					onChange={ onJustificationChange }
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 025da9fefe846..57dbf1005d528 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -257,7 +257,7 @@ function FlexLayoutJustifyContentControl( {
 				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
-					isAlternate: true,
+					variant: 'toolbar',
 				} }
 			/>
 		);
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index 971525c94dfd6..0b8da600e6454 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1712,6 +1712,10 @@ export function setBlockVisibility( updates ) {
 /**
  * Action that sets whether a block is being temporaritly edited as blocks.
  *
+ * DO-NOT-USE in production.
+ * This action is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
  * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
  */
 export function __unstableSetTemporarilyEditingAsBlocks(
diff --git a/packages/block-editor/src/store/array.js b/packages/block-editor/src/store/array.js
index 894b942970d54..ae8373d50dfca 100644
--- a/packages/block-editor/src/store/array.js
+++ b/packages/block-editor/src/store/array.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * Insert one or multiple elements into a given position of an array.
  *
@@ -15,7 +10,7 @@ import { castArray } from 'lodash';
 export function insertAt( array, elements, index ) {
 	return [
 		...array.slice( 0, index ),
-		...castArray( elements ),
+		...( Array.isArray( elements ) ? elements : [ elements ] ),
 		...array.slice( index ),
 	];
 }
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 837cee4427708..b97e677fb4694 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, map, reduce, some, find, filter, orderBy } from 'lodash';
+import { map, reduce, find, filter, orderBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -319,12 +319,13 @@ export const __experimentalGetGlobalBlocksByName = createSelector(
  */
 export const getBlocksByClientId = createSelector(
 	( state, clientIds ) =>
-		map( castArray( clientIds ), ( clientId ) =>
-			getBlock( state, clientId )
+		map(
+			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
+			( clientId ) => getBlock( state, clientId )
 		),
 	( state, clientIds ) =>
 		map(
-			castArray( clientIds ),
+			Array.isArray( clientIds ) ? clientIds : [ clientIds ],
 			( clientId ) => state.blocks.tree[ clientId ]
 		)
 );
@@ -694,10 +695,7 @@ export const getSelectedBlockClientIds = createSelector(
 	( state ) => {
 		const { selectionStart, selectionEnd } = state.selection;
 
-		if (
-			selectionStart.clientId === undefined ||
-			selectionEnd.clientId === undefined
-		) {
+		if ( ! selectionStart.clientId || ! selectionEnd.clientId ) {
 			return EMPTY_ARRAY;
 		}
 
@@ -712,6 +710,7 @@ export const getSelectedBlockClientIds = createSelector(
 			state,
 			selectionStart.clientId
 		);
+
 		if ( rootClientId === null ) {
 			return EMPTY_ARRAY;
 		}
@@ -1183,8 +1182,7 @@ export function isBlockSelected( state, clientId ) {
  * @return {boolean} Whether the block as an inner block selected
  */
 export function hasSelectedInnerBlock( state, clientId, deep = false ) {
-	return some(
-		getBlockOrder( state, clientId ),
+	return getBlockOrder( state, clientId ).some(
 		( innerClientId ) =>
 			isBlockSelected( state, innerClientId ) ||
 			isBlockMultiSelected( state, innerClientId ) ||
@@ -1332,7 +1330,7 @@ export function isAncestorBeingDragged( state, clientId ) {
 	}
 
 	const parents = getBlockParents( state, clientId );
-	return some( parents, ( parentClientId ) =>
+	return parents.some( ( parentClientId ) =>
 		isBlockBeingDragged( state, parentClientId )
 	);
 }
@@ -1531,7 +1529,7 @@ const canInsertBlockTypeUnmemoized = (
 			...getBlockParents( state, rootClientId ),
 		];
 
-		hasBlockAllowedAncestor = some( ancestors, ( ancestorClientId ) =>
+		hasBlockAllowedAncestor = ancestors.some( ( ancestorClientId ) =>
 			checkAllowList(
 				blockAllowedAncestorBlocks,
 				getBlockName( state, ancestorClientId )
@@ -1845,13 +1843,10 @@ const buildBlockTypeItem =
 
 		let isDisabled = false;
 		if ( ! hasBlockSupport( blockType.name, 'multiple', true ) ) {
-			isDisabled = some(
-				getBlocksByClientId(
-					state,
-					getClientIdsWithDescendants( state )
-				),
-				{ name: blockType.name }
-			);
+			isDisabled = getBlocksByClientId(
+				state,
+				getClientIdsWithDescendants( state )
+			).some( ( { name } ) => name === blockType.name );
 		}
 
 		const { time, count = 0 } = getInsertUsage( state, id ) || {};
@@ -2065,7 +2060,7 @@ export const getInserterItems = createSelector(
  */
 export const getBlockTransformItems = createSelector(
 	( state, blocks, rootClientId = null ) => {
-		const normalizedBlocks = castArray( blocks );
+		const normalizedBlocks = Array.isArray( blocks ) ? blocks : [ blocks ];
 		const [ sourceBlock ] = normalizedBlocks;
 		const buildBlockTypeTransformItem = buildBlockTypeItem( state, {
 			buildScope: 'transform',
@@ -2129,7 +2124,7 @@ export const getBlockTransformItems = createSelector(
  */
 export const hasInserterItems = createSelector(
 	( state, rootClientId = null ) => {
-		const hasBlockType = some( getBlockTypes(), ( blockType ) =>
+		const hasBlockType = getBlockTypes().some( ( blockType ) =>
 			canIncludeBlockTypeInInserter( state, blockType, rootClientId )
 		);
 		if ( hasBlockType ) {
@@ -2690,6 +2685,11 @@ export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => [ state.blockVisibility ]
 );
 
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ */
 export const __unstableGetContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
@@ -2705,6 +2705,13 @@ export const __unstableGetContentLockingParent = createSelector(
 	( state ) => [ state.blocks.parents, state.blockListSettings ]
 );
 
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ *
+ * @param {Object} state Global application state.
+ */
 export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 	return state.temporarilyEditingAsBlocks;
 }
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 129eab5cce7b9..2785745ff5c75 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -3995,7 +3995,7 @@ describe( 'selectors', () => {
 } );
 
 describe( 'getInserterItems with core blocks prioritization', () => {
-	// This test is in a seperate `describe` because all other tests register
+	// This test is in a separate `describe` because all other tests register
 	// some test `core` blocks and interfere with the purpose of the specific test.
 	// This tests the functionality to ensure core blocks are prioritized in the
 	// returned results, because third party blocks can be registered earlier than
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 4482782e86185..3df2838dbf06b 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -60,6 +60,7 @@
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
index 68e9cc88117af..47b2f36b2fb34 100644
--- a/packages/block-library/src/audio/edit.js
+++ b/packages/block-library/src/audio/edit.js
@@ -13,6 +13,7 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -25,12 +26,13 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon } from '@wordpress/icons';
+import { audio as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -48,6 +50,8 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -69,6 +73,30 @@ function AudioEdit( {
 		}
 	}, [] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -106,12 +134,20 @@ function AudioEdit( {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error and we should continue in the editing state
 			// previous attributes should be removed because they may be temporary blob urls.
-			setAttributes( { src: undefined, id: undefined } );
+			setAttributes( {
+				src: undefined,
+				id: undefined,
+				caption: undefined,
+			} );
 			return;
 		}
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
-		setAttributes( { src: media.url, id: media.id } );
+		setAttributes( {
+			src: media.url,
+			id: media.id,
+			caption: media.caption,
+		} );
 	}
 
 	const classes = classnames( className, {
@@ -140,6 +176,23 @@ function AudioEdit( {
 
 	return (
 		<>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
@@ -195,26 +248,28 @@ function AudioEdit( {
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Audio caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							ref={ captionRef }
+							aria-label={ __( 'Audio caption text' ) }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 55b095f9e848b..3eb93486a7e08 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -221,7 +221,7 @@ function ButtonEdit( props ) {
 			</BlockControls>
 			{ isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
-					position="bottom center"
+					placement="bottom"
 					onClose={ () => {
 						setIsEditingURL( false );
 						richTextRef.current?.focus();
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index cc553625f8ea3..b4fa27709696e 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -113,4 +113,6 @@ $blocks-block__margin: 0.5em;
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
 	background-color: transparent;
+	// background-image is required to overwrite a gradient background
+	background-image: none;
 }
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index 9ce2abab8f3f2..32e68fea98cb9 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -139,7 +139,7 @@ export default function ButtonsEdit( {
 						}
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 						} }
 					/>
 				</BlockControls>
diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 1a8dd4da1ada3..1c318a8c21311 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -9,9 +9,13 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"reusable": false,
-		"html": false,
 		"align": true,
+		"html": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/comment-template/style.scss b/packages/block-library/src/comment-template/style.scss
index 5ef76b898f58f..26dae72f794d5 100644
--- a/packages/block-library/src/comment-template/style.scss
+++ b/packages/block-library/src/comment-template/style.scss
@@ -1,4 +1,6 @@
 .wp-block-comment-template {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 8c501b23f5224..cfcf012badd62 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -3,7 +3,6 @@
  */
 import { Fragment, useMemo } from '@wordpress/element';
 import {
-	BaseControl,
 	Button,
 	ExternalLink,
 	FocalPointPicker,
@@ -73,18 +72,17 @@ function CoverHeightInput( {
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				style={ { maxWidth: 80 } }
-				units={ units }
-				value={ computedValue }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ __( 'Minimum height of cover' ) }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ min }
+			onChange={ handleOnChange }
+			onUnitChange={ onUnitChange }
+			__unstableInputWidth={ '80px' }
+			units={ units }
+			value={ computedValue }
+		/>
 	);
 }
 export default function CoverInspectorControls( {
diff --git a/packages/block-library/src/embed/deprecated.js b/packages/block-library/src/embed/deprecated.js
index 7673943c70e6a..afa691ecb64e2 100644
--- a/packages/block-library/src/embed/deprecated.js
+++ b/packages/block-library/src/embed/deprecated.js
@@ -11,36 +11,63 @@ import metadata from './block.json';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const { attributes: blockAttributes } = metadata;
 
-const deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes: { url, caption, type, providerNameSlug } } ) {
-			if ( ! url ) {
-				return null;
-			}
-
-			const embedClassName = classnames( 'wp-block-embed', {
-				[ `is-type-${ type }` ]: type,
-				[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
-			} );
-
-			return (
-				<figure className={ embedClassName }>
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the embed figcaption element.
+const v2 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const { url, caption, type, providerNameSlug } = attributes;
+
+		if ( ! url ) {
+			return null;
+		}
+
+		const className = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure { ...useBlockProps.save( { className } ) }>
+				<div className="wp-block-embed__wrapper">
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+				</div>
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes: { url, caption, type, providerNameSlug } } ) {
+		if ( ! url ) {
+			return null;
+		}
+
+		const embedClassName = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure className={ embedClassName }>
+				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-];
+};
+
+const deprecated = [ v2, v1 ];
 
 export default deprecated;
diff --git a/packages/block-library/src/file/deprecated.js b/packages/block-library/src/file/deprecated.js
index d0aed2a3868e8..ba053cb05019d 100644
--- a/packages/block-library/src/file/deprecated.js
+++ b/packages/block-library/src/file/deprecated.js
@@ -14,7 +14,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 
 // Version of the file block without PR#43050 removing the translated aria-label.
-const v2 = {
+const v3 = {
 	attributes: {
 		id: {
 			type: 'number',
@@ -143,6 +143,134 @@ const v2 = {
 	},
 };
 
+// In #41239 the button was made an element button which added a `wp-element-button` classname
+// to the download link element.
+const v2 = {
+	attributes: {
+		id: {
+			type: 'number',
+		},
+		href: {
+			type: 'string',
+		},
+		fileId: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'id',
+		},
+		fileName: {
+			type: 'string',
+			source: 'html',
+			selector: 'a:not([download])',
+		},
+		textLinkHref: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'href',
+		},
+		textLinkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a:not([download])',
+			attribute: 'target',
+		},
+		showDownloadButton: {
+			type: 'boolean',
+			default: true,
+		},
+		downloadButtonText: {
+			type: 'string',
+			source: 'html',
+			selector: 'a[download]',
+		},
+		displayPreview: {
+			type: 'boolean',
+		},
+		previewHeight: {
+			type: 'number',
+			default: 600,
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+	},
+	save( { attributes } ) {
+		const {
+			href,
+			fileId,
+			fileName,
+			textLinkHref,
+			textLinkTarget,
+			showDownloadButton,
+			downloadButtonText,
+			displayPreview,
+			previewHeight,
+		} = attributes;
+
+		const pdfEmbedLabel = RichText.isEmpty( fileName )
+			? __( 'PDF embed' )
+			: sprintf(
+					/* translators: %s: filename. */
+					__( 'Embed of %s.' ),
+					fileName
+			  );
+
+		const hasFilename = ! RichText.isEmpty( fileName );
+
+		// Only output an `aria-describedby` when the element it's referring to is
+		// actually rendered.
+		const describedById = hasFilename ? fileId : undefined;
+
+		return (
+			href && (
+				<div { ...useBlockProps.save() }>
+					{ displayPreview && (
+						<>
+							<object
+								className="wp-block-file__embed"
+								data={ href }
+								type="application/pdf"
+								style={ {
+									width: '100%',
+									height: `${ previewHeight }px`,
+								} }
+								aria-label={ pdfEmbedLabel }
+							/>
+						</>
+					) }
+					{ hasFilename && (
+						<a
+							id={ describedById }
+							href={ textLinkHref }
+							target={ textLinkTarget }
+							rel={
+								textLinkTarget
+									? 'noreferrer noopener'
+									: undefined
+							}
+						>
+							<RichText.Content value={ fileName } />
+						</a>
+					) }
+					{ showDownloadButton && (
+						<a
+							href={ href }
+							className="wp-block-file__button"
+							download={ true }
+							aria-describedby={ describedById }
+						>
+							<RichText.Content value={ downloadButtonText } />
+						</a>
+					) }
+				</div>
+			)
+		);
+	},
+};
+
 // Version of the file block without PR#28062 accessibility fix.
 const v1 = {
 	attributes: {
@@ -255,6 +383,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v2, v1 ];
+const deprecated = [ v3, v2, v1 ];
 
 export default deprecated;
diff --git a/packages/block-library/src/file/transforms.js b/packages/block-library/src/file/transforms.js
index 3f96667b14745..35dd9807daddd 100644
--- a/packages/block-library/src/file/transforms.js
+++ b/packages/block-library/src/file/transforms.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -92,7 +87,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'audio' );
+				return !! media && media.mime_type.includes( 'audio' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/audio', {
@@ -112,7 +107,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'video' );
+				return !! media && media.mime_type.includes( 'video' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/video', {
@@ -132,7 +127,7 @@ const transforms = {
 				}
 				const { getMedia } = select( coreStore );
 				const media = getMedia( id );
-				return !! media && includes( media.mime_type, 'image' );
+				return !! media && media.mime_type.includes( 'image' );
 			},
 			transform: ( attributes ) => {
 				return createBlock( 'core/image', {
diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js
index a2843ecf6e3b4..313b700d6b368 100644
--- a/packages/block-library/src/gallery/deprecated.js
+++ b/packages/block-library/src/gallery/deprecated.js
@@ -2,12 +2,16 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, some } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+} from '@wordpress/block-editor';
 
 import { createBlock } from '@wordpress/blocks';
 
@@ -127,6 +131,127 @@ export function getImageBlock( image, sizeSlug, linkTo ) {
 	} );
 }
 
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the gallery figcaption element.
+const v7 = {
+	attributes: {
+		images: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: '.blocks-gallery-item',
+			query: {
+				url: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'src',
+				},
+				fullUrl: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-full-url',
+				},
+				link: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-link',
+				},
+				alt: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'alt',
+					default: '',
+				},
+				id: {
+					type: 'string',
+					source: 'attribute',
+					selector: 'img',
+					attribute: 'data-id',
+				},
+				caption: {
+					type: 'string',
+					source: 'html',
+					selector: '.blocks-gallery-item__caption',
+				},
+			},
+		},
+		ids: {
+			type: 'array',
+			items: {
+				type: 'number',
+			},
+			default: [],
+		},
+		shortCodeTransforms: {
+			type: 'array',
+			default: [],
+			items: {
+				type: 'object',
+			},
+		},
+		columns: {
+			type: 'number',
+			minimum: 1,
+			maximum: 8,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: '.blocks-gallery-caption',
+		},
+		imageCrop: {
+			type: 'boolean',
+			default: true,
+		},
+		fixedHeight: {
+			type: 'boolean',
+			default: true,
+		},
+		linkTarget: {
+			type: 'string',
+		},
+		linkTo: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+			default: 'large',
+		},
+		allowResize: {
+			type: 'boolean',
+			default: false,
+		},
+	},
+	save( { attributes } ) {
+		const { caption, columns, imageCrop } = attributes;
+
+		const className = classnames( 'has-nested-images', {
+			[ `columns-${ columns }` ]: columns !== undefined,
+			[ `columns-default` ]: columns === undefined,
+			'is-cropped': imageCrop,
+		} );
+		const blockProps = useBlockProps.save( { className } );
+		const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+		return (
+			<figure { ...innerBlocksProps }>
+				{ innerBlocksProps.children }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content
+						tagName="figcaption"
+						className="blocks-gallery-caption"
+						value={ caption }
+					/>
+				) }
+			</figure>
+		);
+	},
+};
+
 const v6 = {
 	attributes: {
 		images: {
@@ -803,7 +928,7 @@ const v2 = {
 			images.length > 0 &&
 			( ( ! ids && images ) ||
 				( ids && images && ids.length !== images.length ) ||
-				some( images, ( id, index ) => {
+				images.some( ( id, index ) => {
 					if ( ! id && ids[ index ] !== null ) {
 						return true;
 					}
@@ -984,4 +1109,4 @@ const v1 = {
 	},
 };
 
-export default [ v6, v5, v4, v3, v2, v1 ];
+export default [ v7, v6, v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 9a551b6e0d9f7..e6176cc8a7256 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -26,6 +26,7 @@ export const Gallery = ( props ) => {
 		mediaPlaceholder,
 		insertBlocksAfter,
 		blockProps,
+		__unstableLayoutClassNames: layoutClassNames,
 	} = props;
 
 	const { align, columns, caption, imageCrop } = attributes;
@@ -42,6 +43,7 @@ export const Gallery = ( props ) => {
 			{ ...innerBlocksProps }
 			className={ classnames(
 				blockProps.className,
+				layoutClassNames,
 				'blocks-gallery-grid',
 				{
 					[ `align${ align }` ]: align,
diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index 7bc5e2821b796..ff1fb8ef42d89 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -76,13 +76,10 @@ function block_core_gallery_render( $attributes, $content ) {
 		}
 	}
 
-	$class   = wp_unique_id( 'wp-block-gallery-' );
-	$content = preg_replace(
-		'/' . preg_quote( 'class="', '/' ) . '/',
-		'class="' . $class . ' ',
-		$content,
-		1
-	);
+	$unique_gallery_classname = wp_unique_id( 'wp-block-gallery-' );
+	$processed_content        = new WP_HTML_Tag_Processor( $content );
+	$processed_content->next_tag();
+	$processed_content->add_class( $unique_gallery_classname );
 
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.
@@ -102,10 +99,22 @@ function block_core_gallery_render( $attributes, $content ) {
 	}
 
 	// Set the CSS variable to the column value, and the `gap` property to the combined gap value.
-	$style = '.wp-block-gallery.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_column . '; gap: ' . $gap_value . '}';
+	$gallery_styles   = array();
+	$gallery_styles[] = array(
+		'selector'     => ".wp-block-gallery.{$unique_gallery_classname}",
+		'declarations' => array(
+			'--wp--style--unstable-gallery-gap' => $gap_column,
+			'gap'                               => $gap_value,
+		),
+	);
 
-	wp_enqueue_block_support_styles( $style, 11 );
-	return $content;
+	gutenberg_style_engine_get_stylesheet_from_css_rules(
+		$gallery_styles,
+		array(
+			'context' => 'block-supports',
+		)
+	);
+	return (string) $processed_content;
 }
 /**
  * Registers the `core/gallery` block on server.
diff --git a/packages/block-library/src/gallery/use-image-sizes.js b/packages/block-library/src/gallery/use-image-sizes.js
index 877bacb67dd13..84c7ab59749d9 100644
--- a/packages/block-library/src/gallery/use-image-sizes.js
+++ b/packages/block-library/src/gallery/use-image-sizes.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, some } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -57,9 +57,10 @@ export default function useImageSizes( images, isSelected, getSettings ) {
 				};
 			}, {} );
 		}
+		const resizedImageSizes = Object.values( resizedImages );
 		return imageSizes
 			.filter( ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			)
 			.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	}
diff --git a/packages/block-library/src/gallery/v1/edit.js b/packages/block-library/src/gallery/v1/edit.js
index e6619baa945c6..7f3852903aa23 100644
--- a/packages/block-library/src/gallery/v1/edit.js
+++ b/packages/block-library/src/gallery/v1/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, get, isEmpty, map, reduce, some } from 'lodash';
+import { filter, find, get, isEmpty, map, reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -302,9 +302,10 @@ function GalleryEdit( props ) {
 	}
 
 	function getImagesSizeOptions() {
+		const resizedImageSizes = Object.values( resizedImages );
 		return map(
 			filter( imageSizes, ( { slug } ) =>
-				some( resizedImages, ( sizes ) => sizes[ slug ] )
+				resizedImageSizes.some( ( sizes ) => sizes[ slug ] )
 			),
 			( { name, slug } ) => ( { value: slug, label: name } )
 		);
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 9d43c4339ba1f..efe0d0ede9ebc 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -35,7 +35,12 @@ const htmlElementMessages = {
 	),
 };
 
-function GroupEdit( { attributes, setAttributes, clientId } ) {
+function GroupEdit( {
+	attributes,
+	setAttributes,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -55,7 +60,9 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: ! layoutSupportEnabled ? layoutClassNames : null,
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
@@ -67,6 +74,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
 			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
 
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index c06abb7eaf4fc..8a9881fa95c71 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -878,7 +878,7 @@ export class ImageEdit extends Component {
 				<BlockCaption
 					clientId={ this.props.clientId }
 					isSelected={ this.state.isCaptionSelected }
-					accessible
+					accessible={ ! this.state.isCaptionSelected }
 					accessibilityLabelCreator={ this.accessibilityLabelCreator }
 					onFocus={ this.onFocusCaption }
 					onBlur={ this.props.onBlur } // Always assign onBlur as props.
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 12e7f6dd96d2f..7245ce232c64b 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, filter, isEmpty, map, pick, includes } from 'lodash';
+import { get, filter, isEmpty, map, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,13 @@ import {
 	__experimentalGetElementClassName,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
-import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+	useCallback,
+} from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
 import {
@@ -93,7 +99,6 @@ export default function Image( {
 		sizeSlug,
 	} = attributes;
 	const imageRef = useRef();
-	const captionRef = useRef();
 	const prevCaption = usePrevious( caption );
 	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const { allowResize = true } = context;
@@ -151,7 +156,7 @@ export default function Image( {
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
+	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const [
 		{ loadedNaturalWidth, loadedNaturalHeight },
 		setLoadedNaturalSize,
@@ -195,11 +200,14 @@ export default function Image( {
 	}, [ caption, prevCaption ] );
 
 	// Focus the caption when we click to add one.
-	useEffect( () => {
-		if ( showCaption && ! caption ) {
-			captionRef.current?.focus();
-		}
-	}, [ caption, showCaption ] );
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
 
 	// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
 	// width and height. This resolves an issue in Safari where the loaded natural
@@ -343,7 +351,11 @@ export default function Image( {
 						} }
 						icon={ captionIcon }
 						isPressed={ showCaption }
-						label={ __( 'Caption' ) }
+						label={
+							showCaption
+								? __( 'Remove caption' )
+								: __( 'Add caption' )
+						}
 					/>
 				) }
 				{ ! multiImageSelection && ! isEditingImage && (
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index cab44563248c4..3671ec555e600 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, includes, pickBy } from 'lodash';
+import { get, pickBy } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -196,7 +196,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		} );
 		// We do nothing if the category is not selected
 		// from suggestions.
-		if ( includes( allCategories, null ) ) {
+		if ( allCategories.includes( null ) ) {
 			return false;
 		}
 		setAttributes( { categories: allCategories } );
diff --git a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
index d4c034b06e813..870aeb5088f80 100644
--- a/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
+++ b/packages/block-library/src/list-item/hooks/use-outdent-list-item.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -61,7 +56,9 @@ export default function useOutdentListItem( clientId ) {
 	return [
 		canOutdent,
 		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			clientIds = castArray( clientIds );
+			if ( ! Array.isArray( clientIds ) ) {
+				clientIds = [ clientIds ];
+			}
 
 			if ( ! clientIds.length ) return;
 
diff --git a/packages/block-library/src/list/utils.js b/packages/block-library/src/list/utils.js
index 9603c1d08e0f0..a80ce456e29ab 100644
--- a/packages/block-library/src/list/utils.js
+++ b/packages/block-library/src/list/utils.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, rawHandler } from '@wordpress/blocks';
 
 export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
@@ -70,15 +70,7 @@ export function migrateToListV2( attributes ) {
 		list.setAttribute( 'type', type );
 	}
 
-	const listBlock = createListBlockFromDOMElement( list );
+	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	const { values: omittedValues, ...restAttributes } = attributes;
-
-	return [
-		{
-			...restAttributes,
-			...listBlock.attributes,
-		},
-		listBlock.innerBlocks,
-	];
+	return [ listBlock.attributes, listBlock.innerBlocks ];
 }
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index fdf72d43a60aa..1b1b530dcdcdf 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, unescape } from 'lodash';
+import escapeHtml from 'escape-html';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -262,8 +263,8 @@ export const updateNavigationLinkBlockAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escape( newLabel )
-		: originalLabel || escape( newUrlWithoutHttp );
+		? escapeHtml( newLabel )
+		: originalLabel || escapeHtml( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -846,7 +847,7 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 77030e4ec4746..0f91313289d0b 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, without } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -248,8 +248,8 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+		? escapeHtml( title )
+		: originalLabel || escapeHtml( normalizedURL );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -486,7 +486,9 @@ export default function NavigationSubmenuEdit( {
 	const innerBlocksColors = getColors( context, true );
 
 	const allowedBlocks = isAtMaxNesting
-		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		? ALLOWED_BLOCKS.filter(
+				( blockName ) => blockName !== 'core/navigation-submenu'
+		  )
 		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
@@ -631,7 +633,7 @@ export default function NavigationSubmenuEdit( {
 					}
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 8f26e1c57cc3a..918b609f92a0e 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -272,7 +272,7 @@ function Navigation( {
 			fallbackNavigationMenus?.length > 0 ||
 			classicMenus?.length !== 1
 		) {
-			return false;
+			return;
 		}
 
 		// If there's non fallback navigation menus and
@@ -481,24 +481,22 @@ function Navigation( {
 
 	// Prompt the user to publish the menu they have set as a draft
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
-	useEffect( async () => {
+	useEffect( () => {
 		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) return;
-		try {
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu?.id,
-				{
-					status: 'publish',
-				},
-				{ throwOnError: true }
-			);
-		} catch {
+		if ( ! isDraftNavigationMenu ) {
+			return;
+		}
+		editEntityRecord(
+			'postType',
+			'wp_navigation',
+			navigationMenu?.id,
+			{ status: 'publish' },
+			{ throwOnError: true }
+		).catch( () => {
 			showMenuAutoPublishDraftNotice(
 				__( 'Error occurred while publishing the navigation menu.' )
 			);
-		}
+		} );
 	}, [ isDraftNavigationMenu, navigationMenu ] );
 
 	const stylingInspectorControls = (
diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
index 892a86976412b..d656d3fb23f94 100644
--- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
@@ -172,8 +172,15 @@ export default function UnsavedInnerBlocks( {
 
 	return (
 		<>
-			<Wrapper { ...innerBlocksProps } />
-			{ isSaving && <Spinner /> }
+			{ isSaving ? (
+				<Spinner
+					className={
+						'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'
+					}
+				/>
+			) : (
+				<Wrapper { ...innerBlocksProps } />
+			) }
 		</>
 	);
 }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 1658c90fa38f1..f669b39cb6586 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -261,10 +261,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: 0;
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -567,6 +563,10 @@ body.editor-styles-wrapper
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+	margin-top: 0;
+}
+
 @keyframes fadeouthalf {
 	0% {
 		opacity: 1;
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 0a00d7a779d31..45a30c644ed65 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -359,7 +359,9 @@ button.wp-block-navigation-item__content {
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
-:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 	padding: 0.5em 1em;
 }
 
diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
index aa15f913ddfa9..71cbfa437a1f9 100644
--- a/packages/block-library/src/page-list/edit.js
+++ b/packages/block-library/src/page-list/edit.js
@@ -52,50 +52,64 @@ export default function PageListEdit( { context, clientId } ) {
 		style: { ...context.style?.color },
 	} );
 
-	return (
-		<>
-			{ allowConvertToLinks && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
-				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
-				/>
-			) }
-			{ ! hasResolvedPages && (
+	const getBlockContent = () => {
+		if ( ! hasResolvedPages ) {
+			return (
 				<div { ...blockProps }>
 					<Spinner />
 				</div>
-			) }
+			);
+		}
 
-			{ hasResolvedPages && totalPages === null && (
+		if ( totalPages === null ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'warning' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
+			);
+		}
 
-			{ totalPages === 0 && (
+		if ( totalPages === 0 ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'info' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
-			{ totalPages > 0 && (
+			);
+		}
+
+		if ( totalPages > 0 ) {
+			return (
 				<ul { ...blockProps }>
 					<PageItems
 						context={ context }
 						pagesByParentId={ pagesByParentId }
 					/>
 				</ul>
+			);
+		}
+	};
+
+	return (
+		<>
+			{ allowConvertToLinks && (
+				<BlockControls group="other">
+					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</BlockControls>
 			) }
+			{ allowConvertToLinks && isOpen && (
+				<ConvertToLinksModal
+					onClose={ closeModal }
+					clientId={ clientId }
+				/>
+			) }
+
+			{ getBlockContent() }
 		</>
 	);
 }
diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
index 150293b29c986..a30920fbbee3e 100644
--- a/packages/block-library/src/post-comments-count/block.json
+++ b/packages/block-library/src/post-comments-count/block.json
@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/post-comments-form/block.json b/packages/block-library/src/post-comments-form/block.json
index 47cc0a443baee..5ed4122d1147b 100644
--- a/packages/block-library/src/post-comments-form/block.json
+++ b/packages/block-library/src/post-comments-form/block.json
@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/post-comments-form/style.scss b/packages/block-library/src/post-comments-form/style.scss
index 4e70906063d6f..807bcff416fb0 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -1,4 +1,7 @@
 .wp-block-post-comments-form {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&[style*="font-weight"] :where(.comment-reply-title) {
 		font-weight: inherit;
 	}
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
index 3df8788ee5d76..29b4a2f8f5445 100644
--- a/packages/block-library/src/post-comments-link/block.json
+++ b/packages/block-library/src/post-comments-link/block.json
@@ -23,6 +23,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index 1949553b2540f..e190101aa0515 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -84,8 +84,8 @@ function Content( props ) {
 	);
 }
 
-function Placeholder() {
-	const blockProps = useBlockProps();
+function Placeholder( { layoutClassNames } ) {
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
 		<div { ...blockProps }>
 			<p>
@@ -118,7 +118,11 @@ function RecursionError() {
 	);
 }
 
-export default function PostContentEdit( { context, attributes } ) {
+export default function PostContentEdit( {
+	context,
+	attributes,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -132,7 +136,7 @@ export default function PostContentEdit( { context, attributes } ) {
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (
-				<Placeholder />
+				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }
 		</RecursionProvider>
 	);
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 9a9c6030b8e22..1f3ac876e4d45 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,7 +140,7 @@ const v4 = {
 			className,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -206,7 +206,7 @@ const v4 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -270,7 +270,7 @@ const v3 = {
 			figureStyle,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -345,7 +345,7 @@ const v3 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -416,7 +416,7 @@ const v2 = {
 			citation,
 			className,
 		} = attributes;
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClass, figureStyles;
 		// Is solid color style
@@ -484,7 +484,7 @@ const v2 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style = {};
 
 		if ( customMainColor ) {
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 377788d281d3d..a3db69287f8f7 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -363,7 +363,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							style={ { maxWidth: 80 } }
+							__unstableInputWidth={ '80px' }
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 20cbe4ef927d1..79e05300d6382 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { includes, pick } from 'lodash';
+import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -71,7 +71,7 @@ const SiteLogo = ( {
 } ) => {
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
+	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js
index 5c8257d11c3fd..1ce13c6eb43c4 100644
--- a/packages/block-library/src/site-tagline/edit.js
+++ b/packages/block-library/src/site-tagline/edit.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import {
 	AlignmentControl,
 	useBlockProps,
@@ -23,34 +23,43 @@ export default function SiteTaglineEdit( {
 	insertBlocksAfter,
 } ) {
 	const { textAlign } = attributes;
-	const [ siteTagline, setSiteTagline ] = useEntityProp(
-		'root',
-		'site',
-		'description'
-	);
-	const { canUserEdit, readOnlySiteTagLine } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord } = select( coreStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
+	const { canUserEdit, tagline } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
+		const canEdit = canUser( 'update', 'settings' );
+		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
+		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
+
 		return {
 			canUserEdit: canUser( 'update', 'settings' ),
-			readOnlySiteTagLine: siteData?.description,
+			tagline: canEdit
+				? settings?.description
+				: readOnlySettings?.description,
 		};
 	}, [] );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	function setTagline( newTagline ) {
+		editEntityRecord( 'root', 'site', undefined, {
+			description: newTagline,
+		} );
+	}
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-tagline__placeholder':
-				! canUserEdit && ! readOnlySiteTagLine,
+			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
 		} ),
 	} );
 	const siteTaglineContent = canUserEdit ? (
 		<RichText
 			allowedFormats={ [] }
-			onChange={ setSiteTagline }
+			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
 			tagName="p"
-			value={ siteTagline }
+			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
@@ -58,9 +67,7 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>
-			{ readOnlySiteTagLine || __( 'Site Tagline placeholder' ) }
-		</p>
+		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
 	);
 	return (
 		<>
diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js
index bbe91cea95bbb..5980dff6d8819 100644
--- a/packages/block-library/src/site-title/edit/index.js
+++ b/packages/block-library/src/site-title/edit/index.js
@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
@@ -31,21 +31,31 @@ export default function SiteTitleEdit( {
 	insertBlocksAfter,
 } ) {
 	const { level, textAlign, isLink, linkTarget } = attributes;
-	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
-	const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord } = select( coreStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
+	const { canUserEdit, title } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
+		const canEdit = canUser( 'update', 'settings' );
+		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
+		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
+
 		return {
-			canUserEdit: canUser( 'update', 'settings' ),
-			readOnlyTitle: decodeEntities( siteData?.name ),
+			canUserEdit: canEdit,
+			title: canEdit ? settings?.title : readOnlySettings?.name,
 		};
 	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	function setTitle( newTitle ) {
+		editEntityRecord( 'root', 'site', undefined, {
+			title: newTitle,
+		} );
+	}
+
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-title__placeholder':
-				! canUserEdit && ! readOnlyTitle,
+			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
 		} ),
 	} );
 	const siteTitleContent = canUserEdit ? (
@@ -71,10 +81,14 @@ export default function SiteTitleEdit( {
 					href="#site-title-pseudo-link"
 					onClick={ ( event ) => event.preventDefault() }
 				>
-					{ readOnlyTitle || __( 'Site Title placeholder' ) }
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
 				</a>
 			) : (
-				<span>{ title || readOnlyTitle }</span>
+				<span>
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
+				</span>
 			) }
 		</TagName>
 	);
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 90a3f270d738d..5f64b7dcf777c 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -16,6 +16,9 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string"
 		}
 	},
 	"usesContext": [
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 7e6a51618a897..fab49838afa2e 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -66,7 +66,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 } ) => {
-	const { url, service, label } = attributes;
+	const { url, service, label, rel } = attributes;
 	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
@@ -113,6 +113,13 @@ const SocialLinkEdit = ( {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					label={ __( 'Link rel' ) }
+					value={ rel || '' }
+					onChange={ ( value ) => setAttributes( { rel: value } ) }
+				/>
+			</InspectorControls>
 			<li { ...blockProps }>
 				<Button
 					className="wp-block-social-link-anchor"
diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php
index 3aabd2a9a8430..7e669bf56d6da 100644
--- a/packages/block-library/src/social-link/index.php
+++ b/packages/block-library/src/social-link/index.php
@@ -20,6 +20,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$service     = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
 	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
 	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$rel         = ( isset( $attributes['rel'] ) ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
 	// Don't render a link if there is no URL set.
@@ -43,11 +44,6 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		$url = 'https://' . $url;
 	}
 
-	$rel_target_attributes = '';
-	if ( $open_in_new_tab ) {
-		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
-	}
-
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -57,13 +53,21 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	);
 
 	$link  = '<li ' . $wrapper_attributes . '>';
-	$link .= '<a href="' . esc_url( $url ) . '" ' . $rel_target_attributes . ' class="wp-block-social-link-anchor">';
+	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
 	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">';
 	$link .= esc_html( $label );
 	$link .= '</span></a></li>';
 
-	return $link;
+	$w = new WP_HTML_Tag_Processor( $link );
+	$w->next_tag( 'a' );
+	if ( $open_in_new_tab ) {
+		$w->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$w->set_attribute( 'target', '_blank' );
+	} elseif ( '' !== $rel ) {
+		$w->set_attribute( 'rel', esc_attr( $rel ) );
+	}
+	return $w;
 }
 
 /**
diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
index 4fc41a592f2dd..9571d07fab87f 100644
--- a/packages/block-library/src/spacer/controls.js
+++ b/packages/block-library/src/spacer/controls.js
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -51,17 +50,16 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	].join( '' );
 
 	return (
-		<BaseControl label={ label } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ MIN_SPACER_SIZE }
-				onChange={ handleOnChange }
-				style={ { maxWidth: 80 } }
-				value={ computedValue }
-				units={ units }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ label }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ MIN_SPACER_SIZE }
+			onChange={ handleOnChange }
+			__unstableInputWidth={ '80px' }
+			value={ computedValue }
+			units={ units }
+		/>
 	);
 }
 
diff --git a/packages/block-library/src/table/deprecated.js b/packages/block-library/src/table/deprecated.js
index 01c0120d5307e..ed138c4518aa3 100644
--- a/packages/block-library/src/table/deprecated.js
+++ b/packages/block-library/src/table/deprecated.js
@@ -10,12 +10,10 @@ import {
 	RichText,
 	getColorClassName,
 	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
-const supports = {
-	align: true,
-};
-
 // As the previous arbitrary colors won't match theme color palettes, the hex
 // value will be mapped to the style.color.background attribute as if it was
 // a custom color selection.
@@ -26,380 +24,426 @@ const oldColors = {
 	'subtle-pale-pink': '#fcf0ef',
 };
 
-const deprecated = [
-	// Deprecation migrating table block to use colors block support feature.
-	{
-		attributes: {
-			hasFixedLayout: {
-				type: 'boolean',
-				default: false,
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			caption: {
-				type: 'string',
-				source: 'html',
-				selector: 'figcaption',
-				default: '',
-			},
-			head: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'thead tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+// In #41140 support was added to global styles for caption elements which
+// added a `wp-element-caption` classname to the embed figcaption element.
+const v3 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			default: '',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			body: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tbody tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			foot: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tfoot tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
-							align: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'data-align',
-							},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
 		},
-		supports: {
-			anchor: true,
-			align: true,
-			__experimentalSelector: '.wp-block-table > table',
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
 		},
-		save: ( { attributes } ) => {
-			const {
-				hasFixedLayout,
-				head,
-				body,
-				foot,
-				backgroundColor,
-				caption,
-			} = attributes;
-			const isEmpty = ! head.length && ! body.length && ! foot.length;
-
-			if ( isEmpty ) {
-				return null;
-			}
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		__experimentalBorder: {
+			__experimentalSkipSerialization: true,
+			color: true,
+			style: true,
+			width: true,
+			__experimentalDefaultControls: {
+				color: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-table > table',
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, caption } = attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
 
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const colorProps = getColorClassesAndStyles( attributes );
+		const borderProps = getBorderClassesAndStyles( attributes );
 
-			const classes = classnames( backgroundClass, {
+		const classes = classnames(
+			colorProps.className,
+			borderProps.className,
+			{
 				'has-fixed-layout': hasFixedLayout,
-				'has-background': !! backgroundClass,
-			} );
-
-			const hasCaption = ! RichText.isEmpty( caption );
-
-			const Section = ( { type, rows } ) => {
-				if ( ! rows.length ) {
-					return null;
-				}
-
-				const Tag = `t${ type }`;
-
-				return (
-					<Tag>
-						{ rows.map( ( { cells }, rowIndex ) => (
-							<tr key={ rowIndex }>
-								{ cells.map(
-									(
-										{ content, tag, scope, align },
-										cellIndex
-									) => {
-										const cellClasses = classnames( {
-											[ `has-text-align-${ align }` ]:
-												align,
-										} );
-
-										return (
-											<RichText.Content
-												className={
-													cellClasses
-														? cellClasses
-														: undefined
-												}
-												data-align={ align }
-												tagName={ tag }
-												value={ content }
-												key={ cellIndex }
-												scope={
-													tag === 'th'
-														? scope
-														: undefined
-												}
-											/>
-										);
-									}
-								) }
-							</tr>
-						) ) }
-					</Tag>
-				);
-			};
+			}
+		);
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
 
 			return (
-				<figure { ...useBlockProps.save() }>
-					<table className={ classes === '' ? undefined : classes }>
-						<Section type="head" rows={ head } />
-						<Section type="body" rows={ body } />
-						<Section type="foot" rows={ foot } />
-					</table>
-					{ hasCaption && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{ content, tag, scope, align },
+									cellIndex
+								) => {
+									const cellClasses = classnames( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
+										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
+											tagName={ tag }
+											value={ content }
+											key={ cellIndex }
+											scope={
+												tag === 'th' ? scope : undefined
+											}
+										/>
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
 			);
+		};
+
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table
+					className={ classes === '' ? undefined : classes }
+					style={ { ...colorProps.style, ...borderProps.style } }
+				>
+					<Section type="head" rows={ head } />
+					<Section type="body" rows={ body } />
+					<Section type="foot" rows={ foot } />
+				</table>
+				{ hasCaption && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+// Deprecation migrating table block to use colors block support feature.
+const v2 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
 		},
-		isEligible: ( attributes ) => {
-			return (
-				attributes.backgroundColor &&
-				attributes.backgroundColor in oldColors &&
-				! attributes.style
-			);
+		backgroundColor: {
+			type: 'string',
 		},
-
-		// This version is the first to introduce the style attribute to the
-		// table block. As a result, we'll explicitly override that.
-		migrate: ( attributes ) => {
-			return {
-				...attributes,
-				backgroundColor: undefined,
-				style: {
-					color: {
-						background: oldColors[ attributes.backgroundColor ],
-					},
-				},
-			};
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			default: '',
 		},
-	},
-	{
-		attributes: {
-			hasFixedLayout: {
-				type: 'boolean',
-				default: false,
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			head: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'thead tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			body: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tbody tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
-			foot: {
-				type: 'array',
-				default: [],
-				source: 'query',
-				selector: 'tfoot tr',
-				query: {
-					cells: {
-						type: 'array',
-						default: [],
-						source: 'query',
-						selector: 'td,th',
-						query: {
-							content: {
-								type: 'string',
-								source: 'html',
-							},
-							tag: {
-								type: 'string',
-								default: 'td',
-								source: 'tag',
-							},
-							scope: {
-								type: 'string',
-								source: 'attribute',
-								attribute: 'scope',
-							},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+						align: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'data-align',
 						},
 					},
 				},
 			},
 		},
-		supports,
-		save( { attributes } ) {
-			const { hasFixedLayout, head, body, foot, backgroundColor } =
-				attributes;
-			const isEmpty = ! head.length && ! body.length && ! foot.length;
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		__experimentalSelector: '.wp-block-table > table',
+	},
+	save: ( { attributes } ) => {
+		const { hasFixedLayout, head, body, foot, backgroundColor, caption } =
+			attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
 
-			if ( isEmpty ) {
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+
+		const classes = classnames( backgroundClass, {
+			'has-fixed-layout': hasFixedLayout,
+			'has-background': !! backgroundClass,
+		} );
+
+		const hasCaption = ! RichText.isEmpty( caption );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
 				return null;
 			}
 
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
+			const Tag = `t${ type }`;
 
-			const classes = classnames( backgroundClass, {
-				'has-fixed-layout': hasFixedLayout,
-				'has-background': !! backgroundClass,
-			} );
-
-			const Section = ( { type, rows } ) => {
-				if ( ! rows.length ) {
-					return null;
-				}
-
-				const Tag = `t${ type }`;
-
-				return (
-					<Tag>
-						{ rows.map( ( { cells }, rowIndex ) => (
-							<tr key={ rowIndex }>
-								{ cells.map(
-									( { content, tag, scope }, cellIndex ) => (
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								(
+									{ content, tag, scope, align },
+									cellIndex
+								) => {
+									const cellClasses = classnames( {
+										[ `has-text-align-${ align }` ]: align,
+									} );
+
+									return (
 										<RichText.Content
+											className={
+												cellClasses
+													? cellClasses
+													: undefined
+											}
+											data-align={ align }
 											tagName={ tag }
 											value={ content }
 											key={ cellIndex }
@@ -407,23 +451,218 @@ const deprecated = [
 												tag === 'th' ? scope : undefined
 											}
 										/>
-									)
-								) }
-							</tr>
-						) ) }
-					</Tag>
-				);
-			};
+									);
+								}
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
 
-			return (
-				<table className={ classes }>
+		return (
+			<figure { ...useBlockProps.save() }>
+				<table className={ classes === '' ? undefined : classes }>
 					<Section type="head" rows={ head } />
 					<Section type="body" rows={ body } />
 					<Section type="foot" rows={ foot } />
 				</table>
-			);
+				{ hasCaption && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+	isEligible: ( attributes ) => {
+		return (
+			attributes.backgroundColor &&
+			attributes.backgroundColor in oldColors &&
+			! attributes.style
+		);
+	},
+
+	// This version is the first to introduce the style attribute to the
+	// table block. As a result, we'll explicitly override that.
+	migrate: ( attributes ) => {
+		return {
+			...attributes,
+			backgroundColor: undefined,
+			style: {
+				color: {
+					background: oldColors[ attributes.backgroundColor ],
+				},
+			},
+		};
+	},
+};
+
+const v1 = {
+	attributes: {
+		hasFixedLayout: {
+			type: 'boolean',
+			default: false,
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		head: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'thead tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
+		},
+		body: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tbody tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
+		},
+		foot: {
+			type: 'array',
+			default: [],
+			source: 'query',
+			selector: 'tfoot tr',
+			query: {
+				cells: {
+					type: 'array',
+					default: [],
+					source: 'query',
+					selector: 'td,th',
+					query: {
+						content: {
+							type: 'string',
+							source: 'html',
+						},
+						tag: {
+							type: 'string',
+							default: 'td',
+							source: 'tag',
+						},
+						scope: {
+							type: 'string',
+							source: 'attribute',
+							attribute: 'scope',
+						},
+					},
+				},
+			},
 		},
 	},
-];
+	supports: {
+		align: true,
+	},
+	save( { attributes } ) {
+		const { hasFixedLayout, head, body, foot, backgroundColor } =
+			attributes;
+		const isEmpty = ! head.length && ! body.length && ! foot.length;
+
+		if ( isEmpty ) {
+			return null;
+		}
+
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+
+		const classes = classnames( backgroundClass, {
+			'has-fixed-layout': hasFixedLayout,
+			'has-background': !! backgroundClass,
+		} );
+
+		const Section = ( { type, rows } ) => {
+			if ( ! rows.length ) {
+				return null;
+			}
+
+			const Tag = `t${ type }`;
 
-export default deprecated;
+			return (
+				<Tag>
+					{ rows.map( ( { cells }, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ cells.map(
+								( { content, tag, scope }, cellIndex ) => (
+									<RichText.Content
+										tagName={ tag }
+										value={ content }
+										key={ cellIndex }
+										scope={
+											tag === 'th' ? scope : undefined
+										}
+									/>
+								)
+							) }
+						</tr>
+					) ) }
+				</Tag>
+			);
+		};
+
+		return (
+			<table className={ classes }>
+				<Section type="head" rows={ head } />
+				<Section type="body" rows={ body } />
+				<Section type="foot" rows={ foot } />
+			</table>
+		);
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v3, v2, v1 ];
diff --git a/packages/block-library/src/table/state.js b/packages/block-library/src/table/state.js
index adc66c4d9e79d..68fee2d0bda9b 100644
--- a/packages/block-library/src/table/state.js
+++ b/packages/block-library/src/table/state.js
@@ -281,7 +281,7 @@ export function deleteColumn( state, { columnIndex } ) {
 }
 
 /**
- * Toggles the existance of a section.
+ * Toggles the existence of a section.
  *
  * @param {Object} state       Current table state.
  * @param {string} sectionName Name of the section to toggle.
diff --git a/packages/block-library/src/utils/clean-empty-object.js b/packages/block-library/src/utils/clean-empty-object.js
index f1a897a91b9f4..adc78556a657e 100644
--- a/packages/block-library/src/utils/clean-empty-object.js
+++ b/packages/block-library/src/utils/clean-empty-object.js
@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, pickBy } from 'lodash';
-
-const identity = ( x ) => x;
+import { isEmpty, mapValues } from 'lodash';
 
 /**
  * Removed empty nodes from nested objects.
@@ -19,9 +17,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
diff --git a/packages/block-library/src/video/deprecated.js b/packages/block-library/src/video/deprecated.js
new file mode 100644
index 0000000000000..ef4ddf41ce3f4
--- /dev/null
+++ b/packages/block-library/src/video/deprecated.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import Tracks from './tracks';
+
+const { attributes: blockAttributes } = metadata;
+
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the video figcaption element.
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const {
+			autoplay,
+			caption,
+			controls,
+			loop,
+			muted,
+			poster,
+			preload,
+			src,
+			playsInline,
+			tracks,
+		} = attributes;
+		return (
+			<figure { ...useBlockProps.save() }>
+				{ src && (
+					<video
+						autoPlay={ autoplay }
+						controls={ controls }
+						loop={ loop }
+						muted={ muted }
+						poster={ poster }
+						preload={ preload !== 'metadata' ? preload : undefined }
+						src={ src }
+						playsInline={ playsInline }
+					>
+						<Tracks tracks={ tracks } />
+					</video>
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
index 540002d97565f..e79f8a9774482 100644
--- a/packages/block-library/src/video/edit.js
+++ b/packages/block-library/src/video/edit.js
@@ -14,6 +14,7 @@ import {
 	PanelBody,
 	Spinner,
 	Placeholder,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -28,11 +29,11 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useState, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { video as icon } from '@wordpress/icons';
+import { video as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -76,6 +77,8 @@ function VideoEdit( {
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
 	const { id, caption, controls, poster, src, tracks } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryVideo = ! id && isBlobURL( src );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -103,6 +106,30 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -112,6 +139,7 @@ function VideoEdit( {
 				src: undefined,
 				id: undefined,
 				poster: undefined,
+				caption: undefined,
 			} );
 			return;
 		}
@@ -123,6 +151,7 @@ function VideoEdit( {
 			id: media.id,
 			poster:
 				media.image?.src !== media.icon ? media.image?.src : undefined,
+			caption: media.caption,
 		} );
 	}
 
@@ -186,6 +215,23 @@ function VideoEdit( {
 	return (
 		<>
 			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
+			<BlockControls>
 				<TracksEditor
 					tracks={ tracks }
 					onChange={ ( newTracks ) => {
@@ -278,26 +324,28 @@ function VideoEdit( {
 					</video>
 				</Disabled>
 				{ isTemporaryVideo && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Video caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							aria-label={ __( 'Video caption text' ) }
+							ref={ captionRef }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);
diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js
index 688d5ca944f84..57201ef712565 100644
--- a/packages/block-library/src/video/index.js
+++ b/packages/block-library/src/video/index.js
@@ -8,6 +8,7 @@ import { video as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -27,6 +28,7 @@ export const settings = {
 		},
 	},
 	transforms,
+	deprecated,
 	edit,
 	save,
 };
diff --git a/packages/block-library/src/video/tracks-editor.js b/packages/block-library/src/video/tracks-editor.js
index 1af22554820c2..4f8ebbdba3f24 100644
--- a/packages/block-library/src/video/tracks-editor.js
+++ b/packages/block-library/src/video/tracks-editor.js
@@ -7,11 +7,9 @@ import {
 	MenuItem,
 	FormFileUpload,
 	MenuGroup,
+	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
-	SVG,
-	Rect,
-	Path,
 	Button,
 	TextControl,
 	SelectControl,
@@ -38,23 +36,6 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
-const captionIcon = (
-	<SVG width="18" height="14" viewBox="0 0 18 14" role="img" fill="none">
-		<Rect
-			x="0.75"
-			y="0.75"
-			width="16.5"
-			height="12.5"
-			rx="1.25"
-			stroke="black"
-			strokeWidth="1.5"
-			fill="none"
-		/>
-		<Path d="M3 7H15" stroke="black" strokeWidth="1.5" />
-		<Path d="M3 10L15 10" stroke="black" strokeWidth="1.5" />
-	</SVG>
-);
-
 function TrackList( { tracks, onEditPress } ) {
 	let content;
 	if ( tracks.length === 0 ) {
@@ -200,14 +181,17 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 		<Dropdown
 			contentClassName="block-library-video-tracks-editor"
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					label={ __( 'Text tracks' ) }
-					showTooltip
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					icon={ captionIcon }
-				/>
+				<ToolbarGroup>
+					<ToolbarButton
+						label={ __( 'Text tracks' ) }
+						showTooltip
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+					>
+						{ __( 'Text tracks' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
 			) }
 			renderContent={ () => {
 				if ( trackBeingEdited !== null ) {
diff --git a/packages/blocks/src/api/children.js b/packages/blocks/src/api/children.js
index f50004b2d363d..8d0b3488017d5 100644
--- a/packages/blocks/src/api/children.js
+++ b/packages/blocks/src/api/children.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,9 @@ export function concat( ...blockNodes ) {
 
 	const result = [];
 	for ( let i = 0; i < blockNodes.length; i++ ) {
-		const blockNode = castArray( blockNodes[ i ] );
+		const blockNode = Array.isArray( blockNodes[ i ] )
+			? blockNodes[ i ]
+			: [ blockNodes[ i ] ];
 		for ( let j = 0; j < blockNode.length; j++ ) {
 			const child = blockNode[ j ];
 			const canConcatToPreviousString =
diff --git a/packages/blocks/src/api/parser/apply-block-deprecated-versions.js b/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
index 4c6e45bdfa035..2a3e880a3f746 100644
--- a/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
+++ b/packages/blocks/src/api/parser/apply-block-deprecated-versions.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -102,10 +97,15 @@ export function applyBlockDeprecatedVersions( block, rawBlock, blockType ) {
 		// inner blocks.
 		const { migrate } = deprecatedBlockType;
 		if ( migrate ) {
+			let migrated = migrate( migratedAttributes, block.innerBlocks );
+			if ( ! Array.isArray( migrated ) ) {
+				migrated = [ migrated ];
+			}
+
 			[
 				migratedAttributes = parsedAttributes,
 				migratedInnerBlocks = block.innerBlocks,
-			] = castArray( migrate( migratedAttributes, block.innerBlocks ) );
+			] = migrated;
 		}
 
 		block = {
diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
index 76713a6671129..b9fd3dcf67508 100644
--- a/packages/blocks/src/api/parser/get-block-attributes.js
+++ b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { parse as hpqParse } from 'hpq';
-import { mapValues, castArray } from 'lodash';
+import { mapValues } from 'lodash';
 import memoize from 'memize';
 
 /**
@@ -165,7 +165,10 @@ export function getBlockAttribute(
  * @return {boolean} Whether value is valid.
  */
 export function isValidByType( value, type ) {
-	return type === undefined || isOfTypes( value, castArray( type ) );
+	return (
+		type === undefined ||
+		isOfTypes( value, Array.isArray( type ) ? type : [ type ] )
+	);
 }
 
 /**
diff --git a/packages/blocks/src/api/raw-handling/markdown-converter.js b/packages/blocks/src/api/raw-handling/markdown-converter.js
index ab215db9dd3ff..217a3ac888501 100644
--- a/packages/blocks/src/api/raw-handling/markdown-converter.js
+++ b/packages/blocks/src/api/raw-handling/markdown-converter.js
@@ -30,6 +30,10 @@ function slackMarkdownVariantCorrector( text ) {
 	);
 }
 
+function bulletsToAsterisks( text ) {
+	return text.replace( /(^|\n)•( +)/g, '$1*$2' );
+}
+
 /**
  * Converts a piece of text into HTML based on any Markdown present.
  * Also decodes any encoded HTML.
@@ -39,5 +43,7 @@ function slackMarkdownVariantCorrector( text ) {
  * @return {string} HTML.
  */
 export default function markdownConverter( text ) {
-	return converter.makeHtml( slackMarkdownVariantCorrector( text ) );
+	return converter.makeHtml(
+		slackMarkdownVariantCorrector( bulletsToAsterisks( text ) )
+	);
 }
diff --git a/packages/blocks/src/api/test/children.js b/packages/blocks/src/api/test/children.js
index 8a57c6a71f3b5..e7d4d274be2e8 100644
--- a/packages/blocks/src/api/test/children.js
+++ b/packages/blocks/src/api/test/children.js
@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * WordPress dependencies
  */
@@ -137,3 +139,5 @@ describe( 'fromDOM', () => {
 		] );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */
diff --git a/packages/blocks/src/api/validation/index.js b/packages/blocks/src/api/validation/index.js
index 0d0eba1a33b43..6f64c5f3923ab 100644
--- a/packages/blocks/src/api/validation/index.js
+++ b/packages/blocks/src/api/validation/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Tokenizer } from 'simple-html-tokenizer';
-import { isEqual, includes } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -289,7 +289,7 @@ export function getMeaningfulAttributePairs( token ) {
 		return (
 			value ||
 			key.indexOf( 'data-' ) === 0 ||
-			includes( MEANINGFUL_ATTRIBUTES, key )
+			MEANINGFUL_ATTRIBUTES.includes( key )
 		);
 	} );
 }
diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js
index 1e160175dc75e..76cf631e81448 100644
--- a/packages/blocks/src/store/actions.js
+++ b/packages/blocks/src/store/actions.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { isPlainObject } from 'is-plain-object';
-import { castArray, pick, some } from 'lodash';
+import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -114,9 +114,9 @@ const processBlockType = ( blockType, { select } ) => {
 
 	if (
 		'category' in settings &&
-		! some( select.getCategories(), {
-			slug: settings.category,
-		} )
+		! select
+			.getCategories()
+			.some( ( { slug } ) => slug === settings.category )
 	) {
 		warn(
 			'The block "' +
@@ -163,7 +163,7 @@ const processBlockType = ( blockType, { select } ) => {
 export function addBlockTypes( blockTypes ) {
 	return {
 		type: 'ADD_BLOCK_TYPES',
-		blockTypes: castArray( blockTypes ),
+		blockTypes: Array.isArray( blockTypes ) ? blockTypes : [ blockTypes ],
 	};
 }
 
@@ -242,7 +242,7 @@ export const __experimentalReapplyBlockTypeFilters =
 export function removeBlockTypes( names ) {
 	return {
 		type: 'REMOVE_BLOCK_TYPES',
-		names: castArray( names ),
+		names: Array.isArray( names ) ? names : [ names ],
 	};
 }
 
@@ -260,7 +260,7 @@ export function removeBlockTypes( names ) {
 export function addBlockStyles( blockName, styles ) {
 	return {
 		type: 'ADD_BLOCK_STYLES',
-		styles: castArray( styles ),
+		styles: Array.isArray( styles ) ? styles : [ styles ],
 		blockName,
 	};
 }
@@ -279,7 +279,7 @@ export function addBlockStyles( blockName, styles ) {
 export function removeBlockStyles( blockName, styleNames ) {
 	return {
 		type: 'REMOVE_BLOCK_STYLES',
-		styleNames: castArray( styleNames ),
+		styleNames: Array.isArray( styleNames ) ? styleNames : [ styleNames ],
 		blockName,
 	};
 }
@@ -298,7 +298,7 @@ export function removeBlockStyles( blockName, styleNames ) {
 export function addBlockVariations( blockName, variations ) {
 	return {
 		type: 'ADD_BLOCK_VARIATIONS',
-		variations: castArray( variations ),
+		variations: Array.isArray( variations ) ? variations : [ variations ],
 		blockName,
 	};
 }
@@ -317,7 +317,9 @@ export function addBlockVariations( blockName, variations ) {
 export function removeBlockVariations( blockName, variationNames ) {
 	return {
 		type: 'REMOVE_BLOCK_VARIATIONS',
-		variationNames: castArray( variationNames ),
+		variationNames: Array.isArray( variationNames )
+			? variationNames
+			: [ variationNames ],
 		blockName,
 	};
 }
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index 120249654445d..298d7fc12141a 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -3,7 +3,7 @@
  */
 import createSelector from 'rememo';
 import removeAccents from 'remove-accents';
-import { filter, get, includes, map, some } from 'lodash';
+import { filter, get, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -555,7 +555,7 @@ export const getChildBlockNames = createSelector(
 	( state, blockName ) => {
 		return map(
 			filter( state.blockTypes, ( blockType ) => {
-				return includes( blockType.parent, blockName );
+				return blockType.parent?.includes( blockName );
 			} ),
 			( { name } ) => name
 		);
@@ -710,12 +710,12 @@ export function isMatchingSearchTerm( state, nameOrType, searchTerm ) {
 	const isSearchMatch = pipe( [
 		getNormalizedSearchTerm,
 		( normalizedCandidate ) =>
-			includes( normalizedCandidate, normalizedSearchTerm ),
+			normalizedCandidate.includes( normalizedSearchTerm ),
 	] );
 
 	return (
 		isSearchMatch( blockType.title ) ||
-		some( blockType.keywords, isSearchMatch ) ||
+		blockType.keywords?.some( isSearchMatch ) ||
 		isSearchMatch( blockType.category ) ||
 		( typeof blockType.description === 'string' &&
 			isSearchMatch( blockType.description ) )
@@ -792,11 +792,16 @@ export const hasChildBlocks = ( state, blockName ) => {
  *                   and false otherwise.
  */
 export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
-	return some( getChildBlockNames( state, blockName ), ( childBlockName ) => {
+	return getChildBlockNames( state, blockName ).some( ( childBlockName ) => {
 		return hasBlockSupport( state, childBlockName, 'inserter', true );
 	} );
 };
 
+/**
+ * DO-NOT-USE in production.
+ * This selector is created for internal/experimental only usage and may be
+ * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
+ */
 export const __experimentalHasContentRoleAttribute = createSelector(
 	( state, blockTypeName ) => {
 		const blockType = getBlockType( state, blockTypeName );
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 18a230c301d46..1771ff689a5e4 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,13 +2,74 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `Popover`: The deprecated `range` and `__unstableShift` props have been removed ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+
+### Deprecations
+
+-   `Popover`: the deprecation messages for anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`) have been updated ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+-   `RadioGroup`: Mark as deprecated, in favor of `RadioControl` and `ToggleGroupControl` ([#45389](https://github.com/WordPress/gutenberg/pull/45389)).
+-   `Popover`: the deprecation messages for anchor-related props (`anchorRef`, `anchorRect`, `getAnchorRect`) have been updated. ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+-   `Popover`: The `isAlternate` prop has been replaced with a `variant` prop that can be called with the `'toolbar'` string ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
+
+### New Feature
+
+-   `BoxControl` & `CustomSelectControl`: Add `onMouseOver` and `onMouseOut` callback props to allow handling of these events by parent components ([#44955](https://github.com/WordPress/gutenberg/pull/44955))
+-   `Popover`: A `variant` prop has been added to style popovers, with `'unstyled'` and `'toolbar'` possible values ([#45137](https://github.com/WordPress/gutenberg/pull/45137)).
+
+### Enhancements
+
+-   `FontSizePicker`: Improved slider design when `withSlider` is set ([#44598](https://github.com/WordPress/gutenberg/pull/44598)).
+-   `ToggleControl`: Improved types for the `help` prop, covering the dynamic render function option, and enabled the dynamic `help` behavior only for a controlled component ([#45279](https://github.com/WordPress/gutenberg/pull/45279)).
+-   `BorderControl` & `BorderBoxControl`: Replace `__next36pxDefaultSize` with "default" and "large" size variants ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
+-   `UnitControl`: Remove outer wrapper to normalize className placement ([#41860](https://github.com/WordPress/gutenberg/pull/41860)).
+-   `ColorPalette`: Fix transparent checkered background pattern ([#45295](https://github.com/WordPress/gutenberg/pull/45295)).
+-   `ToggleGroupControl`: Add `isDeselectable` prop to allow deselecting the selected option ([#45123](https://github.com/WordPress/gutenberg/pull/45123)).
+
+### Bug Fix
+
+-   `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
+-   `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)).
+-   `ItemGroup`: fix RTL `Item` styles when rendered as a button ([#45280](https://github.com/WordPress/gutenberg/pull/45280)).
+-   `Button`: Fix RTL alignment for buttons containing an icon and text ([#44787](https://github.com/WordPress/gutenberg/pull/44787)).
+-   `TabPanel`: Call `onSelect()` on every tab selection, regardless of whether it was triggered by user interaction ([#44028](https://github.com/WordPress/gutenberg/pull/44028)).
+-   `FontSizePicker`: Fallback to font size `slug` if `name` is undefined ([#45041](https://github.com/WordPress/gutenberg/pull/45041)).
+-   `AutocompleterUI`: fix issue where autocompleter UI would appear on top of other UI elements ([#44795](https://github.com/WordPress/gutenberg/pull/44795/))
+-   `ExternalLink`: Fix to re-enable support for `onClick` event handler ([#45214](https://github.com/WordPress/gutenberg/pull/45214)).
+-   `InputControl`: Allow inline styles to be applied to the wrapper not inner input ([#45340](https://github.com/WordPress/gutenberg/pull/45340/))
+
+### Internal
+
+-   `BorderBoxControl`: Convert stories to TypeScript and use Controls ([#45002](https://github.com/WordPress/gutenberg/pull/45002)).
+-   `Disabled`: add a note in the docs about the lack of polyfill for the `inert` attribute ([#45272](https://github.com/WordPress/gutenberg/pull/45272))
+-   `Snackbar`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44934](https://github.com/WordPress/gutenberg/pull/44934))
+-   `AnglePickerControl`: Set Storybook Label control type to 'text' ([#45122](https://github.com/WordPress/gutenberg/pull/45122)).
+-   `SlotFill`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44403](https://github.com/WordPress/gutenberg/pull/44403))
+-   `Context`: updated to ignore `react/exhaustive-deps` eslint rule ([#45044](https://github.com/WordPress/gutenberg/pull/45044))
+-   `Button`: Refactor Storybook to controls and align docs ([#44105](https://github.com/WordPress/gutenberg/pull/44105)).
+-   `TabPanel`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44935](https://github.com/WordPress/gutenberg/pull/44935))
+-   `ColorPalette`: Convert to TypeScript ([#44632](https://github.com/WordPress/gutenberg/pull/44632)).
+-   `UnitControl`: Add tests ([#45260](https://github.com/WordPress/gutenberg/pull/45260)).
+-   `Disabled`: Refactor the component to rely on the HTML `inert` attribute.
+-   `CustomGradientBar`: Refactor away from Lodash ([#45367](https://github.com/WordPress/gutenberg/pull/45367/)).
+-   `TextControl`: Set Storybook control types on `help`, `label` and `type` ([#45405](https://github.com/WordPress/gutenberg/pull/45405)).
+-   `Autocomplete`: use Popover's new `placement` prop instead of legacy `position` prop ([#44396](https://github.com/WordPress/gutenberg/pull/44396/)).
+-   `SelectControl`: Add `onChange`, `onBlur` and `onFocus` to storybook actions ([#45432](https://github.com/WordPress/gutenberg/pull/45432/)).
+-   `FontSizePicker`: Add more comprehensive tests ([#45298](https://github.com/WordPress/gutenberg/pull/45298)).
+
+### Experimental
+
+-   `NumberControl`: Replace `hideHTMLArrows` prop with `spinControls` prop. Allow custom spin controls via `spinControls="custom"` ([#45333](https://github.com/WordPress/gutenberg/pull/45333)).
+
 ## 21.3.0 (2022-10-19)
 
 ### Bug Fix
 
 -   `FontSizePicker`: Ensure that fluid font size presets appear correctly in the UI controls ([#44791](https://github.com/WordPress/gutenberg/pull/44791)).
+-   `ToggleGroupControl`: Remove unsupported `disabled` prop from types, and correctly mark `label` prop as required ([#45114](https://github.com/WordPress/gutenberg/pull/45114)).
 -   `Navigator`: prevent partially hiding focus ring styles, by removing unnecessary overflow rules on `NavigatorScreen` ([#44973](https://github.com/WordPress/gutenberg/pull/44973)).
--   `Navigator`: restore focus only once per location  ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
+-   `Navigator`: restore focus only once per location ([#44972](https://github.com/WordPress/gutenberg/pull/44972)).
 
 ### Documentation
 
@@ -20,6 +81,7 @@
 -   `Sandbox`: Use `toString` to create observe and resize script string ([#42872](https://github.com/WordPress/gutenberg/pull/42872)).
 -   `Navigator`: refactor unit tests to TypeScript and to `user-event` ([#44970](https://github.com/WordPress/gutenberg/pull/44970)).
 -   `Navigator`: Refactor Storybook code to TypeScript and controls ([#44979](https://github.com/WordPress/gutenberg/pull/44979)).
+-   `withFilters`: Refactor away from `_.without()` ([#44980](https://github.com/WordPress/gutenberg/pull/44980/)).
 -   `withFocusReturn`: Refactor tests to `@testing-library/react` ([#45012](https://github.com/WordPress/gutenberg/pull/45012)).
 -   `ToolsPanel`: updated to satisfy `react/exhaustive-deps` eslint rule ([#45028](https://github.com/WordPress/gutenberg/pull/45028))
 -   `Tooltip`: updated to ignore `react/exhaustive-deps` eslint rule ([#45043](https://github.com/WordPress/gutenberg/pull/45043))
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 151ad0edeab02..67b8bfb4cff9c 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -63,7 +63,7 @@ export default function AnglePickerControl( {
 					size="__unstable-large"
 					step="1"
 					value={ value }
-					hideHTMLArrows
+					spinControls="none"
 					suffix={
 						<Spacer
 							as={ Text }
diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
index 74694459abaac..9418b1bcd60d0 100644
--- a/packages/components/src/angle-picker-control/stories/index.js
+++ b/packages/components/src/angle-picker-control/stories/index.js
@@ -11,6 +11,9 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		label: { control: { type: 'text' } },
+	},
 };
 
 const AnglePickerWithState = ( args ) => {
diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
index f8a9fd08eaf95..4ec217925e65c 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.js
+++ b/packages/components/src/autocomplete/autocompleter-ui.js
@@ -7,7 +7,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect } from '@wordpress/element';
+import { useLayoutEffect, useRef, useEffect } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
 
 /**
@@ -31,6 +31,7 @@ export function getAutoCompleterUI( autocompleter ) {
 		onChangeOptions,
 		onSelect,
 		onReset,
+		reset,
 		value,
 		contentRef,
 	} ) {
@@ -40,6 +41,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			value,
 		} );
 
+		const popoverRef = useRef();
+
+		useOnClickOutside( popoverRef, reset );
+
 		useLayoutEffect( () => {
 			onChangeOptions( items );
 			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
@@ -55,9 +60,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			<Popover
 				focusOnMount={ false }
 				onClose={ onReset }
-				position="top right"
+				placement="top-start"
 				className="components-autocomplete__popover"
 				anchor={ popoverAnchor }
+				ref={ popoverRef }
 			>
 				<div
 					id={ listBoxId }
@@ -90,3 +96,24 @@ export function getAutoCompleterUI( autocompleter ) {
 
 	return AutocompleterUI;
 }
+
+function useOnClickOutside( ref, handler ) {
+	useEffect( () => {
+		const listener = ( event ) => {
+			// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
+			if ( ! ref.current || ref.current.contains( event.target ) ) {
+				return;
+			}
+			handler( event );
+		};
+		document.addEventListener( 'mousedown', listener );
+		document.addEventListener( 'touchstart', listener );
+		return () => {
+			document.removeEventListener( 'mousedown', listener );
+			document.removeEventListener( 'touchstart', listener );
+		};
+		// Disable reason: `ref` is a ref object and should not be included in a
+		// hook's dependency list.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ handler ] );
+}
diff --git a/packages/components/src/autocomplete/test/index.js b/packages/components/src/autocomplete/test/index.js
new file mode 100644
index 0000000000000..b33f585ea9d5f
--- /dev/null
+++ b/packages/components/src/autocomplete/test/index.js
@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getAutoCompleterUI } from '../autocompleter-ui';
+
+describe( 'AutocompleterUI', () => {
+	describe( 'click outside behavior', () => {
+		it( 'should call reset function when a click on another element occurs', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const resetSpy = jest.fn();
+
+			const autocompleter = {
+				name: 'fruit',
+				// The prefix that triggers this completer
+				triggerPrefix: '~',
+				// Mock useItems function to return a autocomplete item.
+				useItems: () => {
+					return [
+						[
+							{
+								isDisabled: false,
+								key: 'Apple',
+								value: 'Apple',
+								label: (
+									<span>
+										<span className="icon">🍎</span>
+										{ 'Apple' }
+									</span>
+								),
+							},
+						],
+					];
+				},
+			};
+
+			const AutocompleterUI = getAutoCompleterUI( autocompleter );
+
+			const OtherElement = <div>Other Element</div>;
+
+			const Container = () => {
+				const contentRef = useRef();
+
+				return (
+					<div>
+						<AutocompleterUI
+							className={ 'test' }
+							filterValue={ '~' }
+							instanceId={ '1' }
+							listBoxId={ '1' }
+							selectedIndex={ 0 }
+							onChangeOptions={ () => {} }
+							onSelect={ () => {} }
+							value={ { visual: '🍎', name: 'Apple', id: 1 } }
+							contentRef={ contentRef }
+							reset={ resetSpy }
+						/>
+						{ OtherElement }
+					</div>
+				);
+			};
+
+			render( <Container /> );
+
+			// Click on autocompleter.
+			await user.click( screen.getByText( 'Apple' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 0 );
+
+			// Click on other element out side of the tree.
+			await user.click( screen.getByText( 'Other Element' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );
diff --git a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
index 58c2089888409..043c101b05f5a 100644
--- a/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-linked-button/hook.ts
@@ -17,18 +17,15 @@ export function useBorderBoxControlLinkedButton(
 ) {
 	const {
 		className,
-		__next36pxDefaultSize = false,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx(
-			styles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),
-			className
-		);
-	}, [ className, cx, __next36pxDefaultSize ] );
+		return cx( styles.borderBoxControlLinkedButton( size ), className );
+	}, [ className, cx, size ] );
 
 	return { ...otherProps, className: classes };
 }
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index e0d44852bca58..b5b80c0aa6b50 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -31,10 +31,10 @@ const BorderBoxControlSplitControls = (
 		popoverPlacement,
 		popoverOffset,
 		rightAlignedClassName,
+		size = 'default',
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
 
@@ -67,17 +67,14 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		size,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
-			<BorderBoxControlVisualizer
-				value={ value }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
-			/>
+			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
index a6ecb1ff72684..1ecc201e5618a 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/hook.ts
@@ -8,41 +8,38 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils/';
+import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';
 
 export function useBorderBoxControlSplitControls(
 	props: WordPressComponentProps< SplitControlsProps, 'div' >
 ) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlSplitControls'
-	);
+	const {
+		className,
+		size = 'default',
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.borderBoxControlSplitControls(), className );
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, rtlWatchResult ] );
+		return cx( styles.borderBoxControlSplitControls( size ), className );
+	}, [ cx, className, size ] );
 
 	const centeredClassName = useMemo( () => {
-		return cx( styles.CenteredBorderControl, className );
+		return cx( styles.centeredBorderControl, className );
 	}, [ cx, className ] );
 
 	const rightAlignedClassName = useMemo( () => {
 		return cx( styles.rightBorderControl(), className );
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, rtlWatchResult ] );
+	}, [ cx, className ] );
 
 	return {
 		...otherProps,
 		centeredClassName,
 		className: classes,
 		rightAlignedClassName,
+		size,
 	};
 }
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
index 75fc6a7a36777..4e6e69e9d8452 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/hook.ts
@@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils';
+import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';
 
@@ -18,21 +18,18 @@ export function useBorderBoxControlVisualizer(
 	const {
 		className,
 		value,
-		__next36pxDefaultSize = false,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, size ),
 			className
 		);
-		// rtlWatchResult is needed to refresh styles when the writing direction changes
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
+	}, [ cx, className, value, size ] );
 
 	return { ...otherProps, className: classes, value };
 }
diff --git a/packages/components/src/border-box-control/border-box-control/README.md b/packages/components/src/border-box-control/border-box-control/README.md
index c895c1b853de1..86492a4f4136a 100644
--- a/packages/components/src/border-box-control/border-box-control/README.md
+++ b/packages/components/src/border-box-control/border-box-control/README.md
@@ -138,6 +138,14 @@ Works in conjunctions with `popoverPlacement` and allows leaving a space between
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing the current border configuration.
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 195d968eca22b..4918abafebfce 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -11,7 +11,6 @@ import { useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
 import BorderBoxControlSplitControls from '../border-box-control-split-controls';
 import { BorderControl } from '../../border-control';
-import { HStack } from '../../h-stack';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
@@ -38,8 +37,8 @@ const BorderLabel = ( props: LabelProps ) => {
 	);
 };
 
-const BorderBoxControl = (
-	props: WordPressComponentProps< BorderBoxControlProps, 'div' >,
+const UnconnectedBorderBoxControl = (
+	props: WordPressComponentProps< BorderBoxControlProps, 'div', false >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
@@ -59,11 +58,12 @@ const BorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
+		size = 'default',
 		splitValue,
 		toggleLinked,
+		wrapperClassName,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
 
@@ -96,7 +96,7 @@ const BorderBoxControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>
+			<View className={ wrapperClassName }>
 				{ isLinked ? (
 					<BorderControl
 						className={ linkedControlClassName }
@@ -113,14 +113,16 @@ const BorderBoxControl = (
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
-						width={ '110px' }
+						width={
+							size === '__unstable-large' ? '116px' : '110px'
+						}
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins
 						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -138,22 +140,71 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					size={ size }
 				/>
-			</HStack>
+			</View>
 		</View>
 	);
 };
 
-const ConnectedBorderBoxControl = contextConnect(
-	BorderBoxControl,
+/**
+ * The `BorderBoxControl` effectively has two view states. The first, a "linked"
+ * view, allows configuration of a flat border via a single `BorderControl`.
+ * The second, a "split" view, contains a `BorderControl` for each side
+ * as well as a visualizer for the currently selected borders. Each view also
+ * contains a button to toggle between the two.
+ *
+ * When switching from the "split" view to "linked", if the individual side
+ * borders are not consistent, the "linked" view will display any border
+ * properties selections that are consistent while showing a mixed state for
+ * those that aren't. For example, if all borders had the same color and style
+ * but different widths, then the border dropdown in the "linked" view's
+ * `BorderControl` would show that consistent color and style but the "linked"
+ * view's width input would show "Mixed" placeholder text.
+ *
+ * ```jsx
+ * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderBoxControl = () => {
+ * 	const defaultBorder = {
+ * 		color: '#72aee6',
+ * 		style: 'dashed',
+ * 		width: '1px',
+ * 	};
+ * 	const [ borders, setBorders ] = useState( {
+ * 		top: defaultBorder,
+ * 		right: defaultBorder,
+ * 		bottom: defaultBorder,
+ * 		left: defaultBorder,
+ * 	} );
+ * 	const onChange = ( newBorders ) => setBorders( newBorders );
+ *
+ * 	return (
+ * 		<BorderBoxControl
+ * 			colors={ colors }
+ * 			label={ __( 'Borders' ) }
+ * 			onChange={ onChange }
+ * 			value={ borders }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const BorderBoxControl = contextConnect(
+	UnconnectedBorderBoxControl,
 	'BorderBoxControl'
 );
 
-export default ConnectedBorderBoxControl;
+export default BorderBoxControl;
diff --git a/packages/components/src/border-box-control/border-box-control/hook.ts b/packages/components/src/border-box-control/border-box-control/hook.ts
index 7a4add756ed2d..fed695d182b42 100644
--- a/packages/components/src/border-box-control/border-box-control/hook.ts
+++ b/packages/components/src/border-box-control/border-box-control/hook.ts
@@ -100,11 +100,15 @@ export function useBorderBoxControl(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControl, className );
+		return cx( styles.borderBoxControl, className );
 	}, [ cx, className ] );
 
 	const linkedControlClassName = useMemo( () => {
-		return cx( styles.LinkedBorderControl );
+		return cx( styles.linkedBorderControl() );
+	}, [ cx ] );
+
+	const wrapperClassName = useMemo( () => {
+		return cx( styles.wrapper );
 	}, [ cx ] );
 
 	return {
@@ -119,5 +123,6 @@ export function useBorderBoxControl(
 		toggleLinked,
 		linkedValue,
 		splitValue,
+		wrapperClassName,
 	};
 }
diff --git a/packages/components/src/border-box-control/stories/index.js b/packages/components/src/border-box-control/stories/index.js
deleted file mode 100644
index 469d6d4d3407f..0000000000000
--- a/packages/components/src/border-box-control/stories/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import Popover from '../../popover';
-import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-export default {
-	title: 'Components (Experimental)/BorderBoxControl',
-	component: BorderBoxControl,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const _default = ( props ) => {
-	const { defaultBorder } = props;
-	const [ borders, setBorders ] = useState( defaultBorder );
-
-	useEffect( () => setBorders( defaultBorder ), [ defaultBorder ] );
-
-	return (
-		<SlotFillProvider>
-			<WrapperView>
-				<BorderBoxControl
-					colors={ colors }
-					label="Borders"
-					onChange={ ( newBorders ) => setBorders( newBorders ) }
-					value={ borders }
-					{ ...props }
-				/>
-			</WrapperView>
-			<Separator />
-			<HelpText>
-				The BorderBoxControl is intended to be used within a component
-				that will provide reset controls. The button below is only for
-				convenience.
-			</HelpText>
-			<Button variant="primary" onClick={ () => setBorders( undefined ) }>
-				Reset
-			</Button>
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	disableCustomColors: false,
-	enableAlpha: true,
-	enableStyle: true,
-	defaultBorder: {
-		color: '#72aee6',
-		style: 'dashed',
-		width: '1px',
-	},
-	__next36pxDefaultSize: false,
-	popoverPlacement: 'right-start',
-};
-
-const WrapperView = styled.div`
-	max-width: 280px;
-	padding: 16px;
-`;
-
-const Separator = styled.hr`
-	margin-top: 100px;
-	border-color: #ddd;
-	border-style: solid;
-	border-bottom: none;
-`;
-
-const HelpText = styled.p`
-	color: #aaa;
-	font-size: 0.9em;
-`;
diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx
new file mode 100644
index 0000000000000..b391c2f00f592
--- /dev/null
+++ b/packages/components/src/border-box-control/stories/index.tsx
@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import Popover from '../../popover';
+import { BorderBoxControl } from '../';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+
+const meta: ComponentMeta< typeof BorderBoxControl > = {
+	title: 'Components (Experimental)/BorderBoxControl',
+	component: BorderBoxControl,
+	argTypes: {
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
+];
+
+const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+	const { onChange, ...otherProps } = props;
+	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
+
+	const onChangeMerged: ComponentProps<
+		typeof BorderBoxControl
+	>[ 'onChange' ] = ( newBorders ) => {
+		setBorders( newBorders );
+		onChange( newBorders );
+	};
+
+	return (
+		<SlotFillProvider>
+			<BorderBoxControl
+				{ ...otherProps }
+				onChange={ onChangeMerged }
+				value={ borders }
+			/>
+			<hr
+				style={ {
+					marginTop: '100px',
+					borderColor: '#ddd',
+					borderStyle: 'solid',
+					borderBottom: 'none',
+				} }
+			/>
+			<p style={ { color: '#aaa', fontSize: '0.9em' } }>
+				The BorderBoxControl is intended to be used within a component
+				that will provide reset controls. The button below is only for
+				convenience.
+			</p>
+			<Button
+				variant="primary"
+				onClick={ () => onChangeMerged( undefined ) }
+			>
+				Reset
+			</Button>
+			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Borders',
+};
diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts
index e5bb4ce638acd..3fba981080a51 100644
--- a/packages/components/src/border-box-control/styles.ts
+++ b/packages/components/src/border-box-control/styles.ts
@@ -7,29 +7,33 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
 
 import type { Border } from '../border-control/types';
 import type { Borders } from './types';
 
-export const BorderBoxControl = css``;
+export const borderBoxControl = css``;
 
-export const LinkedBorderControl = css`
+export const linkedBorderControl = () => css`
 	flex: 1;
+	${ rtl( { marginRight: '24px' } )() }
 `;
 
-export const BorderBoxControlLinkedButton = (
-	__next36pxDefaultSize?: boolean
+export const wrapper = css`
+	position: relative;
+`;
+
+export const borderBoxControlLinkedButton = (
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
-		flex: 0;
-		flex-basis: 24px;
+		position: absolute;
+		top: ${ size === '__unstable-large' ? '8px' : '3px' };
+		${ rtl( { right: 0 } )() }
 		line-height: 0;
-		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
 	`;
 };
 
-const BorderBoxStyleWithFallback = ( border?: Border ) => {
+const borderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
 		color = COLORS.gray[ 200 ],
 		style = 'solid',
@@ -46,36 +50,38 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 
 export const borderBoxControlVisualizer = (
 	borders?: Borders,
-	__next36pxDefaultSize?: boolean
+	size?: 'default' | '__unstable-large'
 ) => {
 	return css`
 		position: absolute;
-		top: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		right: 30px;
-		bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
-		left: 30px;
-		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
-		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
+		top: ${ size === '__unstable-large' ? '20px' : '15px' };
+		right: ${ size === '__unstable-large' ? '39px' : '29px' };
+		bottom: ${ size === '__unstable-large' ? '20px' : '15px' };
+		left: ${ size === '__unstable-large' ? '39px' : '29px' };
+		border-top: ${ borderBoxStyleWithFallback( borders?.top ) };
+		border-bottom: ${ borderBoxStyleWithFallback( borders?.bottom ) };
 		${ rtl( {
-			borderLeft: BorderBoxStyleWithFallback( borders?.left ),
+			borderLeft: borderBoxStyleWithFallback( borders?.left ),
 		} )() }
 		${ rtl( {
-			borderRight: BorderBoxStyleWithFallback( borders?.right ),
+			borderRight: borderBoxStyleWithFallback( borders?.right ),
 		} )() }
 	`;
 };
 
-export const borderBoxControlSplitControls = () => css`
+export const borderBoxControlSplitControls = (
+	size?: 'default' | '__unstable-large'
+) => css`
 	position: relative;
 	flex: 1;
-	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
+	width: ${ size === '__unstable-large' ? undefined : '80%' };
 `;
 
-export const CenteredBorderControl = css`
+export const centeredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
 
 export const rightBorderControl = () => css`
-	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+	${ rtl( { marginLeft: 'auto' } )() }
 `;
diff --git a/packages/components/src/border-box-control/test/index.js b/packages/components/src/border-box-control/test/index.js
index d22ecdf37124d..af805aa4bde11 100644
--- a/packages/components/src/border-box-control/test/index.js
+++ b/packages/components/src/border-box-control/test/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -48,40 +49,22 @@ const props = {
 const toggleLabelRegex = /Border color( and style)* picker/;
 const colorPickerRegex = /Border color picker/;
 
-const renderBorderBoxControl = ( customProps ) => {
-	return render( <BorderBoxControl { ...{ ...props, ...customProps } } /> );
-};
-
-const clickButton = ( name ) => {
-	fireEvent.click( screen.getByRole( 'button', { name } ) );
-};
-
-const queryButton = ( name ) => {
-	return screen.queryByRole( 'button', { name } );
-};
-
-const updateLinkedWidthInput = ( value ) => {
-	const widthInput = screen.getByRole( 'spinbutton' );
-	widthInput.focus();
-	fireEvent.change( widthInput, { target: { value } } );
-};
-
-const updateSplitWidthInput = ( value, index = 0 ) => {
-	const splitInputs = screen.getAllByRole( 'spinbutton' );
-	splitInputs[ index ].focus();
-	fireEvent.change( splitInputs[ index ], { target: { value } } );
-};
-
 describe( 'BorderBoxControl', () => {
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
-			renderBorderBoxControl();
+			render( <BorderBoxControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
-			const slider = screen.getByRole( 'slider' );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const slider = screen.getByRole( 'slider', {
+				name: 'Border width',
+			} );
 			const linkedButton = screen.getByLabelText( 'Unlink sides' );
 
 			expect( label ).toBeInTheDocument();
@@ -94,7 +77,8 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should hide label', () => {
-			renderBorderBoxControl( { hideLabelFromVision: true } );
+			render( <BorderBoxControl { ...props } hideLabelFromVision /> );
+
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -107,62 +91,112 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should show correct width value when flat border value provided', () => {
-			renderBorderBoxControl( { value: defaultBorder } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			render( <BorderBoxControl { ...props } value={ defaultBorder } /> );
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
 		it( 'should show correct width value when consistent split borders provided', () => {
-			renderBorderBoxControl( { value: defaultBorders } );
-			const widthInput = screen.getByRole( 'spinbutton' );
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInput.value ).toBe( '1' );
 		} );
 
-		it( 'should render placeholder and omit unit select when border values are mixed', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+		it( 'should render placeholder and omit unit select when border values are mixed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
 			// First render of control with mixed values should show split view.
-			clickButton( 'Link sides' );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
 
-			const widthInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.queryByRole( 'combobox' );
+			const widthInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.queryByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 			expect( unitSelect ).not.toBeInTheDocument();
 		} );
 
 		it( 'should render shared border width and unit select when switching to linked view', async () => {
-			// Render control with mixed border values but consistent widths.
-			renderBorderBoxControl( {
-				value: {
-					top: { color: 'red', width: '5px', style: 'solid' },
-					right: { color: 'blue', width: '5px', style: 'dashed' },
-					bottom: { color: 'green', width: '5px', style: 'solid' },
-					left: { color: 'yellow', width: '5px', style: 'dotted' },
-				},
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
 
+			// Render control with mixed border values but consistent widths.
+			render(
+				<BorderBoxControl
+					{ ...props }
+					value={ {
+						top: { color: 'red', width: '5px', style: 'solid' },
+						right: { color: 'blue', width: '5px', style: 'dashed' },
+						bottom: {
+							color: 'green',
+							width: '5px',
+							style: 'solid',
+						},
+						left: {
+							color: 'yellow',
+							width: '5px',
+							style: 'dotted',
+						},
+					} }
+				/>
+			);
+
 			// First render of control with mixed values should show split view.
-			clickButton( 'Link sides' );
-			const linkedInput = screen.getByRole( 'spinbutton' );
-			const unitSelect = screen.getByRole( 'combobox' );
+			await user.click(
+				screen.getByRole( 'button', { name: 'Link sides' } )
+			);
+
+			const linkedInput = screen.getByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelect = screen.getByRole( 'combobox', {
+				name: 'Select unit',
+			} );
 
 			expect( linkedInput.value ).toBe( '5' );
 			expect( unitSelect ).toBeInTheDocument();
 		} );
 
-		it( 'should omit style options when requested', () => {
-			renderBorderBoxControl( { enableStyle: false } );
+		it( 'should omit style options when requested', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
-			fireEvent.click( colorButton );
+			await user.click( colorButton );
 
 			const styleLabel = screen.queryByText( 'Style' );
-			const solidButton = queryButton( 'Solid' );
-			const dashedButton = queryButton( 'Dashed' );
-			const dottedButton = queryButton( 'Dotted' );
+			const solidButton = screen.queryByRole( 'button', {
+				name: 'Solid',
+			} );
+			const dashedButton = screen.queryByRole( 'button', {
+				name: 'Dashed',
+			} );
+			const dottedButton = screen.queryByRole( 'button', {
+				name: 'Dotted',
+			} );
 
 			expect( styleLabel ).not.toBeInTheDocument();
 			expect( solidButton ).not.toBeInTheDocument();
@@ -173,12 +207,18 @@ describe( 'BorderBoxControl', () => {
 
 	describe( 'Split view rendering', () => {
 		it( 'should render split view by default when mixed values provided', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
 			const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
-			const unitSelects = screen.getAllByRole( 'combobox' );
-			const sliders = screen.queryAllByRole( 'slider' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
+			const unitSelects = screen.getAllByRole( 'combobox', {
+				name: 'Select unit',
+			} );
+			const sliders = screen.queryAllByRole( 'slider', {
+				name: 'Border width',
+			} );
 			const linkedButton = screen.getByLabelText( 'Link sides' );
 
 			expect( colorButtons.length ).toBe( 4 );
@@ -189,9 +229,11 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		it( 'should render correct width values in appropriate inputs', () => {
-			renderBorderBoxControl( { value: mixedBorders } );
+			render( <BorderBoxControl { ...props } value={ mixedBorders } /> );
 
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '0.75' ); // Left.
@@ -199,39 +241,75 @@ describe( 'BorderBoxControl', () => {
 			expect( widthInputs[ 3 ].value ).toBe( '2' ); // Bottom.
 		} );
 
-		it( 'should render split view correctly when starting with flat border', () => {
-			renderBorderBoxControl( { value: defaultBorders } );
-			clickButton( 'Unlink sides' );
+		it( 'should render split view correctly when starting with flat border', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<BorderBoxControl { ...props } value={ defaultBorders } />
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			const widthInputs = screen.getAllByRole( 'spinbutton' );
+			const widthInputs = screen.getAllByRole( 'spinbutton', {
+				name: 'Border width',
+			} );
 			expect( widthInputs[ 0 ].value ).toBe( '1' ); // Top.
 			expect( widthInputs[ 1 ].value ).toBe( '1' ); // Left.
 			expect( widthInputs[ 2 ].value ).toBe( '1' ); // Right.
 			expect( widthInputs[ 3 ].value ).toBe( '1' ); // Bottom.
 		} );
 
-		it( 'should omit style options when requested', () => {
-			renderBorderBoxControl( { enableStyle: false } );
-			clickButton( 'Unlink sides' );
+		it( 'should omit style options when requested', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
 
-			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
+			render( <BorderBoxControl { ...props } enableStyle={ false } /> );
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Unlink sides' } )
+			);
 
-			colorButtons.forEach( ( button ) => {
-				fireEvent.click( button );
+			const colorButtons = screen.getAllByLabelText( colorPickerRegex );
 
+			function assertStyleOptionsMissing() {
 				const styleLabel = screen.queryByText( 'Style' );
-				const solidButton = queryButton( 'Solid' );
-				const dashedButton = queryButton( 'Dashed' );
-				const dottedButton = queryButton( 'Dotted' );
+				const solidButton = screen.queryByRole( 'button', {
+					name: 'Solid',
+				} );
+				const dashedButton = screen.queryByRole( 'button', {
+					name: 'Dashed',
+				} );
+				const dottedButton = screen.queryByRole( 'button', {
+					name: 'Dotted',
+				} );
 
 				expect( styleLabel ).not.toBeInTheDocument();
 				expect( solidButton ).not.toBeInTheDocument();
 				expect( dashedButton ).not.toBeInTheDocument();
 				expect( dottedButton ).not.toBeInTheDocument();
+			}
 
-				fireEvent.click( button );
-			} );
-		} );
+			await user.click( colorButtons[ 0 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 0 ] );
+
+			await user.click( colorButtons[ 1 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 1 ] );
+
+			await user.click( colorButtons[ 2 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 2 ] );
+
+			await user.click( colorButtons[ 3 ] );
+			assertStyleOptionsMissing();
+			await user.click( colorButtons[ 3 ] );
+		}, 10000 );
 	} );
 
 	describe( 'onChange handling', () => {
@@ -241,16 +319,36 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		describe( 'Linked value change handling', () => {
-			it( 'should set undefined when new border is empty', () => {
-				renderBorderBoxControl( { value: { width: '1px' } } );
-				updateLinkedWidthInput( '' );
+			it( 'should set undefined when new border is empty', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ { width: '1px' } } />
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
 
 				expect( props.onChange ).toHaveBeenCalledWith( undefined );
 			} );
 
-			it( 'should update with complete flat border', () => {
-				renderBorderBoxControl( { value: defaultBorder } );
-				updateLinkedWidthInput( '3' );
+			it( 'should update with complete flat border', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorder } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '3' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -258,18 +356,32 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should maintain mixed values if not explicitly set via linked control', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { color: '#72aee6' },
-						right: { color: '#f6f7f7', style: 'dashed' },
-						bottom: { color: '#e65054', style: 'dotted' },
-						left: { color: undefined },
-					},
+			it( 'should maintain mixed values if not explicitly set via linked control', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
 
-				clickButton( 'Link sides' );
-				updateLinkedWidthInput( '4' );
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { color: '#72aee6' },
+							right: { color: '#f6f7f7', style: 'dashed' },
+							bottom: { color: '#e65054', style: 'dotted' },
+							left: { color: undefined },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '4' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					top: { color: '#72aee6', width: '4px' },
@@ -279,9 +391,20 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should update with consistent split borders', () => {
-				renderBorderBoxControl( { value: defaultBorders } );
-				updateLinkedWidthInput( '10' );
+			it( 'should update with consistent split borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<BorderBoxControl { ...props } value={ defaultBorders } />
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -289,32 +412,56 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should set undefined borders when change results in empty borders', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { width: '1px' },
-						right: { width: '1px' },
-						bottom: { width: '1px' },
-						left: { width: '1px' },
-					},
+			it( 'should set undefined borders when change results in empty borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
-				updateLinkedWidthInput( '' );
+
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { width: '1px' },
+							right: { width: '1px' },
+							bottom: { width: '1px' },
+							left: { width: '1px' },
+						} }
+					/>
+				);
+
+				await user.clear(
+					screen.getByRole( 'spinbutton', { name: 'Border width' } )
+				);
 
 				expect( props.onChange ).toHaveBeenCalledWith( undefined );
 			} );
 
-			it( 'should set flat border when change results in consistent split borders', () => {
-				renderBorderBoxControl( {
-					value: {
-						top: { ...defaultBorder, width: '1px' },
-						right: { ...defaultBorder, width: '2px' },
-						bottom: { ...defaultBorder, width: '3px' },
-						left: { ...defaultBorder, width: '4px' },
-					},
+			it( 'should set flat border when change results in consistent split borders', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
 				} );
 
-				clickButton( 'Link sides' );
-				updateLinkedWidthInput( '10' );
+				render(
+					<BorderBoxControl
+						{ ...props }
+						value={ {
+							top: { ...defaultBorder, width: '1px' },
+							right: { ...defaultBorder, width: '2px' },
+							bottom: { ...defaultBorder, width: '3px' },
+							left: { ...defaultBorder, width: '4px' },
+						} }
+					/>
+				);
+
+				await user.click(
+					screen.getByRole( 'button', { name: 'Link sides' } )
+				);
+
+				const widthInput = screen.getByRole( 'spinbutton', {
+					name: 'Border width',
+				} );
+				await user.clear( widthInput );
+				await user.type( widthInput, '10' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...defaultBorder,
@@ -324,7 +471,11 @@ describe( 'BorderBoxControl', () => {
 		} );
 
 		describe( 'Split value change handling', () => {
-			it( 'should set split borders when the updated borders are mixed', () => {
+			it( 'should set split borders when the updated borders are mixed', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const borders = {
 					top: { ...defaultBorder, width: '1px' },
 					right: { ...defaultBorder, width: '2px' },
@@ -332,8 +483,13 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '4px' },
 				};
 
-				renderBorderBoxControl( { value: borders } );
-				updateSplitWidthInput( '5' );
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '5' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( {
 					...borders,
@@ -341,7 +497,11 @@ describe( 'BorderBoxControl', () => {
 				} );
 			} );
 
-			it( 'should set flat border when updated borders are consistent', () => {
+			it( 'should set flat border when updated borders are consistent', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
 				const borders = {
 					top: { ...defaultBorder, width: '4px' },
 					right: { ...defaultBorder, width: '1px' },
@@ -349,8 +509,13 @@ describe( 'BorderBoxControl', () => {
 					left: { ...defaultBorder, width: '1px' },
 				};
 
-				renderBorderBoxControl( { value: borders } );
-				updateSplitWidthInput( '1' );
+				render( <BorderBoxControl { ...props } value={ borders } /> );
+
+				const widthInput = screen.getAllByRole( 'spinbutton', {
+					name: 'Border width',
+				} )[ 0 ];
+				await user.clear( widthInput );
+				await user.type( widthInput, '1' );
 
 				expect( props.onChange ).toHaveBeenCalledWith( defaultBorder );
 			} );
diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts
index d852a5bd1e40a..8e88e0b958c56 100644
--- a/packages/components/src/border-box-control/types.ts
+++ b/packages/components/src/border-box-control/types.ts
@@ -44,12 +44,11 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		value: AnyBorder;
 		/**
-		 * Start opting into the larger default height that will become the
-		 * default size in a future version.
+		 * Size of the control.
 		 *
-		 * @default false
+		 * @default 'default'
 		 */
-		__next36pxDefaultSize?: boolean;
+		size?: 'default' | '__unstable-large';
 	};
 
 export type LinkedButtonProps = {
@@ -66,12 +65,11 @@ export type LinkedButtonProps = {
 	 */
 	onClick: () => void;
 	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
+	 * Size of the control.
 	 *
-	 * @default false
+	 * @default 'default'
 	 */
-	__next36pxDefaultSize?: boolean;
+	size?: 'default' | '__unstable-large';
 };
 
 export type VisualizerProps = {
@@ -82,12 +80,11 @@ export type VisualizerProps = {
 	 */
 	value?: Borders;
 	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
+	 * Size of the control.
 	 *
-	 * @default false
+	 * @default 'default'
 	 */
-	__next36pxDefaultSize?: boolean;
+	size?: 'default' | '__unstable-large';
 };
 
 export type SplitControlsProps = ColorProps & {
@@ -116,10 +113,9 @@ export type SplitControlsProps = ColorProps & {
 	 */
 	value?: Borders;
 	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
+	 * Size of the control.
 	 *
-	 * @default false
+	 * @default 'default'
 	 */
-	__next36pxDefaultSize?: boolean;
+	size?: 'default' | '__unstable-large';
 };
diff --git a/packages/components/src/border-control/border-control-dropdown/hook.ts b/packages/components/src/border-control/border-control-dropdown/hook.ts
index bcf90b71a59db..a50ad72150054 100644
--- a/packages/components/src/border-control/border-control-dropdown/hook.ts
+++ b/packages/components/src/border-control/border-control-dropdown/hook.ts
@@ -22,7 +22,7 @@ export function useBorderControlDropdown(
 		colors,
 		onChange,
 		previousStyleSelection,
-		__next36pxDefaultSize,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -53,18 +53,16 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown(), className );
-	}, [ className, cx ] );
+		return cx( styles.borderControlDropdown( size ), className );
+	}, [ className, cx, size ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
 	}, [ cx ] );
 
 	const indicatorWrapperClassName = useMemo( () => {
-		return cx(
-			styles.colorIndicatorWrapper( border, __next36pxDefaultSize )
-		);
-	}, [ border, cx, __next36pxDefaultSize ] );
+		return cx( styles.colorIndicatorWrapper( border, size ) );
+	}, [ border, cx, size ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
diff --git a/packages/components/src/border-control/border-control/README.md b/packages/components/src/border-control/border-control/README.md
index 718ec3d703908..83bf939b97961 100644
--- a/packages/components/src/border-control/border-control/README.md
+++ b/packages/components/src/border-control/border-control/README.md
@@ -135,6 +135,14 @@ dropdown. The header includes a label for the color picker and a close button.
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing a border or `undefined`. Used to set the current border
diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
index cae27c1eefa4b..bf0beb8508546 100644
--- a/packages/components/src/border-control/border-control/component.tsx
+++ b/packages/components/src/border-control/border-control/component.tsx
@@ -53,6 +53,7 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
+		size = 'default',
 		sliderClassName,
 		value: border,
 		widthUnit,
@@ -60,7 +61,6 @@ const UnconnectedBorderControl = (
 		withSlider,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderControl( props );
 
@@ -70,7 +70,7 @@ const UnconnectedBorderControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack spacing={ 3 } className={ innerWrapperClassName }>
+			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
 					prefix={
 						<BorderControlDropdown
@@ -89,7 +89,7 @@ const UnconnectedBorderControl = (
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							__next36pxDefaultSize={ __next36pxDefaultSize }
+							size={ size }
 						/>
 					}
 					label={ __( 'Border width' ) }
@@ -100,6 +100,7 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
+					size={ size }
 				/>
 				{ withSlider && (
 					<RangeControl
diff --git a/packages/components/src/border-control/border-control/hook.ts b/packages/components/src/border-control/border-control/hook.ts
index 30215572bfb7f..dec43fe7a1454 100644
--- a/packages/components/src/border-control/border-control/hook.ts
+++ b/packages/components/src/border-control/border-control/hook.ts
@@ -33,9 +33,9 @@ export function useBorderControl(
 		isCompact,
 		onChange,
 		shouldSanitizeBorder = true,
+		size = 'default',
 		value: border,
 		width,
-		__next36pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -65,7 +65,6 @@ export function useBorderControl(
 			const [ parsedValue ] =
 				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
-
 			const updatedBorder = { ...border, width: newWidthValue };
 
 			// Setting the border width explicitly to zero will also set the
@@ -118,13 +117,18 @@ export function useBorderControl(
 		return cx( styles.borderControl, className );
 	}, [ className, cx ] );
 
-	const wrapperWidth = isCompact ? '90px' : width;
+	let wrapperWidth = width;
+	if ( isCompact ) {
+		// Widths below represent the minimum usable width for compact controls.
+		// Taller controls contain greater internal padding, thus greater width.
+		wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+	}
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
+		const heightStyle = styles.wrapperHeight( size );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
+	}, [ wrapperWidth, cx, size ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -143,6 +147,6 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		__next36pxDefaultSize,
+		size,
 	};
 }
diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx
index 59aa440591b7f..2735e3ea2717b 100644
--- a/packages/components/src/border-control/stories/index.tsx
+++ b/packages/components/src/border-control/stories/index.tsx
@@ -36,12 +36,12 @@ export default meta;
 
 // Available border colors.
 const colors = [
-	{ name: 'Blue', color: '#72aee6' },
-	{ name: 'Red', color: '#e65054' },
-	{ name: 'Yellow', color: '#f2d675' },
-	{ name: 'Blue', color: '#72aee6' },
-	{ name: 'Red', color: '#e65054' },
-	{ name: 'Yellow', color: '#f2d675' },
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
 // Multiple origin colors.
@@ -84,14 +84,12 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 
 	return (
 		<SlotFillProvider>
-			<div style={ { maxWidth: '280px' } }>
-				<BorderControl
-					onChange={ onChangeMerged }
-					value={ border }
-					{ ...props }
-				/>
-			</div>
-			{ /* @ts-expect-error Ignore until Popover is converted to TS */ }
+			<BorderControl
+				onChange={ onChangeMerged }
+				value={ border }
+				{ ...props }
+			/>
+			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
 			<Popover.Slot />
 		</SlotFillProvider>
 	);
diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
index 3c49e53a350ee..b105e8b62bd7b 100644
--- a/packages/components/src/border-control/styles.ts
+++ b/packages/components/src/border-control/styles.ts
@@ -13,7 +13,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import {
-	Root as UnitControlWrapper,
+	ValueInput as UnitControlWrapper,
 	UnitSelect,
 } from '../unit-control/styles/unit-control-styles';
 
@@ -56,26 +56,28 @@ export const wrapperWidth = css`
 	}
 `;
 
-/*
- * When default control height is 36px the following should be removed.
- * See: InputControl and __next36pxDefaultSize.
- */
-export const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {
+export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	return css`
-		height: ${ __next36pxDefaultSize ? '36px' : '30px' };
+		height: ${ size === '__unstable-large' ? '40px' : '30px' };
 	`;
 };
 
-export const borderControlDropdown = () => css`
+export const borderControlDropdown = (
+	size?: 'default' | '__unstable-large'
+) => css`
 	background: #fff;
 
 	&& > button {
 		/*
-		 * Override button component height and padding to fit within
-		 * BorderControl regardless of size.
+		 * Override button component styles to fit within BorderControl
+		 * regardless of size.
 		 */
-		height: 100%;
-		padding: ${ space( 0.75 ) };
+		height: ${ size === '__unstable-large' ? '40px' : '30px' };
+		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		${ rtl(
 			{ borderRadius: `2px 0 0 2px` },
 			{ borderRadius: `0 2px 2px 0` }
@@ -106,7 +108,7 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 
 export const colorIndicatorWrapper = (
 	border?: Border,
-	__next36pxDefaultSize?: boolean
+	size?: 'default' | '__unstable-large'
 ) => {
 	const { style } = border || {};
 
@@ -114,9 +116,9 @@ export const colorIndicatorWrapper = (
 		border-radius: 9999px;
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
-		width: ${ __next36pxDefaultSize ? '28px' : '22px' };
-		height: ${ __next36pxDefaultSize ? '28px' : '22px' };
-		padding: ${ __next36pxDefaultSize ? '2px' : '1px' };
+		width: ${ size === '__unstable-large' ? '24px' : '22px' };
+		height: ${ size === '__unstable-large' ? '24px' : '22px' };
+		padding: ${ size === '__unstable-large' ? '2px' : '1px' };
 
 		/*
 		 * ColorIndicator
@@ -125,13 +127,8 @@ export const colorIndicatorWrapper = (
 		 * over the active state of the border control dropdown's toggle button.
 		 */
 		& > span {
-			${ ! __next36pxDefaultSize
-				? css`
-						/* Dimensions fit in 30px overall control height. */
-						height: 16px;
-						width: 16px;
-				  `
-				: '' }
+			height: ${ space( 4 ) };
+			width: ${ space( 4 ) };
 			background: linear-gradient(
 				-45deg,
 				transparent 48%,
diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js
index 5ba468b35302d..922abba8f9c83 100644
--- a/packages/components/src/border-control/test/index.js
+++ b/packages/components/src/border-control/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -22,28 +22,44 @@ const defaultBorder = {
 	width: '1px',
 };
 
-const props = {
-	colors,
-	label: 'Border',
-	onChange: jest.fn().mockImplementation( ( newValue ) => {
-		props.value = newValue;
-	} ),
-	value: defaultBorder,
-};
+function createProps( customProps ) {
+	const props = {
+		colors,
+		label: 'Border',
+		onChange: jest.fn().mockImplementation( ( newValue ) => {
+			props.value = newValue;
+		} ),
+		value: defaultBorder,
+		...customProps,
+	};
+	return props;
+}
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const renderBorderControl = ( customProps ) => {
-	return render( <BorderControl { ...{ ...props, ...customProps } } /> );
+const renderBorderControl = async ( props ) => {
+	const view = render( <BorderControl { ...props } /> );
+	// When the `Popover` component is rendered or updated, the `useFloating`
+	// hook from the `floating-ui` package will schedule a state update in a
+	// promise handler. We need to wait for this promise handler to execute
+	// before checking results. That's what this async `act()` call achieves.
+	// See also: https://floating-ui.com/docs/react-dom#testing
+	await act( () => Promise.resolve() );
+	return view;
 };
 
-const rerenderBorderControl = ( rerender, customProps ) => {
-	return rerender( <BorderControl { ...{ ...props, ...customProps } } /> );
+const rerenderBorderControl = async ( rerender, props ) => {
+	const view = rerender( <BorderControl { ...props } /> );
+	// Same reason to `act()` as in `renderBorderControl` above.
+	await act( () => Promise.resolve() );
+	return view;
 };
 
-const openPopover = () => {
+const openPopover = async () => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	fireEvent.click( toggleButton );
+	// Same reason to `act()` as in `renderBorderControl` above.
+	await act( () => Promise.resolve() );
 };
 
 const getButton = ( name ) => {
@@ -67,7 +83,9 @@ const getWidthInput = () => {
 };
 const setWidthInput = ( value ) => {
 	const widthInput = getWidthInput();
-	widthInput.focus();
+	act( () => {
+		widthInput.focus();
+	} );
 	fireEvent.change( widthInput, { target: { value } } );
 };
 
@@ -75,8 +93,9 @@ const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
-		it( 'should render standard border control', () => {
-			renderBorderControl();
+		it( 'should render standard border control', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -95,8 +114,9 @@ describe( 'BorderControl', () => {
 			expect( slider ).not.toBeInTheDocument();
 		} );
 
-		it( 'should hide label', () => {
-			renderBorderControl( { hideLabelFromVision: true } );
+		it( 'should hide label', async () => {
+			const props = createProps( { hideLabelFromVision: true } );
+			await renderBorderControl( props );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -108,23 +128,26 @@ describe( 'BorderControl', () => {
 			);
 		} );
 
-		it( 'should render with slider', () => {
-			renderBorderControl( { withSlider: true } );
+		it( 'should render with slider', async () => {
+			const props = createProps( { withSlider: true } );
+			await renderBorderControl( props );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should render placeholder in UnitControl', () => {
-			renderBorderControl( { placeholder: 'Mixed' } );
-			const widthInput = getWidthInput();
+		it( 'should render placeholder in UnitControl', async () => {
+			const props = createProps( { placeholder: 'Mixed' } );
+			await renderBorderControl( props );
 
+			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
 		} );
 
-		it( 'should render color and style popover', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should render color and style popover', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 
 			const customColorPicker = getButton( /Custom color picker/ );
 			const colorSwatchButtons = screen.getAllByRole( 'button', {
@@ -145,9 +168,10 @@ describe( 'BorderControl', () => {
 			expect( resetButton ).toBeInTheDocument();
 		} );
 
-		it( 'should render color and style popover header', () => {
-			renderBorderControl( { showDropdownHeader: true } );
-			openPopover();
+		it( 'should render color and style popover header', async () => {
+			const props = createProps( { showDropdownHeader: true } );
+			await renderBorderControl( props );
+			await openPopover();
 
 			const headerLabel = screen.getByText( 'Border color' );
 			const closeButton = getButton( 'Close border color' );
@@ -156,9 +180,10 @@ describe( 'BorderControl', () => {
 			expect( closeButton ).toBeInTheDocument();
 		} );
 
-		it( 'should not render style options when opted out of', () => {
-			renderBorderControl( { enableStyle: false } );
-			openPopover();
+		it( 'should not render style options when opted out of', async () => {
+			const props = createProps( { enableStyle: false } );
+			await renderBorderControl( props );
+			await openPopover();
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = queryButton( 'Solid' );
@@ -174,16 +199,18 @@ describe( 'BorderControl', () => {
 
 	describe( 'color and style picker aria labels', () => {
 		describe( 'with style selection enabled', () => {
-			it( 'should include both color and style in label', () => {
-				renderBorderControl( { value: undefined } );
+			it( 'should include both color and style in label', async () => {
+				const props = createProps( { value: undefined } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', () => {
-				renderBorderControl( { value: { color: '#72aee6' } } );
+			it( 'should correctly describe named color selection', async () => {
+				const props = createProps( { value: { color: '#72aee6' } } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -192,8 +219,9 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', () => {
-				renderBorderControl( { value: { color: '#4b1d80' } } );
+			it( 'should correctly describe custom color selection', async () => {
+				const props = createProps( { value: { color: '#4b1d80' } } );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -202,10 +230,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color and style selections', () => {
-				renderBorderControl( {
+			it( 'should correctly describe named color and style selections', async () => {
+				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -214,10 +243,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color and style selections', () => {
-				renderBorderControl( {
+			it( 'should correctly describe custom color and style selections', async () => {
+				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -228,19 +258,24 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'with style selection disabled', () => {
-			it( 'should only include color in the label', () => {
-				renderBorderControl( { value: undefined, enableStyle: false } );
+			it( 'should only include color in the label', async () => {
+				const props = createProps( {
+					value: undefined,
+					enableStyle: false,
+				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', () => {
-				renderBorderControl( {
+			it( 'should correctly describe named color selection', async () => {
+				const props = createProps( {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -249,11 +284,12 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', () => {
-				renderBorderControl( {
+			it( 'should correctly describe custom color selection', async () => {
+				const props = createProps( {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
+				await renderBorderControl( props );
 
 				expect(
 					screen.getByLabelText(
@@ -265,13 +301,9 @@ describe( 'BorderControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		beforeEach( () => {
-			jest.clearAllMocks();
-			props.value = defaultBorder;
-		} );
-
-		it( 'should update width with slider value', () => {
-			const { rerender } = renderBorderControl( { withSlider: true } );
+		it( 'should update width with slider value', async () => {
+			const props = createProps( { withSlider: true } );
+			const { rerender } = await renderBorderControl( props );
 
 			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
@@ -281,15 +313,16 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			rerenderBorderControl( rerender, { withSlider: true } );
+			await rerenderBorderControl( rerender, props );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
 		} );
 
-		it( 'should update color selection', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should update color selection', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -298,9 +331,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should clear color selection when toggling swatch off', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should clear color selection when toggling swatch off', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -309,9 +343,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should update style selection', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should update style selection', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Dashed' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -320,17 +355,19 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should take no action when color and style popover is closed', () => {
-			renderBorderControl( { showDropdownHeader: true } );
-			openPopover();
+		it( 'should take no action when color and style popover is closed', async () => {
+			const props = createProps( { showDropdownHeader: true } );
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Close border color' );
 
 			expect( props.onChange ).not.toHaveBeenCalled();
 		} );
 
-		it( 'should reset color and style only when popover reset button clicked', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should reset color and style only when popover reset button clicked', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Reset to default' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 1, {
@@ -340,23 +377,25 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should sanitize border when width and color are undefined', () => {
-			const { rerender } = renderBorderControl();
+		it( 'should sanitize border when width and color are undefined', async () => {
+			const props = createProps();
+			const { rerender } = await renderBorderControl( props );
 			clearWidthInput();
-			rerenderBorderControl( rerender );
-			openPopover();
+			await rerenderBorderControl( rerender, props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( undefined );
 		} );
 
-		it( 'should not sanitize border when requested', () => {
-			const { rerender } = renderBorderControl( {
+		it( 'should not sanitize border when requested', async () => {
+			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
+			const { rerender } = await renderBorderControl( props );
 			clearWidthInput();
-			rerenderBorderControl( rerender, { shouldSanitizeBorder: false } );
-			openPopover();
+			await rerenderBorderControl( rerender, props );
+			await openPopover();
 			clickButton( 'Color: Blue' );
 
 			expect( props.onChange ).toHaveBeenNthCalledWith( 2, {
@@ -366,9 +405,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should clear color and set style to `none` when setting zero width', () => {
-			renderBorderControl();
-			openPopover();
+		it( 'should clear color and set style to `none` when setting zero width', async () => {
+			const props = createProps();
+			await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
 			clickButton( 'Dotted' );
 			setWidthInput( '0' );
@@ -380,13 +420,14 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should reselect color and style selections when changing to non-zero width', () => {
-			const { rerender } = renderBorderControl();
-			openPopover();
+		it( 'should reselect color and style selections when changing to non-zero width', async () => {
+			const props = createProps();
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Green' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Dotted' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			setWidthInput( '0' );
 			setWidthInput( '5' );
 
@@ -397,9 +438,10 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should set a non-zero width when applying color to zero width border', () => {
-			const { rerender } = renderBorderControl( { value: undefined } );
-			openPopover();
+		it( 'should set a non-zero width when applying color to zero width border', async () => {
+			const props = createProps( { value: undefined } );
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Color: Yellow' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -409,7 +451,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			rerenderBorderControl( rerender );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -419,12 +461,13 @@ describe( 'BorderControl', () => {
 			} );
 		} );
 
-		it( 'should set a non-zero width when applying style to zero width border', () => {
-			const { rerender } = renderBorderControl( {
+		it( 'should set a non-zero width when applying style to zero width border', async () => {
+			const props = createProps( {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			openPopover();
+			const { rerender } = await renderBorderControl( props );
+			await openPopover();
 			clickButton( 'Dashed' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -434,7 +477,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			rerenderBorderControl( rerender, { shouldSanitizeBorder: false } );
+			await rerenderBorderControl( rerender, props );
 			clickButton( 'Dotted' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
diff --git a/packages/components/src/border-control/types.ts b/packages/components/src/border-control/types.ts
index 3ff10dae8ed9b..7710fb4705493 100644
--- a/packages/components/src/border-control/types.ts
+++ b/packages/components/src/border-control/types.ts
@@ -16,7 +16,7 @@ export type Border = {
 
 export type Color = {
 	name: string;
-	color: CSSProperties[ 'color' ];
+	color: NonNullable< CSSProperties[ 'color' ] >;
 };
 
 export type ColorOrigin = {
@@ -123,12 +123,11 @@ export type BorderControlProps = ColorProps &
 		 */
 		withSlider?: boolean;
 		/**
-		 * Start opting into the larger default height that will become the
-		 * default size in a future version.
+		 * Size of the control.
 		 *
-		 * @default false
+		 * @default 'default'
 		 */
-		__next36pxDefaultSize?: boolean;
+		size?: 'default' | '__unstable-large';
 	};
 
 export type DropdownProps = ColorProps & {
@@ -165,12 +164,11 @@ export type DropdownProps = ColorProps & {
 	 */
 	showDropdownHeader?: boolean;
 	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
+	 * Size of the control.
 	 *
-	 * @default false
+	 * @default 'default'
 	 */
-	__next36pxDefaultSize?: boolean;
+	size?: 'default' | '__unstable-large';
 };
 
 export type StylePickerProps = LabelProps & {
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 8a704482cacd1..edf3993679033 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -95,3 +95,17 @@ The `top`, `right`, `bottom`, and `left` box dimension values.
 
 -   Type: `Object`
 -   Required: No
+
+### onMouseOver
+
+A handler for onMouseOver events.
+
+-   Type: `Function`
+-   Required: No
+
+### onMouseOut
+
+A handler for onMouseOut events.
+
+-   Type: `Function`
+-   Required: No
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index f5e8e7428c801..d8a0fdf4c6748 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -52,6 +52,8 @@ export default function BoxControl( {
 	splitOnAxis = false,
 	allowReset = true,
 	resetValues = DEFAULT_VALUES,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp, {
 		fallback: DEFAULT_VALUES,
@@ -114,6 +116,8 @@ export default function BoxControl( {
 		setSelectedUnits,
 		sides,
 		values: inputValues,
+		onMouseOver,
+		onMouseOut,
 	};
 
 	return (
diff --git a/packages/components/src/box-control/stories/index.js b/packages/components/src/box-control/stories/index.js
index f0bab8e21481d..55cf2628c670c 100644
--- a/packages/components/src/box-control/stories/index.js
+++ b/packages/components/src/box-control/stories/index.js
@@ -1,17 +1,12 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import BoxControl from '../';
-import { Flex, FlexBlock } from '../../flex';
 
 export default {
 	title: 'Components (Experimental)/BoxControl',
@@ -37,19 +32,13 @@ function DemoExample( {
 	const [ values, setValues ] = useState( defaultValues );
 
 	return (
-		<Container align="top" gap={ 8 }>
-			<FlexBlock>
-				<Content>
-					<BoxControl
-						label="Padding"
-						values={ values }
-						sides={ sides }
-						onChange={ setValues }
-						splitOnAxis={ splitOnAxis }
-					/>
-				</Content>
-			</FlexBlock>
-		</Container>
+		<BoxControl
+			label="Padding"
+			values={ values }
+			sides={ sides }
+			onChange={ setValues }
+			splitOnAxis={ splitOnAxis }
+		/>
 	);
 }
 
@@ -84,11 +73,3 @@ export const axialControlsWithSingleSide = () => {
 		/>
 	);
 };
-
-const Container = styled( Flex )`
-	max-width: 780px;
-`;
-
-const Content = styled.div`
-	padding: 20px;
-`;
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index 3bf23aed95d47..b8b3a7f3111d2 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -127,7 +127,6 @@ Whether the button is disabled. If `true`, this will force a `button` element to
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### href
 
@@ -135,7 +134,6 @@ If provided, renders `a` instead of `button`.
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### variant
 
@@ -143,7 +141,6 @@ Specifies the button's style. The accepted values are `'primary'` (the primary b
 
 -   Type: `String`
 -   Required: No
--   Default: `undefined`
 
 #### isDestructive
 
@@ -151,7 +148,6 @@ Renders a red text-based button style to indicate destructive behavior.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isSmall
 
@@ -159,7 +155,6 @@ Decreases the size of the button.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isPressed
 
@@ -167,7 +162,6 @@ Renders a pressed button style.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### isBusy
 
@@ -175,7 +169,6 @@ Indicates activity while a action is being performed.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### focus
 
@@ -183,7 +176,6 @@ Whether the button is focused.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### target
 
@@ -205,15 +197,13 @@ If provided, renders an [Icon](/packages/components/src/icon/README.md) componen
 
 -   Type: `String|Function|WPComponent|null`
 -   Required: No
--   Default: `null`
 
 #### iconSize
 
-If provided with `icon`, sets the icon size.
+If provided with `icon`, sets the icon size. Please refer to the [Icon](/packages/components/src/icon/README.md) component for more details regarding the default value of its `size` prop.
 
 -   Type: `Number`
 -   Required: No
--   Default: `20 when a Dashicon is rendered, 24 for all other icons.`
 
 #### iconPosition
 
@@ -236,15 +226,13 @@ If provided, renders a [Tooltip](/packages/components/src/tooltip/README.md) com
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
 #### tooltipPosition
 
-If provided with`showTooltip`, sets the position of the tooltip.
+If provided with`showTooltip`, sets the position of the tooltip. Please refer to the [Tooltip](/packages/components/src/tooltip/README.md) component for more details regarding the defaults.
 
 -   Type: `String`
 -   Require: No
--   Default:`top center`
 
 #### shortcut
 
@@ -252,7 +240,6 @@ If provided with `showTooltip`, appends the Shortcut label to the tooltip conten
 
 -   Type: `String|Object`
 -   Required: No
--   Default: `undefined`
 
 #### label
 
diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index f71823d073464..428d1851c6640 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { text, number, boolean } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
 import {
 	formatBold,
 	formatItalic,
-	link as linkIcon,
+	link,
 	more,
 	wordpress,
 } from '@wordpress/icons';
@@ -23,142 +18,120 @@ import Button from '../';
 export default {
 	title: 'Components/Button',
 	component: Button,
+	argTypes: {
+		label: {
+			control: { type: 'text' },
+			description:
+				'Sets the `aria-label` of the component, if none is provided. Sets the Tooltip content if `showTooltip` is provided.',
+		},
+		children: {
+			control: { type: 'text' },
+		},
+		href: {
+			control: { type: 'text' },
+			description: 'If provided, renders `a` instead of `button`.',
+		},
+		icon: {
+			control: { type: 'select' },
+			description:
+				'If provided, renders an `Icon` component inside the button.',
+			options: [ 'wordpress', 'link', 'more' ],
+			mapping: {
+				wordpress,
+				link,
+				more,
+			},
+		},
+		iconSize: {
+			control: { type: 'number' },
+			description: 'If provided with `icon`, sets the icon size.',
+		},
+		iconPosition: {
+			control: { type: 'select' },
+			description:
+				'If provided with `icon`, sets the position of icon relative to the `text`. Available options are `left|right`.',
+			options: [ 'left', 'right' ],
+			table: {
+				defaultValue: { summary: `left` },
+			},
+		},
+		isBusy: {
+			control: 'boolean',
+			description:
+				'Indicates activity while a action is being performed.',
+		},
+		isDestructive: {
+			control: 'boolean',
+			description:
+				'Renders a red text-based button style to indicate destructive behavior.',
+		},
+		isPressed: {
+			control: 'boolean',
+			description: 'Renders a pressed button style.',
+		},
+		isSmall: {
+			control: 'boolean',
+			description: 'Decreases the size of the button.',
+		},
+		disabled: {
+			control: 'boolean',
+			description:
+				'Whether the button is disabled. If `true`, this will force a `button` element to be rendered.',
+		},
+		shortcut: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, appends the Shortcut label to the tooltip content. If an `Object` is provided, it should contain `display` and `ariaLabel` keys.',
+		},
+		showTooltip: {
+			control: 'boolean',
+			description:
+				'If provided, renders a `Tooltip` component for the button.',
+		},
+		tooltipPosition: {
+			control: { type: 'text' },
+			description:
+				'If provided with `showTooltip`, sets the position of the tooltip.',
+		},
+		text: {
+			control: { type: 'text' },
+			description:
+				'If provided, displays the given text inside the button. If the button contains `children` elements, the text is displayed before them.',
+		},
+		target: {
+			control: { type: 'text' },
+			description:
+				'If provided with `href`, sets the `target` attribute to the `a`.',
+		},
+		variant: {
+			control: { type: 'select' },
+			description: "Specifies the button's style.",
+			options: [ 'primary', 'secondary', 'tertiary', 'link' ],
+		},
+		__experimentalIsFocusable: {
+			control: 'boolean',
+			description: 'Makes the button focusable even when disabled',
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const label = text( 'Label', 'Default Button' );
-
-	return <Button>{ label }</Button>;
-};
-
-export const primary = () => {
-	const label = text( 'Label', 'Primary Button' );
-
-	return <Button variant="primary">{ label }</Button>;
-};
-
-export const secondary = () => {
-	const label = text( 'Label', 'Secondary Button' );
-
-	return <Button variant="secondary">{ label }</Button>;
-};
-
-export const tertiary = () => {
-	const label = text( 'Label', 'Tertiary Button' );
-
-	return <Button variant="tertiary">{ label }</Button>;
-};
-
-export const isDestructive = () => {
-	const label = text( 'Label', 'Destructive Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
+function Template( { children, ...props } ) {
+	return <Button { ...props }>{ children }</Button>;
+}
 
-	return (
-		<Button isDestructive isSmall={ isSmall } disabled={ disabled }>
-			{ label }
-		</Button>
-	);
-};
-
-export const isPrimaryDestructive = () => {
-	const label = text( 'Label', 'Destructive Primary Button' );
-	const isSmall = boolean( 'isSmall', false );
-	const disabled = boolean( 'disabled', false );
-
-	return (
-		<Button
-			variant="primary"
-			isDestructive
-			isSmall={ isSmall }
-			disabled={ disabled }
-		>
-			{ label }
-		</Button>
-	);
-};
-
-export const small = () => {
-	const label = text( 'Label', 'Small Button' );
-
-	return <Button isSmall>{ label }</Button>;
-};
-
-export const pressed = () => {
-	const label = text( 'Label', 'Pressed Button' );
-
-	return <Button isPressed>{ label }</Button>;
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'Code is poetry',
 };
 
-export const disabled = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return <Button disabled>{ label }</Button>;
-};
-
-export const disabledFocusable = () => {
-	const label = text( 'Label', 'Disabled Button' );
-
-	return (
-		<Button disabled __experimentalIsFocusable>
-			{ label }
-		</Button>
-	);
-};
-
-export const link = () => {
-	const label = text( 'Label', 'Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank">
-			{ label }
-		</Button>
-	);
-};
-
-export const disabledLink = () => {
-	const label = text( 'Label', 'Disabled Link Button' );
-
-	return (
-		<Button href="https://wordpress.org/" target="_blank" disabled>
-			{ label }
-		</Button>
-	);
-};
-
-export const destructiveLink = () => {
-	const label = text( 'Label', 'Destructive Link' );
-
-	return (
-		<Button isDestructive variant="link">
-			{ label }
-		</Button>
-	);
-};
-
-export const icon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return <Button icon={ wordpress } label={ label } iconSize={ size } />;
-};
-
-export const disabledFocusableIcon = () => {
-	const label = text( 'Label', 'Code is poetry' );
-	const size = number( 'Size', 24 );
-
-	return (
-		<Button
-			icon={ wordpress }
-			label={ label }
-			iconSize={ size }
-			disabled
-			__experimentalIsFocusable
-		/>
-	);
+export const Icon = Template.bind( {} );
+Icon.args = {
+	label: 'Code is poetry',
+	icon: 'wordpress',
 };
 
 export const groupedIcons = () => {
@@ -170,49 +143,7 @@ export const groupedIcons = () => {
 		<GroupContainer>
 			<Button icon={ formatBold } label="Bold" />
 			<Button icon={ formatItalic } label="Italic" />
-			<Button icon={ linkIcon } label="Link" />
+			<Button icon={ link } label="Link" />
 		</GroupContainer>
 	);
 };
-
-export const buttons = () => {
-	return (
-		<div style={ { padding: '20px' } }>
-			<h2>Small Buttons</h2>
-			<div className="story-buttons-container">
-				<Button isSmall>Button</Button>
-				<Button variant="primary" isSmall>
-					Primary Button
-				</Button>
-				<Button variant="secondary" isSmall>
-					Secondary Button
-				</Button>
-				<Button variant="tertiary" isSmall>
-					Tertiary Button
-				</Button>
-				<Button isSmall icon={ more } />
-				<Button isSmall variant="primary" icon={ more } />
-				<Button isSmall variant="secondary" icon={ more } />
-				<Button isSmall variant="tertiary" icon={ more } />
-				<Button isSmall variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-
-			<h2>Regular Buttons</h2>
-			<div className="story-buttons-container">
-				<Button>Button</Button>
-				<Button variant="primary">Primary Button</Button>
-				<Button variant="secondary">Secondary Button</Button>
-				<Button variant="tertiary">Tertiary Button</Button>
-				<Button icon={ more } />
-				<Button variant="primary" icon={ more } />
-				<Button variant="secondary" icon={ more } />
-				<Button variant="tertiary" icon={ more } />
-				<Button variant="primary" icon={ more }>
-					Icon & Text
-				</Button>
-			</div>
-		</div>
-	);
-};
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 78edbb6463f64..29b8d4aa2cba9 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -171,52 +171,30 @@
 	/**
 	 * Destructive buttons.
 	 */
-
 	&.is-destructive {
-		color: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-
-		&:focus:not(:disabled) {
-			color: $components-color-accent;
-		}
-
-		&:active:not(:disabled) {
-			background: $gray-400;
-		}
-	}
+		--wp-components-color-accent: #{$alert-red};
+		--wp-components-color-accent-darker-10: #{darken($alert-red, 10%)};
+		--wp-components-color-accent-darker-20: #{darken($alert-red, 20%)};
 
-	&.is-destructive.is-primary {
-		color: #fff;
-		background: $alert-red;
-		box-shadow: inset 0 0 0 $border-width $alert-red;
-
-		&:hover:not(:disabled) {
-			color: #fff;
-			background: darken($alert-red, 20%);
-			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
-		}
-	}
+		// Only the default variant is styled differently from the non-destructive counterparts.
+		&:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
+			color: $alert-red;
+			box-shadow: inset 0 0 0 $border-width $alert-red;
 
-	&.is-destructive.is-tertiary {
-		box-shadow: none;
+			&:hover:not(:disabled) {
+				color: darken($alert-red, 20%);
+			}
 
-		&:hover:not(:disabled) {
-			box-shadow: inset 0 0 0 $border-width $alert-red;
-			color: $alert-red;
-		}
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
+			}
 
-		&:focus:not(:disabled) {
-			box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $alert-red;
-			color: $alert-red;
+			&:active:not(:disabled) {
+				background: $gray-400;
+			}
 		}
 	}
 
-
 	/**
 	 * Link buttons.
 	 */
@@ -241,21 +219,6 @@
 		&:focus {
 			border-radius: $radius-block-ui;
 		}
-
-		// Link buttons that are red to indicate destructive behavior.
-		&.is-destructive {
-			color: $alert-red;
-
-			&:active:not(:disabled),
-			&:hover:not(:disabled) {
-				color: darken($alert-red, 20%);
-				background: none;
-			}
-
-			&:focus:not(:disabled) {
-				color: $components-color-accent;
-			}
-		}
 	}
 
 	&:not([aria-disabled="true"]):active {
@@ -315,7 +278,7 @@
 		}
 
 		&.has-text {
-			justify-content: left;
+			justify-content: start;
 		}
 
 		&.has-text svg {
diff --git a/packages/components/src/card/stories/index.tsx b/packages/components/src/card/stories/index.tsx
index c771dc62cdbfe..a6de3a458cf60 100644
--- a/packages/components/src/card/stories/index.tsx
+++ b/packages/components/src/card/stories/index.tsx
@@ -40,36 +40,32 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => {
-	return (
-		<div style={ { maxWidth: '280px' } }>
-			<Card { ...args }>
-				<CardHeader>
-					<Heading>CardHeader</Heading>
-				</CardHeader>
-				<CardBody>
-					<Text>CardBody</Text>
-				</CardBody>
-				<CardBody>
-					<Text>CardBody (before CardDivider)</Text>
-				</CardBody>
-				<CardDivider />
-				<CardBody>
-					<Text>CardBody (after CardDivider)</Text>
-				</CardBody>
-				<CardMedia>
-					<img
-						alt="Card Media"
-						src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
-					/>
-				</CardMedia>
-				<CardFooter>
-					<Text>CardFooter</Text>
-					<Button variant="secondary">Action Button</Button>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-};
+const Template: ComponentStory< typeof Card > = ( args ) => (
+	<Card { ...args }>
+		<CardHeader>
+			<Heading>CardHeader</Heading>
+		</CardHeader>
+		<CardBody>
+			<Text>CardBody</Text>
+		</CardBody>
+		<CardBody>
+			<Text>CardBody (before CardDivider)</Text>
+		</CardBody>
+		<CardDivider />
+		<CardBody>
+			<Text>CardBody (after CardDivider)</Text>
+		</CardBody>
+		<CardMedia>
+			<img
+				alt="Card Media"
+				src="https://images.unsplash.com/photo-1566125882500-87e10f726cdc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1867&q=80"
+			/>
+		</CardMedia>
+		<CardFooter>
+			<Text>CardFooter</Text>
+			<Button variant="secondary">Action Button</Button>
+		</CardFooter>
+	</Card>
+);
 
 export const Default: ComponentStory< typeof Card > = Template.bind( {} );
diff --git a/packages/components/src/card/test/__snapshots__/index.tsx.snap b/packages/components/src/card/test/__snapshots__/index.tsx.snap
index 2325e13746aa9..2abd66b0067ea 100644
--- a/packages/components/src/card/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/card/test/__snapshots__/index.tsx.snap
@@ -90,27 +90,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -5,18 +5,18 @@
-  >
-    <div
-      class="css-mgwsf4-View-Content e19lxcc00"
+@@ -6,18 +6,18 @@
     >
       <div
--       class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
-+       class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardHeader"
-      >
-        Header
-      </div>
-      <div
--       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
-+       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="CardBody"
+        class="css-mgwsf4-View-Content e19lxcc00"
       >
-        Code is Poetry
-      </div>
+        <div
+-         class="components-flex components-card__header components-card-header css-3fkkv8-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-medium e19lxcc00"
++         class="components-flex components-card__header components-card-header css-2feznw-View-Flex-base-ItemsRow-Header-borderRadius-borderColor-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardHeader"
+        >
+          Header
+        </div>
+        <div
+-         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium e19lxcc00"
++         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="CardBody"
+        >
+          Code is Poetry
+        </div>
 `;
 
 exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
@@ -768,24 +768,25 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -8,16 +8,16 @@
-    >
-      Code is Poetry
+@@ -9,17 +9,17 @@
+      >
+        Code is Poetry
+      </div>
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+      <div
+        aria-hidden="true"
+-       class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
++       class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
     </div>
-    <div
-      aria-hidden="true"
--     class="components-elevation css-1lsfy80-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
-    <div
-      aria-hidden="true"
--     class="components-elevation css-18cl04p-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-+     class="components-elevation css-15t1t3g-View-Elevation-sx-Base-elevationClassName e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Elevation"
-    />
   </div>
 `;
 
diff --git a/packages/components/src/card/test/index.tsx b/packages/components/src/card/test/index.tsx
index d04559606047e..7508a87e24d3c 100644
--- a/packages/components/src/card/test/index.tsx
+++ b/packages/components/src/card/test/index.tsx
@@ -70,9 +70,7 @@ describe( 'Card', () => {
 				<Card>Code is Poetry</Card>
 			);
 
-			expect( withElevation.firstChild ).toMatchDiffSnapshot(
-				withoutElevation.firstChild
-			);
+			expect( withElevation ).toMatchDiffSnapshot( withoutElevation );
 		} );
 
 		it( 'should add different amounts of white space when using the size prop', () => {
@@ -90,9 +88,7 @@ describe( 'Card', () => {
 				</Card>
 			);
 
-			expect( withSizeDefault.firstChild ).toMatchDiffSnapshot(
-				withSizeLarge.firstChild
-			);
+			expect( withSizeDefault ).toMatchDiffSnapshot( withSizeLarge );
 		} );
 
 		it( 'should warn when the isElevated prop is passed', () => {
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index 6b85a49220374..f41813906fcab 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -16,13 +16,14 @@ import Button from '../button';
 import Dropdown from '../dropdown';
 import Tooltip from '../tooltip';
 
-function Option( {
-	className,
-	isSelected,
-	selectedIconProps,
-	tooltipText,
-	...additionalProps
-} ) {
+function Option( props ) {
+	const {
+		className,
+		isSelected,
+		selectedIconProps,
+		tooltipText,
+		...additionalProps
+	} = props;
 	const optionButton = (
 		<Button
 			isPressed={ isSelected }
@@ -52,12 +53,8 @@ function Option( {
 	);
 }
 
-function DropdownLinkAction( {
-	buttonProps,
-	className,
-	dropdownProps,
-	linkText,
-} ) {
+function DropdownLinkAction( props ) {
+	const { buttonProps, className, dropdownProps, linkText } = props;
 	return (
 		<Dropdown
 			className={ classnames(
@@ -80,7 +77,8 @@ function DropdownLinkAction( {
 	);
 }
 
-function ButtonAction( { className, children, ...additionalProps } ) {
+function ButtonAction( props ) {
+	const { className, children, ...additionalProps } = props;
 	return (
 		<Button
 			className={ classnames(
@@ -95,12 +93,8 @@ function ButtonAction( { className, children, ...additionalProps } ) {
 	);
 }
 
-export default function CircularOptionPicker( {
-	actions,
-	className,
-	options,
-	children,
-} ) {
+export default function CircularOptionPicker( props ) {
+	const { actions, className, options, children } = props;
 	return (
 		<div
 			className={ classnames(
diff --git a/packages/components/src/color-palette/README.md b/packages/components/src/color-palette/README.md
index 2c9fafb0e9736..78db82c391b90 100644
--- a/packages/components/src/color-palette/README.md
+++ b/packages/components/src/color-palette/README.md
@@ -1,54 +1,6 @@
 # ColorPalette
 
-## Props
-
-The component accepts the following props.
-
-{ colors, disableCustomColors = false, value, onChange, className, clearable = true }
-
-### colors
-
-Array with the colors to be shown.
-
--   Type: `Array`
--   Required: Yes
-
-### disableCustomColors
-
-Whether to allow custom color or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: false
-
-### value
-
-currently active value
-
--   Type: `String`
--   Required: No
-
-### onChange
-
-Callback called when a color is selected.
-
--   Type: `Function`
--   Required: Yes
-
-### className
-
-classes to be applied to the container.
-
--   Type: `String`
--   Required: No
-
-### clearable
-
-Whether the palette should have a clearing button or not.
-
--   Type: `Boolean`
--   Required: No
--   Default: true
+`ColorPalette` allows the user to pick a color from a list of pre-defined color entries.
 
 ## Usage
 
@@ -79,3 +31,53 @@ If you're using this component outside the editor, you can
 for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
 `Popover.Slot` further up the element tree and within a
 `SlotFillProvider` overall.
+
+## Props
+
+The component accepts the following props.
+
+### `colors`: `( PaletteObject | ColorObject )[]`
+
+Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
+
+-   Required: No
+-   Default: `[]`
+
+### `disableCustomColors`: `boolean`
+
+Whether to allow the user to pick a custom color on top of the predefined choices (defined via the `colors` prop).
+
+-   Required: No
+-   Default: `false`
+
+### `enableAlpha`: `boolean`
+
+Whether the color picker should display the alpha channel both in the bottom inputs as well as in the color picker itself.
+
+-   Required: No
+-   Default: `false`
+
+### `value`: `string`
+
+currently active value
+
+-   Required: No
+
+### `onChange`: `OnColorChange`
+
+Callback called when a color is selected.
+
+-   Required: Yes
+
+### `className`: `string`
+
+classes to be applied to the container.
+
+-   Required: No
+
+### `clearable`: `boolean`
+
+Whether the palette should have a clearing button.
+
+-   Required: No
+-   Default: `true`
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.tsx
similarity index 64%
rename from packages/components/src/color-palette/index.js
rename to packages/components/src/color-palette/index.tsx
index baf8826850765..492d0f40709cd 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.tsx
@@ -1,7 +1,7 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
+import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -10,7 +10,7 @@ import a11yPlugin from 'colord/plugins/a11y';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +23,15 @@ import { Flex, FlexItem } from '../flex';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
+import type {
+	ColorObject,
+	ColorPaletteProps,
+	CustomColorPickerDropdownProps,
+	MultiplePalettesProps,
+	PaletteObject,
+	SinglePaletteProps,
+} from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -33,7 +42,7 @@ function SinglePalette( {
 	onChange,
 	value,
 	actions,
-} ) {
+}: SinglePaletteProps ) {
 	const colorOptions = useMemo( () => {
 		return colors.map( ( { color, name }, index ) => {
 			const colordColor = colord( color );
@@ -74,6 +83,11 @@ function SinglePalette( {
 			);
 		} );
 	}, [ colors, value, onChange, clearColor ] );
+
+	if ( colors.length === 0 ) {
+		return null;
+	}
+
 	return (
 		<CircularOptionPicker
 			className={ className }
@@ -90,7 +104,11 @@ function MultiplePalettes( {
 	onChange,
 	value,
 	actions,
-} ) {
+}: MultiplePalettesProps ) {
+	if ( colors.length === 0 ) {
+		return null;
+	}
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ colors.map( ( { name, colors: colorPalette }, index ) => {
@@ -117,7 +135,7 @@ export function CustomColorPickerDropdown( {
 	isRenderedInSidebar,
 	popoverProps: receivedPopoverProps,
 	...props
-} ) {
+}: CustomColorPickerDropdownProps ) {
 	const popoverProps = useMemo(
 		() => ( {
 			shift: true,
@@ -148,9 +166,9 @@ export function CustomColorPickerDropdown( {
 }
 
 export const extractColorNameFromCurrentValue = (
-	currentValue,
-	colors = [],
-	showMultiplePalettes = false
+	currentValue?: ColorPaletteProps[ 'value' ],
+	colors: ColorPaletteProps[ 'colors' ] = [],
+	showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
 ) => {
 	if ( ! currentValue ) {
 		return '';
@@ -162,7 +180,10 @@ export const extractColorNameFromCurrentValue = (
 		: colord( currentValue ).toHex();
 
 	// Normalize format of `colors` to simplify the following loop
-	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
+	type normalizedPaletteObject = { colors: ColorObject[] };
+	const colorPalettes: normalizedPaletteObject[] = showMultiplePalettes
+		? ( colors as PaletteObject[] )
+		: [ { colors: colors as ColorObject[] } ];
 	for ( const { colors: paletteColors } of colorPalettes ) {
 		for ( const { name: colorName, color: colorValue } of paletteColors ) {
 			const normalizedColorValue = currentValueIsCssVariable
@@ -179,28 +200,62 @@ export const extractColorNameFromCurrentValue = (
 	return __( 'Custom' );
 };
 
-export const showTransparentBackground = ( currentValue ) => {
+export const showTransparentBackground = ( currentValue?: string ) => {
 	if ( typeof currentValue === 'undefined' ) {
 		return true;
 	}
 	return colord( currentValue ).alpha() === 0;
 };
 
-export default function ColorPalette( {
-	clearable = true,
-	className,
-	colors,
-	disableCustomColors = false,
-	enableAlpha,
-	onChange,
-	value,
-	__experimentalHasMultipleOrigins = false,
-	__experimentalIsRenderedInSidebar = false,
-} ) {
+const areColorsMultiplePalette = (
+	colors: NonNullable< ColorPaletteProps[ 'colors' ] >
+): colors is PaletteObject[] => {
+	return colors.every( ( colorObj ) =>
+		Array.isArray( ( colorObj as PaletteObject ).colors )
+	);
+};
+
+function UnforwardedColorPalette(
+	props: WordPressComponentProps< ColorPaletteProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const {
+		clearable = true,
+		colors = [],
+		disableCustomColors = false,
+		enableAlpha,
+		onChange,
+		value,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+		...otherProps
+	} = props;
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const showMultiplePalettes =
-		__experimentalHasMultipleOrigins && colors?.length;
-	const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
+
+	const buttonLabelName = useMemo(
+		() =>
+			extractColorNameFromCurrentValue(
+				value,
+				colors,
+				__experimentalHasMultipleOrigins
+			),
+		[ value, colors, __experimentalHasMultipleOrigins ]
+	);
+
+	// Make sure that the `colors` array has a format (single/multiple) that is
+	// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
+	// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
+	// either both `true` or both `false`.
+	if (
+		colors.length > 0 &&
+		__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
+	) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
+		);
+		return null;
+	}
 
 	const renderCustomColorPicker = () => (
 		<DropdownContentWrapper paddingSize="none">
@@ -212,20 +267,11 @@ export default function ColorPalette( {
 		</DropdownContentWrapper>
 	);
 
-	const colordColor = colord( value );
+	const colordColor = colord( value ?? '' );
 
 	const valueWithoutLeadingHash = value?.startsWith( '#' )
 		? value.substring( 1 )
 		: value ?? '';
-	const buttonLabelName = useMemo(
-		() =>
-			extractColorNameFromCurrentValue(
-				value,
-				colors,
-				showMultiplePalettes
-			),
-		[ value, colors, showMultiplePalettes ]
-	);
 
 	const customColorAccessibleLabel = !! valueWithoutLeadingHash
 		? sprintf(
@@ -238,8 +284,20 @@ export default function ColorPalette( {
 		  )
 		: __( 'Custom color picker.' );
 
+	const paletteCommonProps = {
+		clearable,
+		clearColor,
+		onChange,
+		value,
+		actions: !! clearable && (
+			<CircularOptionPicker.ButtonAction onClick={ clearColor }>
+				{ __( 'Clear' ) }
+			</CircularOptionPicker.ButtonAction>
+		),
+	};
+
 	return (
-		<VStack spacing={ 3 } className={ className }>
+		<VStack spacing={ 3 } ref={ forwardedRef } { ...otherProps }>
 			{ ! disableCustomColors && (
 				<CustomColorPickerDropdown
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
@@ -284,22 +342,45 @@ export default function ColorPalette( {
 					) }
 				/>
 			) }
-			<Component
-				clearable={ clearable }
-				clearColor={ clearColor }
-				colors={ colors }
-				onChange={ onChange }
-				value={ value }
-				actions={
-					!! clearable && (
-						<CircularOptionPicker.ButtonAction
-							onClick={ clearColor }
-						>
-							{ __( 'Clear' ) }
-						</CircularOptionPicker.ButtonAction>
-					)
-				}
-			/>
+			{ __experimentalHasMultipleOrigins ? (
+				<MultiplePalettes
+					{ ...paletteCommonProps }
+					colors={ colors as PaletteObject[] }
+				/>
+			) : (
+				<SinglePalette
+					{ ...paletteCommonProps }
+					colors={ colors as ColorObject[] }
+				/>
+			) }
 		</VStack>
 	);
 }
+
+/**
+ * Allows the user to pick a color from a list of pre-defined color entries.
+ *
+ * ```jsx
+ * import { ColorPalette } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyColorPalette = () => {
+ *   const [ color, setColor ] = useState ( '#f00' )
+ *   const colors = [
+ *     { name: 'red', color: '#f00' },
+ *     { name: 'white', color: '#fff' },
+ *     { name: 'blue', color: '#00f' },
+ *   ];
+ *   return (
+ *     <ColorPalette
+ *       colors={ colors }
+ *       value={ color }
+ *       onChange={ ( color ) => setColor( color ) }
+ *     />
+ *   );
+ * } );
+ * ```
+ */
+export const ColorPalette = forwardRef( UnforwardedColorPalette );
+
+export default ColorPalette;
diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.tsx
similarity index 57%
rename from packages/components/src/color-palette/stories/index.js
rename to packages/components/src/color-palette/stories/index.tsx
index 1b278e3ca9657..46bf8cfae609e 100644
--- a/packages/components/src/color-palette/stories/index.js
+++ b/packages/components/src/color-palette/stories/index.tsx
@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,34 +12,25 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPalette from '../';
+import ColorPalette from '..';
 import Popover from '../../popover';
 import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { ColorObject, PaletteObject } from '../types';
 
-const meta = {
+const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
+		// Removing the control because setting this prop without changing the
+		// format of the `colors` prop can break the component.
 		__experimentalHasMultipleOrigins: {
 			control: {
 				type: null,
 			},
 		},
-		__experimentalIsRenderedInSidebar: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		clearable: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		disableCustomColors: {
-			control: {
-				type: 'boolean',
-			},
-		},
+		as: { control: { type: null } },
+		onChange: { action: 'onChange', control: { type: null } },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -42,14 +39,26 @@ const meta = {
 };
 export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof ColorPalette > = ( {
+	onChange,
+	...args
+} ) => {
 	const firstColor =
-		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState( firstColor );
+		( args.colors as ColorObject[] )[ 0 ].color ||
+		( args.colors as PaletteObject[] )[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState< string | undefined >( firstColor );
 
 	return (
 		<SlotFillProvider>
-			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			<ColorPalette
+				{ ...args }
+				value={ color }
+				onChange={ ( newColor ) => {
+					setColor( newColor );
+					onChange?.( newColor );
+				} }
+			/>
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
 			<Popover.Slot />
 		</SlotFillProvider>
 	);
@@ -92,14 +101,16 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables = ( args ) => {
+export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
-			style={ {
-				'--red': '#f00',
-				'--yellow': '#ff0',
-				'--blue': '#00f',
-			} }
+			style={
+				{
+					'--red': '#f00',
+					'--yellow': '#ff0',
+					'--blue': '#00f',
+				} as CSSProperties
+			}
 		>
 			<Template { ...args } />
 		</div>
diff --git a/packages/components/src/color-palette/style.scss b/packages/components/src/color-palette/style.scss
index 1ede67de8d654..5f09fcca34edc 100644
--- a/packages/components/src/color-palette/style.scss
+++ b/packages/components/src/color-palette/style.scss
@@ -14,9 +14,9 @@
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 25px 25px;
+	background-position: 0 0, 24px 24px;
 	/*rtl:end:ignore*/
-	background-size: calc(2 * 25px) calc(2 * 25px);
+	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;
diff --git a/packages/components/src/color-palette/styles.js b/packages/components/src/color-palette/styles.ts
similarity index 100%
rename from packages/components/src/color-palette/styles.js
rename to packages/components/src/color-palette/styles.ts
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
similarity index 100%
rename from packages/components/src/color-palette/test/__snapshots__/index.js.snap
rename to packages/components/src/color-palette/test/__snapshots__/index.tsx.snap
diff --git a/packages/components/src/color-palette/test/index.js b/packages/components/src/color-palette/test/index.tsx
similarity index 99%
rename from packages/components/src/color-palette/test/index.js
rename to packages/components/src/color-palette/test/index.tsx
index aa62ff6451ba7..9918a530918af 100644
--- a/packages/components/src/color-palette/test/index.js
+++ b/packages/components/src/color-palette/test/index.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import ColorPalette from '../';
+import ColorPalette from '..';
 
 describe( 'ColorPalette', () => {
 	const colors = [
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
new file mode 100644
index 0000000000000..2b498351f132d
--- /dev/null
+++ b/packages/components/src/color-palette/types.ts
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+
+type OnColorChange = ( newColor?: string ) => void;
+
+export type ColorObject = {
+	name: string;
+	color: NonNullable< CSSProperties[ 'color' ] >;
+};
+
+export type PaletteObject = {
+	name: string;
+	colors: ColorObject[];
+};
+
+type PaletteProps = {
+	className?: string;
+	clearColor: () => void;
+	onChange: OnColorChange;
+	value?: string;
+	actions?: ReactNode;
+};
+
+export type SinglePaletteProps = PaletteProps & {
+	colors: ColorObject[];
+};
+
+export type MultiplePalettesProps = PaletteProps & {
+	colors: PaletteObject[];
+};
+
+// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
+export type CustomColorPickerDropdownProps = {
+	isRenderedInSidebar: boolean;
+	renderContent: () => ReactNode;
+	popoverProps?: string[];
+	renderToggle: ( props: {
+		isOpen: boolean;
+		onToggle: MouseEventHandler< HTMLButtonElement >;
+	} ) => ReactNode;
+};
+
+export type ColorPaletteProps = {
+	/**
+	 * Whether the palette should have a clearing button.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Array with the colors to be shown. When displaying multiple color palettes
+	 * to choose from, the format of the array changes from an array of colors
+	 * objects, to an array of color palettes.
+	 *
+	 * @default []
+	 */
+	colors?: ( PaletteObject | ColorObject )[];
+	/**
+	 * Whether to allow the user to pick a custom color on top of the predefined
+	 * choices (defined via the `colors` prop).
+	 *
+	 * @default false
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether the color picker should display the alpha channel
+	 * both in the bottom inputs as well as in the color picker itself.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: OnColorChange;
+	/**
+	 * Currently active value.
+	 */
+	value?: string;
+	/**
+	 * Whether the colors prop is an array of color palettes,
+	 * rather than an array of color objects.
+	 *
+	 * @default false
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index fee14754f5944..8e4e16030ccae 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -45,7 +45,7 @@ export const InputWithSlider = ( {
 						{ abbreviation }
 					</Spacer>
 				}
-				hideHTMLArrows
+				spinControls="none"
 				size="__unstable-large"
 			/>
 			<RangeControl
diff --git a/packages/components/src/custom-gradient-picker/gradient-bar/index.js b/packages/components/src/custom-gradient-picker/gradient-bar/index.js
index 6898619e08643..9767071c03e2a 100644
--- a/packages/components/src/custom-gradient-picker/gradient-bar/index.js
+++ b/packages/components/src/custom-gradient-picker/gradient-bar/index.js
@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-
-import { some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -91,7 +89,7 @@ export default function CustomGradientBar( {
 
 		// If the insert point is close to an existing control point don't show it.
 		if (
-			some( controlPoints, ( { position } ) => {
+			controlPoints.some( ( { position } ) => {
 				return (
 					Math.abs( insertPosition - position ) <
 					MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT
diff --git a/packages/components/src/custom-select-control/README.md b/packages/components/src/custom-select-control/README.md
index c54e5a5e934e0..8144a7cfa5960 100644
--- a/packages/components/src/custom-select-control/README.md
+++ b/packages/components/src/custom-select-control/README.md
@@ -131,6 +131,20 @@ Start opting into the unconstrained width style that will become the default in
 -   Required: No
 -   Default: `false`
 
+#### onMouseOver
+
+A handler for onMouseOver events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onMouseOut
+
+A handler for onMouseOut events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index 73aebda5d257b..4c8682f0c7cb3 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -61,21 +61,26 @@ const stateReducer = (
 			return changes;
 	}
 };
-export default function CustomSelectControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next36pxDefaultSize = false,
-	/** Start opting into the unconstrained width that will become the default in a future version. */
-	__nextUnconstrainedWidth = false,
-	className,
-	hideLabelFromVision,
-	label,
-	describedBy,
-	options: items,
-	onChange: onSelectedItemChange,
-	/** @type {import('../select-control/types').SelectControlProps.size} */
-	size = 'default',
-	value: _selectedItem,
-} ) {
+
+export default function CustomSelectControl( props ) {
+	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next36pxDefaultSize = false,
+		/** Start opting into the unconstrained width that will become the default in a future version. */
+		__nextUnconstrainedWidth = false,
+		className,
+		hideLabelFromVision,
+		label,
+		describedBy,
+		options: items,
+		onChange: onSelectedItemChange,
+		/** @type {import('../select-control/types').SelectControlProps.size} */
+		size = 'default',
+		value: _selectedItem,
+		onMouseOver,
+		onMouseOut,
+	} = props;
+
 	const {
 		getLabelProps,
 		getToggleButtonProps,
@@ -173,6 +178,8 @@ export default function CustomSelectControl( {
 				suffix={ <SelectControlChevronDown /> }
 			>
 				<SelectControlSelect
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					as="button"
 					onFocus={ () => setIsFocused( true ) }
 					onBlur={ () => setIsFocused( false ) }
diff --git a/packages/components/src/date-time/date-time/index.tsx b/packages/components/src/date-time/date-time/index.tsx
index 07e0c6e0d8946..3d97b19dc17c6 100644
--- a/packages/components/src/date-time/date-time/index.tsx
+++ b/packages/components/src/date-time/date-time/index.tsx
@@ -207,6 +207,8 @@ function UnforwardedDateTimePicker(
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
+ *       __nextRemoveHelpButton
+ *       __nextRemoveResetButton
  *     />
  *   );
  * };
diff --git a/packages/components/src/date-time/stories/date-time.tsx b/packages/components/src/date-time/stories/date-time.tsx
index 447b9cf265ab8..53d369728d34d 100644
--- a/packages/components/src/date-time/stories/date-time.tsx
+++ b/packages/components/src/date-time/stories/date-time.tsx
@@ -52,6 +52,10 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
+Default.args = {
+	__nextRemoveHelpButton: true,
+	__nextRemoveResetButton: true,
+};
 
 export const WithEvents: ComponentStory< typeof DateTimePicker > =
 	Template.bind( {} );
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index f1ae842044a77..77295b38f21ed 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -180,7 +180,7 @@ export function TimePicker( {
 			min={ 1 }
 			max={ 31 }
 			required
-			hideHTMLArrows
+			spinControls="none"
 			isPressEnterToChange
 			isDragEnabled={ false }
 			isShiftStepEnabled={ false }
@@ -246,7 +246,7 @@ export function TimePicker( {
 							min={ is12Hour ? 1 : 0 }
 							max={ is12Hour ? 12 : 23 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -273,7 +273,7 @@ export function TimePicker( {
 							min={ 0 }
 							max={ 59 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -344,7 +344,7 @@ export function TimePicker( {
 						min={ 1 }
 						max={ 9999 }
 						required
-						hideHTMLArrows
+						spinControls="none"
 						isPressEnterToChange
 						isDragEnabled={ false }
 						isShiftStepEnabled={ false }
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 83e6fe500faa1..5f932fd5e0fff 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
@@ -38,6 +38,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -309,6 +310,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -590,6 +592,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -883,6 +886,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
index 73350d4d9e21a..c36afc2044bd2 100644
--- a/packages/components/src/disabled/README.md
+++ b/packages/components/src/disabled/README.md
@@ -47,6 +47,8 @@ function CustomButton( props ) {
 }
 ```
 
+_Note: this component may not behave as expected in browsers that don't support [the `inert` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert). We recommend adding [the official WICG polyfill](https://github.com/WICG/inert) when using this component in your project._
+
 ### Props
 
 The component accepts the following props:
diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 6ef627e8350fa..91c4316f3a6d8 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/packages/components/src/disabled/index.tsx
@@ -15,7 +15,14 @@ const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
 /**
- * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
+ * `Disabled` is a component which disables descendant tabbable elements and
+ * prevents pointer interaction.
+ *
+ * _Note: this component may not behave as expected in browsers that don't
+ * support the `inert` HTML attribute. We recommend adding the official WICG
+ * polyfill when using this component in your project._
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
  *
  * ```jsx
  * import { Button, Disabled, TextControl } from '@wordpress/components';
diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx
index 98ad10e202737..cedcdad872701 100644
--- a/packages/components/src/disabled/test/index.tsx
+++ b/packages/components/src/disabled/test/index.tsx
@@ -24,7 +24,6 @@ describe( 'Disabled', () => {
 			</Disabled>
 		);
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 	} );
 
@@ -40,12 +39,10 @@ describe( 'Disabled', () => {
 
 		const { container, rerender } = render( <MaybeDisable /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
@@ -58,12 +55,10 @@ describe( 'Disabled', () => {
 
 		const { rerender, container } = render( <MaybeDisable /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).toHaveAttribute( 'inert' );
 
 		rerender( <MaybeDisable isDisabled={ false } /> );
 
-		// @ts-ignore
 		expect( container.firstChild ).not.toHaveAttribute( 'inert' );
 	} );
 
diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx
index d034d0b0d8338..d11f7e1eb71f6 100644
--- a/packages/components/src/external-link/index.tsx
+++ b/packages/components/src/external-link/index.tsx
@@ -38,22 +38,30 @@ function UnforwardedExternalLink(
 		),
 	].join( ' ' );
 	const classes = classnames( 'components-external-link', className );
-	/* Anchor links are percieved as external links.
+	/* Anchor links are perceived as external links.
 	This constant helps check for on page anchor links,
 	to prevent them from being opened in the editor. */
 	const isInternalAnchor = !! href?.startsWith( '#' );
 
+	const onClickHandler = (
+		event: React.MouseEvent< HTMLAnchorElement, MouseEvent >
+	) => {
+		if ( isInternalAnchor ) {
+			event.preventDefault();
+		}
+
+		if ( props.onClick ) {
+			props.onClick( event );
+		}
+	};
+
 	return (
 		/* eslint-disable react/jsx-no-target-blank */
 		<a
 			{ ...additionalProps }
 			className={ classes }
 			href={ href }
-			onClick={
-				isInternalAnchor
-					? ( event ) => event.preventDefault()
-					: undefined
-			}
+			onClick={ onClickHandler }
 			target="_blank"
 			rel={ optimizedRel }
 			ref={ ref }
diff --git a/packages/components/src/external-link/test/index.tsx b/packages/components/src/external-link/test/index.tsx
new file mode 100644
index 0000000000000..bb001961ae33e
--- /dev/null
+++ b/packages/components/src/external-link/test/index.tsx
@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import { ExternalLink } from '..';
+
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
+describe( 'ExternalLink', () => {
+	test( 'should call function passed in onClick handler when clicking the link', async () => {
+		const user = setupUser();
+		const onClickMock = jest.fn();
+
+		render(
+			<ExternalLink href="https://wordpress.org" onClick={ onClickMock }>
+				WordPress.org
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: 'WordPress.org (opens in a new tab)',
+		} );
+
+		await user.click( link );
+
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => {
+		const user = setupUser();
+
+		render(
+			<ExternalLink href="#test">I&apos;m an anchor link!</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm an anchor link! (opens in a new tab)",
+		} );
+
+		// We are using this approach so we can test the defaultPrevented
+		// without passing an onClick prop to the component.
+		const onClickMock = jest.fn();
+		link.onclick = onClickMock;
+
+		await user.click( link );
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: true } )
+		);
+	} );
+
+	test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
+		const user = setupUser();
+		const onClickMock = jest.fn();
+
+		render(
+			<ExternalLink href="#test" onClick={ onClickMock }>
+				I&apos;m an anchor link!
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm an anchor link! (opens in a new tab)",
+		} );
+
+		await user.click( link );
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: true } )
+		);
+	} );
+
+	test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => {
+		const user = setupUser();
+
+		render(
+			<ExternalLink href="https://wordpress.org">
+				I&apos;m not an anchor link!
+			</ExternalLink>
+		);
+
+		const link = screen.getByRole( 'link', {
+			name: "I'm not an anchor link! (opens in a new tab)",
+		} );
+
+		// We are using this approach so we can test the defaultPrevented
+		// without passing an onClick prop to the component.
+		const onClickMock = jest.fn();
+		link.onclick = onClickMock;
+
+		await user.click( link );
+
+		expect( onClickMock ).toHaveBeenCalledTimes( 1 );
+		expect( onClickMock ).toHaveBeenLastCalledWith(
+			expect.objectContaining( { defaultPrevented: false } )
+		);
+	} );
+} );
diff --git a/packages/components/src/focusable-iframe/index.js b/packages/components/src/focusable-iframe/index.js
index 0374bebf7eba0..5c7e6b8edd799 100644
--- a/packages/components/src/focusable-iframe/index.js
+++ b/packages/components/src/focusable-iframe/index.js
@@ -9,7 +9,6 @@ import deprecated from '@wordpress/deprecated';
  * @param {import('react').Ref<HTMLIFrameElement>} props.iframeRef
  */
 export default function FocusableIframe( { iframeRef, ...props } ) {
-	// @ts-expect-error: Return type for useFocusableIframe() is incorrect.
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
 		since: '5.9',
diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 99a320d38f94f..5f74dd09a2819 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -93,7 +93,7 @@ The current font size value.
 
 ### withSlider
 
-If `true`, the UI will contain a slider, instead of a numeric text input field. If `false`, no slider will be present.
+If `true`, a slider will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
@@ -101,7 +101,7 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 
 ### withReset
 
-If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.
+If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.
 
 -   Type: `Boolean`
 -   Required: no
@@ -113,4 +113,4 @@ Start opting into the new margin-free styles that will become the default in a f
 
 -   Type: `Boolean`
 -   Required: no
--   Default: `false`
\ No newline at end of file
+-   Default: `false`
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 78158b33f43db..5adb5b75e9abd 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,11 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
-import { default as UnitControl, useCustomUnits } from '../unit-control';
+import {
+	default as UnitControl,
+	parseQuantityAndUnitFromRawValue,
+	useCustomUnits,
+} from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
 import {
@@ -27,11 +31,9 @@ import {
 import {
 	getFontSizeOptions,
 	getSelectedOption,
-	splitValueAndUnitFromSize,
 	isSimpleCssValue,
 	CUSTOM_FONT_SIZE,
 } from './utils';
-import { VStack } from '../v-stack';
 import { HStack } from '../h-stack';
 import type {
 	FontSizePickerProps,
@@ -47,20 +49,6 @@ import {
 } from './styles';
 import { Spacer } from '../spacer';
 
-// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
-const MaybeVStack = ( {
-	__nextHasNoMarginBottom,
-	children,
-}: {
-	__nextHasNoMarginBottom: boolean;
-	children: ReactNode;
-} ) =>
-	! __nextHasNoMarginBottom ? (
-		<>{ children }</>
-	) : (
-		<VStack spacing={ 6 } children={ children } />
-	);
-
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -85,11 +73,6 @@ const UnforwardedFontSizePicker = (
 		} );
 	}
 
-	const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
-		'string'
-	);
-	const noUnitsValue = ! hasUnits ? value : parseInt( String( value ) );
-	const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );
 	const units = useCustomUnits( {
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
@@ -144,7 +127,10 @@ const UnforwardedFontSizePicker = (
 			! fontSizesContainComplexValues &&
 			typeof selectedOption.size === 'string'
 		) {
-			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
+			const [ , unit ] = parseQuantityAndUnitFromRawValue(
+				selectedOption.size,
+				units
+			);
 			hint += `(${ unit })`;
 		}
 		return hint;
@@ -169,12 +155,28 @@ const UnforwardedFontSizePicker = (
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
+
+	// If neither the value or first font size is a string, then FontSizePicker
+	// operates in a legacy "unitless" mode where UnitControl can only be used
+	// to select px values and onChange() is always called with number values.
+	const hasUnits =
+		typeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';
+
+	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
+		value,
+		units
+	);
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
 				<HStack className="components-font-size-picker__header">
-					<HeaderLabel>
+					<HeaderLabel
+						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
+					>
 						{ __( 'Size' ) }
 						{ headerHint && (
 							<HeaderHint className="components-font-size-picker__header__hint">
@@ -201,141 +203,149 @@ const UnforwardedFontSizePicker = (
 					) }
 				</HStack>
 			</Spacer>
-			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
-				<Controls
-					className="components-font-size-picker__controls"
-					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				>
-					{ !! fontSizes.length &&
-						shouldUseSelectControl &&
-						! showCustomValueControl && (
-							<CustomSelectControl
-								__nextUnconstrainedWidth
-								className="components-font-size-picker__select"
-								label={ __( 'Font size' ) }
-								hideLabelFromVision
-								describedBy={ currentFontSizeSR }
-								options={ options as FontSizeSelectOption[] }
-								value={ (
-									options as FontSizeSelectOption[]
-								 ).find(
-									( option ) =>
-										option.key === selectedOption.slug
-								) }
-								onChange={ ( {
-									selectedItem,
-								}: {
-									selectedItem: FontSizeSelectOption;
-								} ) => {
+			<Controls
+				className="components-font-size-picker__controls"
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			>
+				{ !! fontSizes.length &&
+					shouldUseSelectControl &&
+					! showCustomValueControl && (
+						<CustomSelectControl
+							__nextUnconstrainedWidth
+							className="components-font-size-picker__select"
+							label={ __( 'Font size' ) }
+							hideLabelFromVision
+							describedBy={ currentFontSizeSR }
+							options={ options as FontSizeSelectOption[] }
+							value={ ( options as FontSizeSelectOption[] ).find(
+								( option ) => option.key === selectedOption.slug
+							) }
+							onChange={ ( {
+								selectedItem,
+							}: {
+								selectedItem: FontSizeSelectOption;
+							} ) => {
+								if ( selectedItem.size === undefined ) {
+									onChange?.( undefined );
+								} else {
 									onChange?.(
 										hasUnits
 											? selectedItem.size
 											: Number( selectedItem.size )
 									);
-									if (
-										selectedItem.key === CUSTOM_FONT_SIZE
-									) {
-										setShowCustomValueControl( true );
+								}
+								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
+									setShowCustomValueControl( true );
+								}
+							} }
+							size={ size }
+						/>
+					) }
+				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+					<ToggleGroupControl
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						label={ __( 'Font size' ) }
+						hideLabelFromVision
+						value={ value }
+						onChange={ ( newValue ) => {
+							if ( newValue === undefined ) {
+								onChange?.( undefined );
+							} else {
+								onChange?.(
+									hasUnits ? newValue : Number( newValue )
+								);
+							}
+						} }
+						isBlock
+						size={ size }
+					>
+						{ ( options as FontSizeToggleGroupOption[] ).map(
+							( option ) => (
+								<ToggleGroupControlOption
+									key={ option.key }
+									value={ option.value }
+									label={ option.label }
+									aria-label={ option.name }
+									showTooltip={ true }
+								/>
+							)
+						) }
+					</ToggleGroupControl>
+				) }
+				{ ! disableCustomFontSizes && showCustomValueControl && (
+					<Flex className="components-font-size-picker__custom-size-control">
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Custom' ) }
+								labelPosition="top"
+								hideLabelFromVision
+								value={ value }
+								onChange={ ( newValue ) => {
+									if ( newValue === undefined ) {
+										onChange?.( undefined );
+									} else {
+										onChange?.(
+											hasUnits
+												? newValue
+												: parseInt( newValue, 10 )
+										);
 									}
 								} }
 								size={ size }
+								units={ hasUnits ? units : [] }
+								min={ 0 }
 							/>
-						) }
-					{ ! shouldUseSelectControl && ! showCustomValueControl && (
-						<ToggleGroupControl
-							__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-							label={ __( 'Font size' ) }
-							hideLabelFromVision
-							value={ value }
-							onChange={ ( newValue ) => {
-								onChange?.(
-									hasUnits ? newValue : Number( newValue )
-								);
-							} }
-							isBlock
-							size={ size }
-						>
-							{ ( options as FontSizeToggleGroupOption[] ).map(
-								( option ) => (
-									<ToggleGroupControlOption
-										key={ option.key }
-										value={ option.value }
-										label={ option.label }
-										aria-label={ option.name }
-										showTooltip={ true }
-									/>
-								)
-							) }
-						</ToggleGroupControl>
-					) }
-					{ ! withSlider &&
-						! disableCustomFontSizes &&
-						showCustomValueControl && (
-							<Flex className="components-font-size-picker__custom-size-control">
-								<FlexItem isBlock>
-									<UnitControl
-										label={ __( 'Custom' ) }
-										labelPosition="top"
+						</FlexItem>
+						{ withSlider && (
+							<FlexItem isBlock>
+								<Spacer marginX={ 2 } marginBottom={ 0 }>
+									<RangeControl
+										__nextHasNoMarginBottom={
+											__nextHasNoMarginBottom
+										}
+										className="components-font-size-picker__custom-input"
+										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
-										value={ value }
-										onChange={ ( nextSize ) => {
-											if (
-												! nextSize ||
-												0 === parseFloat( nextSize )
-											) {
+										value={ valueQuantity }
+										initialPosition={ fallbackFontSize }
+										withInputField={ false }
+										onChange={ ( newValue ) => {
+											if ( newValue === undefined ) {
 												onChange?.( undefined );
-											} else {
+											} else if ( hasUnits ) {
 												onChange?.(
-													hasUnits
-														? nextSize
-														: parseInt(
-																nextSize,
-																10
-														  )
+													newValue +
+														( valueUnit ?? 'px' )
 												);
+											} else {
+												onChange?.( newValue );
 											}
 										} }
-										size={ size }
-										units={ hasUnits ? units : [] }
+										min={ 0 }
+										max={ isValueUnitRelative ? 10 : 100 }
+										step={ isValueUnitRelative ? 0.1 : 1 }
 									/>
-								</FlexItem>
-								{ withReset && (
-									<FlexItem>
-										<ResetButton
-											disabled={ value === undefined }
-											onClick={ () => {
-												onChange?.( undefined );
-											} }
-											isSmall
-											variant="secondary"
-											size={ size }
-										>
-											{ __( 'Reset' ) }
-										</ResetButton>
-									</FlexItem>
-								) }
-							</Flex>
+								</Spacer>
+							</FlexItem>
 						) }
-				</Controls>
-				{ withSlider && (
-					<RangeControl
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-						className="components-font-size-picker__custom-input"
-						label={ __( 'Custom Size' ) }
-						value={
-							isPixelValue && noUnitsValue
-								? Number( noUnitsValue )
-								: undefined
-						}
-						initialPosition={ fallbackFontSize }
-						onChange={ ( newValue ) => {
-							onChange?.( hasUnits ? newValue + 'px' : newValue );
-						} }
-						min={ 12 }
-						max={ 100 }
-					/>
+						{ withReset && (
+							<FlexItem>
+								<ResetButton
+									disabled={ value === undefined }
+									onClick={ () => {
+										onChange?.( undefined );
+									} }
+									isSmall
+									variant="secondary"
+									size={ size }
+								>
+									{ __( 'Reset' ) }
+								</ResetButton>
+							</FlexItem>
+						) }
+					</Flex>
 				) }
-			</MaybeVStack>
+			</Controls>
 		</Container>
 	);
 };
diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
index 4965097790480..25a21da92527e 100644
--- a/packages/components/src/font-size-picker/test/index.tsx
+++ b/packages/components/src/font-size-picker/test/index.tsx
@@ -1,249 +1,522 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import FontSizePicker from '../';
-
-const getUnitSelect = () =>
-	document.body.querySelector( '.components-unit-control select' );
-const getUnitLabel = () =>
-	document.body.querySelector( '.components-unit-control__unit-label' );
-
-const toggleCustomInput = ( showCustomInput: boolean ) => {
-	const label = showCustomInput ? 'Set custom size' : 'Use size preset';
-	const toggleCustom = screen.getByLabelText( label, { selector: 'button' } );
-	fireEvent.click( toggleCustom );
-};
+import type { FontSize } from '../types';
 
 describe( 'FontSizePicker', () => {
-	describe( 'onChange values', () => {
-		it( 'should not use units when the initial value is a number', () => {
-			let fontSize = 12;
-			const setFontSize = jest.fn(
-				( nextSize ) => ( fontSize = nextSize )
-			);
-
+	test.each( [
+		// Use units when initial value uses units.
+		{ value: '12px', expectedValue: '80px' },
+		// Don't use units when initial value does not use units.
+		{ value: 12, expectedValue: 80 },
+	] )(
+		'should call onChange( $expectedValue ) after user types 80 when value is $value',
+		async ( { value, expectedValue } ) => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					value={ fontSize }
-					onChange={ setFontSize }
 					__nextHasNoMarginBottom
+					value={ value }
+					onChange={ onChange }
 				/>
 			);
+			const input = screen.getByLabelText( 'Custom' );
+			await user.clear( input );
+			await user.type( input, '80' );
+			expect( onChange ).toHaveBeenCalledTimes( 3 ); // Once for the clear, then once per keystroke.
+			expect( onChange ).toHaveBeenCalledWith( expectedValue );
+		}
+	);
 
-			const unitSelect = getUnitSelect();
-			const unitLabel = getUnitLabel();
-			const input = screen.getByLabelText( 'Custom', {
-				selector: 'input',
+	test.each( [
+		// Use units when first font size uses units.
+		{ firstFontSize: '12px', expectedValue: '80px' },
+		// Don't use units when first font size does not use units.
+		{ firstFontSize: 12, expectedValue: 80 },
+	] )(
+		'should call onChange( $expectedValue ) after user types 80 when first font size is $firstFontSize',
+		async ( { firstFontSize, expectedValue } ) => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
-
-			input.focus();
-			fireEvent.change( input, { target: { value: 16 } } );
-
-			expect( unitSelect ).toBeFalsy();
-			expect( unitLabel ).toBeTruthy();
-			expect( fontSize ).toBe( 16 );
-		} );
-
-		it( 'should use units when the initial value has a unit', () => {
-			let fontSize = '12px';
-			const setFontSize = jest.fn(
-				( nextSize ) => ( fontSize = nextSize )
-			);
-
+			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					value={ fontSize }
-					onChange={ setFontSize }
 					__nextHasNoMarginBottom
+					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
+					onChange={ onChange }
 				/>
 			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			const input = screen.getByLabelText( 'Custom' );
+			await user.type( input, '80' );
+			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
+			expect( onChange ).toHaveBeenCalledWith( expectedValue );
+		}
+	);
 
-			const unitSelect = getUnitSelect();
-			const unitLabel = getUnitLabel();
-			const input = screen.getByLabelText( 'Custom', {
-				selector: 'input',
-			} );
-
-			input.focus();
-			fireEvent.change( input, { target: { value: 16 } } );
+	describe( 'with > 5 font sizes', () => {
+		const fontSizes = [
+			{
+				slug: 'tiny',
+				name: 'Tiny',
+				size: '8px',
+			},
+			{
+				slug: 'small',
+				name: 'Small',
+				size: '1em',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '2rem',
+			},
+			{
+				slug: 'large',
+				name: 'Large',
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+			{
+				slug: 'x-large',
+				name: 'Extra Large',
+				size: '30px',
+			},
+			{
+				slug: 'xx-large',
+				// no name
+				size: '40px',
+			},
+		];
 
-			expect( unitSelect ).toBeTruthy();
-			expect( unitLabel ).toBeFalsy();
-			expect( fontSize ).toBe( '16px' );
+		it( 'displays a select control', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Font size' } )
+			);
+			const options = screen.getAllByRole( 'option' );
+			expect( options ).toHaveLength( 8 );
+			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 2' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
+			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
+			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
+			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
-		it( 'should not use units when fontSizes size values are numbers', () => {
-			let fontSize;
-			const fontSizes = [
-				{
-					name: 'Small',
-					slug: 'small',
-					size: 12,
-				},
-			];
-			const setFontSize = jest.fn(
-				( nextSize ) => ( fontSize = nextSize )
-			);
+		test.each( [
+			{ value: undefined, expectedLabel: 'Size' },
+			{ value: '8px', expectedLabel: 'Size (8px)' },
+			{ value: '1em', expectedLabel: 'Size (1em)' },
+			{ value: '2rem', expectedLabel: 'Size (2rem)' },
+			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
+			{ value: '3px', expectedLabel: 'Size (Custom)' },
+		] )(
+			'displays $expectedLabel as label when value is $value',
+			( { value, expectedLabel } ) => {
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+					/>
+				);
+				expect(
+					screen.getByLabelText( expectedLabel )
+				).toBeInTheDocument();
+			}
+		);
 
+		test.each( [
+			{ option: 'Default', value: '8px', expectedValue: undefined },
+			{ option: 'Tiny 8', value: undefined, expectedValue: '8px' },
+			{ option: 'Small 1', value: '8px', expectedValue: '1em' },
+			{ option: 'Medium 2', value: '8px', expectedValue: '2rem' },
+			{
+				option: 'Large',
+				value: '8px',
+				expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+		] )(
+			'calls onChange( $expectedValue ) when $option is selected',
+			async ( { option, value, expectedValue } ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByRole( 'button', { name: 'Font size' } )
+				);
+				await user.click(
+					screen.getByRole( 'option', { name: option } )
+				);
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+				expect( onChange ).toHaveBeenCalledWith( expectedValue );
+			}
+		);
+
+		it( 'shows custom input when Custom is selected', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					fontSizes={ fontSizes }
-					value={ fontSize }
-					onChange={ setFontSize }
 					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					onChange={ onChange }
 				/>
 			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Custom' } )
+			);
+			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
+			// TODO: onChange() shouldn't be called.
+			//expect( onChange ).not.toHaveBeenCalled();
+		} );
 
-			toggleCustomInput( true );
-			const unitSelect = getUnitSelect();
-			const unitLabel = getUnitLabel();
-			const input = screen.getByLabelText( 'Custom', {
-				selector: 'input',
-			} );
+		commonTests( fontSizes );
+	} );
 
-			input.focus();
-			fireEvent.change( input, { target: { value: 16 } } );
+	describe( 'with ≤ 5 homogeneous font sizes', () => {
+		const fontSizes = [
+			{
+				slug: 'small',
+				// no name
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '16px',
+			},
+			{
+				slug: 'large',
+				name: 'Large',
+				size: '22px',
+			},
+			{
+				slug: 'huge',
+				name: 'Huge',
+				size: '30px',
+			},
+			{
+				slug: 'gigantosaurus',
+				name: 'Gigantosaurus',
+				size: '40px',
+			},
+		];
 
-			expect( unitSelect ).toBeFalsy();
-			expect( unitLabel ).toBeTruthy();
-			expect( fontSize ).toBe( 16 );
+		it( 'displays a toggle group control with t-shirt sizes', () => {
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+				/>
+			);
+			const options = screen.getAllByRole( 'radio' );
+			expect( options ).toHaveLength( 5 );
+			expect( options[ 0 ] ).toHaveTextContent( 'S' );
+			expect( options[ 0 ] ).toHaveAccessibleName( 'S' );
+			expect( options[ 1 ] ).toHaveTextContent( 'M' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Medium' );
+			expect( options[ 2 ] ).toHaveTextContent( 'L' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Large' );
+			expect( options[ 3 ] ).toHaveTextContent( 'XL' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Huge' );
+			expect( options[ 4 ] ).toHaveTextContent( 'XXL' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Gigantosaurus' );
 		} );
 
-		it( 'should use units when fontSizes size values have units', () => {
-			let fontSize;
-			const fontSizes = [
-				{
-					name: 'Small',
-					slug: 'small',
-					size: '12px',
-				},
-			];
-			const setFontSize = jest.fn(
-				( nextSize ) => ( fontSize = nextSize )
-			);
+		test.each( [
+			{ value: undefined, expectedLabel: 'Size Default' },
+			{ value: '12px', expectedLabel: 'Size small(px)' },
+			{ value: '40px', expectedLabel: 'Size Gigantosaurus(px)' },
+		] )(
+			'displays $expectedLabel as label when value is $value',
+			( { value, expectedLabel } ) => {
+				render(
+					<FontSizePicker
+						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
+					/>
+				);
+				expect(
+					screen.getByLabelText( expectedLabel )
+				).toBeInTheDocument();
+			}
+		);
 
+		it( 'calls onChange when a font size is selected', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					fontSizes={ fontSizes }
-					value={ fontSize }
-					onChange={ setFontSize }
 					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					onChange={ onChange }
 				/>
 			);
-
-			toggleCustomInput( true );
-			const unitSelect = getUnitSelect();
-			const unitLabel = getUnitLabel();
-			const input = screen.getByLabelText( 'Custom', {
-				selector: 'input',
-			} );
-
-			input.focus();
-			fireEvent.change( input, { target: { value: 16 } } );
-
-			expect( unitSelect ).toBeTruthy();
-			expect( unitLabel ).toBeFalsy();
-			expect( fontSize ).toBe( '16px' );
+			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenCalledWith( '16px' );
 		} );
+
+		commonTests( fontSizes );
 	} );
-	describe( 'renders different control', () => {
-		const options = [
+
+	describe( 'with ≤ 5 heterogeneous font sizes', () => {
+		const fontSizes = [
 			{
-				name: 'Small',
 				slug: 'small',
-				size: '0.65rem',
+				name: 'Small',
+				size: '12px',
 			},
 			{
-				name: 'Medium',
 				slug: 'medium',
-				size: '1.125rem',
+				name: 'Medium',
+				size: '1em',
 			},
 			{
-				name: 'Large',
 				slug: 'large',
-				size: '1.7rem',
+				name: 'Large',
+				size: '2rem',
+			},
+			{
+				slug: 'x-large',
+				name: 'Extra Large',
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
 			},
 		];
-		it( 'should render select control when we have more than five font sizes', () => {
-			const extraOptions = [
-				{
-					name: 'Extra Large',
-					slug: 'extra-large',
-					size: '1.95rem',
-				},
-				{
-					name: 'Extra Extra Large',
-					slug: 'extra-extra-large',
-					size: '2.5rem',
-				},
-				{
-					name: 'Huge',
-					slug: 'huge',
-					size: '2.8rem',
-				},
-			];
-			const fontSizes = [ ...options, ...extraOptions ];
+
+		it( 'displays a toggle group control with t-shirt sizes', () => {
 			render(
 				<FontSizePicker
-					fontSizes={ fontSizes }
-					value={ fontSizes[ 0 ].size }
 					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
 				/>
 			);
-			// Trigger click to open the select menu and take into account
-			// the two extra options (default, custom);
-			fireEvent.click(
-				screen.getByLabelText( 'Font size', { selector: 'button' } )
-			);
-			const element = screen.getAllByRole( 'option' );
-			expect( element ).toHaveLength( fontSizes.length + 2 );
+			const options = screen.getAllByRole( 'radio' );
+			expect( options ).toHaveLength( 4 );
+			expect( options[ 0 ] ).toHaveTextContent( 'S' );
+			expect( options[ 0 ] ).toHaveAccessibleName( 'Small' );
+			expect( options[ 1 ] ).toHaveTextContent( 'M' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Medium' );
+			expect( options[ 2 ] ).toHaveTextContent( 'L' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Large' );
+			expect( options[ 3 ] ).toHaveTextContent( 'XL' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Extra Large' );
 		} );
-		describe( 'segmented control', () => {
-			it( 'should use t-shirt labels for simple css values', () => {
-				const fontSizes = [ ...options ];
+
+		test.each( [
+			{ value: undefined, expectedLabel: 'Size Default' },
+			{ value: '12px', expectedLabel: 'Size Small' },
+			{ value: '1em', expectedLabel: 'Size Medium' },
+			{ value: '2rem', expectedLabel: 'Size Large' },
+			{
+				value: 'clamp(1.75rem, 3vw, 2.25rem)',
+				expectedLabel: 'Size Extra Large',
+			},
+		] )(
+			'displays $expectedLabel as label when value is $value',
+			( { value, expectedLabel } ) => {
 				render(
 					<FontSizePicker
-						fontSizes={ fontSizes }
-						value={ fontSizes[ 0 ].size }
 						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						value={ value }
 					/>
 				);
-				const element = screen.getByLabelText( 'Large' );
-				expect( element ).toBeInTheDocument();
-				expect( element.children[ 0 ] ).toHaveTextContent( 'L' );
-			} );
-			it( 'should use incremental sequence of t-shirt sizes as labels if we have complex css', () => {
-				const fontSizes = [
-					...options,
-					{
-						name: 'Extra Large',
-						slug: 'extra-large',
-						size: 'clamp(1.75rem, 3vw, 2.25rem)',
-					},
-				];
+				expect(
+					screen.getByLabelText( expectedLabel )
+				).toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			{ radio: 'Small', expectedValue: '12px' },
+			{ radio: 'Medium', expectedValue: '1em' },
+			{ radio: 'Large', expectedValue: '2rem' },
+			{
+				radio: 'Extra Large',
+				expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+		] )(
+			'calls onChange( $expectedValue ) when $radio is selected',
+			async ( { radio, expectedValue } ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						fontSizes={ fontSizes }
-						value={ fontSizes[ 0 ].size }
 						__nextHasNoMarginBottom
+						fontSizes={ fontSizes }
+						onChange={ onChange }
 					/>
 				);
-				const largeElement = screen.getByLabelText( 'Large' );
-				expect( largeElement ).toBeInTheDocument();
-				expect( largeElement ).toHaveTextContent( 'L' );
-
-				const extraLargeElement =
-					screen.getByLabelText( 'Extra Large' );
-				expect( extraLargeElement ).toBeInTheDocument();
-				expect( extraLargeElement.children[ 0 ] ).toHaveTextContent(
-					'XL'
+				await user.click(
+					screen.getByRole( 'radio', { name: radio } )
 				);
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+				expect( onChange ).toHaveBeenCalledWith( expectedValue );
+			}
+		);
+
+		commonTests( fontSizes );
+	} );
+
+	function commonTests( fontSizes: FontSize[] ) {
+		it( 'allows custom values by default', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
 			} );
+			const onChange = jest.fn();
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
+			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
-	} );
+
+		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					disableCustomFontSizes
+				/>
+			);
+			expect(
+				screen.queryByRole( 'button', { name: 'Set custom size' } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'does not display a slider by default', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			expect(
+				screen.queryByLabelText( 'Custom Size' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'allows a slider to be used when withSlider is set', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					withSlider
+					onChange={ onChange }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			const sliderInput = screen.getByLabelText( 'Custom Size' );
+			fireEvent.change( sliderInput, {
+				target: { value: 80 },
+			} );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenCalledWith( '80px' );
+		} );
+
+		it( 'allows reset by default', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			const onChange = jest.fn();
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+					onChange={ onChange }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+			expect( onChange ).toHaveBeenCalledWith( undefined );
+		} );
+
+		it( 'does not allow reset when withReset is false', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+			render(
+				<FontSizePicker
+					__nextHasNoMarginBottom
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+					withReset={ false }
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'button', { name: 'Set custom size' } )
+			);
+			expect(
+				screen.queryByRole( 'button', { name: 'Reset' } )
+			).not.toBeInTheDocument();
+		} );
+	}
 } );
diff --git a/packages/components/src/font-size-picker/test/utils.ts b/packages/components/src/font-size-picker/test/utils.ts
index 18bc6f86e8fd0..829927051b462 100644
--- a/packages/components/src/font-size-picker/test/utils.ts
+++ b/packages/components/src/font-size-picker/test/utils.ts
@@ -1,11 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	isSimpleCssValue,
-	splitValueAndUnitFromSize,
-	getToggleGroupOptions,
-} from '../utils';
+import { isSimpleCssValue, getToggleGroupOptions } from '../utils';
 
 const simpleCSSCases: [ number | string, boolean ][] = [
 	// Test integers and non-integers.
@@ -41,46 +37,6 @@ describe( 'isSimpleCssValue', () => {
 	);
 } );
 
-const splitValuesCases: [
-	number | string,
-	string | undefined,
-	string | undefined
-][] = [
-	// Test integers and non-integers.
-	[ 1, '1', undefined ],
-	[ 1.25, '1.25', undefined ],
-	[ '123', '123', undefined ],
-	[ '1.5', '1.5', undefined ],
-	[ '0.75', '0.75', undefined ],
-	// Valid simple CSS values.
-	[ '20px', '20', 'px' ],
-	[ '0.8em', '0.8', 'em' ],
-	[ '2rem', '2', 'rem' ],
-	[ '1.4vw', '1.4', 'vw' ],
-	[ '0.4vh', '0.4', 'vh' ],
-	// Invalid negative values,
-	[ '-5px', undefined, undefined ],
-	// Complex CSS values that shouldn't parse.
-	[ 'abs(-15px)', undefined, undefined ],
-	[ 'calc(10px + 1)', undefined, undefined ],
-	[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
-	[ 'max(4.5em, 3vh)', undefined, undefined ],
-	[ 'min(10px, 1rem)', undefined, undefined ],
-	[ 'minmax(30px, auto)', undefined, undefined ],
-	[ 'var(--wp--font-size)', undefined, undefined ],
-];
-
-describe( 'splitValueAndUnitFromSize', () => {
-	test.each( splitValuesCases )(
-		'given %p as argument, returns value = %p and unit = %p',
-		( cssValue, expectedValue, expectedUnit ) => {
-			const [ value, unit ] = splitValueAndUnitFromSize( cssValue );
-			expect( value ).toBe( expectedValue );
-			expect( unit ).toBe( expectedUnit );
-		}
-	);
-} );
-
 describe( 'getToggleGroupOptions', () => {
 	test( 'should assign t-shirt sizes by default up until the aliases length', () => {
 		const optionsArray = [
diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
index 2c824125bb7e1..e61988b6d4fbf 100644
--- a/packages/components/src/font-size-picker/types.ts
+++ b/packages/components/src/font-size-picker/types.ts
@@ -58,7 +58,7 @@ export type FontSizePickerProps = {
 	/**
 	 * Size of the control.
 	 *
-	 * @default default
+	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
 };
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
index db6a07d7734af..dfd578b06827a 100644
--- a/packages/components/src/font-size-picker/utils.ts
+++ b/packages/components/src/font-size-picker/utils.ts
@@ -43,28 +43,6 @@ const FONT_SIZES_ALIASES = [
 	__( 'XXL' ),
 ];
 
-/**
- * Helper util to split a font size to its numeric value
- * and its `unit`, if exists.
- *
- * @param  size Font size.
- * @return An array with the numeric value and the unit if exists.
- */
-export function splitValueAndUnitFromSize(
-	size: NonNullable< FontSizePickerProps[ 'value' ] >
-) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
-
-	if (
-		! isNaN( parseFloat( numericValue ) ) &&
-		isFinite( Number( numericValue ) )
-	) {
-		return [ numericValue, unit ];
-	}
-
-	return [];
-}
-
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md
index ca3f356fade0f..38dd50dd03915 100644
--- a/packages/components/src/form-file-upload/README.md
+++ b/packages/components/src/form-file-upload/README.md
@@ -81,9 +81,7 @@ This can be useful when you want to force a `change` event to fire when the user
 
 ### render
 
-Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.
-
-This function receives an object with the property `openFileDialog`. The property is a function that when called opens the browser window to upload files.
+Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
 
 -   Type: `Function`
 -   Required: No
diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx
index ce2392365fe1a..608fdf837300f 100644
--- a/packages/components/src/form-file-upload/index.tsx
+++ b/packages/components/src/form-file-upload/index.tsx
@@ -47,6 +47,7 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+
 	return (
 		<div className="components-form-file-upload">
 			{ ui }
diff --git a/packages/components/src/form-file-upload/stories/index.js b/packages/components/src/form-file-upload/stories/index.js
deleted file mode 100644
index 4c367c96c8165..0000000000000
--- a/packages/components/src/form-file-upload/stories/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { upload as uploadIcon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import FormFileUpload from '../';
-
-export default {
-	title: 'Components/FormFileUpload',
-	component: FormFileUpload,
-};
-
-export const Default = FormFileUpload.bind( {} );
-Default.args = {
-	accept: '',
-	children: 'Select file',
-	multiple: false,
-};
-
-export const RestrictFileTypes = FormFileUpload.bind( {} );
-RestrictFileTypes.args = {
-	...Default.args,
-	accept: 'image/*',
-	children: 'Select image',
-	multiple: false,
-};
-
-export const AllowMultipleFiles = FormFileUpload.bind( {} );
-AllowMultipleFiles.args = {
-	...Default.args,
-	children: 'Select files',
-	multiple: true,
-};
-
-export const WithIcon = FormFileUpload.bind( {} );
-WithIcon.args = {
-	...Default.args,
-	children: 'Upload',
-	icon: uploadIcon,
-};
-
-export const WithCustomRender = FormFileUpload.bind( {} );
-WithCustomRender.args = {
-	...Default.args,
-	render: ( { openFileDialog } ) => (
-		<button onClick={ openFileDialog }>Custom Upload Button</button>
-	),
-};
diff --git a/packages/components/src/form-file-upload/types.ts b/packages/components/src/form-file-upload/types.ts
index 4e4281383d087..5b9054fa869ee 100644
--- a/packages/components/src/form-file-upload/types.ts
+++ b/packages/components/src/form-file-upload/types.ts
@@ -55,9 +55,10 @@ export type FormFileUploadProps = {
 	/**
 	 * Optional callback function used to render the UI.
 	 *
-	 * If passed, the component does not render any UI and calls this function to render it.
-	 * This function receives an object with the property `openFileDialog`.
-	 * The property is a function that when called opens the browser window to upload files.
+	 * If passed, the component does not render the default UI (a button) and
+	 * calls this function to render it. The function receives an object with
+	 * property `openFileDialog`, a function that, when called, opens the browser
+	 * native file upload modal window.
 	 */
-	render?: ( arg: { openFileDialog: () => void } ) => void;
+	render?: ( arg: { openFileDialog: () => void } ) => ReactNode;
 };
diff --git a/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap b/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap
index 67617127fcebd..878fce1586b34 100644
--- a/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/form-toggle/test/__snapshots__/index.tsx.snap
@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
-<span
-  class="components-form-toggle"
->
-  <input
-    class="components-form-toggle__input"
-    type="checkbox"
-  />
+<div>
   <span
-    class="components-form-toggle__track"
-  />
-  <span
-    class="components-form-toggle__thumb"
-  />
-</span>
+    class="components-form-toggle"
+  >
+    <input
+      class="components-form-toggle__input"
+      type="checkbox"
+    />
+    <span
+      class="components-form-toggle__track"
+    />
+    <span
+      class="components-form-toggle__thumb"
+    />
+  </span>
+</div>
 `;
 
 exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
diff --git a/packages/components/src/form-toggle/test/index.tsx b/packages/components/src/form-toggle/test/index.tsx
index 38b84b86c226b..57c603dc4143a 100644
--- a/packages/components/src/form-toggle/test/index.tsx
+++ b/packages/components/src/form-toggle/test/index.tsx
@@ -36,7 +36,7 @@ describe( 'FormToggle', () => {
 			const { container } = render( <FormToggle onChange={ noop } /> );
 
 			expect( getInput() ).not.toBeChecked();
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render a checked checkbox when providing checked prop', () => {
diff --git a/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap
index 2de0fd5e8ea45..bb7cd65d8f377 100644
--- a/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/h-stack/test/__snapshots__/index.tsx.snap
@@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
diff --git a/packages/components/src/h-stack/test/index.tsx b/packages/components/src/h-stack/test/index.tsx
index 56190f81db4cd..ea4f9c94fbe7f 100644
--- a/packages/components/src/h-stack/test/index.tsx
+++ b/packages/components/src/h-stack/test/index.tsx
@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/higher-order/with-filters/index.js b/packages/components/src/higher-order/with-filters/index.js
index b0b1b45e6bf0e..9a65c7a5fff9d 100644
--- a/packages/components/src/higher-order/with-filters/index.js
+++ b/packages/components/src/higher-order/with-filters/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,10 +59,10 @@ export default function withFilters( hookName ) {
 			}
 
 			componentWillUnmount() {
-				FilteredComponentRenderer.instances = without(
-					FilteredComponentRenderer.instances,
-					this
-				);
+				FilteredComponentRenderer.instances =
+					FilteredComponentRenderer.instances.filter(
+						( instance ) => instance !== this
+					);
 
 				// If this was the last of the mounted components filtered on
 				// this hook, remove the hook handler.
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 5ecba807ac7b5..dfcc483138a53 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -6,6 +6,7 @@ export {
 	Polygon,
 	Rect,
 	G,
+	Line,
 	HorizontalRule,
 	BlockQuotation,
 } from '@wordpress/primitives';
@@ -126,7 +127,7 @@ export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
-export { default as __experimentalRadio } from './radio';
+export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index 23fee2b813c6a..ee6ab9e0d1334 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -45,6 +45,7 @@ export function UnforwardedInputControl(
 		onKeyDown = noop,
 		prefix,
 		size = 'default',
+		style,
 		suffix,
 		value,
 		...props
@@ -77,6 +78,7 @@ export function UnforwardedInputControl(
 			labelPosition={ labelPosition }
 			prefix={ prefix }
 			size={ size }
+			style={ style }
 			suffix={ suffix }
 		>
 			<InputField
diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
index 677bf35e61f44..3f520e279b8fa 100644
--- a/packages/components/src/input-control/input-base.tsx
+++ b/packages/components/src/input-control/input-base.tsx
@@ -22,7 +22,7 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider } from '../ui/context';
+import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-// Adapter to map props for the new ui/flex compopnent.
+// Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: { direction?: string; gap?: number; justify?: string } = {};
 	switch ( labelPosition ) {
@@ -67,7 +67,7 @@ export function InputBase(
 		size = 'default',
 		suffix,
 		...props
-	}: InputBaseProps,
+	}: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );
diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index b35efb42378ea..1be98530d1fa4 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -34,6 +34,7 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => {
 };
 
 export const Root = styled( Flex )< RootProps >`
+	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;
diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
index d179e9a7c26a6..db9fe4b75cb42 100644
--- a/packages/components/src/input-control/types.ts
+++ b/packages/components/src/input-control/types.ts
@@ -4,9 +4,7 @@
 import type {
 	CSSProperties,
 	ReactNode,
-	ChangeEvent,
 	SyntheticEvent,
-	PointerEvent,
 	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
@@ -62,10 +60,10 @@ interface BaseProps {
 	size?: Size;
 }
 
-export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
-	P = {}
-> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+export type InputChangeCallback< P = {} > = (
+	nextValue: string | undefined,
+	extra: { event: SyntheticEvent } & P
+) => void;
 
 export interface InputFieldProps extends BaseProps {
 	/**
@@ -165,11 +163,6 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
-	/**
-	 * The class name to be added to the wrapper element.
-	 */
-	className?: string;
-	id?: string;
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */
diff --git a/packages/components/src/isolated-event-container/index.js b/packages/components/src/isolated-event-container/index.js
deleted file mode 100644
index 5b24d36d0b1ac..0000000000000
--- a/packages/components/src/isolated-event-container/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
-
-/**
- * @type {import('react').MouseEventHandler<HTMLDivElement>}
- */
-function stopPropagation( event ) {
-	event.stopPropagation();
-}
-
-export default forwardRef( ( { children, ...props }, ref ) => {
-	deprecated( 'wp.components.IsolatedEventContainer', {
-		since: '5.7',
-	} );
-
-	// Disable reason: this stops certain events from propagating outside of the component.
-	// - onMouseDown is disabled as this can cause interactions with other DOM elements.
-	/* eslint-disable jsx-a11y/no-static-element-interactions */
-	return (
-		<div { ...props } ref={ ref } onMouseDown={ stopPropagation }>
-			{ children }
-		</div>
-	);
-	/* eslint-enable jsx-a11y/no-static-element-interactions */
-} );
diff --git a/packages/components/src/isolated-event-container/index.tsx b/packages/components/src/isolated-event-container/index.tsx
new file mode 100644
index 0000000000000..267efd945a31e
--- /dev/null
+++ b/packages/components/src/isolated-event-container/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+function stopPropagation( event: MouseEvent ) {
+	event.stopPropagation();
+}
+
+type DivProps = ComponentPropsWithoutRef< 'div' >;
+
+const IsolatedEventContainer = forwardRef< HTMLDivElement, DivProps >(
+	( props, ref ) => {
+		deprecated( 'wp.components.IsolatedEventContainer', {
+			since: '5.7',
+		} );
+
+		// Disable reason: this stops certain events from propagating outside of the component.
+		// - onMouseDown is disabled as this can cause interactions with other DOM elements.
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
+		return <div { ...props } ref={ ref } onMouseDown={ stopPropagation } />;
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
+	}
+);
+
+export default IsolatedEventContainer;
diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index 35bd50120033f..bac0d2e72e462 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -13,7 +13,7 @@ export const unstyledButton = css`
 	border: 1px solid transparent;
 	cursor: pointer;
 	background: none;
-	text-align: left;
+	text-align: start;
 
 	&:hover {
 		color: ${ COLORS.ui.theme };
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 227174e810459..112e119cd50f3 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -5,32 +5,32 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,11 +7,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+@@ -8,11 +8,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code
-      </div>
-@@ -19,11 +19,11 @@
-    <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
-    >
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code
+        </div>
+@@ -20,11 +20,11 @@
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Is
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-10mizr-View-large-item-spacedAround e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Is
+        </div>
 `;
 
 exports[`ItemGroup Item should use different amounts of padding depending on the value of the size prop 1`] = `
@@ -38,19 +38,19 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,11 +1,11 @@
-  <div
-    class="css-dcjs67-itemWrapper"
-    role="listitem"
-  >
+@@ -2,11 +2,11 @@
     <div
--     class="components-item css-bsdqin-View-medium-item e19lxcc00"
-+     class="components-item css-1ohjtsa-View-large-item e19lxcc00"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="css-dcjs67-itemWrapper"
+      role="listitem"
     >
-      Code is poetry
-    </div>
+      <div
+-       class="components-item css-bsdqin-View-medium-item e19lxcc00"
++       class="components-item css-1ohjtsa-View-large-item e19lxcc00"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
 `;
 
 exports[`ItemGroup ItemGroup component should render correctly 1`] = `
@@ -82,22 +82,24 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   border-radius: 2px;
 }
 
-<div
-  class="components-item-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ItemGroup"
-  role="list"
->
+<div>
   <div
-    class="emotion-2"
-    role="listitem"
+    class="components-item-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ItemGroup"
+    role="list"
   >
     <div
-      class="components-item emotion-3 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="Item"
+      class="emotion-2"
+      role="listitem"
     >
-      Code is poetry
+      <div
+        class="components-item emotion-3 emotion-1"
+        data-wp-c16t="true"
+        data-wp-component="Item"
+      >
+        Code is poetry
+      </div>
     </div>
   </div>
 </div>
@@ -108,26 +110,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-18qvw1m-View-separated-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show borders when the isBordered prop is true 1`] = `
@@ -135,26 +138,27 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,17 +1,17 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,18 +1,18 @@
+  <div>
     <div
-      class="css-dcjs67-itemWrapper"
-      role="listitem"
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-acyoj6-View-bordered-rounded e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
     >
       <div
--       class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
-+       class="components-item css-bsdqin-View-medium-item e19lxcc00"
-        data-wp-c16t="true"
-        data-wp-component="Item"
+        class="css-dcjs67-itemWrapper"
+        role="listitem"
       >
-        Code is poetry
-      </div>
+        <div
+-         class="components-item css-1uo9kmu-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-bsdqin-View-medium-item e19lxcc00"
+          data-wp-c16t="true"
+          data-wp-component="Item"
+        >
+          Code is poetry
+        </div>
 `;
 
 exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
@@ -162,13 +166,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,7 +1,7 @@
-  <div
--   class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
-+   class="components-item-group css-1mm2cvy-View e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="ItemGroup"
-    role="list"
-  >
+@@ -1,8 +1,8 @@
+  <div>
     <div
+-     class="components-item-group css-kj8mvb-View-rounded e19lxcc00"
++     class="components-item-group css-1mm2cvy-View e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="ItemGroup"
+      role="list"
+    >
+      <div
 `;
diff --git a/packages/components/src/item-group/test/index.js b/packages/components/src/item-group/test/index.js
index d052948b58d74..e0471661c2c27 100644
--- a/packages/components/src/item-group/test/index.js
+++ b/packages/components/src/item-group/test/index.js
@@ -16,7 +16,7 @@ describe( 'ItemGroup', () => {
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should show borders when the isBordered prop is true', () => {
@@ -33,9 +33,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( noBorders.firstChild ).toMatchDiffSnapshot(
-				withBorders.firstChild
-			);
+			expect( noBorders ).toMatchDiffSnapshot( withBorders );
 		} );
 
 		it( 'should show rounded corners when the isRounded prop is true', () => {
@@ -52,9 +50,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( roundCorners.firstChild ).toMatchDiffSnapshot(
-				squaredCorners.firstChild
-			);
+			expect( roundCorners ).toMatchDiffSnapshot( squaredCorners );
 		} );
 
 		it( 'should render items individually when the isSeparated prop is true', () => {
@@ -65,15 +61,13 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			const { container: seperatedItems } = render(
+			const { container: separatedItems } = render(
 				<ItemGroup isSeparated={ true }>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
 
-			expect( groupedItems.firstChild ).toMatchDiffSnapshot(
-				seperatedItems.firstChild
-			);
+			expect( groupedItems ).toMatchDiffSnapshot( separatedItems );
 		} );
 	} );
 
@@ -120,9 +114,7 @@ describe( 'ItemGroup', () => {
 				<Item size="large">Code is poetry</Item>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 
 		it( 'should read the value of the size prop from context when the prop is not defined', () => {
@@ -145,9 +137,7 @@ describe( 'ItemGroup', () => {
 				</ItemGroup>
 			);
 
-			expect( mediumSize.firstChild ).toMatchDiffSnapshot(
-				largeSize.firstChild
-			);
+			expect( mediumSize ).toMatchDiffSnapshot( largeSize );
 		} );
 	} );
 } );
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 00eee087bd63c..7365bf9817e81 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -4,12 +4,13 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, MotionProps } from 'framer-motion';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import { useContext, useEffect, useRef } from '@wordpress/element';
+import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
 import {
 	useReducedMotion,
 	useMergeRefs,
@@ -26,6 +27,7 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorScreenProps } from '../types';
@@ -58,6 +60,21 @@ function UnconnectedNavigatorScreen(
 
 	const previousLocation = usePrevious( location );
 
+	const cx = useCx();
+	const classes = useMemo(
+		() =>
+			cx(
+				css( {
+					// Ensures horizontal overflow is visually accessible.
+					overflowX: 'auto',
+					// In case the root has a height, it should not be exceeded.
+					maxHeight: '100%',
+				} ),
+				className
+			),
+		[ className, cx ]
+	);
+
 	// Focus restoration
 	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
@@ -122,7 +139,7 @@ function UnconnectedNavigatorScreen(
 		return (
 			<View
 				ref={ mergedWrapperRef }
-				className={ className }
+				className={ classes }
 				{ ...otherProps }
 			>
 				{ children }
@@ -168,7 +185,7 @@ function UnconnectedNavigatorScreen(
 	return (
 		<motion.div
 			ref={ mergedWrapperRef }
-			className={ className }
+			className={ classes }
 			{ ...otherProps }
 			{ ...animatedProps }
 		>
diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md
index 21fae9ff888a2..1a78cd25bb457 100644
--- a/packages/components/src/number-control/README.md
+++ b/packages/components/src/number-control/README.md
@@ -44,13 +44,18 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 -   Required: No
 -   Default: `10`
 
-### hideHTMLArrows
+### spinControls
 
-If true, the default `input` HTML arrows will be hidden.
+ The type of spin controls to display. These are butons that allow the user to
+ quickly increment and decrement the number.
+ 
+ - 'none' - Do not show spin controls.
+ - 'native' - Use browser's native HTML `input` controls.
+ - 'custom' - Use plus and minus icon buttons.
 
--   Type: `Boolean`
+-   Type: `String`
 -   Required: No
--   Default: `false`
+-   Default: `'native'`
 
 ### isDragEnabled
 
diff --git a/packages/components/src/number-control/index.tsx b/packages/components/src/number-control/index.tsx
index 322f4116202c6..40cbf51bee2d3 100644
--- a/packages/components/src/number-control/index.tsx
+++ b/packages/components/src/number-control/index.tsx
@@ -2,23 +2,30 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
+import { useRef, forwardRef } from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { Input } from './styles/number-control-styles';
+import { Input, SpinButton } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../ui/context/wordpress-component';
 import type { NumberControlProps } from './types';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+
+const noop = () => {};
 
 function UnforwardedNumberControl(
 	{
@@ -26,6 +33,7 @@ function UnforwardedNumberControl(
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
+		spinControls = 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -36,10 +44,25 @@ function UnforwardedNumberControl(
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
+		size = 'default',
+		suffix,
+		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	ref: ForwardedRef< any >
+	forwardedRef: ForwardedRef< any >
 ) {
+	if ( hideHTMLArrows ) {
+		deprecated( 'hideHTMLArrows', {
+			alternative: 'spinControls="none"',
+			since: '6.2',
+			version: '6.3',
+		} );
+		spinControls = 'none';
+	}
+
+	const inputRef = useRef< HTMLInputElement >();
+	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
+
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
@@ -56,6 +79,23 @@ function UnforwardedNumberControl(
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
 
+	const spinValue = (
+		value: string | number | undefined,
+		direction: 'up' | 'down',
+		event: KeyboardEvent | MouseEvent | undefined
+	) => {
+		event?.preventDefault();
+		const shift = event?.shiftKey && isShiftStepEnabled;
+		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		let nextValue = isValueEmpty( value ) ? baseValue : value;
+		if ( direction === 'up' ) {
+			nextValue = add( nextValue, delta );
+		} else if ( direction === 'down' ) {
+			nextValue = subtract( nextValue, delta );
+		}
+		return constrainValue( nextValue, shift ? delta : undefined );
+	};
+
 	/**
 	 * "Middleware" function that intercepts updates from InputControl.
 	 * This allows us to tap into actions to transform the (next) state for
@@ -78,33 +118,11 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				const enableShift =
-					( event as KeyboardEvent | undefined )?.shiftKey &&
-					isShiftStepEnabled;
-
-				const incrementalValue = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
-				let nextValue = isValueEmpty( currentValue )
-					? baseValue
-					: currentValue;
-
-				if ( event?.preventDefault ) {
-					event.preventDefault();
-				}
-
-				if ( type === inputControlActionTypes.PRESS_UP ) {
-					nextValue = add( nextValue, incrementalValue );
-				}
-
-				if ( type === inputControlActionTypes.PRESS_DOWN ) {
-					nextValue = subtract( nextValue, incrementalValue );
-				}
-
 				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
-				nextState.value = constrainValue(
-					nextValue,
-					enableShift ? incrementalValue : undefined
+				nextState.value = spinValue(
+					currentValue,
+					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+					event as KeyboardEvent | undefined
 				);
 			}
 
@@ -178,6 +196,18 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
+	const buildSpinButtonClickHandler =
+		( direction: 'up' | 'down' ) =>
+		( event: MouseEvent< HTMLButtonElement > ) =>
+			onChange( String( spinValue( valueProp, direction, event ) ), {
+				// Set event.target to the <input> so that consumers can use
+				// e.g. event.target.validity.
+				event: {
+					...event,
+					target: inputRef.current!,
+				},
+			} );
+
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -185,12 +215,12 @@ function UnforwardedNumberControl(
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
+			hideHTMLArrows={ spinControls !== 'native' }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
 			min={ min }
-			ref={ ref }
+			ref={ mergedRef }
 			required={ required }
 			step={ step }
 			type={ typeProp }
@@ -200,6 +230,43 @@ function UnforwardedNumberControl(
 				const baseState = numberControlStateReducer( state, action );
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
+			size={ size }
+			suffix={
+				spinControls === 'custom' ? (
+					<>
+						{ suffix }
+						<Spacer marginBottom={ 0 } marginRight={ 2 }>
+							<HStack spacing={ 1 }>
+								<SpinButton
+									icon={ plusIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Increment' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'up'
+									) }
+									size={ size }
+								/>
+								<SpinButton
+									icon={ resetIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Decrement' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'down'
+									) }
+									size={ size }
+								/>
+							</HStack>
+						</Spacer>
+					</>
+				) : (
+					suffix
+				)
+			}
+			onChange={ onChange }
 		/>
 	);
 }
diff --git a/packages/components/src/number-control/styles/number-control-styles.js b/packages/components/src/number-control/styles/number-control-styles.js
index a27784497b018..4f0bcb91bb8dd 100644
--- a/packages/components/src/number-control/styles/number-control-styles.js
+++ b/packages/components/src/number-control/styles/number-control-styles.js
@@ -4,13 +4,19 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
 import InputControl from '../../input-control';
+import { COLORS } from '../../utils';
+import Button from '../../button';
+import { space } from '../../ui/utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) return ``;
+	if ( ! hideHTMLArrows ) {
+		return ``;
+	}
 
 	return css`
 		input[type='number']::-webkit-outer-spin-button,
@@ -28,3 +34,22 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
+
+const spinButtonSizeStyles = ( { size } ) => {
+	if ( size !== 'small' ) {
+		return ``;
+	}
+
+	return css`
+		width: ${ space( 5 ) };
+		min-width: ${ space( 5 ) };
+		height: ${ space( 5 ) };
+	`;
+};
+
+export const SpinButton = styled( Button )`
+	&&&&& {
+		color: ${ COLORS.ui.theme };
+		${ spinButtonSizeStyles }
+	}
+`;
diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js
index c2f4bcb869a2e..b1a57232ef275 100644
--- a/packages/components/src/number-control/test/index.js
+++ b/packages/components/src/number-control/test/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -425,4 +426,53 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '4' );
 		} );
 	} );
+
+	describe( 'custom spin buttons', () => {
+		test.each( [ undefined, 'none', 'native' ] )(
+			'should not appear when spinControls = %s',
+			( spinControls ) => {
+				render( <NumberControl spinControls={ spinControls } /> );
+				expect(
+					screen.queryByLabelText( 'Increment' )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByLabelText( 'Decrement' )
+				).not.toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			[ 'up', '1', {} ],
+			[ 'up', '2', { value: '1' } ],
+			[ 'up', '12', { value: '10', step: '2' } ],
+			[ 'up', '10', { value: '10', max: '10' } ],
+			[ 'down', '-1', {} ],
+			[ 'down', '1', { value: '2' } ],
+			[ 'down', '10', { value: '12', step: '2' } ],
+			[ 'down', '10', { value: '10', min: '10' } ],
+		] )(
+			'should spin %s to %s when props = %o',
+			async ( direction, expectedValue, props ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<NumberControl
+						{ ...props }
+						spinControls="custom"
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByLabelText(
+						direction === 'up' ? 'Increment' : 'Decrement'
+					)
+				);
+				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
+					event: expect.anything(),
+				} );
+			}
+		);
+	} );
 } );
diff --git a/packages/components/src/number-control/types.ts b/packages/components/src/number-control/types.ts
index 8b271538c1e19..a6cb68d81c391 100644
--- a/packages/components/src/number-control/types.ts
+++ b/packages/components/src/number-control/types.ts
@@ -10,9 +10,21 @@ export type NumberControlProps = Omit<
 	/**
 	 * If true, the default `input` HTML arrows will be hidden.
 	 *
+	 * @deprecated
 	 * @default false
 	 */
 	hideHTMLArrows?: boolean;
+	/**
+	 * The type of spin controls to display. These are butons that allow the
+	 * user to quickly increment and decrement the number.
+	 *
+	 * - 'none' - Do not show spin controls.
+	 * - 'native' - Use browser's native HTML `input` controls.
+	 * - 'custom' - Use plus and minus icon buttons.
+	 *
+	 * @default 'native'
+	 */
+	spinControls?: 'none' | 'native' | 'custom';
 	/**
 	 * If true, enables mouse drag gestures.
 	 *
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index 85ae701894616..e012dce41e9a9 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -92,7 +92,7 @@ The element should be stored in state rather than a plain ref to ensure reactive
 
 ### `anchorRect`: `DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 An object extending a `DOMRect` with an additional optional `ownerDocument` property, used to specify a fixed popover position.
 
@@ -100,7 +100,7 @@ An object extending a `DOMRect` with an additional optional `ownerDocument` prop
 
 ### `anchorRef`: `Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 Used to specify a fixed popover position. It can be an `Element`, a React reference to an `element`, an object with a `top` and a `bottom` properties (both pointing to elements), or a `range`.
 
@@ -157,7 +157,7 @@ When not provided, the `onClose` callback will be called instead.
 
 ### `getAnchorRect`: `( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 A function returning the same value as the one expected by the `anchorRect` prop, used to specify a dynamic popover position.
 
@@ -171,6 +171,8 @@ Used to customize the header text shown when the popover is toggled to fullscree
 
 ### `isAlternate`: `boolean`
 
+_Note: this prop is deprecated. Please use the `variant` prop with the `'toolbar'` values instead._
+
 Used to enable a different visual style for the popover.
 
 -   Required: No
@@ -212,8 +214,7 @@ Possible values:
 - `yAxis`: `'top' | 'middle' | 'bottom'`
 - `xAxis`: `'left' | 'center' | 'right'`
 - `corner`: `'top' | 'right' | 'bottom' | 'left'`
-
-
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No
 
 ### `resize`: `boolean`
@@ -223,8 +224,12 @@ Adjusts the size of the popover to prevent its contents from going out of view w
 -   Required: No
 -   Default: `true`
 
-### `range`: `unknown`
+### `variant`: `'toolbar' | 'unstyled'`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. It has no effect on the component._
+Specifies the popover's style.
 
+Leave undefined for the default style. Possible values are:
+-   `unstyled`:  The popover is essentially without any visible style, it has no background, border, outline or drop shadow, but the popover contents are still displayed.
+-   `toolbar`: A style that has no elevation, but a high contrast with other elements. This matches the style of the [`Toolbar` component](/packages/components/toolbar/README.md).
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 25bb157247a36..b960edef57c3c 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -169,7 +169,6 @@ const UnforwardedPopover = (
 		children,
 		className,
 		noArrow = true,
-		isAlternate,
 		position,
 		placement: placementProp = 'bottom-start',
 		offset: offsetProp = 0,
@@ -181,30 +180,23 @@ const UnforwardedPopover = (
 		flip = true,
 		resize = true,
 		shift = false,
+		variant,
 
 		// Deprecated props
 		__unstableForcePosition,
-		__unstableShift,
 		anchorRef,
 		anchorRect,
 		getAnchorRect,
-		range,
+		isAlternate,
 
 		// Rest
 		...contentProps
 	} = props;
 
-	if ( range ) {
-		deprecated( '`range` prop in wp.components.Popover', {
-			since: '6.1',
-			version: '6.3',
-		} );
-	}
-
 	let computedFlipProp = flip;
 	let computedResizeProp = resize;
 	if ( __unstableForcePosition !== undefined ) {
-		deprecated( '`__unstableForcePosition` prop wp.components.Popover', {
+		deprecated( '`__unstableForcePosition` prop in wp.components.Popover', {
 			since: '6.1',
 			version: '6.3',
 			alternative: '`flip={ false }` and  `resize={ false }`',
@@ -216,22 +208,9 @@ const UnforwardedPopover = (
 		computedResizeProp = ! __unstableForcePosition;
 	}
 
-	let shouldShift = shift;
-	if ( __unstableShift !== undefined ) {
-		deprecated( '`__unstableShift` prop in wp.components.Popover', {
-			since: '6.1',
-			version: '6.3',
-			alternative: '`shift` prop`',
-		} );
-
-		// Back-compat.
-		shouldShift = __unstableShift;
-	}
-
 	if ( anchorRef !== undefined ) {
 		deprecated( '`anchorRef` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
@@ -239,7 +218,6 @@ const UnforwardedPopover = (
 	if ( anchorRect !== undefined ) {
 		deprecated( '`anchorRect` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
@@ -247,12 +225,19 @@ const UnforwardedPopover = (
 	if ( getAnchorRect !== undefined ) {
 		deprecated( '`getAnchorRect` prop in wp.components.Popover', {
 			since: '6.1',
-			version: '6.3',
 			alternative: '`anchor` prop',
 		} );
 	}
 
-	const arrowRef = useRef( null );
+	const computedVariant = isAlternate ? 'toolbar' : variant;
+	if ( isAlternate !== undefined ) {
+		deprecated( '`isAlternate` prop in wp.components.Popover', {
+			since: '6.2',
+			alternative: "`variant` prop with the `'toolbar'` value",
+		} );
+	}
+
+	const arrowRef = useRef< HTMLElement | null >( null );
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
@@ -325,7 +310,7 @@ const UnforwardedPopover = (
 					},
 			  } )
 			: undefined,
-		shouldShift
+		shift
 			? shiftMiddleware( {
 					crossAxis: true,
 					limiter: customLimitShift(),
@@ -385,7 +370,7 @@ const UnforwardedPopover = (
 	} );
 
 	const arrowCallbackRef = useCallback(
-		( node ) => {
+		( node: HTMLElement | null ) => {
 			arrowRef.current = node;
 			update();
 		},
@@ -476,7 +461,12 @@ const UnforwardedPopover = (
 			placement={ computedPlacement }
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
-				'is-alternate': isAlternate,
+				// Use the 'alternate' classname for 'toolbar' variant for back compat.
+				[ `is-${
+					computedVariant === 'toolbar'
+						? 'alternate'
+						: computedVariant
+				}` ]: computedVariant,
 			} ) }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx
index 95284909b0a95..f5a8fab45d7fc 100644
--- a/packages/components/src/popover/stories/index.tsx
+++ b/packages/components/src/popover/stories/index.tsx
@@ -80,7 +80,7 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Popover > = ( args ) => {
+const Template: ComponentStory< typeof Popover > = ( args ) => {
 	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
 		setIsVisible( ( state ) => ! state );
@@ -114,6 +114,8 @@ export const Default: ComponentStory< typeof Popover > = ( args ) => {
 		</div>
 	);
 };
+
+export const Default: ComponentStory< typeof Popover > = Template.bind( {} );
 Default.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -125,6 +127,32 @@ Default.args = {
 	),
 };
 
+export const Toolbar: ComponentStory< typeof Popover > = Template.bind( {} );
+Toolbar.args = {
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
+	variant: 'toolbar',
+};
+
+export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
+Unstyled.args = {
+	children: (
+		<div style={ { width: '280px', whiteSpace: 'normal' } }>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+			ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+			aliquip ex ea commodo consequat.
+		</div>
+	),
+	variant: 'unstyled',
+};
+
 export const AllPlacements: ComponentStory< typeof Popover > = ( {
 	children,
 	...args
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index d8b57e5001376..a557454da6f13 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -29,6 +29,15 @@ $arrow-triangle-base-size: 14px;
 		box-shadow: none;
 	}
 
+	// A style that gives the popover no visible ui.
+	.is-unstyled & {
+		background: none;
+		border: none;
+		border-radius: 0;
+		outline: none;
+		box-shadow: none;
+	}
+
 	.components-popover.is-expanded & {
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 2f738ca76a3a9..96cb7e5fd6f86 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -92,10 +92,6 @@ export type PopoverProps = {
 	 * fullscreen on mobile viewports (see the `expandOnMobile` prop).
 	 */
 	headerTitle?: string;
-	/**
-	 * Used to enable a different visual style for the popover.
-	 */
-	isAlternate?: boolean;
 	/**
 	 * Used to show/hide the arrow that points at the popover's anchor.
 	 *
@@ -138,7 +134,20 @@ export type PopoverProps = {
 	 * @default false
 	 */
 	shift?: boolean;
-
+	/**
+	 * Specifies the popover's style.
+	 *
+	 * Leave undefined for the default style. Other values are:
+	 * - 'unstyled':  The popover is essentially without any visible style, it
+	 *                has no background, border, outline or drop shadow, but
+	 *                the popover contents are still displayed.
+	 * - 'toolbar':   A style that has no elevation, but a high contrast with
+	 *                other elements. This is matches the style of the
+	 *                `Toolbar` component.
+	 *
+	 * @default undefined
+	 */
+	variant?: 'unstyled' | 'toolbar';
 	// Deprecated props
 	/**
 	 * Prevent the popover from flipping and resizing when meeting the viewport
@@ -148,14 +157,6 @@ export type PopoverProps = {
 	 * @deprecated
 	 */
 	__unstableForcePosition?: boolean;
-	/**
-	 * Enables the `Popover` to shift in order to stay in view when meeting the
-	 * viewport edges.
-	 * _Note: this prop is deprecated. Use the `shift` prop instead._
-	 *
-	 * @deprecated
-	 */
-	__unstableShift?: boolean;
 	/**
 	 * An object extending a `DOMRect` with an additional optional `ownerDocument`
 	 * property, used to specify a fixed popover position.
@@ -185,9 +186,11 @@ export type PopoverProps = {
 		fallbackReferenceElement: Element | null
 	) => DomRectWithOwnerDocument;
 	/**
-	 * _Note: this prop is deprecated and has no effect on the component._
+	 * Used to enable a different visual style for the popover.
+	 * _Note: this prop is deprecated. Use the `variant` prop with the
+	 * 'toolbar' value instead._
 	 *
 	 * @deprecated
 	 */
-	range?: unknown;
+	isAlternate?: boolean;
 };
diff --git a/packages/components/src/radio-group/README.md b/packages/components/src/radio-group/README.md
index b446ef705e8a0..239205ec428f7 100644
--- a/packages/components/src/radio-group/README.md
+++ b/packages/components/src/radio-group/README.md
@@ -1,5 +1,9 @@
 # RadioGroup
 
+<div class="callout callout-alert">
+This component is deprecated. Consider using `RadioControl` or `ToggleGroupControl` instead.
+</div>
+
 <div class="callout callout-alert">
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
diff --git a/packages/components/src/radio-group/index.js b/packages/components/src/radio-group/index.js
index 471734ca421de..a94493c5f2fd8 100644
--- a/packages/components/src/radio-group/index.js
+++ b/packages/components/src/radio-group/index.js
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */
@@ -12,7 +14,7 @@ import { forwardRef } from '@wordpress/element';
  * Internal dependencies
  */
 import ButtonGroup from '../button-group';
-import RadioContext from '../radio-context';
+import RadioContext from './radio-context';
 
 function RadioGroup(
 	{ label, checked, defaultChecked, disabled, onChange, ...props },
@@ -43,4 +45,7 @@ function RadioGroup(
 	);
 }
 
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
 export default forwardRef( RadioGroup );
diff --git a/packages/components/src/radio-context/index.js b/packages/components/src/radio-group/radio-context/index.js
similarity index 100%
rename from packages/components/src/radio-context/index.js
rename to packages/components/src/radio-group/radio-context/index.js
diff --git a/packages/components/src/radio/index.js b/packages/components/src/radio-group/radio/index.js
similarity index 84%
rename from packages/components/src/radio/index.js
rename to packages/components/src/radio-group/radio/index.js
index d7bdefbe608c9..446850c421b4c 100644
--- a/packages/components/src/radio/index.js
+++ b/packages/components/src/radio-group/radio/index.js
@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 /**
  * External dependencies
  */
@@ -11,7 +13,7 @@ import { useContext, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
+import Button from '../../button';
 import RadioContext from '../radio-context';
 
 function Radio( { children, value, ...props }, ref ) {
@@ -32,4 +34,7 @@ function Radio( { children, value, ...props }, ref ) {
 	);
 }
 
+/**
+ * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
+ */
 export default forwardRef( Radio );
diff --git a/packages/components/src/radio-group/stories/index.js b/packages/components/src/radio-group/stories/index.js
index c827c180c7fe2..10fb5dfd02800 100644
--- a/packages/components/src/radio-group/stories/index.js
+++ b/packages/components/src/radio-group/stories/index.js
@@ -6,12 +6,21 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Radio from '../../radio';
+import Radio from '../radio';
 import RadioGroup from '../';
 
 export default {
-	title: 'Components (Experimental)/RadioGroup',
+	title: 'Components (Deprecated)/RadioGroup',
+	subcomponents: { Radio },
 	component: RadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
+			},
+		},
+	},
 };
 
 export const _default = () => {
diff --git a/packages/components/src/radio/stories/index.js b/packages/components/src/radio/stories/index.js
deleted file mode 100644
index 622935a76e076..0000000000000
--- a/packages/components/src/radio/stories/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import RadioGroup from '../../radio-group';
-import Radio from '../';
-
-export default { title: 'Components (Experimental)/Radio', component: Radio };
-
-export const _default = () => {
-	// Radio components must be a descendent of a RadioGroup component.
-	/* eslint-disable no-restricted-syntax */
-	return (
-		// id is required for server side rendering
-		<RadioGroup id="default-radiogroup" label="options">
-			<Radio value="option1">Option 1</Radio>
-			<Radio value="option2">Option 2</Radio>
-		</RadioGroup>
-	);
-	/* eslint-enable no-restricted-syntax */
-};
diff --git a/packages/components/src/sandbox/test/index.js b/packages/components/src/sandbox/test/index.js
index 1f01d267c787a..d91dce1842199 100644
--- a/packages/components/src/sandbox/test/index.js
+++ b/packages/components/src/sandbox/test/index.js
@@ -39,9 +39,9 @@ describe( 'Sandbox', () => {
 	};
 
 	it( 'should rerender with new emdeded content if html prop changes', () => {
-		const result = render( <TestWrapper /> );
+		const { container } = render( <TestWrapper /> );
 
-		const iframe = result.container.querySelector( '.components-sandbox' );
+		const iframe = container.querySelector( '.components-sandbox' );
 
 		let sandboxedIframe =
 			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
diff --git a/packages/components/src/select-control/stories/index.tsx b/packages/components/src/select-control/stories/index.tsx
index 9026ea822532a..a8cf1be478954 100644
--- a/packages/components/src/select-control/stories/index.tsx
+++ b/packages/components/src/select-control/stories/index.tsx
@@ -25,15 +25,17 @@ const meta: ComponentMeta< typeof SelectControl > = {
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
 
-const SelectControlWithState: ComponentStory< typeof SelectControl > = (
-	args
-) => {
+const SelectControlWithState: ComponentStory< typeof SelectControl > = ( {
+	onChange,
+	...args
+} ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
 
@@ -41,7 +43,10 @@ const SelectControlWithState: ComponentStory< typeof SelectControl > = (
 		<SelectControl
 			{ ...args }
 			value={ selection }
-			onChange={ setSelection }
+			onChange={ ( value ) => {
+				setSelection( value );
+				onChange?.( value );
+			} }
 		/>
 	);
 };
diff --git a/packages/components/src/slot-fill/bubbles-virtually/fill.js b/packages/components/src/slot-fill/bubbles-virtually/fill.js
index bbbbc1f8add8e..c18d745ca9468 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/fill.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/fill.js
@@ -28,18 +28,18 @@ function useForceUpdate() {
 }
 
 export default function Fill( { name, children } ) {
-	const slot = useSlot( name );
+	const { registerFill, unregisterFill, ...slot } = useSlot( name );
 	const ref = useRef( { rerender: useForceUpdate() } );
 
 	useEffect( () => {
-		// We register fills so we can keep track of their existance.
+		// We register fills so we can keep track of their existence.
 		// Some Slot implementations need to know if there're already fills
 		// registered so they can choose to render themselves or not.
-		slot.registerFill( ref );
+		registerFill( ref );
 		return () => {
-			slot.unregisterFill( ref );
+			unregisterFill( ref );
 		};
-	}, [ slot.registerFill, slot.unregisterFill ] );
+	}, [ registerFill, unregisterFill ] );
 
 	if ( ! slot.ref || ! slot.ref.current ) {
 		return null;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js
index 1333c9cf2fd93..ef7ad56cc68ba 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js
@@ -19,19 +19,21 @@ function Slot(
 	{ name, fillProps = {}, as: Component = 'div', ...props },
 	forwardedRef
 ) {
-	const registry = useContext( SlotFillContext );
+	const { registerSlot, unregisterSlot, ...registry } =
+		useContext( SlotFillContext );
 	const ref = useRef();
 
 	useLayoutEffect( () => {
-		registry.registerSlot( name, ref, fillProps );
+		registerSlot( name, ref, fillProps );
 		return () => {
-			registry.unregisterSlot( name, ref );
+			unregisterSlot( name, ref );
 		};
-		// We are not including fillProps in the deps because we don't want to
-		// unregister and register the slot whenever fillProps change, which would
-		// cause the fill to be re-mounted. We are only considering the initial value
-		// of fillProps.
-	}, [ registry.registerSlot, registry.unregisterSlot, name ] );
+		// Ignore reason: We don't want to unregister and register the slot whenever
+		// `fillProps` change, which would cause the fill to be re-mounted. Instead,
+		// we can just update the slot (see hook below).
+		// For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ registerSlot, unregisterSlot, name ] );
 	// fillProps may be an update that interacts with the layout, so we
 	// useLayoutEffect.
 	useLayoutEffect( () => {
diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js b/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
index 2d07a2c36ae07..8c5a0182ea074 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/use-slot.js
@@ -15,7 +15,13 @@ import { useCallback, useContext } from '@wordpress/element';
 import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
-	const registry = useContext( SlotFillContext );
+	const {
+		updateSlot: registryUpdateSlot,
+		unregisterSlot: registryUnregisterSlot,
+		registerFill: registryRegisterFill,
+		unregisterFill: registryUnregisterFill,
+		...registry
+	} = useContext( SlotFillContext );
 	const slots = useSnapshot( registry.slots, { sync: true } );
 	// The important bit here is that this call ensures
 	// the hook only causes a re-render if the slot
@@ -24,30 +30,30 @@ export default function useSlot( name ) {
 
 	const updateSlot = useCallback(
 		( fillProps ) => {
-			registry.updateSlot( name, fillProps );
+			registryUpdateSlot( name, fillProps );
 		},
-		[ name, registry.updateSlot ]
+		[ name, registryUpdateSlot ]
 	);
 
 	const unregisterSlot = useCallback(
 		( slotRef ) => {
-			registry.unregisterSlot( name, slotRef );
+			registryUnregisterSlot( name, slotRef );
 		},
-		[ name, registry.unregisterSlot ]
+		[ name, registryUnregisterSlot ]
 	);
 
 	const registerFill = useCallback(
 		( fillRef ) => {
-			registry.registerFill( name, fillRef );
+			registryRegisterFill( name, fillRef );
 		},
-		[ name, registry.registerFill ]
+		[ name, registryRegisterFill ]
 	);
 
 	const unregisterFill = useCallback(
 		( fillRef ) => {
-			registry.unregisterFill( name, fillRef );
+			registryUnregisterFill( name, fillRef );
 		},
-		[ name, registry.unregisterFill ]
+		[ name, registryUnregisterFill ]
 	);
 
 	return {
diff --git a/packages/components/src/slot-fill/fill.js b/packages/components/src/slot-fill/fill.js
index 77188ab8a1614..745439a275dd1 100644
--- a/packages/components/src/slot-fill/fill.js
+++ b/packages/components/src/slot-fill/fill.js
@@ -20,8 +20,12 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 	} );
 
 	useLayoutEffect( () => {
-		registerFill( name, ref.current );
-		return () => unregisterFill( name, ref.current );
+		const refValue = ref.current;
+		registerFill( name, refValue );
+		return () => unregisterFill( name, refValue );
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useLayoutEffect( () => {
@@ -29,6 +33,9 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		if ( slot ) {
 			slot.forceUpdate();
 		}
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ children ] );
 
 	useLayoutEffect( () => {
@@ -39,6 +46,9 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		unregisterFill( ref.current.name, ref.current );
 		ref.current.name = name;
 		registerFill( name, ref.current );
+		// Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior.
+		// We'll leave them as-is until a more detailed investigation/refactor can be performed.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	if ( ! slot || ! slot.node ) {
diff --git a/packages/components/src/slot-fill/use-slot.js b/packages/components/src/slot-fill/use-slot.js
index 96016e267a681..99e7138e12025 100644
--- a/packages/components/src/slot-fill/use-slot.js
+++ b/packages/components/src/slot-fill/use-slot.js
@@ -26,6 +26,9 @@ const useSlot = ( name ) => {
 		} );
 
 		return unsubscribe;
+		// Ignore reason: Modifying this dep array could introduce unexpected changes in behavior,
+		// so we'll leave it as=is until the hook can be properly refactored for exhaustive-deps.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
 	return slot;
diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js
index 05afc83a944d2..6a67f055e9ed1 100644
--- a/packages/components/src/snackbar/index.js
+++ b/packages/components/src/snackbar/index.js
@@ -93,7 +93,7 @@ function Snackbar(
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ onDismiss, onRemove ] );
+	}, [ onDismiss, onRemove, explicitDismiss ] );
 
 	const classes = classnames( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,
diff --git a/packages/components/src/surface/test/__snapshots__/index.tsx.snap b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
index d394711944f64..200382f04ae5b 100644
--- a/packages/components/src/surface/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/surface/test/__snapshots__/index.tsx.snap
@@ -5,14 +5,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-pt58n0-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderLeft 1`] = `
@@ -20,14 +22,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1vckp4o-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderRight 1`] = `
@@ -35,14 +39,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-sw9dzi-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render borderTop 1`] = `
@@ -50,14 +56,16 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-123k66h-View-Surface-getBorders-primary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
 
 exports[`props should render correctly 1`] = `
@@ -67,12 +75,14 @@ exports[`props should render correctly 1`] = `
   position: relative;
 }
 
-<div
-  class="components-surface emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Surface"
->
-  Surface
+<div>
+  <div
+    class="components-surface emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Surface"
+  >
+    Surface
+  </div>
 </div>
 `;
 
@@ -81,12 +91,14 @@ Snapshot Diff:
 - First value
 + Second value
 
-  <div
--   class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
-+   class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
-    data-wp-c16t="true"
-    data-wp-component="Surface"
-  >
-    Surface
-  </div>
+@@ -1,8 +1,8 @@
+  <div>
+    <div
+-     class="components-surface css-1m2pafr-View-Surface-getBorders-secondary e19lxcc00"
++     class="components-surface css-soe81k-View-Surface-getBorders-primary e19lxcc00"
+      data-wp-c16t="true"
+      data-wp-component="Surface"
+    >
+      Surface
+    </div>
 `;
diff --git a/packages/components/src/surface/test/index.tsx b/packages/components/src/surface/test/index.tsx
index 44c2f1fac785e..c9a4b0598e32a 100644
--- a/packages/components/src/surface/test/index.tsx
+++ b/packages/components/src/surface/test/index.tsx
@@ -16,43 +16,33 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
+		expect( base.container ).toMatchSnapshot();
 	} );
 
 	test( 'should render variants', () => {
 		const { container } = render(
 			<Surface variant="secondary">Surface</Surface>
 		);
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderLeft', () => {
 		const { container } = render( <Surface borderLeft>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderRight', () => {
 		const { container } = render( <Surface borderRight>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderTop', () => {
 		const { container } = render( <Surface borderTop>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 
 	test( 'should render borderBottom', () => {
 		const { container } = render( <Surface borderBottom>Surface</Surface> );
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
+		expect( container ).toMatchDiffSnapshot( base.container );
 	} );
 } );
diff --git a/packages/components/src/tab-panel/index.tsx b/packages/components/src/tab-panel/index.tsx
index 8388d715b2343..4e0b0394bd740 100644
--- a/packages/components/src/tab-panel/index.tsx
+++ b/packages/components/src/tab-panel/index.tsx
@@ -97,11 +97,10 @@ export function TabPanel( {
 	const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;
 
 	useEffect( () => {
-		const newSelectedTab = find( tabs, { name: selected } );
-		if ( ! newSelectedTab && tabs.length > 0 ) {
+		if ( ! selectedTab?.name && tabs.length > 0 ) {
 			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
-	}, [ tabs ] );
+	}, [ tabs, selectedTab?.name, initialTabName ] );
 
 	return (
 		<div className={ className }>
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index 3b8f7aacc265c..ce096cac6bcb5 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -38,14 +38,22 @@ describe( 'TabPanel', () => {
 	it( 'should render a tabpanel, and clicking should change tabs', async () => {
 		const user = setupUser();
 		const panelRenderFunction = jest.fn();
+		const mockOnSelect = jest.fn();
 
-		render( <TabPanel tabs={ TABS } children={ panelRenderFunction } /> );
+		render(
+			<TabPanel
+				tabs={ TABS }
+				children={ panelRenderFunction }
+				onSelect={ mockOnSelect }
+			/>
+		);
 
 		expect( getSelectedTab() ).toHaveTextContent( 'Alpha' );
 		expect(
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Beta' } ) );
 
@@ -54,6 +62,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Beta' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 1 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 
 		await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
 
@@ -62,6 +71,7 @@ describe( 'TabPanel', () => {
 			screen.getByRole( 'tabpanel', { name: 'Alpha' } )
 		).toBeInTheDocument();
 		expect( panelRenderFunction ).toHaveBeenLastCalledWith( TABS[ 0 ] );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
 	} );
 
 	it( 'should render with a tab initially selected by prop initialTabIndex', () => {
@@ -117,4 +127,71 @@ describe( 'TabPanel', () => {
 			'gamma-class'
 		);
 	} );
+
+	it( 'should select `initialTabname` if defined', () => {
+		const mockOnSelect = jest.fn();
+
+		render(
+			<TabPanel
+				tabs={ TABS }
+				initialTabName="beta"
+				children={ () => undefined }
+				onSelect={ mockOnSelect }
+			/>
+		);
+		expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+		expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+	} );
+
+	describe( 'fallbacks when new tab list invalidates current selection', () => {
+		it( 'should select `initialTabName` if defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					initialTabName="gamma"
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Gamma' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+
+		it( 'should select first tab if `initialTabName` not defined', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			const { rerender } = render(
+				<TabPanel
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+
+			rerender(
+				<TabPanel
+					tabs={ TABS.slice( 1 ) /* remove alpha */ }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+			expect( getSelectedTab() ).toHaveTextContent( 'Beta' );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+		} );
+	} );
 } );
diff --git a/packages/components/src/text-control/index.tsx b/packages/components/src/text-control/index.tsx
index 9fbe02707f58d..15d792489ba99 100644
--- a/packages/components/src/text-control/index.tsx
+++ b/packages/components/src/text-control/index.tsx
@@ -62,8 +62,6 @@ function UnforwardedTextControl(
 /**
  * TextControl components let users enter and edit text.
  *
- *
- * @example
  * ```jsx
  * import { TextControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
diff --git a/packages/components/src/text-control/stories/index.tsx b/packages/components/src/text-control/stories/index.tsx
index 89057c2b33910..9c10a970e1ef1 100644
--- a/packages/components/src/text-control/stories/index.tsx
+++ b/packages/components/src/text-control/stories/index.tsx
@@ -17,12 +17,11 @@ const meta: ComponentMeta< typeof TextControl > = {
 	component: TextControl,
 	title: 'Components/TextControl',
 	argTypes: {
-		onChange: {
-			action: 'onChange',
-		},
-		value: {
-			control: { type: null },
-		},
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		type: { control: { type: 'text' } },
+		onChange: { action: 'onChange' },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: {
diff --git a/packages/components/src/text/test/__snapshots__/index.tsx.snap b/packages/components/src/text/test/__snapshots__/index.tsx.snap
index 2d962f51c74f6..e7fa80f09625c 100644
--- a/packages/components/src/text/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/text/test/__snapshots__/index.tsx.snap
@@ -31,17 +31,19 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
   box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
+<div>
   <span
-    class=""
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
   >
-    Lorem ipsum.
+    <span
+      class=""
+    >
+      Lorem ipsum.
+    </span>
   </span>
-</span>
+</div>
 `;
 
 exports[`Text snapshot tests should render correctly 1`] = `
@@ -53,11 +55,13 @@ exports[`Text snapshot tests should render correctly 1`] = `
   font-weight: normal;
 }
 
-<span
-  class="components-truncate components-text emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Text"
->
-  Lorem ipsum.
-</span>
+<div>
+  <span
+    class="components-truncate components-text emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Text"
+  >
+    Lorem ipsum.
+  </span>
+</div>
 `;
diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx
index 2b4f4c4d6ae5d..cb33a017bcdbd 100644
--- a/packages/components/src/text/test/index.tsx
+++ b/packages/components/src/text/test/index.tsx
@@ -14,7 +14,7 @@ describe( 'Text', () => {
 	describe( 'snapshot tests', () => {
 		test( 'should render correctly', () => {
 			const { container } = render( <Text>Lorem ipsum.</Text> );
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 
@@ -116,7 +116,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
 		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
index e149dcd5f4d2c..d22c99a414d16 100644
--- a/packages/components/src/toggle-control/README.md
+++ b/packages/components/src/toggle-control/README.md
@@ -44,14 +44,16 @@ If this property is added, a label will be generated using label property as the
 ### help
 
 If this property is added, a help text will be generated using help property as the content.
+For controlled components the `help` prop can also be a function which will return a help text
+dynamically depending on the boolean `checked` parameter.
 
--   Type: `String|WPElement`
+-   Type: `String|WPElement|Function`
 -   Required: No
 
 ### checked
 
 If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
-If no value is passed the toggle will be unchecked.
+If no value is passed the toggle will be an uncontrolled component with unchecked initial value.
 
 -   Type: `Boolean`
 -   Required: No
@@ -74,5 +76,5 @@ A function that receives the checked state (boolean) as input.
 
 The class that will be added with `components-base-control` and `components-toggle-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-control` are used.
 
-Type: String
-Required: No
+-		Type: `String`
+-		Required: No
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index cb31677a356ec..4dfcda30e7cab 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -64,8 +64,19 @@ export function ToggleControl( {
 
 	let describedBy, helpLabel;
 	if ( help ) {
-		describedBy = id + '__help';
-		helpLabel = typeof help === 'function' ? help( checked ) : help;
+		if ( typeof help === 'function' ) {
+			// `help` as a function works only for controlled components where
+			// `checked` is passed down from parent component. Uncontrolled
+			// component can show only a static help label.
+			if ( checked !== undefined ) {
+				helpLabel = help( checked );
+			}
+		} else {
+			helpLabel = help;
+		}
+		if ( helpLabel ) {
+			describedBy = id + '__help';
+		}
 	}
 
 	return (
diff --git a/packages/components/src/toggle-control/types.ts b/packages/components/src/toggle-control/types.ts
index 3ad8d815f39d9..568c44fb64af0 100644
--- a/packages/components/src/toggle-control/types.ts
+++ b/packages/components/src/toggle-control/types.ts
@@ -13,10 +13,8 @@ export type ToggleControlProps = Pick<
 	FormToggleProps,
 	'checked' | 'disabled'
 > &
-	Pick<
-		BaseControlProps,
-		'__nextHasNoMarginBottom' | 'help' | 'className'
-	> & {
+	Pick< BaseControlProps, '__nextHasNoMarginBottom' | 'className' > & {
+		help?: ReactNode | ( ( checked: boolean ) => ReactNode );
 		/**
 		 * The label for the toggle.
 		 */
diff --git a/packages/components/src/toggle-group-control/stories/index.tsx b/packages/components/src/toggle-group-control/stories/index.tsx
index b949531025ca1..7a39597f19258 100644
--- a/packages/components/src/toggle-group-control/stories/index.tsx
+++ b/packages/components/src/toggle-group-control/stories/index.tsx
@@ -124,11 +124,11 @@ WithIcons.args = {
 };
 
 /**
- * A borderless style may be preferred in some contexts.
+ * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Borderless: ComponentStory< typeof ToggleGroupControl > =
+export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
 	Template.bind( {} );
-Borderless.args = {
+Deselectable.args = {
 	...WithIcons.args,
-	__experimentalIsBorderless: true,
+	isDeselectable: true,
 };
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 51b1f8b9100cf..7cf90f8ff5144 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -41,7 +41,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
-  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -53,6 +52,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   transition: transform 100ms linear;
   min-height: 36px;
   border-color: #757575;
+  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -61,6 +61,10 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
@@ -68,14 +72,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   background: #1e1e1e;
   border-radius: 2px;
-  box-shadow: transparent;
   left: 0;
   position: absolute;
   top: 2px;
@@ -142,6 +141,11 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   user-select: none;
   width: 100%;
   z-index: 2;
+  color: #1e1e1e;
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+  color: #fff;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -158,123 +162,174 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   background: #fff;
 }
 
+.emotion-14:active {
+  background: transparent;
+}
+
 .emotion-15 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.emotion-19 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
   color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;
 }
 
-.emotion-16 {
-  color: #fff;
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-19 {
+    transition-duration: 0ms;
+  }
 }
 
-.emotion-16:active {
-  background: transparent;
+.emotion-19::-moz-focus-inner {
+  border: 0;
 }
 
-.emotion-17 {
-  font-size: 13px;
-  line-height: 1;
+.emotion-19:active {
+  background: #fff;
 }
 
-<div
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-1"
-      role="radiogroup"
-    >
-      <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
       <div
-        class="emotion-10 emotion-11"
-        role="presentation"
-        style="transform: translateX(0px); transition: none; width: 0px;"
-      />
-      <div
-        class="emotion-12 emotion-13"
-        data-active="true"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="true"
-          aria-label="Uppercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base emotion-16"
-          data-value="uppercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-2"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-17 emotion-18"
-          >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
-              />
-            </svg>
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-12 emotion-13"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-1"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="Lowercase"
-          class="emotion-14 emotion-15 components-toggle-group-control-option-base"
-          data-value="lowercase"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-1-3"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+          role="presentation"
+          style="transform: translateX(0px); transition: none; width: 0px;"
+        />
+        <div
+          class="emotion-12 emotion-13"
         >
-          <div
-            class="emotion-17 emotion-18"
+          <button
+            aria-checked="true"
+            aria-label="Uppercase"
+            class="emotion-14 components-toggle-group-control-option-base"
+            data-value="uppercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-2"
+            role="radio"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="emotion-15 emotion-16"
             >
-              <path
-                d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
-              />
-            </svg>
-          </div>
-        </button>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-12 emotion-13"
+        >
+          <button
+            aria-checked="false"
+            aria-label="Lowercase"
+            class="emotion-19 components-toggle-group-control-option-base"
+            data-value="lowercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-1-3"
+            role="radio"
+            tabindex="-1"
+          >
+            <div
+              class="emotion-15 emotion-16"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -322,7 +377,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-8 {
   background: #fff;
   border: 1px solid transparent;
-  border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -334,6 +388,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   transition: transform 100ms linear;
   min-height: 36px;
   border-color: #757575;
+  border-radius: 2px;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -342,6 +397,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   }
 }
 
+.emotion-8:hover {
+  border-color: #757575;
+}
+
 .emotion-8:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #006ba1);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
@@ -349,10 +408,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   z-index: 1;
 }
 
-.emotion-8:hover {
-  border-color: #757575;
-}
-
 .emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -421,80 +476,84 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   font-size: 13px;
   line-height: 1;
 }
 
-<div
-  class="components-base-control emotion-0 emotion-1"
->
+<div>
   <div
-    class="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control emotion-0 emotion-1"
   >
     <div
-      class="emotion-4 emotion-5"
-    >
-      <span
-        class="components-base-control__label emotion-6 emotion-7"
-      >
-        Test Toggle Group Control
-      </span>
-    </div>
-    <div
-      aria-label="Test Toggle Group Control"
-      class="components-toggle-group-control emotion-8 emotion-9"
-      data-wp-c16t="true"
-      data-wp-component="ToggleGroupControl"
-      id="toggle-group-control-0"
-      role="radiogroup"
+      class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        aria-hidden="true"
-        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-      />
-      <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        class="emotion-4 emotion-5"
       >
-        <button
-          aria-checked="false"
-          aria-label="R"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="rigas"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-0"
-          role="radio"
-          tabindex="0"
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
         >
-          <div
-            class="emotion-13 emotion-14"
-          >
-            R
-          </div>
-        </button>
+          Test Toggle Group Control
+        </span>
       </div>
       <div
-        class="emotion-10 emotion-11"
-        data-active="false"
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-0"
+        role="radiogroup"
       >
-        <button
-          aria-checked="false"
-          aria-label="J"
-          class="emotion-12 components-toggle-group-control-option-base"
-          data-value="jack"
-          data-wp-c16t="true"
-          data-wp-component="ToggleGroupControlOptionBase"
-          id="toggle-group-control-0-1"
-          role="radio"
-          tabindex="-1"
+        <div
+          aria-hidden="true"
+          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
+        />
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="R"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="rigas"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-0"
+            role="radio"
+            tabindex="0"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              R
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
         >
-          <div
-            class="emotion-13 emotion-14"
+          <button
+            aria-checked="false"
+            aria-label="J"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="jack"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-0-1"
+            role="radio"
+            tabindex="-1"
           >
-            J
-          </div>
-        </button>
+            <div
+              class="emotion-13 emotion-14"
+            >
+              J
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index b6f2d9a5be49d..4abf44c6e0043 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -48,7 +49,7 @@ describe( 'ToggleGroupControl', () => {
 				</ToggleGroupControl>
 			);
 
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 		it( 'with icons', () => {
 			const { container } = render(
@@ -69,7 +70,7 @@ describe( 'ToggleGroupControl', () => {
 				</ToggleGroupControl>
 			);
 
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 	it( 'should call onChange with proper value', () => {
@@ -126,4 +127,130 @@ describe( 'ToggleGroupControl', () => {
 			screen.queryByText( 'Click for Sumptuous Caponata' )
 		).not.toBeInTheDocument();
 	} );
+
+	describe( 'isDeselectable', () => {
+		describe( 'isDeselectable = false', () => {
+			it( 'should not be deselectable', async () => {
+				const mockOnChange = jest.fn();
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						value="rigas"
+						label="Test"
+						onChange={ mockOnChange }
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				const rigas = screen.getByRole( 'radio', {
+					name: 'R',
+					checked: true,
+				} );
+				await user.click( rigas );
+				expect( mockOnChange ).toHaveBeenCalledTimes( 0 );
+			} );
+
+			it( 'should not tab to next radio option', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl value="rigas" label="Test">
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				const rigas = screen.getByRole( 'radio', {
+					name: 'R',
+				} );
+
+				await user.tab();
+				expect( rigas ).toHaveFocus();
+
+				await user.tab();
+				expect( rigas.ownerDocument.body ).toHaveFocus();
+			} );
+		} );
+
+		describe( 'isDeselectable = true', () => {
+			it( 'should be deselectable', async () => {
+				const mockOnChange = jest.fn();
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						value="rigas"
+						label="Test"
+						onChange={ mockOnChange }
+						isDeselectable
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				await user.click(
+					await screen.getByRole( 'button', {
+						name: 'R',
+						pressed: true,
+					} )
+				);
+				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+				expect( mockOnChange ).toHaveBeenCalledWith( undefined );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'R',
+						pressed: false,
+					} )
+				).toBeInTheDocument();
+			} );
+
+			it( 'should tab to the next option button', async () => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+
+				render(
+					<ToggleGroupControl
+						isDeselectable
+						value="rigas"
+						label="Test"
+					>
+						{ options }
+					</ToggleGroupControl>
+				);
+
+				await user.tab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'R',
+						pressed: true,
+					} )
+				).toHaveFocus();
+
+				await user.tab();
+				expect(
+					screen.getByRole( 'button', {
+						name: 'J',
+						pressed: false,
+					} )
+				).toHaveFocus();
+
+				// Focus should not move with arrow keys
+				await user.keyboard( '{ArrowLeft}' );
+				expect(
+					screen.getByRole( 'button', {
+						name: 'J',
+						pressed: false,
+					} )
+				).toHaveFocus();
+			} );
+		} );
+	} );
 } );
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index 9b87dd7f98bdf..c0ab8f95409f7 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -58,46 +58,70 @@ function ToggleGroupControlOptionBase(
 		'ToggleGroupControlOptionBase'
 	);
 	const {
-		className,
 		isBlock = false,
+		isDeselectable = false,
+		size = 'default',
+		...otherContextProps /* context props for Ariakit Radio */
+	} = toggleGroupControlContext;
+	const {
+		className,
 		isIcon = false,
 		value,
 		children,
-		size = 'default',
 		showTooltip = false,
-		...radioProps
-	} = {
-		...toggleGroupControlContext,
-		...buttonProps,
-	};
+		...otherButtonProps
+	} = buttonProps;
 
-	const isActive = radioProps.state === value;
+	const isPressed = otherContextProps.state === value;
 	const cx = useCx();
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
-		styles.buttonView,
-		isIcon && styles.isIcon( { size } ),
-		className,
-		isActive && styles.buttonActive
+		styles.buttonView( { isDeselectable, isIcon, isPressed, size } ),
+		className
 	);
 
+	const buttonOnClick = () => {
+		if ( isDeselectable && isPressed ) {
+			otherContextProps.setState( undefined );
+		} else {
+			otherContextProps.setState( value );
+		}
+	};
+
+	const commonProps = {
+		...otherButtonProps,
+		className: classes,
+		'data-value': value,
+		ref: forwardedRef,
+	};
+
 	return (
-		<LabelView className={ labelViewClasses } data-active={ isActive }>
+		<LabelView className={ labelViewClasses }>
 			<WithToolTip
 				showTooltip={ showTooltip }
-				text={ radioProps[ 'aria-label' ] }
+				text={ otherButtonProps[ 'aria-label' ] }
 			>
-				<Radio
-					{ ...radioProps }
-					as="button"
-					aria-label={ radioProps[ 'aria-label' ] }
-					className={ classes }
-					data-value={ value }
-					ref={ forwardedRef }
-					value={ value }
-				>
-					<ButtonContentView>{ children }</ButtonContentView>
-				</Radio>
+				{ isDeselectable ? (
+					<button
+						{ ...commonProps }
+						aria-pressed={ isPressed }
+						type="button"
+						onClick={ buttonOnClick }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</button>
+				) : (
+					<Radio
+						{ ...commonProps }
+						{
+							...otherContextProps /* these are only for Ariakit Radio */
+						}
+						as="button"
+						value={ value }
+					>
+						<ButtonContentView>{ children }</ButtonContentView>
+					</Radio>
+				) }
 			</WithToolTip>
 		</LabelView>
 	);
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 885ff171eb211..d4b5320edff61 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -8,7 +8,10 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
-import type { ToggleGroupControlProps } from '../types';
+import type {
+	ToggleGroupControlProps,
+	ToggleGroupControlOptionBaseProps,
+} from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -21,7 +24,15 @@ export const labelBlock = css`
 	flex: 1;
 `;
 
-export const buttonView = css`
+export const buttonView = ( {
+	isDeselectable,
+	isIcon,
+	isPressed,
+	size,
+}: Pick< ToggleGroupControlProps, 'isDeselectable' | 'size' > &
+	Pick< ToggleGroupControlOptionBaseProps, 'isIcon' > & {
+		isPressed?: boolean;
+	} ) => css`
 	align-items: center;
 	appearance: none;
 	background: transparent;
@@ -53,22 +64,39 @@ export const buttonView = css`
 	&:active {
 		background: ${ CONFIG.toggleGroupControlBackgroundColor };
 	}
+
+	${ isDeselectable && deselectable }
+	${ isIcon && isIconStyles( { size } ) }
+	${ isPressed && pressed }
+`;
+
+const pressed = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;
+
+const deselectable = css`
+	color: ${ COLORS.gray[ 900 ] };
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px ${ COLORS.white },
+			0 0 0 ${ CONFIG.borderWidthFocus } ${ COLORS.ui.theme };
+		outline: 2px solid transparent;
+	}
 `;
 
 export const ButtonContentView = styled.div`
+	display: flex;
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
 `;
 
-export const separatorActive = css`
-	background: transparent;
-`;
-
-export const isIcon = ( {
-	size,
-}: {
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
-} ) => {
+const isIconStyles = ( {
+	size = 'default',
+}: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
 		'__unstable-large': '34px',
@@ -81,11 +109,3 @@ export const isIcon = ( {
 		padding-right: 0;
 	`;
 };
-
-export const buttonActive = css`
-	color: ${ COLORS.white };
-
-	&:active {
-		background: transparent;
-	}
-`;
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
new file mode 100644
index 0000000000000..72e247659818f
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { forwardRef, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import ToggleGroupControlContext from '../context';
+import { useUpdateEffect } from '../../utils/hooks';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlMainControlProps } from '../types';
+
+function UnforwardedToggleGroupControlAsButtonGroup(
+	{
+		children,
+		isAdaptiveWidth,
+		label,
+		onChange,
+		size,
+		value,
+		...otherProps
+	}: WordPressComponentProps<
+		ToggleGroupControlMainControlProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const baseId = useInstanceId(
+		ToggleGroupControlAsButtonGroup,
+		'toggle-group-control-as-button-group'
+	).toString();
+	const [ selectedValue, setSelectedValue ] = useState( value );
+	const groupContext = {
+		baseId,
+		state: selectedValue,
+		setState: setSelectedValue,
+	};
+	const previousValue = usePrevious( value );
+
+	// Propagate groupContext.state change.
+	useUpdateEffect( () => {
+		// Avoid calling onChange if groupContext state changed
+		// from incoming value.
+		if ( previousValue !== groupContext.state ) {
+			onChange( groupContext.state );
+		}
+	}, [ groupContext.state ] );
+
+	// Sync incoming value with groupContext.state.
+	useUpdateEffect( () => {
+		if ( value !== groupContext.state ) {
+			groupContext.setState( value );
+		}
+	}, [ value ] );
+
+	return (
+		<ToggleGroupControlContext.Provider
+			value={ {
+				...groupContext,
+				isBlock: ! isAdaptiveWidth,
+				isDeselectable: true,
+				size,
+			} }
+		>
+			<View
+				aria-label={ label }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+				role="group"
+			>
+				{ resizeListener }
+				<ToggleGroupControlBackdrop
+					state={ groupContext.state }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+					isAdaptiveWidth={ isAdaptiveWidth }
+				/>
+				{ children }
+			</View>
+		</ToggleGroupControlContext.Provider>
+	);
+}
+
+export const ToggleGroupControlAsButtonGroup = forwardRef(
+	UnforwardedToggleGroupControlAsButtonGroup
+);
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
new file mode 100644
index 0000000000000..9f66e964d9d43
--- /dev/null
+++ b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { RadioGroup, useRadioState } from 'reakit';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
+import ToggleGroupControlContext from '../context';
+import { useUpdateEffect } from '../../utils/hooks';
+import type { WordPressComponentProps } from '../../ui/context';
+import type { ToggleGroupControlMainControlProps } from '../types';
+
+function UnforwardedToggleGroupControlAsRadioGroup(
+	{
+		children,
+		isAdaptiveWidth,
+		label,
+		onChange,
+		size,
+		value,
+		...otherProps
+	}: WordPressComponentProps<
+		ToggleGroupControlMainControlProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< HTMLDivElement >
+) {
+	const containerRef = useRef();
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const baseId = useInstanceId(
+		ToggleGroupControlAsRadioGroup,
+		'toggle-group-control-as-radio-group'
+	).toString();
+	const radio = useRadioState( {
+		baseId,
+		state: value,
+	} );
+	const previousValue = usePrevious( value );
+
+	// Propagate radio.state change.
+	useUpdateEffect( () => {
+		// Avoid calling onChange if radio state changed
+		// from incoming value.
+		if ( previousValue !== radio.state ) {
+			onChange( radio.state );
+		}
+	}, [ radio.state ] );
+
+	// Sync incoming value with radio.state.
+	useUpdateEffect( () => {
+		if ( value !== radio.state ) {
+			radio.setState( value );
+		}
+	}, [ value ] );
+
+	return (
+		<ToggleGroupControlContext.Provider
+			value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
+		>
+			<RadioGroup
+				{ ...radio }
+				aria-label={ label }
+				as={ View }
+				{ ...otherProps }
+				ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
+			>
+				{ resizeListener }
+				<ToggleGroupControlBackdrop
+					state={ radio.state }
+					containerRef={ containerRef }
+					containerWidth={ sizes.width }
+					isAdaptiveWidth={ isAdaptiveWidth }
+				/>
+				{ children }
+			</RadioGroup>
+		</ToggleGroupControlContext.Provider>
+	);
+}
+
+export const ToggleGroupControlAsRadioGroup = forwardRef(
+	UnforwardedToggleGroupControlAsRadioGroup
+);
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 1525269fca993..a7630d23d37c2 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -2,20 +2,11 @@
  * External dependencies
  */
 import type { ForwardedRef } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { RadioGroup, useRadioState } from 'reakit';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useMemo } from '@wordpress/element';
-import {
-	useMergeRefs,
-	useInstanceId,
-	usePrevious,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,19 +16,18 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
-import { useUpdateEffect, useCx } from '../../utils/hooks';
-import { View } from '../../view';
+import { useCx } from '../../utils/hooks';
 import BaseControl from '../../base-control';
 import type { ToggleGroupControlProps } from '../types';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
-import ToggleGroupControlContext from '../context';
 import { VisualLabelWrapper } from './styles';
 import * as styles from './styles';
+import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
+import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 
 const noop = () => {};
 
 function UnconnectedToggleGroupControl(
-	props: WordPressComponentProps< ToggleGroupControlProps, 'input', false >,
+	props: WordPressComponentProps< ToggleGroupControlProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
@@ -45,7 +35,7 @@ function UnconnectedToggleGroupControl(
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
-		__experimentalIsBorderless = false,
+		isDeselectable = false,
 		label,
 		hideLabelFromVision = false,
 		help,
@@ -56,77 +46,42 @@ function UnconnectedToggleGroupControl(
 		...otherProps
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
-	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeObserver();
-	const baseId = useInstanceId(
-		ToggleGroupControl,
-		'toggle-group-control'
-	).toString();
-	const radio = useRadioState( {
-		baseId,
-		state: value,
-	} );
-	const previousValue = usePrevious( value );
-
-	// Propagate radio.state change.
-	useUpdateEffect( () => {
-		// Avoid calling onChange if radio state changed
-		// from incoming value.
-		if ( previousValue !== radio.state ) {
-			onChange( radio.state );
-		}
-	}, [ radio.state ] );
-
-	// Sync incoming value with radio.state.
-	useUpdateEffect( () => {
-		if ( value !== radio.state ) {
-			radio.setState( value );
-		}
-	}, [ value ] );
 
 	const classes = useMemo(
 		() =>
 			cx(
-				styles.ToggleGroupControl( { size } ),
-				! __experimentalIsBorderless && styles.border,
+				styles.ToggleGroupControl( { isDeselectable, size } ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, __experimentalIsBorderless, size ]
+		[ className, cx, isBlock, isDeselectable, size ]
 	);
+
+	const MainControl = isDeselectable
+		? ToggleGroupControlAsButtonGroup
+		: ToggleGroupControlAsRadioGroup;
+
 	return (
 		<BaseControl
 			help={ help }
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 		>
-			<ToggleGroupControlContext.Provider
-				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
-			>
-				{ ! hideLabelFromVision && (
-					<VisualLabelWrapper>
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
-					</VisualLabelWrapper>
-				) }
-				<RadioGroup
-					{ ...radio }
-					aria-label={ label }
-					as={ View }
-					className={ classes }
-					{ ...otherProps }
-					ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
-				>
-					{ resizeListener }
-					<ToggleGroupControlBackdrop
-						{ ...radio }
-						containerRef={ containerRef }
-						containerWidth={ sizes.width }
-						isAdaptiveWidth={ isAdaptiveWidth }
-					/>
-					{ children }
-				</RadioGroup>
-			</ToggleGroupControlContext.Provider>
+			{ ! hideLabelFromVision && (
+				<VisualLabelWrapper>
+					<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
+				</VisualLabelWrapper>
+			) }
+			<MainControl
+				{ ...otherProps }
+				children={ children }
+				className={ classes }
+				isAdaptiveWidth={ isAdaptiveWidth }
+				label={ label }
+				onChange={ onChange }
+				ref={ forwardedRef }
+				size={ size }
+				value={ value }
+			/>
 		</BaseControl>
 	);
 }
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
index 8cfed980974c9..0c8da12bc1051 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -11,13 +11,14 @@ import { CONFIG, COLORS, reduceMotion } from '../../utils';
 import type { ToggleGroupControlProps } from '../types';
 
 export const ToggleGroupControl = ( {
+	isDeselectable,
 	size,
 }: {
+	isDeselectable?: boolean;
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
-	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
 	padding: 2px;
@@ -26,21 +27,23 @@ export const ToggleGroupControl = ( {
 	${ reduceMotion( 'transition' ) }
 
 	${ toggleGroupControlSize( size ) }
-
-	&:focus-within {
-		border-color: ${ COLORS.ui.borderFocus };
-		box-shadow: ${ CONFIG.controlBoxShadowFocus };
-		outline: none;
-		z-index: 1;
-	}
+	${ ! isDeselectable && enclosingBorder }
 `;
 
-export const border = css`
+const enclosingBorder = css`
 	border-color: ${ COLORS.ui.border };
+	border-radius: ${ CONFIG.controlBorderRadius };
 
 	&:hover {
 		border-color: ${ COLORS.ui.borderHover };
 	}
+
+	&:focus-within {
+		border-color: ${ COLORS.ui.borderFocus };
+		box-shadow: ${ CONFIG.controlBoxShadowFocus };
+		outline: none;
+		z-index: 1;
+	}
 `;
 
 export const toggleGroupControlSize = (
@@ -64,7 +67,6 @@ export const block = css`
 export const BackdropView = styled.div`
 	background: ${ COLORS.gray[ 900 ] };
 	border-radius: ${ CONFIG.controlBorderRadius };
-	box-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };
 	left: 0;
 	position: absolute;
 	top: 2px;
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 70c759795d755..8b7345df853c7 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -9,7 +9,6 @@ import type { RadioStateReturn } from 'reakit';
  * Internal dependencies
  */
 import type { BaseControlProps } from '../base-control/types';
-import type { FormElementProps } from '../utils/types';
 
 export type ToggleGroupControlOptionBaseProps = {
 	children: ReactNode;
@@ -72,69 +71,74 @@ export type WithToolTipProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlProps = Omit<
-	FormElementProps< any >,
-	'defaultValue'
-> &
-	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
-		/**
-		 * Label for the form element.
-		 */
-		label: string;
-		/**
-		 * If true, the label will only be visible to screen readers.
-		 *
-		 * @default false
-		 */
-		hideLabelFromVision?: boolean;
-		/**
-		 * Determines if segments should be rendered with equal widths.
-		 *
-		 * @default false
-		 */
-		isAdaptiveWidth?: boolean;
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-		/**
-		 * Borderless style that may be preferred in some contexts.
-		 *
-		 * @default false
-		 */
-		__experimentalIsBorderless?: boolean;
-		/**
-		 * Callback when a segment is selected.
-		 */
-		onChange?: ( value: ReactText | undefined ) => void;
-		/**
-		 * The value of `ToggleGroupControl`
-		 */
-		value?: ReactText;
-		/**
-		 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
-		 * `ToggleGroupControlOptionIcon` components.
-		 */
-		children: ReactNode;
-		/**
-		 * The size variant of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
-	};
+export type ToggleGroupControlProps = Pick<
+	BaseControlProps,
+	'help' | '__nextHasNoMarginBottom'
+> & {
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * Determines if segments should be rendered with equal widths.
+	 *
+	 * @default false
+	 */
+	isAdaptiveWidth?: boolean;
+	/**
+	 * Renders `ToggleGroupControl` as a (CSS) block element.
+	 *
+	 * @default false
+	 */
+	isBlock?: boolean;
+	/**
+	 * Whether an option can be deselected by clicking it again.
+	 *
+	 * @default false
+	 */
+	isDeselectable?: boolean;
+	/**
+	 * Callback when a segment is selected.
+	 */
+	onChange?: ( value: ReactText | undefined ) => void;
+	/**
+	 * The selected value.
+	 */
+	value?: ReactText;
+	/**
+	 * The options to render in the `ToggleGroupControl`, using either the `ToggleGroupControlOption` or
+	 * `ToggleGroupControlOptionIcon` components.
+	 */
+	children: ReactNode;
+	/**
+	 * The size variant of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | '__unstable-large';
+};
 
-export type ToggleGroupControlContextProps = RadioStateReturn &
-	Pick< ToggleGroupControlProps, 'size' > & {
-		/**
-		 * Renders `ToggleGroupControl` as a (CSS) block element.
-		 *
-		 * @default false
-		 */
-		isBlock?: boolean;
-	};
+type ToggleGroupControlAsRadioContext = {
+	isDeselectable?: false;
+} & RadioStateReturn;
+
+type ToggleGroupControlAsButtonContext = { isDeselectable: true } & Pick<
+	RadioStateReturn,
+	'state' | 'setState'
+>;
+
+export type ToggleGroupControlContextProps = Pick<
+	ToggleGroupControlProps,
+	'isBlock' | 'size'
+> & {
+	baseId: string;
+} & ( ToggleGroupControlAsRadioContext | ToggleGroupControlAsButtonContext );
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
@@ -142,3 +146,11 @@ export type ToggleGroupControlBackdropProps = {
 	isAdaptiveWidth?: boolean;
 	state?: any;
 };
+
+export type ToggleGroupControlMainControlProps = Pick<
+	ToggleGroupControlProps,
+	'children' | 'isAdaptiveWidth' | 'label' | 'size'
+> & {
+	onChange: ( value: ReactText | undefined ) => void;
+	value?: ReactText;
+};
diff --git a/packages/components/src/toolbar-dropdown-menu/index.js b/packages/components/src/toolbar-dropdown-menu/index.js
index d9cd11cf03cdd..10b73757057bd 100644
--- a/packages/components/src/toolbar-dropdown-menu/index.js
+++ b/packages/components/src/toolbar-dropdown-menu/index.js
@@ -26,7 +26,7 @@ function ToolbarDropdownMenu( props, ref ) {
 				<DropdownMenu
 					{ ...props }
 					popoverProps={ {
-						isAlternate: true,
+						variant: 'toolbar',
 						...props.popoverProps,
 					} }
 					toggleProps={ toolbarItemProps }
diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
index b9d317a0fb71f..9f03ebbede637 100644
--- a/packages/components/src/tools-panel/stories/index.js
+++ b/packages/components/src/tools-panel/stories/index.js
@@ -497,7 +497,6 @@ export const WithConditionallyRenderedControl = () => {
 export { ToolsPanelWithItemGroupSlot } from './tools-panel-with-item-group-slot';
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {
diff --git a/packages/components/src/tools-panel/stories/tools-panel-with-item-group-slot.js b/packages/components/src/tools-panel/stories/tools-panel-with-item-group-slot.js
index 39122539baf34..717fd3a448527 100644
--- a/packages/components/src/tools-panel/stories/tools-panel-with-item-group-slot.js
+++ b/packages/components/src/tools-panel/stories/tools-panel-with-item-group-slot.js
@@ -203,7 +203,6 @@ export const ToolsPanelWithItemGroupSlot = () => {
 };
 
 const PanelWrapperView = styled.div`
-	max-width: 280px;
 	font-size: 13px;
 
 	.components-dropdown-menu__menu {
diff --git a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
index 2e6955e823dd7..889b883f36c48 100644
--- a/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
+++ b/packages/components/src/tree-grid/test/__snapshots__/cell.js.snap
@@ -1,25 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
-<div
-  role="application"
->
-  <table
-    role="treegrid"
+<div>
+  <div
+    role="application"
   >
-    <tbody>
-      <tr>
-        <td
-          role="gridcell"
-        >
-          <button
-            class="my-button"
+    <table
+      role="treegrid"
+    >
+      <tbody>
+        <tr>
+          <td
+            role="gridcell"
           >
-            Click Me!
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+            <button
+              class="my-button"
+            >
+              Click Me!
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>
 `;
diff --git a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap
index aa77ed429bd2e..83de76cbb88a1 100644
--- a/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap
+++ b/packages/components/src/tree-grid/test/__snapshots__/roving-tab-index.js.snap
@@ -2,6 +2,8 @@
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>
-  child element
+  <div>
+    child element
+  </div>
 </div>
 `;
diff --git a/packages/components/src/tree-grid/test/__snapshots__/row.js.snap b/packages/components/src/tree-grid/test/__snapshots__/row.js.snap
index a5cbe7d37aa30..33d2a05bf2793 100644
--- a/packages/components/src/tree-grid/test/__snapshots__/row.js.snap
+++ b/packages/components/src/tree-grid/test/__snapshots__/row.js.snap
@@ -1,36 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      class="my-row"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        class="my-row"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
 
 exports[`TreeGridRow renders a tr with support for level, positionInSet and setSize props 1`] = `
-<table>
-  <tbody>
-    <tr
-      aria-level="1"
-      aria-posinset="1"
-      aria-setsize="1"
-      role="row"
-    >
-      <td>
-        Test
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div>
+  <table>
+    <tbody>
+      <tr
+        aria-level="1"
+        aria-posinset="1"
+        aria-setsize="1"
+        role="row"
+      >
+        <td>
+          Test
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 `;
diff --git a/packages/components/src/tree-grid/test/cell.js b/packages/components/src/tree-grid/test/cell.js
index 4caf385782369..7e62f751512d2 100644
--- a/packages/components/src/tree-grid/test/cell.js
+++ b/packages/components/src/tree-grid/test/cell.js
@@ -49,6 +49,6 @@ describe( 'TreeGridCell', () => {
 			</TreeGrid>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/tree-grid/test/roving-tab-index.js b/packages/components/src/tree-grid/test/roving-tab-index.js
index e1a05f367ce6e..f346de4f0a1a3 100644
--- a/packages/components/src/tree-grid/test/roving-tab-index.js
+++ b/packages/components/src/tree-grid/test/roving-tab-index.js
@@ -16,6 +16,6 @@ describe( 'RovingTabIndex', () => {
 			</RovingTabIndex>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/tree-grid/test/row.js b/packages/components/src/tree-grid/test/row.js
index afd867ca3bfc1..77b092c073522 100644
--- a/packages/components/src/tree-grid/test/row.js
+++ b/packages/components/src/tree-grid/test/row.js
@@ -20,7 +20,7 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'forwards other props to the rendered tr element', () => {
@@ -39,6 +39,6 @@ describe( 'TreeGridRow', () => {
 			</table>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/ui/context/context-system-provider.js b/packages/components/src/ui/context/context-system-provider.js
index d72fac51be99f..6fe0053dbcd8c 100644
--- a/packages/components/src/ui/context/context-system-provider.js
+++ b/packages/components/src/ui/context/context-system-provider.js
@@ -10,34 +10,21 @@ import {
 	createContext,
 	useContext,
 	useRef,
-	useEffect,
 	useMemo,
 	memo,
 } from '@wordpress/element';
 import warn from '@wordpress/warning';
 
+/**
+ * Internal dependencies
+ */
+import { useUpdateEffect } from '../../utils';
+
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )
 );
 export const useComponentsContext = () => useContext( ComponentsContext );
 
-/**
- * Runs an effect only on update (i.e., ignores the first render)
- *
- * @param {import('react').EffectCallback} effect
- * @param {import('react').DependencyList} deps
- */
-function useUpdateEffect( effect, deps ) {
-	const mounted = useRef( false );
-	useEffect( () => {
-		if ( mounted.current ) {
-			return effect();
-		}
-		mounted.current = true;
-		return undefined;
-	}, deps );
-}
-
 /**
  * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value.
  *
diff --git a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap b/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap
index 0191524d2c644..b69da20537207 100644
--- a/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap
+++ b/packages/components/src/ui/context/test/__snapshots__/context-system-provider.js.snap
@@ -1,29 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render _override props 1`] = `
-<div
-  class="components-component test-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component test-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render context props 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
->
-  Code is Poetry
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  >
+    Code is Poetry
+  </div>
 </div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="components-component emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Component"
-/>
+<div>
+  <div
+    class="components-component emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Component"
+  />
+</div>
 `;
diff --git a/packages/components/src/ui/context/test/context-system-provider.js b/packages/components/src/ui/context/test/context-system-provider.js
index e8c2b5c56286f..8b052bc06c27f 100644
--- a/packages/components/src/ui/context/test/context-system-provider.js
+++ b/packages/components/src/ui/context/test/context-system-provider.js
@@ -30,7 +30,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render context props', () => {
@@ -60,7 +60,7 @@ describe( 'props', () => {
 			</ContextSystemProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
 	} );
 
@@ -98,7 +98,7 @@ describe( 'props', () => {
 			</>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 
 		const el = container.querySelector( '.test-component' );
 
diff --git a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
index b5ab9da09702f..d9f26aa5af8d2 100644
--- a/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/control-group/test/__snapshots__/index.js.snap
@@ -28,22 +28,24 @@ exports[`props should render correctly 1`] = `
   z-index: 1;
 }
 
-<div
-  class="components-flex components-control-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlGroup"
->
-  <button
-    class="components-button"
-    type="button"
+<div>
+  <div
+    class="components-flex components-control-group emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlGroup"
   >
-    Code is Poetry
-  </button>
-  <button
-    class="components-button"
-    type="button"
-  >
-    WordPress.org
-  </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      Code is Poetry
+    </button>
+    <button
+      class="components-button"
+      type="button"
+    >
+      WordPress.org
+    </button>
+  </div>
 </div>
 `;
diff --git a/packages/components/src/ui/control-group/test/index.js b/packages/components/src/ui/control-group/test/index.js
index 6bfd4318b8c13..0587c329b4056 100644
--- a/packages/components/src/ui/control-group/test/index.js
+++ b/packages/components/src/ui/control-group/test/index.js
@@ -17,6 +17,6 @@ describe( 'props', () => {
 				<Button>WordPress.org</Button>
 			</ControlGroup>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
index d0582df5cde06..ffe2d42932d00 100644
--- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap
@@ -37,13 +37,15 @@ exports[`props should render correctly 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render no truncate 1`] = `
@@ -79,13 +81,15 @@ exports[`props should render no truncate 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
 
 exports[`props should render size 1`] = `
@@ -125,11 +129,13 @@ exports[`props should render size 1`] = `
   }
 }
 
-<label
-  class="components-truncate components-text components-control-label emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="ControlLabel"
->
-  Label
-</label>
+<div>
+  <label
+    class="components-truncate components-text components-control-label emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="ControlLabel"
+  >
+    Label
+  </label>
+</div>
 `;
diff --git a/packages/components/src/ui/control-label/test/index.js b/packages/components/src/ui/control-label/test/index.js
index e5b46f73bb043..20a9c99c833b0 100644
--- a/packages/components/src/ui/control-label/test/index.js
+++ b/packages/components/src/ui/control-label/test/index.js
@@ -12,7 +12,7 @@ describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <ControlLabel>Label</ControlLabel> );
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render htmlFor', () => {
@@ -28,7 +28,7 @@ describe( 'props', () => {
 			<ControlLabel size="small">Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render no truncate', () => {
@@ -36,6 +36,6 @@ describe( 'props', () => {
 			<ControlLabel truncate={ false }>Label</ControlLabel>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
index b0df52ceb94f0..b10a44c09d5d8 100644
--- a/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/form-group/test/__snapshots__/index.js.snap
@@ -38,23 +38,25 @@ exports[`props should render alignLabel 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;
 
@@ -96,22 +98,24 @@ exports[`props should render vertically 1`] = `
   }
 }
 
-<div
-  class="components-form-group emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="FormGroup"
->
-  <label
-    class="components-truncate components-text components-control-label emotion-2 emotion-1"
+<div>
+  <div
+    class="components-form-group emotion-0 emotion-1"
     data-wp-c16t="true"
-    data-wp-component="ControlLabel"
-    for="fname"
+    data-wp-component="FormGroup"
   >
-    First name
-  </label>
-  <input
-    id="fname"
-    type="text"
-  />
+    <label
+      class="components-truncate components-text components-control-label emotion-2 emotion-1"
+      data-wp-c16t="true"
+      data-wp-component="ControlLabel"
+      for="fname"
+    >
+      First name
+    </label>
+    <input
+      id="fname"
+      type="text"
+    />
+  </div>
 </div>
 `;
diff --git a/packages/components/src/ui/form-group/test/index.js b/packages/components/src/ui/form-group/test/index.js
index f221d7352c317..a9c0edb70efad 100644
--- a/packages/components/src/ui/form-group/test/index.js
+++ b/packages/components/src/ui/form-group/test/index.js
@@ -67,7 +67,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render vertically', () => {
@@ -77,7 +77,7 @@ describe( 'props', () => {
 			</FormGroup>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
 /* eslint-enable no-restricted-syntax */
diff --git a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
index 43b32bfa08040..edd4ed91bc352 100644
--- a/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/shortcut/test/__snapshots__/index.js.snap
@@ -10,4 +10,4 @@ exports[`Shortcut should render a span with the shortcut text 1`] = `
 </span>
 `;
 
-exports[`Shortcut should render null when no shortcut is provided 1`] = `null`;
+exports[`Shortcut should render null when no shortcut is provided 1`] = `<div />`;
diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js
index 09329cfdf34cf..7dc49f7b3f663 100644
--- a/packages/components/src/ui/shortcut/test/index.js
+++ b/packages/components/src/ui/shortcut/test/index.js
@@ -11,7 +11,7 @@ import { Shortcut } from '..';
 describe( 'Shortcut', () => {
 	it( 'should render null when no shortcut is provided', () => {
 		const { container } = render( <Shortcut /> );
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	it( 'should render a span with the shortcut text', () => {
diff --git a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap b/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap
index 054fff26111b6..70fd3df3a5b48 100644
--- a/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap
+++ b/packages/components/src/ui/spinner/test/__snapshots__/index.js.snap
@@ -5,19 +5,19 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -10,11 +10,11 @@
-      class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
-      style="transform: scale(0.4444444444444444);"
-    >
-      <div
-        class="css-tada40-BarsView e1s9yo7h0"
--       style="color: blue;"
-+       style="color: rgb(30, 30, 30);"
+@@ -11,11 +11,11 @@
+        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
+        style="transform: scale(0.4444444444444444);"
       >
         <div
-          class="InnerBar1"
-        />
-        <div
+          class="css-tada40-BarsView e1s9yo7h0"
+-         style="color: blue;"
++         style="color: rgb(30, 30, 30);"
+        >
+          <div
+            class="InnerBar1"
+          />
+          <div
 `;
 
 exports[`props should render correctly 1`] = `
@@ -179,58 +179,60 @@ exports[`props should render correctly 1`] = `
   transform: rotate( 330deg ) translate( 0, -130% );
 }
 
-<div
-  aria-busy="true"
-  class="components-spinner emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Spinner"
-  style="height: 16px; width: 16px;"
->
+<div>
   <div
-    aria-hidden="true"
-    class="emotion-2 emotion-3"
-    style="transform: scale(0.4444444444444444);"
+    aria-busy="true"
+    class="components-spinner emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Spinner"
+    style="height: 16px; width: 16px;"
   >
     <div
-      class="emotion-4 emotion-5"
-      style="color: rgb(30, 30, 30);"
+      aria-hidden="true"
+      class="emotion-2 emotion-3"
+      style="transform: scale(0.4444444444444444);"
     >
       <div
-        class="InnerBar1"
-      />
-      <div
-        class="InnerBar2"
-      />
-      <div
-        class="InnerBar3"
-      />
-      <div
-        class="InnerBar4"
-      />
-      <div
-        class="InnerBar5"
-      />
-      <div
-        class="InnerBar6"
-      />
-      <div
-        class="InnerBar7"
-      />
-      <div
-        class="InnerBar8"
-      />
-      <div
-        class="InnerBar9"
-      />
-      <div
-        class="InnerBar10"
-      />
-      <div
-        class="InnerBar11"
-      />
-      <div
-        class="InnerBar12"
-      />
+        class="emotion-4 emotion-5"
+        style="color: rgb(30, 30, 30);"
+      >
+        <div
+          class="InnerBar1"
+        />
+        <div
+          class="InnerBar2"
+        />
+        <div
+          class="InnerBar3"
+        />
+        <div
+          class="InnerBar4"
+        />
+        <div
+          class="InnerBar5"
+        />
+        <div
+          class="InnerBar6"
+        />
+        <div
+          class="InnerBar7"
+        />
+        <div
+          class="InnerBar8"
+        />
+        <div
+          class="InnerBar9"
+        />
+        <div
+          class="InnerBar10"
+        />
+        <div
+          class="InnerBar11"
+        />
+        <div
+          class="InnerBar12"
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -241,23 +243,23 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,16 +1,16 @@
-  <div
-    aria-busy="true"
-    class="components-spinner css-14ywscc-ContainerView e1s9yo7h2"
-    data-wp-c16t="true"
-    data-wp-component="Spinner"
--   style="height: 31px; width: 31px;"
-+   style="height: 16px; width: 16px;"
-  >
+@@ -2,16 +2,16 @@
     <div
-      aria-hidden="true"
-      class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
--     style="transform: scale(0.8611111111111112);"
-+     style="transform: scale(0.4444444444444444);"
+      aria-busy="true"
+      class="components-spinner css-14ywscc-ContainerView e1s9yo7h2"
+      data-wp-c16t="true"
+      data-wp-component="Spinner"
+-     style="height: 31px; width: 31px;"
++     style="height: 16px; width: 16px;"
     >
       <div
-        class="css-tada40-BarsView e1s9yo7h0"
-        style="color: rgb(30, 30, 30);"
+        aria-hidden="true"
+        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
+-       style="transform: scale(0.8611111111111112);"
++       style="transform: scale(0.4444444444444444);"
       >
+        <div
+          class="css-tada40-BarsView e1s9yo7h0"
+          style="color: rgb(30, 30, 30);"
+        >
 `;
diff --git a/packages/components/src/ui/spinner/test/index.js b/packages/components/src/ui/spinner/test/index.js
index d075ab82d0be1..aa9a4360fedff 100644
--- a/packages/components/src/ui/spinner/test/index.js
+++ b/packages/components/src/ui/spinner/test/index.js
@@ -11,7 +11,7 @@ import { Spinner } from '..';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <Spinner /> );
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render color', () => {
@@ -19,9 +19,7 @@ describe( 'props', () => {
 		const { container: secondRenderContainer } = render(
 			<Spinner color="blue" />
 		);
-		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
-			container.firstChild
-		);
+		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
 	} );
 
 	test( 'should render size', () => {
@@ -29,8 +27,6 @@ describe( 'props', () => {
 		const { container: secondRenderContainer } = render(
 			<Spinner size={ 31 } />
 		);
-		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
-			container.firstChild
-		);
+		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
 	} );
 } );
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index a3416d3005e27..5af79504e66b9 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -6,8 +6,6 @@ import type {
 	KeyboardEvent,
 	ForwardedRef,
 	SyntheticEvent,
-	ChangeEvent,
-	PointerEvent,
 } from 'react';
 import classnames from 'classnames';
 
@@ -23,7 +21,7 @@ import { __ } from '@wordpress/i18n';
  */
 import type { WordPressComponentProps } from '../ui/context';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { Root, ValueInput } from './styles/unit-control-styles';
+import { ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
 	CSS_UNITS,
@@ -58,7 +56,6 @@ function UnforwardedUnitControl(
 		onChange: onChangeProp,
 		onUnitChange,
 		size = 'default',
-		style,
 		unit: unitProp,
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
@@ -105,14 +102,18 @@ function UnforwardedUnitControl(
 	// Stores parsed value for hand-off in state reducer.
 	const refParsedQuantity = useRef< number | undefined >( undefined );
 
-	const classes = classnames( 'components-unit-control', className );
+	const classes = classnames(
+		'components-unit-control',
+		// This class is added for legacy purposes to maintain it on the outer
+		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
+		'components-unit-control-wrapper',
+		className
+	);
 
 	const handleOnQuantityChange = (
 		nextQuantityValue: number | string | undefined,
 		changeProps: {
-			event:
-				| ChangeEvent< HTMLInputElement >
-				| PointerEvent< HTMLInputElement >;
+			event: SyntheticEvent;
 		}
 	) => {
 		if (
@@ -177,7 +178,7 @@ function UnforwardedUnitControl(
 				: undefined;
 			const changeProps = { event, data };
 
-			// The `onChange` callback already gets called, no need to call it explicitely.
+			// The `onChange` callback already gets called, no need to call it explicitly.
 			onUnitChange?.( validParsedUnit, changeProps );
 
 			setUnit( validParsedUnit );
@@ -258,27 +259,25 @@ function UnforwardedUnitControl(
 	}
 
 	return (
-		<Root className="components-unit-control-wrapper" style={ style }>
-			<ValueInput
-				type={ isPressEnterToChange ? 'text' : 'number' }
-				{ ...props }
-				autoComplete={ autoComplete }
-				className={ classes }
-				disabled={ disabled }
-				hideHTMLArrows
-				isPressEnterToChange={ isPressEnterToChange }
-				label={ label }
-				onBlur={ handleOnBlur }
-				onKeyDown={ handleOnKeyDown }
-				onChange={ handleOnQuantityChange }
-				ref={ forwardedRef }
-				size={ size }
-				suffix={ inputSuffix }
-				value={ parsedQuantity ?? '' }
-				step={ step }
-				__unstableStateReducer={ stateReducer }
-			/>
-		</Root>
+		<ValueInput
+			type={ isPressEnterToChange ? 'text' : 'number' }
+			{ ...props }
+			autoComplete={ autoComplete }
+			className={ classes }
+			disabled={ disabled }
+			spinControls="none"
+			isPressEnterToChange={ isPressEnterToChange }
+			label={ label }
+			onBlur={ handleOnBlur }
+			onKeyDown={ handleOnKeyDown }
+			onChange={ handleOnQuantityChange }
+			ref={ forwardedRef }
+			size={ size }
+			suffix={ inputSuffix }
+			value={ parsedQuantity ?? '' }
+			step={ step }
+			__unstableStateReducer={ stateReducer }
+		/>
 	);
 }
 
diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts
index ba5952a5ba65d..9cf51b2d3bbda 100644
--- a/packages/components/src/unit-control/styles/unit-control-styles.ts
+++ b/packages/components/src/unit-control/styles/unit-control-styles.ts
@@ -18,16 +18,6 @@ type SelectProps = {
 	selectSize: SelectSize;
 };
 
-export const Root = styled.div`
-	box-sizing: border-box;
-	position: relative;
-
-	/* Target the InputControl's backdrop and make focus styles smoother. */
-	&&& ${ BackdropUI } {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -37,6 +27,10 @@ export const ValueInput = styled( NumberControl )`
 			display: block;
 			width: 100%;
 		}
+
+		${ BackdropUI } {
+			transition: box-shadow 0.1s linear;
+		}
 	}
 `;
 
@@ -129,8 +123,8 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 };
 
 export const UnitSelect = styled.select< SelectProps >`
-	// The && counteracts <select> styles in WP forms.css
-	&& {
+	// The &&& counteracts <select> styles in WP forms.css
+	&&& {
 		appearance: none;
 		background: transparent;
 		border-radius: 2px;
diff --git a/packages/components/src/unit-control/test/utils.ts b/packages/components/src/unit-control/test/utils.ts
index 83d57a5b519dc..b843764f4a57e 100644
--- a/packages/components/src/unit-control/test/utils.ts
+++ b/packages/components/src/unit-control/test/utils.ts
@@ -6,6 +6,7 @@ import {
 	useCustomUnits,
 	getValidParsedQuantityAndUnit,
 	getUnitsWithCurrentUnit,
+	parseQuantityAndUnitFromRawValue,
 } from '../utils';
 import type { WPUnitControlUnit } from '../types';
 
@@ -242,4 +243,46 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toEqual( limitedUnits );
 		} );
 	} );
+
+	describe( 'parseQuantityAndUnitFromRawValue', () => {
+		const cases: [
+			number | string | undefined,
+			number | undefined,
+			string | undefined
+		][] = [
+			// Test undefined.
+			[ undefined, undefined, undefined ],
+			// Test integers and non-integers.
+			[ 1, 1, undefined ],
+			[ 1.25, 1.25, undefined ],
+			[ '123', 123, undefined ],
+			[ '1.5', 1.5, undefined ],
+			[ '0.75', 0.75, undefined ],
+			// Valid simple CSS values.
+			[ '20px', 20, 'px' ],
+			[ '0.8em', 0.8, 'em' ],
+			[ '2rem', 2, 'rem' ],
+			[ '1.4vw', 1.4, 'vw' ],
+			[ '0.4vh', 0.4, 'vh' ],
+			[ '-5px', -5, 'px' ],
+			// Complex CSS values that shouldn't parse.
+			[ 'abs(-15px)', undefined, undefined ],
+			[ 'calc(10px + 1)', undefined, undefined ],
+			[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
+			[ 'max(4.5em, 3vh)', undefined, undefined ],
+			[ 'min(10px, 1rem)', undefined, undefined ],
+			[ 'minmax(30px, auto)', undefined, undefined ],
+			[ 'var(--wp--font-size)', undefined, undefined ],
+		];
+
+		test.each( cases )(
+			'given %p as argument, returns value = %p and unit = %p',
+			( rawValue, expectedQuantity, expectedUnit ) => {
+				const [ quantity, unit ] =
+					parseQuantityAndUnitFromRawValue( rawValue );
+				expect( quantity ).toBe( expectedQuantity );
+				expect( unit ).toBe( expectedUnit );
+			}
+		);
+	} );
 } );
diff --git a/packages/components/src/unit-control/types.ts b/packages/components/src/unit-control/types.ts
index edbd5ac8f4cd6..ecb9950d7167c 100644
--- a/packages/components/src/unit-control/types.ts
+++ b/packages/components/src/unit-control/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { FocusEventHandler, SyntheticEvent } from 'react';
+import type { FocusEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -38,10 +38,9 @@ export type WPUnitControlUnit = {
 	step?: number;
 };
 
-export type UnitControlOnChangeCallback = InputChangeCallback<
-	SyntheticEvent< HTMLSelectElement | HTMLInputElement >,
-	{ data?: WPUnitControlUnit }
->;
+export type UnitControlOnChangeCallback = InputChangeCallback< {
+	data?: WPUnitControlUnit;
+} >;
 
 export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	/**
@@ -67,7 +66,7 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 };
 
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
-	Omit< NumberControlProps, 'hideHTMLArrows' | 'suffix' | 'type' > & {
+	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 05364a34a5eed..ca8c4ee894176 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -33,7 +33,6 @@ const TOGGLE_GROUP_CONTROL_PROPS = {
 	toggleGroupControlBackdropBackgroundColor:
 		CONTROL_PROPS.controlSurfaceColor,
 	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBoxShadow: 'transparent',
 	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };
 
diff --git a/packages/components/src/utils/hooks/use-update-effect.js b/packages/components/src/utils/hooks/use-update-effect.js
index aaf04478b3860..ab96caf579975 100644
--- a/packages/components/src/utils/hooks/use-update-effect.js
+++ b/packages/components/src/utils/hooks/use-update-effect.js
@@ -13,13 +13,17 @@ import { useRef, useEffect } from '@wordpress/element';
  */
 function useUpdateEffect( effect, deps ) {
 	const mounted = useRef( false );
-
 	useEffect( () => {
 		if ( mounted.current ) {
 			return effect();
 		}
 		mounted.current = true;
 		return undefined;
+		// Disable reasons:
+		// 1. This hook needs to pass a dep list that isn't an array literal
+		// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
 }
 
diff --git a/packages/components/src/utils/types.ts b/packages/components/src/utils/types.ts
index f33aa4b427d6d..54fe75edaa306 100644
--- a/packages/components/src/utils/types.ts
+++ b/packages/components/src/utils/types.ts
@@ -7,21 +7,6 @@ export type SizeRangeDefault =
 
 export type SizeRangeReduced = 'large' | 'medium' | 'small';
 
-export type FormElementProps< V > = {
-	/**
-	 * The default (initial) state to use if `value` is undefined.
-	 */
-	defaultValue?: V;
-	/**
-	 * Determines if element is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * Label for the form element.
-	 */
-	label?: string;
-};
-
 export type PopperPlacement =
 	| 'auto'
 	| 'auto-start'
diff --git a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
index 5e842a5103a14..9404cbb976b97 100644
--- a/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/v-stack/test/__snapshots__/index.tsx.snap
@@ -24,17 +24,19 @@ exports[`props should render alignment 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -61,17 +63,19 @@ exports[`props should render correctly 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -98,16 +102,18 @@ exports[`props should render spacing 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
diff --git a/packages/components/src/v-stack/test/index.tsx b/packages/components/src/v-stack/test/index.tsx
index 29cd5c5be51bb..cf35691d0858f 100644
--- a/packages/components/src/v-stack/test/index.tsx
+++ b/packages/components/src/v-stack/test/index.tsx
@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/src/view/test/__snapshots__/index.js.snap b/packages/components/src/view/test/__snapshots__/index.js.snap
index dbdd3f54df453..91a45d6d98dd0 100644
--- a/packages/components/src/view/test/__snapshots__/index.js.snap
+++ b/packages/components/src/view/test/__snapshots__/index.js.snap
@@ -1,41 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`props should render as another element 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render correctly 1`] = `
-<div
-  class="emotion-0 emotion-1"
->
-  <span />
+<div>
+  <div
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </div>
 </div>
 `;
 
 exports[`props should render with custom styles (Array) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render with custom styles (object) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
 
 exports[`props should render with custom styles (string) 1`] = `
-<p
-  class="emotion-0 emotion-1"
->
-  <span />
-</p>
+<div>
+  <p
+    class="emotion-0 emotion-1"
+  >
+    <span />
+  </p>
+</div>
 `;
diff --git a/packages/components/src/view/test/index.js b/packages/components/src/view/test/index.js
index d55dcb45dec01..56c6f7cd7a148 100644
--- a/packages/components/src/view/test/index.js
+++ b/packages/components/src/view/test/index.js
@@ -15,7 +15,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render as another element', () => {
@@ -24,7 +24,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (string)', () => {
@@ -38,7 +38,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (object)', () => {
@@ -52,7 +52,7 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render with custom styles (Array)', () => {
@@ -69,6 +69,6 @@ describe( 'props', () => {
 				<span />
 			</View>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 5c103f27ead05..c5d62d9423779 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -63,8 +63,6 @@
 		"src/palette-edit",
 		"src/panel",
 		"src/query-controls",
-		"src/radio",
-		"src/radio-group",
 		"src/responsive-wrapper",
 		"src/sandbox",
 		"src/snackbar",
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 0d9a9d093588a..04be2e1b177c5 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Internal
+
+-   `useDisabled`: Refactor the component to rely on the HTML `inert` attribute ([#44865](https://github.com/WordPress/gutenberg/pull/44865)).
+-   `useFocusOutside`: Refactor the hook to TypeScript, rewrite tests using modern RTL and jest features ([#45317](https://github.com/WordPress/gutenberg/pull/45317)).
+-   `useFocusableIframe`: Refactor to TypeScript ([#45428](https://github.com/WordPress/gutenberg/pull/45428)).
+
 ## 5.18.0 (2022-10-19)
 
 ## 5.17.0 (2022-10-05)
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 6cc928be13096..51897ce7905c1 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -326,7 +326,7 @@ Dispatches a bubbling focus event when the iframe receives focus. Use
 
 _Returns_
 
--   `Object`: Ref to pass to the iframe.
+-   `RefCallback< HTMLIFrameElement >`: Ref to pass to the iframe.
 
 ### useFocusOnMount
 
diff --git a/packages/compose/src/hooks/use-dialog/index.ts b/packages/compose/src/hooks/use-dialog/index.ts
index 28086799c0ded..bac94602489e6 100644
--- a/packages/compose/src/hooks/use-dialog/index.ts
+++ b/packages/compose/src/hooks/use-dialog/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { KeyboardEvent, RefCallback, SyntheticEvent } from 'react';
+import type { RefCallback, SyntheticEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,6 @@ import useFocusOnMount from '../use-focus-on-mount';
 import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
-import type { FocusOutsideReturnValue } from '../use-focus-outside';
 
 type DialogOptions = {
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
@@ -35,7 +34,7 @@ type DialogOptions = {
 
 type useDialogReturn = [
 	RefCallback< HTMLElement >,
-	FocusOutsideReturnValue & Pick< HTMLElement, 'tabIndex' >
+	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >
 ];
 
 /**
@@ -64,7 +63,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 			currentOptions.current.onClose();
 		}
 	} );
-	const closeOnEscapeRef = useCallback( ( node ) => {
+	const closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {
 		if ( ! node ) {
 			return;
 		}
diff --git a/packages/compose/src/hooks/use-focus-outside/index.js b/packages/compose/src/hooks/use-focus-outside/index.ts
similarity index 56%
rename from packages/compose/src/hooks/use-focus-outside/index.js
rename to packages/compose/src/hooks/use-focus-outside/index.ts
index fdccb6ea01330..cbf1d45d8c9e4 100644
--- a/packages/compose/src/hooks/use-focus-outside/index.js
+++ b/packages/compose/src/hooks/use-focus-outside/index.ts
@@ -1,3 +1,16 @@
+/**
+ * External dependencies
+ */
+import type {
+	FocusEventHandler,
+	EventHandler,
+	MouseEventHandler,
+	TouchEventHandler,
+	FocusEvent,
+	MouseEvent,
+	TouchEvent,
+} from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -6,28 +19,32 @@ import { useCallback, useEffect, useRef } from '@wordpress/element';
 /**
  * Input types which are classified as button types, for use in considering
  * whether element is a (focus-normalized) button.
- *
- * @type {string[]}
  */
 const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
 
 /**
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
+ * List of HTML button elements subject to focus normalization
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  */
+type FocusNormalizedButton =
+	| HTMLButtonElement
+	| HTMLLinkElement
+	| HTMLInputElement;
 
-// Disable reason: Rule doesn't support predicate return types.
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns true if the given element is a button element subject to focus
  * normalization, or false otherwise.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param {EventTarget} eventTarget The target from a mouse or touch event.
+ * @param  eventTarget The target from a mouse or touch event.
  *
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
+ * @return Whether the element is a button element subject to focus normalization.
  */
-function isFocusNormalizedButton( eventTarget ) {
+function isFocusNormalizedButton(
+	eventTarget: EventTarget
+): eventTarget is FocusNormalizedButton {
 	if ( ! ( eventTarget instanceof window.HTMLElement ) ) {
 		return false;
 	}
@@ -38,54 +55,35 @@ function isFocusNormalizedButton( eventTarget ) {
 
 		case 'INPUT':
 			return INPUT_BUTTON_TYPES.includes(
-				/** @type {HTMLInputElement} */ ( eventTarget ).type
+				( eventTarget as HTMLInputElement ).type
 			);
 	}
 
 	return false;
 }
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
 
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
- */
+type UseFocusOutsideReturn = {
+	onFocus: FocusEventHandler;
+	onMouseDown: MouseEventHandler;
+	onMouseUp: MouseEventHandler;
+	onTouchStart: TouchEventHandler;
+	onTouchEnd: TouchEventHandler;
+	onBlur: FocusEventHandler;
+};
 
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside( onFocusOutside ) {
+export default function useFocusOutside(
+	onFocusOutside: ( event: FocusEvent ) => void
+): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
 		currentOnFocusOutside.current = onFocusOutside;
@@ -93,10 +91,7 @@ export default function useFocusOutside( onFocusOutside ) {
 
 	const preventBlurCheck = useRef( false );
 
-	/**
-	 * @type {import('react').MutableRefObject<number | undefined>}
-	 */
-	const blurCheckTimeoutId = useRef();
+	const blurCheckTimeoutId = useRef< number | undefined >();
 
 	/**
 	 * Cancel a blur check timeout.
@@ -124,20 +119,20 @@ export default function useFocusOutside( onFocusOutside ) {
 	 * button elements when clicked, while others do. The logic here
 	 * intends to normalize this as treating click on buttons as focus.
 	 *
+	 * @param  event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-	 *
-	 * @param {SyntheticEvent} event Event for mousedown or mouseup.
 	 */
-	const normalizeButtonFocus = useCallback( ( event ) => {
-		const { type, target } = event;
-		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
-		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
-		}
-	}, [] );
+	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
+		useCallback( ( event ) => {
+			const { type, target } = event;
+			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+			if ( isInteractionEnd ) {
+				preventBlurCheck.current = false;
+			} else if ( isFocusNormalizedButton( target ) ) {
+				preventBlurCheck.current = true;
+			}
+		}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -145,10 +140,8 @@ export default function useFocusOutside( onFocusOutside ) {
 	 *
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
-	 *
-	 * @param {SyntheticEvent} event Blur event.
 	 */
-	const queueBlurCheck = useCallback( ( event ) => {
+	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();
diff --git a/packages/compose/src/hooks/use-focus-outside/test/index.js b/packages/compose/src/hooks/use-focus-outside/test/index.js
index 093bbb09ed1b3..2f7c983bb0a62 100644
--- a/packages/compose/src/hooks/use-focus-outside/test/index.js
+++ b/packages/compose/src/hooks/use-focus-outside/test/index.js
@@ -4,120 +4,149 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import useFocusOutside from '../';
 
-let onFocusOutside;
-
-describe( 'useFocusOutside', () => {
-	let origHasFocus;
-
-	const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
+	<div>
+		{ /* Wrapper */ }
 		<div { ...useFocusOutside( callback ) }>
 			<input type="text" />
-			<input type="button" />
+			<button>Button inside the wrapper</button>
+			<iframe title="test-iframe">
+				<button>Inside the iframe</button>
+			</iframe>
 		</div>
-	);
 
-	class TestComponent extends Component {
-		render() {
-			return <FocusOutsideComponent { ...this.props } />;
-		}
-	}
+		<button>Button outside the wrapper</button>
+	</div>
+);
 
-	beforeEach( () => {
-		// Mock document.hasFocus() to always be true for testing
-		// note: we overide this for some tests.
-		origHasFocus = document.hasFocus;
-		document.hasFocus = () => true;
-
-		onFocusOutside = jest.fn();
-	} );
-
-	afterEach( () => {
-		document.hasFocus = origHasFocus;
-	} );
-
-	it( 'should not call handler if focus shifts to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+describe( 'useFocusOutside', () => {
+	it( 'should not call handler if focus shifts to element within component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		input.focus();
-		input.blur();
-		button.focus();
+		// Tab through the interactive elements inside the wrapper,
+		// causing multiple focus/blur events.
+		await user.tab();
+		expect( screen.getByRole( 'textbox' ) ).toHaveFocus();
 
-		jest.runAllTimers();
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		).toHaveFocus();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not call handler if focus transitions via click to button', async () => {
+		const mockOnFocusOutside = jest.fn();
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
-
-		const input = screen.getByRole( 'textbox' );
-		const button = screen.getByRole( 'button' );
 
-		input.focus();
-		await user.click( button );
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Click the input and the button, causing multiple focus/blur events.
+		await user.click( screen.getByRole( 'textbox' ) );
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+	it( 'should call handler if focus shifts to element outside component', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		// Click and focus button inside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
 
-		jest.runAllTimers();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 
-		expect( onFocusOutside ).toHaveBeenCalled();
-	} );
+		// Click and focus button outside the wrapper
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
 
-	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
-		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+		expect( mockOnFocusOutside ).toHaveBeenCalled();
+	} );
 
+	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
 		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
-		document.hasFocus = () => false;
+		const mockedDocumentHasFocus = jest
+			.spyOn( document, 'hasFocus' )
+			.mockImplementation( () => false );
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
+		);
 
-		jest.runAllTimers();
+		// Click and focus button inside the wrapper, then click and focus
+		// a button outside the wrapper.
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button inside the wrapper' } )
+		);
+		await user.click(
+			screen.getByRole( 'button', { name: 'Button outside the wrapper' } )
+		);
+
+		// The handler is not called thanks to the mocked return value of
+		// `document.hasFocus()`
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		// Restore the `document.hasFocus()` function to its original implementation.
+		mockedDocumentHasFocus.mockRestore();
 	} );
 
-	it( 'should cancel check when unmounting while queued', () => {
-		const { rerender } = render(
-			<TestComponent onFocusOutside={ onFocusOutside } />
+	it( 'should cancel check when unmounting while queued', async () => {
+		const mockOnFocusOutside = jest.fn();
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		const { unmount } = render(
+			<FocusOutsideComponent onFocusOutside={ mockOnFocusOutside } />
 		);
 
-		const input = screen.getByRole( 'textbox' );
-		input.focus();
-		input.blur();
+		// Click and focus button inside the wrapper.
+		const button = screen.getByRole( 'button', {
+			name: 'Button inside the wrapper',
+		} );
+		await user.click( button );
 
-		rerender( <div /> );
+		// Simulate a blur event and the wrapper unmounting while the blur event
+		// handler is queued
+		button.blur();
+		unmount();
 
 		jest.runAllTimers();
 
-		expect( onFocusOutside ).not.toHaveBeenCalled();
+		expect( mockOnFocusOutside ).not.toHaveBeenCalled();
 	} );
 } );
diff --git a/packages/compose/src/hooks/use-focusable-iframe/index.js b/packages/compose/src/hooks/use-focusable-iframe/index.ts
similarity index 77%
rename from packages/compose/src/hooks/use-focusable-iframe/index.js
rename to packages/compose/src/hooks/use-focusable-iframe/index.ts
index 9eb464b4e3e80..a184bde404558 100644
--- a/packages/compose/src/hooks/use-focusable-iframe/index.js
+++ b/packages/compose/src/hooks/use-focusable-iframe/index.ts
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { RefCallback } from 'react';
+
 /**
  * Internal dependencies
  */
@@ -7,9 +12,9 @@ import useRefEffect from '../use-ref-effect';
  * Dispatches a bubbling focus event when the iframe receives focus. Use
  * `onFocus` as usual on the iframe or a parent element.
  *
- * @return {Object} Ref to pass to the iframe.
+ * @return Ref to pass to the iframe.
  */
-export default function useFocusableIframe() {
+export default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {
 	return useRefEffect( ( element ) => {
 		const { ownerDocument } = element;
 		if ( ! ownerDocument ) return;
@@ -22,7 +27,7 @@ export default function useFocusableIframe() {
 		 */
 		function checkFocus() {
 			if ( ownerDocument && ownerDocument.activeElement === element ) {
-				/** @type {HTMLElement} */ ( element ).focus();
+				( element as HTMLElement ).focus();
 			}
 		}
 
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index a5bc7db42835e..97fc0b41ddaf5 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, isEqual, find } from 'lodash';
+import { isEqual, find } from 'lodash';
 import { v4 as uuid } from 'uuid';
 
 /**
@@ -33,7 +33,7 @@ import { STORE_NAME } from './name';
 export function receiveUserQuery( queryID, users ) {
 	return {
 		type: 'RECEIVE_USER_QUERY',
-		users: castArray( users ),
+		users: Array.isArray( users ) ? users : [ users ],
 		queryID,
 	};
 }
@@ -91,8 +91,11 @@ export function receiveEntityRecords(
 	// Auto drafts should not have titles, but some plugins rely on them so we can't filter this
 	// on the server.
 	if ( kind === 'postType' ) {
-		records = castArray( records ).map( ( record ) =>
-			record.status === 'auto-draft' ? { ...record, title: '' } : record
+		records = ( Array.isArray( records ) ? records : [ records ] ).map(
+			( record ) =>
+				record.status === 'auto-draft'
+					? { ...record, title: '' }
+					: record
 		);
 	}
 	let action;
@@ -820,6 +823,6 @@ export function receiveAutosaves( postId, autosaves ) {
 	return {
 		type: 'RECEIVE_AUTOSAVES',
 		postId,
-		autosaves: castArray( autosaves ),
+		autosaves: Array.isArray( autosaves ) ? autosaves : [ autosaves ],
 	};
 }
diff --git a/packages/core-data/src/batch/default-processor.js b/packages/core-data/src/batch/default-processor.js
index 98bd6973025e3..a60e62446c8a1 100644
--- a/packages/core-data/src/batch/default-processor.js
+++ b/packages/core-data/src/batch/default-processor.js
@@ -27,7 +27,7 @@ function chunk( arr, chunkSize ) {
  * @param {Array} requests List of API requests to perform at once.
  *
  * @return {Promise} Promise that resolves to a list of objects containing
- *                   either `output` (if that request was succesful) or `error`
+ *                   either `output` (if that request was successful) or `error`
  *                   (if not ).
  */
 export default async function defaultProcessor( requests ) {
diff --git a/packages/core-data/src/queried-data/actions.js b/packages/core-data/src/queried-data/actions.js
index 7236b4db617a4..58416713aebdb 100644
--- a/packages/core-data/src/queried-data/actions.js
+++ b/packages/core-data/src/queried-data/actions.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * Returns an action object used in signalling that items have been received.
  *
@@ -14,7 +9,7 @@ import { castArray } from 'lodash';
 export function receiveItems( items, edits ) {
 	return {
 		type: 'RECEIVE_ITEMS',
-		items: castArray( items ),
+		items: Array.isArray( items ) ? items : [ items ],
 		persistedEdits: edits,
 	};
 }
@@ -32,7 +27,7 @@ export function receiveItems( items, edits ) {
 export function removeItems( kind, name, records, invalidateCache = false ) {
 	return {
 		type: 'REMOVE_ITEMS',
-		itemIds: castArray( records ),
+		itemIds: Array.isArray( records ) ? records : [ records ],
 		kind,
 		name,
 		invalidateCache,
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index a61d329b2b85a..faf6bca521959 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
+
 ## 2.8.0 (2022-10-19)
 
 ## 2.7.0 (2022-10-05)
diff --git a/packages/create-block-tutorial-template/block-templates/template.php.mustache b/packages/create-block-tutorial-template/block-templates/render.php.mustache
similarity index 100%
rename from packages/create-block-tutorial-template/block-templates/template.php.mustache
rename to packages/create-block-tutorial-template/block-templates/render.php.mustache
diff --git a/packages/create-block-tutorial-template/index.js b/packages/create-block-tutorial-template/index.js
index df13ae6100dc2..514918e70ad8b 100644
--- a/packages/create-block-tutorial-template/index.js
+++ b/packages/create-block-tutorial-template/index.js
@@ -30,6 +30,7 @@ module.exports = {
 					type: 'string',
 				},
 			},
+			render: 'file:./render.php',
 		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
diff --git a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
index 0211437450c15..2322881ab0d71 100644
--- a/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
+++ b/packages/create-block-tutorial-template/plugin-templates/$slug.php.mustache
@@ -8,7 +8,7 @@
  * Description:       {{description}}
 {{/description}}
  * Version:           {{version}}
- * Requires at least: 5.9
+ * Requires at least: 6.1
  * Requires PHP:      7.0
 {{#author}}
  * Author:            {{author}}
@@ -38,33 +38,6 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	{{#isStaticVariant}}
 	register_block_type( __DIR__ . '/build' );
-	{{/isStaticVariant}}
-	{{#isDynamicVariant}}
-	register_block_type(
-		__DIR__ . '/build',
-		array(
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-		)
-	);
-	{{/isDynamicVariant}}
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * Render callback function.
- *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      Block instance.
- *
- * @return string The rendered output.
- */
-function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $atts, $content, $block ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . 'build/template.php';
-	return ob_get_clean();
-}
-{{/isDynamicVariant}}
diff --git a/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache b/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
index a8a1de61fc1de..f069906fb19fa 100644
--- a/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
+++ b/packages/create-block-tutorial-template/plugin-templates/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.0
+Tested up to:      6.1
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index ad798c683b86e..741b83432200a 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancement
+
+-   Update templates to use the `render` field in `block.json` introduced in WordPress 6.1 ([#44185](https://github.com/WordPress/gutenberg/pull/44185)).
+
 ## 4.4.0 (2022-10-19)
 
 ### New Feature
diff --git a/packages/create-block/docs/external-template.md b/packages/create-block/docs/external-template.md
index 5eac143a49f1a..3bbd5a1a06ddf 100644
--- a/packages/create-block/docs/external-template.md
+++ b/packages/create-block/docs/external-template.md
@@ -102,4 +102,5 @@ The following configurable variables are used with the template files. Template
 -   `editorScript` (default: `'file:./index.js'`) – an editor script definition.
 -   `editorStyle` (default: `'file:./index.css'`) – an editor style definition.
 -   `style` (default: `'file:./style-index.css'`) – a frontend and editor style definition.
+-   `render` (no default) – a path to the PHP file used when rendering the block type on the server before presenting on the front end.
 -   `customBlockJSON` (no default) - allows definition of additional properties for the generated block.json file.
diff --git a/packages/create-block/lib/init-block.js b/packages/create-block/lib/init-block.js
index e8a321f85fed7..2a83035f9dc6f 100644
--- a/packages/create-block/lib/init-block.js
+++ b/packages/create-block/lib/init-block.js
@@ -29,6 +29,7 @@ async function initBlockJSON( {
 	editorScript,
 	editorStyle,
 	style,
+	render,
 	customBlockJSON,
 } ) {
 	info( '' );
@@ -57,6 +58,7 @@ async function initBlockJSON( {
 					editorScript,
 					editorStyle,
 					style,
+					render,
 					...customBlockJSON,
 				} ).filter( ( [ , value ] ) => !! value )
 			),
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index 6f57cdb85a393..cdeaf85a97bb4 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/packages/create-block/lib/scaffold.js
@@ -43,6 +43,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		variantVars,
 		customPackageJSON,
 		customBlockJSON,
@@ -101,6 +102,7 @@ module.exports = async (
 		editorScript,
 		editorStyle,
 		style,
+		render,
 		customPackageJSON,
 		customBlockJSON,
 		...variantVars,
diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js
index eb0e5e52631c7..48649527ecc84 100644
--- a/packages/create-block/lib/templates.js
+++ b/packages/create-block/lib/templates.js
@@ -26,10 +26,13 @@ const predefinedPluginTemplates = {
 			description:
 				'Example block scaffolded with Create Block tool – no build step required.',
 			dashicon: 'smiley',
+			supports: {
+				html: false,
+			},
 			wpScripts: false,
-			editorScript: 'file:./index.js',
-			editorStyle: 'file:./editor.css',
-			style: 'file:./style.css',
+			editorScript: null,
+			editorStyle: null,
+			style: null,
 		},
 		templatesPath: join( __dirname, 'templates', 'es5' ),
 		variants: {
@@ -37,6 +40,7 @@ const predefinedPluginTemplates = {
 			dynamic: {
 				slug: 'example-dynamic-es5',
 				title: 'Example Dynamic (ES5)',
+				render: 'file:./render.php',
 			},
 		},
 	},
@@ -55,6 +59,7 @@ const predefinedPluginTemplates = {
 			dynamic: {
 				slug: 'example-dynamic',
 				title: 'Example Dynamic',
+				render: 'file:./render.php',
 			},
 		},
 	},
diff --git a/packages/create-block/lib/templates/block/template.php.mustache b/packages/create-block/lib/templates/block/render.php.mustache
similarity index 65%
rename from packages/create-block/lib/templates/block/template.php.mustache
rename to packages/create-block/lib/templates/block/render.php.mustache
index 349a119de8e66..39ccdaa2b6747 100644
--- a/packages/create-block/lib/templates/block/template.php.mustache
+++ b/packages/create-block/lib/templates/block/render.php.mustache
@@ -1,5 +1,5 @@
 {{#isDynamicVariant}}
 <p <?php echo get_block_wrapper_attributes(); ?>>
- <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
 {{/isDynamicVariant}}
diff --git a/packages/create-block/lib/templates/es5/$slug.php.mustache b/packages/create-block/lib/templates/es5/$slug.php.mustache
index d35db3dea0da4..a04553af1e7d8 100644
--- a/packages/create-block/lib/templates/es5/$slug.php.mustache
+++ b/packages/create-block/lib/templates/es5/$slug.php.mustache
@@ -7,7 +7,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.7
+ * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -70,32 +70,12 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
 	);
 
 	register_block_type(
-		'{{namespace}}/{{slug}}',
+		$dir,
 		array(
 			'editor_script' => '{{namespace}}-{{slug}}-block-editor',
 			'editor_style'  => '{{namespace}}-{{slug}}-block-editor',
 			'style'         => '{{namespace}}-{{slug}}-block',
-			{{#isDynamicVariant}}
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-			{{/isDynamicVariant}}
 		)
 	);
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * Render callback function.
- *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      Block instance.
- *
- * @return string The rendered output.
- */
-function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $attributes, $content, $block ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . '/template.php';
-	return ob_get_clean();
-}
-{{/isDynamicVariant}}
diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache
index 333bd5790b20b..9738885ac8742 100644
--- a/packages/create-block/lib/templates/es5/index.js.mustache
+++ b/packages/create-block/lib/templates/es5/index.js.mustache
@@ -33,53 +33,6 @@
 	 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 	 */
 	registerBlockType( '{{namespace}}/{{slug}}', {
-		/**
-		 * @see https://make.wordpress.org/core/2020/11/18/block-api-version-2/
-		 */
-		apiVersion: {{apiVersion}},
-
-		/**
-		 * This is the display title for your block, which can be translated with `i18n` functions.
-		 * The block inserter will show this name.
-		 */
-		title: __(
-			'{{title}}',
-			'{{textdomain}}'
-		),
-
-		{{#description}}
-		/**
-		 * This is a short description for your block, can be translated with `i18n` functions.
-		 * It will be shown in the Block Tab in the Settings Sidebar.
-		 */
-		description: __(
-			'{{description}}',
-			'{{textdomain}}'
-		),
-
-		{{/description}}
-		/**
-		 * Blocks are grouped into categories to help users browse and discover them.
-		 * The categories provided by core are `text`, `media`, `design`, `widgets`, and `embed`.
-		 */
-		category: '{{category}}',
-
-		{{#dashicon}}
-		/**
-		 * An icon property should be specified to make it easier to identify a block.
-		 * These can be any of WordPress’ Dashicons, or a custom svg element.
-		 */
-		icon: '{{dashicon}}',
-
-		{{/dashicon}}
-		/**
-		 * Optional block extended support features.
-		 */
-		supports: {
-			// Removes support for an HTML mode.
-			html: false,
-		},
-
 		/**
 		 * The edit function describes the structure of your block in the context of the editor.
 		 * This represents what the editor will render when the block is used.
diff --git a/packages/create-block/lib/templates/es5/readme.txt.mustache b/packages/create-block/lib/templates/es5/readme.txt.mustache
index 81ccaf4cb9598..f069906fb19fa 100644
--- a/packages/create-block/lib/templates/es5/readme.txt.mustache
+++ b/packages/create-block/lib/templates/es5/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      5.9
+Tested up to:      6.1
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/create-block/lib/templates/es5/template.php.mustache b/packages/create-block/lib/templates/es5/render.php.mustache
similarity index 65%
rename from packages/create-block/lib/templates/es5/template.php.mustache
rename to packages/create-block/lib/templates/es5/render.php.mustache
index 349a119de8e66..39ccdaa2b6747 100644
--- a/packages/create-block/lib/templates/es5/template.php.mustache
+++ b/packages/create-block/lib/templates/es5/render.php.mustache
@@ -1,5 +1,5 @@
 {{#isDynamicVariant}}
 <p <?php echo get_block_wrapper_attributes(); ?>>
- <?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
+	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
 {{/isDynamicVariant}}
diff --git a/packages/create-block/lib/templates/plugin/$slug.php.mustache b/packages/create-block/lib/templates/plugin/$slug.php.mustache
index f10318db7ee55..2ed0354314cc4 100644
--- a/packages/create-block/lib/templates/plugin/$slug.php.mustache
+++ b/packages/create-block/lib/templates/plugin/$slug.php.mustache
@@ -7,7 +7,7 @@
 {{#description}}
  * Description:       {{description}}
 {{/description}}
- * Requires at least: 5.9
+ * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           {{version}}
 {{#author}}
@@ -38,33 +38,6 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
-	{{#isStaticVariant}}
 	register_block_type( __DIR__ . '/build' );
-	{{/isStaticVariant}}
-	{{#isDynamicVariant}}
-	register_block_type(
-		__DIR__ . '/build',
-		array(
-			'render_callback' => '{{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback',
-		)
-	);
-	{{/isDynamicVariant}}
 }
 add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
-{{#isDynamicVariant}}
-
-/**
- * Render callback function.
- *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      Block instance.
- *
- * @return string The rendered output.
- */
-function {{namespaceSnakeCase}}_{{slugSnakeCase}}_render_callback( $attributes, $content, $block ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . 'build/template.php';
-	return ob_get_clean();
-}
-{{/isDynamicVariant}}
diff --git a/packages/create-block/lib/templates/plugin/readme.txt.mustache b/packages/create-block/lib/templates/plugin/readme.txt.mustache
index a8a1de61fc1de..f069906fb19fa 100644
--- a/packages/create-block/lib/templates/plugin/readme.txt.mustache
+++ b/packages/create-block/lib/templates/plugin/readme.txt.mustache
@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.0
+Tested up to:      6.1
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/shortcut.js
index c25bdbb20e672..2196fe3c64d22 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/shortcut.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/shortcut.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,20 +21,22 @@ function KeyCombination( { keyCombination, forceAriaLabel } ) {
 			className="customize-widgets-keyboard-shortcut-help-modal__shortcut-key-combination"
 			aria-label={ forceAriaLabel || ariaLabel }
 		>
-			{ castArray( shortcut ).map( ( character, index ) => {
-				if ( character === '+' ) {
-					return <Fragment key={ index }>{ character }</Fragment>;
-				}
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
 
-				return (
-					<kbd
-						key={ index }
-						className="customize-widgets-keyboard-shortcut-help-modal__shortcut-key"
-					>
-						{ character }
-					</kbd>
-				);
-			} ) }
+					return (
+						<kbd
+							key={ index }
+							className="customize-widgets-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
 		</kbd>
 	);
 }
diff --git a/packages/customize-widgets/src/filters/move-to-sidebar.js b/packages/customize-widgets/src/filters/move-to-sidebar.js
index 9e7910ce785a6..7677a5e1726cf 100644
--- a/packages/customize-widgets/src/filters/move-to-sidebar.js
+++ b/packages/customize-widgets/src/filters/move-to-sidebar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -63,7 +58,7 @@ const withMoveToSidebarToolbarItem = createHigherOrderComponent(
 				const oldSetting = activeSidebarControl.setting;
 				const newSetting = newSidebarControl.setting;
 
-				oldSetting( without( oldSetting(), widgetId ) );
+				oldSetting( oldSetting().filter( ( id ) => id !== widgetId ) );
 				newSetting( [ ...newSetting(), widgetId ] );
 			} else {
 				/**
diff --git a/packages/data/src/components/with-select/test/index.js b/packages/data/src/components/with-select/test/index.js
index 7937d567a7389..491be6ddfcd5f 100644
--- a/packages/data/src/components/with-select/test/index.js
+++ b/packages/data/src/components/with-select/test/index.js
@@ -584,6 +584,8 @@ describe( 'withSelect', () => {
 		expect( ChildOriginalComponent ).toHaveBeenCalledTimes( 1 );
 		expect( ParentOriginalComponent ).toHaveBeenCalledTimes( 1 );
 
+		// This is intentionally wrapped in an `act()` call.
+		// eslint-disable-next-line testing-library/no-unnecessary-act
 		await act( async () => {
 			registry.dispatch( 'childRender' ).toggleRender();
 		} );
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 4db06d275c76e..423839660ecef 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -47,7 +47,7 @@
 
 ### Internal
 
--   Remove unneccessary argument from an instance of `Array#pop`.
+-   Remove unnecessary argument from an instance of `Array#pop`.
 
 ## 1.0.0 (2019-03-06)
 
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
index bd6ed7035561e..5c6f849f86751 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
@@ -22,6 +22,7 @@ import { deleteAllBlocks } from './blocks';
 import { createComment, deleteAllComments } from './comments';
 import { createPost, deleteAllPosts } from './posts';
 import { resetPreferences } from './preferences';
+import { getSiteSettings, updateSiteSettings } from './site-settings';
 import { deleteAllWidgets, addWidgetBlock } from './widgets';
 
 interface StorageState {
@@ -136,6 +137,8 @@ class RequestUtils {
 	deleteAllMedia = deleteAllMedia.bind( this );
 	createUser = createUser.bind( this );
 	deleteAllUsers = deleteAllUsers.bind( this );
+	getSiteSettings = getSiteSettings.bind( this );
+	updateSiteSettings = updateSiteSettings.bind( this );
 }
 
 export type { StorageState };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts b/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts
new file mode 100644
index 0000000000000..ec76b20adfc47
--- /dev/null
+++ b/packages/e2e-test-utils-playwright/src/request-utils/site-settings.ts
@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import type { RequestUtils } from './index';
+
+type SiteSettings = {
+	title: string;
+	description: string;
+	url: string;
+	email: string;
+	timezone: string;
+	date_format: string;
+	time_format: string;
+	start_of_week: number;
+	language: string;
+	use_smilies: boolean;
+	default_category: number;
+	default_post_format: string;
+	posts_per_page: number;
+	default_ping_status: 'open' | 'closed';
+	default_comment_status: 'open' | 'closed';
+};
+
+/**
+ * Get the site settings.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/settings/#retrieve-a-site-setting
+ *
+ * @param  this RequestUtils.
+ */
+export async function getSiteSettings( this: RequestUtils ) {
+	return await this.rest< SiteSettings >( {
+		path: '/wp/v2/settings',
+		method: 'GET',
+	} );
+}
+
+/**
+ * Update the site settings.
+ *
+ * @see https://developer.wordpress.org/rest-api/reference/settings/#update-a-site-setting
+ *
+ * @param  this         RequestUtils.
+ * @param  siteSettings The partial settings payload to update.
+ */
+export async function updateSiteSettings(
+	this: RequestUtils,
+	siteSettings: Partial< SiteSettings >
+) {
+	return await this.rest< SiteSettings >( {
+		path: '/wp/v2/settings',
+		method: 'POST',
+		data: siteSettings,
+	} );
+}
diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js
deleted file mode 100644
index bbbbc58708905..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/columns.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	getAllBlockInserterItemTitles,
-	insertBlock,
-	openGlobalBlockInserter,
-	closeGlobalBlockInserter,
-	getListViewBlocks,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Columns', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'restricts all blocks inside the columns block', async () => {
-		await insertBlock( 'Columns' );
-		await closeGlobalBlockInserter();
-		await page.click( '[aria-label="Two columns; equal split"]' );
-		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
-
-		const columnBlockMenuItem = (
-			await getListViewBlocks( 'Column' )
-		 )[ 0 ];
-		await columnBlockMenuItem.click();
-		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toHaveLength( 1 );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/cover.test.js b/packages/e2e-tests/specs/editor/blocks/cover.test.js
index 8f34d7b96b3f0..715ed555631a4 100644
--- a/packages/e2e-tests/specs/editor/blocks/cover.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/cover.test.js
@@ -134,7 +134,7 @@ describe( 'Cover', () => {
 
 		const heightInput = (
 			await page.$x(
-				'//div[./label[contains(text(),"Minimum height of cover")]]//input'
+				'//div[./label[contains(text(),"Minimum height of cover")]]/following-sibling::div//input'
 			)
 		 )[ 0 ];
 
diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js
deleted file mode 100644
index 068975ba56409..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * External dependencies
- */
-import path from 'path';
-import fs from 'fs';
-import os from 'os';
-import { v4 as uuid } from 'uuid';
-
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	getEditedPostContent,
-	createNewPost,
-	clickButton,
-	openListView,
-	getListViewBlocks,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-async function upload( selector ) {
-	await page.waitForSelector( selector );
-	const inputElement = await page.$( selector );
-	const testImagePath = path.join(
-		__dirname,
-		'..',
-		'..',
-		'..',
-		'assets',
-		'10x10_e2e_test_image_z9T8jK.png'
-	);
-	const filename = uuid();
-	const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
-	fs.copyFileSync( testImagePath, tmpFileName );
-	await inputElement.uploadFile( tmpFileName );
-	await page.waitForSelector(
-		`.wp-block-gallery img[src$="${ filename }.png"]`
-	);
-	return filename;
-}
-
-describe( 'Gallery', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created using uploaded images', async () => {
-		await insertBlock( 'Gallery' );
-		const filename = await upload( '.wp-block-gallery input[type="file"]' );
-
-		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 -->`
-		);
-		expect( await getEditedPostContent() ).toMatch( regex );
-	} );
-
-	it( 'gallery caption can be edited', async () => {
-		const galleryCaption = 'Tested gallery caption';
-
-		await insertBlock( 'Gallery' );
-		await upload( '.wp-block-gallery input[type="file"]' );
-		await page.waitForSelector( '.wp-block-gallery .wp-block-image' );
-
-		// The Gallery needs to be selected from the List view panel due to the
-		// way that Image uploads take and lose focus.
-		await openListView();
-
-		const galleryListLink = ( await getListViewBlocks( 'Gallery' ) )[ 0 ];
-		await galleryListLink.click();
-
-		await page.click( '.wp-block-gallery .blocks-gallery-caption' );
-
-		await page.keyboard.type( galleryCaption );
-
-		expect( await getEditedPostContent() ).toMatch(
-			new RegExp( `<figcaption.*?>${ galleryCaption }</figcaption>` )
-		);
-	} );
-
-	it( "uploaded images' captions can be edited", async () => {
-		await insertBlock( 'Gallery' );
-		await upload( '.wp-block-gallery input[type="file"]' );
-
-		const figureElement = await page.waitForSelector(
-			'.wp-block-gallery .wp-block-image'
-		);
-
-		// Check that the Image is unselected, in which case the figcaption won't be
-		// in the DOM - due the way that the Gallery block handles the upload the latest
-		// image gets selected in order to scroll to the position of it, as in large
-		// galleries the new upload may be off-canvas. After upload the image is unselected
-		// so if we don't check for that it may get unselected again by this flow after we
-		// have re-selected it to edit it.
-		await page.waitForFunction(
-			() => ! document.querySelector( '.wp-block-image figcaption' )
-		);
-
-		// The Image needs to be selected from the List view panel due to the
-		// way that Image uploads take and lose focus.
-		await openListView();
-
-		// Due to collapsed state of ListView nodes Gallery must be expanded to reveal the child blocks.
-		// This xpath selects the anchor node for the block which has a child span which contains the text
-		// label of the block and then selects the expander span for that node.
-		const galleryExpander = await page.waitForXPath(
-			`//a[.//span[text()='Gallery']]/span[contains(@class, 'block-editor-list-view__expander')]`
-		);
-
-		await galleryExpander.click();
-
-		const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ];
-		await imageListLink.click();
-		await clickBlockToolbarButton( 'Caption' );
-		const captionElement = await figureElement.$(
-			'.block-editor-rich-text__editable'
-		);
-
-		await captionElement.click();
-		const caption = 'Tested caption';
-
-		await page.keyboard.type( caption );
-
-		expect( await getEditedPostContent() ).toMatch(
-			new RegExp( `<figcaption.*?>${ caption }</figcaption>` )
-		);
-	} );
-
-	// Disable reason:
-	// This test would be good to enable, but the media modal contains an
-	// invalid role, which is causing Axe tests to fail:
-	// https://core.trac.wordpress.org/ticket/50273
-	//
-	// Attempts to add an Axe exception for the media modal haven't proved
-	// successful:
-	// https://github.com/WordPress/gutenberg/pull/22719
-	//
-	// This test could be re-enabled once the trac ticket is solved.
-	// eslint-disable-next-line jest/no-disabled-tests
-	it.skip( 'when initially added the media library shows the Create Gallery view', async () => {
-		await insertBlock( 'Gallery' );
-		await clickButton( 'Media Library' );
-		await page.waitForSelector( '.media-frame' );
-		const mediaLibraryHeaderText = await page.$eval(
-			'.media-frame-title h1',
-			( element ) => element.textContent
-		);
-		const mediaLibraryButtonText = await page.$eval(
-			'.media-toolbar-primary button',
-			( element ) => element.textContent
-		);
-
-		expect( mediaLibraryHeaderText ).toBe( 'Create Gallery' );
-		expect( mediaLibraryButtonText ).toBe( 'Create a new gallery' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
index db8f750281569..55076bd7180de 100644
--- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js
@@ -506,7 +506,7 @@ Expected mock function not to be called but it was called with: ["POST", "http:/
 				// outside of the Nav block.
 				await insertBlock( 'Paragraph' );
 
-				// Aquire fresh reference to block
+				// Acquire fresh reference to block
 				navBlock = await waitForBlock( 'Navigation' );
 
 				// Check Placeholder Preview is visible.
diff --git a/packages/e2e-tests/specs/editor/blocks/site-title.test.js b/packages/e2e-tests/specs/editor/blocks/site-title.test.js
index 32a641b9bd8ea..32428a73c8e20 100644
--- a/packages/e2e-tests/specs/editor/blocks/site-title.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/site-title.test.js
@@ -3,13 +3,12 @@
  */
 import {
 	createNewPost,
-	createUser,
-	deleteUser,
 	getOption,
 	insertBlock,
 	loginUser,
 	pressKeyWithModifier,
 	setOption,
+	openDocumentSettingsSidebar,
 } from '@wordpress/e2e-test-utils';
 
 const saveEntities = async () => {
@@ -35,11 +34,9 @@ describe( 'Site Title block', () => {
 	const username = 'testuser';
 	beforeAll( async () => {
 		originalSiteTitle = await getOption( 'blogname' );
-		password = await createUser( username, { role: 'editor' } );
 	} );
 
 	afterAll( async () => {
-		await deleteUser( username );
 		await setOption( 'blogname', originalSiteTitle );
 	} );
 
@@ -70,11 +67,18 @@ describe( 'Site Title block', () => {
 		await createNewPost();
 		await insertBlock( 'Site Title' );
 
-		const editableSiteTitleSelector = '[aria-label="Block: Site Title"] a';
-		await page.waitForSelector( editableSiteTitleSelector );
+		await openDocumentSettingsSidebar();
+
+		const [ disableLink ] = await page.$x(
+			"//label[contains(text(), 'Make title link to home')]"
+		);
+		await disableLink.click();
+
+		const siteTitleSelector = '[aria-label="Block: Site Title"] span';
+		await page.waitForSelector( siteTitleSelector );
 
 		const editable = await page.$eval(
-			editableSiteTitleSelector,
+			siteTitleSelector,
 			( element ) => element.contentEditable
 		);
 		expect( editable ).toBe( 'inherit' );
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/templates.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/templates.test.js.snap
deleted file mode 100644
index 054e38c501a4f..0000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/templates.test.js.snap
+++ /dev/null
@@ -1,69 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`templates Using a CPT with a predefined template Should add a custom post types with a predefined template 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->
-
-<!-- wp:paragraph {\\"placeholder\\":\\"Add a book description\\"} -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a inner paragraph\\"} -->
-<p></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`templates Using a CPT with a predefined template Should respect user edits to not re-apply template after save (full delete) 1`] = `""`;
-
-exports[`templates Using a CPT with a predefined template Should respect user edits to not re-apply template after save (single block removal) 1`] = `
-"<!-- wp:paragraph {\\"placeholder\\":\\"Add a book description\\"} -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:quote -->
-<blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph --></blockquote>
-<!-- /wp:quote -->
-
-<!-- wp:columns -->
-<div class=\\"wp-block-columns\\"><!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class=\\"wp-block-column\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a inner paragraph\\"} -->
-<p></p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`templates With default post format assigned should not populate edited post with default block for format 1`] = `""`;
-
-exports[`templates With default post format assigned should not populate new page with default block for format 1`] = `""`;
-
-exports[`templates With default post format assigned should populate new post with default block for format 1`] = `
-"<!-- wp:image -->
-<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
-<!-- /wp:image -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/templates.test.js b/packages/e2e-tests/specs/editor/plugins/templates.test.js
deleted file mode 100644
index d3f1022517ac6..0000000000000
--- a/packages/e2e-tests/specs/editor/plugins/templates.test.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	pressKeyWithModifier,
-	saveDraft,
-	switchUserToAdmin,
-	switchUserToTest,
-	visitAdminPage,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'templates', () => {
-	describe( 'Using a CPT with a predefined template', () => {
-		beforeAll( async () => {
-			await activatePlugin( 'gutenberg-test-plugin-templates' );
-		} );
-
-		beforeEach( async () => {
-			await createNewPost( { postType: 'book' } );
-		} );
-
-		afterAll( async () => {
-			await deactivatePlugin( 'gutenberg-test-plugin-templates' );
-		} );
-
-		it( 'Should add a custom post types with a predefined template', async () => {
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'Should respect user edits to not re-apply template after save (single block removal)', async () => {
-			// Remove a block from the template to verify that it's not
-			// re-added after saving and reloading the editor.
-			await page.click( '.editor-post-title__input' );
-			await page.keyboard.press( 'ArrowDown' );
-			await page.keyboard.press( 'Backspace' );
-			await saveDraft();
-			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'Should respect user edits to not re-apply template after save (full delete)', async () => {
-			// Remove all blocks from the template to verify that they're not
-			// re-added after saving and reloading the editor.
-			await page.type( '.editor-post-title__input', 'My Empty Book' );
-			await page.keyboard.press( 'ArrowDown' );
-			await pressKeyWithModifier( 'primary', 'A' );
-			await page.keyboard.press( 'Backspace' );
-			await saveDraft();
-			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-	} );
-
-	describe( 'With default post format assigned', () => {
-		const STANDARD_FORMAT_VALUE = '0';
-
-		async function setPostFormat( format ) {
-			// To set the post format, we need to be the admin user.
-			await switchUserToAdmin();
-			await visitAdminPage( 'options-writing.php' );
-			await page.select( '#default_post_format', format );
-			await Promise.all( [
-				page.waitForNavigation(),
-				page.click( '#submit' ),
-			] );
-			await switchUserToTest();
-		}
-
-		beforeAll( async () => {
-			await activatePlugin(
-				'gutenberg-test-plugin-post-formats-support'
-			);
-			await setPostFormat( 'image' );
-		} );
-		afterAll( async () => {
-			await setPostFormat( STANDARD_FORMAT_VALUE );
-			await deactivatePlugin(
-				'gutenberg-test-plugin-post-formats-support'
-			);
-		} );
-
-		it( 'should populate new post with default block for format', async () => {
-			await createNewPost();
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should not populate edited post with default block for format', async () => {
-			await createNewPost();
-
-			// Remove the default block template to verify that it's not
-			// re-added after saving and reloading the editor.
-			await page.type( '.editor-post-title__input', 'My Image Format' );
-			await page.click( '.wp-block-image' );
-			await page.keyboard.press( 'Backspace' );
-			await saveDraft();
-			await page.reload();
-			await page.waitForSelector( '.edit-post-layout' );
-
-			// Wait a bit more for getEditedPostContent to be correct.
-			await page.waitForSelector(
-				'.block-editor-default-block-appender__content'
-			);
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-		} );
-
-		it( 'should not populate new page with default block for format', async () => {
-			// This test always needs to run as the admin user, because other roles can't create pages.
-			// It can't be skipped, because then it failed because of not testing the snapshot.
-			await switchUserToAdmin();
-			await createNewPost( { postType: 'page' } );
-
-			expect( await getEditedPostContent() ).toMatchSnapshot();
-			await switchUserToTest();
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/compatibility-classic-editor.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/compatibility-classic-editor.test.js.snap
deleted file mode 100644
index 3115d36a3b64c..0000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/compatibility-classic-editor.test.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Compatibility with classic editor Should not apply autop when rendering blocks 1`] = `
-"<a>
-Random Link
-</a>"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/splitting-merging.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/splitting-merging.test.js.snap
deleted file mode 100644
index 1448fdaa15160..0000000000000
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/splitting-merging.test.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`splitting and merging blocks should delete an empty first line 1`] = `
-"<!-- wp:paragraph -->
-<p>First</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Still Second</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should forward delete from an empty paragraph 1`] = `
-"<!-- wp:paragraph -->
-<p>Second</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should gracefully handle if placing caret in empty container 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>Foo</strong></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should merge into inline boundary position 1`] = `
-"<!-- wp:paragraph -->
-<p>Bar</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should not merge paragraphs if the selection is not collapsed 1`] = `
-"<!-- wp:paragraph -->
-<p>Foo</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should not split with line break in front 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should remove at most one paragraph in forward direction 1`] = `
-"<!-- wp:paragraph -->
-<p>First</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should remove empty paragraph block on backspace 1`] = `""`;
-
-exports[`splitting and merging blocks should split and merge paragraph blocks using Enter and Backspace 1`] = `
-"<!-- wp:paragraph -->
-<p>First</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Second</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should split and merge paragraph blocks using Enter and Backspace 2`] = `
-"<!-- wp:paragraph -->
-<p>FirstBetweenSecond</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should split and merge paragraph blocks using Enter and Backspace 3`] = `
-"<!-- wp:paragraph -->
-<p><strong>First</strong></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>BeforeSecond:Second</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`splitting and merging blocks should undo split in one go 1`] = `
-"<!-- wp:paragraph -->
-<p>12</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index 3a24203fecbf3..ea16ec75ffda2 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -119,7 +119,7 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the third column in the columns block.
 		await pressKeyWithModifier( 'ctrl', '`' );
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyTimes( 'Tab', 2 );
+		await pressKeyTimes( 'Tab', 4 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.waitForSelector(
 			'.is-highlighted[aria-label="Block: Column (3 of 3)"]'
diff --git a/packages/e2e-tests/specs/editor/various/compatibility-classic-editor.test.js b/packages/e2e-tests/specs/editor/various/compatibility-classic-editor.test.js
deleted file mode 100644
index 14b1d4d2d466e..0000000000000
--- a/packages/e2e-tests/specs/editor/various/compatibility-classic-editor.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Compatibility with classic editor', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should not apply autop when rendering blocks', async () => {
-		await insertBlock( 'Custom HTML' );
-		await page.keyboard.type( '<a>' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Random Link' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '</a>' );
-		await publishPost();
-
-		// View the post.
-		const viewPostLinks = await page.$x(
-			"//a[contains(text(), 'View Post')]"
-		);
-		await viewPostLinks[ 0 ].click();
-		await page.waitForNavigation();
-
-		// Check the content doesn't contain <p> tags.
-		await page.waitForSelector( '.entry-content' );
-		const content = await page.$eval( '.entry-content', ( element ) =>
-			element.innerHTML.trim()
-		);
-		expect( content ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
index a4927878208ca..bb740cae8981c 100644
--- a/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
+++ b/packages/e2e-tests/specs/editor/various/font-size-picker.test.js
@@ -233,7 +233,7 @@ describe( 'Font Size Picker', () => {
 			await page.keyboard.type( 'Paragraph to be made "large"' );
 
 			await clickFontSizeButtonByLabel( 'Large' );
-			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//div[@data-active='true']//button`;
+			const buttonSelector = `${ FONT_SIZE_TOGGLE_GROUP_SELECTOR }//button[@aria-checked='true']`;
 			const [ activeButton ] = await page.$x( buttonSelector );
 			const activeLabel = await page.evaluate(
 				( element ) => element?.getAttribute( 'aria-label' ),
diff --git a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js b/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js
deleted file mode 100644
index 2d925e56a204a..0000000000000
--- a/packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	toggleMoreMenu,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Fullscreen Mode', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should open the fullscreen mode from the more menu', async () => {
-		await clickOnMoreMenuItem( 'Fullscreen mode' );
-		await toggleMoreMenu( 'close' );
-
-		const isFullscreenEnabled = await page.$eval( 'body', ( body ) => {
-			return body.classList.contains( 'is-fullscreen-mode' );
-		} );
-
-		expect( isFullscreenEnabled ).toBe( true );
-
-		const fullscreenCloseButton = await page.$(
-			'.edit-post-fullscreen-mode-close'
-		);
-
-		expect( fullscreenCloseButton ).not.toBeNull();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js b/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js
deleted file mode 100644
index e61927e10ff17..0000000000000
--- a/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	findSidebarPanelToggleButtonWithTitle,
-	getEditedPostContent,
-	openDocumentSettingsSidebar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'new editor filtered state', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-default-post-content' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-default-post-content' );
-	} );
-
-	it( 'should respect default content', async () => {
-		// Get the values that should have their defaults changed.
-		const title = await page.$eval(
-			'.editor-post-title__input',
-			( element ) => element.innerHTML
-		);
-		const content = await getEditedPostContent();
-
-		// open the sidebar, we want to see the excerpt.
-		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
-			'Excerpt'
-		);
-		if ( excerptButton ) {
-			await excerptButton.click( 'button' );
-		}
-		const excerpt = await page.$eval(
-			'.editor-post-excerpt textarea',
-			( element ) => element.innerHTML
-		);
-
-		// Assert they match what the plugin set.
-		expect( title ).toBe( 'My default title' );
-		expect( content ).toBe( 'My default content' );
-		expect( excerpt ).toBe( 'My default excerpt' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/splitting-merging.test.js b/packages/e2e-tests/specs/editor/various/splitting-merging.test.js
deleted file mode 100644
index 987d7040491f2..0000000000000
--- a/packages/e2e-tests/specs/editor/various/splitting-merging.test.js
+++ /dev/null
@@ -1,303 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	insertBlock,
-	isInDefaultBlock,
-	getEditedPostContent,
-	pressKeyTimes,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'splitting and merging blocks', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should split and merge paragraph blocks using Enter and Backspace', async () => {
-		// Use regular inserter to add paragraph block and text.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'FirstSecond' );
-
-		// Move caret between 'First' and 'Second' and press Enter to split
-		// paragraph blocks.
-		await pressKeyTimes( 'ArrowLeft', 6 );
-		await page.keyboard.press( 'Enter' );
-
-		// Assert that there are now two paragraph blocks with correct content.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Press Backspace to merge paragraph blocks.
-		await page.keyboard.press( 'Backspace' );
-
-		// Ensure that caret position is correctly placed at the between point.
-		await page.keyboard.type( 'Between' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await pressKeyTimes( 'Backspace', 7 ); // Delete "Between"
-
-		// Edge case: Without ensuring that the editor still has focus when
-		// restoring a bookmark, the caret may be inadvertently moved back to
-		// an inline boundary after a split occurs.
-		await page.keyboard.press( 'Home' );
-		await page.keyboard.down( 'Shift' );
-		await pressKeyTimes( 'ArrowRight', 5 );
-		await page.keyboard.up( 'Shift' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		// Collapse selection, still within inline boundary.
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'BeforeSecond:' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should merge into inline boundary position', async () => {
-		// Regression Test: Caret should reset to end of inline boundary when
-		// backspacing to delete second paragraph.
-		await insertBlock( 'Paragraph' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.type( 'Foo' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Backspace' );
-
-		// Replace contents of first paragraph with "Bar".
-		await pressKeyTimes( 'Backspace', 4 );
-		await page.keyboard.type( 'Bar' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should delete an empty first line', async () => {
-		// Regression Test: When a paragraph block has line break, and the first
-		// line has no text, pressing backspace at the start of the second line
-		// should remove the first.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/8388
-
-		// First paragraph.
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First' );
-		await page.keyboard.press( 'Enter' );
-
-		// Second paragraph.
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.up( 'Shift' );
-
-		// Delete the soft line break.
-		await page.keyboard.press( 'Backspace' );
-
-		// Typing at this point should occur still within the second paragraph,
-		// while before the regression fix it would have occurred in the first.
-		await page.keyboard.type( 'Still Second' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not merge paragraphs if the selection is not collapsed', async () => {
-		// Regression Test: When all of a paragraph is selected, pressing
-		// backspace should delete the contents, not merge to previous.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/8268
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Foo' );
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Bar' );
-
-		// Select text.
-		await page.keyboard.down( 'Shift' );
-		await pressKeyTimes( 'ArrowLeft', 3 );
-		await page.keyboard.up( 'Shift' );
-
-		// Delete selection.
-		await page.keyboard.press( 'Backspace' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should gracefully handle if placing caret in empty container', async () => {
-		// Regression Test: placeCaretAtHorizontalEdge previously did not
-		// account for contentEditables which have no children.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/8676
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'Foo' );
-
-		// The regression appeared to only affect paragraphs created while
-		// within an inline boundary.
-		await page.keyboard.down( 'Shift' );
-		await pressKeyTimes( 'ArrowLeft', 3 );
-		await page.keyboard.up( 'Shift' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		await page.keyboard.press( 'ArrowRight' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should forward delete from an empty paragraph', async () => {
-		// Regression test: Bogus nodes in a RichText container can interfere
-		// with isHorizontalEdge detection, preventing forward deletion.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/8731
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Delete' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should remove empty paragraph block on backspace', async () => {
-		// Regression Test: In a sole empty paragraph, pressing backspace
-		// should remove the block.
-		//
-		// See: https://github.com/WordPress/gutenberg/pull/8306
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should remove at most one paragraph in forward direction', async () => {
-		// Regression Test: A forward delete on empty RichText previously would
-		// destroy two paragraphs on the dual-action of merge & remove.
-		//
-		// See: https://github.com/WordPress/gutenberg/pull/8735
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.type( 'First' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Delete' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should ensure always a default block', async () => {
-		// Feature: To avoid focus loss, removal of all blocks will result in a
-		// default block insertion at the root. Pressing backspace in a new
-		// paragraph should not effectively allow removal. This is counteracted
-		// with pre-save content processing to save post consisting of only the
-		// unmodified default block as an empty string.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/9626
-		await insertBlock( 'Paragraph' );
-		await page.keyboard.press( 'Backspace' );
-
-		// There is a default block and post title:
-		expect(
-			await page.$$( '.block-editor-block-list__block' )
-		).toHaveLength( 2 );
-
-		// But the effective saved content is still empty:
-		expect( await getEditedPostContent() ).toBe( '' );
-
-		// And focus is retained:
-		expect( await isInDefaultBlock() ).toBe( true );
-	} );
-
-	it( 'should undo split in one go', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '12' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'Enter' );
-		await pressKeyWithModifier( 'primary', 'z' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not split with line break in front', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await pressKeyWithModifier( 'shift', 'Enter' );
-		await page.keyboard.type( '2' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'Backspace' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	describe( 'test restore selection when merge produces more than one block', () => {
-		it( 'on forward delete', async () => {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( 'hi' );
-			await insertBlock( 'List' );
-			await page.keyboard.type( 'item 1' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'item 2' );
-			await pressKeyTimes( 'ArrowUp', 3 );
-			await page.keyboard.press( 'Delete' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>hi</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 2</p>
-			<!-- /wp:paragraph -->"
-		` );
-			await page.keyboard.press( 'Delete' );
-			// Carret should be in the first block and at the proper position.
-			await page.keyboard.type( '-' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>hi-item 1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 2</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-		it( 'on backspace', async () => {
-			await insertBlock( 'Paragraph' );
-			await page.keyboard.type( 'hi' );
-			await insertBlock( 'List' );
-			await page.keyboard.type( 'item 1' );
-			await page.keyboard.press( 'Enter' );
-			await page.keyboard.type( 'item 2' );
-			await page.keyboard.press( 'ArrowUp' );
-			await pressKeyTimes( 'ArrowLeft', 6 );
-			await page.keyboard.press( 'Backspace' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>hi</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 2</p>
-			<!-- /wp:paragraph -->"
-		` );
-			await page.keyboard.press( 'Backspace' );
-			// Carret should be in the first block and at the proper position.
-			await page.keyboard.type( '-' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>hi-item 1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>item 2</p>
-			<!-- /wp:paragraph -->"
-		` );
-		} );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js b/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js
deleted file mode 100644
index d7eb0a22ae2da..0000000000000
--- a/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { activateTheme, visitSiteEditor } from '@wordpress/e2e-test-utils';
-
-describe( 'Site editor iframe rendering mode', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'Should render editor in standards mode.', async () => {
-		await visitSiteEditor( {
-			postId: 'emptytheme//index',
-			postType: 'wp_template',
-		} );
-
-		const compatMode = await page.evaluate(
-			() =>
-				document.querySelector( `iframe[name='editor-canvas']` )
-					.contentDocument.compatMode
-		);
-
-		// CSS1Compat = expected standards mode.
-		// BackCompat = quirks mode.
-		expect( compatMode ).toBe( 'CSS1Compat' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
index ee1943ecdedbf..5f70bb21183d5 100644
--- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js
@@ -31,7 +31,7 @@ describe( 'Multi-entity save flow', () => {
 		const checkboxInputs = await page.$$( checkboxInputSelector );
 		expect( checkedBoxes.length - checkboxInputs.length ).toBe( 0 );
 	};
-	const assertExistance = async ( selector, shouldBePresent ) => {
+	const assertExistence = async ( selector, shouldBePresent ) => {
 		const element = await page.$( selector );
 		if ( shouldBePresent ) {
 			expect( element ).not.toBeNull();
@@ -102,10 +102,10 @@ describe( 'Multi-entity save flow', () => {
 			await assertMultiSaveDisabled();
 
 			// Should only have publish panel a11y button active with only post edited.
-			await assertExistance( publishA11ySelector, true );
-			await assertExistance( saveA11ySelector, false );
-			await assertExistance( publishPanelSelector, false );
-			await assertExistance( savePanelSelector, false );
+			await assertExistence( publishA11ySelector, true );
+			await assertExistence( saveA11ySelector, false );
+			await assertExistence( publishPanelSelector, false );
+			await assertExistence( savePanelSelector, false );
 
 			// Add a reusable block and edit it.
 			await createReusableBlock( 'Hi!', 'Test' );
@@ -117,10 +117,10 @@ describe( 'Multi-entity save flow', () => {
 			await assertMultiSaveEnabled();
 
 			// Should only have save panel a11y button active after child entities edited.
-			await assertExistance( publishA11ySelector, false );
-			await assertExistance( saveA11ySelector, true );
-			await assertExistance( publishPanelSelector, false );
-			await assertExistance( savePanelSelector, false );
+			await assertExistence( publishA11ySelector, false );
+			await assertExistence( saveA11ySelector, true );
+			await assertExistence( publishPanelSelector, false );
+			await assertExistence( savePanelSelector, false );
 
 			// Opening panel has boxes checked by default.
 			await page.click( savePostSelector );
@@ -128,18 +128,18 @@ describe( 'Multi-entity save flow', () => {
 			await assertAllBoxesChecked();
 
 			// Should not show other panels (or their a11y buttons) while save panel opened.
-			await assertExistance( publishA11ySelector, false );
-			await assertExistance( saveA11ySelector, false );
-			await assertExistance( publishPanelSelector, false );
+			await assertExistence( publishA11ySelector, false );
+			await assertExistence( saveA11ySelector, false );
+			await assertExistence( publishPanelSelector, false );
 
 			// Publish panel should open after saving.
 			await page.click( entitiesSaveSelector );
 			await page.waitForSelector( publishPanelSelector );
 
 			// No other panels (or their a11y buttons) should be present with publish panel open.
-			await assertExistance( publishA11ySelector, false );
-			await assertExistance( saveA11ySelector, false );
-			await assertExistance( savePanelSelector, false );
+			await assertExistence( publishA11ySelector, false );
+			await assertExistence( saveA11ySelector, false );
+			await assertExistence( savePanelSelector, false );
 
 			// Close publish panel.
 			const closePanelButton = await page.waitForSelector(
@@ -151,7 +151,7 @@ describe( 'Multi-entity save flow', () => {
 			const draftSaved = await page.waitForSelector( draftSavedSelector );
 			expect( draftSaved ).not.toBeNull();
 			await assertMultiSaveDisabled();
-			await assertExistance( saveA11ySelector, false );
+			await assertExistence( saveA11ySelector, false );
 
 			await publishPost();
 			// Wait for the success notice specifically for the published post.
@@ -178,7 +178,7 @@ describe( 'Multi-entity save flow', () => {
 			expect( enabledSaveButton ).not.toBeNull();
 			// Verify multi-entity saving not enabled.
 			await assertMultiSaveDisabled();
-			await assertExistance( saveA11ySelector, false );
+			await assertExistence( saveA11ySelector, false );
 
 			// Update reusable block again.
 			await page.click( 'p[data-type="core/paragraph"]' );
@@ -188,7 +188,7 @@ describe( 'Multi-entity save flow', () => {
 
 			// Multi-entity saving should be enabled.
 			await assertMultiSaveEnabled();
-			await assertExistance( saveA11ySelector, true );
+			await assertExistence( saveA11ySelector, true );
 		} );
 
 		it( 'Site blocks should save individually', async () => {
@@ -252,7 +252,7 @@ describe( 'Multi-entity save flow', () => {
 			await assertAllBoxesChecked();
 
 			// Save a11y button should not be present with save panel open.
-			await assertExistance( saveA11ySelector, false );
+			await assertExistence( saveA11ySelector, false );
 
 			// Saving should result in items being saved.
 			await page.click( entitiesSaveSelector );
@@ -284,7 +284,7 @@ describe( 'Multi-entity save flow', () => {
 			expect( enabledButton ).not.toBeNull();
 
 			// Save a11y button should be present.
-			await assertExistance( saveA11ySelector, true );
+			await assertExistence( saveA11ySelector, true );
 
 			// Save all changes.
 			await saveAllChanges();
diff --git a/packages/e2e-tests/specs/site-editor/site-editor-inserter.test.js b/packages/e2e-tests/specs/site-editor/site-editor-inserter.test.js
deleted file mode 100644
index d698b35e9e758..0000000000000
--- a/packages/e2e-tests/specs/site-editor/site-editor-inserter.test.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	deleteAllTemplates,
-	activateTheme,
-	visitSiteEditor,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Site Editor Inserter', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-	beforeEach( async () => {
-		await visitSiteEditor();
-	} );
-
-	it( 'inserter toggle button should toggle global inserter', async () => {
-		await page.click( '.edit-site-header-edit-mode__inserter-toggle' );
-		await page.waitForSelector( '.edit-site-editor__inserter-panel', {
-			visible: true,
-		} );
-		await page.click( '.edit-site-header-edit-mode__inserter-toggle' );
-		await page.waitForSelector( '.edit-site-editor__inserter-panel', {
-			hidden: true,
-		} );
-	} );
-} );
diff --git a/packages/edit-navigation/README.md b/packages/edit-navigation/README.md
index 3ab83af295cc1..0f0fd254bb966 100644
--- a/packages/edit-navigation/README.md
+++ b/packages/edit-navigation/README.md
@@ -22,7 +22,7 @@ initialize( '#navigation-editor-root', blockEditorSettings );
 
 ## Purpose
 
-By default, the Navigation Editor screen allows users to create and edit complex navigations using a block-based UI. The aim is to supercede [the current Menus screen](https://codex.wordpress.org/WordPress_Menu_User_Guide) by providing a superior experience whilst retaining backwards compatibility.
+By default, the Navigation Editor screen allows users to create and edit complex navigations using a block-based UI. The aim is to supersede [the current Menus screen](https://codex.wordpress.org/WordPress_Menu_User_Guide) by providing a superior experience whilst retaining backwards compatibility.
 
 The editing experience is provided as a block editor wrapper around the core functionality of the **Navigation _block_**. Features of the block are disabled/enhanced as necessary to provide an experience appropriate to editing a navigation outside of a Full Site Editing context.
 
diff --git a/packages/edit-post/src/components/block-manager/category.js b/packages/edit-post/src/components/block-manager/category.js
index e0016fd86d531..ad4e87cc91c60 100644
--- a/packages/edit-post/src/components/block-manager/category.js
+++ b/packages/edit-post/src/components/block-manager/category.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { includes, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			return blockTypes;
 		}
 		return blockTypes.filter( ( { name } ) => {
-			return includes( defaultAllowedBlockTypes || [], name );
+			return defaultAllowedBlockTypes?.includes( name );
 		} );
 	}, [ defaultAllowedBlockTypes, blockTypes ] );
 	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
diff --git a/packages/edit-post/src/components/block-manager/index.js b/packages/edit-post/src/components/block-manager/index.js
index 1566d304b4b3c..bc141500390ad 100644
--- a/packages/edit-post/src/components/block-manager/index.js
+++ b/packages/edit-post/src/components/block-manager/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ function BlockManager( {
 			hasBlockSupport( blockType, 'inserter', true ) &&
 			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
 			( ! blockType.parent ||
-				includes( blockType.parent, 'core/post-content' ) )
+				blockType.parent.includes( 'core/post-content' ) )
 	);
 
 	// Announce search results on change
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..900d822cdcc05
--- /dev/null
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullscreenModeClose when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
+<div>
+  <div>
+    <a
+      aria-label="Back"
+      class="components-button edit-post-fullscreen-mode-close"
+      href="edit.php?"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="36px"
+        viewBox="-2 -2 24 24"
+        width="36px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
+`;
diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js b/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
index 5f79600baa25a..59088779a5241 100644
--- a/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
+++ b/packages/edit-post/src/components/header/fullscreen-mode-close/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -36,12 +36,11 @@ describe( 'FullscreenModeClose', () => {
 				} ) );
 			} );
 
-			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
+			render( <FullscreenModeClose /> );
+
+			const siteIcon = screen.getByAltText( 'Site Icon' );
 
-			expect( siteIcon ).toBeTruthy();
+			expect( siteIcon ).toBeVisible();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
@@ -58,13 +57,12 @@ describe( 'FullscreenModeClose', () => {
 			} );
 
 			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
-			const defaultIcon = container.querySelector( 'svg' );
 
-			expect( siteIcon ).toBeFalsy();
-			expect( defaultIcon ).toBeTruthy();
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 } );
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index edc44c9a201b6..bf22dec082288 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -10,7 +10,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	store as editorStore,
@@ -77,13 +76,6 @@ function HeaderToolbar() {
 	);
 	const overflowItems = (
 		<>
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-				repositionDropdown={ showIconLabels && ! isWideViewport }
-				showTooltip={ ! showIconLabels }
-				variant={ showIconLabels ? 'tertiary' : undefined }
-			/>
 			<ToolbarItem
 				as={ Button }
 				className="edit-post-header-toolbar__list-view-toggle"
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index 6a7e72f4b1fd2..ed4a3ca94609e 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -24,12 +24,13 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
-function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
+function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
+		isDistractionFree,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -38,6 +39,8 @@ function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			isDistractionFree:
+				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 		} ),
 		[]
 	);
diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
index e134c7ac13194..6085ce65e51e5 100644
--- a/packages/edit-post/src/components/header/more-menu/index.js
+++ b/packages/edit-post/src/components/header/more-menu/index.js
@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 							scope="core/edit-post"
 						/>
 					) }
-					<WritingMenu onClose={ onClose } />
+					<WritingMenu />
 					<ModeSwitcher />
 					<ActionItem.Slot
 						name="core/edit-post/plugin-more-menu"
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 1228688f25709..7babb010fe717 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -242,5 +242,4 @@
 		position: absolute;
 		z-index: 35;
 	}
-
 }
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index 3d6c3e75a16ea..6cea56392381e 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -17,7 +17,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as postEditorStore } from '../../../store';
 
-function WritingMenu( { onClose } ) {
+function WritingMenu() {
+	const registry = useRegistry();
 	const isDistractionFree = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree,
@@ -36,14 +37,15 @@ function WritingMenu( { onClose } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-		onClose();
-		if ( ! isDistractionFree ) {
-			selectBlock( blocks[ 0 ].clientId );
-		}
+		registry.batch( () => {
+			setPreference( 'core/edit-post', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			if ( ! isDistractionFree && !! blocks.length ) {
+				selectBlock( blocks[ 0 ].clientId );
+			}
+		} );
 	};
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -84,7 +86,7 @@ function WritingMenu( { onClose } ) {
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
 				name="distractionFree"
-				toggleHandler={ toggleDistractionFree }
+				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
 				info={ __( 'Write with calmness' ) }
 				messageActivated={ __( 'Distraction free mode activated' ) }
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js
index aceed29d2f189..2b18cd099a338 100644
--- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js
+++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/shortcut.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,20 +21,22 @@ function KeyCombination( { keyCombination, forceAriaLabel } ) {
 			className="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
 			aria-label={ forceAriaLabel || ariaLabel }
 		>
-			{ castArray( shortcut ).map( ( character, index ) => {
-				if ( character === '+' ) {
-					return <Fragment key={ index }>{ character }</Fragment>;
-				}
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
 
-				return (
-					<kbd
-						key={ index }
-						className="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-					>
-						{ character }
-					</kbd>
-				);
-			} ) }
+					return (
+						<kbd
+							key={ index }
+							className="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
 		</kbd>
 	);
 }
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
index 19aa1990f8f48..a23757d1cb662 100644
--- a/packages/edit-post/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -7,7 +7,7 @@ import {
 	useShortcut,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
@@ -67,7 +67,7 @@ function KeyboardShortcuts() {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-distraction-free',
 			category: 'global',
-			description: __( 'Toggle disrtaction free mode.' ),
+			description: __( 'Toggle distraction free mode.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: '\\',
@@ -168,14 +168,12 @@ function KeyboardShortcuts() {
 		setIsListViewOpened( false );
 		toggleDistractionFree();
 		toggleFeature( 'distractionFree' );
-		const modeState = isFeatureActive( 'distractionFree' )
-			? __( 'on' )
-			: __( 'off' );
 		createInfoNotice(
-			// translators: Mode of distraction free can be 'on' or 'off';
-			sprintf( __( 'Distraction free mode turned %s.' ), modeState ),
+			isFeatureActive( 'distractionFree' )
+				? __( 'Distraction free mode turned on.' )
+				: __( 'Distraction free mode turned off.' ),
 			{
-				speak: true,
+				id: 'core/edit-post/distraction-free-mode/notice',
 				type: 'snackbar',
 			}
 		);
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index c1ecb74676f3a..3385d2624c451 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -124,12 +124,6 @@ function Layout( { styles } ) {
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
 		};
 	}, [] );
-	const [ distractionFree, setDistractionFree ] =
-		useState( isDistractionFree );
-
-	useEffect( () => {
-		setDistractionFree( isDistractionFree );
-	}, [ isDistractionFree ] );
 
 	const className = classnames( 'edit-post-layout', 'is-mode-' + mode, {
 		'is-sidebar-opened': sidebarIsOpened,
@@ -207,7 +201,7 @@ function Layout( { styles } ) {
 			<EditorKeyboardShortcutsRegister />
 			<SettingsSidebar />
 			<InterfaceSkeleton
-				isDistractionFree={ distractionFree }
+				isDistractionFree={ isDistractionFree }
 				className={ className }
 				labels={ {
 					...interfaceLabels,
@@ -215,7 +209,6 @@ function Layout( { styles } ) {
 				} }
 				header={
 					<Header
-						isDistractionFree={ distractionFree }
 						setEntitiesSavedStatesCallback={
 							setEntitiesSavedStatesCallback
 						}
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index 33489890580b1..148e2e074feb0 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -508,6 +508,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-2 {
+  overflow-x: auto;
+  max-height: 100%;
+}
+
+.emotion-3 {
   background-color: #fff;
   color: #1e1e1e;
   position: relative;
@@ -517,47 +522,47 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border-radius: calc(2px - 1px);
 }
 
-.emotion-4 {
+.emotion-5 {
   height: 100%;
 }
 
-.emotion-6 {
+.emotion-7 {
   box-sizing: border-box;
   height: auto;
   max-height: 100%;
   padding: calc(4px * 4);
 }
 
-.emotion-6:first-of-type {
+.emotion-7:first-of-type {
   border-top-left-radius: calc(2px - 1px);
   border-top-right-radius: calc(2px - 1px);
 }
 
-.emotion-6:last-of-type {
+.emotion-7:last-of-type {
   border-bottom-left-radius: calc(2px - 1px);
   border-bottom-right-radius: calc(2px - 1px);
 }
 
-.emotion-8 {
+.emotion-9 {
   border-radius: 2px;
 }
 
-.emotion-8>*:first-of-type>* {
+.emotion-9>*:first-of-type>* {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
-.emotion-8>*:last-of-type>* {
+.emotion-9>*:last-of-type>* {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.emotion-10 {
+.emotion-11 {
   width: 100%;
   display: block;
 }
 
-.emotion-12 {
+.emotion-13 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -565,7 +570,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border: 1px solid transparent;
   cursor: pointer;
   background: none;
-  text-align: left;
+  text-align: start;
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
   width: 100%;
   display: block;
@@ -574,18 +579,18 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   border-radius: 2px;
 }
 
-.emotion-12:hover {
+.emotion-13:hover {
   color: var( --wp-admin-theme-color, #007cba);
 }
 
-.emotion-12:focus {
+.emotion-13:focus {
   background-color: transparent;
   color: var( --wp-admin-theme-color, #007cba);
   border-color: var( --wp-admin-theme-color, #007cba);
   outline: 3px solid transparent;
 }
 
-.emotion-14 {
+.emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -604,11 +609,11 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   width: 100%;
 }
 
-.emotion-14>* {
+.emotion-15>* {
   min-width: 0;
 }
 
-.emotion-16 {
+.emotion-17 {
   display: block;
   max-height: 100%;
   max-width: 100%;
@@ -616,14 +621,14 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
   min-width: 0;
 }
 
-.emotion-18 {
+.emotion-19 {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.emotion-46 {
+.emotion-47 {
   background: transparent;
   display: block;
   margin: 0!important;
@@ -643,7 +648,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-46 {
+  .emotion-47 {
     transition-duration: 0ms;
   }
 }
@@ -696,52 +701,52 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
       data-wp-component="NavigatorProvider"
     >
       <div
-        class="components-navigator-screen"
+        class="emotion-2 components-navigator-screen"
         data-wp-c16t="true"
         data-wp-component="NavigatorScreen"
         style="opacity: 0; transform: translateX(50px) translateZ(0);"
       >
         <div
-          class="components-surface components-card emotion-2 emotion-1"
+          class="components-surface components-card emotion-3 emotion-1"
           data-wp-c16t="true"
           data-wp-component="Card"
         >
           <div
-            class="emotion-4 emotion-1"
+            class="emotion-5 emotion-1"
           >
             <div
-              class="components-card__body components-card-body emotion-6 emotion-1"
+              class="components-card__body components-card-body emotion-7 emotion-1"
               data-wp-c16t="true"
               data-wp-component="CardBody"
             >
               <div
-                class="components-item-group emotion-8 emotion-1"
+                class="components-item-group emotion-9 emotion-1"
                 data-wp-c16t="true"
                 data-wp-component="ItemGroup"
                 role="list"
               >
                 <div
-                  class="emotion-10"
+                  class="emotion-11"
                   role="listitem"
                 >
                   <button
-                    class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
+                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
                     data-wp-c16t="true"
                     data-wp-component="NavigatorButton"
                     id="general"
                   >
                     <div
-                      class="components-flex components-h-stack emotion-14 emotion-1"
+                      class="components-flex components-h-stack emotion-15 emotion-1"
                       data-wp-c16t="true"
                       data-wp-component="HStack"
                     >
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
                         <span
-                          class="components-truncate emotion-18 emotion-1"
+                          class="components-truncate emotion-19 emotion-1"
                           data-wp-c16t="true"
                           data-wp-component="Truncate"
                         >
@@ -749,7 +754,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                         </span>
                       </div>
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
@@ -770,27 +775,27 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                   </button>
                 </div>
                 <div
-                  class="emotion-10"
+                  class="emotion-11"
                   role="listitem"
                 >
                   <button
-                    class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
+                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
                     data-wp-c16t="true"
                     data-wp-component="NavigatorButton"
                     id="blocks"
                   >
                     <div
-                      class="components-flex components-h-stack emotion-14 emotion-1"
+                      class="components-flex components-h-stack emotion-15 emotion-1"
                       data-wp-c16t="true"
                       data-wp-component="HStack"
                     >
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
                         <span
-                          class="components-truncate emotion-18 emotion-1"
+                          class="components-truncate emotion-19 emotion-1"
                           data-wp-c16t="true"
                           data-wp-component="Truncate"
                         >
@@ -798,7 +803,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                         </span>
                       </div>
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
@@ -819,27 +824,27 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                   </button>
                 </div>
                 <div
-                  class="emotion-10"
+                  class="emotion-11"
                   role="listitem"
                 >
                   <button
-                    class="components-item components-navigator-button emotion-1 emotion-12 emotion-1"
+                    class="components-item components-navigator-button emotion-1 emotion-13 emotion-1"
                     data-wp-c16t="true"
                     data-wp-component="NavigatorButton"
                     id="panels"
                   >
                     <div
-                      class="components-flex components-h-stack emotion-14 emotion-1"
+                      class="components-flex components-h-stack emotion-15 emotion-1"
                       data-wp-c16t="true"
                       data-wp-component="HStack"
                     >
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
                         <span
-                          class="components-truncate emotion-18 emotion-1"
+                          class="components-truncate emotion-19 emotion-1"
                           data-wp-c16t="true"
                           data-wp-component="Truncate"
                         >
@@ -847,7 +852,7 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
                         </span>
                       </div>
                       <div
-                        class="components-flex-item emotion-16 emotion-1"
+                        class="components-flex-item emotion-17 emotion-1"
                         data-wp-c16t="true"
                         data-wp-component="FlexItem"
                       >
@@ -872,13 +877,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
           </div>
           <div
             aria-hidden="true"
-            class="components-elevation emotion-46 emotion-1"
+            class="components-elevation emotion-47 emotion-1"
             data-wp-c16t="true"
             data-wp-component="Elevation"
           />
           <div
             aria-hidden="true"
-            class="components-elevation emotion-46 emotion-1"
+            class="components-elevation emotion-47 emotion-1"
             data-wp-c16t="true"
             data-wp-component="Elevation"
           />
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
new file mode 100644
index 0000000000000..ed15a7eaa5e59
--- /dev/null
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-outline.js
@@ -0,0 +1,98 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	DocumentOutline,
+	WordCount,
+	TimeToRead,
+	CharacterCount,
+} from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	__experimentalText as Text,
+	Path,
+	SVG,
+	Line,
+	Rect,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function EmptyOutlineIllustration() {
+	return (
+		<SVG
+			width="138"
+			height="148"
+			viewBox="0 0 138 148"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Rect width="138" height="148" rx="4" fill="#F0F6FC" />
+			<Line x1="44" y1="28" x2="24" y2="28" stroke="#DDDDDD" />
+			<Rect x="48" y="16" width="27" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M54.7585 32V23.2727H56.6037V26.8736H60.3494V23.2727H62.1903V32H60.3494V28.3949H56.6037V32H54.7585ZM67.4574 23.2727V32H65.6122V25.0241H65.5611L63.5625 26.277V24.6406L65.723 23.2727H67.4574Z"
+				fill="black"
+			/>
+			<Line x1="55" y1="59" x2="24" y2="59" stroke="#DDDDDD" />
+			<Rect x="59" y="47" width="29" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M65.7585 63V54.2727H67.6037V57.8736H71.3494V54.2727H73.1903V63H71.3494V59.3949H67.6037V63H65.7585ZM74.6605 63V61.6705L77.767 58.794C78.0313 58.5384 78.2528 58.3082 78.4318 58.1037C78.6136 57.8991 78.7514 57.6989 78.8452 57.5028C78.9389 57.304 78.9858 57.0895 78.9858 56.8594C78.9858 56.6037 78.9276 56.3835 78.8111 56.1989C78.6946 56.0114 78.5355 55.8679 78.3338 55.7685C78.1321 55.6662 77.9034 55.6151 77.6477 55.6151C77.3807 55.6151 77.1477 55.669 76.9489 55.777C76.75 55.8849 76.5966 56.0398 76.4886 56.2415C76.3807 56.4432 76.3267 56.6832 76.3267 56.9616H74.5753C74.5753 56.3906 74.7045 55.8949 74.9631 55.4744C75.2216 55.054 75.5838 54.7287 76.0497 54.4986C76.5156 54.2685 77.0526 54.1534 77.6605 54.1534C78.2855 54.1534 78.8295 54.2642 79.2926 54.4858C79.7585 54.7045 80.1207 55.0085 80.3793 55.3977C80.6378 55.7869 80.767 56.233 80.767 56.7358C80.767 57.0653 80.7017 57.3906 80.571 57.7116C80.4432 58.0327 80.2145 58.3892 79.8849 58.7812C79.5554 59.1705 79.0909 59.6378 78.4915 60.1832L77.2173 61.4318V61.4915H80.8821V63H74.6605Z"
+				fill="black"
+			/>
+			<Line x1="80" y1="90" x2="24" y2="90" stroke="#DDDDDD" />
+			<Rect x="84" y="78" width="30" height="23" rx="4" fill="#F0B849" />
+			<Path
+				d="M90.7585 94V85.2727H92.6037V88.8736H96.3494V85.2727H98.1903V94H96.3494V90.3949H92.6037V94H90.7585ZM99.5284 92.4659V91.0128L103.172 85.2727H104.425V87.2841H103.683L101.386 90.919V90.9872H106.564V92.4659H99.5284ZM103.717 94V92.0227L103.751 91.3793V85.2727H105.482V94H103.717Z"
+				fill="black"
+			/>
+			<Line x1="66" y1="121" x2="24" y2="121" stroke="#DDDDDD" />
+			<Rect x="70" y="109" width="29" height="23" rx="4" fill="#DDDDDD" />
+			<Path
+				d="M76.7585 125V116.273H78.6037V119.874H82.3494V116.273H84.1903V125H82.3494V121.395H78.6037V125H76.7585ZM88.8864 125.119C88.25 125.119 87.6832 125.01 87.1861 124.791C86.6918 124.57 86.3011 124.266 86.0142 123.879C85.7301 123.49 85.5838 123.041 85.5753 122.533H87.4332C87.4446 122.746 87.5142 122.933 87.642 123.095C87.7727 123.254 87.946 123.378 88.1619 123.466C88.3778 123.554 88.6207 123.598 88.8906 123.598C89.1719 123.598 89.4205 123.548 89.6364 123.449C89.8523 123.349 90.0213 123.212 90.1435 123.036C90.2656 122.859 90.3267 122.656 90.3267 122.426C90.3267 122.193 90.2614 121.987 90.1307 121.808C90.0028 121.626 89.8182 121.484 89.5767 121.382C89.3381 121.28 89.054 121.229 88.7244 121.229H87.9105V119.874H88.7244C89.0028 119.874 89.2486 119.825 89.4616 119.729C89.6776 119.632 89.8452 119.499 89.9645 119.328C90.0838 119.155 90.1435 118.953 90.1435 118.723C90.1435 118.504 90.0909 118.312 89.9858 118.148C89.8835 117.98 89.7386 117.849 89.5511 117.756C89.3665 117.662 89.1506 117.615 88.9034 117.615C88.6534 117.615 88.4247 117.661 88.2173 117.751C88.0099 117.839 87.8438 117.966 87.7188 118.131C87.5938 118.295 87.527 118.489 87.5185 118.71H85.75C85.7585 118.207 85.902 117.764 86.1804 117.381C86.4588 116.997 86.8338 116.697 87.3054 116.482C87.7798 116.263 88.3153 116.153 88.9119 116.153C89.5142 116.153 90.0412 116.263 90.4929 116.482C90.9446 116.7 91.2955 116.996 91.5455 117.368C91.7983 117.737 91.9233 118.152 91.9205 118.612C91.9233 119.101 91.7713 119.509 91.4645 119.835C91.1605 120.162 90.7642 120.369 90.2756 120.457V120.526C90.9176 120.608 91.4063 120.831 91.7415 121.195C92.0795 121.555 92.2472 122.007 92.2443 122.55C92.2472 123.047 92.1037 123.489 91.8139 123.875C91.527 124.261 91.1307 124.565 90.625 124.787C90.1193 125.009 89.5398 125.119 88.8864 125.119Z"
+				fill="black"
+			/>
+		</SVG>
+	);
+}
+
+export default function ListViewOutline() {
+	const { headingCount } = useSelect( ( select ) => {
+		const { getGlobalBlockCount } = select( blockEditorStore );
+		return {
+			headingCount: getGlobalBlockCount( 'core/heading' ),
+		};
+	}, [] );
+	return (
+		<>
+			{ headingCount > 0 ? (
+				<DocumentOutline />
+			) : (
+				<div className="edit-post-editor__list-view-empty-headings">
+					<EmptyOutlineIllustration />
+					<p>
+						{ __(
+							'Navigate the structure of your document and address issues like empty or incorrect heading levels.'
+						) }
+					</p>
+				</div>
+			) }
+			<div className="edit-post-editor__list-view-overview">
+				<div>
+					<Text>{ __( 'Characters:' ) }</Text>
+					<Text>
+						<CharacterCount />
+					</Text>
+				</div>
+				<div>
+					<Text>{ __( 'Words:' ) }</Text>
+					<WordCount />
+				</div>
+				<div>
+					<Text>{ __( 'Time to read:' ) }</Text>
+					<TimeToRead />
+				</div>
+			</div>
+		</>
+	);
+}
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
index 10ee573e6257c..56f6fce6f17bf 100644
--- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,18 +11,19 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
+import ListViewOutline from './list-view-outline';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
@@ -32,35 +38,68 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-post-editor__list-view-panel-label-${ instanceId }`;
+	const [ tab, setTab ] = useState( 'list-view' );
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
+			aria-label={ __( 'List View' ) }
 			className="edit-post-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
 			<div
-				className="edit-post-editor__list-view-panel-header"
+				className="edit-post-editor__list-view-panel-header components-panel__header edit-post-sidebar__panel-tabs"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
 					label={ __( 'Close List View Sidebar' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
+				<ul>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'list-view' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'list-view' }
+							) }
+							aria-current={ tab === 'list-view' }
+						>
+							{ __( 'List View' ) }
+						</Button>
+					</li>
+					<li>
+						<Button
+							onClick={ () => {
+								setTab( 'outline' );
+							} }
+							className={ classnames(
+								'edit-post-sidebar__panel-tab',
+								{ 'is-active': tab === 'outline' }
+							) }
+							aria-current={ tab === 'outline' }
+						>
+							{ __( 'Outline' ) }
+						</Button>
+					</li>
+				</ul>
 			</div>
 			<div
-				className="edit-post-editor__list-view-panel-content"
 				ref={ useMergeRefs( [
 					contentFocusReturnRef,
 					focusOnMountRef,
 				] ) }
+				className="edit-post-editor__list-view-container"
 			>
-				<ListView />
+				{ tab === 'list-view' && (
+					<div className="edit-post-editor__list-view-panel-content">
+						<ListView />
+					</div>
+				) }
+				{ tab === 'outline' && <ListViewOutline /> }
 			</div>
 		</div>
 	);
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
index 1b350148038d5..507ba200bd900 100644
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -8,7 +8,12 @@
 .edit-post-editor__list-view-panel {
 	// Same width as the Inserter.
 	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	// Width of the list view panel.
+	width: 350px;
+
+	.edit-post-sidebar__panel-tabs {
+		flex-direction: row-reverse;
+	}
 }
 
 .edit-post-editor__inserter-panel-header {
@@ -18,30 +23,81 @@
 	justify-content: flex-end;
 }
 
-.edit-post-editor__inserter-panel-content,
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__inserter-panel-content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-}
-
-.edit-post-editor__inserter-panel-content {
 	@include break-medium() {
 		height: 100%;
 	}
 }
 
 .edit-post-editor__list-view-panel-header {
-	align-items: center;
 	border-bottom: $border-width solid $gray-300;
 	display: flex;
 	justify-content: space-between;
 	height: $grid-unit-60;
 	padding-left: $grid-unit-20;
 	padding-right: $grid-unit-05;
+	ul {
+		width: calc(100% - #{ $grid-unit-50 });
+	}
+	li {
+		width: 50%;
+		button {
+			width: 100%;
+			text-align: initial;
+		}
+	}
+	li:only-child {
+		width: 100%;
+	}
 }
 
-.edit-post-editor__list-view-panel-content {
+.edit-post-editor__list-view-panel-content,
+.edit-post-editor__list-view-container > .document-outline,
+.edit-post-editor__list-view-empty-headings {
+	overflow-x: hidden;
 	overflow-y: auto;
+	height: 100%;
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
 	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }
+
+.edit-post-editor__list-view-empty-headings {
+	& > svg {
+		margin-top: $grid-unit-30 + $grid-unit-05;
+	}
+	& > p {
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+	}
+	text-align: center;
+	color: $gray-700;
+}
+
+.edit-post-editor__list-view-overview {
+	& > div > span:first-child {
+		// Width of the text information fields.
+		width: 90px;
+		display: inline-block;
+	}
+	border-top: $border-width solid $gray-300;
+	width: calc(100% - #{ $grid-unit-40 });
+	padding: $grid-unit-20;
+	& > div {
+		padding: 0 0 $grid-unit-10;
+		& > span {
+			font-size: $helptext-font-size;
+			line-height: $default-line-height;
+			color: $gray-700;
+		}
+	}
+	// Height of the overview container.
+	height: 72px;
+}
+
+.edit-post-editor__list-view-container {
+	display: flex;
+	flex-direction: column;
+	height: calc(100% - #{$grid-unit-60});
+}
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
index 5eaa6e72f717b..f4861349d4434 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PluginPostStatusInfo renders fill properly 1`] = `
-<div
-  class="components-panel__row my-plugin-post-status-info"
->
-  My plugin post status info
+<div>
+  <div
+    class="components-panel__row my-plugin-post-status-info"
+  >
+    My plugin post status info
+  </div>
 </div>
 `;
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js
index b27db6820b46c..f989a162a559f 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-post-status-info/test/index.js
@@ -24,6 +24,6 @@ describe( 'PluginPostStatusInfo', () => {
 			</SlotFillProvider>
 		);
 
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 239a33ea51bcc..8062e9d51dada 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -38,6 +38,7 @@ import { useMergeRefs } from '@wordpress/compose';
 import { arrowLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -137,6 +138,10 @@ export default function VisualEditor( { styles } ) {
 		}
 
 		const supportsTemplateMode = getEditorSettings().supportsTemplateMode;
+		const canEditTemplate = select( coreStore ).canUser(
+			'create',
+			'templates'
+		);
 
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
@@ -144,9 +149,10 @@ export default function VisualEditor( { styles } ) {
 			isTemplateMode: _isTemplateMode,
 			// Post template fetch returns a 404 on classic themes, which
 			// messes with e2e tests, so we check it's a block theme first.
-			editedPostTemplate: supportsTemplateMode
-				? getEditedPostTemplate()
-				: {},
+			editedPostTemplate:
+				supportsTemplateMode && canEditTemplate
+					? getEditedPostTemplate()
+					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
 		};
diff --git a/packages/edit-post/src/store/actions.js b/packages/edit-post/src/store/actions.js
index 8c74b809c7594..a2134f3bfc7b7 100644
--- a/packages/edit-post/src/store/actions.js
+++ b/packages/edit-post/src/store/actions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, reduce } from 'lodash';
+import { reduce } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -296,7 +296,10 @@ export const showBlockTypes =
 				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
 
 		const newBlockNames = existingBlockNames.filter(
-			( type ) => ! castArray( blockNames ).includes( type )
+			( type ) =>
+				! (
+					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
+				 ).includes( type )
 		);
 
 		registry
@@ -319,7 +322,7 @@ export const hideBlockTypes =
 
 		const mergedBlockNames = new Set( [
 			...existingBlockNames,
-			...castArray( blockNames ),
+			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
 		] );
 
 		registry
@@ -330,18 +333,16 @@ export const hideBlockTypes =
 	};
 
 /**
- * Returns an action object used in signaling
- * what Meta boxes are available in which location.
+ * Stores info about which Meta boxes are available in which location.
  *
  * @param {Object} metaBoxesPerLocation Meta boxes per location.
  */
-export const setAvailableMetaBoxesPerLocation =
-	( metaBoxesPerLocation ) =>
-	( { dispatch } ) =>
-		dispatch( {
-			type: 'SET_META_BOXES_PER_LOCATIONS',
-			metaBoxesPerLocation,
-		} );
+export function setAvailableMetaBoxesPerLocation( metaBoxesPerLocation ) {
+	return {
+		type: 'SET_META_BOXES_PER_LOCATIONS',
+		metaBoxesPerLocation,
+	};
+}
 
 /**
  * Update a metabox.
@@ -566,7 +567,6 @@ export const initializeMetaBoxes =
 		let wasAutosavingPost = registry
 			.select( editorStore )
 			.isAutosavingPost();
-		const hasMetaBoxes = select.hasMetaBoxes();
 
 		// Save metaboxes when performing a full save on the post.
 		registry.subscribe( async () => {
@@ -575,17 +575,12 @@ export const initializeMetaBoxes =
 				.select( editorStore )
 				.isAutosavingPost();
 
-			// Save metaboxes on save completion, except for autosaves that are not a post preview.
-			//
-			// Meta boxes are initialized once at page load. It is not necessary to
-			// account for updates on each state change.
-			//
-			// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309.
+			// Save metaboxes on save completion, except for autosaves.
 			const shouldTriggerMetaboxesSave =
-				hasMetaBoxes &&
 				wasSavingPost &&
+				! wasAutosavingPost &&
 				! isSavingPost &&
-				! wasAutosavingPost;
+				select.hasMetaBoxes();
 
 			// Save current state for next inspection.
 			wasSavingPost = isSavingPost;
diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js
index c52a3b8ad4658..8a4031ecf9b09 100644
--- a/packages/edit-post/src/store/reducer.js
+++ b/packages/edit-post/src/store/reducer.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,7 +14,7 @@ import { combineReducers } from '@wordpress/data';
 export function removedPanels( state = [], action ) {
 	switch ( action.type ) {
 		case 'REMOVE_PANEL':
-			if ( ! includes( state, action.panelName ) ) {
+			if ( ! state.includes( action.panelName ) ) {
 				return [ ...state, action.panelName ];
 			}
 	}
@@ -80,6 +75,21 @@ export function isSavingMetaBoxes( state = false, action ) {
 	}
 }
 
+function mergeMetaboxes( metaboxes = [], newMetaboxes ) {
+	const mergedMetaboxes = [ ...metaboxes ];
+	for ( const metabox of newMetaboxes ) {
+		const existing = mergedMetaboxes.findIndex(
+			( box ) => box.id === metabox.id
+		);
+		if ( existing !== -1 ) {
+			mergedMetaboxes[ existing ] = metabox;
+		} else {
+			mergedMetaboxes.push( metabox );
+		}
+	}
+	return mergedMetaboxes;
+}
+
 /**
  * Reducer keeping track of the meta boxes per location.
  *
@@ -90,8 +100,18 @@ export function isSavingMetaBoxes( state = false, action ) {
  */
 export function metaBoxLocations( state = {}, action ) {
 	switch ( action.type ) {
-		case 'SET_META_BOXES_PER_LOCATIONS':
-			return action.metaBoxesPerLocation;
+		case 'SET_META_BOXES_PER_LOCATIONS': {
+			const newState = { ...state };
+			for ( const [ location, metaboxes ] of Object.entries(
+				action.metaBoxesPerLocation
+			) ) {
+				newState[ location ] = mergeMetaboxes(
+					newState[ location ],
+					metaboxes
+				);
+			}
+			return newState;
+		}
 	}
 
 	return state;
diff --git a/packages/edit-post/src/store/test/reducer.js b/packages/edit-post/src/store/test/reducer.js
index 7e01535c958a6..4be7c7cb3ffd8 100644
--- a/packages/edit-post/src/store/test/reducer.js
+++ b/packages/edit-post/src/store/test/reducer.js
@@ -78,14 +78,44 @@ describe( 'state', () => {
 			const action = {
 				type: 'SET_META_BOXES_PER_LOCATIONS',
 				metaBoxesPerLocation: {
-					normal: [ 'postcustom' ],
+					normal: [ { id: 'postcustom' } ],
 				},
 			};
 
 			const state = metaBoxLocations( undefined, action );
 
 			expect( state ).toEqual( {
-				normal: [ 'postcustom' ],
+				normal: [ { id: 'postcustom' } ],
+			} );
+		} );
+
+		it( 'should merge new meta box locations into the existing ones', () => {
+			const oldState = {
+				normal: [
+					{ id: 'a', title: 'A' },
+					{ id: 'b', title: 'B' },
+				],
+				side: [ { id: 's', title: 'S' } ],
+			};
+			const action = {
+				type: 'SET_META_BOXES_PER_LOCATIONS',
+				metaBoxesPerLocation: {
+					normal: [
+						{ id: 'b', title: 'B-updated' },
+						{ id: 'c', title: 'C' },
+					],
+					advanced: [ { id: 'd', title: 'D' } ],
+				},
+			};
+			const newState = metaBoxLocations( oldState, action );
+			expect( newState ).toEqual( {
+				normal: [
+					{ id: 'a', title: 'A' },
+					{ id: 'b', title: 'B-updated' },
+					{ id: 'c', title: 'C' },
+				],
+				advanced: [ { id: 'd', title: 'D' } ],
+				side: [ { id: 's', title: 'S' } ],
 			} );
 		} );
 	} );
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index 7ee4e21e02a3c..266a1a42f92bf 100644
--- a/packages/edit-site/src/components/app/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -17,7 +17,7 @@ import List from '../list';
 import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
-export default function EditSiteApp( { reboot } ) {
+export default function EditSiteApp( { reboot, homeTemplate } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -40,6 +40,13 @@ export default function EditSiteApp( { reboot } ) {
 				{ ( { params } ) => {
 					const isListPage = getIsListPage( params );
 
+					// The existence of a 'front-page' supersedes every other setting.
+					const homeTemplateType =
+						params.postId?.includes( 'front-page' ) ||
+						params.postId === homeTemplate?.postId
+							? 'site-editor'
+							: undefined;
+
 					return (
 						<>
 							{ isListPage ? (
@@ -54,7 +61,9 @@ export default function EditSiteApp( { reboot } ) {
 								// Open the navigation sidebar by default when in the list page.
 								isDefaultOpen={ !! isListPage }
 								activeTemplateType={
-									isListPage ? params.postType : undefined
+									isListPage
+										? params.postType
+										: homeTemplateType
 								}
 							/>
 						</>
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 9830f1e302eac..6f7e27f8a1cc2 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -23,6 +23,7 @@
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
+			max-height: 100%;
 		}
 
 		// To hide the horizontal scrollbar and show the drag handle on the
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 57c032424cae0..bdb7563a76db5 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
@@ -65,6 +65,7 @@ function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
+		isSaveViewOpen,
 		sidebarIsOpened,
 		settings,
 		entityId,
@@ -82,6 +83,7 @@ function Editor( { onError } ) {
 		const {
 			isInserterOpened,
 			isListViewOpened,
+			isSaveViewOpened,
 			getSettings,
 			getEditedPostType,
 			getEditedPostId,
@@ -98,6 +100,7 @@ function Editor( { onError } ) {
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
 			sidebarIsOpened: !! select(
 				interfaceStore
 			).getActiveComplementaryArea( editSiteStore.name ),
@@ -130,19 +133,10 @@ function Editor( { onError } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+		useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
-		useState( false );
-	const openEntitiesSavedStates = useCallback(
-		() => setIsEntitiesSavedStatesOpen( true ),
-		[]
-	);
-	const closeEntitiesSavedStates = useCallback( () => {
-		setIsEntitiesSavedStatesOpen( false );
-	}, [] );
-
 	const blockContext = useMemo(
 		() => ( {
 			...page?.context,
@@ -247,9 +241,6 @@ function Editor( { onError } ) {
 											}
 											header={
 												<Header
-													openEntitiesSavedStates={
-														openEntitiesSavedStates
-													}
 													showIconLabels={
 														showIconLabels
 													}
@@ -286,19 +277,17 @@ function Editor( { onError } ) {
 																) }
 															</Notice>
 														) }
-													<KeyboardShortcuts
-														openEntitiesSavedStates={
-															openEntitiesSavedStates
-														}
-													/>
+													<KeyboardShortcuts />
 												</>
 											}
 											actions={
 												<>
-													{ isEntitiesSavedStatesOpen ? (
+													{ isSaveViewOpen ? (
 														<EntitiesSavedStates
-															close={
-																closeEntitiesSavedStates
+															close={ () =>
+																setIsSaveViewOpened(
+																	false
+																)
 															}
 														/>
 													) : (
@@ -306,8 +295,10 @@ function Editor( { onError } ) {
 															<Button
 																variant="secondary"
 																className="edit-site-editor__toggle-save-panel-button"
-																onClick={
-																	openEntitiesSavedStates
+																onClick={ () =>
+																	setIsSaveViewOpened(
+																		true
+																	)
 																}
 																aria-expanded={
 																	false
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index ec6c9a4ecc12b..420561207b872 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -186,6 +186,7 @@ export default function BorderPanel( { name } ) {
 						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
+						size={ '__unstable-large' }
 					/>
 				</ToolsPanelItem>
 			) }
diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
index ec1cf726c316f..a76f018f53be7 100644
--- a/packages/edit-site/src/components/global-styles/global-styles-provider.js
+++ b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, pickBy, isEmpty, mapValues } from 'lodash';
+import { mergeWith, isEmpty, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,8 +15,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { GlobalStylesContext } from './context';
 
-const identity = ( x ) => x;
-
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
 	// in which case we want the new array of values
@@ -38,9 +36,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index fabc0fa9b4023..3c15ebba159b0 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -19,6 +19,7 @@
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
 	border-radius: $radius-block-ui;
+	overflow: hidden;
 }
 
 .edit-site-typography-panel__full-width-control {
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 82df0a57f2059..a1ef517560d42 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -256,6 +256,7 @@ export default function TypographyPanel( { name, element, headingLevel } ) {
 						fontSizes={ fontSizesWithFluidValues }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
+						withSlider
 						size="__unstable-large"
 						__nextHasNoMarginBottom
 					/>
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index e7cf44c08d4d2..aa2619d769a0f 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -41,11 +41,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function Header( {
-	openEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-	showIconLabels,
-} ) {
+export default function Header( { showIconLabels } ) {
 	const inserterButton = useRef();
 	const {
 		deviceType,
@@ -238,10 +234,7 @@ export default function Header( {
 							</PreviewOptions>
 						</div>
 					) }
-					<SaveButton
-						openEntitiesSavedStates={ openEntitiesSavedStates }
-						isEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }
-					/>
+					<SaveButton />
 					<PinnedItems.Slot scope="core/edit-site" />
 					<MoreMenu showIconLabels={ showIconLabels } />
 				</div>
diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js b/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js
index 20ca38c349245..5c8d18242a8e7 100644
--- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js
+++ b/packages/edit-site/src/components/keyboard-shortcut-help-modal/shortcut.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,20 +21,22 @@ function KeyCombination( { keyCombination, forceAriaLabel } ) {
 			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
 			aria-label={ forceAriaLabel || ariaLabel }
 		>
-			{ castArray( shortcut ).map( ( character, index ) => {
-				if ( character === '+' ) {
-					return <Fragment key={ index }>{ character }</Fragment>;
-				}
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
 
-				return (
-					<kbd
-						key={ index }
-						className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
-					>
-						{ character }
-					</kbd>
-				);
-			} ) }
+					return (
+						<kbd
+							key={ index }
+							className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
 		</kbd>
 	);
 }
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js
index 62f0c736d4e81..3a2d82c842eab 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js
@@ -18,7 +18,7 @@ import { store as editSiteStore } from '../../store';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
-function KeyboardShortcuts( { openEntitiesSavedStates } ) {
+function KeyboardShortcuts() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
@@ -38,6 +38,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
@@ -49,7 +50,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		);
 
 		if ( ! isSaving && isDirty ) {
-			openEntitiesSavedStates();
+			setIsSaveViewOpened( true );
 		}
 	} );
 
diff --git a/packages/edit-site/src/components/main-dashboard-button/index.js b/packages/edit-site/src/components/main-dashboard-button/index.js
deleted file mode 100644
index 0878a7cce4901..0000000000000
--- a/packages/edit-site/src/components/main-dashboard-button/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalUseSlotFills as useSlotFills,
-	createSlotFill,
-} from '@wordpress/components';
-
-const slotName = '__experimentalMainDashboardButton';
-
-const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
-
-const MainDashboardButton = Fill;
-
-const Slot = ( { children } ) => {
-	const fills = useSlotFills( slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return children;
-	}
-
-	return <MainDashboardButtonSlot bubblesVirtually />;
-};
-
-MainDashboardButton.Slot = Slot;
-
-export default MainDashboardButton;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
index ae62f50517d44..8b820c8a13edd 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -28,7 +28,6 @@ import {
  * Internal dependencies
  */
 import { useLink } from '../../routes/link';
-import MainDashboardButton from '../../main-dashboard-button';
 import { store as editSiteStore } from '../../../store';
 
 const SITE_EDITOR_KEY = 'site-editor';
@@ -39,24 +38,33 @@ function NavLink( { params, replace, ...props } ) {
 	return <NavigationItem { ...linkProps } { ...props } />;
 }
 
-const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { homeTemplate, isNavigationOpen, isTemplatePartsMode, siteTitle } =
-		useSelect( ( select ) => {
-			const { getEntityRecord } = select( coreDataStore );
-			const { getSettings, isNavigationOpened } = select( editSiteStore );
+const NavigationPanel = ( { activeItem } ) => {
+	const {
+		homeTemplate,
+		isNavigationOpen,
+		isTemplatePartsMode,
+		siteTitle,
+		dashboardLink,
+	} = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreDataStore );
+		const { getSettings, isNavigationOpened } = select( editSiteStore );
 
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-			const { supportsTemplatePartsMode, __unstableHomeTemplate } =
-				getSettings();
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+		const {
+			supportsTemplatePartsMode,
+			__unstableHomeTemplate,
+			__experimentalDashboardLink,
+		} = getSettings();
 
-			return {
-				siteTitle: siteData.name,
-				homeTemplate: __unstableHomeTemplate,
-				isNavigationOpen: isNavigationOpened(),
-				isTemplatePartsMode: !! supportsTemplatePartsMode,
-			};
-		}, [] );
+		return {
+			siteTitle: siteData.name,
+			homeTemplate: __unstableHomeTemplate,
+			dashboardLink: __experimentalDashboardLink,
+			isNavigationOpen: isNavigationOpened(),
+			isTemplatePartsMode: !! supportsTemplatePartsMode,
+		};
+	}, [] );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -82,13 +90,11 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
 					<Navigation activeItem={ activeItem }>
-						<MainDashboardButton.Slot>
-							<NavigationBackButton
-								backButtonLabel={ __( 'Dashboard' ) }
-								className="edit-site-navigation-panel__back-to-dashboard"
-								href="index.php"
-							/>
-						</MainDashboardButton.Slot>
+						<NavigationBackButton
+							backButtonLabel={ __( 'Dashboard' ) }
+							className="edit-site-navigation-panel__back-to-dashboard"
+							href={ dashboardLink ?? 'index.php' }
+						/>
 
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap
new file mode 100644
index 0000000000000..f08a738cdcaed
--- /dev/null
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavigationToggle when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
+<div>
+  <div
+    class="edit-site-navigation-toggle"
+  >
+    <button
+      aria-label="Toggle navigation"
+      aria-pressed="false"
+      class="components-button edit-site-navigation-toggle__button"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="36px"
+        viewBox="-2 -2 24 24"
+        width="36px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
+        />
+      </svg>
+      <div
+        aria-hidden="true"
+        class="components-popover components-tooltip"
+        style="position: absolute;"
+        tabindex="-1"
+      >
+        <div
+          class="components-popover__content"
+        >
+          Toggle navigation
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
index e7c428017ce96..159a48b2d7989 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -38,12 +38,11 @@ describe( 'NavigationToggle', () => {
 				} ) );
 			} );
 
-			const { container } = render( <NavigationToggle /> );
-			const siteIcon = container.querySelector(
-				'.edit-site-navigation-toggle__site-icon'
-			);
+			render( <NavigationToggle /> );
+
+			const siteIcon = screen.getByAltText( 'Site Icon' );
 
-			expect( siteIcon ).toBeTruthy();
+			expect( siteIcon ).toBeVisible();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
@@ -59,13 +58,12 @@ describe( 'NavigationToggle', () => {
 			} );
 
 			const { container } = render( <NavigationToggle /> );
-			const siteIcon = container.querySelector(
-				'.edit-site-navigation-toggle__site-icon'
-			);
-			const defaultIcon = container.querySelector( 'svg' );
 
-			expect( siteIcon ).toBeFalsy();
-			expect( defaultIcon ).toBeTruthy();
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 } );
diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
index 1c28350340411..37815ec950030 100644
--- a/packages/edit-site/src/components/save-button/index.js
+++ b/packages/edit-site/src/components/save-button/index.js
@@ -1,31 +1,31 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function SaveButton( {
-	openEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-} ) {
-	const { isDirty, isSaving } = useSelect( ( select ) => {
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function SaveButton() {
+	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const { isSaveViewOpened } = select( editSiteStore );
 		return {
 			isDirty: dirtyEntityRecords.length > 0,
-			isSaving: some( dirtyEntityRecords, ( record ) =>
+			isSaving: dirtyEntityRecords.some( ( record ) =>
 				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
+			isSaveViewOpen: isSaveViewOpened(),
 		};
 	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	const disabled = ! isDirty || isSaving;
 
@@ -34,9 +34,9 @@ export default function SaveButton( {
 			variant="primary"
 			className="edit-site-save-button__button"
 			aria-disabled={ disabled }
-			aria-expanded={ isEntitiesSavedStatesOpen }
+			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : openEntitiesSavedStates }
+			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
 		>
 			{ __( 'Save' ) }
 		</Button>
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 331cff06a097e..858ea8c42f20d 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -45,7 +45,9 @@ export function reinitializeEditor( target, settings ) {
 				message={ __(
 					'The editor is unable to find a block template for the homepage.'
 				) }
-				dashboardLink="index.php"
+				dashboardLink={
+					settings.__experimentalDashboardLink ?? 'index.php'
+				}
 			/>,
 			target
 		);
@@ -132,7 +134,13 @@ export function reinitializeEditor( target, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render( <EditSiteApp reboot={ reboot } />, target );
+	render(
+		<EditSiteApp
+			reboot={ reboot }
+			homeTemplate={ settings.__unstableHomeTemplate }
+		/>,
+		target
+	);
 }
 
 /**
@@ -159,7 +167,6 @@ export function initializeEditor( id, settings ) {
 	reinitializeEditor( target, settings );
 }
 
-export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 992aef8525f6a..50b2ce7da376d 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -320,6 +320,19 @@ export function setIsListViewOpened( isOpen ) {
 	};
 }
 
+/**
+ * Sets whether the save view panel should be open.
+ *
+ * @param {boolean} isOpen If true, opens the save view. If false, closes it.
+ *                         It does not toggle the state, but sets it directly.
+ */
+export function setIsSaveViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_SAVE_VIEW_OPENED',
+		isOpen,
+	};
+}
+
 /**
  * Reverts a template to its original theme-provided file.
  *
diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js
index 12d3e926fcf83..2513c4f10afb7 100644
--- a/packages/edit-site/src/store/reducer.js
+++ b/packages/edit-site/src/store/reducer.js
@@ -183,6 +183,24 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer to set the save view panel open or closed.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function saveViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
+			return false;
+		case 'SET_IS_NAVIGATION_PANEL_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_SAVE_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -191,4 +209,5 @@ export default combineReducers( {
 	navigationPanel,
 	blockInserterPanel,
 	listViewPanel,
+	saveViewPanel,
 } );
diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
index 66e4d540ca680..79b28d98c384a 100644
--- a/packages/edit-site/src/store/selectors.js
+++ b/packages/edit-site/src/store/selectors.js
@@ -320,6 +320,17 @@ export function isListViewOpened( state ) {
 	return state.listViewPanel;
 }
 
+/**
+ * Returns the current opened/closed state of the save panel.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} True if the save panel should be open; false if closed.
+ */
+export function isSaveViewOpened( state ) {
+	return state.saveViewPanel;
+}
+
 /**
  * Returns the template parts and their blocks for the current edited template.
  *
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 9984a6ddbcef7..9889b958cf962 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -58,6 +58,8 @@
 		"@wordpress/url": "file:../url",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.3.1",
+		"date-fns": "^2.28.0",
+		"escape-html": "^1.0.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
diff --git a/packages/editor/src/components/entities-saved-states/entity-type-list.js b/packages/editor/src/components/entities-saved-states/entity-type-list.js
index f478309b8f10c..6a323f8db5dfb 100644
--- a/packages/editor/src/components/entities-saved-states/entity-type-list.js
+++ b/packages/editor/src/components/entities-saved-states/entity-type-list.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -67,8 +62,7 @@ export default function EntityTypeList( {
 						key={ record.key || record.property }
 						record={ record }
 						checked={
-							! some(
-								unselectedEntities,
+							! unselectedEntities.some(
 								( elt ) =>
 									elt.kind === record.kind &&
 									elt.name === record.name &&
diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js
index b8dd2af2ebc4b..364e6ae694797 100644
--- a/packages/editor/src/components/entities-saved-states/index.js
+++ b/packages/editor/src/components/entities-saved-states/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { some, groupBy } from 'lodash';
+import { groupBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -127,8 +127,7 @@ export default function EntitiesSavedStates( { close } ) {
 	const saveCheckedEntities = () => {
 		const entitiesToSave = dirtyEntityRecords.filter(
 			( { kind, name, key, property } ) => {
-				return ! some(
-					unselectedEntities,
+				return ! unselectedEntities.some(
 					( elt ) =>
 						elt.kind === kind &&
 						elt.name === name &&
diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
index 3ea8aa0042ab7..3c1521f756554 100644
--- a/packages/editor/src/components/index.js
+++ b/packages/editor/src/components/index.js
@@ -72,6 +72,8 @@ export { default as TableOfContents } from './table-of-contents';
 export { default as ThemeSupportCheck } from './theme-support-check';
 export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
+export { default as TimeToRead } from './time-to-read';
+export { default as CharacterCount } from './character-count';
 
 // State Related Components.
 export { default as EditorProvider } from './provider';
diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
index db74a91c9d38b..4f3ec2c696693 100644
--- a/packages/editor/src/components/post-format/index.js
+++ b/packages/editor/src/components/post-format/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, includes } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -66,7 +66,7 @@ export default function PostFormat() {
 		// Ensure current format is always in the set.
 		// The current format may not be a format supported by the theme.
 		return (
-			includes( supportedFormats, format.id ) || postFormat === format.id
+			supportedFormats?.includes( format.id ) || postFormat === format.id
 		);
 	} );
 	const suggestion = find(
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index d7f0ab33bdff9..86d026c8798b2 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, some } from 'lodash';
+import { get } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -77,8 +77,7 @@ export class PostPublishButton extends Component {
 		this.setState( { entitiesSavedStatesCallback: false }, () => {
 			if (
 				savedEntities &&
-				some(
-					savedEntities,
+				savedEntities.some(
 					( elt ) =>
 						elt.kind === 'postType' &&
 						elt.name === postType &&
diff --git a/packages/editor/src/components/post-publish-panel/maybe-category-panel.js b/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
index da11c335bb74f..8fbf1c38fc36d 100644
--- a/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
+++ b/packages/editor/src/components/post-publish-panel/maybe-category-panel.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,7 +29,7 @@ function MaybeCategoryPanel() {
 		);
 		const postTypeSupportsCategories =
 			categoriesTaxonomy &&
-			some( categoriesTaxonomy.types, ( type ) => type === postType );
+			categoriesTaxonomy.types.some( ( type ) => type === postType );
 		const categories =
 			categoriesTaxonomy &&
 			select( editorStore ).getEditedPostAttribute(
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 c837a218e8681..e2aff854a7a9e 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
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, includes } from 'lodash';
+import { find, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
 
 const getSuggestion = ( supportedFormats, suggestedPostFormat ) => {
 	const formats = POST_FORMATS.filter( ( format ) =>
-		includes( supportedFormats, format.id )
+		supportedFormats?.includes( format.id )
 	);
 	return find( formats, ( format ) => format.id === suggestedPostFormat );
 };
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 3023b85601719..45493770eedf7 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,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -79,7 +74,7 @@ export default compose(
 			areTagsFetched: tagsTaxonomy !== undefined,
 			isPostTypeSupported:
 				tagsTaxonomy &&
-				some( tagsTaxonomy.types, ( type ) => type === postType ),
+				tagsTaxonomy.types.some( ( type ) => type === postType ),
 			hasTags: tags && tags.length,
 		};
 	} ),
diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
index b5805431ec357..c809331e564d4 100644
--- a/packages/editor/src/components/post-saved-state/style.scss
+++ b/packages/editor/src/components/post-saved-state/style.scss
@@ -38,7 +38,3 @@
 .editor-post-save-draft.has-text.has-icon svg {
 	margin-right: 0;
 }
-
-:root[dir="rtl"] .editor-post-saved-state.has-text.has-icon {
-	justify-content: right;
-}
diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js
index 7d410a30cca18..98a22a992113d 100644
--- a/packages/editor/src/components/post-schedule/index.js
+++ b/packages/editor/src/components/post-schedule/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
+
 /**
  * WordPress dependencies
  */
@@ -12,15 +17,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-function getDayOfTheMonth( date = new Date(), firstDay = true ) {
-	const d = new Date( date );
-	return new Date(
-		d.getFullYear(),
-		d.getMonth() + ( firstDay ? 0 : 1 ),
-		firstDay ? 1 : 0
-	).toISOString();
-}
-
 export default function PostSchedule( { onClose } ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
@@ -34,7 +30,7 @@ export default function PostSchedule( { onClose } ) {
 	const onUpdateDate = ( date ) => editPost( { date } );
 
 	const [ previewedMonth, setPreviewedMonth ] = useState(
-		getDayOfTheMonth( postDate )
+		startOfMonth( new Date( postDate ) )
 	);
 
 	// Pick up published and schduled site posts.
@@ -42,22 +38,20 @@ export default function PostSchedule( { onClose } ) {
 		( select ) =>
 			select( coreStore ).getEntityRecords( 'postType', postType, {
 				status: 'publish,future',
-				after: getDayOfTheMonth( previewedMonth ),
-				before: getDayOfTheMonth( previewedMonth, false ),
+				after: startOfMonth( previewedMonth ).toISOString(),
+				before: endOfMonth( previewedMonth ).toISOString(),
 				exclude: [ select( editorStore ).getCurrentPostId() ],
+				per_page: 100,
+				_fields: 'id,date',
 			} ),
 		[ previewedMonth, postType ]
 	);
 
 	const events = useMemo(
 		() =>
-			( eventsByPostType || [] ).map(
-				( { title, type, date: eventDate } ) => ( {
-					title: title?.rendered,
-					type,
-					date: new Date( eventDate ),
-				} )
-			),
+			( eventsByPostType || [] ).map( ( { date: eventDate } ) => ( {
+				date: new Date( eventDate ),
+			} ) ),
 		[ eventsByPostType ]
 	);
 
@@ -80,7 +74,9 @@ export default function PostSchedule( { onClose } ) {
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
 			events={ events }
-			onMonthPreviewed={ setPreviewedMonth }
+			onMonthPreviewed={ ( date ) =>
+				setPreviewedMonth( parseISO( date ) )
+			}
 			onClose={ onClose }
 		/>
 	);
diff --git a/packages/editor/src/components/post-taxonomies/check.js b/packages/editor/src/components/post-taxonomies/check.js
index 2e675b5e67615..a9d0c7e0cf97c 100644
--- a/packages/editor/src/components/post-taxonomies/check.js
+++ b/packages/editor/src/components/post-taxonomies/check.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some, includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,8 +11,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 
 export function PostTaxonomiesCheck( { postType, taxonomies, children } ) {
-	const hasTaxonomies = some( taxonomies, ( taxonomy ) =>
-		includes( taxonomy.types, postType )
+	const hasTaxonomies = taxonomies?.some( ( taxonomy ) =>
+		taxonomy.types.includes( postType )
 	);
 	if ( ! hasTaxonomies ) {
 		return null;
diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
index 9a73b6a4bd3a2..2195628cdd168 100644
--- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escape as escapeString, find, get } from 'lodash';
+import { find, get } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -55,7 +56,7 @@ const termNamesToIds = ( names, terms ) => {
 
 // Tries to create a term or fetch it if it already exists.
 function findOrCreateTerm( termName, restBase, namespace ) {
-	const escapedTermName = escapeString( termName );
+	const escapedTermName = escapeHtml( termName );
 
 	return apiFetch( {
 		path: `/${ namespace }/${ restBase }`,
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 3597b755fc221..771b8e9e580cf 100644
--- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
+++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, some, unescape as unescapeString, without } from 'lodash';
+import { find, get, unescape as unescapeString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -258,7 +258,7 @@ export function HierarchicalTermSelector( { slug } ) {
 	const onChange = ( termId ) => {
 		const hasTerm = terms.includes( termId );
 		const newTerms = hasTerm
-			? without( terms, termId )
+			? terms.filter( ( id ) => id !== termId )
 			: [ ...terms, termId ];
 		onUpdateTerms( newTerms );
 	};
@@ -290,7 +290,7 @@ export function HierarchicalTermSelector( { slug } ) {
 		const existingTerm = findTerm( availableTerms, formParent, formName );
 		if ( existingTerm ) {
 			// If the term we are adding exists but is not selected select it.
-			if ( ! some( terms, ( term ) => term === existingTerm.id ) ) {
+			if ( ! terms.some( ( term ) => term === existingTerm.id ) ) {
 				onUpdateTerms( [ ...terms, existingTerm.id ] );
 			}
 
diff --git a/packages/editor/src/components/post-taxonomies/index.js b/packages/editor/src/components/post-taxonomies/index.js
index 8402c8290b75c..bd89755275cd9 100644
--- a/packages/editor/src/components/post-taxonomies/index.js
+++ b/packages/editor/src/components/post-taxonomies/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ export function PostTaxonomies( {
 	taxonomyWrapper = identity,
 } ) {
 	const availableTaxonomies = filter( taxonomies, ( taxonomy ) =>
-		includes( taxonomy.types, postType )
+		taxonomy.types.includes( postType )
 	);
 	const visibleTaxonomies = filter(
 		availableTaxonomies,
diff --git a/packages/editor/src/components/post-text-editor/test/index.js b/packages/editor/src/components/post-text-editor/test/index.js
index 5d242ba31ddea..a9d2d742e9d13 100644
--- a/packages/editor/src/components/post-text-editor/test/index.js
+++ b/packages/editor/src/components/post-text-editor/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -117,7 +117,9 @@ describe( 'PostTextEditor', () => {
 		await user.clear( textarea );
 
 		// Stop editing.
-		textarea.blur();
+		act( () => {
+			textarea.blur();
+		} );
 
 		expect( mockResetEditorBlocks ).toHaveBeenCalledWith( [] );
 	} );
@@ -147,7 +149,9 @@ describe( 'PostTextEditor', () => {
 
 		rerender( <PostTextEditor /> );
 
-		textarea.blur();
+		act( () => {
+			textarea.blur();
+		} );
 
 		expect( textarea ).toHaveValue( 'Goodbye World' );
 	} );
diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
index 5c4af91c4530a..4260c9af46896 100644
--- a/packages/editor/src/components/post-type-support-check/index.js
+++ b/packages/editor/src/components/post-type-support-check/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { some, castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -30,10 +25,9 @@ import { store as editorStore } from '../../store';
 export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	let isSupported = true;
 	if ( postType ) {
-		isSupported = some(
-			castArray( supportKeys ),
-			( key ) => !! postType.supports[ key ]
-		);
+		isSupported = (
+			Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
+		 ).some( ( key ) => !! postType.supports[ key ] );
 	}
 
 	if ( ! isSupported ) {
diff --git a/packages/editor/src/components/theme-support-check/index.js b/packages/editor/src/components/theme-support-check/index.js
index b34a0e743cfea..fc0beff219b68 100644
--- a/packages/editor/src/components/theme-support-check/index.js
+++ b/packages/editor/src/components/theme-support-check/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, includes, get, some } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,14 +20,16 @@ export function ThemeSupportCheck( {
 	postType,
 	supportKeys,
 } ) {
-	const isSupported = some( castArray( supportKeys ), ( key ) => {
+	const isSupported = (
+		Array.isArray( supportKeys ) ? supportKeys : [ supportKeys ]
+	 ).some( ( key ) => {
 		const supported = get( themeSupports, [ key ], false );
 		// 'post-thumbnails' can be boolean or an array of post types.
 		// In the latter case, we need to verify `postType` exists
 		// within `supported`. If `postType` isn't passed, then the check
 		// should fail.
 		if ( 'post-thumbnails' === key && Array.isArray( supported ) ) {
-			return includes( supported, postType );
+			return supported.includes( postType );
 		}
 		return supported;
 	} );
diff --git a/packages/editor/src/components/time-to-read/index.js b/packages/editor/src/components/time-to-read/index.js
index 0ff85b2e717d0..41b458124c6f3 100644
--- a/packages/editor/src/components/time-to-read/index.js
+++ b/packages/editor/src/components/time-to-read/index.js
@@ -38,7 +38,7 @@ export default function TimeToRead() {
 	const minutesToReadString =
 		minutesToRead === 0
 			? createInterpolateElement( __( '<span>< 1</span> minute' ), {
-					span: <span className="table-of-contents__number" />,
+					span: <span />,
 			  } )
 			: createInterpolateElement(
 					sprintf(
@@ -51,7 +51,7 @@ export default function TimeToRead() {
 						minutesToRead
 					),
 					{
-						span: <span className="table-of-contents__number" />,
+						span: <span />,
 					}
 			  );
 
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index ce44fe04513d7..da5b4700eb9fc 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -95,16 +95,7 @@ export function isEditedPostNew( state ) {
  */
 export function hasChangedContent( state ) {
 	const edits = getPostEdits( state );
-
-	return (
-		'blocks' in edits ||
-		// `edits` is intended to contain only values which are different from
-		// the saved post, so the mere presence of a property is an indicator
-		// that the value is different than what is known to be saved. While
-		// content in Visual mode is represented by the blocks state, in Text
-		// mode it is tracked by `edits.content`.
-		'content' in edits
-	);
+	return 'content' in edits;
 }
 
 /**
diff --git a/packages/editor/src/store/test/selectors.js b/packages/editor/src/store/test/selectors.js
index d863ae0cab01c..4b29e251f80c0 100644
--- a/packages/editor/src/store/test/selectors.js
+++ b/packages/editor/src/store/test/selectors.js
@@ -148,7 +148,6 @@ const {
 	hasEditorUndo,
 	hasEditorRedo,
 	isEditedPostNew,
-	hasChangedContent,
 	isEditedPostDirty,
 	hasNonPostEntityChanges,
 	isCleanNewPost,
@@ -392,57 +391,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'hasChangedContent', () => {
-		it( 'should return false if no dirty blocks nor content property edit', () => {
-			const state = {
-				editor: {
-					present: {
-						blocks: {
-							isDirty: false,
-						},
-						edits: {},
-					},
-				},
-			};
-
-			expect( hasChangedContent( state ) ).toBe( false );
-		} );
-
-		it( 'should return true if dirty blocks', () => {
-			const state = {
-				editor: {
-					present: {
-						blocks: {
-							isDirty: true,
-							value: [],
-						},
-						edits: {},
-					},
-				},
-			};
-
-			expect( hasChangedContent( state ) ).toBe( true );
-		} );
-
-		it( 'should return true if content property edit', () => {
-			const state = {
-				editor: {
-					present: {
-						blocks: {
-							isDirty: false,
-							value: [],
-						},
-						edits: {
-							content: 'text mode edited',
-						},
-					},
-				},
-			};
-
-			expect( hasChangedContent( state ) ).toBe( true );
-		} );
-	} );
-
 	describe( 'isEditedPostDirty', () => {
 		it( 'should return false when blocks state not dirty nor edits exist', () => {
 			const state = {
@@ -1566,11 +1514,9 @@ describe( 'selectors', () => {
 			const state = {
 				editor: {
 					present: {
-						blocks: {
-							value: [],
-							isDirty: true,
+						edits: {
+							content: () => 'new-content',
 						},
-						edits: {},
 					},
 				},
 				currentPost: {
diff --git a/packages/editor/src/store/utils/notice-builder.js b/packages/editor/src/store/utils/notice-builder.js
index 3e784a3eb73c4..4a3f87403d07f 100644
--- a/packages/editor/src/store/utils/notice-builder.js
+++ b/packages/editor/src/store/utils/notice-builder.js
@@ -11,7 +11,7 @@ import { SAVE_POST_NOTICE_ID, TRASH_POST_NOTICE_ID } from '../constants';
 /**
  * External dependencies
  */
-import { get, includes } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Builds the arguments for a success notification dispatch.
@@ -34,8 +34,8 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
 	}
 
 	const publishStatus = [ 'publish', 'private', 'future' ];
-	const isPublished = includes( publishStatus, previousPost.status );
-	const willPublish = includes( publishStatus, post.status );
+	const isPublished = publishStatus.includes( previousPost.status );
+	const willPublish = publishStatus.includes( post.status );
 
 	let noticeMessage;
 	let shouldShowLink = get( postType, [ 'viewable' ], false );
diff --git a/packages/element/src/test/index.js b/packages/element/src/test/index.js
index 65f2347d4e731..a38e307f6f8a6 100644
--- a/packages/element/src/test/index.js
+++ b/packages/element/src/test/index.js
@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * Internal dependencies
  */
@@ -127,3 +129,5 @@ describe( 'element', () => {
 		} );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */
diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
index cec9bb171a26f..7e38b80101bcd 100644
--- a/packages/element/src/test/serialize.js
+++ b/packages/element/src/test/serialize.js
@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+
 /**
  * Internal dependencies
  */
@@ -717,3 +719,5 @@ describe( 'renderStyle()', () => {
 		} );
 	} );
 } );
+
+/* eslint-enable testing-library/render-result-naming-convention */
diff --git a/packages/env/lib/build-docker-compose-config.js b/packages/env/lib/build-docker-compose-config.js
index 1efe0e6035e8e..ff85ba807f00a 100644
--- a/packages/env/lib/build-docker-compose-config.js
+++ b/packages/env/lib/build-docker-compose-config.js
@@ -206,6 +206,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 				image: 'mariadb',
 				ports: [ '3306' ],
 				environment: {
+					MYSQL_ROOT_HOST: '%',
 					MYSQL_ROOT_PASSWORD:
 						dbEnv.credentials.WORDPRESS_DB_PASSWORD,
 					MYSQL_DATABASE: dbEnv.development.WORDPRESS_DB_NAME,
@@ -216,6 +217,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 				image: 'mariadb',
 				ports: [ '3306' ],
 				environment: {
+					MYSQL_ROOT_HOST: '%',
 					MYSQL_ROOT_PASSWORD:
 						dbEnv.credentials.WORDPRESS_DB_PASSWORD,
 					MYSQL_DATABASE: dbEnv.tests.WORDPRESS_DB_NAME,
diff --git a/packages/env/lib/cli.js b/packages/env/lib/cli.js
index d9bd3c9de4f35..abca20c9b3619 100644
--- a/packages/env/lib/cli.js
+++ b/packages/env/lib/cli.js
@@ -71,7 +71,7 @@ const withSpinner =
 					console.error( error );
 					process.exit( 1 );
 				} else {
-					spinner.fail( 'An unknown error occured.' );
+					spinner.fail( 'An unknown error occurred.' );
 					process.exit( 1 );
 				}
 			}
diff --git a/packages/env/lib/config/validate-config.js b/packages/env/lib/config/validate-config.js
index aa0572306569f..1ecee11010f11 100644
--- a/packages/env/lib/config/validate-config.js
+++ b/packages/env/lib/config/validate-config.js
@@ -6,7 +6,7 @@
  */
 
 /**
- * Error subtype which indicates that an expected validation erorr occured
+ * Error subtype which indicates that an expected validation erorr occurred
  * while reading wp-env configuration.
  */
 class ValidationError extends Error {}
@@ -16,7 +16,7 @@ class ValidationError extends Error {}
  * do not match the required format.
  *
  * @param {Object}  config      A config object to validate.
- * @param {?string} envLocation Identifies if the error occured in a specific environment property.
+ * @param {?string} envLocation Identifies if the error occurred in a specific environment property.
  * @return {Object} The passed config object with no modifications.
  */
 function validateConfig( config, envLocation ) {
diff --git a/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js b/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
index 0f59b9fcd85da..6157a78cfc346 100644
--- a/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
+++ b/packages/eslint-plugin/rules/__tests__/data-no-store-string-literals.js
@@ -44,7 +44,7 @@ const createSuggestionTestCase = ( code, output ) => ( {
 		{
 			suggestions: [
 				{
-					desc: 'Replace literal with store definition. Import store if neccessary.',
+					desc: 'Replace literal with store definition. Import store if necessary.',
 					output,
 				},
 			],
diff --git a/packages/eslint-plugin/rules/data-no-store-string-literals.js b/packages/eslint-plugin/rules/data-no-store-string-literals.js
index 28fb85a97c88b..1b977ed278c19 100644
--- a/packages/eslint-plugin/rules/data-no-store-string-literals.js
+++ b/packages/eslint-plugin/rules/data-no-store-string-literals.js
@@ -122,7 +122,7 @@ function collectAllNodesFromObjectPropertyFunctionCalls( context, node ) {
 function getSuggest( context, callNode ) {
 	return [
 		{
-			desc: 'Replace literal with store definition. Import store if neccessary.',
+			desc: 'Replace literal with store definition. Import store if necessary.',
 			fix: ( fixer ) => getFixes( fixer, context, callNode ),
 		},
 	];
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index d45296474ed2d..cbf1884cba1af 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -44,7 +44,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 
 	return (
 		<Popover
-			position="bottom center"
+			placement="bottom"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			className="block-editor-format-toolbar__image-popover"
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index c47733e6bf9e9..bbdacd56093f9 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -230,7 +230,7 @@ function InlineLinkUI( {
 			anchor={ popoverAnchor }
 			focusOnMount={ focusOnMount.current }
 			onClose={ stopAddingLink }
-			position="bottom center"
+			placement="bottom"
 			shift
 		>
 			<LinkControl
diff --git a/packages/i18n/tools/pot-to-php.js b/packages/i18n/tools/pot-to-php.js
index 1f371b539ae9c..485c21c1c77a0 100755
--- a/packages/i18n/tools/pot-to-php.js
+++ b/packages/i18n/tools/pot-to-php.js
@@ -44,7 +44,7 @@ function convertTranslationToPHP( translation, textdomain, context = '' ) {
 
 	// The format of gettext-js matches the terminology in gettext itself.
 	let original = translation.msgid;
-	const comments = translation.comments;
+	const comments = translation.comments ?? {};
 
 	if ( Object.values( comments ).length ) {
 		if ( comments.reference ) {
diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js
index abfcb0ad31993..4d902f4ba4e27 100644
--- a/packages/keycodes/src/index.js
+++ b/packages/keycodes/src/index.js
@@ -13,7 +13,7 @@
  * External dependencies
  */
 import { capitalCase } from 'change-case';
-import { get, mapValues, includes } from 'lodash';
+import { get, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -365,7 +365,7 @@ export const isKeyboardEvent = mapValues( modifiers, ( getModifiers ) => {
 		let key = event.key.toLowerCase();
 
 		if ( ! character ) {
-			return includes( mods, key );
+			return mods.includes( /** @type {WPModifierPart} */ ( key ) );
 		}
 
 		if ( event.altKey && character.length === 1 ) {
diff --git a/packages/keycodes/src/platform.js b/packages/keycodes/src/platform.js
index 66ebfd36104dd..69ad48ddb59b4 100644
--- a/packages/keycodes/src/platform.js
+++ b/packages/keycodes/src/platform.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * Return true if platform is MacOS.
  *
@@ -23,6 +18,6 @@ export function isAppleOS( _window = null ) {
 
 	return (
 		platform.indexOf( 'Mac' ) !== -1 ||
-		includes( [ 'iPad', 'iPhone' ], platform )
+		[ 'iPad', 'iPhone' ].includes( platform )
 	);
 }
diff --git a/packages/preferences/src/components/preference-toggle-menu-item/index.js b/packages/preferences/src/components/preference-toggle-menu-item/index.js
index 322dd236718c0..2797e6455bc0b 100644
--- a/packages/preferences/src/components/preference-toggle-menu-item/index.js
+++ b/packages/preferences/src/components/preference-toggle-menu-item/index.js
@@ -20,7 +20,7 @@ export default function PreferenceToggleMenuItem( {
 	messageActivated,
 	messageDeactivated,
 	shortcut,
-	toggleHandler = () => null,
+	onToggle = () => null,
 	disabled = false,
 } ) {
 	const isActive = useSelect(
@@ -55,7 +55,7 @@ export default function PreferenceToggleMenuItem( {
 			icon={ isActive && check }
 			isSelected={ isActive }
 			onClick={ () => {
-				toggleHandler();
+				onToggle();
 				toggle( scope, name );
 				speakMessage();
 			} }
diff --git a/packages/primitives/src/svg/index.js b/packages/primitives/src/svg/index.js
index d5a03921ca53d..79a5e7f58e55d 100644
--- a/packages/primitives/src/svg/index.js
+++ b/packages/primitives/src/svg/index.js
@@ -24,6 +24,13 @@ export const Circle = ( props ) => createElement( 'circle', props );
  */
 export const G = ( props ) => createElement( 'g', props );
 
+/**
+ * @param {import('react').ComponentPropsWithoutRef<'line'>} props
+ *
+ * @return {JSX.Element} Path component
+ */
+export const Line = ( props ) => createElement( 'line', props );
+
 /**
  * @param {import('react').ComponentPropsWithoutRef<'path'>} props
  *
diff --git a/packages/primitives/src/svg/index.native.js b/packages/primitives/src/svg/index.native.js
index 2035d56d8c7a2..79a0c33cde8d6 100644
--- a/packages/primitives/src/svg/index.native.js
+++ b/packages/primitives/src/svg/index.native.js
@@ -24,6 +24,7 @@ export {
 	RadialGradient,
 	LinearGradient,
 	Stop,
+	Line,
 } from 'react-native-svg';
 
 const AnimatedSvg = Animated.createAnimatedComponent(
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index 20252f3a82741..4efe61e886a34 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -13,7 +13,7 @@
 ### New feature
 
 -   Include TypeScript type declarations ([#18942](https://github.com/WordPress/gutenberg/pull/18942))
--   The "Add First Time Contributor Label" task now prompts the user to link their GitHub account to their WordPress.org profile if neccessary for props credit. The task has been renamed "First Time Contributor".
+-   The "Add First Time Contributor Label" task now prompts the user to link their GitHub account to their WordPress.org profile if necessary for props credit. The task has been renamed "First Time Contributor".
 
 ### Improvements
 
diff --git a/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js b/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
index 03f869c0e14e7..3a48cd9a3917d 100644
--- a/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
+++ b/packages/project-management-automation/lib/tasks/first-time-contributor-account-link/index.js
@@ -34,7 +34,7 @@ function getPromptMessageText( author ) {
 
 /**
  * Prompts the user to link their GitHub account to their WordPress.org profile
- * if neccessary for props credit.
+ * if necessary for props credit.
  *
  * @param {WebhookPayloadPush} payload Push event payload.
  * @param {GitHub}             octokit Initialized Octokit REST client.
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 02be9a968acc4..97a422deda608 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -22,7 +22,7 @@
 	"main": "lib/index.js",
 	"types": "build-types",
 	"dependencies": {
-		"@actions/core": "1.8.0",
+		"@actions/core": "1.9.1",
 		"@actions/github": "^5.0.0",
 		"@babel/runtime": "^7.16.0",
 		"@octokit/request-error": "^2.1.0",
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index f037e58437df9..c8933b3781705 100644
--- a/packages/react-native-aztec/package.json
+++ b/packages/react-native-aztec/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.84.0",
+	"version": "1.85.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
index dda3633c4c2e7..456fde3ed8b69 100644
--- a/packages/react-native-aztec/src/AztecView.js
+++ b/packages/react-native-aztec/src/AztecView.js
@@ -252,7 +252,7 @@ class AztecView extends Component {
 			window.console.warn(
 				"Removing lineHeight style as it's not supported by native AztecView"
 			);
-			// Prevents passing line-heigth within styles to avoid a crash due to values without units
+			// Prevents passing line-height within styles to avoid a crash due to values without units
 			// We now support this but passing line-height as a prop instead.
 		}
 
diff --git a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
index 9159b847d52cb..aa83095f058f1 100644
--- a/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
+++ b/packages/react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
@@ -163,7 +163,7 @@ extension GutenbergWebSingleBlockViewController: WKNavigationDelegate {
 
     public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
         // Sometimes the editor takes longer loading and its CSS can override what
-        // Injectic Editor specific CSS when everything is loaded to avoid overwritting parameters if gutenberg CSS load later.
+        // Injectic Editor specific CSS when everything is loaded to avoid overwriting parameters if gutenberg CSS load later.
         evaluateJavascript(jsInjection.preventAutosavesScript)
         evaluateJavascript(jsInjection.injectEditorCssScript)
         evaluateJavascript(jsInjection.gutenbergObserverScript)
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 544e5acbc056d..feea43046795d 100644
--- a/packages/react-native-bridge/package.json
+++ b/packages/react-native-bridge/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-bridge",
-	"version": "1.84.0",
+	"version": "1.85.0",
 	"description": "Native bridge library used to integrate the block editor into a native App.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 6a4abc976c750..2cd7647c0e0f6 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,8 +11,15 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.85.0
+-   [*] [iOS] Fixed iOS Voice Control support within Image block captions. [#44850]
+
+## 1.84.1
+-   [**] Native inner blocks merge where appropriate [#45048]
+
 ## 1.84.0
 -   [*] Upgrade compile and target sdk version to Android API 31 [#44610]
+-   [*] [iOS] Fixed iOS Voice Control support within Image block captions. [#44850]
 
 ## 1.83.0
 * No User facing changes *
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
index d154b9dd53555..7c666ae40596e 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-lists.test.js
@@ -16,7 +16,7 @@ describe( 'Gutenberg Editor tests for List block', () => {
 		// Send an Enter.
 		await editorPage.typeTextToTextBlock( listBlockElement, '\n', false );
 
-		// Instead of introducing separate conditions for local and CI environment, add this wait for Android to accomodate both environments
+		// Instead of introducing separate conditions for local and CI environment, add this wait for Android to accommodate both environments
 		await waitIfAndroid();
 
 		// Send a backspace.
diff --git a/packages/react-native-editor/ios/Podfile b/packages/react-native-editor/ios/Podfile
index 2785e498e7c5c..a06d86872cc6d 100644
--- a/packages/react-native-editor/ios/Podfile
+++ b/packages/react-native-editor/ios/Podfile
@@ -58,6 +58,16 @@ target 'GutenbergDemo' do
         end
       end
     end
+		### End workaround for https://github.com/facebook/react-native/issues/31034
+
+		### Begin workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
+		installer.pods_project.targets.each do |target|
+			if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
+				target.build_configurations.each do |config|
+						config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
+				end
+			end
+		end
+		### End workaround: https://github.com/CocoaPods/CocoaPods/issues/8891#issuecomment-1201465446
   end
-  ### End workaround for https://github.com/facebook/react-native/issues/31034
 end
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 780c53ebab9db..2acf1d6734b88 100644
--- a/packages/react-native-editor/ios/Podfile.lock
+++ b/packages/react-native-editor/ios/Podfile.lock
@@ -13,7 +13,7 @@ PODS:
     - ReactCommon/turbomodule/core (= 0.66.2)
   - fmt (6.2.1)
   - glog (0.3.5)
-  - Gutenberg (1.84.0):
+  - Gutenberg (1.85.0):
     - React-Core (= 0.66.2)
     - React-CoreModules (= 0.66.2)
     - React-RCTImage (= 0.66.2)
@@ -350,7 +350,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6):
     - React-Core
-  - RNTAztecView (1.84.0):
+  - RNTAztecView (1.85.0):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.8)
   - SDWebImage (5.11.1):
@@ -528,7 +528,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 18438b1c04ce502ed681cd19db3f4508964c082a
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 5337263514dd6f09803962437687240c5dc39aa4
-  Gutenberg: f2a44909f6970a6d0e1b31bac83d2171d060d5bd
+  Gutenberg: be3183da7eac3f9976b6705d209575564c7ff5cb
   libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
   RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
   RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a
@@ -569,12 +569,12 @@ SPEC CHECKSUMS:
   RNReanimated: 2366094144f5bfc2179b401237ef49034ecbee3e
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: ac504754bc6b294a03324acca45d236ce68e5122
+  RNTAztecView: 89e6deac4c52300f6416702f49b8f402097d4e3e
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
   Yoga: 9a08effa851c1d8cc1647691895540bc168ea65f
 
-PODFILE CHECKSUM: d0a2d4714ee19a1821eb2a30029333be8d6a729f
+PODFILE CHECKSUM: 855614b96eacd35e67d17c1a2818c71c67a28560
 
 COCOAPODS: 1.10.1
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index af6988c2093e9..19eb0be568db6 100644
--- a/packages/react-native-editor/package.json
+++ b/packages/react-native-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.84.0",
+	"version": "1.85.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index 95af2d6d979fb..7c0ae63993c7a 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   Update deprecation message for the `useAnchorRef` hook ([#45195](https://github.com/WordPress/gutenberg/pull/45195)).
+
 ## 5.18.0 (2022-10-19)
 
 ## 5.17.0 (2022-10-05)
diff --git a/packages/rich-text/src/component/use-anchor-ref.js b/packages/rich-text/src/component/use-anchor-ref.js
index a66a7bbbeb2de..b8452b874f440 100644
--- a/packages/rich-text/src/component/use-anchor-ref.js
+++ b/packages/rich-text/src/component/use-anchor-ref.js
@@ -30,7 +30,6 @@ import { getActiveFormat } from '../get-active-format';
 export function useAnchorRef( { ref, value, settings = {} } ) {
 	deprecated( '`useAnchorRef` hook', {
 		since: '6.1',
-		version: '6.3',
 		alternative: '`useAnchor` hook',
 	} );
 
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 54f60131a5526..f5636c150c3ee 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -136,6 +136,17 @@ final class WP_Style_Engine {
 				),
 			),
 		),
+		'dimensions' => array(
+			'minHeight' => array(
+				'property_keys' => array(
+					'default' => 'min-height',
+				),
+				'path'          => array( 'dimensions', 'minHeight' ),
+				'css_vars'      => array(
+					'spacing' => '--wp--preset--spacing--$slug',
+				),
+			),
+		),
 		'spacing'    => array(
 			'padding' => array(
 				'property_keys' => array(
diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts
new file mode 100644
index 0000000000000..df3568f779913
--- /dev/null
+++ b/packages/style-engine/src/styles/dimensions/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const minHeight = {
+	name: 'minHeight',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'dimensions', 'minHeight' ],
+			'minHeight'
+		);
+	},
+};
+
+export default [ minHeight ];
diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts
index f4cb09e18fb7b..5dc1b8743e2ab 100644
--- a/packages/style-engine/src/styles/index.ts
+++ b/packages/style-engine/src/styles/index.ts
@@ -3,6 +3,7 @@
  */
 import border from './border';
 import color from './color';
+import dimensions from './dimensions';
 import shadow from './shadow';
 import outline from './outline';
 import spacing from './spacing';
@@ -11,6 +12,7 @@ import typography from './typography';
 export const styleDefinitions = [
 	...border,
 	...color,
+	...dimensions,
 	...outline,
 	...spacing,
 	...typography,
diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
index cbddab4d5ca8d..a94bd8a425681 100644
--- a/packages/style-engine/src/test/index.js
+++ b/packages/style-engine/src/test/index.js
@@ -54,6 +54,9 @@ describe( 'generate', () => {
 						gradient:
 							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
+					dimensions: {
+						minHeight: '50vh',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: {
@@ -85,7 +88,7 @@ describe( 'generate', () => {
 				}
 			)
 		).toEqual(
-			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
+			".some-selector { color: #cccccc; background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%); background-color: #111111; min-height: 50vh; outline-color: red; outline-style: dashed; outline-offset: 2px; outline-width: 4px; margin-top: 11px; margin-right: 12px; margin-bottom: 13px; margin-left: 14px; padding-top: 10px; padding-bottom: 5px; font-family: 'Helvetica Neue',sans-serif; font-size: 2.2rem; font-style: italic; font-weight: 800; letter-spacing: 12px; line-height: 3.3; text-decoration: line-through; text-transform: uppercase; }"
 		);
 	} );
 
@@ -226,6 +229,9 @@ describe( 'getCSSRules', () => {
 						gradient:
 							'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
 					},
+					dimensions: {
+						minHeight: '50vh',
+					},
 					spacing: {
 						padding: { top: '10px', bottom: '5px' },
 						margin: { right: '2em', left: '1vw' },
@@ -268,6 +274,11 @@ describe( 'getCSSRules', () => {
 				key: 'backgroundColor',
 				value: '#555555',
 			},
+			{
+				selector: '.some-selector',
+				key: 'minHeight',
+				value: '50vh',
+			},
 			{
 				selector: '.some-selector',
 				key: 'outlineColor',
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index a700816f218ce..0063cd56621c6 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -38,6 +38,9 @@ export interface Style {
 		bottom?: BorderIndividualStyles< 'bottom' >;
 		left?: BorderIndividualStyles< 'left' >;
 	};
+	dimensions?: {
+		minHeight?: CSSProperties[ 'minHeight' ];
+	};
 	spacing?: {
 		margin?: CSSProperties[ 'margin' ] | Box< 'margin' >;
 		padding?: CSSProperties[ 'padding' ] | Box< 'padding' >;
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index e6c4364adc2e7..8abd52be4633e 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -113,7 +113,7 @@
 ### Bug fixes
 
 -   The `isValidProtocol` function now correctly considers the protocol of the URL as only incoporating characters up to and including the colon (':').
--   `getFragment` is now greedier and matches fragments from the first occurence of the '#' symbol instead of the last.
+-   `getFragment` is now greedier and matches fragments from the first occurrence of the '#' symbol instead of the last.
 
 ## 2.3.0 (2018-11-12)
 
diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
index 14ce71f3b4ed5..3746d158f2016 100644
--- a/phpunit/class-wp-theme-json-resolver-test.php
+++ b/phpunit/class-wp-theme-json-resolver-test.php
@@ -125,19 +125,6 @@ public function test_translations_are_applied() {
 		);
 	}
 
-	public function test_switching_themes_recalculates_data() {
-		// The "default" theme doesn't have theme.json support.
-		switch_theme( 'default' );
-		$default = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
-
-		// Switch to a theme that does have support.
-		switch_theme( 'block-theme' );
-		$has_theme_json_support = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
-
-		$this->assertFalse( $default );
-		$this->assertTrue( $has_theme_json_support );
-	}
-
 	public function test_add_theme_supports_are_loaded_for_themes_without_theme_json() {
 		switch_theme( 'default' );
 		$color_palette = array(
@@ -165,7 +152,7 @@ public function test_add_theme_supports_are_loaded_for_themes_without_theme_json
 		remove_theme_support( 'custom-line-height' );
 		remove_theme_support( 'editor-color-palette' );
 
-		$this->assertFalse( WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() );
+		$this->assertFalse( wp_theme_has_theme_json() );
 		$this->assertTrue( $settings['typography']['lineHeight'] );
 		$this->assertSame( $color_palette, $settings['color']['palette']['theme'] );
 	}
diff --git a/phpunit/data/themedir1/block-theme-child-no-theme-json/style.css b/phpunit/data/themedir1/block-theme-child-no-theme-json/style.css
new file mode 100644
index 0000000000000..344441288258e
--- /dev/null
+++ b/phpunit/data/themedir1/block-theme-child-no-theme-json/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child with no theme.json
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-no-theme-json
+*/
diff --git a/phpunit/data/themedir1/default-child-no-theme-json/style.css b/phpunit/data/themedir1/default-child-no-theme-json/style.css
new file mode 100644
index 0000000000000..8f971990d9fec
--- /dev/null
+++ b/phpunit/data/themedir1/default-child-no-theme-json/style.css
@@ -0,0 +1,8 @@
+/*
+Theme Name: Default Child Theme with no theme.json
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: default
+Version: 1.0.0
+Text Domain: default-child-no-theme-json
+*/
diff --git a/phpunit/data/themedir1/default/style.css b/phpunit/data/themedir1/default/style.css
new file mode 100644
index 0000000000000..e73392422dd64
--- /dev/null
+++ b/phpunit/data/themedir1/default/style.css
@@ -0,0 +1,13 @@
+/*
+Theme Name: WordPress Default
+Theme URI: http://wordpress.org/
+Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
+Version: 1.6
+Author: Michael Heilemann
+Author URI: http://binarybonsai.com/
+
+This is just a stub to test the loading of the above metadata.
+*/
+
+
+
diff --git a/phpunit/script-loader.php b/phpunit/script-loader-test.php
similarity index 100%
rename from phpunit/script-loader.php
rename to phpunit/script-loader-test.php
diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
index aa3fdb2987152..5f4c57453e8a8 100644
--- a/phpunit/style-engine/style-engine-test.php
+++ b/phpunit/style-engine/style-engine-test.php
@@ -163,6 +163,21 @@ public function data_wp_style_engine_get_styles() {
 				),
 			),
 
+			'inline_valid_dimensions_style'                => array(
+				'block_styles'    => array(
+					'dimensions' => array(
+						'minHeight' => '50vh',
+					),
+				),
+				'options'         => null,
+				'expected_output' => array(
+					'css'          => 'min-height:50vh;',
+					'declarations' => array(
+						'min-height' => '50vh',
+					),
+				),
+			),
+
 			'inline_valid_typography_style'                => array(
 				'block_styles'    => array(
 					'typography' => array(
diff --git a/phpunit/wp-theme-json-test.php b/phpunit/wp-theme-json-test.php
new file mode 100644
index 0000000000000..0d92d33faf88d
--- /dev/null
+++ b/phpunit/wp-theme-json-test.php
@@ -0,0 +1,120 @@
+<?php
+/**
+ * Tests theme.json related public APIs.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Theme_Json_Test extends WP_UnitTestCase {
+
+	public function set_up() {
+		parent::set_up();
+		$this->theme_root = realpath( __DIR__ . '/data/themedir1' );
+
+		$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+
+		// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+		$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+		add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+		add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+		$this->queries = array();
+		// Clear caches.
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+		wp_clean_themes_cache();
+		unset( $GLOBALS['wp_themes'] );
+		parent::tear_down();
+	}
+
+	public function filter_set_theme_root() {
+		return $this->theme_root;
+	}
+
+	/**
+	 * Test that it reports correctly themes that have a theme.json.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_theme_has_theme_json() {
+		switch_theme( 'block-theme' );
+		$this->assertTrue( wp_theme_has_theme_json() );
+	}
+
+	/**
+	 * Test that it reports correctly themes that do not have a theme.json.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_theme_has_no_theme_json() {
+		switch_theme( 'default' );
+		$this->assertFalse( wp_theme_has_theme_json() );
+	}
+
+	/**
+	 * Test it reports correctly child themes that have a theme.json.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_child_theme_has_theme_json() {
+		switch_theme( 'block-theme-child' );
+		$this->assertTrue( wp_theme_has_theme_json() );
+	}
+
+	/**
+	 * Test that it reports correctly child themes that do not have a theme.json
+	 * and the parent does.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_child_theme_has_not_theme_json_but_parent_has() {
+		switch_theme( 'block-theme-child-no-theme-json' );
+		$this->assertTrue( wp_theme_has_theme_json() );
+	}
+
+	/**
+	 * Test that it reports correctly child themes that do not have a theme.json
+	 * and the parent does not either.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_neither_child_or_parent_themes_have_theme_json() {
+		switch_theme( 'default-child-no-theme-json' );
+		$this->assertFalse( wp_theme_has_theme_json() );
+	}
+
+	/**
+	 * Test that switching themes recalculates theme support.
+	 *
+	 * @group theme_json
+	 *
+	 * @covers wp_theme_has_theme_json
+	 */
+	public function test_switching_themes_recalculates_support() {
+		// The "default" theme doesn't have theme.json support.
+		switch_theme( 'default' );
+		$default = wp_theme_has_theme_json();
+
+		// Switch to a theme that does have support.
+		switch_theme( 'block-theme' );
+		$block_theme = wp_theme_has_theme_json();
+
+		$this->assertFalse( $default );
+		$this->assertTrue( $block_theme );
+	}
+}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 807f44a0fa103..58ff918ba3017 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -486,12 +486,12 @@
 													"description": "CSS font-stretch value.",
 													"type": "string"
 												},
-												"ascendOverride": {
-													"description": "CSS ascend-override value.",
+												"ascentOverride": {
+													"description": "CSS ascent-override value.",
 													"type": "string"
 												},
-												"descendOverride": {
-													"description": "CSS descend-override value.",
+												"descentOverride": {
+													"description": "CSS descent-override value.",
 													"type": "string"
 												},
 												"fontVariant": {
@@ -1202,6 +1202,9 @@
 								},
 								":active": {
 									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":visited": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
 								}
 							},
 							"additionalProperties": false
@@ -1228,6 +1231,9 @@
 								},
 								":active": {
 									"$ref": "#/definitions/stylesPropertiesComplete"
+								},
+								":visited": {
+									"$ref": "#/definitions/stylesPropertiesComplete"
 								}
 							},
 							"additionalProperties": false
diff --git a/storybook/decorators/with-max-width-wrapper.js b/storybook/decorators/with-max-width-wrapper.js
new file mode 100644
index 0000000000000..ff979b93f213b
--- /dev/null
+++ b/storybook/decorators/with-max-width-wrapper.js
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * A Storybook decorator to wrap a story in a div applying a max width and
+ * padding. This can be used to simulate real world constraints on components
+ * such as being located within the WordPress editor sidebars.
+ */
+
+const Wrapper = styled.div`
+	max-width: 248px;
+`;
+
+const Indicator = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 32px;
+	background: #e0e0e0;
+	text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 500;
+	color: #757575;
+	margin-top: 24px;
+`;
+
+export const WithMaxWidthWrapper = ( Story, context ) => {
+	if ( context.globals.maxWidthWrapper === 'none' ) {
+		return <Story { ...context } />;
+	}
+
+	return (
+		<Wrapper>
+			<Story { ...context } />
+			<Indicator>Max-Width Wrapper - 248px</Indicator>
+		</Wrapper>
+	);
+};
diff --git a/storybook/preview.js b/storybook/preview.js
index 71d673656505b..16e8f71cf5346 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -3,6 +3,7 @@
  */
 import { WithGlobalCSS } from './decorators/with-global-css';
 import { WithMarginChecker } from './decorators/with-margin-checker';
+import { WithMaxWidthWrapper } from './decorators/with-max-width-wrapper';
 import { WithRTL } from './decorators/with-rtl';
 import { WithTheme } from './decorators/with-theme';
 import './style.scss';
@@ -63,6 +64,18 @@ export const globalTypes = {
 			],
 		},
 	},
+	maxWidthWrapper: {
+		name: 'Max-Width Wrapper',
+		description: 'Wrap the component in a div with a max-width.',
+		defaultValue: 'none',
+		toolbar: {
+			icon: 'outline',
+			items: [
+				{ value: 'none', title: 'None' },
+				{ value: 'wordpress-sidebar', title: 'WP Sidebar' },
+			],
+		},
+	},
 };
 
 export const decorators = [
@@ -70,6 +83,7 @@ export const decorators = [
 	WithGlobalCSS,
 	WithMarginChecker,
 	WithRTL,
+	WithMaxWidthWrapper,
 ];
 
 export const parameters = {
diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.story.mdx
index 55fb09f0a9f85..bdad5c0336ebf 100644
--- a/storybook/stories/docs/introduction.story.mdx
+++ b/storybook/stories/docs/introduction.story.mdx
@@ -4,4 +4,37 @@ import { Meta } from '@storybook/addon-docs';
 
 # Introduction
 
-Hello World
+## Welcome!
+
+The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in the WordPress package [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components).
+
+On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.
+
+The components displayed on this site can be used in your code to build the editor's UI for your custom blocks or other pages.
+Import them from the components root directory like in below example:
+
+```jsx
+import { Button } from '@wordpress/components';
+
+export default function MyButton() {
+    return <Button>Click Me!</Button>;
+}
+````
+
+## How this site works
+
+The site shows the individual components in the sidebar and the Canvas on the right. Select the component you’d like to explore, and you’ll see the display on the Canvas tab. If the component also has controls/arguments, you can modify them on the Controls tab on the lower half of the screen.
+
+To view the documentation for each component use the **Docs** menu item in the top toolbar.
+
+To use it in your local development environment run the following command in the top level Gutenberg directory:
+
+ ```bash
+ npm run storybook:dev
+ ```
+
+## Resources to learn more:
+
+- [Storybook.js.org](https://storybook.js.org/) - Storybook is a frontend workshop for building UI components and pages in isolation.
+- [[Package] Components](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Components%22) - Open Issue Gutenberg Repo
+- [On the known "loading source..." issue](https://github.com/WordPress/gutenberg/issues/45095) at the 'Story' tab for some components
diff --git a/test/e2e/README.md b/test/e2e/README.md
index 56da393ea68fb..c39501e866172 100644
--- a/test/e2e/README.md
+++ b/test/e2e/README.md
@@ -19,6 +19,9 @@ Use the selector engine [role-selector](https://playwright.dev/docs/selectors#ro
 ```js
 // Select a button with the accessible name "Hello World" (case-insensitive).
 page.locator( 'role=button[name="Hello World"i]' );
+
+// Using short-form API, the `name` is case-insensitive by default.
+page.getByRole( 'button', { name: 'Hello World' } );
 ```
 
 It's recommended to append `i` to the name attribute to match it case-insensitively wherever it makes sense. It can also be chained with built-in selector engines to perform complex queries:
@@ -58,6 +61,26 @@ Previously in our Jest + Puppeteer E2E tests, `page` and `browser` are exposed a
 
 We can insert as many assertions in one test as needed. It's better to make explicit assertions whenever possible. For instance, if we want to assert that a button exists before clicking on it, we can do `expect( locator ).toBeVisible()` before performing `locator.click()`. This makes the tests flow better and easier to read.
 
+## Cross-browser testing
+
+By default, tests are only run in chromium. You can _tag_ tests to run them in different browsers. Use `@browser` anywhere in the test title to run it in that browser. Tests will always run in chromium by default, append `-chromium` to disable testing in chromium. Available browsers are `chromium`, `firefox`, and `webkit`.
+
+```js
+test( 'I will run in @firefox and @webkit (and chromium by default)', async ( { page } ) => {
+	// ...
+} );
+
+test( 'I will only run in @firefox but not -chromium', async ( { page } ) => {
+	// ...
+} );
+
+test.describe( 'Grouping tests (@webkit, -chromium)', () => {
+	test( 'I will only run in webkit', async ( { page } ) => {
+		// ...
+	} );
+} );
+```
+
 ## Commands
 
 ```bash
@@ -67,13 +90,26 @@ npm run test:e2e:playwright
 # Run in headed mode.
 npm run test:e2e:playwright -- --headed
 
+# Run tests with specific browsers (`chromium`, `firefox`, or `webkit`).
+npm run test:e2e:playwright -- --project=webkit --project=firefox
+
 # Run a single test file.
 npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
 
-# Debugging
+# Debugging.
 npm run test:e2e:playwright -- --debug
 ```
 
+If you're developing in Linux, it currently requires testing Webkit browsers in headed mode. If you don't want to or can't run it with the GUI (e.g. if you don't have a graphic interface), prepend the command with [`xvfb-run`](https://manpages.ubuntu.com/manpages/xenial/man1/xvfb-run.1.html) to run it in a virtual environment.
+
+```bash
+# Run all available tests.
+xvfb-run npm run test:e2e:playwright
+
+# Only run webkit tests.
+xvfb-run -- npm run test:e2e:playwright -- --project=webkit
+```
+
 **Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
index 01f311d831fca..8796de6fdb28b 100644
--- a/test/e2e/playwright.config.ts
+++ b/test/e2e/playwright.config.ts
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import os from 'os';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { devices } from '@playwright/test';
@@ -54,6 +55,30 @@ const config: PlaywrightTestConfig = {
 		{
 			name: 'chromium',
 			use: { ...devices[ 'Desktop Chrome' ] },
+			grepInvert: /-chromium/,
+		},
+		{
+			name: 'webkit',
+			use: {
+				...devices[ 'Desktop Safari' ],
+				/**
+				 * Headless webkit won't receive dataTransfer with custom types in the
+				 * drop event on Linux. The solution is to use `xvfb-run` to run the tests.
+				 * ```sh
+				 * xvfb-run npm run test:e2e:playwright
+				 * ```
+				 * See `.github/workflows/end2end-test-playwright.yml` for advanced usages.
+				 */
+				headless: os.type() !== 'Linux',
+			},
+			grep: /@webkit/,
+			grepInvert: /-webkit/,
+		},
+		{
+			name: 'firefox',
+			use: { ...devices[ 'Desktop Firefox' ] },
+			grep: /@firefox/,
+			grepInvert: /-firefox/,
 		},
 	],
 };
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
new file mode 100644
index 0000000000000..fce8991892e14
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Columns', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'restricts all blocks inside the columns block', async ( {
+		page,
+		editor,
+	} ) => {
+		// Open Columns
+		await editor.insertBlock( { name: 'core/columns' } );
+		await page.locator( '[aria-label="Two columns; equal split"]' ).click();
+
+		// Open List view toggle
+		await page.locator( 'role=button[name="List View"i]' ).click();
+
+		// block column add
+		await page
+			.locator(
+				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column link"i]'
+			)
+			.first()
+			.click();
+
+		// Toggle Block inserter
+		await page
+			.locator( 'role=button[name="Toggle block inserter"i]' )
+			.click();
+
+		// Verify Column
+		const inserterOptions = page.locator(
+			'role=region[name="Block Library"i] >> role=option'
+		);
+		await expect( inserterOptions ).toHaveCount( 1 );
+		await expect( inserterOptions ).toHaveText( 'Column' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/gallery.spec.js b/test/e2e/specs/editor/blocks/gallery.spec.js
index 3ecae5751681f..936942c9688fa 100644
--- a/test/e2e/specs/editor/blocks/gallery.spec.js
+++ b/test/e2e/specs/editor/blocks/gallery.spec.js
@@ -2,12 +2,21 @@
  * External dependencies
  */
 const path = require( 'path' );
+const fs = require( 'fs/promises' );
+const os = require( 'os' );
+const { v4: uuid } = require( 'uuid' );
 
 /**
  * WordPress dependencies
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
+test.use( {
+	galleryBlockUtils: async ( { page }, use ) => {
+		await use( new GalleryBlockUtils( { page } ) );
+	},
+} );
+
 test.describe( 'Gallery', () => {
 	let uploadedMedia;
 
@@ -74,4 +83,163 @@ test.describe( 'Gallery', () => {
 			.poll( editor.getEditedPostContent )
 			.toBe( editedPostContent );
 	} );
+
+	test( 'can be created using uploaded images', async ( {
+		admin,
+		editor,
+		page,
+		galleryBlockUtils,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/gallery' } );
+		const galleryBlock = page.locator(
+			'role=document[name="Block: Gallery"i]'
+		);
+		await expect( galleryBlock ).toBeVisible();
+
+		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 ) );
+
+		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 -->`
+		);
+		await expect.poll( editor.getEditedPostContent ).toMatch( regex );
+	} );
+
+	test( 'gallery caption can be edited', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		const galleryCaption = 'Tested gallery caption';
+
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'core/gallery',
+			innerBlocks: [
+				{
+					name: 'core/image',
+					attributes: {
+						id: uploadedMedia.id,
+						url: uploadedMedia.source_url,
+					},
+				},
+			],
+		} );
+
+		const gallery = page.locator( 'role=document[name="Block: Gallery"i]' );
+
+		await expect( gallery ).toBeVisible();
+		await editor.selectBlocks( gallery );
+
+		const caption = gallery.locator(
+			'role=textbox[name="Gallery caption text"i]'
+		);
+		await expect( caption ).toBeVisible();
+		await caption.click();
+
+		await page.keyboard.type( galleryCaption );
+
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toMatch(
+				new RegExp( `<figcaption.*?>${ galleryCaption }</figcaption>` )
+			);
+	} );
+
+	test( "uploaded images' captions can be edited", async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		const caption = 'Tested caption';
+
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'core/gallery',
+			innerBlocks: [
+				{
+					name: 'core/image',
+					attributes: {
+						id: uploadedMedia.id,
+						url: uploadedMedia.source_url,
+					},
+				},
+			],
+		} );
+
+		const galleryImage = page.locator(
+			'role=document[name="Block: Gallery"i] >> role=document[name="Block: Image"i]'
+		);
+		const imageCaption = galleryImage.locator(
+			'role=textbox[name="Image caption text"i]'
+		);
+		await expect( galleryImage ).toBeVisible();
+
+		await galleryImage.click();
+		await editor.clickBlockToolbarButton( 'Add caption' );
+
+		await expect( imageCaption ).toBeVisible();
+		await imageCaption.click();
+
+		await page.keyboard.type( caption );
+
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toMatch(
+				new RegExp( `<figcaption.*?>${ caption }</figcaption>` )
+			);
+	} );
+
+	test( 'when initially added the media library shows the Create Gallery view', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( { name: 'core/gallery' } );
+		await page.click( 'role=button[name="Media Library"i]' );
+
+		const mediaLibrary = page.locator(
+			'role=dialog[name="Create gallery"i]'
+		);
+
+		await expect( mediaLibrary ).toBeVisible();
+		await expect(
+			mediaLibrary.locator( 'role=button[name="Create a new gallery"i]' )
+		).toBeVisible();
+	} );
 } );
+
+class GalleryBlockUtils {
+	constructor( { page } ) {
+		this.page = page;
+
+		this.TEST_IMAGE_FILE_PATH = path.join(
+			__dirname,
+			'..',
+			'..',
+			'..',
+			'assets',
+			'10x10_e2e_test_image_z9T8jK.png'
+		);
+	}
+
+	async upload( inputElement ) {
+		const tmpDirectory = await fs.mkdtemp(
+			path.join( os.tmpdir(), 'gutenberg-test-image-' )
+		);
+		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;
+	}
+}
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 0413aa3e33e01..209511d2d1cfa 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -157,7 +157,7 @@ test.describe( 'Image', () => {
 			imageBlock.locator( 'data-testid=form-file-upload-input' )
 		);
 		await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) );
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Backspace' );
@@ -186,7 +186,7 @@ test.describe( 'Image', () => {
 
 		await expect( image ).toBeVisible();
 		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await page.keyboard.type( '12' );
 		await page.keyboard.press( 'ArrowLeft' );
 		await page.keyboard.press( 'Enter' );
@@ -217,7 +217,7 @@ test.describe( 'Image', () => {
 		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
 		// Add caption and navigate to inline toolbar.
-		await editor.clickBlockToolbarButton( 'Caption' );
+		await editor.clickBlockToolbarButton( 'Add caption' );
 		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
 		await expect(
 			await page.evaluate( () =>
diff --git a/test/e2e/specs/editor/plugins/__snapshots__/templates-Using-a-CPT-with-a-predefined-templa-7538a--custom-post-types-with-a-predefined-template-1-chromium.txt b/test/e2e/specs/editor/plugins/__snapshots__/templates-Using-a-CPT-with-a-predefined-templa-7538a--custom-post-types-with-a-predefined-template-1-chromium.txt
new file mode 100644
index 0000000000000..30e178aef1dd8
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/__snapshots__/templates-Using-a-CPT-with-a-predefined-templa-7538a--custom-post-types-with-a-predefined-template-1-chromium.txt
@@ -0,0 +1,27 @@
+<!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph {"placeholder":"Add a book description"} -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph {"placeholder":"Add a inner paragraph"} -->
+<p></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/plugins/templates.spec.js b/test/e2e/specs/editor/plugins/templates.spec.js
new file mode 100644
index 0000000000000..bab5cdd739baf
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/templates.spec.js
@@ -0,0 +1,154 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'templates', () => {
+	test.describe( 'Using a CPT with a predefined template', () => {
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-plugin-templates'
+			);
+		} );
+
+		test.beforeEach( async ( { admin } ) => {
+			await admin.createNewPost( { postType: 'book' } );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-plugin-templates'
+			);
+		} );
+
+		test( 'Should add a custom post types with a predefined template', async ( {
+			editor,
+		} ) => {
+			expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+		} );
+
+		test( 'Should respect user edits to not re-apply template after save (single block removal)', async ( {
+			page,
+			editor,
+		} ) => {
+			const beforeContent = await editor.getEditedPostContent();
+
+			// Remove a block from the template to verify that it's not
+			// re-added after saving and reloading the editor.
+			await page.focus( 'role=textbox[name="Add title"i]' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'Backspace' );
+			await page.click( 'role=button[name="Save draft"i]' );
+			await expect(
+				page.locator(
+					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
+				)
+			).toBeVisible();
+			await page.reload();
+
+			const expectedContent = await page.evaluate( ( content ) => {
+				const blocks = window.wp.blocks.parse( content );
+				blocks.splice( 0, 1 );
+				return window.wp.blocks.serialize( blocks );
+			}, beforeContent );
+
+			await expect
+				.poll( editor.getEditedPostContent )
+				.toBe( expectedContent );
+		} );
+
+		test( 'Should respect user edits to not re-apply template after save (full delete)', async ( {
+			page,
+			pageUtils,
+			editor,
+		} ) => {
+			// Remove all blocks from the template to verify that they're not
+			// re-added after saving and reloading the editor.
+			await page.fill(
+				'role=textbox[name="Add title"i]',
+				'My Empty Book'
+			);
+			await page.keyboard.press( 'ArrowDown' );
+			await pageUtils.pressKeyWithModifier( 'primary', 'A' );
+			await page.keyboard.press( 'Backspace' );
+			await page.click( 'role=button[name="Save draft"i]' );
+			await expect(
+				page.locator(
+					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
+				)
+			).toBeVisible();
+			await page.reload();
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+	} );
+
+	test.describe( 'With default post format assigned', () => {
+		const STANDARD_FORMAT_VALUE = '0';
+
+		test.beforeAll( async ( { requestUtils } ) => {
+			await requestUtils.activatePlugin(
+				'gutenberg-test-plugin-post-formats-support'
+			);
+			await requestUtils.updateSiteSettings( {
+				default_post_format: 'image',
+			} );
+		} );
+
+		test.afterAll( async ( { requestUtils } ) => {
+			await requestUtils.updateSiteSettings( {
+				default_post_format: STANDARD_FORMAT_VALUE,
+			} );
+			await requestUtils.deactivatePlugin(
+				'gutenberg-test-plugin-post-formats-support'
+			);
+		} );
+
+		test( 'should populate new post with default block for format', async ( {
+			admin,
+			editor,
+		} ) => {
+			await admin.createNewPost();
+
+			await expect.poll( editor.getEditedPostContent )
+				.toBe( `<!-- wp:image -->
+<figure class="wp-block-image"><img alt=""/></figure>
+<!-- /wp:image -->` );
+		} );
+
+		test( 'should not populate edited post with default block for format', async ( {
+			admin,
+			page,
+			editor,
+		} ) => {
+			await admin.createNewPost();
+
+			// Remove the default block template to verify that it's not
+			// re-added after saving and reloading the editor.
+			await page.fill(
+				'role=textbox[name="Add title"i]',
+				'My Image Format'
+			);
+			await page.focus( 'role=document[name="Block: Image"i]' );
+			await page.keyboard.press( 'Backspace' );
+			await page.click( 'role=button[name="Save draft"i]' );
+			await expect(
+				page.locator(
+					'role=button[name="Dismiss this notice"i] >> text=Draft saved'
+				)
+			).toBeVisible();
+			await page.reload();
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+
+		test( 'should not populate new page with default block for format', async ( {
+			admin,
+			editor,
+		} ) => {
+			await admin.createNewPost( { postType: 'page' } );
+
+			await expect.poll( editor.getEditedPostContent ).toBe( '' );
+		} );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
new file mode 100644
index 0000000000000..d5575ed006e9f
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt
@@ -0,0 +1,11 @@
+<!-- wp:paragraph -->
+<p>Dummy text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"url":"#","service":"chain"} /-->
+
+<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
+<!-- /wp:social-links -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
new file mode 100644
index 0000000000000..d5575ed006e9f
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt
@@ -0,0 +1,11 @@
+<!-- wp:paragraph -->
+<p>Dummy text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
+
+<!-- wp:social-link {"url":"#","service":"chain"} /-->
+
+<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>
+<!-- /wp:social-links -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt
new file mode 100644
index 0000000000000..e6b19a3a16b45
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-split-and-merge-paragraph-blocks-using-Enter-and-Backspace-1-chromium.txt
@@ -0,0 +1,7 @@
+<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt
new file mode 100644
index 0000000000000..2c788e94846ab
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-should-undo-split-in-one-go-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>12</p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt
new file mode 100644
index 0000000000000..cb5b5fcf148b3
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:paragraph -->
+<p>hi-</p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt
new file mode 100644
index 0000000000000..33adf8bef295a
--- /dev/null
+++ b/test/e2e/specs/editor/various/__snapshots__/splitting-and-merging-blocks-test-restore-sele-92273-rge-produces-more-than-one-block-on-backspace-1-chromium.txt
@@ -0,0 +1,11 @@
+<!-- wp:paragraph -->
+<p>hi</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>-item 1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>item 2</p>
+<!-- /wp:paragraph -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
new file mode 100644
index 0000000000000..0ea1908cd90ef
--- /dev/null
+++ b/test/e2e/specs/editor/various/compatibility-classic-editor.spec.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Compatibility with classic editor', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'Should not apply auto when rendering blocks', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'core/html' } );
+		await page.focus( 'role=textbox[name="HTML"i]' );
+		await page.keyboard.type( '<a>' );
+		await page.keyboard.type( 'Random Link' );
+		await page.keyboard.type( '</a> ' );
+		// Publish Post
+		await editor.publishPost();
+		// View Post
+		await page.click(
+			'role=region[name="Editor publish"i] >> role=link[name="View post"i]'
+		);
+
+		// Check the content doesn't contain <p> tags.
+		// No accessible selector for now.
+		const content = page.locator( '.entry-content' );
+		await expect
+			.poll( () => content.innerHTML() )
+			.toContain( `<a>Random Link</a>` );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/fullscreen-mode.spec.js b/test/e2e/specs/editor/various/fullscreen-mode.spec.js
new file mode 100644
index 0000000000000..8b7a0785a7ed6
--- /dev/null
+++ b/test/e2e/specs/editor/various/fullscreen-mode.spec.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Fullscreen Mode', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'should open the fullscreen mode from the more menu', async ( {
+		page,
+	} ) => {
+		// Open Options Menu
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+		);
+
+		// Select Full Screen Mode
+		await page
+			.locator( 'role=menuitemcheckbox', { hasText: 'Fullscreen mode' } )
+			.click();
+
+		// Check the body class.
+		await expect( page.locator( 'body' ) ).toHaveClass(
+			/is-fullscreen-mode/
+		);
+
+		await expect(
+			page.locator(
+				'role=region[name="Editor top bar"i] >> role=link[name="View Posts"i]'
+			)
+		).toBeVisible();
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
new file mode 100644
index 0000000000000..cc75245d48bac
--- /dev/null
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -0,0 +1,301 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	insertingBlocksUtils: async ( { page, editor }, use ) => {
+		await use( new InsertingBlocksUtils( { page, editor } ) );
+	},
+} );
+
+test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'inserts blocks by dragging and dropping from the global inserter', async ( {
+		page,
+		editor,
+		insertingBlocksUtils,
+	}, testInfo ) => {
+		testInfo.fixme(
+			testInfo.project.name === 'firefox',
+			'The clientX value is always 0 in firefox, see https://github.com/microsoft/playwright/issues/17761 for more info.'
+		);
+
+		// We need a dummy block in place to display the drop indicator due to a bug.
+		// @see https://github.com/WordPress/gutenberg/issues/44064
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+		const paragraphBlock = page.locator(
+			'[data-type="core/paragraph"] >> text=Dummy text'
+		);
+
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+		);
+
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'Heading'
+		);
+
+		await page.hover(
+			'role=listbox[name="Blocks"i] >> role=option[name="Heading"i]'
+		);
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+		// Expect the indicator to be below the paragraph block.
+		await expect
+			.poll( () =>
+				insertingBlocksUtils.indicator
+					.boundingBox()
+					.then( ( { y } ) => y )
+			)
+			.toBeGreaterThan( paragraphBoundingBox.y );
+
+		await page.mouse.down();
+		// Call the move function twice to make sure the `dragOver` event is sent.
+		// @see https://github.com/microsoft/playwright/issues/17153
+		for ( let i = 0; i < 2; i += 1 ) {
+			await page.mouse.move(
+				// Hover on the right side of the block to avoid collapsing with the preview.
+				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
+				// Hover on the bottom of the paragraph block.
+				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
+			);
+		}
+		// Expect the indicator to be below the paragraph block.
+		await expect
+			.poll( () =>
+				insertingBlocksUtils.indicator
+					.boundingBox()
+					.then( ( { y } ) => y )
+			)
+			.toBeGreaterThan( paragraphBoundingBox.y );
+
+		// Expect the draggable-chip to appear.
+		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
+
+		await page.mouse.up();
+
+		await expect.poll( editor.getEditedPostContent )
+			.toBe( `<!-- wp:paragraph -->
+<p>Dummy text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2></h2>
+<!-- /wp:heading -->` );
+	} );
+
+	test( 'cancels dragging blocks from the global inserter by pressing Escape', async ( {
+		page,
+		editor,
+		insertingBlocksUtils,
+	} ) => {
+		// We need a dummy block in place to display the drop indicator due to a bug.
+		// @see https://github.com/WordPress/gutenberg/issues/44064
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+
+		const beforeContent = await editor.getEditedPostContent();
+
+		const paragraphBlock = page.locator(
+			'[data-type="core/paragraph"] >> text=Dummy text'
+		);
+
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+		);
+
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			'Heading'
+		);
+
+		await page.hover(
+			'role=listbox[name="Blocks"i] >> role=option[name="Heading"i]'
+		);
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+
+		await page.mouse.down();
+		// Call the move function twice to make sure the `dragOver` event is sent.
+		// @see https://github.com/microsoft/playwright/issues/17153
+		for ( let i = 0; i < 2; i += 1 ) {
+			await page.mouse.move(
+				// Hover on the right side of the block to avoid collapsing with the preview.
+				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
+				// Hover on the bottom of the paragraph block.
+				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
+			);
+		}
+
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
+
+		await page.keyboard.press( 'Escape' );
+
+		await expect( insertingBlocksUtils.indicator ).not.toBeVisible();
+		await expect( insertingBlocksUtils.draggableChip ).not.toBeVisible();
+
+		await page.mouse.up();
+
+		await expect.poll( editor.getEditedPostContent ).toBe( beforeContent );
+	} );
+
+	test( 'inserts patterns by dragging and dropping from the global inserter', async ( {
+		page,
+		editor,
+		insertingBlocksUtils,
+	}, testInfo ) => {
+		testInfo.fixme(
+			testInfo.project.name === 'firefox',
+			'The clientX value is always 0 in firefox, see https://github.com/microsoft/playwright/issues/17761 for more info.'
+		);
+
+		// We need a dummy block in place to display the drop indicator due to a bug.
+		// @see https://github.com/WordPress/gutenberg/issues/44064
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+
+		const paragraphBlock = page.locator(
+			'[data-type="core/paragraph"] >> text=Dummy text'
+		);
+
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+		);
+
+		const PATTERN_NAME = 'Social links with a shared background color';
+
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			PATTERN_NAME
+		);
+
+		await page.hover(
+			`role=listbox[name="Block Patterns"i] >> role=option[name="${ PATTERN_NAME }"i]`
+		);
+
+		// FIXME: I think we should show the indicator when hovering on patterns as well?
+		// @see https://github.com/WordPress/gutenberg/issues/45183
+		// await expect( insertingBlocksUtils.indicator ).toBeVisible();
+
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+
+		await page.mouse.down();
+		// Call the move function twice to make sure the `dragOver` event is sent.
+		// @see https://github.com/microsoft/playwright/issues/17153
+		for ( let i = 0; i < 2; i += 1 ) {
+			await page.mouse.move(
+				// Hover on the right side of the block to avoid collapsing with the preview.
+				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
+				// Hover on the bottom of the paragraph block.
+				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
+			);
+		}
+
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+		// Expect the indicator to be below the paragraph block.
+		await expect
+			.poll( () =>
+				insertingBlocksUtils.indicator
+					.boundingBox()
+					.then( ( { y } ) => y )
+			)
+			.toBeGreaterThan( paragraphBoundingBox.y );
+
+		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
+
+		await page.mouse.up();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'cancels dragging patterns from the global inserter by pressing Escape', async ( {
+		page,
+		editor,
+		insertingBlocksUtils,
+	} ) => {
+		// We need a dummy block in place to display the drop indicator due to a bug.
+		// @see https://github.com/WordPress/gutenberg/issues/44064
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+
+		const beforeContent = await editor.getEditedPostContent();
+
+		const paragraphBlock = page.locator(
+			'[data-type="core/paragraph"] >> text=Dummy text'
+		);
+
+		await page.click(
+			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+		);
+
+		const PATTERN_NAME = 'Social links with a shared background color';
+
+		await page.fill(
+			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
+			PATTERN_NAME
+		);
+
+		await page.hover(
+			`role=listbox[name="Block Patterns"i] >> role=option[name="${ PATTERN_NAME }"i]`
+		);
+
+		const paragraphBoundingBox = await paragraphBlock.boundingBox();
+
+		await page.mouse.down();
+		// Call the move function twice to make sure the `dragOver` event is sent.
+		// @see https://github.com/microsoft/playwright/issues/17153
+		for ( let i = 0; i < 2; i += 1 ) {
+			await page.mouse.move(
+				// Hover on the right side of the block to avoid collapsing with the preview.
+				paragraphBoundingBox.x + paragraphBoundingBox.width - 1,
+				// Hover on the bottom of the paragraph block.
+				paragraphBoundingBox.y + paragraphBoundingBox.height - 1
+			);
+		}
+
+		await expect( insertingBlocksUtils.indicator ).toBeVisible();
+		await expect( insertingBlocksUtils.draggableChip ).toBeVisible();
+
+		await page.keyboard.press( 'Escape' );
+
+		await expect( insertingBlocksUtils.indicator ).not.toBeVisible();
+		await expect( insertingBlocksUtils.draggableChip ).not.toBeVisible();
+
+		await page.mouse.up();
+
+		await expect.poll( editor.getEditedPostContent ).toBe( beforeContent );
+	} );
+} );
+
+class InsertingBlocksUtils {
+	constructor( { page, editor } ) {
+		this.page = page;
+		this.editor = editor;
+
+		this.indicator = this.page.locator(
+			'data-testid=block-list-insertion-point-indicator'
+		);
+		this.draggableChip = this.page.locator(
+			'data-testid=block-draggable-chip >> visible=true'
+		);
+	}
+}
diff --git a/test/e2e/specs/editor/various/new-post-default-content.spec.js b/test/e2e/specs/editor/various/new-post-default-content.spec.js
new file mode 100644
index 0000000000000..82c8e3a948f31
--- /dev/null
+++ b/test/e2e/specs/editor/various/new-post-default-content.spec.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'new editor filtered state', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-default-post-content'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-default-post-content'
+		);
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'should respect default content', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+		await page.click( 'role=button[name="Excerpt"i]' );
+
+		// Assert they match what the plugin set.
+		await expect(
+			page.locator( 'role=textbox[name="Add title"i]' )
+		).toHaveText( 'My default title' );
+		await expect
+			.poll( editor.getEditedPostContent )
+			.toBe( 'My default content' );
+		await expect(
+			page.locator( 'role=textbox[name="Write an excerpt (optional)"i]' )
+		).toHaveText( 'My default excerpt' );
+	} );
+} );
diff --git a/test/e2e/specs/editor/various/splitting-merging.spec.js b/test/e2e/specs/editor/various/splitting-merging.spec.js
new file mode 100644
index 0000000000000..45f4d9347edcc
--- /dev/null
+++ b/test/e2e/specs/editor/various/splitting-merging.spec.js
@@ -0,0 +1,407 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'splitting and merging blocks', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'should split and merge paragraph blocks using Enter and Backspace', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Use regular inserter to add paragraph block and text.
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'FirstSecond' );
+
+		// Move caret between 'First' and 'Second' and press Enter to split
+		// paragraph blocks.
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+		await page.keyboard.press( 'Enter' );
+
+		// Assert that there are now two paragraph blocks with correct content.
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->`
+		);
+
+		// Press Backspace to merge paragraph blocks.
+		await page.keyboard.press( 'Backspace' );
+
+		// Ensure that caret position is correctly placed at the between point.
+		await page.keyboard.type( 'Between' );
+		// Check the content.
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->`
+		);
+
+		await pageUtils.pressKeyTimes( 'Backspace', 7 ); // Delete "Between"
+
+		// Edge case: Without ensuring that the editor still has focus when
+		// restoring a bookmark, the caret may be inadvertently moved back to
+		// an inline boundary after a split occurs.
+		await page.keyboard.press( 'Home' );
+		await page.keyboard.down( 'Shift' );
+		await pageUtils.pressKeyTimes( 'ArrowRight', 5 );
+		await page.keyboard.up( 'Shift' );
+		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		// Collapse selection, still within inline boundary.
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'BeforeSecond:' );
+
+		// Check the content.
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should merge into inline boundary position', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Regression Test: Caret should reset to end of inline boundary when
+		// backspacing to delete second paragraph.
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( 'Foo' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Backspace' );
+
+		// Replace contents of first paragraph with "Bar".
+		await pageUtils.pressKeyTimes( 'Backspace', 4 );
+		await page.keyboard.type( 'Bar' );
+
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>Bar</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should delete an empty first line', async ( { editor, page } ) => {
+		// Regression Test: When a paragraph block has line break, and the first
+		// line has no text, pressing backspace at the start of the second line
+		// should remove the first.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/8388
+
+		// First paragraph.
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'First' );
+		await page.keyboard.press( 'Enter' );
+
+		// Second paragraph.
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.up( 'Shift' );
+
+		// Delete the soft line break.
+		await page.keyboard.press( 'Backspace' );
+
+		// Typing at this point should occur still within the second paragraph,
+		// while before the regression fix it would have occurred in the first.
+		await page.keyboard.type( 'Still Second' );
+
+		// Check the content.
+
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Still Second</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should not merge paragraphs if the selection is not collapsed', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Regression Test: When all of a paragraph is selected, pressing
+		// backspace should delete the contents, not merge to previous.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/8268
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Foo' );
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Bar' );
+
+		// Select text.
+		await page.keyboard.down( 'Shift' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 3 );
+		await page.keyboard.up( 'Shift' );
+
+		// Delete selection.
+		await page.keyboard.press( 'Backspace' );
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>Foo</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should gracefully handle if placing caret in empty container', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Regression Test: placeCaretAtHorizontalEdge previously did not
+		// account for contentEditables which have no children.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/8676
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'Foo' );
+
+		// The regression appeared to only affect paragraphs created while
+		// within an inline boundary.
+		await page.keyboard.down( 'Shift' );
+		await pageUtils.pressKeyTimes( 'ArrowLeft', 3 );
+		await page.keyboard.up( 'Shift' );
+		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+
+		await page.keyboard.press( 'Backspace' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p><strong>Foo</strong></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should forward delete from an empty paragraph', async ( {
+		editor,
+		page,
+	} ) => {
+		// Regression test: Bogus nodes in a RichText container can interfere
+		// with isHorizontalEdge detection, preventing forward deletion.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/8731
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Delete' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should remove empty paragraph block on backspace', async ( {
+		editor,
+		page,
+	} ) => {
+		// Regression Test: In a sole empty paragraph, pressing backspace
+		// should remove the block.
+		//
+		// See: https://github.com/WordPress/gutenberg/pull/8306
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.press( 'Backspace' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe( `` );
+	} );
+
+	test( 'should remove at most one paragraph in forward direction', async ( {
+		editor,
+		page,
+	} ) => {
+		// Regression Test: A forward delete on empty RichText previously would
+		// destroy two paragraphs on the dual-action of merge & remove.
+		//
+		// See: https://github.com/WordPress/gutenberg/pull/8735
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'First' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Second' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'Delete' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>First</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Second</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test( 'should ensure always a default block', async ( {
+		editor,
+		page,
+	} ) => {
+		// Feature: To avoid focus loss, removal of all blocks will result in a
+		// default block insertion at the root. Pressing backspace in a new
+		// paragraph should not effectively allow removal. This is counteracted
+		// with pre-save content processing to save post consisting of only the
+		// unmodified default block as an empty string.
+		//
+		// See: https://github.com/WordPress/gutenberg/issues/9626
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.press( 'Backspace' );
+
+		// There is a default block and post title:
+		await expect(
+			page.locator( 'role=document[name=/Empty block/i]' )
+		).toBeVisible();
+
+		await expect(
+			page.locator( 'role=textbox[name="Add title"i]' )
+		).toBeVisible();
+
+		// But the effective saved content is still empty:
+		expect( await editor.getEditedPostContent() ).toBe( '' );
+
+		// And focus is retained:
+		await expect(
+			page.locator( 'role=document[name=/Empty block/i]' )
+		).toBeFocused();
+	} );
+
+	test( 'should undo split in one go', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '12' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Enter' );
+		await pageUtils.pressKeyWithModifier( 'primary', 'z' );
+
+		// Check the content.
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should not split with line break in front', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await pageUtils.pressKeyWithModifier( 'shift', 'Enter' );
+		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'Backspace' );
+
+		// Check the content.
+		const content = await editor.getEditedPostContent();
+		expect( content ).toBe(
+			`<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->`
+		);
+	} );
+
+	test.describe(
+		'test restore selection when merge produces more than one block',
+		() => {
+			test( 'on forward delete', async ( {
+				editor,
+				page,
+				pageUtils,
+			} ) => {
+				await editor.insertBlock( { name: 'core/paragraph' } );
+				await page.keyboard.type( 'hi' );
+				await editor.insertBlock( { name: 'core/list' } );
+				await page.keyboard.type( 'item 1' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( 'item 2' );
+				await pageUtils.pressKeyTimes( 'ArrowUp', 2 );
+				await page.keyboard.press( 'Delete' );
+				// Carret should be in the first block and at the proper position.
+				await page.keyboard.type( '-' );
+
+				// Check the content.
+				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+			} );
+
+			test( 'on backspace', async ( { editor, page, pageUtils } ) => {
+				await editor.insertBlock( { name: 'core/paragraph' } );
+				await page.keyboard.type( 'hi' );
+				await editor.insertBlock( { name: 'core/list' } );
+				await page.keyboard.type( 'item 1' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( 'item 2' );
+				await page.keyboard.press( 'ArrowUp' );
+				await pageUtils.pressKeyTimes( 'ArrowLeft', 6 );
+				await page.keyboard.press( 'Backspace' );
+				// Carret should be in the first block and at the proper position.
+				await page.keyboard.type( '-' );
+
+				// Check the content.
+				expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+			} );
+		}
+	);
+} );
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index 05bca4285eb41..64f28c4f5a093 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -14,6 +14,10 @@ test.describe( 'Writing Flow', () => {
 		await admin.createNewPost();
 	} );
 
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
 	test( 'Should navigate inner blocks with arrow keys', async ( {
 		editor,
 		page,
diff --git a/test/e2e/specs/site-editor/iframe-rendering.spec.js b/test/e2e/specs/site-editor/iframe-rendering.spec.js
new file mode 100644
index 0000000000000..02389cc936f06
--- /dev/null
+++ b/test/e2e/specs/site-editor/iframe-rendering.spec.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site editor iframe rendering mode', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test( 'Should render editor in standards mode.', async ( {
+		admin,
+		page,
+	} ) => {
+		await admin.visitSiteEditor( {
+			postId: 'emptytheme//index',
+			postType: 'wp_template',
+		} );
+
+		const compatMode = await page
+			.locator( 'iframe[name="editor-canvas"]' )
+			.evaluate( ( iframe ) => iframe.contentDocument.compatMode );
+
+		// CSS1Compat = expected standards mode.
+		// BackCompat = quirks mode.
+		expect( compatMode ).toBe( 'CSS1Compat' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
new file mode 100644
index 0000000000000..d079176bace94
--- /dev/null
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Site Editor Inserter', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor();
+	} );
+
+	test( 'inserter toggle button should toggle global inserter', async ( {
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Toggle block inserter"i]' );
+
+		// Visibility check
+		await expect(
+			page.locator(
+				'role=searchbox[name="Search for blocks and patterns"i]'
+			)
+		).toBeVisible();
+		await page.click( 'role=button[name="Toggle block inserter"i]' );
+		//Hidden State check
+		await expect(
+			page.locator(
+				'role=searchbox[name="Search for blocks and patterns"i]'
+			)
+		).toBeHidden();
+	} );
+} );
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
index 4a5d7bd584c85..36280716ebc00 100644
--- a/test/integration/blocks-raw-handling.test.js
+++ b/test/integration/blocks-raw-handling.test.js
@@ -192,6 +192,31 @@ describe( 'Blocks raw handling', () => {
 		expect( console ).toHaveLogged();
 	} );
 
+	it( 'should parse bulleted list', () => {
+		const filtered = pasteHandler( {
+			HTML: '• one<br>• two<br>• three',
+			plainText: '• one\n• two\n• three',
+			mode: 'AUTO',
+		} )
+			.map( getBlockContent )
+			.join( '' );
+
+		expect( filtered ).toMatchInlineSnapshot( `
+		"<ul><!-- wp:list-item -->
+		<li>one</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>two</li>
+		<!-- /wp:list-item -->
+
+		<!-- wp:list-item -->
+		<li>three</li>
+		<!-- /wp:list-item --></ul>"
+	` );
+		expect( console ).toHaveLogged();
+	} );
+
 	it( 'should parse inline Markdown', () => {
 		const filtered = pasteHandler( {
 			HTML: 'Some **bold** text.',
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.html b/test/integration/fixtures/blocks/core__embed__deprecated-1.html
new file mode 100644
index 0000000000000..3996ecd6425b1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.html
@@ -0,0 +1,6 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed">
+    https://example.com/
+    <figcaption>Embedded content from an example URL</figcaption>
+</figure>
+<!-- /wp:embed -->
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.json b/test/integration/fixtures/blocks/core__embed__deprecated-1.json
new file mode 100644
index 0000000000000..dfc2b215684c2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.json
@@ -0,0 +1,14 @@
+[
+	{
+		"name": "core/embed",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"caption": "Embedded content from an example URL",
+			"allowResponsive": true,
+			"responsive": false,
+			"previewable": true
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..3149ce776fc77
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/embed",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-embed\">\n    https://example.com/\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-embed\">\n    https://example.com/\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..af25e3c4acb67
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-1.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
+https://example.com/
+</div><figcaption class="wp-element-caption">Embedded content from an example URL</figcaption></figure>
+<!-- /wp:embed -->
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.html b/test/integration/fixtures/blocks/core__embed__deprecated-2.html
new file mode 100644
index 0000000000000..f9a539f22a0c9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.html
@@ -0,0 +1,8 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed">
+    <div class="wp-block-embed__wrapper">
+        https://example.com/
+    </div>
+    <figcaption>Embedded content from an example URL</figcaption>
+</figure>
+<!-- /wp:embed -->
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.json b/test/integration/fixtures/blocks/core__embed__deprecated-2.json
new file mode 100644
index 0000000000000..dfc2b215684c2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.json
@@ -0,0 +1,14 @@
+[
+	{
+		"name": "core/embed",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"caption": "Embedded content from an example URL",
+			"allowResponsive": true,
+			"responsive": false,
+			"previewable": true
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json b/test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json
new file mode 100644
index 0000000000000..e5eb6716d2e73
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.parsed.json
@@ -0,0 +1,13 @@
+[
+	{
+		"blockName": "core/embed",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-embed\">\n    <div class=\"wp-block-embed__wrapper\">\n        https://example.com/\n    </div>\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-embed\">\n    <div class=\"wp-block-embed__wrapper\">\n        https://example.com/\n    </div>\n    <figcaption>Embedded content from an example URL</figcaption>\n</figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html
new file mode 100644
index 0000000000000..af25e3c4acb67
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__embed__deprecated-2.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:embed {"url":"https://example.com/"} -->
+<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
+https://example.com/
+</div><figcaption class="wp-element-caption">Embedded content from an example URL</figcaption></figure>
+<!-- /wp:embed -->
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.html b/test/integration/fixtures/blocks/core__gallery__deprecated-7.html
new file mode 100644
index 0000000000000..61b70f3385fe8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.html
@@ -0,0 +1,31 @@
+<!-- wp:gallery {"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
+	<!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
+		<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
+	<!-- /wp:image -->
+	
+	<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
+		<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
+	<!-- /wp:image -->
+	
+	<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
+		<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
+	<!-- /wp:image -->
+</figure>
+<!-- /wp:gallery -->
+<!-- wp:gallery {"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped">
+	<!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
+	<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
+	<!-- /wp:image -->
+	
+	<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
+	<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
+	<!-- /wp:image -->
+	
+	<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
+	<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
+	<!-- /wp:image -->
+	<figcaption class="blocks-gallery-caption">This gallery has a caption</figcaption>
+</figure>
+<!-- /wp:gallery -->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
new file mode 100644
index 0000000000000..4eaf85b46906d
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.json
@@ -0,0 +1,120 @@
+[
+	{
+		"name": "core/gallery",
+		"isValid": true,
+		"attributes": {
+			"images": [],
+			"ids": [],
+			"shortCodeTransforms": [],
+			"caption": "",
+			"imageCrop": true,
+			"fixedHeight": true,
+			"linkTo": "media",
+			"sizeSlug": "large",
+			"allowResize": false
+		},
+		"innerBlocks": [
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
+					"id": 705,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
+					"id": 704,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
+					"id": 703,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			}
+		]
+	},
+	{
+		"name": "core/gallery",
+		"isValid": true,
+		"attributes": {
+			"images": [],
+			"ids": [],
+			"shortCodeTransforms": [],
+			"caption": "This gallery has a caption",
+			"imageCrop": true,
+			"fixedHeight": true,
+			"linkTo": "media",
+			"sizeSlug": "large",
+			"allowResize": false
+		},
+		"innerBlocks": [
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg",
+					"id": 705,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg",
+					"id": 704,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			},
+			{
+				"name": "core/image",
+				"isValid": true,
+				"attributes": {
+					"url": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
+					"alt": "",
+					"caption": "",
+					"href": "http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg",
+					"id": 703,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json b/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json
new file mode 100644
index 0000000000000..f59684073d158
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.parsed.json
@@ -0,0 +1,123 @@
+[
+	{
+		"blockName": "core/gallery",
+		"attrs": {
+			"linkTo": "media"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 705,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\" alt=\"\" class=\"wp-image-705\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\" alt=\"\" class=\"wp-image-705\"/></a></figure>\n\t"
+				]
+			},
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 704,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\" alt=\"\" class=\"wp-image-704\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\" alt=\"\" class=\"wp-image-704\"/></a></figure>\n\t"
+				]
+			},
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 703,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\" alt=\"\" class=\"wp-image-703\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\" alt=\"\" class=\"wp-image-703\"/></a></figure>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped\">\n\t\n\t\n\t\n\t\n\t\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped\">\n\t",
+			null,
+			"\n\t\n\t",
+			null,
+			"\n\t\n\t",
+			null,
+			"\n</figure>\n"
+		]
+	},
+	{
+		"blockName": null,
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n",
+		"innerContent": [ "\n" ]
+	},
+	{
+		"blockName": "core/gallery",
+		"attrs": {
+			"linkTo": "media"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 705,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\" alt=\"\" class=\"wp-image-705\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg\" alt=\"\" class=\"wp-image-705\"/></a></figure>\n\t"
+				]
+			},
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 704,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\" alt=\"\" class=\"wp-image-704\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg\" alt=\"\" class=\"wp-image-704\"/></a></figure>\n\t"
+				]
+			},
+			{
+				"blockName": "core/image",
+				"attrs": {
+					"id": 703,
+					"sizeSlug": "large",
+					"linkDestination": "media"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\" alt=\"\" class=\"wp-image-703\"/></a></figure>\n\t",
+				"innerContent": [
+					"\n\t<figure class=\"wp-block-image size-large\"><a href=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\"><img src=\"http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg\" alt=\"\" class=\"wp-image-703\"/></a></figure>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped\">\n\t\n\t\n\t\n\t\n\t\n\t<figcaption class=\"blocks-gallery-caption\">This gallery has a caption</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped\">\n\t",
+			null,
+			"\n\t\n\t",
+			null,
+			"\n\t\n\t",
+			null,
+			"\n\t<figcaption class=\"blocks-gallery-caption\">This gallery has a caption</figcaption>\n</figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html
new file mode 100644
index 0000000000000..0aed527cce98c
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__gallery__deprecated-7.serialized.html
@@ -0,0 +1,27 @@
+<!-- wp:gallery {"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
+<!-- /wp:image --></figure>
+<!-- /wp:gallery -->
+
+<!-- wp:gallery {"ids":[],"shortCodeTransforms":[],"linkTo":"media"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":705,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1-682x1024.jpg" alt="" class="wp-image-705"/></a></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":704,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg"><img src="http://wptest.local/wp-content/uploads/2020/09/test-image-edited-1024x682.jpg" alt="" class="wp-image-704"/></a></figure>
+<!-- /wp:image -->
+
+<!-- wp:image {"id":703,"sizeSlug":"large","linkDestination":"media"} -->
+<figure class="wp-block-image size-large"><a href="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg"><img src="http://wptest.local/wp-content/uploads/2020/04/test-image-1024x683.jpg" alt="" class="wp-image-703"/></a></figure>
+<!-- /wp:image --><figcaption class="blocks-gallery-caption wp-element-caption">This gallery has a caption</figcaption></figure>
+<!-- /wp:gallery -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.html b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.html
new file mode 100644
index 0000000000000..71170bde67a88
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.html
@@ -0,0 +1,3 @@
+<!-- wp:list -->
+<ul><li><strong>Item</strong><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li></ul></li></ul></li></ul>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.json b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.json
new file mode 100644
index 0000000000000..0e5c001e4e036
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.json
@@ -0,0 +1,112 @@
+[
+	{
+		"name": "core/list",
+		"isValid": true,
+		"attributes": {
+			"ordered": false,
+			"values": ""
+		},
+		"innerBlocks": [
+			{
+				"name": "core/list-item",
+				"isValid": true,
+				"attributes": {
+					"content": "<strong>Item</strong>"
+				},
+				"innerBlocks": [
+					{
+						"name": "core/list",
+						"isValid": true,
+						"attributes": {
+							"ordered": false,
+							"values": ""
+						},
+						"innerBlocks": [
+							{
+								"name": "core/list-item",
+								"isValid": true,
+								"attributes": {
+									"content": "<strong>Item</strong>"
+								},
+								"innerBlocks": [
+									{
+										"name": "core/list",
+										"isValid": true,
+										"attributes": {
+											"ordered": false,
+											"values": ""
+										},
+										"innerBlocks": [
+											{
+												"name": "core/list-item",
+												"isValid": true,
+												"attributes": {
+													"content": "<a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a>"
+												},
+												"innerBlocks": []
+											}
+										]
+									}
+								]
+							},
+							{
+								"name": "core/list-item",
+								"isValid": true,
+								"attributes": {
+									"content": "<strong>Item</strong>"
+								},
+								"innerBlocks": [
+									{
+										"name": "core/list",
+										"isValid": true,
+										"attributes": {
+											"ordered": false,
+											"values": ""
+										},
+										"innerBlocks": [
+											{
+												"name": "core/list-item",
+												"isValid": true,
+												"attributes": {
+													"content": "<a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a>"
+												},
+												"innerBlocks": []
+											}
+										]
+									}
+								]
+							},
+							{
+								"name": "core/list-item",
+								"isValid": true,
+								"attributes": {
+									"content": "<strong>Item</strong>"
+								},
+								"innerBlocks": [
+									{
+										"name": "core/list",
+										"isValid": true,
+										"attributes": {
+											"ordered": false,
+											"values": ""
+										},
+										"innerBlocks": [
+											{
+												"name": "core/list-item",
+												"isValid": true,
+												"attributes": {
+													"content": "<a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a>"
+												},
+												"innerBlocks": []
+											}
+										]
+									}
+								]
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.parsed.json b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.parsed.json
new file mode 100644
index 0000000000000..11b05c91870a8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/list",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<ul><li><strong>Item</strong><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul></li></ul>\n",
+		"innerContent": [
+			"\n<ul><li><strong>Item</strong><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul><ul><li><strong>Item</strong><ul><li><a rel=\"noreferrer noopener\" href=\"#\" target=\"_blank\">Item</a></li></ul></li></ul></li></ul>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
new file mode 100644
index 0000000000000..61e33d3dc0e15
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__list__deprecated-v1-nested.serialized.html
@@ -0,0 +1,29 @@
+<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><strong>Item</strong><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><strong>Item</strong><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><strong>Item</strong><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li><strong>Item</strong><!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li><a rel="noreferrer noopener" href="#" target="_blank">Item</a></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.html b/test/integration/fixtures/blocks/core__table__deprecated-3.html
new file mode 100644
index 0000000000000..a22436c55bdb1
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.html
@@ -0,0 +1,3 @@
+<!-- wp:core/table -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>
+<!-- /wp:core/table -->
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.json b/test/integration/fixtures/blocks/core__table__deprecated-3.json
new file mode 100644
index 0000000000000..4f500a7691fa8
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.json
@@ -0,0 +1,144 @@
+[
+	{
+		"name": "core/table",
+		"isValid": true,
+		"attributes": {
+			"hasFixedLayout": false,
+			"caption": "A table for testing",
+			"head": [
+				{
+					"cells": [
+						{
+							"content": "Version",
+							"tag": "th"
+						},
+						{
+							"content": "Musician",
+							"tag": "th"
+						},
+						{
+							"content": "Date",
+							"tag": "th"
+						}
+					]
+				}
+			],
+			"body": [
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a>",
+							"tag": "td"
+						},
+						{
+							"content": "No musician chosen.",
+							"tag": "td"
+						},
+						{
+							"content": "May 27, 2003",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Miles Davis",
+							"tag": "td"
+						},
+						{
+							"content": "January 3, 2004",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a>",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						},
+						{
+							"content": "…",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Clifford Brown",
+							"tag": "td"
+						},
+						{
+							"content": "December 8, 2015",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Coleman Hawkins",
+							"tag": "td"
+						},
+						{
+							"content": "April 12, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Pepper Adams",
+							"tag": "td"
+						},
+						{
+							"content": "August 16, 2016",
+							"tag": "td"
+						}
+					]
+				},
+				{
+					"cells": [
+						{
+							"content": "<a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a>",
+							"tag": "td"
+						},
+						{
+							"content": "Sarah Vaughan",
+							"tag": "td"
+						},
+						{
+							"content": "December 6, 2016",
+							"tag": "td"
+						}
+					]
+				}
+			],
+			"foot": []
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json b/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json
new file mode 100644
index 0000000000000..030ced272fcab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/table",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption>A table for testing</figcaption></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
new file mode 100644
index 0000000000000..66246c83295a9
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__table__deprecated-3.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:table -->
+<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table><figcaption class="wp-element-caption">A table for testing</figcaption></figure>
+<!-- /wp:table -->
diff --git a/test/integration/fixtures/blocks/core__video.html b/test/integration/fixtures/blocks/core__video.html
index 67f6f86fec095..50e34dfa1e138 100644
--- a/test/integration/fixtures/blocks/core__video.html
+++ b/test/integration/fixtures/blocks/core__video.html
@@ -1,3 +1,3 @@
 <!-- wp:core/video -->
-<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure>
+<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption class="wp-element-caption">My video</figcaption></figure>
 <!-- /wp:core/video -->
diff --git a/test/integration/fixtures/blocks/core__video.json b/test/integration/fixtures/blocks/core__video.json
index 98ec213390220..5458186c67ae6 100644
--- a/test/integration/fixtures/blocks/core__video.json
+++ b/test/integration/fixtures/blocks/core__video.json
@@ -4,7 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"autoplay": false,
-			"caption": "",
+			"caption": "My video",
 			"controls": true,
 			"loop": false,
 			"muted": false,
diff --git a/test/integration/fixtures/blocks/core__video.parsed.json b/test/integration/fixtures/blocks/core__video.parsed.json
index deb9a2a6d74e9..c0f6f04f986a3 100644
--- a/test/integration/fixtures/blocks/core__video.parsed.json
+++ b/test/integration/fixtures/blocks/core__video.parsed.json
@@ -3,9 +3,9 @@
 		"blockName": "core/video",
 		"attrs": {},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video><figcaption class=\"wp-element-caption\">My video</figcaption></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video></figure>\n"
+			"\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video><figcaption class=\"wp-element-caption\">My video</figcaption></figure>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__video.serialized.html b/test/integration/fixtures/blocks/core__video.serialized.html
index b3d567b5c0d69..6a1cb7ab46c8d 100644
--- a/test/integration/fixtures/blocks/core__video.serialized.html
+++ b/test/integration/fixtures/blocks/core__video.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:video -->
-<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video></figure>
+<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption class="wp-element-caption">My video</figcaption></figure>
 <!-- /wp:video -->
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.html b/test/integration/fixtures/blocks/core__video__deprecated-1.html
new file mode 100644
index 0000000000000..3e165ecbd8e47
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__video__deprecated-1.html
@@ -0,0 +1,3 @@
+<!-- wp:core/video -->
+<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption>My video</figcaption></figure>
+<!-- /wp:core/video -->
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.json b/test/integration/fixtures/blocks/core__video__deprecated-1.json
new file mode 100644
index 0000000000000..5458186c67ae6
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__video__deprecated-1.json
@@ -0,0 +1,18 @@
+[
+	{
+		"name": "core/video",
+		"isValid": true,
+		"attributes": {
+			"autoplay": false,
+			"caption": "My video",
+			"controls": true,
+			"loop": false,
+			"muted": false,
+			"preload": "metadata",
+			"src": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
+			"playsInline": false,
+			"tracks": []
+		},
+		"innerBlocks": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json b/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..3619eff24d2d2
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__video__deprecated-1.parsed.json
@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/video",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video><figcaption>My video</figcaption></figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-video\"><video controls src=\"data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=\"></video><figcaption>My video</figcaption></figure>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..b5ee414dc6891
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__video__deprecated-1.serialized.html
@@ -0,0 +1,3 @@
+<!-- wp:video {"tracks":[]} -->
+<figure class="wp-block-video"><video controls src="data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="></video><figcaption class="wp-element-caption">My video</figcaption></figure>
+<!-- /wp:video -->
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index d8a615eceead5..a807943952865 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -71,26 +71,24 @@ const plugins = [
 ];
 
 const stylesTransform = ( content ) => {
-	if ( mode === 'production' ) {
-		return postcss( [
-			require( 'cssnano' )( {
-				preset: [
-					'default',
-					{
-						discardComments: {
-							removeAll: true,
-						},
+	return postcss( [
+		require( 'cssnano' )( {
+			preset: [
+				'default',
+				{
+					discardComments: {
+						removeAll: true,
 					},
-				],
-			} ),
-		] )
-			.process( content, {
-				from: 'src/app.css',
-				to: 'dest/app.css',
-			} )
-			.then( ( result ) => result.css );
-	}
-	return content;
+					normalizeWhitespace: mode === 'production',
+				},
+			],
+		} ),
+	] )
+		.process( content, {
+			from: 'src/app.css',
+			to: 'dest/app.css',
+		} )
+		.then( ( result ) => result.css );
 };
 
 module.exports = {