diff --git a/.eslintrc.js b/.eslintrc.js
index 5f88587b915c22..9cb0b100714d41 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -79,6 +79,7 @@ module.exports = {
 					{
 						name: 'lodash',
 						importNames: [
+							'capitalize',
 							'chunk',
 							'clamp',
 							'compact',
@@ -86,6 +87,7 @@ module.exports = {
 							'countBy',
 							'defaults',
 							'defaultTo',
+							'delay',
 							'differenceWith',
 							'dropRight',
 							'each',
@@ -103,15 +105,18 @@ module.exports = {
 							'isBoolean',
 							'isFinite',
 							'isFunction',
+							'isMatch',
 							'isNil',
 							'isNumber',
 							'isObject',
 							'isObjectLike',
+							'isPlainObject',
 							'isString',
 							'isUndefined',
 							'keyBy',
 							'keys',
 							'lowerCase',
+							'maxBy',
 							'memoize',
 							'negate',
 							'noop',
@@ -125,6 +130,7 @@ module.exports = {
 							'reverse',
 							'size',
 							'snakeCase',
+							'startsWith',
 							'stubFalse',
 							'stubTrue',
 							'sum',
@@ -136,6 +142,8 @@ module.exports = {
 							'uniqueId',
 							'uniqWith',
 							'values',
+							'words',
+							'zip',
 						],
 						message:
 							'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 8bd14acdff60c3..30a598c93c7ef0 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -192,7 +192,7 @@ jobs:
               run: |
                   IFS='.' read -r -a VERSION_ARRAY <<< "${VERSION}"
                   MILESTONE="Gutenberg ${VERSION_ARRAY[0]}.${VERSION_ARRAY[1]}"
-                  npm run changelog -- --milestone="$MILESTONE" --unreleased > release-notes.txt
+                  npm run other:changelog -- --milestone="$MILESTONE" --unreleased > release-notes.txt
                   sed -ie '1,6d' release-notes.txt
                   if [[ ${{ needs.bump-version.outputs.new_version }} != *"rc"* ]]; then
                     # Include previous RCs' release notes, if any
diff --git a/.github/workflows/end2end-test-playwright.yml b/.github/workflows/end2end-test-playwright.yml
index 8ab3b9a22966f6..b67c15834b832c 100644
--- a/.github/workflows/end2end-test-playwright.yml
+++ b/.github/workflows/end2end-test-playwright.yml
@@ -47,7 +47,7 @@ jobs:
 
             - name: Run the tests
               run: |
-                  npm run test-e2e:playwright
+                  npm run test:e2e:playwright
 
             - name: Archive debug artifacts (screenshots, traces)
               uses: actions/upload-artifact@e448a9b857ee2131e752b06002bf0e093c65e571 # v2.2.2
diff --git a/.github/workflows/performance.yml b/.github/workflows/performance.yml
index 2efa28a0fb736a..f45c1f229666ab 100644
--- a/.github/workflows/performance.yml
+++ b/.github/workflows/performance.yml
@@ -1,4 +1,4 @@
-name: Performances Tests
+name: Performance Tests
 
 on:
     pull_request:
diff --git a/.github/workflows/static-checks.yml b/.github/workflows/static-checks.yml
index e6aaaeaa06bfa9..684c13710fdab7 100644
--- a/.github/workflows/static-checks.yml
+++ b/.github/workflows/static-checks.yml
@@ -46,7 +46,7 @@ jobs:
               run: npm run build:package-types
 
             - name: Check local changes
-              run: npm run check-local-changes
+              run: npm run other:check-local-changes
 
             - name: License compatibility
-              run: npm run check-licenses
+              run: npm run other:check-licenses
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 786272b4e29e44..795ad86c9a2763 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -46,10 +46,10 @@ jobs:
                   npx lerna run build
 
             - name: Running the tests
-              run: npm run test-unit -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+              run: npm run test:unit -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
 
             - name: Running the date tests
-              run: npm run test-unit:date -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+              run: npm run test:unit:date -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
 
     unit-php:
         name: PHP
@@ -75,14 +75,14 @@ jobs:
                   npm run wp-env start
 
             - name: Running lint check
-              run: npm run lint-php
+              run: npm run lint:php
 
             - name: Running single site unit tests
-              run: npm run test-unit-php
+              run: npm run test:unit:php
               if: ${{ success() || failure() }}
 
             - name: Running multisite unit tests
-              run: npm run test-unit-php-multisite
+              run: npm run test:unit:php:multisite
               if: ${{ success() || failure() }}
 
     mobile-unit-js:
diff --git a/bin/api-docs/are-api-docs-unstaged.js b/bin/api-docs/are-api-docs-unstaged.js
index e4fbadace02657..ed2b50fb6fa129 100644
--- a/bin/api-docs/are-api-docs-unstaged.js
+++ b/bin/api-docs/are-api-docs-unstaged.js
@@ -35,7 +35,7 @@ const getUnstagedReadmes = () =>
 				'\n',
 				'Some API docs may be out of date:',
 				unstagedReadmes.toString(),
-				'Either build and stage them with npm run api-docs:blocks or continue with --no-verify.',
+				'Either build and stage them with npm run docs:blocks or continue with --no-verify.',
 				'\n'
 			)
 		);
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 4c7faf0180a169..1b0d85a2bb1400 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -177,7 +177,7 @@ async function setUpGitBranch( branch, environmentDirectory ) {
  */
 async function runTestSuite( testSuite, performanceTestDirectory ) {
 	await runShellScript(
-		`npm run test-performance -- packages/e2e-tests/specs/performance/${ testSuite }.test.js`,
+		`npm run test:performance -- packages/e2e-tests/specs/performance/${ testSuite }.test.js`,
 		performanceTestDirectory
 	);
 	const rawResults = await readJSONFile(
diff --git a/bin/plugin/commands/test/changelog.js b/bin/plugin/commands/test/changelog.js
index 321a86da8b156a..e9e1872c38c997 100644
--- a/bin/plugin/commands/test/changelog.js
+++ b/bin/plugin/commands/test/changelog.js
@@ -462,7 +462,7 @@ describe( 'getFormattedItemDescription', () => {
 describe( 'getChangelog', () => {
 	test( 'verify that the changelog is properly formatted', () => {
 		// The fixture with the list of pull requests was generated by running the following command:
-		// npm run changelog -- --milestone="Gutenberg 11.3"
+		// npm run other:changelog -- --milestone="Gutenberg 11.3"
 		// The response from the `fetchAllPullRequests` call in the `getChangelog` method was stored in the JSON file.
 		expect( getChangelog( pullRequests ) ).toMatchSnapshot();
 	} );
@@ -471,7 +471,7 @@ describe( 'getChangelog', () => {
 describe( 'getContributorProps', () => {
 	test( 'verify that the contributors props are properly formatted', () => {
 		// The fixture with the list of pull requests was generated by running the following command:
-		// npm run changelog -- --milestone="Gutenberg 11.3"
+		// npm run other:changelog -- --milestone="Gutenberg 11.3"
 		expect( getContributorProps( pullRequests ) ).toMatchSnapshot();
 	} );
 } );
@@ -479,7 +479,7 @@ describe( 'getContributorProps', () => {
 describe( 'getContributorList', () => {
 	test( 'verify that the contributors list is properly formatted', () => {
 		// The fixture with the list of pull requests was generated by running the following command:
-		// npm run changelog -- --milestone="Gutenberg 11.3"
+		// npm run other:changelog -- --milestone="Gutenberg 11.3"
 		expect( getContributorsList( pullRequests ) ).toMatchSnapshot();
 	} );
 } );
diff --git a/bin/unit-test-date.sh b/bin/unit-test-date.sh
index d3e5c79bba83df..e83f4c91a4bbe4 100755
--- a/bin/unit-test-date.sh
+++ b/bin/unit-test-date.sh
@@ -11,7 +11,7 @@ locales=(en_US ja_JP)
 
 for timezone in "${timezones[@]}"; do
     for locale in "${locales[@]}"; do
-        TZ=$timezone LANG=$locale npm run test-unit -- packages/date "$@" &
+        TZ=$timezone LANG=$locale npm run test:unit -- packages/date "$@" &
         pids+=($!)
         pidsTimezones+=($timezone)
         pidsLocales+=($locale)
diff --git a/changelog.txt b/changelog.txt
index c47a83590c0a97..d49f1bb5c75052 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,39 +1,571 @@
 == Changelog ==
 
-= 13.8.0-rc.2 =
+= 13.9.0-rc.1 =
+
+
 
 ## Changelog
 
+### Enhancements
+
+- Style engine: Prettify combined selectors. ([43003](https://github.com/WordPress/gutenberg/pull/43003))
+- Style engine: Prettify output. ([42909](https://github.com/WordPress/gutenberg/pull/42909))
+- Style engine: Rename global function. ([42719](https://github.com/WordPress/gutenberg/pull/42719))
+- Shortcuts: Add Ctrl+Y for redo on Windows. ([42627](https://github.com/WordPress/gutenberg/pull/42627))
+
+#### Components
+
+- BaseControl: Add `box-sizing` resets. ([42889](https://github.com/WordPress/gutenberg/pull/42889))
+- BorderControl: Add box sizing reset. ([42754](https://github.com/WordPress/gutenberg/pull/42754))
+- BoxControl: Export `applyValueToSides` util function. ([42733](https://github.com/WordPress/gutenberg/pull/42733))
+- ComboboxControl and FormTokenField: Enhance components with custom render callback for options. ([42597](https://github.com/WordPress/gutenberg/pull/42597))
+- ComboboxControl: Add support for uncontrolled mode. ([42752](https://github.com/WordPress/gutenberg/pull/42752))
+- Flex: Convert component to TypeScript. ([42537](https://github.com/WordPress/gutenberg/pull/42537))
+- FontSizePicker: Add 40px size variant. ([42716](https://github.com/WordPress/gutenberg/pull/42716))
+- Placeholder: Convert component to TypeScript. ([42990](https://github.com/WordPress/gutenberg/pull/42990))
+- Popover: Rewrite Storybook examples using controls. ([42903](https://github.com/WordPress/gutenberg/pull/42903))
+- Popover: Tidy up code 🧹 , add more comments. ([42944](https://github.com/WordPress/gutenberg/pull/42944))
+- ResizableBox: Change tooltip background to match other tooltips. ([42800](https://github.com/WordPress/gutenberg/pull/42800))
+- Storybook: Add global CSS switcher. ([42747](https://github.com/WordPress/gutenberg/pull/42747))
+- StyleProvider: Convert component to TypeScript. ([42541](https://github.com/WordPress/gutenberg/pull/42541))
+- Swatch: Convert component to TypeScript. ([42162](https://github.com/WordPress/gutenberg/pull/42162))
+- Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. ([42844](https://github.com/WordPress/gutenberg/pull/42844))
+- Typography Panel: Fix font appearance control width. ([42795](https://github.com/WordPress/gutenberg/pull/42795))
+- UnitControl: Update unit dropdown design. ([42000](https://github.com/WordPress/gutenberg/pull/42000))
+- Update control labels to the new uppercase styles. ([42789](https://github.com/WordPress/gutenberg/pull/42789))
+
+#### Block Library
+
+- Archives: Add a control to make block's dropdown label invisible. ([43025](https://github.com/WordPress/gutenberg/pull/43025))
+- Query Title: Add a search title variation. ([42662](https://github.com/WordPress/gutenberg/pull/42662))
+- Media&Text: Add help to ImageSizeControl. ([40642](https://github.com/WordPress/gutenberg/pull/40642))
+- Post Author: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+- Post Featured Image: Add link target and rel attributes. ([42853](https://github.com/WordPress/gutenberg/pull/42853))
+
+#### CSS & Styling
+
+- Rename solid color. ([42918](https://github.com/WordPress/gutenberg/pull/42918))
+- Try: Tab style subpixel fix. ([42892](https://github.com/WordPress/gutenberg/pull/42892))
+
+#### Site Editor
+
+- Add: Author nicename template creation ability. ([42165](https://github.com/WordPress/gutenberg/pull/42165))
+- [Site Editor]: Add fallback template content on creation. ([42520](https://github.com/WordPress/gutenberg/pull/42520))
+
+#### Block Directory
+
+- Modernize `DownloadableBlockListItem` tests. ([43026](https://github.com/WordPress/gutenberg/pull/43026))
+
+#### List View
+
+- List View Expander: Fix icon in RTL mode. ([42997](https://github.com/WordPress/gutenberg/pull/42997))
+
+#### Global Styles
+
+- Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. ([42544](https://github.com/WordPress/gutenberg/pull/42544))
+
+#### Block Editor
+
+- Rich text: Add character shortcuts for wrapping selection. ([42469](https://github.com/WordPress/gutenberg/pull/42469))
+
+#### Document Settings
+
+- Post Template: Update template title selector. ([42091](https://github.com/WordPress/gutenberg/pull/42091))
+
+#### Design Tools
+
+- Cover: Show Resize Tooltip on Drag. ([23522](https://github.com/WordPress/gutenberg/pull/23522))
+- Update color button style. ([41838](https://github.com/WordPress/gutenberg/pull/41838))
+- Add explicit bypass for fluid font size calculation. ([42757](https://github.com/WordPress/gutenberg/pull/42757))
+
 ### Bug Fixes
 
+- Block Styles: Truncate long button labels. ([42975](https://github.com/WordPress/gutenberg/pull/42975))
+- ColorGradientControl: Fix awkward padding in popover. ([43018](https://github.com/WordPress/gutenberg/pull/43018))
+- Create Block: Remove i18n references from save properties. ([43035](https://github.com/WordPress/gutenberg/pull/43035))
+- Firefox: Fix issue where it selects a nearby contentEditable. ([42777](https://github.com/WordPress/gutenberg/pull/42777))
+- Layout: Fix flex direction column. ([42939](https://github.com/WordPress/gutenberg/pull/42939))
+- List v2: Fix Cmd+A. ([42858](https://github.com/WordPress/gutenberg/pull/42858))
+- Style Engine: Include 6.1 CSS filter, ensure style engine can output CSS functions like clamp. ([43004](https://github.com/WordPress/gutenberg/pull/43004))
+- Style engine: Disable stylesheet optimization temporarily. ([43051](https://github.com/WordPress/gutenberg/pull/43051))
+
+#### Block Library
+
+- Navigation: Fix invalid permissions warning by avoiding using trashed wp_navigation posts (JS implementation). ([42982](https://github.com/WordPress/gutenberg/pull/42982))
+- Disabled blocks passed to BlockTypesList are no longer draggable. ([42751](https://github.com/WordPress/gutenberg/pull/42751))
+- Fix drag and drop performance when dragging over the insertion point. ([42806](https://github.com/WordPress/gutenberg/pull/42806))
+- Social Link: add missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+- Separator: Fix the block CSS classes in the editor. ([42769](https://github.com/WordPress/gutenberg/pull/42769))
+- Tag Cloud: Fix alignment issue when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
+- Navigation: Fix `current-menu-item` class logic. ([42849](https://github.com/WordPress/gutenberg/pull/42849))
+- Media&Text: Round position attribute on focal point save. ([33915](https://github.com/WordPress/gutenberg/pull/33915))
+- Social: Include has-visible-labels on edit component. ([42791](https://github.com/WordPress/gutenberg/pull/42791))
+- Writing flow: Fix Shift+Arrow partial selection for lists & quote. ([42885](https://github.com/WordPress/gutenberg/pull/42885))
+- LatestPost: Fix issue with floated featured images overflowing focus style. ([40663](https://github.com/WordPress/gutenberg/pull/40663))
+
+#### Components
+
+- ColorPicker: Fix layout overflow. ([42992](https://github.com/WordPress/gutenberg/pull/42992))
+- External link component: Add a check for on page anchor links. ([42259](https://github.com/WordPress/gutenberg/pull/42259))
+- Icons: Fix storybook library icon names. ([43034](https://github.com/WordPress/gutenberg/pull/43034))
+- InputControl: Fix incorrect size prop passing to `Text`. ([42793](https://github.com/WordPress/gutenberg/pull/42793))
+- Popover: Anchor correctly to parent node when no explicit anchor is passed. ([42971](https://github.com/WordPress/gutenberg/pull/42971))
+- Popover: Fix arrow placement and design. ([42874](https://github.com/WordPress/gutenberg/pull/42874))
+- Popover: Improve iframe offset computation. ([42417](https://github.com/WordPress/gutenberg/pull/42417))
+- Popover: Make sure that ownerDocument is always defined. ([42886](https://github.com/WordPress/gutenberg/pull/42886))
+- `InputControl`: Fix acceptance of falsy values in controlled updates. ([42484](https://github.com/WordPress/gutenberg/pull/42484))
+
+#### Block Editor
+
+- Inserter: Avoid warning when CRA is displayed. ([42723](https://github.com/WordPress/gutenberg/pull/42723))
+- Pasting: Dismiss pasted image if file:// schema detected. ([42785](https://github.com/WordPress/gutenberg/pull/42785))
+- Prevent multiselection via dragging when already dragging blocks. ([42877](https://github.com/WordPress/gutenberg/pull/42877))
+- Quote: Fix raw transform handler. ([43093](https://github.com/WordPress/gutenberg/pull/43093))
+- Rich text: Fix error when attempting to remove placeholder on composition start. ([42821](https://github.com/WordPress/gutenberg/pull/42821))
+
 #### Global Styles
-- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
 
+- Fix styles declarations returning before all properties output. ([42954](https://github.com/WordPress/gutenberg/pull/42954))
+- Fluid typography: Migrate fluid typography algorithm to JS for site editor. ([42688](https://github.com/WordPress/gutenberg/pull/42688))
+- Spacing presets: Prevent % spacing size units being stripped by sanitize_title. ([43101](https://github.com/WordPress/gutenberg/pull/43101))
+- Specify priority in remove_action. ([43073](https://github.com/WordPress/gutenberg/pull/43073))
+
+#### Build Tooling
+
+- Fix: CSS files don't build in dev mode on Windows. ([42041](https://github.com/WordPress/gutenberg/pull/42041))
+- Fix: Script name error in main package.json. ([43089](https://github.com/WordPress/gutenberg/pull/43089))
+
+#### Accessibility
+
+- Fix issue where changing the id of the recursion provider can result in focus loss. ([42916](https://github.com/WordPress/gutenberg/pull/42916))
+- Site Editor: Don't disable the Save button. ([42842](https://github.com/WordPress/gutenberg/pull/42842))
+
+#### CSS & Styling
+
+- Layout: Merge CSS rule for block gap. ([43052](https://github.com/WordPress/gutenberg/pull/43052))
+
+#### Testing
+
+- Fix: Just another end-to-end test. ([42947](https://github.com/WordPress/gutenberg/pull/42947))
+
+#### Document Settings
+
+- Decode the post URL for the button label. ([42930](https://github.com/WordPress/gutenberg/pull/42930))
+
+#### Site Editor
+
+- Internalization fixes for site editor template creation. ([42762](https://github.com/WordPress/gutenberg/pull/42762))
+
+### Performance
+
+- Lodash: Refactor away from `_.isMatch()`. ([42271](https://github.com/WordPress/gutenberg/pull/42271))
+- Lodash: Refactor away from `_.zip()`. ([42926](https://github.com/WordPress/gutenberg/pull/42926))
+- Lodash: Remove completely from `@wordpress/dom` package. ([42912](https://github.com/WordPress/gutenberg/pull/42912))
+- Lodash: Remove completely from `@wordpress/element` package. ([42898](https://github.com/WordPress/gutenberg/pull/42898))
+
+#### Components
+
+- Lodash: Refactor away from `_.delay()`. ([42966](https://github.com/WordPress/gutenberg/pull/42966))
+- Lodash: Refactor away from `_.startsWith()`. ([43019](https://github.com/WordPress/gutenberg/pull/43019))
+
+#### Block Library
+
+- Refactor Calendar block away from `moment`. ([43029](https://github.com/WordPress/gutenberg/pull/43029))
+
+#### Accessibility
+
+- Lodash: Refactor away from `_.maxBy()`. ([42914](https://github.com/WordPress/gutenberg/pull/42914))
+
+#### Data Layer
+
+- Lodash: Refactor away from `_.isPlainObject()`. ([42508](https://github.com/WordPress/gutenberg/pull/42508))
 
 ### Experiments
 
+- Style engine: Enqueue block support styles. ([42452](https://github.com/WordPress/gutenberg/pull/42452)) ([42880](https://github.com/WordPress/gutenberg/pull/42880))
+- Combine style-engine stores for block-supports. ([42970](https://github.com/WordPress/gutenberg/pull/42970))
+- Style engine: Add optimize flag and combine functions into wp_style_engine_get_stylesheet. ([42878](https://github.com/WordPress/gutenberg/pull/42878))
+
+### Documentation
+
+- Add examples for `core/blocks` actions. ([42637](https://github.com/WordPress/gutenberg/pull/42637))
+- Add examples for core/viewport package. ([42921](https://github.com/WordPress/gutenberg/pull/42921))
+- Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+- Adding `@example` entries to the public API exposed in `core/blocks`. ([42745](https://github.com/WordPress/gutenberg/pull/42745))
+- Cover: Fix rendered content PHPDoc type. ([43099](https://github.com/WordPress/gutenberg/pull/43099))
+- Create Block: Update document links in templates. ([42839](https://github.com/WordPress/gutenberg/pull/42839))
+- Docs: Fix return type of home link attribute function. ([42901](https://github.com/WordPress/gutenberg/pull/42901))
+- Docs: Fix textual consistency about block attributes. ([43075](https://github.com/WordPress/gutenberg/pull/43075))
+- Docs: Link plugins GitHub release pages. ([42736](https://github.com/WordPress/gutenberg/pull/42736))
+- Document the cherry-picking automation. ([42932](https://github.com/WordPress/gutenberg/pull/42932))
+- Fixed broken external link to Mozilla Developer documentation. ([43065](https://github.com/WordPress/gutenberg/pull/43065))
+- Release Docs: Troubleshooting failed "Bump version" job. ([42936](https://github.com/WordPress/gutenberg/pull/42936))
+- Release docs: Update performance test instructions. ([43015](https://github.com/WordPress/gutenberg/pull/43015))
+- Remove the emoji characters to fix the handbook rendering. ([43028](https://github.com/WordPress/gutenberg/pull/43028))
+- Update broken internal link. ([43094](https://github.com/WordPress/gutenberg/pull/43094))
+- Update theme-json.md to include new element support and :Ref. ([42412](https://github.com/WordPress/gutenberg/pull/42412))
+- [Gutenberg Data Tutorial] Adjust the image URLs and whitespace to render correctly in the Handbook. ([42969](https://github.com/WordPress/gutenberg/pull/42969))
+
+### Code Quality
+
+- Add mutations data and helper functions to useEntityRecord. ([39595](https://github.com/WordPress/gutenberg/pull/39595))
+- Remove old WordPress 5.8 code. ([42818](https://github.com/WordPress/gutenberg/pull/42818))
+
+#### Block Library
+
+- Add separate callbacks for selecting a classic or navigation menu in the nav block. ([43057](https://github.com/WordPress/gutenberg/pull/43057))
+- Avoid reliance on status constants when consuming useCreateNavigationMenu hook. ([42704](https://github.com/WordPress/gutenberg/pull/42704))
+- Home Link: Use 'sprintf' in the render callback. ([43024](https://github.com/WordPress/gutenberg/pull/43024))
+- Nav block: Extract hook for inner blocks. ([42743](https://github.com/WordPress/gutenberg/pull/42743))
+- Nav block: Normalize to function expressions. ([42744](https://github.com/WordPress/gutenberg/pull/42744))
+- Normalize usage of Notifications in Nav block. ([42706](https://github.com/WordPress/gutenberg/pull/42706))
+- Remove duplicate speak calls from navigation block. ([43079](https://github.com/WordPress/gutenberg/pull/43079))
+- Site Title: Use home_url instead of get_bloginfo. ([42857](https://github.com/WordPress/gutenberg/pull/42857))
+
+#### Site Editor
+
+- Navigation Menu Sidebar: Remove unnecessary Fragment. ([43021](https://github.com/WordPress/gutenberg/pull/43021))
+
 #### Global Styles
-- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
+- useGlobalStylesOutput: Use memo for derived values. ([42917](https://github.com/WordPress/gutenberg/pull/42917))
+
+### Tools
+
+- Use git for `wp-env`'s default WordPress version. ([42826](https://github.com/WordPress/gutenberg/pull/42826))
+
+#### Testing
+
+- Migrate deprecated node matcher tests to playwright. ([42759](https://github.com/WordPress/gutenberg/pull/42759))
+- Migrate group block tests to Playwright. ([42801](https://github.com/WordPress/gutenberg/pull/42801))
+- Migrate missing block tests to Playwright. ([41680](https://github.com/WordPress/gutenberg/pull/41680))
+- Migrate Convert Block Type test to Playwright. ([42760](https://github.com/WordPress/gutenberg/pull/42760))
+
+#### Build Tooling
+
+- Lodash: Refactor away from `_.flatMap()`. ([42360](https://github.com/WordPress/gutenberg/pull/42360))
+- Standardize script naming in main package.json. ([42368](https://github.com/WordPress/gutenberg/pull/42368))
+
+#### Block Library
+
+- Nav block: Move overlay colors to the responsive wrapper. ([42875](https://github.com/WordPress/gutenberg/pull/42875))
+- Navigation block: Extract navigation block utils. ([42865](https://github.com/WordPress/gutenberg/pull/42865))
+- Navigation: Overlay: Fix link inheritance. ([42929](https://github.com/WordPress/gutenberg/pull/42929))
+- Page List: Fix indentation in PHP file. ([42852](https://github.com/WordPress/gutenberg/pull/42852))
+- Query Pagination: Correctly position the  "next" link on the first page. ([42764](https://github.com/WordPress/gutenberg/pull/42764))
+- Search Block: Remove margins from the input. ([42959](https://github.com/WordPress/gutenberg/pull/42959))
+- Transforms: Add group unwrap. ([42685](https://github.com/WordPress/gutenberg/pull/42685))
+- [Post Title]: Do not add `rel` attribute if empty. ([42855](https://github.com/WordPress/gutenberg/pull/42855))
+- [Query Loop]: Try filters with ToolsPanel. ([42629](https://github.com/WordPress/gutenberg/pull/42629))
+
+#### Global Styles
+
+- Add block spacing to root block support UI. ([42797](https://github.com/WordPress/gutenberg/pull/42797))
+- Elements: Update the load order of the CSS in the Site Editor. ([42863](https://github.com/WordPress/gutenberg/pull/42863))
+- Heading element UI controls. ([42176](https://github.com/WordPress/gutenberg/pull/42176))
+- Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. ([42776](https://github.com/WordPress/gutenberg/pull/42776))
+- Upsize typography panel components. ([42718](https://github.com/WordPress/gutenberg/pull/42718))
+
+#### Widgets Editor
+
+- Format Library: Add missing keyboard shortcut description in customizer widget. ([43044](https://github.com/WordPress/gutenberg/pull/43044))
+
+#### Reusable Blocks
+
+- Make template part and reusable block creation language consistent. ([43032](https://github.com/WordPress/gutenberg/pull/43032))
+
+#### CSS & Styling
+
+- Navigation: Try to keep :Where just for paddings. ([42967](https://github.com/WordPress/gutenberg/pull/42967))
+
+#### Accessibility
+
+- Change shortcut text for redo tooltip on Windows. ([42830](https://github.com/WordPress/gutenberg/pull/42830))
+
+#### Block Editor
+
+- Quote: Unwrap on Backspace at start. ([42808](https://github.com/WordPress/gutenberg/pull/42808))
+
+#### Site Editor
+
+- Add a 'View Site' link in the site editor. ([42331](https://github.com/WordPress/gutenberg/pull/42331))
+
+#### Full Site Editing
+
+- [Full Site Editing]: Update `clear customizations` copy for templates. ([41765](https://github.com/WordPress/gutenberg/pull/41765))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @fellyph: Rendering html for the author description at the editor. ([42109](https://github.com/WordPress/gutenberg/pull/42109))
+- @merkys7: Fix social-link block missing 'width' and 'height' attributes. ([41373](https://github.com/WordPress/gutenberg/pull/41373))
+- @Smit2808: Added the allowedFormat details in richtext readme. ([42426](https://github.com/WordPress/gutenberg/pull/42426))
+- @theminaldiwan: Fixed alignment issue of tagcloud block when align center. ([43017](https://github.com/WordPress/gutenberg/pull/43017))
 
 
 ## Contributors
 
 The following contributors merged PRs in this release:
 
-@andrewserong
+@aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo
 
 
-= 13.8.0-rc.1 =
+= 13.8.1 =
 
 
 
 ## Changelog
 
-### Features
+
+### Enhancements
+
+- Allow removing CSS declarations from the WP_Style_Engine_CSS_Declarations object. ([42428](https://github.com/WordPress/gutenberg/pull/42428))
+- Equalize modal content padding. ([42370](https://github.com/WordPress/gutenberg/pull/42370))
+- Remove top margin on the first paragraph in a modal. ([42369](https://github.com/WordPress/gutenberg/pull/42369))
+
+#### Components
+- BorderControl: Render border color/style dropdown as UnitControl prefix. ([42212](https://github.com/WordPress/gutenberg/pull/42212))
+- ColorPicker: Cleanly implement large size. ([42002](https://github.com/WordPress/gutenberg/pull/42002))
+- ComboboxControl: Refactor `onKeyDown` to use `keyboardEvent.code`. ([42569](https://github.com/WordPress/gutenberg/pull/42569))
+- Elevation: Convert component to TypeScript. ([42302](https://github.com/WordPress/gutenberg/pull/42302))
+- InputControl: Decrease large default padding if has prefix/suffix. ([42166](https://github.com/WordPress/gutenberg/pull/42166))
+- ScrollLock: Covert component to TypeScript. ([42303](https://github.com/WordPress/gutenberg/pull/42303))
+- SelectControl: Add flag for larger default size. ([42456](https://github.com/WordPress/gutenberg/pull/42456))
+- Shortcut: Covert component to TypeScript. ([42272](https://github.com/WordPress/gutenberg/pull/42272))
+- Divider: Complete TypeScript migration of component. ([41991](https://github.com/WordPress/gutenberg/pull/41991))
+- ToggleGroupControl: Add size variants. ([42008](https://github.com/WordPress/gutenberg/pull/42008))
+- UnitControl: Update unit select's focus styles. ([42383](https://github.com/WordPress/gutenberg/pull/42383))
+- BorderControl: Add missing changelog for accessibility enhancements. ([42411](https://github.com/WordPress/gutenberg/pull/42411))
+- CustomSelectControl: Use styles from SelectControl. ([42460](https://github.com/WordPress/gutenberg/pull/42460))
+- Dropdown: Add wrapper for custom padding. ([42595](https://github.com/WordPress/gutenberg/pull/42595))
+- InputControl: Add padding wrapper for prefix/suffix. ([42378](https://github.com/WordPress/gutenberg/pull/42378))
+- ScrollLock: Improve Storybook story for documentation view. ([42344](https://github.com/WordPress/gutenberg/pull/42344))
+- `ColorPalette`: Display checkered preview background when `value` is transparent. ([42232](https://github.com/WordPress/gutenberg/pull/42232))
+
+#### Block Library
+- Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+- Template Part: Swap block action places. ([42221](https://github.com/WordPress/gutenberg/pull/42221))
+- Template Parts: Add search to replacement modal. ([42459](https://github.com/WordPress/gutenberg/pull/42459))
+- Image: Add border block support for color, width, and style. ([31366](https://github.com/WordPress/gutenberg/pull/31366))
+- List v2: Remove quote transforms as removed by Quote v2. ([42700](https://github.com/WordPress/gutenberg/pull/42700))
+- Merge Comments and Post Comments blocks. ([41807](https://github.com/WordPress/gutenberg/pull/41807))
+- Theme.json: Add support for heading / caption elements in theme.json schema. ([42433](https://github.com/WordPress/gutenberg/pull/42433))
+
+#### Global Styles
+- Add layout content size controls to global styles. ([42309](https://github.com/WordPress/gutenberg/pull/42309))
+- Core CSS support for root padding and alignfull blocks. ([42085](https://github.com/WordPress/gutenberg/pull/42085))
+- Theme.json: Add block support feature level selectors for blocks. ([42087](https://github.com/WordPress/gutenberg/pull/42087))
+
+#### Document Settings
+- Make 'Move to trash' button full width. ([42577](https://github.com/WordPress/gutenberg/pull/42577))
+
+#### Block Editor
+- Add setting to display rich text toolbar inline. ([42399](https://github.com/WordPress/gutenberg/pull/42399))
+- Add block variations for individual template parts. ([42454](https://github.com/WordPress/gutenberg/pull/42454))
+- Enable `onEnter` support for group block. ([40724](https://github.com/WordPress/gutenberg/pull/40724))
+
+#### Site Editor
+- On template creation, don't show search if not needed. ([42357](https://github.com/WordPress/gutenberg/pull/42357))
+
+#### Accessibility
+- BorderControl: Update labelling, tooltips and wrap with fieldset and legend. ([42348](https://github.com/WordPress/gutenberg/pull/42348))
+
+#### Icons
+- Add shuffle icon to library. ([42193](https://github.com/WordPress/gutenberg/pull/42193))
+
+#### Nested / Inner Blocks
+- Quote: Use nested blocks. ([25892](https://github.com/WordPress/gutenberg/pull/25892))
+
+#### Colors
+- Update color palette popover style. ([41900](https://github.com/WordPress/gutenberg/pull/41900))
+
+
+### Bug Fixes
+
+- Env: Download WordPress PHPUnit Into Container. ([41780](https://github.com/WordPress/gutenberg/pull/41780))
+- Env: Restrict `WP_TESTS_DOMAIN` constant to just hostname and not home URL. ([41039](https://github.com/WordPress/gutenberg/pull/41039))
+- Fix: Condition bug on BoxControl. ([42402](https://github.com/WordPress/gutenberg/pull/42402))
+- MaybeCategoryPanel: Update category selector. ([42663](https://github.com/WordPress/gutenberg/pull/42663))
+- Post title: Fix single line paste. ([42321](https://github.com/WordPress/gutenberg/pull/42321))
+- Scripts: Exit error code 1 when status value is null. ([42396](https://github.com/WordPress/gutenberg/pull/42396))
+- Style engine: Check item value validity. ([42487](https://github.com/WordPress/gutenberg/pull/42487))
+- Utilize WordPress PHPUnit Test Library Included By `wp-env`. ([41852](https://github.com/WordPress/gutenberg/pull/41852))
+- fix: Correct alt text footnote spacing. ([42504](https://github.com/WordPress/gutenberg/pull/42504))
+
+#### Block Library
+- Cover Block: Prevent transform to Group block when featured image is set. ([42638](https://github.com/WordPress/gutenberg/pull/42638))
+- Cover block: Adding background-size and background-repeat properties to the block CSS. ([42470](https://github.com/WordPress/gutenberg/pull/42470))
+- Fix tab/focus order issue in Media & text block. ([40806](https://github.com/WordPress/gutenberg/pull/40806))
+- List v2: Add forward delete. ([42564](https://github.com/WordPress/gutenberg/pull/42564))
+- List v2: Improve paste handling. ([42524](https://github.com/WordPress/gutenberg/pull/42524))
+- List v2: Merge with nested items. ([42551](https://github.com/WordPress/gutenberg/pull/42551))
+- List v2: Switch to default block type on Backspace from start. ([42633](https://github.com/WordPress/gutenberg/pull/42633))
+- Page List: Fetch items with 'view' context. ([42559](https://github.com/WordPress/gutenberg/pull/42559))
+- Social Icons Block: Fix button opacity in template parts. ([42641](https://github.com/WordPress/gutenberg/pull/42641))
+- Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
+- Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
+- Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
+- [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
+- Site Logo: Add the missing 'site_icon_url' to the REST_API index. ([42957](https://github.com/WordPress/gutenberg/pull/42957))
+
+#### Components
+- AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
+- ColorPalette: Fix background image in RTL mode. ([42510](https://github.com/WordPress/gutenberg/pull/42510))
+- Context System: Don't explicitly set `undefined` value to `children`. ([42686](https://github.com/WordPress/gutenberg/pull/42686))
+- Popover: Fix width on `expandOnMobile`. ([42635](https://github.com/WordPress/gutenberg/pull/42635))
+- RangeControl: Clamp initialPosition between min and max values. ([42571](https://github.com/WordPress/gutenberg/pull/42571))
+- Tooltip: Avoid unnecessary re-renders of `<select>` child elements. ([42483](https://github.com/WordPress/gutenberg/pull/42483))
+- Tooltip: Fix positioning by anchoring to child element. ([41268](https://github.com/WordPress/gutenberg/pull/41268))
+
+#### Accessibility
+- Add aria-hidden to query pagination arrows. ([42583](https://github.com/WordPress/gutenberg/pull/42583))
+- Fix labelling and semantics of the paragraph block Left to right control. ([42324](https://github.com/WordPress/gutenberg/pull/42324))
+- Fix mismatching label and visible text on the Toggle block inserter button. ([42359](https://github.com/WordPress/gutenberg/pull/42359))
+- Fix: The description text of block movers for horizontal movement. ([42393](https://github.com/WordPress/gutenberg/pull/42393))
+- Replace clickable div elements with buttons in the Add template modal. ([42668](https://github.com/WordPress/gutenberg/pull/42668))
+
+#### Post Editor
+- Avoid 403 errors for users with low permissions. ([42413](https://github.com/WordPress/gutenberg/pull/42413))
+- Display post template selection for non-admin users. ([42705](https://github.com/WordPress/gutenberg/pull/42705))
+- Editor: Fix typo in translation string. ([42673](https://github.com/WordPress/gutenberg/pull/42673))
 
 #### Block Editor
-- feat: Inserter displays block collections. ([42405](https://github.com/WordPress/gutenberg/pull/42405))
+- Prevent link control popover from going offscreen. ([42389](https://github.com/WordPress/gutenberg/pull/42389))
+- Writing flow: Fix caret movement for multiple lines. ([42423](https://github.com/WordPress/gutenberg/pull/42423))
+- Writing flow: Fix caret placement in corners. ([42437](https://github.com/WordPress/gutenberg/pull/42437))
+- Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection. ([42530](https://github.com/WordPress/gutenberg/pull/42530))
+
+#### CSS & Styling
+- Elements: Buttons: Fix the path with the css to style the cursor for all button elements. ([42129](https://github.com/WordPress/gutenberg/pull/42129))
+- Link elements: Add a :where selector to the :Not to lower specificity. ([42669](https://github.com/WordPress/gutenberg/pull/42669))
+- Button Block: Change text-decoration style to low specificity. ([42545](https://github.com/WordPress/gutenberg/pull/42545))
+- Element styles: Adding stylesheet to load in the editor. ([42132](https://github.com/WordPress/gutenberg/pull/42132))
+
+#### Global Styles
+- Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
+- Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
+- Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
+- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
+
+#### Widgets Editor
+- Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
+
+#### Rich Text
+- Annotation API: Fix __experimentalGetPropsForEditableTreePreparation. ([42596](https://github.com/WordPress/gutenberg/pull/42596))
+
+#### Site Editor
+- Fix typo in default category template's description. ([42586](https://github.com/WordPress/gutenberg/pull/42586))
+- [Site Editor]: Fix Reakit warning on creation template component. ([42392](https://github.com/WordPress/gutenberg/pull/42392))
+- Site Editor: Remove leftover class. ([42591](https://github.com/WordPress/gutenberg/pull/42591))
+
+#### Themes
+- Remove core/post-comments-form block styles that are overriding button element styles. ([42053](https://github.com/WordPress/gutenberg/pull/42053))
+
+#### Icons
+- Icons Package: Fix line icons styling. ([40315](https://github.com/WordPress/gutenberg/pull/40315))
+
+
+### Performance
+
+#### Components
+- Lodash: Refactor a few components away from `_.isEmpty()`. ([42468](https://github.com/WordPress/gutenberg/pull/42468))
+- Lodash: Refactor away from `_.compact()`. ([42438](https://github.com/WordPress/gutenberg/pull/42438))
+
+#### Post Editor
+- Lodash: Refactor `PageAttributesParent` away from `_.deburr()`. ([42429](https://github.com/WordPress/gutenberg/pull/42429))
+
+#### Testing
+- Lodash: Refactor away from `_.snakeCase()`. ([42427](https://github.com/WordPress/gutenberg/pull/42427))
+
+#### Block Validation/Deprecation
+- Lodash: Refactor away from `_.fromPairs()`. ([42217](https://github.com/WordPress/gutenberg/pull/42217))
+
+
+### Experiments
+
+- Style Engine Rules & Store objects. ([42222](https://github.com/WordPress/gutenberg/pull/42222))
+- Style Engine: Add a WP_Style_Engine_Processor object. ([42463](https://github.com/WordPress/gutenberg/pull/42463))
+
+#### CSS & Styling
+- Style Engine: Add elements to the frontend. ([41732](https://github.com/WordPress/gutenberg/pull/41732))
+
+#### Global Styles
+- Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
+- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
+
+
+### Documentation
+
+- Add @examples to core/blocks selectors. ([42572](https://github.com/WordPress/gutenberg/pull/42572))
+- Consolidate editor filters and actions. ([42356](https://github.com/WordPress/gutenberg/pull/42356))
+- Correct the documented return type for `WP_Block_Parser::Render()`. ([42642](https://github.com/WordPress/gutenberg/pull/42642))
+- Doc: Update getEntityRecord/s param description. ([42488](https://github.com/WordPress/gutenberg/pull/42488))
+- Docs: Add `variations` key to `block.json` JSON schema definition. ([42539](https://github.com/WordPress/gutenberg/pull/42539))
+- Docs: Add missing data module references. ([42651](https://github.com/WordPress/gutenberg/pull/42651))
+- Fix: Repetition of wrong word in string. ([42621](https://github.com/WordPress/gutenberg/pull/42621))
+- Flex: Remove experimental from documentation and storybook. ([42301](https://github.com/WordPress/gutenberg/pull/42301))
+- Include section on how to test code for a given WP major. ([42390](https://github.com/WordPress/gutenberg/pull/42390))
+- Marking internal action as @ignore to remove them from the documentation. ([42163](https://github.com/WordPress/gutenberg/pull/42163))
+- Theme JSON Docs: Clarify null, true, and false values for blockGap setting. ([42447](https://github.com/WordPress/gutenberg/pull/42447))
+- ToolsPanel: Add a readme section related to laying out a ToolsPanel. ([42615](https://github.com/WordPress/gutenberg/pull/42615))
+
+#### Components
+- Improve documentation for the `SpaceInput` type. ([42376](https://github.com/WordPress/gutenberg/pull/42376))
+
+
+### Code Quality
+
+- Base Styles: Apply `long-content-fade` gradient from transparent to color. ([42401](https://github.com/WordPress/gutenberg/pull/42401))
+- Fix jsx-a11y label-has-associated-control configuration. ([42671](https://github.com/WordPress/gutenberg/pull/42671))
+- Fix: Two code issues on navigation link edit missing text. ([42440](https://github.com/WordPress/gutenberg/pull/42440))
+- Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+- Style Engine: Rename WP_Style_Engine_CSS_Rule->set_declarations to add_declarations. ([42464](https://github.com/WordPress/gutenberg/pull/42464))
+- Style engine: Update return PHP doc comment and other nitpicks. ([42453](https://github.com/WordPress/gutenberg/pull/42453))
+
+#### Global Styles
+- Dimensions Global Styles: Split props into separate hooks to tidy up the panel component. ([42620](https://github.com/WordPress/gutenberg/pull/42620))
+
+#### Block Library
+- Remove unnecessary React Fragments. ([42529](https://github.com/WordPress/gutenberg/pull/42529))
+
+
+### Tools
+
+#### Testing
+- Added unit test for cover block render function. ([42108](https://github.com/WordPress/gutenberg/pull/42108))
+- Migrate hooks api test to playwright. ([42584](https://github.com/WordPress/gutenberg/pull/42584))
+- Skip flaky navigation block permissions test. ([42693](https://github.com/WordPress/gutenberg/pull/42693))
+- end-to-end Tests: Tweak Comments block tests after migrating to Playwright. ([42406](https://github.com/WordPress/gutenberg/pull/42406))
+
+#### Build Tooling
+- Update to reflect change in Documentation label. ([42395](https://github.com/WordPress/gutenberg/pull/42395))
+- Add inline documentation on building API documentation to commit block API verify error message. ([42432](https://github.com/WordPress/gutenberg/pull/42432))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @kkmuffme: Remove deprecated eslint rules. ([42654](https://github.com/WordPress/gutenberg/pull/42654))
+- @paulopmt1: Added WhatsApp icon to the Social Icon Block. ([42137](https://github.com/WordPress/gutenberg/pull/42137))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini
+
+
+
+
+= 13.8.0 =
+
+
+
+## Changelog
 
 
 ### Enhancements
@@ -124,6 +656,7 @@ The following contributors merged PRs in this release:
 - Group block: Add context to the word "Row". ([42255](https://github.com/WordPress/gutenberg/pull/42255))
 - Hide prefix and suffix placeholders in post terms. ([42418](https://github.com/WordPress/gutenberg/pull/42418))
 - Theme.json: Fix schema for button elements. ([42431](https://github.com/WordPress/gutenberg/pull/42431))
+- [Media Text]: Fix deprecations regression. ([42816](https://github.com/WordPress/gutenberg/pull/42816))
 
 #### Components
 - AnglePickerControl: Fix gap between elements in RTL mode. ([42534](https://github.com/WordPress/gutenberg/pull/42534))
@@ -161,6 +694,8 @@ The following contributors merged PRs in this release:
 #### Global Styles
 - Elements: Fix heading and caption element selectors. ([42479](https://github.com/WordPress/gutenberg/pull/42479))
 - Layout content size controls: Add left alignment to line up with description and other elements. ([42576](https://github.com/WordPress/gutenberg/pull/42576))
+- Layout: Ensure defaultEditorStyles are still output in Classic themes. ([42906](https://github.com/WordPress/gutenberg/pull/42906))
+- Theme JSON Resolver: Update cache check to also check that the object is an instance of the Gutenberg version. ([42756](https://github.com/WordPress/gutenberg/pull/42756))
 
 #### Widgets Editor
 - Add configuration option to skip autop on freeform blocks when parsing blocks. ([42623](https://github.com/WordPress/gutenberg/pull/42623))
@@ -206,6 +741,7 @@ The following contributors merged PRs in this release:
 
 #### Global Styles
 - Block supports: Add fluid typography. ([39529](https://github.com/WordPress/gutenberg/pull/39529))
+- Layout: Reduce specificity of fallback blockGap styles. ([42665](https://github.com/WordPress/gutenberg/pull/42665))
 
 
 ### Documentation
@@ -271,6 +807,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @afercia @ajlende @amustaque97 @andrewserong @arcangelini @aristath @bph @carolinan @chad1008 @ciampo @danielbachhuber @DAreRodz @dcalhoun @ellatrix @fabiankaegy @geriux @getdave @gziolo @jameskoster @johnbillion @jorgefilipecosta @kkmuffme @Mamaduka @matiasbenedetto @mirka @ndiego @noisysocks @ntsekouras @oandregal @ObliviousHarmony @paulopmt1 @pedro-mendonca @pooja-muchandikar @ramonjd @ryanwelcher @scruffian @SiobhyB @sunil25393 @t-hamano @talldan @tellthemachines @tyxla @vcanales @walbo @westonruter @zaguiini
 
 
+
+
 = 13.7.3 =
 
 
diff --git a/docs/contributors/code/auto-cherry-picking.md b/docs/contributors/code/auto-cherry-picking.md
new file mode 100644
index 00000000000000..992bc85de632bc
--- /dev/null
+++ b/docs/contributors/code/auto-cherry-picking.md
@@ -0,0 +1,93 @@
+# Cherry-picking automation
+
+`npm run other:cherry-pick` automates cherry-picking Pull Requests with a specific label into the **current branch**.
+
+It's especially useful for major WordPress releases as by default the script looks for merged Pull Requests with the `Backport to WP Beta/RC` label.
+
+You can also use it in different scenarios by passing a custom label as the first argument. See the Gutenberg plugin release example at the end of this document.
+
+Running `npm run other:cherry-pick` yields the following prompt:
+
+```
+You are on branch "wp/6.2".
+This script will:
+• Cherry-pick the merged PRs labeled as "Backport to WP Beta/RC" to this branch
+• Ask whether you want to push this branch
+• Comment on each PR
+• Remove the label from each PR
+
+The last two actions will be performed USING YOUR GITHUB ACCOUNT that you've
+linked to your GitHub CLI (gh command)
+
+Do you want to proceed? (Y/n)
+```
+
+Here's what happens once you agree:
+
+```
+Trying to cherry-pick one by one..
+
+$ git pull origin wp/6.2 --rebase...
+$ git fetch origin trunk...
+
+Found the following PRs to cherry-pick:
+   #41198 – Site Editor: Set min-width for styles preview
+
+Fetching commit IDs... Done!
+   #41198 – 860a39665c318d33027d – Site Editor: Set min-width for...
+
+Trying to cherry-pick one by one...
+
+Cherry-picking round 1:
+    cherry-pick commit: afe9b757b4  for PR: #41198 – Site Editor: Set min-width for...
+Cherry-picking finished!
+
+Summary:
+    1 PRs got cherry-picked cleanly
+    0 PRs failed
+
+About to push to origin/wp/6.2
+Do you want to proceed? (Y/n)
+```
+
+This run was successful, yay! You can use this moment to confirm the correct PRs were cherry-picked.
+
+What if the cherry-picks didn't apply cleanly? The script would apply the rest and retry.
+If some cherry-picks still failed, the script would skip them and let you know which conflicts require a manual resolution.
+
+Either way, here's what happens once you proceed past the cherry-picking stage:
+
+```
+Pushing to origin/wp/6.2
+Commenting and removing labels...
+  41198: I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: afe9b757b4
+Done!
+```
+
+The commenting part is optional and only possible if you have the [`gh` console utility](https://cli.github.com/) installed.
+
+### Can I use a different label than `Backport to WP Beta/RC`?
+
+Yes! Pass it as the first argument:
+
+```
+npm run other:cherry-pick "Another Label"
+```
+
+### How can I use it for a Gutenberg plugin release?
+
+```
+# Switch to the release branch
+git checkout release/X.Y
+
+# Cherry-pick all the merged PRs with a relevant backport label
+npm run other:cherry-pick "Backport to Gutenberg RC"
+```
+
+### Future improvements
+
+In the future, it would be great if the script automatically selected the
+relevant label based on the currently selected branch:
+
+* release/X.Y - plugin release – "Backport to Gutenberg RC"
+* wp/X.Y - WP release – "Backport to WP Beta/RC"
diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md
index 2bf1092dbf6377..556833ca89b7ee 100644
--- a/docs/contributors/code/coding-guidelines.md
+++ b/docs/contributors/code/coding-guidelines.md
@@ -472,6 +472,6 @@ For class components, there is no recommendation for documenting the props of th
 We use
 [`phpcs` (PHP_CodeSniffer)](https://github.com/squizlabs/PHP_CodeSniffer) with the [WordPress Coding Standards ruleset](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards) to run a lot of automated checks against all PHP code in this project. This ensures that we are consistent with WordPress PHP coding standards.
 
-The easiest way to use PHPCS is [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment). Once that's installed, you can check your PHP by running `npm run lint-php`.
+The easiest way to use PHPCS is [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment). Once that's installed, you can check your PHP by running `npm run lint:php`.
 
 If you prefer to install PHPCS locally, you should use `composer`. [Install `composer`](https://getcomposer.org/download/) on your computer, then run `composer install`. This will install `phpcs` and `WordPress-Coding-Standards` which you can then run via `composer lint`.
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index 9114f9851bbb7d..f87dfb57919c31 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -144,7 +144,7 @@ ln -s gutenberg/packages/e2e-tests/plugins/* .
 You'll need to run this again if new plugins are added. To run e2e tests:
 
 ```bash
-WP_BASE_URL=http://localhost:8888/gutenberg/ npm run test-e2e
+WP_BASE_URL=http://localhost:8888/gutenberg/ npm run test:e2e
 ```
 
 #### Caching of PHP files
diff --git a/docs/contributors/code/react-native/internationalization-guide.md b/docs/contributors/code/react-native/internationalization-guide.md
index 26f89ef7b3ee24..e3b5d012b9e5ee 100644
--- a/docs/contributors/code/react-native/internationalization-guide.md
+++ b/docs/contributors/code/react-native/internationalization-guide.md
@@ -41,7 +41,7 @@ npm run native i18n:extract-used-strings -- "$PWD/used-strings.json"
 
 ***NOTE:** We need to pass absolute paths, otherwise it uses `packages/react-native-editor` as root path for relative paths.*
 
-Extract used strings including extra plugins: 
+Extract used strings including extra plugins:
 ```sh
 npm run native i18n:extract-used-strings -- "$PWD/used-strings.json" "domain-plugin-1" <PLUGIN-1_SOURCE_PATH> "domain-plugin-2" <PLUGIN-2_SOURCE_PATH> ...
 ```
@@ -82,4 +82,4 @@ npm run native i18n:fetch-translations -- "gutenberg" <OUTPUT_PATH>
 Fetch optimized translations:
 ```sh
 npm run native i18n:fetch-translations -- "gutenberg" <OUTPUT_PATH> <USED_STRINGS_FILE>
-```
\ No newline at end of file
+```
diff --git a/docs/contributors/code/react-native/osx-setup-guide.md b/docs/contributors/code/react-native/osx-setup-guide.md
index 4f1d160a4b2b61..98b6721f4cd023 100644
--- a/docs/contributors/code/react-native/osx-setup-guide.md
+++ b/docs/contributors/code/react-native/osx-setup-guide.md
@@ -14,7 +14,7 @@ git clone git@github.com:WordPress/gutenberg.git
 
 If you’re working in multiple JS projects, a node version manager may make sense. A manager will let you switch between different node and npm versions of your choosing.
 
-We recommend [nvm](https://github.com/nvm-sh/nvm). 
+We recommend [nvm](https://github.com/nvm-sh/nvm).
 
 After installing nvm, run the following from the top-level directory of the cloned project:
 
@@ -63,9 +63,9 @@ arch -x86_64 pod install
 
 #### Ruby Manager
 
-It may not be necessary to manually install Cocoapods or the `ffi` package if you're using a Ruby Version manager. Please refer to your chosen manager's documentation for guidance. 
+It may not be necessary to manually install Cocoapods or the `ffi` package if you're using a Ruby Version manager. Please refer to your chosen manager's documentation for guidance.
 
-[`rbenv`](https://github.com/rbenv/rbenv) is the recommended manager if you're running Gutenberg from within [the WordPress iOS app](https://github.com/wordpress-mobile/WordPress-iOS) (vs. only the demo app). 
+[`rbenv`](https://github.com/rbenv/rbenv) is the recommended manager if you're running Gutenberg from within [the WordPress iOS app](https://github.com/wordpress-mobile/WordPress-iOS) (vs. only the demo app).
 
 ### Set up Xcode
 
@@ -121,9 +121,9 @@ If you already have a JDK installed on your system, it should be JDK 11 or newer
 
 ### Set up Android Studio
 
-To compile the Android app, [download Android Studio](https://developer.android.com/studio). 
+To compile the Android app, [download Android Studio](https://developer.android.com/studio).
 
-Next, open an existing project and select the Gutenberg folder you cloned. 
+Next, open an existing project and select the Gutenberg folder you cloned.
 
 From here, click on the cube icon that's highlighted in the following screenshot to access the SDK Manager. Another way to the SDK Manager is to navigate to `Tools > SDK Manager`:
 
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index 3077f7f4c391a7..4ce35e189fd700 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -113,12 +113,16 @@ These visual assets should maintain consistency with previous release posts; usi
 
 The post should also include a performance audit at the end, comparing the current Gutenberg release with both the previous one and the latest WordPress major version. There are GitHub worfklows in place to do this comparison as part of the Continuous Integration setup, so the performance audit results can be found at the workflow run generated by the release commit in the [Performance Tests workflows](https://github.com/WordPress/gutenberg/actions/workflows/performance.yml) page, with the job name `Compare performance with current WordPress Core and previous Gutenberg versions`.
 
-If the GitHub workflow fails, the performance audit can be executed locally using `bin/plugin/cli.js perf` and passing as parameters the tags to run the performance suite against, such as `bin/plugin/cli.js perf release/x.y release/x.z wp/a.b`.
+If the GitHub workflow fails, the performance audit can be executed locally using `bin/plugin/cli.js perf` and passing the branches to run the performance suite against as parameters. In addition, the current major WP version can be passed to avoid running tests against the WP `trunk`. Example:
+
+```
+node ./bin/plugin/cli.js perf release/x.y release/x.z wp/a.b --wp-version wp.major
+```
 
 The performance values usually displayed in the release post are:
 
--   Post Editor Loading Time (test named `load`)
--   KeyPress Event (test named `typing`)
+-   Time to the first block (test named `firstBlock`)
+-   KeyPress Event (typing) (test named `type`)
 
 #### 5. Publishing the post
 
@@ -129,7 +133,7 @@ Once the post content is ready, an author already having permissions to post in
 If a bug is found in a release candidate and a fix is committed to `trunk`, we should include that fix in the stable version (or optionally in another release candidate before that). To do this you'll need to use `git cherry-pick` to add these changes to the milestone's release branch. This way only the desired fixes are added rather than all the new code that has landed on `trunk` since tagging:
 
 1. Checkout the corresponding release branch with: `git checkout release/x.x`.
-2. Cherry-pick fix commits (in chronological order) with `git cherry-pick [SHA]`.
+2. Cherry-pick fix commits (in chronological order) with `git cherry-pick [SHA]`. The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
 3. When done, push the changes to GitHub: `git push`.
 
 If you decide that the fixes deserve another release candidate before the stable version is published, create one by following the instructions above. Let other contributors know that a new release candidate has been released in the [`#core-editor` channel](https://wordpress.slack.com/messages/C02QB2JS7).
@@ -146,6 +150,8 @@ The method for point releases is nearly identical to the main Plugin release pro
 
 The point release should only contain the _specific commits_ required. To do this you should checkout the previous _minor_ stable (i.e. non-RC) release branch (e.g. `release/12.5`) locally and then cherry pick any commits that you require into that branch.
 
+The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
+
 You must also ensure that all PRs being included are assigned to the Github Milestone on which the point release is based. Bear in mind, that when PRs are _merged_ they are automatically assigned a milestone for the next _stable_ release. Therefore you will need to go back through each PR in Github and re-assign the Milestone.
 
 For example, if you are releasing version `12.5.4`, then all PRs picked for that release must be unassigned from the `12.6` Milestone and instead assigned to the `12.5` Milestone.
@@ -186,6 +192,10 @@ This is expected. The draft release will contain only the plugin zip. Only once
 
 Yes. The method for this is identical to the main Plugin release process. You will need a Gutenberg Core team member to approve the release workflow.
 
+> The release process failed to cherry-pick version bump commit to the trunk branch.
+
+First, confirm that the step failed by checking the latest commits on `trunk` do not include the version bump commit. Then revert the version bump commit on the release branch - `git revert --no-edit {commitHash}`. Finally, push the changes and start the release process again.
+
 ## Packages Releases to npm and WordPress Core Updates
 
 The Gutenberg repository follows the [WordPress SVN repository's](https://make.wordpress.org/core/handbook/about/release-cycle/) branching strategy for every major WordPress release. In addition to that, it also contains two other special branches that control npm publishing workflows:
@@ -233,7 +243,7 @@ The following workflow is needed when bug or security fixes need to be backporte
 -   For WordPress minor releases and WordPress security releases (example `5.1.1`).
 
 1. Check out the relevant WordPress major branch (If the minor release is 5.2.1, check out `wp/5.2`).
-2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it.
+2. Create a feature branch from that branch, and cherry-pick the merge commits for the needed bug fixes onto it. The cherry-picking process can be automated with the [`npm run cherry-pick` script](/docs/contributors/code/auto-cherry-picking.md).
 3. Create a Pull Request from this branch targeting the WordPress major branch used above.
 4. Merge the Pull Request using the "Rebase and Merge" button to keep the history of the commits.
 
diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md
index f5dca7cabaf00b..85e4ff082e92af 100644
--- a/docs/contributors/code/testing-overview.md
+++ b/docs/contributors/code/testing-overview.md
@@ -29,11 +29,11 @@ Assuming you've followed the [instructions](/docs/contributors/code/getting-star
 npm test
 ```
 
-Linting is static code analysis used to enforce coding standards and to avoid potential errors. This project uses [ESLint](http://eslint.org/) and [TypeScript's JavaScript type-checking](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) to capture these issues. While the above `npm test` will execute both unit tests and code linting, code linting can be verified independently by running `npm run lint`. Some JavaScript issues can be fixed automatically by running `npm run lint-js:fix`.
+Linting is static code analysis used to enforce coding standards and to avoid potential errors. This project uses [ESLint](http://eslint.org/) and [TypeScript's JavaScript type-checking](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html) to capture these issues. While the above `npm test` will execute both unit tests and code linting, code linting can be verified independently by running `npm run lint`. Some JavaScript issues can be fixed automatically by running `npm run lint:js:fix`.
 
 To improve your developer workflow, you should setup an editor linting integration. See the [getting started documentation](/docs/contributors/code/getting-started-with-code-contribution.md) for additional information.
 
-To run unit tests only, without the linter, use `npm run test-unit` instead.
+To run unit tests only, without the linter, use `npm run test:unit` instead.
 
 ### Folder structure
 
@@ -304,13 +304,13 @@ However, if the change was intentional, follow these steps to update the snapsho
 
 ```sh
 # --testPathPattern is optional but will be much faster by only running matching tests
-npm run test-unit -- --updateSnapshot --testPathPattern path/to/tests
+npm run test:unit -- --updateSnapshot --testPathPattern path/to/tests
 
 # Update snapshot for e2e tests
-npm run test-e2e -- --updateSnapshot --testPathPattern path/to/e2e-tests
+npm run test:e2e -- --updateSnapshot --testPathPattern path/to/e2e-tests
 
 # Update snapshot for Playwright
-npm run test-e2e:playwright -- --update-snapshots path/to/spec
+npm run test:e2e:playwright -- --update-snapshots path/to/spec
 ```
 
 1. Review the diff and ensure the changes are expected and intentional.
@@ -386,12 +386,12 @@ Reducer tests are also a great fit for snapshots. They are often large, complex
 You might be blindsided by CI tests failing when snapshots don't match. You'll need to [update snapshots] if the changes are expected. The quick and dirty solution is to invoke Jest with `--updateSnapshot`. That can be done as follows:
 
 ```sh
-npm run test-unit -- --updateSnapshot --testPathPattern path/to/tests
+npm run test:unit -- --updateSnapshot --testPathPattern path/to/tests
 ```
 
 `--testPathPattern` is not required, but specifying a path will speed things up by running a subset of tests.
 
-It's a great idea to keep `npm run test-unit:watch` running in the background as you work. Jest will run only the relevant tests for changed files, and when snapshot tests fail, just hit `u` to update a snapshot!
+It's a great idea to keep `npm run test:unit:watch` running in the background as you work. Jest will run only the relevant tests for changed files, and when snapshot tests fail, just hit `u` to update a snapshot!
 
 #### Pain points
 
@@ -463,7 +463,7 @@ In that case, you might see test failures and `TypeError` reported by Jest in th
 
 ### Debugging Jest unit tests
 
-Running `npm run test-unit:debug` will start the tests in debug mode so a [node inspector client](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients) can connect to the process and inspect the execution. Instructions for using Google Chrome or Visual Studio Code as an inspector client can be found in the [wp-scripts documentation](/packages/scripts/README.md#debugging-jest-unit-tests).
+Running `npm run test:unit:debug` will start the tests in debug mode so a [node inspector client](https://nodejs.org/en/docs/guides/debugging-getting-started/#inspector-clients) can connect to the process and inspect the execution. Instructions for using Google Chrome or Visual Studio Code as an inspector client can be found in the [wp-scripts documentation](/packages/scripts/README.md#debugging-jest-unit-tests).
 
 ## Native mobile testing
 
@@ -500,31 +500,31 @@ End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppetee
 If you're using the built-in [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment), you can run the e2e tests locally using this command:
 
 ```bash
-npm run test-e2e
+npm run test:e2e
 ```
 
 or interactively
 
 ```bash
-npm run test-e2e:watch
+npm run test:e2e:watch
 ```
 
 Sometimes it's useful to observe the browser while running tests. Then, use this command:
 
 ```bash
-npm run test-e2e:watch -- --puppeteer-interactive
+npm run test:e2e:watch -- --puppeteer-interactive
 ```
 
 You can control the speed of execution with `--puppeteer-slowmo`:
 
 ```bash
-npm run test-e2e:watch -- --puppeteer-interactive --puppeteer-slowmo=200
+npm run test:e2e:watch -- --puppeteer-interactive --puppeteer-slowmo=200
 ```
 
 You can additionally have the devtools automatically open for interactive debugging in the browser:
 
 ```bash
-npm run test-e2e:watch -- --puppeteer-devtools
+npm run test:e2e:watch -- --puppeteer-devtools
 ```
 
 ### Using alternate environment
@@ -538,7 +538,7 @@ ln -s gutenberg/packages/e2e-tests/plugins/* .
 Then to run the tests, specify the base URL, username, and passwords for your site. For example, if your test site is at `http://wp.test`, use:
 
 ```bash
-WP_BASE_URL=http://wp.test npm run test-e2e -- --wordpress-username=admin --wordpress-password=password
+WP_BASE_URL=http://wp.test npm run test:e2e -- --wordpress-username=admin --wordpress-password=password
 ```
 
 ### Scenario Testing
@@ -546,7 +546,7 @@ WP_BASE_URL=http://wp.test npm run test-e2e -- --wordpress-username=admin --word
 If you find that end-to-end tests pass when run locally, but fail in GitHub Actions, you may be able to isolate a CPU- or network-bound race condition by simulating a slow CPU or network:
 
 ```
-THROTTLE_CPU=4 npm run test-e2e
+THROTTLE_CPU=4 npm run test:e2e
 ```
 
 `THROTTLE_CPU` is a slowdown factor (in this example, a 4x slowdown multiplier)
@@ -554,7 +554,7 @@ THROTTLE_CPU=4 npm run test-e2e
 See [Chrome docs: setCPUThrottlingRate](https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate)
 
 ```
-SLOW_NETWORK=true npm run test-e2e
+SLOW_NETWORK=true npm run test:e2e
 ```
 
 `SLOW_NETWORK` emulates a network speed equivalent to "Fast 3G" in the Chrome devtools.
@@ -562,7 +562,7 @@ SLOW_NETWORK=true npm run test-e2e
 See [Chrome docs: emulateNetworkConditions](https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions) and [NetworkManager.js](https://github.com/ChromeDevTools/devtools-frontend/blob/80c102878fd97a7a696572054007d40560dcdd21/front_end/sdk/NetworkManager.js#L252-L274)
 
 ```
-OFFLINE=true npm run test-e2e
+OFFLINE=true npm run test:e2e
 ```
 
 `OFFLINE` emulates network disconnection.
@@ -582,22 +582,22 @@ A test is considered to be **flaky** when it can pass and fail across multiple r
 Tests for PHP use [PHPUnit](https://phpunit.de/) as the testing framework. If you're using the built-in [local environment](/docs/contributors/code/getting-started-with-code-contribution.md#local-environment), you can run the PHP tests locally using this command:
 
 ```bash
-npm run test-php
+npm run test:php
 ```
 
 To re-run tests automatically when files change (similar to Jest), run:
 
 ```
-npm run test-php:watch
+npm run test:php:watch
 ```
 
 _Note: The phpunit commands require `wp-env` to be running and composer dependencies to be installed. The package script will start wp-env for you if it is not already running._
 
 In other environments, run `composer run test` and `composer run test:watch`.
 
-Code style in PHP is enforced using [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer). It is recommended that you install PHP_CodeSniffer and the [WordPress Coding Standards for PHP_CodeSniffer](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards#installation) ruleset using [Composer](https://getcomposer.org/). With Composer installed, run `composer install` from the project directory to install dependencies. The above `npm run test-php` will execute both unit tests and code linting. Code linting can be verified independently by running `npm run lint-php`.
+Code style in PHP is enforced using [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer). It is recommended that you install PHP_CodeSniffer and the [WordPress Coding Standards for PHP_CodeSniffer](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards#installation) ruleset using [Composer](https://getcomposer.org/). With Composer installed, run `composer install` from the project directory to install dependencies. The above `npm run test:php` will execute both unit tests and code linting. Code linting can be verified independently by running `npm run lint:php`.
 
-To run unit tests only, without the linter, use `npm run test-unit-php` instead.
+To run unit tests only, without the linter, use `npm run test:unit:php` instead.
 
 [snapshot testing]: https://jestjs.io/docs/en/snapshot-testing.html
 [update snapshots]: https://jestjs.io/docs/en/snapshot-testing.html#updating-snapshots
@@ -623,7 +623,7 @@ npm run wp-env start
 To run the tests run the following command:
 
 ```
-npm run test-performance
+npm run test:performance
 ```
 
 This gives you the result for the current branch/code on the running environment.
diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
index 3ee72bd01dd72b..36937974d118da 100644
--- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
+++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
@@ -1,14 +1,12 @@
-# Part 4: Building a _Create page_ form
+# Part 4: Building a Create page form
 
-In the [previous part](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) we created an *Edit page* feature,
-and in this part we will add a *Create page* feature. Here's a glimpse of what we're going to build:
+In the [previous part](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) we created an *Edit page* feature, and in this part we will add a *Create page* feature. Here's a glimpse of what we're going to build:
 
-![](/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png)
 
 ### Step 1: Add a _Create a new page_ button
 
-Let’s start by building a button to display the _create page_ form. It’s similar to an _Edit_ button we have built in
-the [part 3](/docs/how-to-guides/data-basics/3-building-an-edit-form.md):
+Let’s start by building a button to display the _create page_ form. It’s similar to an _Edit_ button we have built in the [part 3](/docs/how-to-guides/data-basics/3-building-an-edit-form.md):
 
 ```js
 import { useDispatch } from '@wordpress/data';
@@ -61,16 +59,13 @@ function MyFirstApp() {
 
 The final result should look as follows:
 
-![](/docs/how-to-guides/data-basics/media/create-form/create-button.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-button.png)
 
 ### Step 2: Extract a controlled PageForm
 
-Now that the button is in place, we can focus entirely on building the form. This tutorial is about managing data, so we
-will not build a complete page editor. Instead, the form will only contain one field: post title.
+Now that the button is in place, we can focus entirely on building the form. This tutorial is about managing data, so we will not build a complete page editor. Instead, the form will only contain one field: post title.
 
-Luckily, the `EditPageForm` we built in [part three](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) already
-takes us 80% of the way there. The bulk of the user interface is already available, and we will reuse it in
-the `CreatePageForm`. Let’s start by extracting the form UI into a separate component:
+Luckily, the `EditPageForm` we built in [part three](/docs/how-to-guides/data-basics/3-building-an-edit-form.md) already takes us 80% of the way there. The bulk of the user interface is already available, and we will reuse it in the `CreatePageForm`. Let’s start by extracting the form UI into a separate component:
 
 ```js
 export function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
@@ -127,17 +122,15 @@ export function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving,
 }
 ```
 
-This code quality change should not alter anything about how the application works. Let’s try to edit a page just to be
-sure:
+This code quality change should not alter anything about how the application works. Let’s try to edit a page just to be sure:
 
-![](/docs/how-to-guides/data-basics/media/create-form/edit-page-form.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/edit-page-form.png)
 
 Great! The edit form is still there, and now we have a building block to power the new `CreatePageForm`.
 
 ### Step 3: Build a CreatePageForm
 
-The only thing that `CreatePageForm` component must do is to provide the following seven properties needed to render
-the `PageForm` component:
+The only thing that `CreatePageForm` component must do is to provide the following seven properties needed to render the `PageForm` component:
 
 * title
 * onChangeTitle
@@ -151,11 +144,9 @@ Let’s see how we can do that:
 
 #### Title, onChangeTitle, hasEdits
 
-The `EditPageForm` updated and saved an existing entity record that lived in the Redux state. Because of that, we relied
-on the `editedEntityRecords` selector.
+The `EditPageForm` updated and saved an existing entity record that lived in the Redux state. Because of that, we relied on the `editedEntityRecords` selector.
 
-In case of the `CreatePageForm` however, there is no pre-existing entity record. There is only an empty form. Anything
-that the user types is local to that form, which means we can keep track of it using the React’s `useState` hook:
+In case of the `CreatePageForm` however, there is no pre-existing entity record. There is only an empty form. Anything that the user types is local to that form, which means we can keep track of it using the React’s `useState` hook:
 
 ```js
 export function CreatePageForm( { onCancel, onSaveFinished } ) {
@@ -174,25 +165,17 @@ export function CreatePageForm( { onCancel, onSaveFinished } ) {
 
 #### onSave, onCancel
 
-In the `EditPageForm`, we dispatched the `saveEditedEntityRecord('postType', 'page', pageId )` action to save the edits
-that lived in the Redux state.
+In the `EditPageForm`, we dispatched the `saveEditedEntityRecord('postType', 'page', pageId )` action to save the edits that lived in the Redux state.
 
-In the `CreatePageForm` however, we do not have any edits in the Redux state, nor we do have a `pageId`. The action we
-need to dispatch in this case is
-called [`saveEntityRecord`](https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#saveentityrecord) (
-without the word _Edited_ in the name) and it accepts an object representing the new entity record instead of a `pageId`
-.
+In the `CreatePageForm` however, we do not have any edits in the Redux state, nor we do have a `pageId`. The action we need to dispatch in this case is called [`saveEntityRecord`](https://developer.wordpress.org/block-editor/reference-guides/data/data-core/#saveentityrecord) (without the word _Edited_ in the name) and it accepts an object representing the new entity record instead of a `pageId`.
 
-The data passed to `saveEntityRecord` is sent via a POST request to the appropriate REST API endpoint. For example,
-dispatching the following action:
+The data passed to `saveEntityRecord` is sent via a POST request to the appropriate REST API endpoint. For example, dispatching the following action:
 
 ```js
 saveEntityRecord( 'postType', 'page', { title: "Test" } );
 ```
 
-Triggers a POST request to
-the [`/wp/v2/pages` WordPress REST API](https://developer.wordpress.org/rest-api/reference/pages/) endpoint with a
-single field in the request body: `title=Test`.
+Triggers a POST request to the [`/wp/v2/pages` WordPress REST API](https://developer.wordpress.org/rest-api/reference/pages/) endpoint with a  single field in the request body: `title=Test`.
 
 Now that we know more about `saveEntityRecord`, let's use it in `CreatePageForm`.
 
@@ -220,9 +203,7 @@ export function CreatePageForm( { onSaveFinished, onCancel } ) {
 }
 ```
 
-There is one more detail to address: our newly created pages are not yet picked up by the `PagesList`. Accordingly to
-the REST API documentation, the `/wp/v2/pages` endpoint creates (`POST` requests) pages with `status=draft` by default,
-but _returns_ (`GET` requests) pages with `status=publish`. The solution is to pass the `status` parameter explicitly:
+There is one more detail to address: our newly created pages are not yet picked up by the `PagesList`. Accordingly to the REST API documentation, the `/wp/v2/pages` endpoint creates (`POST` requests) pages with `status=draft` by default, but _returns_ (`GET` requests) pages with `status=publish`. The solution is to pass the `status` parameter explicitly:
 
 ```js
 export function CreatePageForm( { onSaveFinished, onCancel } ) {
@@ -252,13 +233,9 @@ Go ahead and apply that change to your local `CreatePageForm` component, and let
 
 #### lastError, isSaving
 
-The `EditPageForm`  retrieved the error and progress information via the `getLastEntitySaveError`
-and `isSavingEntityRecord` selectors. In both cases, it passed the following three
-arguments: `( 'postType', 'page', pageId )`.
+The `EditPageForm`  retrieved the error and progress information via the `getLastEntitySaveError` and `isSavingEntityRecord` selectors. In both cases, it passed the following three arguments: `( 'postType', 'page', pageId )`.
 
-In `CreatePageForm` however, we do not have a `pageId`. What now? We can skip the `pageId` argument to retrieve the
-information about the entity record without any id – this will be the newly created one. The `useSelect` call is thus
-very similar to the one from `EditPageForm`:
+In `CreatePageForm` however, we do not have a `pageId`. What now? We can skip the `pageId` argument to retrieve the information about the entity record without any id – this will be the newly created one. The `useSelect` call is thus very similar to the one from `EditPageForm`:
 
 ```js
 export function CreatePageForm( { onCancel, onSaveFinished } ) {
@@ -287,8 +264,8 @@ export function CreatePageForm( { onCancel, onSaveFinished } ) {
 
 And that’s it! Here's what our new form looks like in action:
 
-![](/docs/how-to-guides/data-basics/media/create-form/create-saving.png)
-![](/docs/how-to-guides/data-basics/media/create-form/created-item.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-saving.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/created-item.png)
 
 ### Wiring it all together
 
@@ -406,7 +383,7 @@ export function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving,
 
 All that’s left is to refresh the page and enjoy the form:
 
-![](/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png)
+![](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/data-basics/media/create-form/create-form-with-text.png)
 
 ## What's next?
 
diff --git a/docs/manifest.json b/docs/manifest.json
index cc6346e48f227a..78a268132d0a7f 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -198,7 +198,7 @@
 		"parent": "data-basics"
 	},
 	{
-		"title": "Part 4: Building a _Create page_ form",
+		"title": "Part 4: Building a Create page form",
 		"slug": "4-building-a-create-page-form",
 		"markdown_source": "../docs/how-to-guides/data-basics/4-building-a-create-page-form.md",
 		"parent": "data-basics"
@@ -2117,6 +2117,12 @@
 		"markdown_source": "../docs/contributors/code/release.md",
 		"parent": "code"
 	},
+	{
+		"title": "Cherry-picking automation",
+		"slug": "auto-cherry-picking",
+		"markdown_source": "../docs/contributors/code/auto-cherry-picking.md",
+		"parent": "release"
+	},
 	{
 		"title": "React Native mobile editor",
 		"slug": "react-native",
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index ea57074d11f576..eafc73c79938f3 100644
--- a/docs/reference-guides/block-api/block-attributes.md
+++ b/docs/reference-guides/block-api/block-attributes.md
@@ -156,6 +156,17 @@ Attribute available in the block:
 
 Most attributes from markup will be of type `string`. Numeric attributes in HTML are still stored as strings, and are not converted automatically.
 
+_Example_: Extract the `width` attribute from an image found in the block's markup.
+
+Saved content:
+```html
+<div>
+	Block Content
+
+	<img src="https://lorempixel.com/1200/800/" width="50" />
+</div>
+```
+
 Attribute definition:
 ```js
 {
@@ -175,6 +186,17 @@ Attribute available in the block:
 
 The only exception is when checking for the existence of an attribute (for example, the `disabled` attribute on a `button`). In that case type `boolean` can be used and the stored value will be a boolean.
 
+_Example_: Extract the `disabled` attribute from a button found in the block's markup.
+
+Saved content:
+```html
+<div>
+	Block Content
+
+	<button type="button" disabled>Button</button>
+</div>
+```
+
 Attribute definition:
 ```js
 {
@@ -196,6 +218,8 @@ Attribute available in the block:
 
 Use `text` to extract the inner text from markup. Note that HTML is returned according to the rules of [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).
 
+_Example_: Extract the `content` attribute from a figcaption element found in the block's markup.
+
 Saved content:
 ```html
 <figure>
@@ -223,6 +247,8 @@ Attribute available in the block:
 
 Another example, using `text` as the source, and using `.my-content` class as the selector to extract text:
 
+_Example_: Extract the `content` attribute from an element with `.my-content` class found in the block's markup.
+
 Saved content:
 ```html
 <div>
@@ -250,7 +276,9 @@ Attribute available in the block:
 
 ### `html` source
 
-Use `html` to extract the inner HTML from markup. Note that text is returned according to the rules of [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerHTML).
+Use `html` to extract the inner HTML from markup. Note that text is returned according to the rules of [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).
+
+_Example_: Extract the `content` attribute from a figcaption element found in the block's markup.
 
 Saved content:
 ```html
@@ -279,6 +307,20 @@ Attribute available in the block:
 
 Use the `multiline` property to extract the inner HTML of matching tag names for the use in `RichText` with the `multiline` prop.
 
+_Example_: Extract the `content` attribute from a blockquote element found in the block's markup.
+
+Saved content:
+```html
+<div>
+	Block Content
+
+	<blockquote>
+		<p>First line</p>
+		<p>Second line</p>
+	</blockquote>
+</div>
+```
+
 Attribute definition:
 ```js
 {
diff --git a/docs/reference-guides/block-api/block-metadata.md b/docs/reference-guides/block-api/block-metadata.md
index a2282972f1d4e1..b7e7df60f5a881 100644
--- a/docs/reference-guides/block-api/block-metadata.md
+++ b/docs/reference-guides/block-api/block-metadata.md
@@ -251,7 +251,7 @@ The `ancestor` property makes a block available inside the specified block types
 
 An icon property should be specified to make it easier to identify a block. These can be any of WordPress' Dashicons (slug serving also as a fallback in non-js contexts).
 
-**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. This colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.primitives.SVG](/packages/primitives/src/svg/README.md) component to add accessibility attributes (aria-hidden, role, and focusable).
+**Note:** It's also possible to override this property on the client-side with the source of the SVG element. In addition, this property can be defined with JavaScript as an object containing background and foreground colors. This colors will appear with the icon when they are applicable e.g.: in the inserter. Custom SVG icons are automatically wrapped in the [wp.primitives.SVG](/packages/packages-primitives) component to add accessibility attributes (aria-hidden, role, and focusable).
 
 ### Description
 
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 008fecfc8556d0..2068c9109f2be7 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -15,7 +15,7 @@ Display a date archive of your posts. ([Source](https://github.com/WordPress/gut
 -	**Name:** core/archives
 -	**Category:** widgets
 -	**Supports:** align, ~~html~~
--	**Attributes:** displayAsDropdown, showPostCounts, type
+-	**Attributes:** displayAsDropdown, showLabel, showPostCounts, type
 
 ## Audio
 
@@ -284,7 +284,7 @@ Introduce new sections and organize content to help visitors (and search engines
 
 -	**Name:** core/heading
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, link, text), spacing (margin), typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** __unstablePasteTextInline, align (full, wide), anchor, color (background, gradients, link, text), spacing (margin), typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** content, level, placeholder, textAlign
 
 ## Home Link
@@ -437,7 +437,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c
 
 -	**Name:** core/paragraph
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, anchor, color (background, link, text), typography (fontSize, lineHeight), ~~className~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** align, content, direction, dropCap, placeholder
 
 ## Pattern
@@ -528,7 +528,7 @@ Add the date of this post. ([Source](https://github.com/WordPress/gutenberg/tree
 -	**Name:** core/post-date
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** format, isLink, textAlign
+-	**Attributes:** displayType, format, isLink, textAlign
 
 ## Post Excerpt
 
@@ -663,7 +663,7 @@ Display the query title. ([Source](https://github.com/WordPress/gutenberg/tree/t
 -	**Name:** core/query-title
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, text), spacing (margin), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** level, textAlign, type
+-	**Attributes:** level, showSearchTerm, textAlign, type
 
 ## Quote
 
diff --git a/docs/reference-guides/data/data-core-viewport.md b/docs/reference-guides/data/data-core-viewport.md
index 0764429334a08d..4228c991d72818 100644
--- a/docs/reference-guides/data/data-core-viewport.md
+++ b/docs/reference-guides/data/data-core-viewport.md
@@ -13,8 +13,21 @@ Returns true if the viewport matches the given query, or false otherwise.
 _Usage_
 
 ```js
-isViewportMatch( state, '< huge' );
-isViewPortMatch( state, 'medium' );
+import { store as viewportStore } from '@wordpress/viewport';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+const ExampleComponent = () => {
+	const isMobile = useSelect(
+		( select ) => select( viewportStore ).isViewportMatch( '< small' ),
+		[]
+	);
+
+	return isMobile ? (
+		<div>{ __( 'Mobile' ) }</div>
+	) : (
+		<div>{ __( 'Not Mobile' ) }</div>
+	);
+};
 ```
 
 _Parameters_
@@ -30,20 +43,10 @@ _Returns_
 
 ## Actions
 
-<!-- START TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.js) -->
-
-### setIsMatching
-
-Returns an action object used in signalling that viewport queries have been
-updated. Values are specified as an object of breakpoint query keys where
-value represents whether query matches.
-
-_Parameters_
-
--   _values_ `Object`: Breakpoint query matches.
+The actions in this package shouldn't be used directly.
 
-_Returns_
+<!-- START TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.js) -->
 
--   `Object`: Action object.
+Nothing to document.
 
 <!-- END TOKEN(Autogenerated actions|../../../packages/viewport/src/store/actions.js) -->
diff --git a/docs/reference-guides/filters/i18n-filters.md b/docs/reference-guides/filters/i18n-filters.md
index 5a1a365de53da2..0f37161a3ca617 100644
--- a/docs/reference-guides/filters/i18n-filters.md
+++ b/docs/reference-guides/filters/i18n-filters.md
@@ -57,7 +57,7 @@ Here is a simple example, using the `i18n.gettext` filter to override a specific
 ```jsx
 // Define our filter callback.
 function myPluginGettextFilter( translation, text, domain ) {
-	if ( text === 'Add to Reusable blocks' ) {
+	if ( text === 'Create Reusable block' ) {
 		return 'Save to MyOrg block library';
 	}
 	return translation;
diff --git a/docs/toc.json b/docs/toc.json
index cecd76a2146cec..eba3b7fd810dfe 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -328,7 +328,13 @@
 					{ "docs/contributors/code/grammar.md": [] },
 					{ "docs/contributors/code/scripts.md": [] },
 					{ "docs/contributors/code/managing-packages.md": [] },
-					{ "docs/contributors/code/release.md": [] },
+					{
+						"docs/contributors/code/release.md": [
+							{
+								"docs/contributors/code/auto-cherry-picking.md": []
+							}
+						]
+					},
 					{
 						"docs/contributors/code/react-native/README.md": [
 							{
diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
index 626ed98651b956..256ba292de476a 100644
--- a/docs/tool/manifest.js
+++ b/docs/tool/manifest.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-const { camelCase, upperFirst } = require( 'lodash' );
+const { pascalCase } = require( 'change-case' );
 const fs = require( 'fs' );
 const glob = require( 'glob' ).sync;
 const { join } = require( 'path' );
@@ -54,7 +54,7 @@ function getComponentManifest( paths ) {
 		const pathFragments = filePath.split( '/' );
 		const slug = pathFragments[ pathFragments.length - 2 ];
 		return {
-			title: upperFirst( camelCase( slug ) ),
+			title: pascalCase( slug ),
 			slug,
 			markdown_source: `${ baseRepoUrl }/${ filePath }`,
 			parent: 'components',
@@ -85,7 +85,7 @@ function generateRootManifestFromTOCItems( items, parent = null ) {
 				slug = 'handbook';
 			}
 		}
-		let title = upperFirst( camelCase( slug ) );
+		let title = pascalCase( slug );
 		const markdownSource = fs.readFileSync( fileName, 'utf8' );
 		const titleMarkdown = markdownSource.match( /^#\s(.+)$/m );
 		if ( titleMarkdown ) {
diff --git a/gutenberg.php b/gutenberg.php
index dd336a2d5b8724..e128eef12cb4ab 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: 13.8.0-rc.2
+ * Version: 13.9.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 2a512eab82ca96..abcf8d340d3fc4 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -92,9 +92,6 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 
 	/*
 	* For now we only care about link color.
-	* This code in the future when we have a public API
-	* should take advantage of WP_Theme_JSON_Gutenberg::compute_style_properties
-	* and work for any element and style.
 	*/
 	$skip_link_color_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
 
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 8ae0ffc007fa98..3e269219907713 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -115,7 +115,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 						),
 					),
 					array(
-						'selector'     => "$selector > * + *",
+						'selector'     => "$selector$selector > * + *",
 						'declarations' => array(
 							'margin-block-start' => $gap_value,
 							'margin-block-end'   => '0',
@@ -184,9 +184,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				);
 			}
 		} else {
-			$layout_styles[ $selector ] = array(
-				'flex-direction' => 'column',
-				'align-items'    => 'flex-start',
+			$layout_styles[] = array(
+				'selector'     => $selector,
+				'declarations' => array( 'flex-direction' => 'column' ),
 			);
 			if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
 				$layout_styles[] = array(
@@ -204,11 +204,15 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 
 	if ( ! empty( $layout_styles ) ) {
 		// Add to the style engine store to enqueue and render layout styles.
-		gutenberg_style_engine_add_to_store( 'layout-block-supports', $layout_styles );
-
 		// Return compiled layout styles to retain backwards compatibility.
 		// Since https://github.com/WordPress/gutenberg/pull/42452 we no longer call wp_enqueue_block_support_styles in this block supports file.
-		return gutenberg_style_engine_get_stylesheet_from_css_rules( $layout_styles );
+		return gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$layout_styles,
+			array(
+				'context' => 'block-supports',
+				'enqueue' => true,
+			)
+		);
 	}
 
 	return '';
diff --git a/lib/blocks.php b/lib/blocks.php
index aa0d82c7795d44..e38cbdcf59ae2c 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -199,7 +199,7 @@ function gutenberg_register_core_block_assets( $block_name ) {
 		wp_register_style(
 			"wp-block-{$block_name}",
 			gutenberg_url( $style_path ),
-			array( 'global-styles' ),
+			array(),
 			$default_version
 		);
 		wp_style_add_data( "wp-block-{$block_name}", 'rtl', 'replace' );
@@ -207,7 +207,7 @@ function gutenberg_register_core_block_assets( $block_name ) {
 		// Add a reference to the stylesheet's path to allow calculations for inlining styles in `wp_head`.
 		wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $style_path );
 	} else {
-		wp_register_style( "wp-block-{$block_name}", false, array( 'global-styles' ) );
+		wp_register_style( "wp-block-{$block_name}", false, array() );
 	}
 
 	// If the current theme supports wp-block-styles, dequeue the full stylesheet
@@ -246,7 +246,7 @@ function() {
 				wp_register_style(
 					"wp-block-{$block_name}",
 					gutenberg_url( $theme_style_path ),
-					array( 'global-styles' ),
+					array(),
 					$default_version
 				);
 				wp_style_add_data( "wp-block-{$block_name}", 'path', gutenberg_dir_path() . $theme_style_path );
diff --git a/lib/compat/wordpress-6.1/block-editor-settings.php b/lib/compat/wordpress-6.1/block-editor-settings.php
index 194b7717b449d8..13f0f3982f8571 100644
--- a/lib/compat/wordpress-6.1/block-editor-settings.php
+++ b/lib/compat/wordpress-6.1/block-editor-settings.php
@@ -83,7 +83,7 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			// If there is no `theme.json` file, ensure base layout styles are still available.
 			$block_classes = array(
 				'css'            => 'base-layout-styles',
-				'__unstableType' => 'theme',
+				'__unstableType' => 'base-layout',
 				'isGlobalStyles' => true,
 			);
 			$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
diff --git a/lib/compat/wordpress-6.1/block-template-utils.php b/lib/compat/wordpress-6.1/block-template-utils.php
index 5a2c7c5664ae24..03b93c83937467 100644
--- a/lib/compat/wordpress-6.1/block-template-utils.php
+++ b/lib/compat/wordpress-6.1/block-template-utils.php
@@ -296,3 +296,63 @@ function gutenberg_build_block_template_result_from_post( $post ) {
 	}
 	return $template;
 }
+
+/**
+ * Helper function to get the Template Hierarchy for a given slug.
+ * We need to Handle special cases here like `front-page`, `singular` and `archive` templates.
+ *
+ * Noting that we always add `index` as the last fallback template.
+ *
+ * @param string  $slug            The template slug to be created.
+ * @param boolean $is_custom       Indicates if a template is custom or part of the template hierarchy.
+ * @param string  $template_prefix The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`.
+ *
+ * @return array<string> The template hierarchy.
+ */
+function get_template_hierarchy( $slug, $is_custom = false, $template_prefix = '' ) {
+	if ( 'index' === $slug ) {
+		return array( 'index' );
+	}
+	if ( $is_custom ) {
+		return array( 'page', 'singular', 'index' );
+	}
+	if ( 'front-page' === $slug ) {
+		return array( 'front-page', 'home', 'index' );
+	}
+	$template_hierarchy = array( $slug );
+	// Most default templates don't have `$template_prefix` assigned.
+	if ( $template_prefix ) {
+		list($type) = explode( '-', $template_prefix );
+		// We need these checks because we always add the `$slug` above.
+		if ( ! in_array( $template_prefix, array( $slug, $type ), true ) ) {
+			$template_hierarchy[] = $template_prefix;
+		}
+		if ( $slug !== $type ) {
+			$template_hierarchy[] = $type;
+		}
+	}
+	// Handle `archive` template.
+	if (
+		str_starts_with( $slug, 'author' ) ||
+		str_starts_with( $slug, 'taxonomy' ) ||
+		str_starts_with( $slug, 'category' ) ||
+		str_starts_with( $slug, 'tag' ) ||
+		'date' === $slug
+	) {
+		$template_hierarchy[] = 'archive';
+	}
+	// Handle `single` template.
+	if ( 'attachment' === $slug ) {
+		$template_hierarchy[] = 'single';
+	}
+	// Handle `singular` template.
+	if (
+		str_starts_with( $slug, 'single' ) ||
+		str_starts_with( $slug, 'page' ) ||
+		'attachment' === $slug
+	) {
+		$template_hierarchy[] = 'singular';
+	}
+	$template_hierarchy[] = 'index';
+	return $template_hierarchy;
+};
diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php
index ed41c5aa8cd098..be5fb5a15c786b 100644
--- a/lib/compat/wordpress-6.1/blocks.php
+++ b/lib/compat/wordpress-6.1/blocks.php
@@ -25,6 +25,33 @@ function gutenberg_safe_style_attrs_6_1( $attrs ) {
 }
 add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_1' );
 
+/**
+ * Update allowed CSS values to match WordPress 6.1.
+ *
+ * Note: This should be removed when the minimum required WP version is >= 6.1.
+ *
+ * The logic in this function follows that provided in: https://core.trac.wordpress.org/ticket/55966.
+ *
+ * @param boolean $allow_css       Whether or not the current test string is allowed.
+ * @param string  $css_test_string The CSS string to be tested.
+ * @return boolean
+ */
+function gutenberg_safecss_filter_attr_allow_css_6_1( $allow_css, $css_test_string ) {
+	if ( false === $allow_css ) {
+		// Allow some CSS functions.
+		$css_test_string = preg_replace( '/\b(?:calc|min|max|minmax|clamp)\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string );
+
+		// Allow CSS var.
+		$css_test_string = preg_replace( '/\(?var\(--[\w\-\()[\]\,\s]*\)/', '', $css_test_string );
+
+		// Check for any CSS containing \ ( & } = or comments,
+		// except for url(), calc(), or var() usage checked above.
+		$allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string );
+	}
+	return $allow_css;
+}
+add_filter( 'safecss_filter_attr_allow_css', 'gutenberg_safecss_filter_attr_allow_css_6_1', 10, 2 );
+
 /**
  * Registers view scripts for core blocks if handling is missing in WordPress core.
  *
diff --git a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
index 7c73d799aa8436..1f62bd2df74ba1 100644
--- a/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
+++ b/lib/compat/wordpress-6.1/class-gutenberg-rest-templates-controller.php
@@ -10,6 +10,62 @@
  * Base Templates REST API Controller.
  */
 class Gutenberg_REST_Templates_Controller extends WP_REST_Templates_Controller {
+
+	/**
+	 * Registers the controllers routes.
+	 *
+	 * @return void
+	 */
+	public function register_routes() {
+		// Get fallback template content.
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base . '/lookup',
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'get_template_fallback' ),
+					'permission_callback' => array( $this, 'get_items_permissions_check' ),
+					'args'                => array(
+						'slug'            => array(
+							'description' => __( 'The slug of the template to get the fallback for', 'gutenberg' ),
+							'type'        => 'string',
+						),
+						'is_custom'       => array(
+							'description' => __( ' Indicates if a template is custom or part of the template hierarchy', 'gutenberg' ),
+							'type'        => 'boolean',
+						),
+						'template_prefix' => array(
+							'description' => __( 'The template prefix for the created template. This is used to extract the main template type ex. in `taxonomy-books` we extract the `taxonomy`', 'gutenberg' ),
+							'type'        => 'string',
+						),
+					),
+				),
+			)
+		);
+		parent::register_routes();
+	}
+
+	/**
+	 * Returns the fallback template for a given slug.
+	 *
+	 * @param WP_REST_Request $request The request instance.
+	 *
+	 * @return WP_REST_Response|WP_Error
+	 */
+	public function get_template_fallback( $request ) {
+		if ( empty( $request['slug'] ) ) {
+			return new WP_Error(
+				'rest_invalid_param',
+				__( 'Invalid slug.', 'gutenberg' ),
+				array( 'status' => 400 )
+			);
+		}
+		$hierarchy         = get_template_hierarchy( $request['slug'], $request['is_custom'], $request['template_prefix'] );
+		$fallback_template = resolve_block_template( $request['slug'], $hierarchy, '' );
+		return rest_ensure_response( $fallback_template );
+	}
+
 	/**
 	 * Returns a list of templates.
 	 *
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 82232aaf4121fb..07ca4bf40becb8 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
@@ -21,7 +21,8 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 	 * Note: this will effect both top level and block level elements.
 	 */
 	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
-		'link' => array( ':hover', ':focus', ':active', ':visited' ),
+		'link'   => array( ':hover', ':focus', ':active', ':visited' ),
+		'button' => array( ':hover', ':focus', ':active', ':visited' ),
 	);
 
 	/**
@@ -333,6 +334,29 @@ public static function remove_insecure_properties( $theme_json ) {
 		),
 	);
 
+	/**
+	 * This converts selectors like '.wp-element-button, .wp-block-button__link'
+	 * to an array, so that the block selector is added to both parts of the selector.
+	 *
+	 * @param string $element The string with all the element's selectors.
+	 * @param string $selector The string we want to append to the selectors.
+	 * @param string $position The position we wand to append the selector in.
+	 * @return string element selector.
+	 */
+	private static function appendToSelector( $element, $selector, $position = 0 ) {
+		$element_selector = array();
+		$el_selectors     = explode( ',', $element );
+		foreach ( $el_selectors as $el_selector_item ) {
+			if ( 0 === $position ) {
+				$element_selector[] = $selector . $el_selector_item;
+			} else {
+				$element_selector[] = $el_selector_item . $selector;
+			}
+		}
+		$element_selector = implode( ',', $element_selector );
+		return $element_selector;
+	}
+
 	/**
 	 * Returns the metadata for each block.
 	 *
@@ -416,14 +440,9 @@ protected static function get_blocks_metadata() {
 						break;
 					}
 
-					// This converts selectors like '.wp-element-button, .wp-block-button__link'
-					// to an array, so that the block selector is added to both parts of the selector.
-					$el_selectors = explode( ',', $el_selector );
-					foreach ( $el_selectors as $el_selector_item ) {
-						$element_selector[] = $selector . ' ' . $el_selector_item;
-					}
+					$element_selector = static::appendToSelector( $el_selector, $selector . ' ', 0 );
 				}
-				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
+				static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = $element_selector;
 			}
 		}
 
@@ -481,9 +500,13 @@ protected static function get_style_nodes( $theme_json, $selectors = array() ) {
 					foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
 
 						if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+
+							$element_selector = array();
+							$element_selector = static::appendToSelector( static::ELEMENTS[ $element ], $pseudo_selector, 1 );
+
 							$nodes[] = array(
 								'path'     => array( 'styles', 'elements', $element ),
-								'selector' => static::ELEMENTS[ $element ] . $pseudo_selector,
+								'selector' => $element_selector,
 							);
 						}
 					}
@@ -566,9 +589,13 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) {
 					if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
 						foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
 							if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+
+								$block_selector = array();
+								$block_selector = static::appendToSelector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector, 1 );
+
 								$nodes[] = array(
 									'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
-									'selector' => $selectors[ $name ]['elements'][ $element ] . $pseudo_selector,
+									'selector' => $block_selector,
 								);
 							}
 						}
@@ -1164,7 +1191,7 @@ public function set_spacing_sizes() {
 			return null;
 		}
 
-		$unit            = sanitize_title( $spacing_scale['unit'] );
+		$unit            = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
 		$current_step    = $spacing_scale['mediumStep'];
 		$steps_mid_point = round( ( ( $spacing_scale['steps'] ) / 2 ), 0 );
 		$x_small_count   = null;
diff --git a/lib/compat/wordpress-6.1/rest-api.php b/lib/compat/wordpress-6.1/rest-api.php
index 4ba0b328857b8f..88b6d3bbb9a4db 100644
--- a/lib/compat/wordpress-6.1/rest-api.php
+++ b/lib/compat/wordpress-6.1/rest-api.php
@@ -43,3 +43,21 @@ function gutenberg_register_gutenberg_rest_block_patterns() {
 	$block_patterns->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_gutenberg_rest_block_patterns', 100 );
+
+/**
+ * Exposes the site logo URL through the WordPress REST API.
+ *
+ * This is used for fetching this information when user has no rights
+ * to update settings.
+ *
+ * Note: Backports into wp-includes/rest-api/class-wp-rest-server.php file.
+ *
+ * @param WP_REST_Response $response REST API response.
+ * @return WP_REST_Response $response REST API response.
+ */
+function gutenberg_add_site_icon_url_to_index( WP_REST_Response $response ) {
+	$response->data['site_icon_url'] = get_site_icon_url();
+
+	return $response;
+}
+add_action( 'rest_index', 'gutenberg_add_site_icon_url_to_index' );
diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php
index b3995178431e90..330e6b2614e1f2 100644
--- a/lib/compat/wordpress-6.1/script-loader.php
+++ b/lib/compat/wordpress-6.1/script-loader.php
@@ -36,6 +36,61 @@ static function () use ( $style ) {
 	);
 }
 
+/**
+ * Fetches, processes and compiles stored core styles, then combines and renders them to the page.
+ * Styles are stored via the style engine API. See: packages/style-engine/README.md
+ */
+function gutenberg_enqueue_stored_styles() {
+	$is_block_theme   = wp_is_block_theme();
+	$is_classic_theme = ! $is_block_theme;
+
+	/*
+	 * For block themes, print stored styles in the header.
+	 * For classic themes, in the footer.
+	 */
+	if (
+		( $is_block_theme && doing_action( 'wp_footer' ) ) ||
+		( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) )
+	) {
+		return;
+	}
+
+	$core_styles_keys         = array( 'block-supports' );
+	$compiled_core_stylesheet = '';
+	$style_tag_id             = 'core';
+	foreach ( $core_styles_keys as $style_key ) {
+		// Add comment to identify core styles sections in debugging.
+		if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+			$compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n";
+		}
+		// Chain core store ids to signify what the styles contain.
+		$style_tag_id             .= '-' . $style_key;
+		$compiled_core_stylesheet .= gutenberg_style_engine_get_stylesheet_from_store( $style_key );
+	}
+
+	// Combine Core styles.
+	if ( ! empty( $compiled_core_stylesheet ) ) {
+		wp_register_style( $style_tag_id, false, array(), true, true );
+		wp_add_inline_style( $style_tag_id, $compiled_core_stylesheet );
+		wp_enqueue_style( $style_tag_id );
+	}
+
+	// If there are any other stores registered by themes etc, print them out.
+	$additional_stores = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_stores();
+	foreach ( array_keys( $additional_stores ) as $store_name ) {
+		if ( in_array( $store_name, $core_styles_keys, true ) ) {
+			continue;
+		}
+		$styles = gutenberg_style_engine_get_stylesheet_from_store( $store_name );
+		if ( ! empty( $styles ) ) {
+			$key = "wp-style-engine-$store_name";
+			wp_register_style( $key, false, array(), true, true );
+			wp_add_inline_style( $key, $styles );
+			wp_enqueue_style( $key );
+		}
+	}
+}
+
 /**
  * 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.
@@ -105,9 +160,12 @@ function gutenberg_enqueue_global_styles() {
 }
 
 remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-remove_action( 'wp_footer', 'wp_enqueue_global_styles' );
+remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
 remove_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' );
 remove_action( 'wp_footer', 'gutenberg_enqueue_global_styles_assets' );
 
+// Enqueue global styles, and then block supports styles.
 add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' );
 add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_stored_styles' );
+add_action( 'wp_footer', 'gutenberg_enqueue_stored_styles', 1 );
diff --git a/package-lock.json b/package-lock.json
index 8b37b070930571..6d7947ac5abc54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "13.8.0-rc.2",
+	"version": "13.9.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -16506,6 +16506,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",
@@ -16515,6 +16516,7 @@
 				"react-autosize-textarea": "^7.1.0",
 				"react-easy-crop": "^3.0.0",
 				"rememo": "^4.0.0",
+				"remove-accents": "^0.4.2",
 				"traverse": "^0.6.6"
 			},
 			"dependencies": {
@@ -16611,7 +16613,6 @@
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
 				"micromodal": "^0.4.10",
-				"moment": "^2.22.1",
 				"remove-accents": "^0.4.2"
 			},
 			"dependencies": {
@@ -16653,6 +16654,7 @@
 				"@wordpress/shortcode": "file:packages/shortcode",
 				"colord": "^2.7.0",
 				"hpq": "^1.3.0",
+				"is-plain-obj": "^4.1.0",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
 				"rememo": "^4.0.0",
@@ -16801,6 +16803,7 @@
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/priority-queue": "file:packages/priority-queue",
+				"change-case": "^4.1.2",
 				"clipboard": "^2.0.8",
 				"lodash": "^4.17.21",
 				"mousetrap": "^1.6.5",
@@ -16820,6 +16823,7 @@
 				"@wordpress/i18n": "file:packages/i18n",
 				"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 				"@wordpress/url": "file:packages/url",
+				"change-case": "^4.1.2",
 				"equivalent-key-map": "^0.2.2",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
@@ -16889,6 +16893,7 @@
 				"@wordpress/priority-queue": "file:packages/priority-queue",
 				"@wordpress/redux-routine": "file:packages/redux-routine",
 				"equivalent-key-map": "^0.2.2",
+				"is-plain-obj": "^4.1.0",
 				"is-promise": "^4.0.0",
 				"lodash": "^4.17.21",
 				"redux": "^4.1.2",
@@ -16934,7 +16939,6 @@
 			"requires": {
 				"@babel/core": "^7.16.0",
 				"comment-parser": "^1.1.1",
-				"lodash": "^4.17.21",
 				"mdast-util-inject": "1.1.0",
 				"optionator": "0.8.2",
 				"remark": "10.0.1",
@@ -16946,8 +16950,7 @@
 			"version": "file:packages/dom",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
-				"@wordpress/deprecated": "^3.8.0",
-				"lodash": "^4.17.21"
+				"@wordpress/deprecated": "^3.8.0"
 			}
 		},
 		"@wordpress/dom-ready": {
@@ -16977,6 +16980,7 @@
 				"@wordpress/api-fetch": "file:packages/api-fetch",
 				"@wordpress/keycodes": "file:packages/keycodes",
 				"@wordpress/url": "file:packages/url",
+				"change-case": "^4.1.2",
 				"form-data": "^4.0.0",
 				"lodash": "^4.17.21"
 			}
@@ -17180,7 +17184,8 @@
 				"@types/react": "^17.0.37",
 				"@types/react-dom": "^17.0.11",
 				"@wordpress/escape-html": "file:packages/escape-html",
-				"lodash": "^4.17.21",
+				"change-case": "^4.1.2",
+				"is-plain-obj": "^4.1.0",
 				"react": "^17.0.2",
 				"react-dom": "^17.0.2"
 			}
@@ -17533,6 +17538,7 @@
 			"requires": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/i18n": "file:packages/i18n",
+				"change-case": "^4.1.2",
 				"lodash": "^4.17.21"
 			}
 		},
@@ -17745,6 +17751,7 @@
 			"version": "file:packages/redux-routine",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"is-plain-obj": "^4.1.0",
 				"is-promise": "^4.0.0",
 				"lodash": "^4.17.21",
 				"rungen": "^0.3.2"
@@ -28432,7 +28439,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
 			"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-			"dev": true,
 			"requires": {
 				"pascal-case": "^3.1.2",
 				"tslib": "^2.0.3"
@@ -28494,7 +28500,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
 			"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -28593,7 +28598,6 @@
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
 			"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
-			"dev": true,
 			"requires": {
 				"camel-case": "^4.1.2",
 				"capital-case": "^1.0.4",
@@ -29669,7 +29673,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
 			"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -31884,7 +31887,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
 			"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -37296,7 +37298,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
 			"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
-			"dev": true,
 			"requires": {
 				"capital-case": "^1.0.4",
 				"tslib": "^2.0.3"
@@ -38668,10 +38669,9 @@
 			}
 		},
 		"is-plain-obj": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-			"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-			"dev": true
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+			"integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="
 		},
 		"is-plain-object": {
 			"version": "2.0.4",
@@ -43671,7 +43671,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
 			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
@@ -44360,6 +44359,14 @@
 						"arrify": "^1.0.1",
 						"is-plain-obj": "^1.1.0",
 						"kind-of": "^6.0.3"
+					},
+					"dependencies": {
+						"is-plain-obj": {
+							"version": "1.1.0",
+							"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+							"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+							"dev": true
+						}
 					}
 				},
 				"normalize-package-data": {
@@ -45703,6 +45710,14 @@
 			"requires": {
 				"arrify": "^1.0.1",
 				"is-plain-obj": "^1.1.0"
+			},
+			"dependencies": {
+				"is-plain-obj": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+					"dev": true
+				}
 			}
 		},
 		"minipass": {
@@ -46137,7 +46152,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
 			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-			"dev": true,
 			"requires": {
 				"lower-case": "^2.0.2",
 				"tslib": "^2.0.3"
@@ -48233,7 +48247,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
 			"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -48338,7 +48351,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
 			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -48451,7 +48463,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
 			"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -53073,7 +53084,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
 			"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
-			"dev": true,
 			"requires": {
 				"no-case": "^3.0.4",
 				"tslib": "^2.0.3",
@@ -53519,7 +53529,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
 			"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
-			"dev": true,
 			"requires": {
 				"dot-case": "^3.0.4",
 				"tslib": "^2.0.3"
@@ -54034,6 +54043,14 @@
 			"dev": true,
 			"requires": {
 				"is-plain-obj": "^1.0.0"
+			},
+			"dependencies": {
+				"is-plain-obj": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+					"dev": true
+				}
 			}
 		},
 		"source-list-map": {
@@ -55846,6 +55863,14 @@
 						"arrify": "^1.0.1",
 						"is-plain-obj": "^1.1.0",
 						"kind-of": "^6.0.3"
+					},
+					"dependencies": {
+						"is-plain-obj": {
+							"version": "1.1.0",
+							"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+							"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+							"dev": true
+						}
 					}
 				},
 				"ms": {
@@ -57591,6 +57616,14 @@
 				"trough": "^1.0.0",
 				"vfile": "^3.0.0",
 				"x-is-string": "^0.1.0"
+			},
+			"dependencies": {
+				"is-plain-obj": {
+					"version": "1.1.0",
+					"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+					"integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+					"dev": true
+				}
 			}
 		},
 		"union-value": {
@@ -57824,7 +57857,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
 			"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
@@ -57833,7 +57865,6 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
 			"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
-			"dev": true,
 			"requires": {
 				"tslib": "^2.0.3"
 			}
diff --git a/package.json b/package.json
index 2490ef68dfcf8c..feb6815fc7f2b8 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "13.8.0-rc.2",
+	"version": "13.9.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -169,6 +169,7 @@
 		"benchmark": "2.1.4",
 		"browserslist": "4.17.6",
 		"chalk": "4.1.1",
+		"change-case": "4.1.2",
 		"commander": "9.2.0",
 		"concurrently": "3.5.0",
 		"copy-webpack-plugin": "10.2.0",
@@ -240,73 +241,74 @@
 		"worker-farm": "1.7.0"
 	},
 	"scripts": {
-		"analyze-bundles": "npm run build -- --webpack-bundle-analyzer",
-		"api-docs:blocks": "node ./bin/api-docs/gen-block-lib-list.js",
-		"api-docs:ref": "node ./bin/api-docs/update-api-docs.js",
-		"api-docs:theme-ref": "node ./bin/api-docs/gen-theme-reference.js",
-		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
-		"clean:package-types": "tsc --build --clean",
+		"build": "npm run build:packages && wp-scripts build",
+		"build:analyze-bundles": "npm run build -- --webpack-bundle-analyzer",
+		"build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build",
 		"prebuild:packages": "npm run clean:packages && lerna run build",
 		"build:packages": "npm run build:package-types && node ./bin/packages/build.js",
-		"build:package-types": "node ./bin/packages/validate-typescript-version.js && tsc --build",
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
-		"build": "npm run build:packages && wp-scripts build",
-		"changelog": "node ./bin/plugin/cli.js changelog",
-		"cherry-pick": "node ./bin/cherry-pick.mjs",
-		"check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
-		"precheck-local-changes": "npm run docs:build",
-		"check-local-changes": "node ./bin/check-local-changes.js",
+		"clean:package-types": "tsc --build --clean",
+		"clean:packages": "rimraf \"./packages/*/@(build|build-module|build-style)\"",
 		"dev": "npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
 		"distclean": "rimraf node_modules packages/*/node_modules",
+		"docs:api-ref": "node ./bin/api-docs/update-api-docs.js",
+		"docs:blocks": "node ./bin/api-docs/gen-block-lib-list.js",
+		"docs:build": "npm-run-all docs:gen docs:blocks docs:api-ref docs:theme-ref",
 		"docs:gen": "node ./docs/tool/index.js",
-		"docs:build": "npm-run-all docs:gen api-docs:*",
+		"docs:theme-ref": "node ./bin/api-docs/gen-theme-reference.js",
+		"env": "wp-env",
 		"fixtures:clean": "rimraf \"test/integration/fixtures/blocks/*.+(json|serialized.html)\"",
-		"fixtures:generate": "cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit test/integration/full-content/ && npm run format test/integration/fixtures/blocks/*.json",
-		"fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
+		"fixtures:generate": "cross-env GENERATE_MISSING_FIXTURES=y npm run test:unit test/integration/full-content/ && npm run format test/integration/fixtures/blocks/*.json",
+		"fixtures:regenerate": "npm-run-all fixtures:clean fixtures:generate",
 		"format": "wp-scripts format",
-		"format-php": "wp-env run composer run-script format",
-		"lint": "concurrently \"npm run lint-lockfile\" \"npm run lint-js\" \"npm run lint-pkg-json\" \"npm run lint-css\"",
-		"lint-js": "wp-scripts lint-js",
-		"lint-js:fix": "npm run lint-js -- --fix",
-		"prelint-php": "wp-env run composer \"install --no-interaction\"",
-		"lint-php": "wp-env run composer run-script lint",
-		"lint-pkg-json": "wp-scripts lint-pkg-json . 'packages/*/package.json'",
-		"lint-lockfile": "node ./bin/validate-package-lock.js",
-		"lint-css": "wp-scripts lint-style \"**/*.scss\"",
-		"lint-css:fix": "npm run lint-css -- --fix",
-		"lint:md-docs": "wp-scripts lint-md-docs",
+		"format:php": "wp-env run composer run-script format",
+		"lint": "concurrently \"npm run lint:lockfile\" \"npm run lint:js\" \"npm run lint:pkg-json\" \"npm run lint:css\"",
+		"lint:css": "wp-scripts lint-style \"**/*.scss\"",
+		"lint:css:fix": "npm run lint:css -- --fix",
+		"lint:js": "wp-scripts lint-js",
+		"lint:js:fix": "npm run lint:js -- --fix",
+		"lint:lockfile": "node ./bin/validate-package-lock.js",
+		"lint:md:docs": "wp-scripts lint-md-docs",
+		"prelint:php": "wp-env run composer \"install --no-interaction\"",
+		"lint:php": "wp-env run composer run-script lint",
+		"lint:pkg-json": "wp-scripts lint-pkg-json . 'packages/*/package.json'",
 		"native": "npm run --prefix packages/react-native-editor",
+		"other:changelog": "node ./bin/plugin/cli.js changelog",
+		"other:check-licenses": "concurrently \"wp-scripts check-licenses --prod --gpl2 --ignore=@react-native-community/cli,@react-native-community/cli-platform-ios\" \"wp-scripts check-licenses --dev\"",
+		"preother:check-local-changes": "npm run docs:build",
+		"other:check-local-changes": "node ./bin/check-local-changes.js",
+		"other:cherry-pick": "node ./bin/cherry-pick.mjs",
 		"postinstall": "patch-package && node ./patches/patch-xcode.js",
+		"prepare": "husky install",
 		"prepublishOnly": "npm run clean:package-types && npm run build:packages",
 		"publish:check": "lerna updated",
-		"publish:patch": "lerna publish patch --no-private --dist-tag patch",
 		"publish:latest": "lerna publish --no-private",
-		"test": "npm run lint && npm run test-unit",
-		"test:create-block": "bash ./bin/test-create-block.sh",
-		"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
-		"test-e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
-		"test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
-		"test-e2e:watch": "npm run test-e2e -- --watch",
-		"test-performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
-		"test-php": "npm run lint-php && npm run test-unit-php",
-		"test-php:watch": "wp-env run composer run-script test:watch",
-		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
-		"test-unit:date": "bash ./bin/unit-test-date.sh",
-		"test-unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
-		"test-unit:update": "npm run test-unit -- --updateSnapshot",
-		"test-unit:watch": "npm run test-unit -- --watch",
-		"pretest-unit-php": "wp-env start",
-		"test-unit-php": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist --verbose",
-		"pretest-unit-php-multisite": "wp-env start",
-		"test-unit-php-multisite": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit/multisite.xml --verbose",
+		"publish:patch": "lerna publish patch --no-private --dist-tag patch",
+		"start": "npm run dev",
 		"prestorybook:build": "npm run build:packages",
 		"storybook:build": "build-storybook -c ./storybook -o ./storybook/build",
 		"prestorybook:dev": "npm run build:packages",
 		"storybook:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c ./storybook -p 50240\"",
-		"env": "wp-scripts env",
-		"wp-env": "wp-env",
-		"prepare": "husky install"
+		"test": "npm-run-all lint test:unit",
+		"test:create-block": "bash ./bin/test-create-block.sh",
+		"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
+		"test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
+		"test:e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
+		"test:e2e:watch": "npm run test:e2e -- --watch",
+		"test:performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
+		"test:php": "npm-run-all lint:php test:unit:php",
+		"test:php:watch": "wp-env run composer run-script test:watch",
+		"test:unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
+		"test:unit:date": "bash ./bin/unit-test-date.sh",
+		"test:unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
+		"pretest:unit:php": "wp-env start",
+		"test:unit:php": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist --verbose",
+		"pretest:unit:php:multisite": "wp-env start",
+		"test:unit:php:multisite": "wp-env run tests-wordpress /var/www/html/wp-content/plugins/gutenberg/vendor/bin/phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit/multisite.xml --verbose",
+		"test:unit:update": "npm run test:unit -- --updateSnapshot",
+		"test:unit:watch": "npm run test:unit -- --watch",
+		"wp-env": "wp-env"
 	},
 	"lint-staged": {
 		"*.{js,json,ts,tsx,yml,yaml}": [
@@ -319,7 +321,7 @@
 			"wp-scripts lint-style"
 		],
 		"package-lock.json": [
-			"npm run lint-lockfile",
+			"npm run lint:lockfile",
 			"node ./bin/check-latest-npm.js"
 		],
 		"packages/*/package.json": [
@@ -329,9 +331,9 @@
 			"node ./docs/tool/index.js"
 		],
 		"packages/**/*.{js,ts,tsx,json}": [
-			"npm run api-docs:ref",
-			"npm run api-docs:blocks",
-			"npm run api-docs:theme-ref",
+			"npm run docs:api-ref",
+			"npm run docs:blocks",
+			"npm run docs:theme-ref",
 			"node ./bin/api-docs/are-api-docs-unstaged.js",
 			"node ./bin/packages/lint-staged-typecheck.js"
 		]
diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
index f336c8f7a1ff31..e8b9ea59921d84 100644
--- a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js
+++ b/packages/block-directory/src/components/downloadable-block-list-item/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
@@ -27,11 +28,11 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: true,
 		} ) );
 
-		const { queryByText } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const author = queryByText( `by ${ plugin.author }` );
-		const description = queryByText( plugin.description );
+		const author = screen.queryByText( `by ${ plugin.author }` );
+		const description = screen.queryByText( plugin.description );
 		expect( author ).not.toBeNull();
 		expect( description ).not.toBeNull();
 	} );
@@ -42,10 +43,10 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: true,
 		} ) );
 
-		const { queryByText } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const statusLabel = queryByText( 'Installing…' );
+		const statusLabel = screen.queryByText( 'Installing…' );
 		expect( statusLabel ).not.toBeNull();
 	} );
 
@@ -55,27 +56,30 @@ describe( 'DownloadableBlockListItem', () => {
 			isInstallable: false,
 		} ) );
 
-		const { getByRole } = render(
+		render(
 			<DownloadableBlockListItem onClick={ jest.fn() } item={ plugin } />
 		);
-		const button = getByRole( 'option' );
+		const button = screen.getByRole( 'option' );
 		// Keeping it false to avoid focus loss and disable it using aria-disabled.
 		expect( button.disabled ).toBe( false );
 		expect( button.getAttribute( 'aria-disabled' ) ).toBe( 'true' );
 	} );
 
-	it( 'should try to install the block plugin', () => {
+	it( 'should try to install the block plugin', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
 		useSelect.mockImplementation( () => ( {
 			isInstalling: false,
 			isInstallable: true,
 		} ) );
 		const onClick = jest.fn();
-		const { getByRole } = render(
+		render(
 			<DownloadableBlockListItem onClick={ onClick } item={ plugin } />
 		);
 
-		const button = getByRole( 'option' );
-		fireEvent.click( button );
+		await user.click( screen.getByRole( 'option' ) );
 
 		expect( onClick ).toHaveBeenCalledTimes( 1 );
 	} );
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index c817b8dd2b6f14..9b4f44e768336c 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",
@@ -68,6 +69,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
 		"rememo": "^4.0.0",
+		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index e21f9855ab370f..b562daedcf30cd 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -469,7 +469,7 @@ class EmptyListComponent extends Component {
 			renderFooterAppender,
 		} = this.props;
 
-		if ( renderFooterAppender ) {
+		if ( renderFooterAppender || renderAppender === false ) {
 			return null;
 		}
 
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index b980293acc5ec6..37fb597d790b9c 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -154,7 +154,10 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement || ! isVisible ) {
+	// If there's either a previous or a next element, show the inbetween popover.
+	// Note that drag and drop uses the inbetween popover to show the drop indicator
+	// before the first block and after the last block.
+	if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 22aa36239defd9..02be59b98deece 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -11,7 +11,7 @@ import { useState, useLayoutEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
-	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
 	Slot,
 	Fill,
 } from '@wordpress/components';
@@ -117,15 +117,12 @@ function BlockStyles( {
 							onClick={ () => onSelectStylePreview( style ) }
 							aria-current={ activeStyle.name === style.name }
 						>
-							<Text
-								as="span"
-								limit={ 12 }
-								ellipsizeMode="tail"
+							<Truncate
+								numberOfLines={ 1 }
 								className="block-editor-block-styles__item-text"
-								truncate
 							>
 								{ buttonText }
-							</Text>
+							</Truncate>
 						</Button>
 					);
 				} ) }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index bed73bfedf1e23..794608c5d3c96f 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -64,6 +64,16 @@
 			box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-block-styles__item-text {
+		word-break: break-all;
+		// The Button component is white-space: nowrap, and that won't work with line-clamp.
+		white-space: normal;
+
+		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+		text-align: start;
+		text-align-last: center;
+	}
 }
 
 // To prevent overflow in the preview container,
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 32c32c1258f22c..f848efca0e688b 100644
--- a/packages/block-editor/src/components/border-radius-control/index.js
+++ b/packages/block-editor/src/components/border-radius-control/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	BaseControl,
 	RangeControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -70,7 +71,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 
 	return (
 		<fieldset className="components-border-radius-control">
-			<legend>{ __( 'Radius' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Radius' ) }
+			</BaseControl.VisualLabel>
 			<div className="components-border-radius-control__wrapper">
 				{ isLinked ? (
 					<>
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 5b063aa3fd9b37..172121132b2436 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
@@ -4,6 +4,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .components-panel__row .emotion-2 {
@@ -36,8 +43,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-8 {
@@ -140,100 +152,104 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
           </div>
         </legend>
         <div
-          className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-          data-wp-c16t={true}
-          data-wp-component="VStack"
+          className="block-editor-color-gradient-control__panel"
         >
           <div
-            className="components-dropdown"
-            tabIndex="-1"
+            className="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\\"."
-              className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-              data-wp-c16t={true}
-              data-wp-component="Flex"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                  "color": "#000",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              <span
-                className="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
-                className="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\\"."
+                className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
                 data-wp-c16t={true}
-                data-wp-component="FlexItem"
+                data-wp-component="Flex"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
               >
-                f00
-              </span>
-            </button>
-          </div>
-          <div
-            className="components-circular-option-picker"
-          >
+                <span
+                  className="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
+                  className="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
-              className="components-circular-option-picker__swatches"
+              className="components-circular-option-picker"
             >
               <div
-                className="components-circular-option-picker__option-wrapper"
+                className="components-circular-option-picker__swatches"
+              >
+                <div
+                  className="components-circular-option-picker__option-wrapper"
+                >
+                  <button
+                    aria-describedby={null}
+                    aria-label="Color: red"
+                    aria-pressed={true}
+                    className="components-button components-circular-option-picker__option is-pressed"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
+                    style={
+                      Object {
+                        "backgroundColor": "#f00",
+                        "color": "#f00",
+                      }
+                    }
+                    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"
+                  >
+                    <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
+                className="components-circular-option-picker__custom-clear-wrapper"
               >
                 <button
                   aria-describedby={null}
-                  aria-label="Color: red"
-                  aria-pressed={true}
-                  className="components-button components-circular-option-picker__option is-pressed"
-                  onBlur={[Function]}
+                  className="components-button components-circular-option-picker__clear is-tertiary"
                   onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseEnter={[Function]}
-                  onMouseLeave={[Function]}
-                  style={
-                    Object {
-                      "backgroundColor": "#f00",
-                      "color": "#f00",
-                    }
-                  }
                   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"
                 >
-                  <path
-                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                  />
-                </svg>
+                  Clear
+                </button>
               </div>
             </div>
-            <div
-              className="components-circular-option-picker__custom-clear-wrapper"
-            >
-              <button
-                aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-tertiary"
-                onClick={[Function]}
-                type="button"
-              >
-                Clear
-              </button>
-            </div>
           </div>
         </div>
       </div>
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index 12d519aa474d30..241da40d5aa3a0 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -29,7 +29,7 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid color',
+	title: 'Solid',
 	value: 'color',
 };
 const TAB_GRADIENT = {
@@ -113,6 +113,12 @@ function ColorGradientControlInner( {
 		),
 	};
 
+	const renderPanelType = ( type ) => (
+		<div className="block-editor-color-gradient-control__panel">
+			{ tabPanels[ type ] }
+		</div>
+	);
+
 	return (
 		<BaseControl
 			__nextHasNoMarginBottom
@@ -142,15 +148,13 @@ function ColorGradientControlInner( {
 									: !! canChooseAColor && TAB_COLOR.value
 							}
 						>
-							{ ( tab ) => (
-								<div className="block-editor-color-gradient-control__tab-panel">
-									{ tabPanels[ tab.value ] }
-								</div>
-							) }
+							{ ( tab ) => renderPanelType( tab.value ) }
 						</TabPanel>
 					) }
-					{ ! canChooseAGradient && tabPanels[ TAB_COLOR.value ] }
-					{ ! canChooseAColor && tabPanels[ TAB_GRADIENT.value ] }
+					{ ! canChooseAGradient &&
+						renderPanelType( TAB_COLOR.value ) }
+					{ ! canChooseAColor &&
+						renderPanelType( TAB_GRADIENT.value ) }
 				</VStack>
 			</fieldset>
 		</BaseControl>
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index 4349cbb6f49cae..4de8891a97be9d 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -163,7 +163,7 @@ export default function ColorGradientSettingsDropdown( {
 								className="block-editor-tools-panel-color-gradient-settings__dropdown"
 								renderToggle={ renderToggle( toggleSettings ) }
 								renderContent={ () => (
-									<DropdownContentWrapper paddingSize="medium">
+									<DropdownContentWrapper paddingSize="none">
 										<div className="block-editor-panel-color-gradient-settings__dropdown-content">
 											<ColorGradientControl
 												{ ...controlProps }
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index fcbdaef266107a..5d86252105acfe 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -15,6 +15,12 @@ $swatch-gap: 12px;
 	min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs {
+	.block-editor-color-gradient-control__panel {
+		padding: $grid-unit-20;
+	}
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings {
 	&,
 	& > div:not(:first-of-type) {
@@ -41,7 +47,13 @@ $swatch-gap: 12px;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content {
-	width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ); // Ensure the popover perfectly wraps the swatches.
+	.block-editor-color-gradient-control__panel {
+		$panelPadding: $grid-unit-20;
+
+		// Ensure the popover perfectly wraps the swatches.
+		width: ( $swatch-size * 6 ) + ( $swatch-gap * 5 ) + ( $panelPadding * 2 );
+		padding: $panelPadding;
+	}
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -113,7 +125,3 @@ $swatch-gap: 12px;
 		flex-shrink: 0;
 	}
 }
-
-.block-editor-color-gradient-control__tab-panel {
-	padding-top: $grid-unit-10;
-}
diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
index e926842d4428f0..f9b792a818cd4a 100644
--- a/packages/block-editor/src/components/colors-gradients/test/control.js
+++ b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -53,7 +53,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is showing the two tab buttons.
 		expect(
-			screen.getByRole( 'tab', { name: 'Solid color' } )
+			screen.getByRole( 'tab', { name: 'Solid' } )
 		).toBeInTheDocument();
 		expect(
 			screen.getByRole( 'tab', { name: 'Gradient' } )
@@ -86,7 +86,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
@@ -133,7 +133,7 @@ describe( 'ColorPaletteControl', () => {
 
 		// Is not showing the two tab buttons.
 		expect(
-			screen.queryByRole( 'tab', { name: 'Solid color' } )
+			screen.queryByRole( 'tab', { name: 'Solid' } )
 		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Gradient' } )
diff --git a/packages/block-editor/src/components/colors/utils.js b/packages/block-editor/src/components/colors/utils.js
index 95c81cbfbd94e5..e22b5ed8661d36 100644
--- a/packages/block-editor/src/components/colors/utils.js
+++ b/packages/block-editor/src/components/colors/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, maxBy } from 'lodash';
+import { find, kebabCase } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -77,6 +77,9 @@ export function getColorClassName( colorContextName, colorSlug ) {
  */
 export function getMostReadableColor( colors, colorValue ) {
 	const colordColor = colord( colorValue );
-	return maxBy( colors, ( { color } ) => colordColor.contrast( color ) )
+	const getColorContrast = ( { color } ) => colordColor.contrast( color );
+
+	const maxContrast = Math.max( ...colors.map( getColorContrast ) );
+	return colors.find( ( color ) => getColorContrast( color ) === maxContrast )
 		.color;
 }
diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 1f0944aaa11597..5e7a4de57ca343 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -88,6 +88,7 @@ export default function FontAppearanceControl( props ) {
 		hasFontStyles = true,
 		hasFontWeights = true,
 		value: { fontStyle, fontWeight },
+		...otherProps
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
 	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
@@ -205,6 +206,7 @@ export default function FontAppearanceControl( props ) {
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
+				{ ...otherProps }
 				className="components-font-appearance-control"
 				label={ label }
 				describedBy={ getDescribedBy() }
@@ -213,6 +215,7 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
+				__nextUnconstrainedWidth
 			/>
 		)
 	);
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index cf1967e429cbf5..5acd5e44f05dd0 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -147,7 +147,10 @@ export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
index 608d230503b679..68218c374cb03c 100644
--- a/packages/block-editor/src/components/index.native.js
+++ b/packages/block-editor/src/components/index.native.js
@@ -59,7 +59,10 @@ export { default as Caption } from './caption';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as useSetting } from './use-setting';
-export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
+export {
+	RecursionProvider as __experimentalRecursionProvider,
+	useHasRecursion as __experimentalUseHasRecursion,
+} from './recursion-provider';
 export { default as Warning } from './warning';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as useMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js
index 8c7eac72aba25f..7dcc0fdbef0e13 100644
--- a/packages/block-editor/src/components/inserter/index.native.js
+++ b/packages/block-editor/src/components/inserter/index.native.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { AccessibilityInfo, Platform, Text } from 'react-native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -80,6 +79,8 @@ const defaultRenderToggle = ( {
 };
 
 export class Inserter extends Component {
+	announcementTimeout;
+
 	constructor() {
 		super( ...arguments );
 
@@ -88,6 +89,10 @@ export class Inserter extends Component {
 		this.renderContent = this.renderContent.bind( this );
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.announcementTimeout );
+	}
+
 	getInsertionOptions() {
 		const addBeforeOption = {
 			value: 'before',
@@ -217,7 +222,7 @@ export class Inserter extends Component {
 				const announcement = isOpen
 					? __( 'Scrollable block menu opened. Select a block.' )
 					: __( 'Scrollable block menu closed.' );
-				delay(
+				this.announcementTimeout = setTimeout(
 					() =>
 						AccessibilityInfo.announceForAccessibility(
 							announcement
diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
index 1e3958b4853013..c2f8da7a6001b2 100644
--- a/packages/block-editor/src/components/inserter/search-items.js
+++ b/packages/block-editor/src/components/inserter/search-items.js
@@ -1,7 +1,9 @@
 /**
  * External dependencies
  */
-import { deburr, find, words } from 'lodash';
+import { noCase } from 'change-case';
+import removeAccents from 'remove-accents';
+import { find } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -21,7 +23,7 @@ const defaultGetCollection = () => null;
 function normalizeSearchInput( input = '' ) {
 	// Disregard diacritics.
 	//  Input: "média"
-	input = deburr( input );
+	input = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
@@ -34,6 +36,17 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
+/**
+ * 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 ).split( ' ' ).filter( Boolean );
+}
+
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -42,8 +55,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	// Extract words.
-	return words( normalizeSearchInput( input ) );
+	return extractWords( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -150,7 +162,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/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
index dac792b2eb3bd4..0b67a74cda0cd2 100644
--- a/packages/block-editor/src/components/letter-spacing-control/index.js
+++ b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -26,6 +26,7 @@ export default function LetterSpacingControl( {
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
@@ -33,6 +34,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
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 4daa12b49ca829..127668002c7ac1 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -21,6 +21,7 @@ const LineHeightControl = ( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
+	...otherProps
 } ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
 
@@ -89,6 +90,7 @@ const LineHeightControl = ( {
 			style={ deprecatedStyles }
 		>
 			<NumberControl
+				{ ...otherProps }
 				__unstableInputWidth={ __unstableInputWidth }
 				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }
diff --git a/packages/block-editor/src/components/link-control/is-url-like.js b/packages/block-editor/src/components/link-control/is-url-like.js
index fe44da9fcdbdbb..3021ace38a26e1 100644
--- a/packages/block-editor/src/components/link-control/is-url-like.js
+++ b/packages/block-editor/src/components/link-control/is-url-like.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,6 @@ import { isURL } from '@wordpress/url';
  * @return {boolean} whether or not the value is potentially a URL.
  */
 export default function isURLLike( val ) {
-	const isInternal = startsWith( val, '#' );
+	const isInternal = val?.startsWith( '#' );
 	return isURL( val ) || ( val && val.includes( 'www.' ) ) || isInternal;
 }
diff --git a/packages/block-editor/src/components/link-control/use-search-handler.js b/packages/block-editor/src/components/link-control/use-search-handler.js
index b176268f90a650..47c20ed60b8e32 100644
--- a/packages/block-editor/src/components/link-control/use-search-handler.js
+++ b/packages/block-editor/src/components/link-control/use-search-handler.js
@@ -5,11 +5,6 @@ import { getProtocol, prependHTTP } from '@wordpress/url';
 import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
-/**
- * External dependencies
- */
-import { startsWith } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -38,7 +33,7 @@ export const handleDirectEntry = ( val ) => {
 		type = TEL_TYPE;
 	}
 
-	if ( startsWith( val, '#' ) ) {
+	if ( val?.startsWith( '#' ) ) {
 		type = INTERNAL_TYPE;
 	}
 
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
index 661bbec4dbfc46..9477eb2cda40c0 100644
--- a/packages/block-editor/src/components/list-view/block-select-button.js
+++ b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -90,8 +90,13 @@ function ListViewBlockSelectButton(
 						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
 					{ blockInformation?.anchor && (
-						<span className="block-editor-list-view-block-select-button__anchor">
-							{ blockInformation.anchor }
+						<span className="block-editor-list-view-block-select-button__anchor-wrapper">
+							<Truncate
+								className="block-editor-list-view-block-select-button__anchor"
+								ellipsizeMode="auto"
+							>
+								{ blockInformation.anchor }
+							</Truncate>
 						</span>
 					) }
 					{ isLocked && (
diff --git a/packages/block-editor/src/components/list-view/expander.js b/packages/block-editor/src/components/list-view/expander.js
index 7512689b9cdb1c..3b93f8ad01185c 100644
--- a/packages/block-editor/src/components/list-view/expander.js
+++ b/packages/block-editor/src/components/list-view/expander.js
@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { chevronRightSmall, Icon } from '@wordpress/icons';
+import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
+import { isRTL } from '@wordpress/i18n';
+
 export default function ListViewExpander( { onClick } ) {
 	return (
 		// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
@@ -18,7 +20,7 @@ export default function ListViewExpander( { onClick } ) {
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }
 			aria-hidden="true"
 		>
-			<Icon icon={ chevronRightSmall } />
+			<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />
 		</span>
 	);
 }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 4fce1136bdbd5a..ce5539dbe3aa7f 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -312,14 +312,21 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__anchor-wrapper {
+		position: relative;
+		max-width: min(110px, 40%);
+		width: 100%;
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
+		position: absolute;
+		right: 0;
+		transform: translateY(-50%);
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
-		display: inline-block;
 		padding: 2px 6px;
-		max-width: min(100px, 40%);
-		overflow: hidden;
-		text-overflow: ellipsis;
+		max-width: 100%;
+		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
diff --git a/packages/block-editor/src/components/media-upload/index.native.js b/packages/block-editor/src/components/media-upload/index.native.js
index d8303e44e39d3d..75bc716a3e1f69 100644
--- a/packages/block-editor/src/components/media-upload/index.native.js
+++ b/packages/block-editor/src/components/media-upload/index.native.js
@@ -3,8 +3,6 @@
  */
 import { Platform } from 'react-native';
 
-import { delay } from 'lodash';
-
 import prompt from 'react-native-prompt-android';
 
 /**
@@ -46,6 +44,8 @@ const URL_MEDIA_SOURCE = 'URL';
 const PICKER_OPENING_DELAY = 200;
 
 export class MediaUpload extends Component {
+	pickerTimeout;
+
 	constructor( props ) {
 		super( props );
 		this.onPickerPresent = this.onPickerPresent.bind( this );
@@ -78,6 +78,10 @@ export class MediaUpload extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		clearTimeout( this.pickerTimeout );
+	}
+
 	getAllSources() {
 		const { onSelectURL } = this.props;
 
@@ -189,7 +193,7 @@ export class MediaUpload extends Component {
 			// the delay below is required because on iOS this action sheet gets dismissed by the close event of the Inserter
 			// so this delay allows the Inserter to be closed fully before presenting action sheet.
 			if ( autoOpen && isIOS ) {
-				delay(
+				this.pickerTimeout = setTimeout(
 					() => this.picker.presentPicker(),
 					PICKER_OPENING_DELAY
 				);
diff --git a/packages/block-editor/src/components/use-no-recursive-renders/index.js b/packages/block-editor/src/components/recursion-provider/index.js
similarity index 53%
rename from packages/block-editor/src/components/use-no-recursive-renders/index.js
rename to packages/block-editor/src/components/recursion-provider/index.js
index c5339b048330a7..2c38087a8731d4 100644
--- a/packages/block-editor/src/components/use-no-recursive-renders/index.js
+++ b/packages/block-editor/src/components/recursion-provider/index.js
@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useMemo,
-} from '@wordpress/element';
+import { createContext, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -37,37 +32,53 @@ function addToBlockType( renderedBlocks, blockName, uniqueId ) {
 }
 
 /**
- * A React hook for keeping track of blocks previously rendered up in the block
- * tree. Blocks susceptible to recursion can use this hook in their `Edit`
- * function to prevent said recursion.
+ * A React context provider for use with the `useHasRecursion` hook to prevent recursive
+ * renders.
  *
- * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
- * @param {string} blockName Optional block name.
+ * Wrap block content with this provider and provide the same `uniqueId` prop as used
+ * with `useHasRecursion`.
+ *
+ * @param {Object}      props
+ * @param {*}           props.uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string}      props.blockName Optional block name.
+ * @param {JSX.Element} props.children  React children.
  *
- * @return {[boolean, Function]} A tuple of:
- *                               - a boolean describing whether the provided id
- *                                 has already been rendered;
- *                               - a React context provider to be used to wrap
- *                                 other elements.
+ * @return {JSX.Element} A React element.
  */
-export default function useNoRecursiveRenders( uniqueId, blockName = '' ) {
+export function RecursionProvider( { children, uniqueId, blockName = '' } ) {
 	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
 	const { name } = useBlockEditContext();
+
 	blockName = blockName || name;
-	const hasAlreadyRendered = Boolean(
-		previouslyRenderedBlocks[ blockName ]?.has( uniqueId )
-	);
+
 	const newRenderedBlocks = useMemo(
 		() => addToBlockType( previouslyRenderedBlocks, blockName, uniqueId ),
 		[ previouslyRenderedBlocks, blockName, uniqueId ]
 	);
-	const Provider = useCallback(
-		( { children } ) => (
-			<RenderedRefsContext.Provider value={ newRenderedBlocks }>
-				{ children }
-			</RenderedRefsContext.Provider>
-		),
-		[ newRenderedBlocks ]
+
+	return (
+		<RenderedRefsContext.Provider value={ newRenderedBlocks }>
+			{ children }
+		</RenderedRefsContext.Provider>
 	);
-	return [ hasAlreadyRendered, Provider ];
+}
+
+/**
+ * A React hook for keeping track of blocks previously rendered up in the block
+ * tree. Blocks susceptible to recursion can use this hook in their `Edit`
+ * function to prevent said recursion.
+ *
+ * Use this with the `RecursionProvider` component, using the same `uniqueId` value
+ * for both the hook and the provider.
+ *
+ * @param {*}      uniqueId  Any value that acts as a unique identifier for a block instance.
+ * @param {string} blockName Optional block name.
+ *
+ * @return {boolean} A boolean describing whether the provided id has already been rendered.
+ */
+export function useHasRecursion( uniqueId, blockName = '' ) {
+	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
+	const { name } = useBlockEditContext();
+	blockName = blockName || name;
+	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }
diff --git a/packages/block-editor/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js b/packages/block-editor/src/components/recursion-provider/test/index.js
similarity index 93%
rename from packages/block-editor/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js
rename to packages/block-editor/src/components/recursion-provider/test/index.js
index 57de2b7c8f0c27..d2b4a06bce7954 100644
--- a/packages/block-editor/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js
+++ b/packages/block-editor/src/components/recursion-provider/test/index.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import useNoRecursiveRenders from '../';
+import { useHasRecursion, RecursionProvider } from '..';
 import {
 	BlockEditContextProvider,
 	useBlockEditContext,
@@ -16,15 +16,14 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( uniqueId );
+	const hasRecursion = useHasRecursion( uniqueId );
 
-	if ( hasAlreadyRendered ) {
+	if ( hasRecursion ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ uniqueId }>
 			<div className={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
@@ -48,7 +47,7 @@ function Edit( { attributes: { uniqueId } } ) {
 	);
 }
 
-describe( 'useNoRecursiveRenders', () => {
+describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {
diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js
index 0232b68a2a671c..2c21f63ee8c27f 100644
--- a/packages/block-editor/src/components/rich-text/index.native.js
+++ b/packages/block-editor/src/components/rich-text/index.native.js
@@ -113,6 +113,7 @@ function RichTextWrapper(
 		setRef,
 		disableSuggestions,
 		disableAutocorrection,
+		containerWidth,
 		...props
 	},
 	forwardedRef
@@ -639,6 +640,7 @@ function RichTextWrapper(
 			setRef={ setRef }
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
+			containerWidth={ containerWidth }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.
diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index 6e8695ca050811..9edfb9b4a0195c 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -30,7 +30,9 @@ const TEXT_DECORATIONS = [
 export default function TextDecorationControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-decoration-control">
-			<legend>{ __( 'Decoration' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Decoration' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-decoration-control__buttons">
 				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
 					return (
diff --git a/packages/block-editor/src/components/text-transform-control/index.js b/packages/block-editor/src/components/text-transform-control/index.js
index 262484d843a3b3..6d85ae7b421b7a 100644
--- a/packages/block-editor/src/components/text-transform-control/index.js
+++ b/packages/block-editor/src/components/text-transform-control/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
 	formatCapitalize,
@@ -39,7 +39,9 @@ const TEXT_TRANSFORMS = [
 export default function TextTransformControl( { value, onChange } ) {
 	return (
 		<fieldset className="block-editor-text-transform-control">
-			<legend>{ __( 'Letter case' ) }</legend>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Letter case' ) }
+			</BaseControl.VisualLabel>
 			<div className="block-editor-text-transform-control__buttons">
 				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
 					return (
diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
index 1066b50e1ed2bf..f3680358c436a9 100644
--- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js
+++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js
@@ -51,6 +51,7 @@ const ImageURLInputUI = ( {
 	rel,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
+	const buttonRef = useRef( null );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
 	} );
@@ -245,9 +246,11 @@ const ImageURLInputUI = ( {
 				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
+				ref={ buttonRef }
 			/>
 			{ isOpen && (
 				<URLPopover
+					anchorRef={ buttonRef }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={ () => advancedOptions }
diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
index 33755073af8882..ea3e1888ce3104 100644
--- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js
@@ -17,7 +17,7 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { isInSameBlock } from '../../utils/dom';
+import { getBlockClientId } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -130,11 +130,8 @@ export function getClosestTabbable(
 
 export default function useArrowNav() {
 	const {
-		getSelectedBlockClientId,
 		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
 		getSettings,
 		hasMultiSelection,
 		__unstableIsFullySelected,
@@ -150,26 +147,13 @@ export default function useArrowNav() {
 			verticalRect = null;
 		}
 
-		/**
-		 * Returns true if the given target field is the last in its block which
-		 * can be considered for tab transition. For example, in a block with
-		 * two text fields, this would return true when reversing from the first
-		 * of the two fields, but false when reversing from the second.
-		 *
-		 * @param {Element} target    Currently focused text field.
-		 * @param {boolean} isReverse True if considering as the first field.
-		 *
-		 * @return {boolean} Whether field is at edge for tab transition.
-		 */
-		function isTabbableEdge( target, isReverse ) {
+		function isClosestTabbableABlock( target, isReverse ) {
 			const closestTabbable = getClosestTabbable(
 				target,
 				isReverse,
 				node
 			);
-			return (
-				! closestTabbable || ! isInSameBlock( target, closestTabbable )
-			);
+			return closestTabbable && getBlockClientId( closestTabbable );
 		}
 
 		function onKeyDown( event ) {
@@ -254,23 +238,10 @@ export default function useArrowNav() {
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
 			const { keepCaretInsideBlock } = getSettings();
-			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId =
-					getMultiSelectedBlocksEndClientId();
-				const selectionBeforeEndClientId = getPreviousBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-				const selectionAfterEndClientId = getNextBlockClientId(
-					selectionEndClientId || selectedBlockClientId
-				);
-
 				if (
-					// Ensure that there is a target block.
-					( ( isReverse && selectionBeforeEndClientId ) ||
-						( ! isReverse && selectionAfterEndClientId ) ) &&
-					isTabbableEdge( target, isReverse ) &&
+					isClosestTabbableABlock( target, isReverse ) &&
 					isNavEdge( target, isReverse )
 				) {
 					node.contentEditable = true;
diff --git a/packages/block-editor/src/components/writing-flow/use-selection-observer.js b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
index bb96f19a996b99..3d20c59ba80ab3 100644
--- a/packages/block-editor/src/components/writing-flow/use-selection-observer.js
+++ b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
@@ -25,7 +25,11 @@ function extractSelectionStartNode( selection ) {
 		return anchorNode;
 	}
 
-	return anchorNode.childNodes[ anchorOffset ];
+	if ( anchorOffset === 0 ) {
+		return anchorNode;
+	}
+
+	return anchorNode.childNodes[ anchorOffset - 1 ];
 }
 
 /**
@@ -44,7 +48,11 @@ function extractSelectionEndNode( selection ) {
 		return focusNode;
 	}
 
-	return focusNode.childNodes[ focusOffset - 1 ];
+	if ( focusOffset === focusNode.childNodes.length ) {
+		return focusNode;
+	}
+
+	return focusNode.childNodes[ focusOffset ];
 }
 
 function findDepth( a, b ) {
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 81cc023bab78ca..ffaf5d46157831 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -268,10 +268,10 @@ export function BorderPanel( props ) {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha={ true }
+						enableStyle={ isStyleSupported }
 						onChange={ onBorderChange }
-						popoverPlacement="left-start"
 						popoverOffset={ 40 }
-						showStyle={ isStyleSupported }
+						popoverPlacement="left-start"
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
diff --git a/packages/block-editor/src/utils/block-variation-transforms.js b/packages/block-editor/src/utils/block-variation-transforms.js
index 19f8e05c822056..7b1dd2068f84a3 100644
--- a/packages/block-editor/src/utils/block-variation-transforms.js
+++ b/packages/block-editor/src/utils/block-variation-transforms.js
@@ -1,10 +1,17 @@
-/**
- * External dependencies
- */
-import { isMatch } from 'lodash';
-
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
+function matchesAttributes( blockAttributes, variation ) {
+	return Object.entries( variation ).every( ( [ key, value ] ) => {
+		if (
+			typeof value === 'object' &&
+			typeof blockAttributes[ key ] === 'object'
+		) {
+			return matchesAttributes( blockAttributes[ key ], value );
+		}
+		return blockAttributes[ key ] === value;
+	} );
+}
+
 /**
  * Matches the provided block variations with a block's attributes. If no match
  * or more than one matches are found it returns `undefined`. If a single match is
@@ -24,7 +31,7 @@ export const __experimentalGetMatchingVariation = (
 	if ( ! variations || ! blockAttributes ) return;
 	const matches = variations.filter( ( { attributes } ) => {
 		if ( ! attributes || ! Object.keys( attributes ).length ) return false;
-		return isMatch( blockAttributes, attributes );
+		return matchesAttributes( blockAttributes, attributes );
 	} );
 	if ( matches.length !== 1 ) return;
 	return matches[ 0 ];
diff --git a/packages/block-editor/src/utils/test/block-variation-transforms.js b/packages/block-editor/src/utils/test/block-variation-transforms.js
index 17c82bdb951329..47844ba0309426 100644
--- a/packages/block-editor/src/utils/test/block-variation-transforms.js
+++ b/packages/block-editor/src/utils/test/block-variation-transforms.js
@@ -40,6 +40,18 @@ describe( 'getMatchingVariation', () => {
 				getMatchingVariation( { level: 1, other: 'prop' }, variations )
 			).toBeUndefined();
 		} );
+		it( 'when variation has a nested attribute', () => {
+			const variations = [
+				{ name: 'one', attributes: { query: { author: 'somebody' } } },
+				{ name: 'two', attributes: { query: { author: 'nobody' } } },
+			];
+			expect(
+				getMatchingVariation(
+					{ query: { author: 'foobar' }, other: 'prop' },
+					variations
+				)
+			).toBeUndefined();
+		} );
 	} );
 	describe( 'should find a match', () => {
 		it( 'when variation has one attribute', () => {
@@ -66,5 +78,17 @@ describe( 'getMatchingVariation', () => {
 				).name
 			).toEqual( 'one' );
 		} );
+		it( 'when variation has a nested attribute', () => {
+			const variations = [
+				{ name: 'one', attributes: { query: { author: 'somebody' } } },
+				{ name: 'two', attributes: { query: { author: 'nobody' } } },
+			];
+			expect(
+				getMatchingVariation(
+					{ query: { author: 'somebody' }, other: 'prop' },
+					variations
+				).name
+			).toEqual( 'one' );
+		} );
 	} );
 } );
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 556a5bf19c5bc2..b4a4f1b1d8f252 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -66,7 +66,6 @@
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
-		"moment": "^2.22.1",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
index e75aafbbe0327a..d40c4618365c44 100644
--- a/packages/block-library/src/archives/block.json
+++ b/packages/block-library/src/archives/block.json
@@ -11,6 +11,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
+		},
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false
diff --git a/packages/block-library/src/archives/edit.js b/packages/block-library/src/archives/edit.js
index 29486787ae2d9a..c89b5894ed6ed1 100644
--- a/packages/block-library/src/archives/edit.js
+++ b/packages/block-library/src/archives/edit.js
@@ -12,7 +12,7 @@ import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 
 export default function ArchivesEdit( { attributes, setAttributes } ) {
-	const { showPostCounts, displayAsDropdown, type } = attributes;
+	const { showLabel, showPostCounts, displayAsDropdown, type } = attributes;
 
 	return (
 		<>
@@ -27,6 +27,17 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 							} )
 						}
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ () =>
+								setAttributes( {
+									showLabel: ! showLabel,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
diff --git a/packages/block-library/src/archives/index.php b/packages/block-library/src/archives/index.php
index 220f0f3229b1b3..afbf400fedba80 100644
--- a/packages/block-library/src/archives/index.php
+++ b/packages/block-library/src/archives/index.php
@@ -62,9 +62,11 @@ function render_block_core_archives( $attributes ) {
 				break;
 		}
 
-		$block_content = '<label for="' . esc_attr( $dropdown_id ) . '">' . esc_html( $title ) . '</label>
-	<select id="' . esc_attr( $dropdown_id ) . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
-	<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
+		$show_label = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+
+		$block_content = '<label for="' . $dropdown_id . '" class="wp-block-archives__label' . $show_label . '">' . esc_html( $title ) . '</label>
+		<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+		<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
 
 		return sprintf(
 			'<div %1$s>%2$s</div>',
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
index 6607aa41ddcaf2..4a72a64f314b4a 100644
--- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -97,7 +97,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -277,7 +284,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js
index eb80cdcfe8e7e3..2e9eefedbc19b8 100644
--- a/packages/block-library/src/block/edit.js
+++ b/packages/block-library/src/block/edit.js
@@ -18,7 +18,8 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
@@ -31,8 +32,7 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -110,7 +110,7 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			{ canRemove && (
 				<BlockControls>
 					<ToolbarGroup>
diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
index 6cd3ae6e3192ee..f6e49bf1be0f01 100644
--- a/packages/block-library/src/block/edit.native.js
+++ b/packages/block-library/src/block/edit.native.js
@@ -27,7 +27,8 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	InnerBlocks,
 	Warning,
 	store as blockEditorStore,
@@ -48,8 +49,7 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( ref );
+	const hasAlreadyRendered = useHasRecursion( ref );
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -214,7 +214,7 @@ export default function ReusableBlockEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ ref }>
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index f86030c7460a57..d4a4f308721f82 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -89,7 +89,7 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button .wp-block-button__link"
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index e5544d7e148083..984027ddbd93a1 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -102,18 +102,18 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.is-style-outline > :where(.wp-block-button__link),
-:where(.wp-block-button__link).is-style-outline {
+.wp-block-button.is-style-outline > .wp-block-button__link,
+.wp-block-button .wp-block-button__link.is-style-outline {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }
 
-.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
 	color: currentColor;
 }
 
-.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button__link.is-style-outline:not(.has-background) {
+.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;
 }
diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js
index 5ee7fe14ed072d..a60a18d8eeae8e 100644
--- a/packages/block-library/src/calendar/edit.js
+++ b/packages/block-library/src/calendar/edit.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import moment from 'moment';
 import memoize from 'memize';
 
 /**
@@ -15,14 +14,22 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Returns the year and month of a specified date.
+ *
+ * @see `WP_REST_Posts_Controller::prepare_date_response()`.
+ *
+ * @param {string} date Date in `ISO8601/RFC3339` format.
+ * @return {Object} Year and date of the specified date.
+ */
 const getYearMonth = memoize( ( date ) => {
 	if ( ! date ) {
 		return {};
 	}
-	const momentDate = moment( date );
+	const dateObj = new Date( date );
 	return {
-		year: momentDate.year(),
-		month: momentDate.month() + 1,
+		year: dateObj.getFullYear(),
+		month: dateObj.getMonth() + 1,
 	};
 } );
 
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 306ab96709df84..4f62e227d890e2 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { times, map, delay } from 'lodash';
+import { times, map } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -496,7 +496,9 @@ const ColumnsEdit = ( props ) => {
 
 	useEffect( () => {
 		if ( isSelected && isDefaultColumns ) {
-			delay( () => setIsVisible( true ), 100 );
+			const revealTimeout = setTimeout( () => setIsVisible( true ), 100 );
+
+			return () => clearTimeout( revealTimeout );
 		}
 	}, [] );
 
diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php
index b67b4823027a38..4168d267671f7d 100644
--- a/packages/block-library/src/cover/index.php
+++ b/packages/block-library/src/cover/index.php
@@ -8,8 +8,8 @@
 /**
  * Renders the `core/cover` block on server.
  *
- * @param array $attributes The block attributes.
- * @param array $content    The block rendered content.
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block rendered content.
  *
  * @return string Returns the cover block markup, if useFeaturedImage is true.
  */
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index c28f099b485235..0e18d28372764e 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -72,8 +72,9 @@ export function attributesFromMedia( setAttributes, dimRatio ) {
 			id: media.id,
 			alt: media?.alt,
 			backgroundType: mediaType,
+			focalPoint: undefined,
 			...( mediaType === VIDEO_BACKGROUND_TYPE
-				? { focalPoint: undefined, hasParallax: undefined }
+				? { hasParallax: undefined }
 				: {} ),
 		} );
 	};
diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
index 34a76a0e65096c..080c6fa338f8b2 100644
--- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -54,7 +54,14 @@ exports[`File block renders file error state without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -144,7 +151,14 @@ exports[`File block renders file error state without crashing 1`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -262,7 +276,14 @@ exports[`File block renders file without crashing 1`] = `
         }
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
@@ -334,7 +355,14 @@ exports[`File block renders file without crashing 1`] = `
         ]
       }
     >
-      <View>
+      <View
+        style={
+          Array [
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <RCTAztecView
           accessible={true}
           activeFormats={Array []}
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 4f8d6282df9fef..fedf4a9bb3e594 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -31,6 +31,7 @@
 		"anchor": true,
 		"className": false,
 		"color": {
+			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
index 5109cc228ee38f..4d13dd1939e4c5 100644
--- a/packages/block-library/src/home-link/edit.js
+++ b/packages/block-library/src/home-link/edit.js
@@ -6,31 +6,29 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useEffect } from '@wordpress/element';
 
 const preventDefault = ( event ) => event.preventDefault();
 
-export default function HomeEdit( {
-	attributes,
-	setAttributes,
-	context,
-	clientId,
-} ) {
-	const { homeUrl } = useSelect(
-		( select ) => {
-			const {
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			return {
-				homeUrl: getUnstableBase()?.home,
-			};
-		},
-		[ clientId ]
-	);
+export default function HomeEdit( { attributes, setAttributes, context } ) {
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
@@ -50,9 +48,10 @@ export default function HomeEdit( {
 
 	useEffect( () => {
 		if ( label === undefined ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { label: __( 'Home' ) } );
 		}
-	}, [ clientId, label ] );
+	}, [ label ] );
 
 	return (
 		<>
diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php
index 56712913aa2019..55b4884ea95901 100644
--- a/packages/block-library/src/home-link/index.php
+++ b/packages/block-library/src/home-link/index.php
@@ -89,7 +89,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
  * Builds an array with classes and style for the li wrapper
  *
  * @param  array $context    Home link block context.
- * @return array The li wrapper attributes.
+ * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {
 	$colors          = block_core_home_link_build_css_colors( $context );
@@ -125,24 +125,15 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
-
 	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content" rel="home"' . $aria_current;
-
-	// Start appending HTML attributes to anchor tag.
-	$html .= ' href="' . esc_url( home_url() ) . '"';
-
-	// End appending HTML attributes to anchor tag.
-	$html .= '>';
-
-	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses_post( $attributes['label'] );
-	}
-
-	$html .= '</a></li>';
-	return $html;
+	return sprintf(
+		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" "rel="home"%3$s>%4$s</a><li>',
+		block_core_home_link_build_li_wrapper_attributes( $block->context ),
+		esc_url( home_url() ),
+		$aria_current,
+		wp_kses_post( $attributes['label'] )
+	);
 }
 
 /**
diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js
index e8b748e95e4302..323f46d8751a94 100644
--- a/packages/block-library/src/image/test/edit.native.js
+++ b/packages/block-library/src/image/test/edit.native.js
@@ -7,6 +7,7 @@ import {
 	initializeEditor,
 	getEditorHtml,
 	render,
+	waitFor,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -40,16 +41,6 @@ sendMediaUpload.mockImplementation( ( payload ) => {
 	uploadCallBack( payload );
 } );
 
-/**
- * Immediately invoke delayed functions. A better alternative would be using
- * fake timers and test the delay itself. However, fake timers does not work
- * with our custom waitFor implementation.
- */
-jest.mock( 'lodash', () => {
-	const actual = jest.requireActual( 'lodash' );
-	return { ...actual, delay: ( cb ) => cb() };
-} );
-
 function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
@@ -157,6 +148,9 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor(
+			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
+		);
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 <figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
@@ -183,6 +177,7 @@ describe( 'Image Block', () => {
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
@@ -191,6 +186,7 @@ describe( 'Image Block', () => {
 			'wordpress.org'
 		);
 		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
 		await act( () => clipboardPromise );
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
index 863cd4ef3315d1..cdde10333cf07b 100644
--- a/packages/block-library/src/index.native.js
+++ b/packages/block-library/src/index.native.js
@@ -41,6 +41,7 @@ import * as mediaText from './media-text';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
+import * as listItem from './list-item';
 import * as missing from './missing';
 import * as more from './more';
 import * as nextpage from './nextpage';
@@ -75,6 +76,7 @@ export const coreBlocks = [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -179,6 +181,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once List V2 is released on the web editor.
+function listCheck( listBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
+		listBlock.settings = listBlock?.settingsV2;
+	}
+	return listBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,9 +240,11 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +256,8 @@ export const registerCoreBlocks = () => {
 		video,
 		nextpage,
 		separator,
-		list,
+		listCheck( list, blocksFlags ),
+		listItem,
 		quote,
 		mediaText,
 		preformatted,
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 3454f8f5139f00..3c2d6a30f1c077 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -3,6 +3,11 @@
 	&.is-grid {
 		padding-left: 0;
 	}
+
+	// Apply overflow for post items, so any floated featured images won't crop the focus style.
+	> li {
+		overflow: hidden;
+	}
 }
 
 .wp-block-latest-posts li a > div {
diff --git a/packages/block-library/src/list-item/edit.js b/packages/block-library/src/list-item/edit.js
index 303cade8084549..3447cce9e4bbd1 100644
--- a/packages/block-library/src/list-item/edit.js
+++ b/packages/block-library/src/list-item/edit.js
@@ -30,7 +30,7 @@ import {
 } from './hooks';
 import { convertToListItems } from './utils';
 
-function IndentUI( { clientId } ) {
+export function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
 	const [ canOutdent, outdentListItem ] = useOutdentListItem( clientId );
 
diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js
new file mode 100644
index 00000000000000..2762c28c6024d5
--- /dev/null
+++ b/packages/block-library/src/list-item/edit.native.js
@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSplit, useMerge } from './hooks';
+import { convertToListItems } from './utils';
+import { IndentUI } from './edit.js';
+import styles from './style.scss';
+import ListStyleType from './list-style-type';
+
+export default function ListItemEdit( {
+	attributes,
+	setAttributes,
+	onReplace,
+	clientId,
+	style,
+} ) {
+	const [ contentWidth, setContentWidth ] = useState();
+	const { placeholder, content } = attributes;
+	const {
+		blockIndex,
+		hasInnerBlocks,
+		indentationLevel,
+		numberOfListItems,
+		ordered,
+		reversed,
+		start,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockCount,
+				getBlockIndex,
+				getBlockParentsByBlockName,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			const currentIdentationLevel = getBlockParentsByBlockName(
+				clientId,
+				'core/list-item',
+				true
+			).length;
+			const currentBlockIndex = getBlockIndex( clientId );
+			const blockWithInnerBlocks = getBlockCount( clientId ) > 0;
+			const rootClientId = getBlockRootClientId( clientId );
+			const blockAttributes = getBlockAttributes( rootClientId );
+			const totalListItems = getBlockCount( rootClientId );
+			const {
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			} = blockAttributes || {};
+
+			return {
+				blockIndex: currentBlockIndex,
+				hasInnerBlocks: blockWithInnerBlocks,
+				indentationLevel: currentIdentationLevel,
+				numberOfListItems: totalListItems,
+				ordered: isOrdered,
+				reversed: isReversed,
+				start: startValue,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/list' ],
+		renderAppender: false,
+	} );
+
+	const onSplit = useSplit( clientId );
+	const onMerge = useMerge( clientId );
+	const onLayout = useCallback( ( { nativeEvent } ) => {
+		setContentWidth( ( prevState ) => {
+			const { width } = nativeEvent.layout;
+
+			if ( ! prevState || prevState.width !== width ) {
+				return Math.floor( width );
+			}
+			return prevState;
+		} );
+	}, [] );
+
+	return (
+		<View style={ styles[ 'wp-block-list-item__list-item-parent' ] }>
+			<View style={ styles[ 'wp-block-list-item__list-item' ] }>
+				<View style={ styles[ 'wp-block-list-item__list-item-icon' ] }>
+					<ListStyleType
+						blockIndex={ blockIndex }
+						indentationLevel={ indentationLevel }
+						numberOfListItems={ numberOfListItems }
+						ordered={ ordered }
+						reversed={ reversed }
+						start={ start }
+						style={ style }
+					/>
+				</View>
+				<View
+					style={ styles[ 'wp-block-list-item__list-item-content' ] }
+					onLayout={ onLayout }
+				>
+					<RichText
+						identifier="content"
+						tagName="p"
+						onChange={ ( nextContent ) =>
+							setAttributes( { content: nextContent } )
+						}
+						value={ content }
+						placeholder={ placeholder || __( 'List' ) }
+						onSplit={ onSplit }
+						onMerge={ onMerge }
+						onReplace={ ( blocks, ...args ) => {
+							onReplace( convertToListItems( blocks ), ...args );
+						} }
+						style={ style }
+						deleteEnter={ true }
+						containerWidth={ contentWidth }
+					/>
+				</View>
+			</View>
+			<View { ...innerBlocksProps }></View>
+			<BlockControls group="block">
+				<IndentUI clientId={ clientId } />
+			</BlockControls>
+		</View>
+	);
+}
diff --git a/packages/block-library/src/list-item/icons.native.js b/packages/block-library/src/list-item/icons.native.js
new file mode 100644
index 00000000000000..ee8aebada41ef2
--- /dev/null
+++ b/packages/block-library/src/list-item/icons.native.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/components';
+
+export const circle = ( size, color ) => (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Rect width={ size } height={ size } rx={ size / 2 } fill={ color } />
+	</SVG>
+);
+
+export const circleOutline = ( size, color ) => (
+	<SVG
+		width={ size }
+		height={ size }
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Rect
+			x="0.5"
+			y="0.5"
+			width={ size - 1 }
+			height={ size - 1 }
+			rx={ size / 2 }
+			stroke={ color }
+		/>
+	</SVG>
+);
+
+export const square = ( size, color ) => (
+	<SVG fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Rect width={ size } height={ size } fill={ color } />
+	</SVG>
+);
diff --git a/packages/block-library/src/list-item/list-style-type.native.js b/packages/block-library/src/list-item/list-style-type.native.js
new file mode 100644
index 00000000000000..c3bd787ff29606
--- /dev/null
+++ b/packages/block-library/src/list-item/list-style-type.native.js
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { View, Text } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import { circle, circleOutline, square } from './icons';
+
+const DEFAULT_ICON_SIZE = 6;
+
+function getListNumberIndex( start, blockIndex, reversed, numberOfListItems ) {
+	if ( start ) {
+		return reversed
+			? numberOfListItems - 1 + start - blockIndex
+			: start + blockIndex;
+	}
+
+	if ( reversed ) {
+		return numberOfListItems - blockIndex;
+	}
+
+	return blockIndex + 1;
+}
+
+function OrderedList( {
+	blockIndex,
+	color,
+	fontSize,
+	numberOfListItems,
+	reversed,
+	start,
+	style,
+} ) {
+	const orderedStyles = [
+		styles[ 'wp-block-list-item__list-item-container--ordered' ],
+		Platform.isIOS &&
+			styles[ 'wp-block-list-item__list-item-ordered--default' ],
+		Platform.isIOS &&
+			style?.fontSize &&
+			styles[ 'wp-block-list-item__list-item-ordered--custom' ],
+	];
+	const numberStyle = [ { fontSize, color } ];
+
+	const currentIndex = getListNumberIndex(
+		start,
+		blockIndex,
+		reversed,
+		numberOfListItems
+	);
+
+	return (
+		<View style={ orderedStyles }>
+			<Text style={ numberStyle }>{ currentIndex }.</Text>
+		</View>
+	);
+}
+
+function IconList( { fontSize, color, defaultFontSize, indentationLevel } ) {
+	const iconSize = parseInt(
+		( fontSize * DEFAULT_ICON_SIZE ) / defaultFontSize,
+		10
+	);
+
+	let listIcon = circle( iconSize, color );
+	if ( indentationLevel === 1 ) {
+		listIcon = circleOutline( iconSize, color );
+	} else if ( indentationLevel > 1 ) {
+		listIcon = square( iconSize, color );
+	}
+
+	const listStyles = [
+		styles[ 'wp-block-list-item__list-item-container' ],
+		{ marginTop: fontSize / 2 },
+	];
+
+	return (
+		<View style={ listStyles }>
+			<Icon icon={ listIcon } size={ iconSize } />
+		</View>
+	);
+}
+
+export default function ListStyleType( {
+	blockIndex,
+	indentationLevel,
+	numberOfListItems,
+	ordered,
+	reversed,
+	start,
+	style,
+} ) {
+	let defaultFontSize =
+		styles[ 'wp-block-list-item__list-item--default' ].fontSize;
+
+	if ( style?.baseColors?.typography?.fontSize ) {
+		defaultFontSize = parseInt( style.baseColors.typography.fontSize, 10 );
+	}
+
+	const fontSize = parseInt(
+		style?.fontSize ? style.fontSize : defaultFontSize,
+		10
+	);
+	const defaultColor = style?.baseColors?.color?.text
+		? style.baseColors.color.text
+		: styles[ 'wp-block-list-item__list-item--default' ].color;
+	const color = style?.color ? style.color : defaultColor;
+
+	if ( ordered ) {
+		return (
+			<OrderedList
+				blockIndex={ blockIndex }
+				color={ color }
+				fontSize={ fontSize }
+				numberOfListItems={ numberOfListItems }
+				reversed={ reversed }
+				start={ start }
+				style={ style }
+			/>
+		);
+	}
+
+	return (
+		<IconList
+			color={ color }
+			defaultFontSize={ defaultFontSize }
+			fontSize={ fontSize }
+			indentationLevel={ indentationLevel }
+		/>
+	);
+}
diff --git a/packages/block-library/src/list-item/style.native.scss b/packages/block-library/src/list-item/style.native.scss
new file mode 100644
index 00000000000000..6b4f2dcc04356b
--- /dev/null
+++ b/packages/block-library/src/list-item/style.native.scss
@@ -0,0 +1,45 @@
+.wp-block-list-item__list-item-parent {
+	margin-left: $solid-border-space;
+	margin-right: $solid-border-space;
+}
+
+.wp-block-list-item__nested-blocks {
+	margin-top: 14;
+}
+
+.wp-block-list-item__list-item {
+	flex: 1;
+	flex-direction: row;
+}
+
+.wp-block-list-item__list-item-icon {
+	align-items: center;
+	flex-grow: 0;
+}
+
+.wp-block-list-item__list-item-content {
+	flex-grow: 1;
+	flex-shrink: 1;
+	background-color: transparent;
+}
+
+.wp-block-list-item__list-item--default {
+	color: $black;
+	font-size: $editor-font-size;
+}
+
+.wp-block-list-item__list-item-ordered--default {
+	margin-top: 2;
+}
+
+.wp-block-list-item__list-item-ordered--custom {
+	margin-top: 3;
+}
+
+.wp-block-list-item__list-item-container--ordered {
+	margin-right: 3;
+}
+
+.wp-block-list-item__list-item-container {
+	margin-right: 8;
+}
diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js
index bef6b6558df898..a401d75eb14581 100644
--- a/packages/block-library/src/list/index.js
+++ b/packages/block-library/src/list/index.js
@@ -15,7 +15,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 const settingsV1 = {
 	icon,
diff --git a/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
new file mode 100644
index 00000000000000..3fe53069b1775b
--- /dev/null
+++ b/packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`List V2 block adds one item to the list 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>First list item</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes the indentation level 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 1<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes to ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true} -->
+<ol><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block changes to reverse ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
+<ol reversed><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block inserts block 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block removes the indentation level 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block sets a start value to an ordered list 1`] = `
+"<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
+<ol start=\\"25\\"><!-- wp:list-item -->
+<li>Item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 2</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Item 3</li>
+<!-- /wp:list-item --></ol>
+<!-- /wp:list -->"
+`;
+
+exports[`List V2 block shows different indentation levels 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>List item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item 2<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>List item nested 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item nested 2<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Extra item 1</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>Extra item 2</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item 3</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List block inserts block 1`] = `
+"<!-- wp:list -->
+<ul><li></li></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`List block renders a list with a few items 1`] = `
+"<!-- wp:list -->
+<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
+<!-- /wp:list -->"
+`;
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index 73a15b9604e4dc..62738da807dc4b 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -1,16 +1,520 @@
 /**
  * External dependencies
  */
-import { render } from 'test/helpers';
+import {
+	changeTextOfRichText,
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	waitFor,
+	within,
+} from 'test/helpers';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import ListEdit from '../edit';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
-describe( 'ListEdit component', () => {
-	it( 'renders without crashing', () => {
-		const screen = render( <ListEdit attributes={ {} } /> );
-		expect( screen.container ).toBeTruthy();
+describe( 'List block', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks( {
+			__experimentalEnableListBlockV2: false,
+		} );
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'inserts block', async () => {
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
+
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		fireEvent.press( await waitFor( () => getByText( 'List' ) ) );
+
+		expect( getByA11yLabel( /List Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'renders a list with a few items', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		fireEvent.press( listBlock );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
+
+describe( 'List V2 block', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks( {
+			__experimentalEnableListBlockV2: true,
+		} );
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'inserts block', async () => {
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor();
+
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		fireEvent.press( await waitFor( () => getByText( 'List' ) ) );
+
+		expect( getByA11yLabel( /List Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'adds one item to the list', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li></li><!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const listItemBlock = getByA11yLabel( /List item Block\. Row 1/ );
+		fireEvent.press( listItemBlock );
+
+		const listItemField =
+			within( listBlock ).getByPlaceholderText( 'List' );
+		changeTextOfRichText( listItemField, 'First list item' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'shows different indentation levels', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>List item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>List item 2<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>List item nested 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>List item nested 2<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Extra item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Extra item 2</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>List item 3</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 2/
+		);
+
+		fireEvent(
+			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 350,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( firstNestedLevelBlock );
+
+		// Select second level list
+		const secondNestedLevelBlock = within(
+			firstNestedLevelBlock
+		).getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( secondNestedLevelBlock ).getByTestId(
+				'block-list-wrapper'
+			),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( secondNestedLevelBlock );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes the indentation level', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Item 2</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Select Secont List Item block
+		const listItemBlock = getByA11yLabel( /List item Block\. Row 2/ );
+		fireEvent.press( listItemBlock );
+
+		// Update indentation
+		const indentButton = getByA11yLabel( 'Indent' );
+		fireEvent.press( indentButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'removes the indentation level', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 1<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 2</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list --></li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Select List Item block
+		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+
+		fireEvent(
+			within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 350,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( firstNestedLevelBlock );
+
+		// Select Inner block List
+		const innerBlockList = within( firstNestedLevelBlock ).getByA11yLabel(
+			/List Block\. Row 1/
+		);
+
+		fireEvent(
+			within( innerBlockList ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		// Select nested List Item block
+		const listItemBlock = within( innerBlockList ).getByA11yLabel(
+			/List item Block\. Row 1/
+		);
+		fireEvent.press( listItemBlock );
+
+		// Update indentation
+		const outdentButton = getByA11yLabel( 'Outdent' );
+		fireEvent.press( outdentButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes to ordered list', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Item 2</li>
+		<!-- /wp:list-item -->	
+		<!-- wp:list-item -->
+		<li>Item 3</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Update to ordered list
+		const orderedButton = getByA11yLabel( 'Ordered' );
+		fireEvent.press( orderedButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'changes to reverse ordered list', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Item 2</li>
+		<!-- /wp:list-item -->	
+		<!-- wp:list-item -->
+		<li>Item 3</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Update to ordered list
+		const orderedButton = getByA11yLabel( 'Ordered' );
+		fireEvent.press( orderedButton );
+
+		// Set order to reverse
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		const reverseButton = getByA11yLabel( /Reverse list numbering\. Off/ );
+		fireEvent.press( reverseButton );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'sets a start value to an ordered list', async () => {
+		const initialHtml = `<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Item 1</li>
+		<!-- /wp:list-item -->
+		<!-- wp:list-item -->
+		<li>Item 2</li>
+		<!-- /wp:list-item -->	
+		<!-- wp:list-item -->
+		<li>Item 3</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->`;
+
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select List block
+		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+
+		fireEvent(
+			within( listBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 100,
+						height: 50,
+					},
+				},
+			}
+		);
+
+		fireEvent.press( listBlock );
+
+		// Update to ordered list
+		const orderedButton = getByA11yLabel( 'Ordered' );
+		fireEvent.press( orderedButton );
+
+		// Set order to reverse
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		const startValueButton = getByA11yLabel( /Start value\. Empty/ );
+		fireEvent.press( startValueButton );
+		const startValueInput =
+			within( startValueButton ).getByDisplayValue( '' );
+		fireEvent.changeText( startValueInput, '25' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 } );
diff --git a/packages/block-library/src/list/v2/edit.js b/packages/block-library/src/list/v2/edit.js
index 77029179d28790..9ef320b53b001f 100644
--- a/packages/block-library/src/list/v2/edit.js
+++ b/packages/block-library/src/list/v2/edit.js
@@ -24,7 +24,7 @@ import {
 	formatOutdentRTL,
 } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
-import { useCallback, useEffect } from '@wordpress/element';
+import { useCallback, useEffect, Platform } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -32,8 +32,10 @@ import deprecated from '@wordpress/deprecated';
  */
 import OrderedListSettings from '../ordered-list-settings';
 import { migrateToListV2 } from './migrate';
+import TagName from './tag-name';
 
 const TEMPLATE = [ [ 'core/list-item' ] ];
+const NATIVE_MARGIN_SPACING = 8;
 
 /**
  * At the moment, deprecations don't handle create blocks from attributes
@@ -126,16 +128,21 @@ function IndentUI( { clientId } ) {
 	);
 }
 
-function Edit( { attributes, setAttributes, clientId } ) {
-	const blockProps = useBlockProps();
+function Edit( { attributes, setAttributes, clientId, style } ) {
+	const blockProps = useBlockProps( {
+		...( Platform.isNative && { style } ),
+	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
 		templateInsertUpdatesSelection: true,
+		...( Platform.isNative && {
+			marginVertical: NATIVE_MARGIN_SPACING,
+			marginHorizontal: NATIVE_MARGIN_SPACING,
+		} ),
 	} );
 	useMigrateOnLoad( attributes, clientId );
 	const { ordered, reversed, start } = attributes;
-	const TagName = ordered ? 'ol' : 'ul';
 
 	const controls = (
 		<BlockControls group="block">
@@ -164,6 +171,7 @@ function Edit( { attributes, setAttributes, clientId } ) {
 	return (
 		<>
 			<TagName
+				ordered={ ordered }
 				reversed={ reversed }
 				start={ start }
 				{ ...innerBlocksProps }
diff --git a/packages/block-library/src/list/v2/tag-name.js b/packages/block-library/src/list/v2/tag-name.js
new file mode 100644
index 00000000000000..d96ecab4d1b091
--- /dev/null
+++ b/packages/block-library/src/list/v2/tag-name.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function TagName( props, ref ) {
+	const { ordered, ...extraProps } = props;
+	const Tag = ordered ? 'ol' : 'ul';
+
+	return <Tag ref={ ref } { ...extraProps } />;
+}
+
+export default forwardRef( TagName );
diff --git a/packages/block-library/src/list/v2/tag-name.native.js b/packages/block-library/src/list/v2/tag-name.native.js
new file mode 100644
index 00000000000000..ddf9987bfa515e
--- /dev/null
+++ b/packages/block-library/src/list/v2/tag-name.native.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import { View } from '@wordpress/primitives';
+
+function TagName( props, ref ) {
+	const { start, ...extraProps } = props;
+	return <View ref={ ref } { ...extraProps } />;
+}
+
+export default forwardRef( TagName );
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index b81e1632188d3c..f79dd947641464 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -17,9 +17,19 @@ import {
 /**
  * Internal dependencies
  */
-import { imageFillStyles } from './media-container';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
+const v1ToV5ImageFillStyles = ( url, focalPoint ) => {
+	return url
+		? {
+				backgroundImage: `url(${ url })`,
+				backgroundPosition: focalPoint
+					? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
+					: `50% 50%`,
+		  }
+		: {};
+};
+
 const DEFAULT_MEDIA_WIDTH = 50;
 const noop = () => {};
 
@@ -43,9 +53,6 @@ const baseAttributes = {
 		type: 'string',
 		default: 'wide',
 	},
-	backgroundColor: {
-		type: 'string',
-	},
 	mediaAlt: {
 		type: 'string',
 		source: 'attribute',
@@ -73,257 +80,464 @@ const baseAttributes = {
 	},
 };
 
-export default [
-	// Version with CSS grid
-	{
-		attributes: {
-			align: {
-				type: 'string',
-				default: 'wide',
-			},
-			mediaAlt: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure img',
-				attribute: 'alt',
-				default: '',
-			},
-			mediaPosition: {
-				type: 'string',
-				default: 'left',
-			},
-			mediaId: {
-				type: 'number',
-			},
-			mediaUrl: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure video,figure img',
-				attribute: 'src',
-			},
-			mediaLink: {
-				type: 'string',
-			},
-			linkDestination: {
-				type: 'string',
-			},
-			linkTarget: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'target',
-			},
-			href: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'href',
-			},
-			rel: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'rel',
-			},
-			linkClass: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'class',
-			},
-			mediaType: {
-				type: 'string',
-			},
-			mediaWidth: {
-				type: 'number',
-				default: 50,
-			},
-			mediaSizeSlug: {
-				type: 'string',
-			},
-			isStackedOnMobile: {
-				type: 'boolean',
-				default: true,
-			},
-			verticalAlignment: {
-				type: 'string',
-			},
-			imageFill: {
-				type: 'boolean',
-			},
-			focalPoint: {
-				type: 'object',
-			},
-		},
-		supports: {
-			anchor: true,
-			align: [ 'wide', 'full' ],
-			html: false,
-			color: {
-				gradients: true,
-				link: true,
-			},
-		},
-		save( { attributes } ) {
-			const {
-				isStackedOnMobile,
-				mediaAlt,
-				mediaPosition,
-				mediaType,
-				mediaUrl,
-				mediaWidth,
-				mediaId,
-				verticalAlignment,
-				imageFill,
-				focalPoint,
-				linkClass,
-				href,
-				linkTarget,
-				rel,
-			} = attributes;
-			const mediaSizeSlug =
-				attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
-			const newRel = isEmpty( rel ) ? undefined : rel;
-
-			const imageClasses = classnames( {
-				[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
-				[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
-			} );
-
-			let image = (
-				<img
-					src={ mediaUrl }
-					alt={ mediaAlt }
-					className={ imageClasses || null }
-				/>
+const v4ToV5BlockAttributes = {
+	...baseAttributes,
+	mediaUrl: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure video,figure img',
+		attribute: 'src',
+	},
+	mediaLink: {
+		type: 'string',
+	},
+	linkDestination: {
+		type: 'string',
+	},
+	linkTarget: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'target',
+	},
+	href: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'href',
+	},
+	rel: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'rel',
+	},
+	linkClass: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'figure a',
+		attribute: 'class',
+	},
+	mediaSizeSlug: {
+		type: 'string',
+	},
+	verticalAlignment: {
+		type: 'string',
+	},
+	imageFill: {
+		type: 'boolean',
+	},
+	focalPoint: {
+		type: 'object',
+	},
+};
+
+const v4ToV5Supports = {
+	anchor: true,
+	align: [ 'wide', 'full' ],
+	html: false,
+	color: {
+		gradients: true,
+		link: true,
+	},
+};
+
+const v5 = {
+	attributes: v4ToV5BlockAttributes,
+	supports: v4ToV5Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		const imageClasses = classnames( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
 			);
+		}
 
-			if ( href ) {
-				image = (
-					<a
-						className={ linkClass }
-						href={ href }
-						target={ linkTarget }
-						rel={ newRel }
-					>
-						{ image }
-					</a>
-				);
-			}
-
-			const mediaTypeRenders = {
-				image: () => image,
-				video: () => <video controls src={ mediaUrl } />,
-			};
-
-			const className = classnames( {
-				'has-media-on-the-right': 'right' === mediaPosition,
-				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]:
-					verticalAlignment,
-				'is-image-fill': imageFill,
-			} );
-			const backgroundStyles = imageFill
-				? imageFillStyles( mediaUrl, focalPoint )
-				: {};
-
-			let gridTemplateColumns;
-			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
-				gridTemplateColumns =
-					'right' === mediaPosition
-						? `auto ${ mediaWidth }%`
-						: `${ mediaWidth }% auto`;
-			}
-			const style = {
-				gridTemplateColumns,
-			};
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v1ToV5ImageFillStyles( mediaUrl, focalPoint )
+			: {};
 
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		if ( 'right' === mediaPosition ) {
 			return (
 				<div { ...useBlockProps.save( { className, style } ) }>
+					<div
+						{ ...useInnerBlocksProps.save( {
+							className: 'wp-block-media-text__content',
+						} ) }
+					/>
 					<figure
 						className="wp-block-media-text__media"
 						style={ backgroundStyles }
 					>
 						{ ( mediaTypeRenders[ mediaType ] || noop )() }
 					</figure>
-					<div
-						{ ...useInnerBlocksProps.save( {
-							className: 'wp-block-media-text__content',
-						} ) }
-					/>
 				</div>
 			);
-		},
+		}
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
+	},
+};
+
+// Version with CSS grid
+const v4 = {
+	attributes: v4ToV5BlockAttributes,
+	supports: v4ToV5Supports,
+	save( { attributes } ) {
+		const {
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const mediaSizeSlug =
+			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		const imageClasses = classnames( {
+			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+		} );
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v1ToV5ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			gridTemplateColumns,
+		};
+
+		return (
+			<div { ...useBlockProps.save( { className, style } ) }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div
+					{ ...useInnerBlocksProps.save( {
+						className: 'wp-block-media-text__content',
+					} ) }
+				/>
+			</div>
+		);
 	},
-	{
-		attributes: {
-			...baseAttributes,
-			customBackgroundColor: {
-				type: 'string',
-			},
-			mediaLink: {
-				type: 'string',
-			},
-			linkDestination: {
-				type: 'string',
-			},
-			linkTarget: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'target',
-			},
-			href: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'href',
-			},
-			rel: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'rel',
-			},
-			linkClass: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure a',
-				attribute: 'class',
-			},
-			verticalAlignment: {
-				type: 'string',
-			},
-			imageFill: {
-				type: 'boolean',
-			},
-			focalPoint: {
-				type: 'object',
-			},
+};
+
+const v3 = {
+	attributes: {
+		...baseAttributes,
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		mediaLink: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure a',
+			attribute: 'target',
 		},
-		migrate: migrateCustomColors,
-		save( { attributes } ) {
-			const {
-				backgroundColor,
-				customBackgroundColor,
-				isStackedOnMobile,
-				mediaAlt,
-				mediaPosition,
-				mediaType,
-				mediaUrl,
-				mediaWidth,
-				mediaId,
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure a',
+			attribute: 'href',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure a',
+			attribute: 'class',
+		},
+		verticalAlignment: {
+			type: 'string',
+		},
+		imageFill: {
+			type: 'boolean',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+	},
+	migrate: migrateCustomColors,
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+			linkClass,
+			href,
+			linkTarget,
+			rel,
+		} = attributes;
+		const newRel = isEmpty( rel ) ? undefined : rel;
+
+		let image = (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={
+					mediaId && mediaType === 'image'
+						? `wp-image-${ mediaId }`
+						: null
+				}
+			/>
+		);
+
+		if ( href ) {
+			image = (
+				<a
+					className={ linkClass }
+					href={ href }
+					target={ linkTarget }
+					rel={ newRel }
+				>
+					{ image }
+				</a>
+			);
+		}
+
+		const mediaTypeRenders = {
+			image: () => image,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			'has-background': backgroundClass || customBackgroundColor,
+			[ backgroundClass ]: backgroundClass,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
 				verticalAlignment,
-				imageFill,
-				focalPoint,
-				linkClass,
-				href,
-				linkTarget,
-				rel,
-			} = attributes;
-			const newRel = isEmpty( rel ) ? undefined : rel;
-
-			let image = (
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v1ToV5ImageFillStyles( mediaUrl, focalPoint )
+			: {};
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			backgroundColor: backgroundClass
+				? undefined
+				: customBackgroundColor,
+			gridTemplateColumns,
+		};
+		return (
+			<div className={ className } style={ style }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div className="wp-block-media-text__content">
+					<InnerBlocks.Content />
+				</div>
+			</div>
+		);
+	},
+};
+
+const v2 = {
+	attributes: {
+		...baseAttributes,
+		backgroundColor: {
+			type: 'string',
+		},
+		customBackgroundColor: {
+			type: 'string',
+		},
+		mediaUrl: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure video,figure img',
+			attribute: 'src',
+		},
+		verticalAlignment: {
+			type: 'string',
+		},
+		imageFill: {
+			type: 'boolean',
+		},
+		focalPoint: {
+			type: 'object',
+		},
+	},
+	migrate: migrateCustomColors,
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+			mediaId,
+			verticalAlignment,
+			imageFill,
+			focalPoint,
+		} = attributes;
+		const mediaTypeRenders = {
+			image: () => (
 				<img
 					src={ mediaUrl }
 					alt={ mediaAlt }
@@ -333,227 +547,119 @@ export default [
 							: null
 					}
 				/>
-			);
+			),
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			[ backgroundClass ]: backgroundClass,
+			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]:
+				verticalAlignment,
+			'is-image-fill': imageFill,
+		} );
+		const backgroundStyles = imageFill
+			? v1ToV5ImageFillStyles( mediaUrl, focalPoint )
+			: {};
 
-			if ( href ) {
-				image = (
-					<a
-						className={ linkClass }
-						href={ href }
-						target={ linkTarget }
-						rel={ newRel }
-					>
-						{ image }
-					</a>
-				);
-			}
-
-			const mediaTypeRenders = {
-				image: () => image,
-				video: () => <video controls src={ mediaUrl } />,
-			};
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
-			const className = classnames( {
-				'has-media-on-the-right': 'right' === mediaPosition,
-				'has-background': backgroundClass || customBackgroundColor,
-				[ backgroundClass ]: backgroundClass,
-				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]:
-					verticalAlignment,
-				'is-image-fill': imageFill,
-			} );
-			const backgroundStyles = imageFill
-				? imageFillStyles( mediaUrl, focalPoint )
-				: {};
-
-			let gridTemplateColumns;
-			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
-				gridTemplateColumns =
-					'right' === mediaPosition
-						? `auto ${ mediaWidth }%`
-						: `${ mediaWidth }% auto`;
-			}
-			const style = {
-				backgroundColor: backgroundClass
-					? undefined
-					: customBackgroundColor,
-				gridTemplateColumns,
-			};
-			return (
-				<div className={ className } style={ style }>
-					<figure
-						className="wp-block-media-text__media"
-						style={ backgroundStyles }
-					>
-						{ ( mediaTypeRenders[ mediaType ] || noop )() }
-					</figure>
-					<div className="wp-block-media-text__content">
-						<InnerBlocks.Content />
-					</div>
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			backgroundColor: backgroundClass
+				? undefined
+				: customBackgroundColor,
+			gridTemplateColumns,
+		};
+		return (
+			<div className={ className } style={ style }>
+				<figure
+					className="wp-block-media-text__media"
+					style={ backgroundStyles }
+				>
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div className="wp-block-media-text__content">
+					<InnerBlocks.Content />
 				</div>
-			);
-		},
+			</div>
+		);
 	},
-	{
-		attributes: {
-			...baseAttributes,
-			customBackgroundColor: {
-				type: 'string',
-			},
-			mediaUrl: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure video,figure img',
-				attribute: 'src',
-			},
-			verticalAlignment: {
-				type: 'string',
-			},
-			imageFill: {
-				type: 'boolean',
-			},
-			focalPoint: {
-				type: 'object',
-			},
+};
+
+const v1 = {
+	attributes: {
+		...baseAttributes,
+		backgroundColor: {
+			type: 'string',
 		},
-		migrate: migrateCustomColors,
-		save( { attributes } ) {
-			const {
-				backgroundColor,
-				customBackgroundColor,
-				isStackedOnMobile,
-				mediaAlt,
-				mediaPosition,
-				mediaType,
-				mediaUrl,
-				mediaWidth,
-				mediaId,
-				verticalAlignment,
-				imageFill,
-				focalPoint,
-			} = attributes;
-			const mediaTypeRenders = {
-				image: () => (
-					<img
-						src={ mediaUrl }
-						alt={ mediaAlt }
-						className={
-							mediaId && mediaType === 'image'
-								? `wp-image-${ mediaId }`
-								: null
-						}
-					/>
-				),
-				video: () => <video controls src={ mediaUrl } />,
-			};
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
-			const className = classnames( {
-				'has-media-on-the-right': 'right' === mediaPosition,
-				[ backgroundClass ]: backgroundClass,
-				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]:
-					verticalAlignment,
-				'is-image-fill': imageFill,
-			} );
-			const backgroundStyles = imageFill
-				? imageFillStyles( mediaUrl, focalPoint )
-				: {};
-
-			let gridTemplateColumns;
-			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
-				gridTemplateColumns =
-					'right' === mediaPosition
-						? `auto ${ mediaWidth }%`
-						: `${ mediaWidth }% auto`;
-			}
-			const style = {
-				backgroundColor: backgroundClass
-					? undefined
-					: customBackgroundColor,
-				gridTemplateColumns,
-			};
-			return (
-				<div className={ className } style={ style }>
-					<figure
-						className="wp-block-media-text__media"
-						style={ backgroundStyles }
-					>
-						{ ( mediaTypeRenders[ mediaType ] || noop )() }
-					</figure>
-					<div className="wp-block-media-text__content">
-						<InnerBlocks.Content />
-					</div>
-				</div>
-			);
+		customBackgroundColor: {
+			type: 'string',
 		},
-	},
-	{
-		attributes: {
-			...baseAttributes,
-			customBackgroundColor: {
-				type: 'string',
-			},
-			mediaUrl: {
-				type: 'string',
-				source: 'attribute',
-				selector: 'figure video,figure img',
-				attribute: 'src',
-			},
+		mediaUrl: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure video,figure img',
+			attribute: 'src',
 		},
-		save( { attributes } ) {
-			const {
-				backgroundColor,
-				customBackgroundColor,
-				isStackedOnMobile,
-				mediaAlt,
-				mediaPosition,
-				mediaType,
-				mediaUrl,
-				mediaWidth,
-			} = attributes;
-			const mediaTypeRenders = {
-				image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
-				video: () => <video controls src={ mediaUrl } />,
-			};
-			const backgroundClass = getColorClassName(
-				'background-color',
-				backgroundColor
-			);
-			const className = classnames( {
-				'has-media-on-the-right': 'right' === mediaPosition,
-				[ backgroundClass ]: backgroundClass,
-				'is-stacked-on-mobile': isStackedOnMobile,
-			} );
-
-			let gridTemplateColumns;
-			if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
-				gridTemplateColumns =
-					'right' === mediaPosition
-						? `auto ${ mediaWidth }%`
-						: `${ mediaWidth }% auto`;
-			}
-			const style = {
-				backgroundColor: backgroundClass
-					? undefined
-					: customBackgroundColor,
-				gridTemplateColumns,
-			};
-			return (
-				<div className={ className } style={ style }>
-					<figure className="wp-block-media-text__media">
-						{ ( mediaTypeRenders[ mediaType ] || noop )() }
-					</figure>
-					<div className="wp-block-media-text__content">
-						<InnerBlocks.Content />
-					</div>
+	},
+	save( { attributes } ) {
+		const {
+			backgroundColor,
+			customBackgroundColor,
+			isStackedOnMobile,
+			mediaAlt,
+			mediaPosition,
+			mediaType,
+			mediaUrl,
+			mediaWidth,
+		} = attributes;
+		const mediaTypeRenders = {
+			image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
+			video: () => <video controls src={ mediaUrl } />,
+		};
+		const backgroundClass = getColorClassName(
+			'background-color',
+			backgroundColor
+		);
+		const className = classnames( {
+			'has-media-on-the-right': 'right' === mediaPosition,
+			[ backgroundClass ]: backgroundClass,
+			'is-stacked-on-mobile': isStackedOnMobile,
+		} );
+
+		let gridTemplateColumns;
+		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+			gridTemplateColumns =
+				'right' === mediaPosition
+					? `auto ${ mediaWidth }%`
+					: `${ mediaWidth }% auto`;
+		}
+		const style = {
+			backgroundColor: backgroundClass
+				? undefined
+				: customBackgroundColor,
+			gridTemplateColumns,
+		};
+		return (
+			<div className={ className } style={ style }>
+				<figure className="wp-block-media-text__media">
+					{ ( mediaTypeRenders[ mediaType ] || noop )() }
+				</figure>
+				<div className="wp-block-media-text__content">
+					<InnerBlocks.Content />
 				</div>
-			);
-		},
+			</div>
+		);
 	},
-];
+};
+
+export default [ v5, v4, v3, v2, v1 ];
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
index f09c2d1d84e5ad..64b1978d42167a 100644
--- a/packages/block-library/src/media-text/media-container.js
+++ b/packages/block-library/src/media-text/media-container.js
@@ -36,7 +36,9 @@ export function imageFillStyles( url, focalPoint ) {
 		? {
 				backgroundImage: `url(${ url })`,
 				backgroundPosition: focalPoint
-					? `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
+					? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round(
+							focalPoint.y * 100
+					  ) }%`
 					: `50% 50%`,
 		  }
 		: {};
diff --git a/packages/block-library/src/media-text/test/media-container.js b/packages/block-library/src/media-text/test/media-container.js
new file mode 100644
index 00000000000000..582ec2be8d5ad8
--- /dev/null
+++ b/packages/block-library/src/media-text/test/media-container.js
@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from '../media-container';
+
+describe( 'imageFillStyles()', () => {
+	it( 'should return image url', () => {
+		const { backgroundImage } = imageFillStyles( 'image.jpg' );
+		expect( backgroundImage ).toBe( 'url(image.jpg)' );
+	} );
+
+	it( 'should return centered background position', () => {
+		const { backgroundPosition } = imageFillStyles( 'image.jpg' );
+		expect( backgroundPosition ).toBe( '50% 50%' );
+	} );
+
+	it( 'should return custom background position', () => {
+		const { backgroundPosition } = imageFillStyles( 'image.jpg', {
+			x: 0.56,
+			y: 0.57,
+		} );
+		expect( backgroundPosition ).toBe( '56% 57%' );
+	} );
+} );
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 5e03b859e481fd..6e3b2cb9b9db3e 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -17,7 +17,8 @@ import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	store as blockEditorStore,
 	withColors,
 	PanelColorSettings,
@@ -104,9 +105,8 @@ function Navigation( {
 		setAttributes( { ref: postId } );
 	};
 
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		`navigationMenu/${ ref }`
-	);
+	const recursionId = `navigationMenu/${ ref }`;
+	const hasAlreadyRendered = useHasRecursion( recursionId );
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
@@ -207,6 +207,9 @@ function Navigation( {
 		hasResolvedCanUserCreateNavigationMenu,
 	} = useNavigationMenu( ref );
 
+	const navMenuResolvedButMissing =
+		hasResolvedNavigationMenus && isNavigationMenuMissing;
+
 	// Attempt to retrieve and prioritize any existing navigation menu unless
 	// a specific ref is allocated or the user is explicitly creating a new menu. The aim is
 	// for the block to "just work" from a user perspective using existing data.
@@ -303,27 +306,6 @@ function Navigation( {
 		{ __unstableIsDisabled: hasBlockOverlay }
 	);
 
-	const overlayClassnames = classnames( {
-		'has-text-color':
-			!! overlayTextColor.color || !! overlayTextColor?.class,
-		[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
-			!! overlayTextColor?.slug,
-		'has-background':
-			!! overlayBackgroundColor.color || overlayBackgroundColor?.class,
-		[ getColorClassName(
-			'background-color',
-			overlayBackgroundColor?.slug
-		) ]: !! overlayBackgroundColor?.slug,
-	} );
-
-	const overlayStyles = {
-		color: ! overlayTextColor?.slug && overlayTextColor?.color,
-		backgroundColor:
-			! overlayBackgroundColor?.slug &&
-			overlayBackgroundColor?.color &&
-			overlayBackgroundColor.color,
-	};
-
 	// Turn on contrast checker for web only since it's not supported on mobile yet.
 	const enableContrastChecking = Platform.OS === 'web';
 
@@ -354,14 +336,12 @@ function Navigation( {
 			showClassicMenuConversionNotice(
 				__( 'Classic menu imported successfully.' )
 			);
-			speak( __( 'Classic menu imported successfully.' ) );
 		}
 
 		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) {
 			showClassicMenuConversionNotice(
 				__( 'Classic menu import failed.' )
 			);
-			speak( __( 'Classic menu import failed.' ) );
 		}
 	}, [
 		classicMenuConversionStatus,
@@ -407,6 +387,7 @@ function Navigation( {
 		if ( isSelected || isInnerBlockSelected ) {
 			if (
 				ref &&
+				! navMenuResolvedButMissing &&
 				hasResolvedCanUserUpdateNavigationMenu &&
 				! canUserUpdateNavigationMenu
 			) {
@@ -442,24 +423,6 @@ function Navigation( {
 	const navigationSelectorRef = useRef();
 	const [ shouldFocusNavigationSelector, setShouldFocusNavigationSelector ] =
 		useState( false );
-	const handleSelectNavigation = useCallback(
-		( navPostOrClassicMenu ) => {
-			if ( ! navPostOrClassicMenu ) {
-				return;
-			}
-
-			const isClassicMenu =
-				navPostOrClassicMenu.hasOwnProperty( 'auto_add' );
-
-			if ( isClassicMenu ) {
-				convert( navPostOrClassicMenu.id, navPostOrClassicMenu.name );
-			} else {
-				handleUpdateMenu( navPostOrClassicMenu.id );
-			}
-			setShouldFocusNavigationSelector( true );
-		},
-		[ convert, handleUpdateMenu ]
-	);
 
 	// Focus support after menu selection.
 	useEffect( () => {
@@ -644,8 +607,8 @@ function Navigation( {
 					isOpen={ isResponsiveMenuOpen }
 					isResponsive={ 'never' !== overlayMenu }
 					isHiddenByDefault={ 'always' === overlayMenu }
-					classNames={ overlayClassnames }
-					styles={ overlayStyles }
+					overlayBackgroundColor={ overlayBackgroundColor }
+					overlayTextColor={ overlayTextColor }
 				>
 					<UnsavedInnerBlocks
 						blockProps={ blockProps }
@@ -714,7 +677,14 @@ function Navigation( {
 					isResolvingCanUserCreateNavigationMenu={
 						isResolvingCanUserCreateNavigationMenu
 					}
-					onFinish={ handleSelectNavigation }
+					onSelectNavigationMenu={ ( menuId ) => {
+						handleUpdateMenu( menuId );
+						setShouldFocusNavigationSelector( true );
+					} }
+					onSelectClassicMenu={ ( classicMenu ) => {
+						convert( classicMenu.id, classicMenu.name );
+						setShouldFocusNavigationSelector( true );
+					} }
 					onCreateEmpty={ () => createNavigationMenu( '', [] ) }
 				/>
 			</TagName>
@@ -723,7 +693,7 @@ function Navigation( {
 
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
-			<RecursionProvider>
+			<RecursionProvider uniqueId={ recursionId }>
 				<BlockControls>
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
 						<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
@@ -731,7 +701,14 @@ function Navigation( {
 								ref={ navigationSelectorRef }
 								currentMenuId={ ref }
 								clientId={ clientId }
-								onSelect={ handleSelectNavigation }
+								onSelectNavigationMenu={ ( menuId ) => {
+									handleUpdateMenu( menuId );
+									setShouldFocusNavigationSelector( true );
+								} }
+								onSelectClassicMenu={ ( classicMenu ) => {
+									convert( classicMenu.id, classicMenu.name );
+									setShouldFocusNavigationSelector( true );
+								} }
 								onCreateNew={ resetToEmptyBlock }
 								/* translators: %s: The name of a menu. */
 								actionLabel={ __( "Switch to '%s'" ) }
@@ -783,8 +760,8 @@ function Navigation( {
 							isOpen={ isResponsiveMenuOpen }
 							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
-							classNames={ overlayClassnames }
-							styles={ overlayStyles }
+							overlayBackgroundColor={ overlayBackgroundColor }
+							overlayTextColor={ overlayTextColor }
 						>
 							{ isEntityAvailable && (
 								<NavigationInnerBlocks
diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
index 23faba9bd23165..b83280ec129ec3 100644
--- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js
+++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js
@@ -10,7 +10,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
-import { forwardRef, useCallback, useMemo } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,7 +21,8 @@ import useNavigationEntities from '../use-navigation-entities';
 function NavigationMenuSelector(
 	{
 		currentMenuId,
-		onSelect,
+		onSelectNavigationMenu,
+		onSelectClassicMenu,
 		onCreateNew,
 		showManageActions = false,
 		actionLabel,
@@ -43,24 +44,6 @@ function NavigationMenuSelector(
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
-	const handleSelect = useCallback(
-		( _onClose ) => ( selectedId ) => {
-			_onClose();
-			onSelect(
-				navigationMenus?.find( ( post ) => post.id === selectedId )
-			);
-		},
-		[ navigationMenus ]
-	);
-
-	const handleSelectClassic = useCallback(
-		( _onClose, menu ) => () => {
-			_onClose();
-			onSelect( menu );
-		},
-		[]
-	);
-
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title } ) => {
@@ -83,7 +66,7 @@ function NavigationMenuSelector(
 
 	// Show the selector if:
 	// - has switch or create permissions and there are block or classic menus.
-	// - user has create or update permisisons and component should show the menu actions.
+	// - user has create or update permissions and component should show the menu actions.
 	const showSelectMenus =
 		( ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
 			( hasNavigationMenus || hasClassicMenus ) ) ||
@@ -107,7 +90,10 @@ function NavigationMenuSelector(
 						<MenuGroup label={ __( 'Menus' ) }>
 							<MenuItemsChoice
 								value={ currentMenuId }
-								onSelect={ handleSelect( onClose ) }
+								onSelect={ ( menuId ) => {
+									onClose();
+									onSelectNavigationMenu( menuId );
+								} }
 								choices={ menuChoices }
 							/>
 						</MenuGroup>
@@ -118,10 +104,10 @@ function NavigationMenuSelector(
 								const label = decodeEntities( menu.name );
 								return (
 									<MenuItem
-										onClick={ handleSelectClassic(
-											onClose,
-											menu
-										) }
+										onClick={ () => {
+											onClose();
+											onSelectClassicMenu( menu );
+										} }
 										key={ menu.id }
 										aria-label={ sprintf(
 											createActionLabel,
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
index e1b50e253a292f..101cd1308f461e 100644
--- a/packages/block-library/src/navigation/edit/placeholder/index.js
+++ b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -20,7 +20,8 @@ export default function NavigationPlaceholder( {
 	clientId,
 	canUserCreateNavigationMenu = false,
 	isResolvingCanUserCreateNavigationMenu,
-	onFinish,
+	onSelectNavigationMenu,
+	onSelectClassicMenu,
 	onCreateEmpty,
 } ) {
 	const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
@@ -67,7 +68,8 @@ export default function NavigationPlaceholder( {
 						<NavigationMenuSelector
 							currentMenuId={ currentMenuId }
 							clientId={ clientId }
-							onSelect={ onFinish }
+							onSelectNavigationMenu={ onSelectNavigationMenu }
+							onSelectClassicMenu={ onSelectClassicMenu }
 							toggleProps={ {
 								variant: 'tertiary',
 								iconPosition: 'right',
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
index e1decd69b5f328..3e6cced93fffce 100644
--- a/packages/block-library/src/navigation/edit/responsive-wrapper.js
+++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -22,21 +23,41 @@ export default function ResponsiveWrapper( {
 	isResponsive,
 	onToggle,
 	isHiddenByDefault,
-	classNames,
-	styles,
+	overlayBackgroundColor,
+	overlayTextColor,
 	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
 	}
+
 	const responsiveContainerClasses = classnames(
 		'wp-block-navigation__responsive-container',
-		classNames,
 		{
+			'has-text-color':
+				!! overlayTextColor.color || !! overlayTextColor?.class,
+			[ getColorClassName( 'color', overlayTextColor?.slug ) ]:
+				!! overlayTextColor?.slug,
+			'has-background':
+				!! overlayBackgroundColor.color ||
+				overlayBackgroundColor?.class,
+			[ getColorClassName(
+				'background-color',
+				overlayBackgroundColor?.slug
+			) ]: !! overlayBackgroundColor?.slug,
 			'is-menu-open': isOpen,
 			'hidden-by-default': isHiddenByDefault,
 		}
 	);
+
+	const styles = {
+		color: ! overlayTextColor?.slug && overlayTextColor?.color,
+		backgroundColor:
+			! overlayBackgroundColor?.slug &&
+			overlayBackgroundColor?.color &&
+			overlayBackgroundColor.color,
+	};
+
 	const openButtonClasses = classnames(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 39f6def58aca60..8dbda39b5bdde2 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -472,6 +472,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			return '';
 		}
 
+		// Only published posts are valid. If this is changed then a corresponding change
+		// must also be implemented in `use-navigation-menu.js`.
+		if ( 'publish' !== $navigation_post->post_status ) {
+			return '';
+		}
+
 		$nav_menu_name = $navigation_post->post_title;
 
 		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 100ebe6c09171b..223a2428f5a108 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -45,9 +45,6 @@ $navigation-icon-size: 24px;
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
 		display: block;
-
-		// Set the default menu item padding to zero, to allow text-only buttons.
-		padding: 0;
 	}
 
 	// The following rules provide class based application of user selected text
@@ -154,10 +151,7 @@ $navigation-icon-size: 24px;
 // Styles for submenu flyout.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
 .wp-block-navigation .has-child {
-	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-	// That way if padding is set in theme.json, it still wins.
-	// https://css-tricks.com/almanac/selectors/w/where/
-	:where(.wp-block-navigation__submenu-container) {
+	.wp-block-navigation__submenu-container {
 		background-color: inherit;
 		color: inherit;
 		position: absolute;
@@ -233,7 +227,7 @@ $navigation-icon-size: 24px;
 
 	// Custom menu items.
 	// Show submenus on hover unless they open on click.
-	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -243,7 +237,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Keep submenus open when focus is within.
-	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -339,17 +333,6 @@ button.wp-block-navigation-item__content {
 	gap: inherit;
 }
 
-// Menu items with background.
-// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-// That way if padding is set in theme.json, it still wins.
-// https://css-tricks.com/almanac/selectors/w/where/
-.wp-block-navigation:where(.has-background) {
-	&,
-	.wp-block-navigation .wp-block-page-list,
-	.wp-block-navigation__container {
-		gap: inherit;
-	}
-}
 
 /**
  * Paddings
@@ -361,15 +344,18 @@ button.wp-block-navigation-item__content {
 
 // When the menu has a background, items have paddings, reduce margins to compensate.
 // Treat margins and paddings differently when the block has a background.
-.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {
+:where(.wp-block-navigation.has-background .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
-.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
+
 /**
  * Justifications.
  */
@@ -452,6 +438,10 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
+	.wp-block-navigation-link a {
+		color: inherit;
+	}
+
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
 		flex-wrap: var(--navigation-layout-wrap, wrap);
diff --git a/packages/block-library/src/navigation/use-navigation-menu.js b/packages/block-library/src/navigation/use-navigation-menu.js
index 11ac415d18bd92..e6ccad1d017c89 100644
--- a/packages/block-library/src/navigation/use-navigation-menu.js
+++ b/packages/block-library/src/navigation/use-navigation-menu.js
@@ -99,15 +99,19 @@ function selectExistingMenu( select, ref ) {
 		args
 	);
 
+	// Only published Navigation posts are considered valid.
+	// If this is changed then a corresponding change must also be made
+	// in the index.php file.
+	const isNavigationMenuPublished = editedNavigationMenu.status === 'publish';
+
 	return {
 		isNavigationMenuResolved: hasResolvedNavigationMenu,
-		isNavigationMenuMissing: hasResolvedNavigationMenu && ! navigationMenu,
+		isNavigationMenuMissing:
+			hasResolvedNavigationMenu &&
+			( ! navigationMenu || ! isNavigationMenuPublished ),
 
 		// getEditedEntityRecord will return the post regardless of status.
 		// Therefore if the found post is not published then we should ignore it.
-		navigationMenu:
-			editedNavigationMenu.status === 'publish'
-				? editedNavigationMenu
-				: null,
+		navigationMenu: isNavigationMenuPublished ? editedNavigationMenu : null,
 	};
 }
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 2323beff7ae595..335f53e81d4425 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -34,6 +34,7 @@
 		"anchor": true,
 		"className": false,
 		"color": {
+			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index a0d33cbac639b8..233399a63f8d55 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -7,7 +7,8 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
@@ -118,15 +119,14 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( contextPostId );
+	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index fa36e553a42849..2e88171a21f3ef 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -16,6 +16,10 @@
 		"isLink": {
 			"type": "boolean",
 			"default": false
+		},
+		"displayType": {
+			"type": "string",
+			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
index dd7bd46852f7ec..7daab51c751fd3 100644
--- a/packages/block-library/src/post-date/edit.js
+++ b/packages/block-library/src/post-date/edit.js
@@ -33,7 +33,7 @@ import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
 export default function PostDateEdit( {
-	attributes: { textAlign, format, isLink },
+	attributes: { textAlign, format, isLink, displayType },
 	context: { postId, postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
@@ -58,9 +58,10 @@ export default function PostDateEdit( {
 	const [ date, setDate ] = useEntityProp(
 		'postType',
 		postTypeSlug,
-		'date',
+		displayType,
 		postId
 	);
+
 	const postType = useSelect(
 		( select ) =>
 			postTypeSlug
@@ -155,6 +156,15 @@ export default function PostDateEdit( {
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
+					<ToggleControl
+						label={ __( 'Display last modified date' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								displayType: value ? 'modified' : 'date',
+							} )
+						}
+						checked={ displayType === 'modified' }
+					/>
 				</PanelBody>
 			</InspectorControls>
 
diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php
index 902a6f7bff9706..fc1537d1566896 100644
--- a/packages/block-library/src/post-date/index.php
+++ b/packages/block-library/src/post-date/index.php
@@ -21,7 +21,15 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID            = $block->context['postId'];
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$formatted_date     = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+
+	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+	} else {
+		$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	}
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}
@@ -29,7 +37,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	return sprintf(
 		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
 		$wrapper_attributes,
-		esc_attr( get_the_date( 'c', $post_ID ) ),
+		$unformatted_date,
 		$formatted_date
 	);
 }
diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php
index 78f1e859fbffa9..125a2d81ddcbe3 100644
--- a/packages/block-library/src/post-title/index.php
+++ b/packages/block-library/src/post-title/index.php
@@ -34,7 +34,8 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), esc_attr( $attributes['rel'] ), $title );
+		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
diff --git a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
index 9868476671f5a1..08bbbd42e7dc75 100644
--- a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap
@@ -10,7 +10,14 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
     ]
   }
 >
-  <View>
+  <View
+    style={
+      Array [
+        undefined,
+        undefined,
+      ]
+    }
+  >
     <TextInput
       accessibilityLabel="Text input. Empty"
       activeFormats={Array []}
@@ -50,7 +57,14 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
     ]
   }
 >
-  <View>
+  <View
+    style={
+      Array [
+        undefined,
+        undefined,
+      ]
+    }
+  >
     <TextInput
       accessibilityLabel="Text input. <pre>Hello World!</pre>"
       activeFormats={Array []}
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index 3bcfa6482107cf..d64b293dffb573 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -16,6 +16,10 @@
 		"level": {
 			"type": "number",
 			"default": 1
+		},
+		"showSearchTerm": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js
index a88fc608eec4b2..2c45e7b4b80971 100644
--- a/packages/block-library/src/query-title/edit.js
+++ b/packages/block-library/src/query-title/edit.js
@@ -9,9 +9,11 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
+	InspectorControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,21 +21,19 @@ import { __ } from '@wordpress/i18n';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
-const SUPPORTED_TYPES = [ 'archive' ];
+const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign },
+	attributes: { type, level, textAlign, showSearchTerm },
 	setAttributes,
 } ) {
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-query-title__placeholder': type === 'archive',
 		} ),
 	} );
-	// The plan is to augment this block with more
-	// block variations like `Search Title`.
+
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
 		return (
 			<div { ...blockProps }>
@@ -48,6 +48,33 @@ export default function QueryTitleEdit( {
 			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
 		);
 	}
+
+	if ( type === 'search' ) {
+		titleElement = (
+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<ToggleControl
+							label={ __( 'Show search term in title' ) }
+							onChange={ () =>
+								setAttributes( {
+									showSearchTerm: ! showSearchTerm,
+								} )
+							}
+							checked={ showSearchTerm }
+						/>
+					</PanelBody>
+				</InspectorControls>
+
+				<TagName { ...blockProps }>
+					{ showSearchTerm
+						? __( 'Search results for: "search term"' )
+						: __( 'Search results' ) }
+				</TagName>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<BlockControls group="block">
diff --git a/packages/block-library/src/query-title/index.php b/packages/block-library/src/query-title/index.php
index 065186dd60260f..d2c74cc2acb518 100644
--- a/packages/block-library/src/query-title/index.php
+++ b/packages/block-library/src/query-title/index.php
@@ -17,13 +17,29 @@
 function render_block_core_query_title( $attributes ) {
 	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
 	$is_archive = is_archive();
-	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
+	$is_search  = is_search();
+	if ( ! $type ||
+		( 'archive' === $type && ! $is_archive ) ||
+		( 'search' === $type && ! $is_search )
+		) {
 		return '';
 	}
 	$title = '';
 	if ( $is_archive ) {
 		$title = get_the_archive_title();
 	}
+	if ( $is_search ) {
+		$title = __( 'Search results' );
+
+		if ( isset( $attributes['showSearchTerm'] ) && $attributes['showSearchTerm'] ) {
+			$title = sprintf(
+				/* translators: %s is the search term. */
+				__( 'Search results for: "%s"' ),
+				get_search_query()
+			);
+		}
+	}
+
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
diff --git a/packages/block-library/src/query-title/variations.js b/packages/block-library/src/query-title/variations.js
index 36442733d3402a..741f74c8b82ceb 100644
--- a/packages/block-library/src/query-title/variations.js
+++ b/packages/block-library/src/query-title/variations.js
@@ -17,6 +17,19 @@ const variations = [
 		},
 		scope: [ 'inserter' ],
 	},
+	{
+		isDefault: false,
+		name: 'search-title',
+		title: __( 'Search Results Title' ),
+		description: __(
+			'Display the search results title based on the queried object.'
+		),
+		icon: title,
+		attributes: {
+			type: 'search',
+		},
+		scope: [ 'inserter' ],
+	},
 ];
 
 /**
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index db743bc16506bf..72db4563054e40 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -13,6 +13,8 @@ import {
 	RangeControl,
 	ToggleControl,
 	Notice,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -26,7 +28,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
-import TaxonomyControls from './taxonomy-controls';
+import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import { usePostTypes } from '../../utils';
 
@@ -57,6 +59,7 @@ export default function QueryInspectorControls( {
 	} = query;
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const taxonomiesInfo = useTaxonomiesInfo( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
@@ -100,78 +103,139 @@ export default function QueryInspectorControls( {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					label={ __( 'Inherit query from template' ) }
-					help={ __(
-						'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-					) }
-					checked={ !! inherit }
-					onChange={ ( value ) => setQuery( { inherit: !! value } ) }
-				/>
-				{ ! inherit && (
-					<SelectControl
-						options={ postTypesSelectOptions }
-						value={ postType }
-						label={ __( 'Post type' ) }
-						onChange={ onPostTypeChange }
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Inherit query from template' ) }
 						help={ __(
-							'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+							'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
 						) }
+						checked={ !! inherit }
+						onChange={ ( value ) =>
+							setQuery( { inherit: !! value } )
+						}
 					/>
-				) }
-				{ displayLayout?.type === 'flex' && (
-					<>
-						<RangeControl
-							label={ __( 'Columns' ) }
-							value={ displayLayout.columns }
-							onChange={ ( value ) =>
-								setDisplayLayout( { columns: value } )
-							}
-							min={ 2 }
-							max={ Math.max( 6, displayLayout.columns ) }
+					{ ! inherit && (
+						<SelectControl
+							options={ postTypesSelectOptions }
+							value={ postType }
+							label={ __( 'Post type' ) }
+							onChange={ onPostTypeChange }
+							help={ __(
+								'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+							) }
 						/>
-						{ displayLayout.columns > 6 && (
-							<Notice status="warning" isDismissible={ false }>
-								{ __(
-									'This column count exceeds the recommended amount and may cause visual breakage.'
-								) }
-							</Notice>
-						) }
-					</>
-				) }
-				{ ! inherit && (
-					<OrderControl
-						{ ...{ order, orderBy } }
-						onChange={ setQuery }
-					/>
-				) }
-				{ ! inherit && showSticky && (
-					<StickyControl
-						value={ sticky }
-						onChange={ ( value ) => setQuery( { sticky: value } ) }
-					/>
-				) }
-			</PanelBody>
-			{ ! inherit && (
-				<PanelBody title={ __( 'Filters' ) }>
-					<TaxonomyControls onChange={ setQuery } query={ query } />
-					<AuthorControl value={ authorIds } onChange={ setQuery } />
-					<TextControl
-						label={ __( 'Keyword' ) }
-						value={ querySearch }
-						onChange={ setQuerySearch }
-					/>
-					{ isPostTypeHierarchical && (
-						<ParentControl
-							parents={ parents }
-							postType={ postType }
+					) }
+					{ displayLayout?.type === 'flex' && (
+						<>
+							<RangeControl
+								label={ __( 'Columns' ) }
+								value={ displayLayout.columns }
+								onChange={ ( value ) =>
+									setDisplayLayout( { columns: value } )
+								}
+								min={ 2 }
+								max={ Math.max( 6, displayLayout.columns ) }
+							/>
+							{ displayLayout.columns > 6 && (
+								<Notice
+									status="warning"
+									isDismissible={ false }
+								>
+									{ __(
+										'This column count exceeds the recommended amount and may cause visual breakage.'
+									) }
+								</Notice>
+							) }
+						</>
+					) }
+					{ ! inherit && (
+						<OrderControl
+							{ ...{ order, orderBy } }
 							onChange={ setQuery }
 						/>
 					) }
+					{ ! inherit && showSticky && (
+						<StickyControl
+							value={ sticky }
+							onChange={ ( value ) =>
+								setQuery( { sticky: value } )
+							}
+						/>
+					) }
 				</PanelBody>
+			</InspectorControls>
+			{ ! inherit && (
+				<InspectorControls>
+					<ToolsPanel
+						className="block-library-query-toolspanel__filters"
+						label={ __( 'Filters' ) }
+						resetAll={ () => {
+							setQuery( {
+								author: '',
+								parents: [],
+								search: '',
+								taxQuery: null,
+							} );
+							setQuerySearch( '' );
+						} }
+					>
+						{ !! taxonomiesInfo?.length && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						<ToolsPanelItem
+							hasValue={ () => !! authorIds }
+							label={ __( 'Authors' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								label={ __( 'Keyword' ) }
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+						{ isPostTypeHierarchical && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
 			) }
-		</InspectorControls>
+		</>
 	);
 }
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
index 7778996f63ff4b..297ea8321985e6 100644
--- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -33,8 +33,8 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	}
 };
 
-function TaxonomyControls( { onChange, query } ) {
-	const taxonomies = useTaxonomies( query.postType );
+export const useTaxonomiesInfo = ( postType ) => {
+	const taxonomies = useTaxonomies( postType );
 	const taxonomiesInfo = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -51,6 +51,11 @@ function TaxonomyControls( { onChange, query } ) {
 		},
 		[ taxonomies ]
 	);
+	return taxonomiesInfo;
+};
+
+export function TaxonomyControls( { onChange, query } ) {
+	const taxonomiesInfo = useTaxonomiesInfo( query.postType );
 	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
 		const taxonomyInfo = taxonomiesInfo.find(
 			( { slug } ) => slug === taxonomySlug
@@ -102,17 +107,19 @@ function TaxonomyControls( { onChange, query } ) {
 						return null;
 					}
 					return (
-						<FormTokenField
+						<div
 							key={ slug }
-							label={ name }
-							value={ getExistingTaxQueryValue( slug ) }
-							suggestions={ terms.names }
-							onChange={ onTermsChange( slug ) }
-						/>
+							className="block-library-query-inspector__taxonomy-control"
+						>
+							<FormTokenField
+								label={ name }
+								value={ getExistingTaxQueryValue( slug ) }
+								suggestions={ terms.names }
+								onChange={ onTermsChange( slug ) }
+							/>
+						</div>
 					);
 				} ) }
 		</>
 	);
 }
-
-export default TaxonomyControls;
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index c8c9650d83722c..e6eead11f152c0 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -43,3 +43,12 @@
 		max-height: none;
 	}
 }
+
+.block-library-query-toolspanel__filters {
+	.components-form-token-field__help {
+		margin-bottom: 0;
+	}
+	.block-library-query-inspector__taxonomy-control:not(:last-child) {
+		margin-bottom: $grid-unit-30;
+	}
+}
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
index 18716d3b11308b..6f922d1794e19e 100644
--- a/packages/block-library/src/quote/transforms.js
+++ b/packages/block-library/src/quote/transforms.js
@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createBlock,
-	parseWithAttributeSchema,
-	rawHandler,
-} from '@wordpress/blocks';
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -59,7 +55,7 @@ const transforms = {
 				},
 			} ),
 			selector: 'blockquote',
-			transform: ( node ) => {
+			transform: ( node, handler ) => {
 				return createBlock(
 					'core/quote',
 					// Don't try to parse any `cite` out of this content.
@@ -68,7 +64,7 @@ const transforms = {
 					// * If the cite is nested in the quoted text, it's wrong to
 					//   remove it.
 					{},
-					rawHandler( {
+					handler( {
 						HTML: node.innerHTML,
 						mode: 'BLOCKS',
 					} )
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index cc6aab40bd1cbe..f6eb7ed287c5ef 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -34,6 +34,8 @@
 .wp-block-search__input {
 	padding: 8px;
 	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
 	min-width: 3em;
 	border: 1px solid #949494;
 	font-size: inherit;
diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
index 5425fac2bb0cb4..7d25db45210371 100644
--- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
@@ -11,7 +11,14 @@ exports[`Search Block renders block with button inside option 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -119,7 +126,14 @@ exports[`Search Block renders block with button inside option 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -191,7 +205,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -359,7 +380,14 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -431,7 +459,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -539,7 +574,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -611,7 +653,14 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
diff --git a/packages/block-library/src/site-title/index.php b/packages/block-library/src/site-title/index.php
index 0dda33e9e78892..3c3e4d86692387 100644
--- a/packages/block-library/src/site-title/index.php
+++ b/packages/block-library/src/site-title/index.php
@@ -21,22 +21,21 @@ function render_block_core_site_title( $attributes ) {
 	$tag_name         = 'h1';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
-
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( $attributes['isLink'] ) {
-		$link_attrs = array(
-			'href="' . esc_url( get_bloginfo( 'url' ) ) . '"',
-			'rel="' . esc_attr( 'home' ) . '"',
+		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
+
+		$site_title = sprintf(
+			'<a href="%1$s" target="%2$s" rel="home"%3$s>%4$s</a>',
+			esc_url( home_url() ),
+			esc_attr( $link_target ),
 			$aria_current,
+			esc_html( $site_title )
 		);
-		if ( '_blank' === $attributes['linkTarget'] ) {
-			$link_attrs[] = 'target="_blank"';
-		}
-		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), esc_html( $site_title ) );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
diff --git a/packages/block-library/src/tag-cloud/style.scss b/packages/block-library/src/tag-cloud/style.scss
index 7afd55c45d6cb1..6936b7af66485d 100644
--- a/packages/block-library/src/tag-cloud/style.scss
+++ b/packages/block-library/src/tag-cloud/style.scss
@@ -1,6 +1,7 @@
 .wp-block-tag-cloud {
 	&.aligncenter {
 		text-align: center;
+		justify-content: center;
 	}
 
 	&.alignfull {
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 213dca72e1a4a1..f18e9f776d5e07 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -13,7 +13,8 @@ import {
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
@@ -43,8 +44,7 @@ export default function TemplatePartEdit( {
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( templatePartId );
+	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
@@ -142,7 +142,7 @@ export default function TemplatePartEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ templatePartId }>
 			<TemplatePartAdvancedControls
 				tagName={ tagName }
 				setAttributes={ setAttributes }
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 93d2591bc30f7a..20930df1a3a9f5 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -370,27 +370,6 @@ _Returns_
 
 -   `Array`: Block settings.
 
-### getBlockVariations
-
-Returns an array with the variations of a given block type.
-
-_Parameters_
-
--   _blockName_ `string`: Name of block (example: “core/columns”).
--   _scope_ `[WPBlockVariationScope]`: Block variation scope name.
-
-_Returns_
-
--   `(WPBlockVariation[]|void)`: Block variations.
-
-### getCategories
-
-Returns all the block categories.
-
-_Returns_
-
--   `WPBlockCategory[]`: Block categories.
-
 ### getChildBlockNames
 
 Returns an array with the child blocks of a given block.
@@ -685,6 +664,25 @@ _Returns_
 
 Registers a new block collection to group blocks in the same namespace in the inserter.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { registerBlockCollection, registerBlockType } from '@wordpress/blocks';
+
+// Register the collection.
+registerBlockCollection( 'my-collection', {
+	title: __( 'Custom Collection' ),
+} );
+
+// Register a block in the same namespace to add it to the collection.
+registerBlockType( 'my-collection/block-name', {
+	title: __( 'My First Block' ),
+	edit: () => <div>{ __( 'Hello from the editor!' ) }</div>,
+	save: () => <div>'Hello from the saved content!</div>,
+} );
+```
+
 _Parameters_
 
 -   _namespace_ `string`: The namespace to group blocks by in the inserter; corresponds to the block namespace.
@@ -696,6 +694,31 @@ _Parameters_
 
 Registers a new block style variation for the given block.
 
+For more information on connecting the styles with CSS [the official documentation](/docs/reference-guides/block-api/block-styles.md#styles)
+
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { registerBlockStyle } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => {
+				registerBlockStyle( 'core/quote', {
+					name: 'fancy-quote',
+					label: __( 'Fancy Quote' ),
+				} );
+			} }
+		>
+			{ __( 'Add a new block style for core/quote' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _blockName_ `string`: Name of block (example: “core/latest-posts”).
@@ -707,6 +730,21 @@ Registers a new block provided a unique name and an object defining its
 behavior. Once registered, the block is made available as an option to any
 editor interface where blocks are implemented.
 
+For more in-depth information on registering a custom block see the [Create a block tutorial](docs/how-to-guides/block-tutorial/README.md)
+
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { registerBlockType } from '@wordpress/blocks';
+
+registerBlockType( 'namespace/block-name', {
+	title: __( 'My First Block' ),
+	edit: () => <div>{ __( 'Hello from the editor!' ) }</div>,
+	save: () => <div>Hello from the saved content!</div>,
+} );
+```
+
 _Parameters_
 
 -   _blockNameOrMetadata_ `string|Object`: Block type name or its metadata.
@@ -720,6 +758,32 @@ _Returns_
 
 Registers a new block variation for the given block type.
 
+For more information on block variations see [the official documentation ](/docs/reference-guides/block-api/block-variations.md)
+
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { registerBlockVariation } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => {
+				registerBlockVariation( 'core/embed', {
+					name: 'custom',
+					title: __( 'My Custom Embed' ),
+					attributes: { providerNameSlug: 'custom' },
+				} );
+			} }
+		>
+			__( 'Add a custom variation for core/embed' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _blockName_ `string`: Name of the block (example: “core/columns”).
@@ -766,6 +830,37 @@ _Returns_
 
 Sets the block categories.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore, setCategories } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	// Retrieve the list of current categories.
+	const blockCategories = useSelect(
+		( select ) => select( blocksStore ).getCategories(),
+		[]
+	);
+
+	return (
+		<Button
+			onClick={ () => {
+				// Add a custom category to the existing list.
+				setCategories( [
+					...blockCategories,
+					{ title: 'Custom Category', slug: 'custom-category' },
+				] );
+			} }
+		>
+			{ __( 'Add a new custom block category' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _categories_ `WPBlockCategory[]`: Block categories.
@@ -774,6 +869,20 @@ _Parameters_
 
 Assigns the default block name.
 
+_Usage_
+
+```js
+import { setDefaultBlockName } from '@wordpress/blocks';
+
+const ExampleComponent = () => {
+	return (
+		<Button onClick={ () => setDefaultBlockName( 'core/heading' ) }>
+			{ __( 'Set the default block to Heading' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _name_ `string`: Block name.
@@ -790,6 +899,20 @@ _Parameters_
 
 Assigns name of block for handling block grouping interactions.
 
+_Usage_
+
+```js
+import { setGroupingBlockName } from '@wordpress/blocks';
+
+const ExampleComponent = () => {
+	return (
+		<Button onClick={ () => setGroupingBlockName( 'core/columns' ) }>
+			{ __( 'Set the default block to Heading' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _name_ `string`: Block name.
@@ -849,6 +972,26 @@ _Returns_
 
 Unregisters a block style variation for the given block.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { unregisterBlockStyle } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => {
+				unregisterBlockStyle( 'core/quote', 'plain' );
+			} }
+		>
+			{ __( 'Remove the "Plain" block style for core/quote' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _blockName_ `string`: Name of block (example: “core/latest-posts”).
@@ -858,6 +1001,23 @@ _Parameters_
 
 Unregisters a block.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { unregisterBlockType } from '@wordpress/blocks';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => unregisterBlockType( 'my-collection/block-name' ) }
+		>
+			{ __( 'Unregister my custom block.' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _name_ `string`: Block name.
@@ -870,6 +1030,26 @@ _Returns_
 
 Unregisters a block variation defined for the given block type.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { unregisterBlockVariation } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => {
+				unregisterBlockVariation( 'core/embed', 'youtube' );
+			} }
+		>
+			{ __( 'Remove the YouTube variation from core/embed' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _blockName_ `string`: Name of the block (example: “core/columns”).
@@ -879,6 +1059,26 @@ _Parameters_
 
 Updates a category.
 
+_Usage_
+
+```js
+import { __ } from '@wordpress/i18n';
+import { updateCategory } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
+
+const ExampleComponent = () => {
+	return (
+		<Button
+			onClick={ () => {
+				updateCategory( 'text', { title: __( 'Written Word' ) } );
+			} }
+		>
+			{ __( 'Update Text category title' ) }
+		</Button>
+	);
+};
+```
+
 _Parameters_
 
 -   _slug_ `string`: Block category slug.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 7cbb0e9673bfaf..b756451e81990c 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -43,6 +43,7 @@
 		"@wordpress/shortcode": "file:../shortcode",
 		"colord": "^2.7.0",
 		"hpq": "^1.3.0",
+		"is-plain-obj": "^4.1.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"rememo": "^4.0.0",
diff --git a/packages/blocks/src/api/categories.js b/packages/blocks/src/api/categories.js
index 1a0f5a319b277b..f73331066fed9e 100644
--- a/packages/blocks/src/api/categories.js
+++ b/packages/blocks/src/api/categories.js
@@ -12,6 +12,9 @@ import { store as blocksStore } from '../store';
 
 /**
  * Returns all the block categories.
+ * Ignored from documentation as the recommended usage is via useSelect from @wordpress/data.
+ *
+ * @ignore
  *
  * @return {WPBlockCategory[]} Block categories.
  */
@@ -23,6 +26,36 @@ export function getCategories() {
  * Sets the block categories.
  *
  * @param {WPBlockCategory[]} categories Block categories.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { store as blocksStore, setCategories } from '@wordpress/blocks';
+ * import { useSelect } from '@wordpress/data';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *     // Retrieve the list of current categories.
+ *     const blockCategories = useSelect(
+ *         ( select ) => select( blocksStore ).getCategories(),
+ *         []
+ *     );
+ *
+ *     return (
+ *         <Button
+ *             onClick={ () => {
+ *                 // Add a custom category to the existing list.
+ *                 setCategories( [
+ *                     ...blockCategories,
+ *                     { title: 'Custom Category', slug: 'custom-category' },
+ *                 ] );
+ *             } }
+ *         >
+ *             { __( 'Add a new custom block category' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export function setCategories( categories ) {
 	dispatch( blocksStore ).setCategories( categories );
@@ -34,6 +67,25 @@ export function setCategories( categories ) {
  * @param {string}          slug     Block category slug.
  * @param {WPBlockCategory} category Object containing the category properties
  *                                   that should be updated.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { updateCategory } from '@wordpress/blocks';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *         <Button
+ *             onClick={ () => {
+ *                 updateCategory( 'text', { title: __( 'Written Word' ) } );
+ *             } }
+ *         >
+ *             { __( 'Update Text category title' ) }
+ *         </Button>
+ * )    ;
+ * };
+ * ```
  */
 export function updateCategory( slug, category ) {
 	dispatch( blocksStore ).updateCategory( slug, category );
diff --git a/packages/blocks/src/api/raw-handling/html-to-blocks.js b/packages/blocks/src/api/raw-handling/html-to-blocks.js
index e31905ba82c9b7..18630a9abdce45 100644
--- a/packages/blocks/src/api/raw-handling/html-to-blocks.js
+++ b/packages/blocks/src/api/raw-handling/html-to-blocks.js
@@ -10,11 +10,13 @@ import { getRawTransforms } from './get-raw-transforms';
  * top-level tag. The HTML should be filtered to not have any text between
  * top-level tags and formatted in a way that blocks can handle the HTML.
  *
- * @param {string} html HTML to convert.
+ * @param {string}   html    HTML to convert.
+ * @param {Function} handler The handler calling htmlToBlocks: either rawHandler
+ *                           or pasteHandler.
  *
  * @return {Array} An array of blocks.
  */
-export function htmlToBlocks( html ) {
+export function htmlToBlocks( html, handler ) {
 	const doc = document.implementation.createHTMLDocument( '' );
 
 	doc.body.innerHTML = html;
@@ -36,7 +38,7 @@ export function htmlToBlocks( html ) {
 		const { transform, blockName } = rawTransform;
 
 		if ( transform ) {
-			return transform( node );
+			return transform( node, handler );
 		}
 
 		return createBlock(
diff --git a/packages/blocks/src/api/raw-handling/index.js b/packages/blocks/src/api/raw-handling/index.js
index d534cfaf14bb04..afd68a4a9e1e7b 100644
--- a/packages/blocks/src/api/raw-handling/index.js
+++ b/packages/blocks/src/api/raw-handling/index.js
@@ -71,7 +71,7 @@ export function rawHandler( { HTML = '' } ) {
 			piece = deepFilterHTML( piece, filters, blockContentSchema );
 			piece = normaliseBlocks( piece );
 
-			return htmlToBlocks( piece );
+			return htmlToBlocks( piece, rawHandler );
 		} )
 		.flat()
 		.filter( Boolean );
diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
index eecf70e3e99ea0..aa9f99037a39e9 100644
--- a/packages/blocks/src/api/raw-handling/paste-handler.js
+++ b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -209,7 +209,7 @@ export function pasteHandler( {
 			// Allows us to ask for this information when we get a report.
 			console.log( 'Processed HTML piece:\n\n', piece );
 
-			return htmlToBlocks( piece );
+			return htmlToBlocks( piece, pasteHandler );
 		} )
 		.flat()
 		.filter( Boolean );
diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
index 95ab93e4c47f83..ceb059977b16cd 100644
--- a/packages/blocks/src/api/registration.js
+++ b/packages/blocks/src/api/registration.js
@@ -231,9 +231,23 @@ function getBlockSettingsFromMetadata( { textdomain, ...metadata } ) {
  * behavior. Once registered, the block is made available as an option to any
  * editor interface where blocks are implemented.
  *
+ * For more in-depth information on registering a custom block see the [Create a block tutorial](docs/how-to-guides/block-tutorial/README.md)
+ *
  * @param {string|Object} blockNameOrMetadata Block type name or its metadata.
  * @param {Object}        settings            Block settings.
  *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { registerBlockType } from '@wordpress/blocks'
+ *
+ * registerBlockType( 'namespace/block-name', {
+ *     title: __( 'My First Block' ),
+ *     edit: () => <div>{ __( 'Hello from the editor!' ) }</div>,
+ *     save: () => <div>Hello from the saved content!</div>,
+ * } );
+ * ```
+ *
  * @return {?WPBlockType} The block, if it has been successfully registered;
  *                    otherwise `undefined`.
  */
@@ -343,6 +357,24 @@ function translateBlockSettingUsingI18nSchema(
  * @param {Object} settings        The block collection settings.
  * @param {string} settings.title  The title to display in the block inserter.
  * @param {Object} [settings.icon] The icon to display in the block inserter.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { registerBlockCollection, registerBlockType } from '@wordpress/blocks';
+ *
+ * // Register the collection.
+ * registerBlockCollection( 'my-collection', {
+ *     title: __( 'Custom Collection' ),
+ * } );
+ *
+ * // Register a block in the same namespace to add it to the collection.
+ * registerBlockType( 'my-collection/block-name', {
+ *     title: __( 'My First Block' ),
+ *     edit: () => <div>{ __( 'Hello from the editor!' ) }</div>,
+ *     save: () => <div>'Hello from the saved content!</div>,
+ * } );
+ * ```
  */
 export function registerBlockCollection( namespace, { title, icon } ) {
 	dispatch( blocksStore ).addBlockCollection( namespace, title, icon );
@@ -353,6 +385,12 @@ export function registerBlockCollection( namespace, { title, icon } ) {
  *
  * @param {string} namespace The namespace to group blocks by in the inserter; corresponds to the block namespace
  *
+ * @example
+ * ```js
+ * import { unregisterBlockCollection } from '@wordpress/blocks';
+ *
+ * unregisterBlockCollection( 'my-collection' );
+ * ```
  */
 export function unregisterBlockCollection( namespace ) {
 	dispatch( blocksStore ).removeBlockCollection( namespace );
@@ -363,6 +401,24 @@ export function unregisterBlockCollection( namespace ) {
  *
  * @param {string} name Block name.
  *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { unregisterBlockType } from '@wordpress/blocks';
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *         <Button
+ *             onClick={ () =>
+ *                 unregisterBlockType( 'my-collection/block-name' )
+ *             }
+ *         >
+ *             { __( 'Unregister my custom block.' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
+ *
  * @return {?WPBlockType} The previous block value, if it has been successfully
  *                    unregistered; otherwise `undefined`.
  */
@@ -427,6 +483,20 @@ export function getUnregisteredTypeHandlerName() {
  * Assigns the default block name.
  *
  * @param {string} name Block name.
+ *
+ * @example
+ * ```js
+ * import { setDefaultBlockName } from '@wordpress/blocks';
+ *
+ * const ExampleComponent = () => {
+ *
+ *     return (
+ *         <Button onClick={ () => setDefaultBlockName( 'core/heading' ) }>
+ *             { __( 'Set the default block to Heading' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export function setDefaultBlockName( name ) {
 	dispatch( blocksStore ).setDefaultBlockName( name );
@@ -436,6 +506,20 @@ export function setDefaultBlockName( name ) {
  * Assigns name of block for handling block grouping interactions.
  *
  * @param {string} name Block name.
+ *
+ * @example
+ * ```js
+ * import { setGroupingBlockName } from '@wordpress/blocks';
+ *
+ * const ExampleComponent = () => {
+ *
+ *     return (
+ *         <Button onClick={ () => setGroupingBlockName( 'core/columns' ) }>
+ *             { __( 'Set the default block to Heading' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export function setGroupingBlockName( name ) {
 	dispatch( blocksStore ).setGroupingBlockName( name );
@@ -569,8 +653,33 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
 /**
  * Registers a new block style variation for the given block.
  *
+ * For more information on connecting the styles with CSS [the official documentation](/docs/reference-guides/block-api/block-styles.md#styles)
+ *
  * @param {string} blockName      Name of block (example: “core/latest-posts”).
  * @param {Object} styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { registerBlockStyle } from '@wordpress/blocks';
+ * import { Button } from '@wordpress/components';
+ *
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *         <Button
+ *             onClick={ () => {
+ *                 registerBlockStyle( 'core/quote', {
+ *                     name: 'fancy-quote',
+ *                     label: __( 'Fancy Quote' ),
+ *                 } );
+ *             } }
+ *         >
+ *             { __( 'Add a new block style for core/quote' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export const registerBlockStyle = ( blockName, styleVariation ) => {
 	dispatch( blocksStore ).addBlockStyles( blockName, styleVariation );
@@ -581,6 +690,25 @@ export const registerBlockStyle = ( blockName, styleVariation ) => {
  *
  * @param {string} blockName          Name of block (example: “core/latest-posts”).
  * @param {string} styleVariationName Name of class applied to the block.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { unregisterBlockStyle } from '@wordpress/blocks';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *     <Button
+ *         onClick={ () => {
+ *             unregisterBlockStyle( 'core/quote', 'plain' );
+ *         } }
+ *     >
+ *         { __( 'Remove the "Plain" block style for core/quote' ) }
+ *     </Button>
+ *     );
+ * };
+ * ```
  */
 export const unregisterBlockStyle = ( blockName, styleVariationName ) => {
 	dispatch( blocksStore ).removeBlockStyles( blockName, styleVariationName );
@@ -588,6 +716,9 @@ export const unregisterBlockStyle = ( blockName, styleVariationName ) => {
 
 /**
  * Returns an array with the variations of a given block type.
+ * Ignored from documentation as the recommended usage is via useSelect from @wordpress/data.
+ *
+ * @ignore
  *
  * @param {string}                blockName Name of block (example: “core/columns”).
  * @param {WPBlockVariationScope} [scope]   Block variation scope name.
@@ -601,8 +732,33 @@ export const getBlockVariations = ( blockName, scope ) => {
 /**
  * Registers a new block variation for the given block type.
  *
+ * For more information on block variations see [the official documentation ](/docs/reference-guides/block-api/block-variations.md)
+ *
  * @param {string}           blockName Name of the block (example: “core/columns”).
  * @param {WPBlockVariation} variation Object describing a block variation.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { registerBlockVariation } from '@wordpress/blocks';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *         <Button
+ *             onClick={ () => {
+ *                 registerBlockVariation( 'core/embed', {
+ *                     name: 'custom',
+ *                     title: __( 'My Custom Embed' ),
+ *                     attributes: { providerNameSlug: 'custom' },
+ *                 } );
+ *             } }
+ *          >
+ *              __( 'Add a custom variation for core/embed' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export const registerBlockVariation = ( blockName, variation ) => {
 	dispatch( blocksStore ).addBlockVariations( blockName, variation );
@@ -613,6 +769,25 @@ export const registerBlockVariation = ( blockName, variation ) => {
  *
  * @param {string} blockName     Name of the block (example: “core/columns”).
  * @param {string} variationName Name of the variation defined for the block.
+ *
+ * @example
+ * ```js
+ * import { __ } from '@wordpress/i18n';
+ * import { unregisterBlockVariation } from '@wordpress/blocks';
+ * import { Button } from '@wordpress/components';
+ *
+ * const ExampleComponent = () => {
+ *     return (
+ *         <Button
+ *             onClick={ () => {
+ *                 unregisterBlockVariation( 'core/embed', 'youtube' );
+ *             } }
+ *         >
+ *             { __( 'Remove the YouTube variation from core/embed' ) }
+ *         </Button>
+ *     );
+ * };
+ * ```
  */
 export const unregisterBlockVariation = ( blockName, variationName ) => {
 	dispatch( blocksStore ).removeBlockVariations( blockName, variationName );
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 690220dbaf6910..09553966be587a 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, reduce, castArray, startsWith } from 'lodash';
+import { isEmpty, reduce, castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ export function getCommentDelimitedContent(
 		: '';
 
 	// Strip core blocks of their namespace prefix.
-	const blockName = startsWith( rawBlockName, 'core/' )
+	const blockName = rawBlockName?.startsWith( 'core/' )
 		? rawBlockName.slice( 5 )
 		: rawBlockName;
 
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index ec5e2ff3bba8cc..5cb5a6a07d5e87 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { every, has, reduce, maxBy } from 'lodash';
+import { every, has, reduce } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
@@ -101,13 +101,17 @@ export function normalizeIconObject( icon ) {
 
 	if ( has( icon, [ 'background' ] ) ) {
 		const colordBgColor = colord( icon.background );
+		const getColorContrast = ( iconColor ) =>
+			colordBgColor.contrast( iconColor );
+		const maxContrast = Math.max( ...ICON_COLORS.map( getColorContrast ) );
 
 		return {
 			...icon,
 			foreground: icon.foreground
 				? icon.foreground
-				: maxBy( ICON_COLORS, ( iconColor ) =>
-						colordBgColor.contrast( iconColor )
+				: ICON_COLORS.find(
+						( iconColor ) =>
+							getColorContrast( iconColor ) === maxContrast
 				  ),
 			shadowColor: colordBgColor.alpha( 0.3 ).toRgbString(),
 		};
diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js
index 141fd9e79d4310..0ef38acfc2e0c5 100644
--- a/packages/blocks/src/store/actions.js
+++ b/packages/blocks/src/store/actions.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { castArray, isPlainObject, omit, pick, some } from 'lodash';
+import isPlainObject from 'is-plain-obj';
+import { castArray, omit, pick, some } from 'lodash';
 
 /**
  * WordPress dependencies
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2fbc3447917a1e..8b3e71a19469fe 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,21 +4,42 @@
 
 ### Bug Fix
 
+-   `Popover`: make sure that `ownerDocument` is always defined ([#42886](https://github.com/WordPress/gutenberg/pull/42886)).
 -   `ExternalLink`: Check if the link is an internal anchor link and prevent anchor links from being opened. ([#42259](https://github.com/WordPress/gutenberg/pull/42259)).
 -   `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
 -   `InputControl`: Fix acceptance of falsy values in controlled updates ([#42484](https://github.com/WordPress/gutenberg/pull/42484/)).
 -   `Tooltip (Experimental)`, `CustomSelectControl`, `TimePicker`: Add missing font-size styles which were necessary in non-WordPress contexts ([#42844](https://github.com/WordPress/gutenberg/pull/42844/)).
+-   `TextControl`, `TextareaControl`, `ToggleGroupControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)).
 -   `Popover`: fix arrow placement and design ([#42874](https://github.com/WordPress/gutenberg/pull/42874/)).
+-   `Popover`: fix minor glitch in arrow [#42903](https://github.com/WordPress/gutenberg/pull/42903)).
+-   `ColorPicker`: fix layout overflow [#42992](https://github.com/WordPress/gutenberg/pull/42992)).
+-   `ToolsPanel`: Constrain grid columns to 50% max-width ([#42795](https://github.com/WordPress/gutenberg/pull/42795)).
+-   `Popover`: anchor correctly to parent node when no explicit anchor is passed ([#42971](https://github.com/WordPress/gutenberg/pull/42971)).
 
 ### Enhancements
 
+-   `ToggleGroupControlOptionIcon`: Maintain square proportions ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
+-   `ToggleGroupControlOptionIcon`: Add a required `label` prop so the button is always accessibly labeled. Also removes `showTooltip` from the accepted prop types, as the tooltip will now always be shown.  ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
+-   `SelectControl`, `CustomSelectControl`: Refresh and refactor chevron down icon ([#42962](https://github.com/WordPress/gutenberg/pull/42962)).
+-   `FontSizePicker`: Add large size variant ([#42716](https://github.com/WordPress/gutenberg/pull/42716/)).
+-   `Popover`: tidy up code, add more comments ([#42944](https://github.com/WordPress/gutenberg/pull/42944)).
 -   Add `box-sizing` reset style mixin to utils ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
 -   `ResizableBox`: Make tooltip background match `Tooltip` component's ([#42800](https://github.com/WordPress/gutenberg/pull/42800)).
+-   Update control labels to the new uppercase styles ([#42789](https://github.com/WordPress/gutenberg/pull/42789)).
 -   `UnitControl`: Update unit dropdown design for the large size variant ([#42000](https://github.com/WordPress/gutenberg/pull/42000)).
+-   `BaseControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)).
+-   `ToggleGroupControl`, `RangeControl`, `FontSizePicker`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#43062](https://github.com/WordPress/gutenberg/pull/43062)).
+-   `BoxControl`: Export `applyValueToSides` util function. ([#42733](https://github.com/WordPress/gutenberg/pull/42733/)).
+-   `AnglePickerControl`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([#43160](https://github.com/WordPress/gutenberg/pull/43160/)).
 
 ### Internal
 
+-   `ToggleGroupControl`: Add `__experimentalIsIconGroup` prop ([#43060](https://github.com/WordPress/gutenberg/pull/43060/)).
+-   `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)).
 -   `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)).
+-   `Placeholder`: Convert to TypeScript ([#42990](https://github.com/WordPress/gutenberg/pull/42990)).
+-   `Popover`: rewrite Storybook examples using controls [#42903](https://github.com/WordPress/gutenberg/pull/42903)).
+-   `Swatch`: Remove component in favor of `ColorIndicator` [#43068](https://github.com/WordPress/gutenberg/pull/43068)).
 
 ## 19.16.0 (2022-07-27)
 
@@ -47,6 +68,7 @@
 -   `BorderControl`: Render dropdown as prefix within its `UnitControl` ([#42212](https://github.com/WordPress/gutenberg/pull/42212/))
 -   `UnitControl`: Update prop types to allow ReactNode as prefix ([#42212](https://github.com/WordPress/gutenberg/pull/42212/))
 -   `ToolsPanel`: Updated README with panel layout information and more expansive usage example ([#42615](https://github.com/WordPress/gutenberg/pull/42615)).
+-   `ComboboxControl`, `FormTokenField`: Add custom render callback for options in suggestions list ([#42597](https://github.com/WordPress/gutenberg/pull/42597/)).
 
 ### Internal
 
@@ -76,7 +98,6 @@
 -   `Popover`: call `getAnchorRect` callback prop even if `anchorRefFallback` has no value. ([#42329](https://github.com/WordPress/gutenberg/pull/42329)).
 -   Fix `ToolTip` position to ensure it is always positioned relative to the first child of the ToolTip. ([#41268](https://github.com/WordPress/gutenberg/pull/41268))
 
-
 ### Enhancements
 
 -   `ToggleGroupControl`: Add large size variant ([#42008](https://github.com/WordPress/gutenberg/pull/42008/)).
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 1417bfd6a845c3..1cc3085cd7af56 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -20,6 +20,8 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	className,
 	label = __( 'Angle' ),
 	onChange,
@@ -34,7 +36,11 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes } gap={ 4 }>
+		<Root
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			className={ classes }
+			gap={ 4 }
+		>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
diff --git a/packages/components/src/angle-picker-control/stories/index.js b/packages/components/src/angle-picker-control/stories/index.js
index 5d88c9be90d59c..f2de7c4d77bc23 100644
--- a/packages/components/src/angle-picker-control/stories/index.js
+++ b/packages/components/src/angle-picker-control/stories/index.js
@@ -11,13 +11,16 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+	},
 };
 
-const AnglePickerWithState = () => {
+const AnglePickerWithState = ( args ) => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return (
+		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
+	);
 };
 
-export const _default = () => {
-	return <AnglePickerWithState />;
-};
+export const Default = AnglePickerWithState.bind( {} );
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
index 9bf45eaf92056e..7deb0c4645b474 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
@@ -14,8 +15,16 @@ import CONFIG from '../../utils/config-values';
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 3;
 
+const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
+	return ! __nextHasNoMarginBottom
+		? css`
+				margin-bottom: ${ space( 2 ) };
+		  `
+		: '';
+};
+
 export const Root = styled( Flex )`
-	margin-bottom: ${ space( 2 ) };
+	${ deprecatedBottomMargin }
 `;
 
 export const CircleRoot = styled.div`
diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx
index ab2af8858dbaae..122577fdeba62c 100644
--- a/packages/components/src/base-control/index.tsx
+++ b/packages/components/src/base-control/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { FunctionComponent } from 'react';
 
 /**
  * Internal dependencies
@@ -16,6 +15,7 @@ import {
 	StyledHelp,
 	StyledVisualLabel,
 } from './styles/base-control-styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
  * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
@@ -104,12 +104,14 @@ export const BaseControl = ( {
  * 	</BaseControl>
  * );
  */
-export const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( {
+export const VisualLabel = ( {
 	className,
 	children,
-} ) => {
+	...props
+}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {
 	return (
 		<StyledVisualLabel
+			{ ...props }
 			className={ classnames(
 				'components-base-control__label',
 				className
diff --git a/packages/components/src/base-control/stories/index.tsx b/packages/components/src/base-control/stories/index.tsx
index 635d7cadb04a0c..edc850f760745f 100644
--- a/packages/components/src/base-control/stories/index.tsx
+++ b/packages/components/src/base-control/stories/index.tsx
@@ -60,6 +60,7 @@ WithHelpText.args = {
 export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
 	props
 ) => {
+	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 
 	return (
diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts
index f05ac237aa36aa..ca8c45159ecc8f 100644
--- a/packages/components/src/base-control/styles/base-control-styles.ts
+++ b/packages/components/src/base-control/styles/base-control-styles.ts
@@ -7,12 +7,14 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { font, COLORS } from '../../utils';
+import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: ${ font( 'default.fontSize' ) };
+
+	${ boxSizingReset }
 `;
 
 const deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {
@@ -33,12 +35,10 @@ export const StyledField = styled.div`
 `;
 
 const labelStyles = css`
+	${ baseLabelTypography };
+
 	display: inline-block;
 	margin-bottom: ${ space( 2 ) };
-`;
-
-export const StyledLabel = styled.label`
-	${ labelStyles }
 	/**
 	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from
 	 * StyledLabel when it is rendered as a legend.
@@ -46,6 +46,10 @@ export const StyledLabel = styled.label`
 	padding: 0;
 `;
 
+export const StyledLabel = styled.label`
+	${ labelStyles }
+`;
+
 const deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {
 	return (
 		! __nextHasNoMarginBottom &&
diff --git a/packages/components/src/base-control/types.ts b/packages/components/src/base-control/types.ts
index 0cefb33db0ec90..490163d92e889c 100644
--- a/packages/components/src/base-control/types.ts
+++ b/packages/components/src/base-control/types.ts
@@ -37,6 +37,5 @@ export type BaseControlProps = {
 };
 
 export type BaseControlVisualLabelProps = {
-	className?: string;
 	children: ReactNode;
 };
diff --git a/packages/components/src/box-control/all-input-control.js b/packages/components/src/box-control/all-input-control.js
index 5a1c8cbb07048e..fcde202fd7de8f 100644
--- a/packages/components/src/box-control/all-input-control.js
+++ b/packages/components/src/box-control/all-input-control.js
@@ -3,8 +3,8 @@
  */
 import UnitControl from './unit-control';
 import {
-	ALL_SIDES,
 	LABELS,
+	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
@@ -32,34 +32,10 @@ export default function AllInputControl( {
 		onFocus( event, { side: 'all' } );
 	};
 
-	// Applies a value to an object representing top, right, bottom and left
-	// sides while taking into account any custom side configuration.
-	const applyValueToSides = ( currentValues, newValue ) => {
-		const newValues = { ...currentValues };
-
-		if ( sides?.length ) {
-			sides.forEach( ( side ) => {
-				if ( side === 'vertical' ) {
-					newValues.top = newValue;
-					newValues.bottom = newValue;
-				} else if ( side === 'horizontal' ) {
-					newValues.left = newValue;
-					newValues.right = newValue;
-				} else {
-					newValues[ side ] = newValue;
-				}
-			} );
-		} else {
-			ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
-		}
-
-		return newValues;
-	};
-
 	const handleOnChange = ( next ) => {
 		const isNumeric = ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
-		const nextValues = applyValueToSides( values, nextValue );
+		const nextValues = applyValueToSides( values, nextValue, sides );
 
 		onChange( nextValues );
 	};
@@ -67,7 +43,7 @@ export default function AllInputControl( {
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange = ( unit ) => {
-		const newUnits = applyValueToSides( selectedUnits, unit );
+		const newUnits = applyValueToSides( selectedUnits, unit, sides );
 		setSelectedUnits( newUnits );
 	};
 
diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js
index a8411ba9a1af30..f5e8e7428c8015 100644
--- a/packages/components/src/box-control/index.js
+++ b/packages/components/src/box-control/index.js
@@ -8,13 +8,13 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import AxialInputControls from './axial-input-controls';
 import BoxControlIcon from './icon';
-import { Text } from '../text';
 import LinkedButton from './linked-button';
 import {
 	Root,
@@ -120,12 +120,9 @@ export default function BoxControl( {
 		<Root id={ id } role="group" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
 				<FlexItem>
-					<Text
-						id={ headingId }
-						className="component-box-control__label"
-					>
+					<BaseControl.VisualLabel id={ headingId }>
 						{ label }
-					</Text>
+					</BaseControl.VisualLabel>
 				</FlexItem>
 				{ allowReset && (
 					<FlexItem>
@@ -173,3 +170,5 @@ export default function BoxControl( {
 		</Root>
 	);
 }
+
+export { applyValueToSides } from './utils';
diff --git a/packages/components/src/box-control/styles/box-control-styles.js b/packages/components/src/box-control/styles/box-control-styles.js
index 14238f0a5e6647..1aa2c995a8235d 100644
--- a/packages/components/src/box-control/styles/box-control-styles.js
+++ b/packages/components/src/box-control/styles/box-control-styles.js
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import BaseUnitControl from '../../unit-control';
-import { COLORS, rtl } from '../../utils';
+import { rtl } from '../../utils';
 
 export const Root = styled.div`
 	box-sizing: border-box;
@@ -18,7 +18,6 @@ export const Root = styled.div`
 `;
 
 export const Header = styled( Flex )`
-	color: ${ COLORS.ui.label };
 	margin-bottom: 8px;
 `;
 
diff --git a/packages/components/src/box-control/utils.js b/packages/components/src/box-control/utils.js
index 248f5bc48b621a..1053e8ff81998a 100644
--- a/packages/components/src/box-control/utils.js
+++ b/packages/components/src/box-control/utils.js
@@ -194,3 +194,35 @@ export function normalizeSides( sides ) {
 
 	return filteredSides;
 }
+
+/**
+ * Applies a value to an object representing top, right, bottom and left sides
+ * while taking into account any custom side configuration.
+ *
+ * @param {Object}        currentValues The current values for each side.
+ * @param {string|number} newValue      The value to apply to the sides object.
+ * @param {string[]}      sides         Array defining valid sides.
+ *
+ * @return {Object} Object containing the updated values for each side.
+ */
+export function applyValueToSides( currentValues, newValue, sides ) {
+	const newValues = { ...currentValues };
+
+	if ( sides?.length ) {
+		sides.forEach( ( side ) => {
+			if ( side === 'vertical' ) {
+				newValues.top = newValue;
+				newValues.bottom = newValue;
+			} else if ( side === 'horizontal' ) {
+				newValues.left = newValue;
+				newValues.right = newValue;
+			} else {
+				newValues[ side ] = newValue;
+			}
+		} );
+	} else {
+		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
+	}
+
+	return newValues;
+}
diff --git a/packages/components/src/color-list-picker/index.js b/packages/components/src/color-list-picker/index.js
index 7a0bf8acdc47ad..9748a8ea3ba72b 100644
--- a/packages/components/src/color-list-picker/index.js
+++ b/packages/components/src/color-list-picker/index.js
@@ -2,13 +2,16 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { swatch } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import ColorPalette from '../color-palette';
-import Swatch from '../swatch';
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
+import { HStack } from '../h-stack';
 
 function ColorOption( {
 	label,
@@ -23,10 +26,19 @@ function ColorOption( {
 		<>
 			<Button
 				className="components-color-list-picker__swatch-button"
-				icon={ <Swatch fill={ value } /> }
 				onClick={ () => setIsOpen( ( prev ) => ! prev ) }
 			>
-				{ label }
+				<HStack justify="flex-start" spacing={ 2 }>
+					{ value ? (
+						<ColorIndicator
+							colorValue={ value }
+							className="components-color-list-picker__swatch-color"
+						/>
+					) : (
+						<Icon icon={ swatch } />
+					) }
+					<span>{ label }</span>
+				</HStack>
 			</Button>
 			{ isOpen && (
 				<ColorPalette
diff --git a/packages/components/src/color-list-picker/style.scss b/packages/components/src/color-list-picker/style.scss
index 232be723ed9585..dd0c79ffb8062b 100644
--- a/packages/components/src/color-list-picker/style.scss
+++ b/packages/components/src/color-list-picker/style.scss
@@ -6,3 +6,14 @@
 .components-color-list-picker__color-picker {
 	margin: $grid-unit-10 0;
 }
+
+.components-color-list-picker__swatch-button {
+	// Used to simulate styles as a .button.has-icon (which this component can't
+	// opt into, because it has to show more than a simple SVG as the "icon")
+	padding: 6px;
+}
+
+.components-color-list-picker__swatch-color {
+	// Match the 24px size of the `swatch` icon (used when no color is set)
+	margin: 2px;
+}
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index d234f6fbb3c5d0..97a1171dd53beb 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -11,6 +11,7 @@ import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
 import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
@@ -70,6 +71,8 @@ export const ColorInputWrapper = styled( Flex )`
 `;
 
 export const ColorfulWrapper = styled.div`
+	${ boxSizingReset };
+
 	width: 216px;
 
 	.react-colorful {
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index e0d5a71ab14152..f6e81d2cff3513 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -116,6 +116,13 @@ The current value of the input.
 -   Type: `mixed`
 -   Required: Yes
 
+#### __experimentalRenderItem
+
+Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
+
+-   Type: `Function` - `( args: { item: object } ) => ReactNode`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but without a search input, the `CustomSelectControl` component.
diff --git a/packages/components/src/combobox-control/index.js b/packages/components/src/combobox-control/index.js
index f5f69bb0832dbb..5ede9201c4718e 100644
--- a/packages/components/src/combobox-control/index.js
+++ b/packages/components/src/combobox-control/index.js
@@ -59,6 +59,7 @@ function ComboboxControl( {
 	messages = {
 		selected: __( 'Item selected.' ),
 	},
+	__experimentalRenderItem,
 } ) {
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
@@ -285,6 +286,9 @@ function ComboboxControl( {
 							onHover={ setSelectedSuggestion }
 							onSelect={ onSuggestionSelected }
 							scrollIntoView
+							__experimentalRenderItem={
+								__experimentalRenderItem
+							}
 						/>
 					) }
 				</div>
diff --git a/packages/components/src/combobox-control/stories/index.js b/packages/components/src/combobox-control/stories/index.js
index 3ba34f74dc8a95..3c6974e954afa6 100644
--- a/packages/components/src/combobox-control/stories/index.js
+++ b/packages/components/src/combobox-control/stories/index.js
@@ -266,7 +266,7 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( args ) {
+function Template( args ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
@@ -275,15 +275,59 @@ function CountryCodeComboboxControl( args ) {
 				{ ...args }
 				value={ value }
 				onChange={ setValue }
-				label="Select a country"
-				options={ countryOptions }
 			/>
 			<p>Value: { value }</p>
 		</>
 	);
 }
-export const _default = CountryCodeComboboxControl.bind( {} );
-_default.args = {
+export const Default = Template.bind( {} );
+Default.args = {
 	__next36pxDefaultSize: false,
 	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+};
+
+const authorOptions = [
+	{
+		value: 'parsley',
+		label: 'Parsley Montana',
+		age: 48,
+		country: 'Germany',
+	},
+	{
+		value: 'cabbage',
+		label: 'Cabbage New York',
+		age: 44,
+		country: 'France',
+	},
+	{
+		value: 'jake',
+		label: 'Jake Weary',
+		age: 41,
+		country: 'United Kingdom',
+	},
+];
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem = Template.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	label: 'Select an author',
+	options: authorOptions,
+	__experimentalRenderItem: ( { item } ) => {
+		const { label, age, country } = item;
+		return (
+			<div>
+				<div style={ { marginBottom: '0.2rem' } }>{ label }</div>
+				<small>
+					Age: { age }, Country: { country }
+				</small>
+			</div>
+		);
+	},
 };
diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
index e2cf0f377d4b88..10d15992566aa6 100644
--- a/packages/components/src/custom-gradient-picker/style.scss
+++ b/packages/components/src/custom-gradient-picker/style.scss
@@ -106,15 +106,3 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
 		}
 	}
 }
-
-// All these styles should be made generic and changed on the inputs for all components.
-.components-custom-gradient-picker {
-	.components-input-control__label {
-		line-height: 1;
-	}
-	label {
-		text-transform: uppercase;
-		font-size: 11px;
-		font-weight: 500;
-	}
-}
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index c830e6bea999a0..0a3fe89c0468bd 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon, check, chevronDown } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
 
@@ -16,7 +16,9 @@ import { useCallback, useState } from '@wordpress/element';
  */
 import { VisuallyHidden } from '../';
 import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
-import InputBase from '../input-control/input-base';
+import SelectControlChevronDown from '../select-control/chevron-down';
+import { InputBaseWithBackCompatMinWidth } from './styles';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -138,20 +140,24 @@ export default function CustomSelectControl( {
 				</VisuallyHidden>
 			) : (
 				/* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
-				<label
+				<StyledLabel
 					{ ...getLabelProps( {
 						className: 'components-custom-select-control__label',
 					} ) }
 				>
 					{ label }
-				</label>
+				</StyledLabel>
 			) }
-			<InputBase
+			<InputBaseWithBackCompatMinWidth
+				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
 				__unstableInputWidth={
 					__nextUnconstrainedWidth ? undefined : 'auto'
 				}
 				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
+				size={ size }
+				suffix={ <SelectControlChevronDown /> }
 			>
 				<SelectControlSelect
 					as="button"
@@ -163,24 +169,13 @@ export default function CustomSelectControl( {
 						// This is needed because some speech recognition software don't support `aria-labelledby`.
 						'aria-label': label,
 						'aria-labelledby': undefined,
-						className: classnames(
-							'components-custom-select-control__button',
-							{
-								'is-next-unconstrained-width':
-									__nextUnconstrainedWidth,
-							}
-						),
+						className: 'components-custom-select-control__button',
 						describedBy: getDescribedBy(),
 					} ) }
 				>
 					{ itemToString( selectedItem ) }
-					<Icon
-						icon={ chevronDown }
-						className="components-custom-select-control__button-icon"
-						size={ 18 }
-					/>
 				</SelectControlSelect>
-			</InputBase>
+			</InputBaseWithBackCompatMinWidth>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&
diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss
index 507983f20ee2c4..e6ca7945abfe1e 100644
--- a/packages/components/src/custom-select-control/style.scss
+++ b/packages/components/src/custom-select-control/style.scss
@@ -3,27 +3,10 @@
 	font-size: $default-font-size;
 }
 
-.components-custom-select-control__label {
-	display: block;
-	margin-bottom: $grid-unit-10;
-}
-
 .components-custom-select-control__button {
 	position: relative;
 	text-align: left;
 	outline: 0; // focus ring is handled elsewhere
-
-	&:not(.is-next-unconstrained-width) {
-		min-width: 130px;
-	}
-
-	.components-custom-select-control__button-icon {
-		height: 100%;
-		padding: 0;
-		position: absolute;
-		right: $grid-unit-05;
-		top: 0;
-	}
 }
 
 .components-custom-select-control__menu {
diff --git a/packages/components/src/custom-select-control/styles.ts b/packages/components/src/custom-select-control/styles.ts
new file mode 100644
index 00000000000000..e16b5d0b7bdd7a
--- /dev/null
+++ b/packages/components/src/custom-select-control/styles.ts
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import InputBase from '../input-control/input-base';
+import { Container as InputControlContainer } from '../input-control/styles/input-control-styles';
+
+type BackCompatMinWidthProps = {
+	__nextUnconstrainedWidth: boolean;
+};
+
+const backCompatMinWidth = ( props: BackCompatMinWidthProps ) =>
+	! props.__nextUnconstrainedWidth
+		? css`
+				${ InputControlContainer } {
+					min-width: 130px;
+				}
+		  `
+		: '';
+
+export const InputBaseWithBackCompatMinWidth = styled( InputBase )`
+	${ backCompatMinWidth }
+`;
diff --git a/packages/components/src/date-time/time/index.tsx b/packages/components/src/date-time/time/index.tsx
index b7a50288168746..33c86948856f64 100644
--- a/packages/components/src/date-time/time/index.tsx
+++ b/packages/components/src/date-time/time/index.tsx
@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import BaseControl from '../../base-control';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
 import TimeZone from './timezone';
@@ -19,7 +20,6 @@ import type { TimePickerProps } from '../types';
 import {
 	Wrapper,
 	Fieldset,
-	Legend,
 	HoursInput,
 	TimeSeparator,
 	MinutesInput,
@@ -220,11 +220,12 @@ export function TimePicker( {
 			className="components-datetime__time" // Unused, for backwards compatibility.
 		>
 			<Fieldset>
-				<Legend
+				<BaseControl.VisualLabel
+					as="legend"
 					className="components-datetime__time-legend" // Unused, for backwards compatibility.
 				>
 					{ __( 'Time' ) }
-				</Legend>
+				</BaseControl.VisualLabel>
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
@@ -309,11 +310,12 @@ export function TimePicker( {
 				</HStack>
 			</Fieldset>
 			<Fieldset>
-				<Legend
+				<BaseControl.VisualLabel
+					as="legend"
 					className="components-datetime__time-legend" // Unused, for backwards compatibility.
 				>
 					{ __( 'Date' ) }
-				</Legend>
+				</BaseControl.VisualLabel>
 				<HStack
 					className="components-datetime__time-wrapper" // Unused, for backwards compatibility.
 				>
diff --git a/packages/components/src/date-time/time/styles.ts b/packages/components/src/date-time/time/styles.ts
index 1e7de446bdc286..68c59d08873922 100644
--- a/packages/components/src/date-time/time/styles.ts
+++ b/packages/components/src/date-time/time/styles.ts
@@ -31,11 +31,6 @@ export const Fieldset = styled.fieldset`
 	}
 `;
 
-export const Legend = styled.legend`
-	margin-bottom: ${ space( 2 ) };
-	padding: 0;
-`;
-
 export const TimeWrapper = styled.div`
 	direction: ltr;
 	display: flex;
diff --git a/packages/components/src/duotone-picker/duotone-swatch.js b/packages/components/src/duotone-picker/duotone-swatch.js
index 1ab35b53034c7d..d98671affbbd13 100644
--- a/packages/components/src/duotone-picker/duotone-swatch.js
+++ b/packages/components/src/duotone-picker/duotone-swatch.js
@@ -1,15 +1,22 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import Swatch from '../swatch';
+import { swatch } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
 
 function DuotoneSwatch( { values } ) {
-	return (
-		<Swatch
-			fill={ values && getGradientFromCSSColors( values, '135deg' ) }
+	return values ? (
+		<ColorIndicator
+			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
 		/>
+	) : (
+		<Icon icon={ swatch } />
 	);
 }
 
diff --git a/packages/components/src/flex/flex-block/README.md b/packages/components/src/flex/flex-block/README.md
index 0ae21c9c0c7e78..1b4ca70e7cd8e9 100644
--- a/packages/components/src/flex/flex-block/README.md
+++ b/packages/components/src/flex/flex-block/README.md
@@ -8,8 +8,8 @@ See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for
 
 ## Props
 
-### display
-
-**Type**: `[CSSProperties['display']]`
+### `display`: `CSSProperties['display']`
 
 The CSS display property of `FlexBlock`.
+
+-   Required: No
diff --git a/packages/components/src/flex/flex-block/component.js b/packages/components/src/flex/flex-block/component.tsx
similarity index 50%
rename from packages/components/src/flex/flex-block/component.js
rename to packages/components/src/flex/flex-block/component.tsx
index 2b395128b6effe..f732bbe64896cf 100644
--- a/packages/components/src/flex/flex-block/component.js
+++ b/packages/components/src/flex/flex-block/component.tsx
@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
+import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
- */
-function FlexBlock( props, forwardedRef ) {
+function UnconnectedFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexBlockProps = useFlexBlock( props );
 
 	return <View { ...flexBlockProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
+ * `FlexBlock` is a primitive layout component that adaptively resizes content
+ * within layout containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexBlock } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexBlock( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );
+export const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );
 
-export default ConnectedFlexBlock;
+export default FlexBlock;
diff --git a/packages/components/src/flex/flex-block/hook.js b/packages/components/src/flex/flex-block/hook.ts
similarity index 52%
rename from packages/components/src/flex/flex-block/hook.js
rename to packages/components/src/flex/flex-block/hook.ts
index deed81d8f28f7c..b9026e64f7c46b 100644
--- a/packages/components/src/flex/flex-block/hook.js
+++ b/packages/components/src/flex/flex-block/hook.ts
@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexItem } from '../flex-item';
+import type { FlexBlockProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- */
-export function useFlexBlock( props ) {
+export function useFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >
+) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );
 	const flexItemProps = useFlexItem( { isBlock: true, ...otherProps } );
 
diff --git a/packages/components/src/flex/flex-block/index.js b/packages/components/src/flex/flex-block/index.ts
similarity index 100%
rename from packages/components/src/flex/flex-block/index.js
rename to packages/components/src/flex/flex-block/index.ts
diff --git a/packages/components/src/flex/flex-item/README.md b/packages/components/src/flex/flex-item/README.md
index 5a96af724fece4..1ae3ddbc870f18 100644
--- a/packages/components/src/flex/flex-item/README.md
+++ b/packages/components/src/flex/flex-item/README.md
@@ -8,14 +8,15 @@ See [`flex/README.md#usage`](/packages/components/src/flex/flex/README.md#usage)
 
 ## Props
 
-### display
-
-**Type**: `[CSSProperties['display']]`
+### `display`: `CSSProperties['display']`
 
 The CSS display property of `FlexItem`.
 
-### isBlock
+-   Required: No
 
-**Type**: `[boolean]`
+### `isBlock`: `boolean`
 
 Determins if `FlexItem` should render as an adaptive full-width block.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/flex/flex-item/component.js b/packages/components/src/flex/flex-item/component.tsx
similarity index 51%
rename from packages/components/src/flex/flex-item/component.js
rename to packages/components/src/flex/flex-item/component.tsx
index 882bb1fc6cc90e..e4073a4b400f40 100644
--- a/packages/components/src/flex/flex-item/component.js
+++ b/packages/components/src/flex/flex-item/component.tsx
@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
- */
-function FlexItem( props, forwardedRef ) {
+function UnconnectedFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexItemProps = useFlexItem( props );
 
 	return <View { ...flexItemProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.
+ * `FlexItem` is a primitive layout component that aligns content within layout
+ * containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexItem } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexItem( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );
+export const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );
 
-export default ConnectedFlexItem;
+export default FlexItem;
diff --git a/packages/components/src/flex/flex-item/hook.js b/packages/components/src/flex/flex-item/hook.ts
similarity index 65%
rename from packages/components/src/flex/flex-item/hook.js
rename to packages/components/src/flex/flex-item/hook.ts
index 2c38e550db32cb..6a7b259560d1f3 100644
--- a/packages/components/src/flex/flex-item/hook.js
+++ b/packages/components/src/flex/flex-item/hook.ts
@@ -1,27 +1,30 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- */
-export function useFlexItem( props ) {
+export function useFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >
+) {
 	const {
 		className,
 		display: displayProp,
 		isBlock = false,
 		...otherProps
 	} = useContextSystem( props, 'FlexItem' );
-	const sx = {};
+
+	const sx: {
+		Base?: SerializedStyles;
+	} = {};
 
 	const contextDisplay = useFlexContext().flexItemDisplay;
 
diff --git a/packages/components/src/flex/flex-item/index.js b/packages/components/src/flex/flex-item/index.ts
similarity index 100%
rename from packages/components/src/flex/flex-item/index.js
rename to packages/components/src/flex/flex-item/index.ts
diff --git a/packages/components/src/flex/flex/README.md b/packages/components/src/flex/flex/README.md
index f540877d9ecd7a..b72a9b19424f77 100644
--- a/packages/components/src/flex/flex/README.md
+++ b/packages/components/src/flex/flex/README.md
@@ -25,38 +25,44 @@ function Example() {
 
 ## Props
 
-##### align
-
-**Type**: `CSSProperties['alignItems']`
+### `align`: `CSSProperties['alignItems']`
 
 Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
 
-##### direction
+-   Required: No
+-   Default: `center`
 
-**Type**: `[ResponsiveCSSValue<CSSProperties['flexDirection']>]`
+### `direction`: `ResponsiveCSSValue<CSSProperties['flexDirection']>`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### expanded
+-   Required: No
+-   Default: `row`
 
-**Type**: `[boolean]`
+### `expanded`: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### gap
+-   Required: No
+-   Default: `true`
 
-**Type**: `[number | string]`
+### `gap`: `number`
 
 Spacing in between each child can be adjusted by using `gap`. The value of `gap` works as a multiplier to the library's grid system (base of `4px`).
 
-##### justify
+-   Required: No
+-   Default: `2`
 
-**Type**: `[CSSProperties['justifyContent']]`
+##### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 
-##### wrap
+-   Required: No
+-   Default: `space-between`
 
-**Type**: `[boolean]`
+##### `wrap`: `boolean`
 
 Determines if children should wrap.
+
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/flex/flex/component.js b/packages/components/src/flex/flex/component.tsx
similarity index 65%
rename from packages/components/src/flex/flex/component.js
rename to packages/components/src/flex/flex/component.tsx
index 421bec4a0d81ac..4302e9b16c7ada 100644
--- a/packages/components/src/flex/flex/component.js
+++ b/packages/components/src/flex/flex/component.tsx
@@ -1,16 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';
+import type { FlexProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function Flex( props, forwardedRef ) {
+function UnconnectedFlex(
+	props: WordPressComponentProps< FlexProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const { children, isColumn, ...otherProps } = useFlex( props );
 
 	return (
@@ -29,9 +34,9 @@ function Flex( props, forwardedRef ) {
  * horizontally or vertically. `Flex` powers components like `HStack` and
  * `VStack`.
  *
- * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
+ * `Flex` is used with any of its two sub-components, `FlexItem` and
+ * `FlexBlock`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
  *
@@ -49,6 +54,6 @@ function Flex( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlex = contextConnect( Flex, 'Flex' );
+export const Flex = contextConnect( UnconnectedFlex, 'Flex' );
 
-export default ConnectedFlex;
+export default Flex;
diff --git a/packages/components/src/flex/flex/hook.js b/packages/components/src/flex/flex/hook.ts
similarity index 84%
rename from packages/components/src/flex/flex/hook.js
rename to packages/components/src/flex/flex/hook.ts
index 950ae160813076..0e12f41ef4f90c 100644
--- a/packages/components/src/flex/flex/hook.js
+++ b/packages/components/src/flex/flex/hook.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -12,18 +12,18 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
 import { space } from '../../ui/utils/space';
 import * as styles from '../styles';
 import { useCx, rtl } from '../../utils';
+import type { FlexProps } from '../types';
+
+function useDeprecatedProps(
+	props: WordPressComponentProps< FlexProps, 'div' >
+): WordPressComponentProps< FlexProps, 'div' > {
+	const { isReversed, ...otherProps } = props;
 
-/**
- *
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @return {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed.
- */
-function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	if ( typeof isReversed !== 'undefined' ) {
 		deprecated( 'Flex isReversed', {
 			alternative: 'Flex direction="row-reverse" or "column-reverse"',
@@ -38,10 +38,7 @@ function useDeprecatedProps( { isReversed, ...otherProps } ) {
 	return otherProps;
 }
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- */
-export function useFlex( props ) {
+export function useFlex( props: WordPressComponentProps< FlexProps, 'div' > ) {
 	const {
 		align = 'center',
 		className,
@@ -67,7 +64,11 @@ export function useFlex( props ) {
 	const rtlWatchResult = rtl.watch();
 
 	const classes = useMemo( () => {
-		const sx = {};
+		const sx: {
+			Base?: SerializedStyles;
+			Items?: SerializedStyles;
+			WrapItems?: SerializedStyles;
+		} = {};
 
 		sx.Base = css( {
 			alignItems: isColumn ? 'normal' : align,
diff --git a/packages/components/src/flex/flex/index.js b/packages/components/src/flex/flex/index.ts
similarity index 100%
rename from packages/components/src/flex/flex/index.js
rename to packages/components/src/flex/flex/index.ts
diff --git a/packages/components/src/flex/index.js b/packages/components/src/flex/index.ts
similarity index 100%
rename from packages/components/src/flex/index.js
rename to packages/components/src/flex/index.ts
diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js
deleted file mode 100644
index 19534fbe43604d..00000000000000
--- a/packages/components/src/flex/stories/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Flex, FlexItem } from '../';
-import { View } from '../../view';
-
-export default {
-	component: Flex,
-	title: 'Components/Flex',
-};
-
-export const _default = () => {
-	return (
-		<>
-			<Flex gap={ 3 }>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-			<Flex direction={ [ 'column', 'row' ] } gap={ 3 }>
-				<View style={ { width: '180px' } }>Item</View>
-				<FlexItem isBlock>
-					<View>Item</View>
-				</FlexItem>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-		</>
-	);
-};
diff --git a/packages/components/src/flex/stories/index.tsx b/packages/components/src/flex/stories/index.tsx
new file mode 100644
index 00000000000000..0b74ac783a68eb
--- /dev/null
+++ b/packages/components/src/flex/stories/index.tsx
@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex, FlexItem, FlexBlock } from '../';
+import { View } from '../../view';
+
+const meta: ComponentMeta< typeof Flex > = {
+	component: Flex,
+	title: 'Components/Flex',
+	subcomponents: { FlexBlock, FlexItem },
+	argTypes: {
+		align: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		children: { control: { type: null } },
+		gap: { control: { type: 'text' } },
+		justify: { control: { type: 'text' } },
+		// Disabled isReversed because it's deprecated.
+		isReversed: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const GrayBox = ( { children }: { children: string } ) => (
+	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
+);
+
+export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 2</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+Default.args = {};
+
+export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
+	...args
+} ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexBlock>
+				<GrayBox>Item 2</GrayBox>
+			</FlexBlock>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 4</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+ResponsiveDirection.args = {
+	direction: [ 'column', 'row' ],
+};
diff --git a/packages/components/src/flex/styles.js b/packages/components/src/flex/styles.ts
similarity index 100%
rename from packages/components/src/flex/styles.js
rename to packages/components/src/flex/styles.ts
diff --git a/packages/components/src/flex/test/__snapshots__/index.js.snap b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
similarity index 80%
rename from packages/components/src/flex/test/__snapshots__/index.js.snap
rename to packages/components/src/flex/test/__snapshots__/index.tsx.snap
index d6045ac7f5ca04..bf25fd33670ea5 100644
--- a/packages/components/src/flex/test/__snapshots__/index.js.snap
+++ b/packages/components/src/flex/test/__snapshots__/index.tsx.snap
@@ -5,21 +5,30 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,14 +7,10 @@
+@@ -1,22 +1,18 @@
+  <div
+    class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+-   data-testid="flex"
++   data-testid="base-flex"
+    data-wp-c16t="true"
+    data-wp-component="Flex"
+  >
+    <div
       class="components-flex-item css-mw3lhz-View-Item-sx-Base em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
-    />
-    <div
+    >
+      Item
+    </div>
+-   <div
 -     class="css-1mm2cvy-View em57xhy0"
 -   />
 -   <div />
--   <div
+    <div
       class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
-    />
-  </div>
+    >
 `;
 
 exports[`props should render align 1`] = `
@@ -97,6 +106,7 @@ exports[`props should render correctly 1`] = `
 
 <div
   class="components-flex emotion-0 emotion-1"
+  data-testid="base-flex"
   data-wp-c16t="true"
   data-wp-component="Flex"
 >
@@ -104,12 +114,16 @@ exports[`props should render correctly 1`] = `
     class="components-flex-item emotion-2 emotion-1"
     data-wp-c16t="true"
     data-wp-component="FlexItem"
-  />
+  >
+    Item
+  </div>
   <div
     class="components-flex-item components-flex-block emotion-4 emotion-1"
     data-wp-c16t="true"
     data-wp-component="FlexBlock"
-  />
+  >
+    Item
+  </div>
 </div>
 `;
 
@@ -142,5 +156,31 @@ Snapshot Diff:
 
 exports[`props should render spacing 1`] = `
 Snapshot Diff:
-Compared values have no visual difference.
+- Received styles
++ Base styles
+
+  Array [
+    Object {
+-     "margin-left": "calc(4px * 2)",
+-   },
+-   Object {
+-     "min-width": "0",
+-   },
+-   Object {
+      "-ms-flex": "1",
+      "-webkit-flex": "1",
+      "display": "block",
+      "flex": "1",
+      "max-height": "100%",
+      "max-width": "100%",
+      "min-height": "0",
++     "min-width": "0",
++   },
++   Object {
++     "margin-left": "calc(4px * 5)",
++   },
++   Object {
+      "min-width": "0",
+    },
+  ]
 `;
diff --git a/packages/components/src/flex/test/index.js b/packages/components/src/flex/test/index.js
deleted file mode 100644
index 42facc3c12ad9f..00000000000000
--- a/packages/components/src/flex/test/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Flex, FlexBlock, FlexItem } from '../';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render(
-			<Flex>
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render + wrap non Flex children', () => {
-		const { container } = render(
-			<Flex>
-				<FlexItem />
-				<View />
-				<div />
-				<FlexBlock />
-			</Flex>
-		);
-
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render align', () => {
-		const { container } = render(
-			<Flex align="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render justify', () => {
-		const { container } = render(
-			<Flex justify="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render spacing', () => {
-		const { container } = render(
-			<Flex gap={ 5 }>
-				<View />
-				<View />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-} );
diff --git a/packages/components/src/flex/test/index.tsx b/packages/components/src/flex/test/index.tsx
new file mode 100644
index 00000000000000..417b73f07a5d46
--- /dev/null
+++ b/packages/components/src/flex/test/index.tsx
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Flex, FlexBlock, FlexItem } from '../';
+
+describe( 'props', () => {
+	beforeEach( () => {
+		render(
+			<Flex data-testid="base-flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+	} );
+
+	test( 'should render correctly', () => {
+		expect( screen.getByTestId( 'base-flex' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render + wrap non Flex children', () => {
+		render(
+			<Flex data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<View />
+				<div />
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+
+		expect( screen.getByTestId( 'flex' ) ).toMatchDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render align', () => {
+		render(
+			<Flex align="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render justify', () => {
+		render(
+			<Flex justify="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render spacing', () => {
+		render(
+			<>
+				<Flex>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block">Item</FlexBlock>
+				</Flex>
+				<Flex gap={ 5 }>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block-with-gap">
+						Item
+					</FlexBlock>
+				</Flex>
+			</>
+		);
+		expect( screen.getByTestId( 'flex-block' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'flex-block-with-gap' )
+		);
+	} );
+} );
diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts
index 3556577a25fc86..e36a906392b8d9 100644
--- a/packages/components/src/flex/types.ts
+++ b/packages/components/src/flex/types.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -15,21 +15,24 @@ export type FlexDirection = ResponsiveCSSValue<
 
 export type FlexProps = {
 	/**
-	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
-	 *
-	 * In the example below, `flex-start` will align the children content to the top.
+	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns
+	 * content if the `direction` is `row`, or horizontally aligns content if
+	 * the `direction` is `column`.
 	 *
 	 * @default 'center'
 	 */
 	align?: CSSProperties[ 'alignItems' ];
 	/**
-	 * The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
+	 * The direction flow of the children content can be adjusted with
+	 * `direction`. `column` will align children vertically and `row` will align
+	 * children horizontally.
 	 *
 	 * @default 'row'
 	 */
 	direction?: FlexDirection;
 	/**
-	 * Expands to the maximum available width (if horizontal) or height (if vertical).
+	 * Expands to the maximum available width (if horizontal) or height (if
+	 * vertical).
 	 *
 	 * @default true
 	 */
@@ -37,14 +40,15 @@ export type FlexProps = {
 	/**
 	 * Spacing in between each child can be adjusted by using `gap`.
 	 *
-	 * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),
-	 * or a literal CSS value string.
+	 * Can either be a number (which will act as a multiplier to the library's
+	 * grid system base of 4px), or a literal CSS value string.
 	 *
 	 * @default 2
 	 */
 	gap?: SpaceInput;
 	/**
-	 * Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
+	 * Horizontally aligns content if the `direction` is `row`, or vertically
+	 * aligns content if the `direction` is `column`.
 	 *
 	 * @default 'space-between'
 	 */
@@ -58,7 +62,7 @@ export type FlexProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 	/**
 	 * @deprecated
 	 */
@@ -79,7 +83,7 @@ export type FlexItemProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children?: ReactNode;
 };
 
 export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
index 7e7dd9df46059d..10e265a2bb6de9 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
@@ -12,14 +12,12 @@ import { COLORS } from '../../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-sizing: border-box;
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
 	cursor: pointer;
 	display: inline-flex;
@@ -44,7 +42,6 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.lightGray[ 300 ] };
-	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
 	min-width: 200px;
@@ -61,7 +58,6 @@ export const ControlWrapper = styled( Flex )`
 `;
 
 export const GridView = styled.div`
-	box-sizing: border-box;
 	left: 50%;
 	opacity: 0;
 	overflow: hidden;
@@ -80,7 +76,6 @@ export const GridView = styled.div`
 `;
 
 export const GridLine = styled.div`
-	box-sizing: border-box;
 	background: white;
 	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
 	position: absolute;
diff --git a/packages/components/src/focal-point-picker/styles/focal-point-style.js b/packages/components/src/focal-point-picker/styles/focal-point-style.js
index 56d3175a75754f..80f724f64ece84 100644
--- a/packages/components/src/focal-point-picker/styles/focal-point-style.js
+++ b/packages/components/src/focal-point-picker/styles/focal-point-style.js
@@ -15,7 +15,6 @@ import { COLORS } from '../../utils';
 
 export const FocalPointWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
 	margin: -15px 0 0 -15px;
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 816d94127853c1..2eefe8107d946e 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -8,6 +13,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -25,13 +31,26 @@ import {
 	isSimpleCssValue,
 	CUSTOM_FONT_SIZE,
 } from './utils';
+import { VStack } from '../v-stack';
+
+// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
+const MaybeVStack = ( { __nextHasNoMarginBottom, children } ) =>
+	! __nextHasNoMarginBottom ? (
+		children
+	) : (
+		<VStack spacing={ 6 } children={ children } />
+	);
 
 function FontSizePicker(
 	{
+		/** Start opting into the new margin-free styles that will become the default in a future version. */
+		__nextHasNoMarginBottom = false,
 		fallbackFontSize,
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
+		/** @type {'default' | '__unstable-large'} */
+		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
@@ -52,7 +71,7 @@ function FontSizePicker(
 	 * than six and a select control when they are more.
 	 */
 	const fontSizesContainComplexValues = fontSizes.some(
-		( { size } ) => ! isSimpleCssValue( size )
+		( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )
 	);
 	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
@@ -131,12 +150,16 @@ function FontSizePicker(
 				className={ `${ baseClassName }__header` }
 			>
 				<FlexItem>
-					{ __( 'Size' ) }
-					{ headerHint && (
-						<span className={ `${ baseClassName }__header__hint` }>
-							{ headerHint }
-						</span>
-					) }
+					<BaseControl.VisualLabel>
+						{ __( 'Size' ) }
+						{ headerHint && (
+							<span
+								className={ `${ baseClassName }__header__hint` }
+							>
+								{ headerHint }
+							</span>
+						) }
+					</BaseControl.VisualLabel>
 				</FlexItem>
 				{ ! disableCustomFontSizes && (
 					<FlexItem>
@@ -158,115 +181,133 @@ function FontSizePicker(
 					</FlexItem>
 				) }
 			</Flex>
-			<div className={ `${ baseClassName }__controls` }>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<CustomSelectControl
-							className={ `${ baseClassName }__select` }
+			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
+				<div
+					className={ classNames( `${ baseClassName }__controls`, {
+						'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,
+					} ) }
+				>
+					{ !! fontSizes.length &&
+						shouldUseSelectControl &&
+						! showCustomValueControl && (
+							<CustomSelectControl
+								__nextUnconstrainedWidth
+								className={ `${ baseClassName }__select` }
+								label={ __( 'Font size' ) }
+								hideLabelFromVision
+								describedBy={ currentFontSizeSR }
+								options={ options }
+								value={ options.find(
+									( option ) =>
+										option.key === selectedOption.slug
+								) }
+								onChange={ ( { selectedItem } ) => {
+									onChange(
+										hasUnits
+											? selectedItem.size
+											: Number( selectedItem.size )
+									);
+									if (
+										selectedItem.key === CUSTOM_FONT_SIZE
+									) {
+										setShowCustomValueControl( true );
+									}
+								} }
+								size={ size }
+							/>
+						) }
+					{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						<ToggleGroupControl
+							__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
-							describedBy={ currentFontSizeSR }
-							options={ options }
-							value={ options.find(
-								( option ) => option.key === selectedOption.slug
-							) }
-							onChange={ ( { selectedItem } ) => {
+							value={ value }
+							onChange={ ( newValue ) => {
 								onChange(
-									hasUnits
-										? selectedItem.size
-										: Number( selectedItem.size )
+									hasUnits ? newValue : Number( newValue )
 								);
-								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
-									setShowCustomValueControl( true );
-								}
 							} }
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
-					<ToggleGroupControl
-						label={ __( 'Font size' ) }
-						hideLabelFromVision
-						value={ value }
-						onChange={ ( newValue ) => {
-							onChange(
-								hasUnits ? newValue : Number( newValue )
-							);
-						} }
-						isBlock
-					>
-						{ options.map( ( option ) => (
-							<ToggleGroupControlOption
-								key={ option.key }
-								value={ option.value }
-								label={ option.label }
-								aria-label={ option.name }
-								showTooltip={ true }
-							/>
-						) ) }
-					</ToggleGroupControl>
-				) }
-				{ ! withSlider &&
-					! disableCustomFontSizes &&
-					showCustomValueControl && (
-						<Flex
-							justify="space-between"
-							className={ `${ baseClassName }__custom-size-control` }
+							isBlock
+							size={ size }
 						>
-							<FlexItem isBlock>
-								<UnitControl
-									label={ __( 'Custom' ) }
-									labelPosition="top"
-									hideLabelFromVision
-									value={ value }
-									onChange={ ( nextSize ) => {
-										if (
-											0 === parseFloat( nextSize ) ||
-											! nextSize
-										) {
-											onChange( undefined );
-										} else {
-											onChange(
-												hasUnits
-													? nextSize
-													: parseInt( nextSize, 10 )
-											);
-										}
-									} }
-									units={ hasUnits ? units : [] }
+							{ options.map( ( option ) => (
+								<ToggleGroupControlOption
+									key={ option.key }
+									value={ option.value }
+									label={ option.label }
+									aria-label={ option.name }
+									showTooltip={ true }
 								/>
-							</FlexItem>
-							{ withReset && (
+							) ) }
+						</ToggleGroupControl>
+					) }
+					{ ! withSlider &&
+						! disableCustomFontSizes &&
+						showCustomValueControl && (
+							<Flex
+								justify="space-between"
+								className={ `${ baseClassName }__custom-size-control` }
+							>
 								<FlexItem isBlock>
-									<Button
-										className="components-color-palette__clear"
-										disabled={ value === undefined }
-										onClick={ () => {
-											onChange( undefined );
+									<UnitControl
+										label={ __( 'Custom' ) }
+										labelPosition="top"
+										hideLabelFromVision
+										value={ value }
+										onChange={ ( nextSize ) => {
+											if (
+												0 === parseFloat( nextSize ) ||
+												! nextSize
+											) {
+												onChange( undefined );
+											} else {
+												onChange(
+													hasUnits
+														? nextSize
+														: parseInt(
+																nextSize,
+																10
+														  )
+												);
+											}
 										} }
-										isSmall
-										variant="secondary"
-									>
-										{ __( 'Reset' ) }
-									</Button>
+										size={ size }
+										units={ hasUnits ? units : [] }
+									/>
 								</FlexItem>
-							) }
-						</Flex>
-					) }
-			</div>
-			{ withSlider && (
-				<RangeControl
-					className={ `${ baseClassName }__custom-input` }
-					label={ __( 'Custom Size' ) }
-					value={ ( isPixelValue && noUnitsValue ) || '' }
-					initialPosition={ fallbackFontSize }
-					onChange={ ( newValue ) => {
-						onChange( hasUnits ? newValue + 'px' : newValue );
-					} }
-					min={ 12 }
-					max={ 100 }
-				/>
-			) }
+								{ withReset && (
+									<FlexItem isBlock>
+										<Button
+											className="components-color-palette__clear"
+											disabled={ value === undefined }
+											onClick={ () => {
+												onChange( undefined );
+											} }
+											isSmall
+											variant="secondary"
+										>
+											{ __( 'Reset' ) }
+										</Button>
+									</FlexItem>
+								) }
+							</Flex>
+						) }
+				</div>
+				{ withSlider && (
+					<RangeControl
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						className={ `${ baseClassName }__custom-input` }
+						label={ __( 'Custom Size' ) }
+						value={ ( isPixelValue && noUnitsValue ) || '' }
+						initialPosition={ fallbackFontSize }
+						onChange={ ( newValue ) => {
+							onChange( hasUnits ? newValue + 'px' : newValue );
+						} }
+						min={ 12 }
+						max={ 100 }
+					/>
+				) }
+			</MaybeVStack>
 		</fieldset>
 	);
 }
diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
index 5036fa390c430b..b86941e3d9836b 100644
--- a/packages/components/src/font-size-picker/stories/index.js
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -12,11 +12,18 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
 		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
 		fallbackFontSize: {
 			description:
 				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
 		},
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'default', '__unstable-large' ],
+			},
+		},
 		withReset: {
 			description:
 				'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`.',
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
index bf3965ab304cd3..90d7658330d04f 100644
--- a/packages/components/src/font-size-picker/style.scss
+++ b/packages/components/src/font-size-picker/style.scss
@@ -16,7 +16,10 @@
 	max-width: $sidebar-width - ( 2 * $grid-unit-20 );
 	align-items: center;
 	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-30;
+
+	&:not(.is-next-has-no-margin-bottom) {
+		margin-bottom: $grid-unit-30;
+	}
 
 	.components-unit-control-wrapper {
 		.components-input-control__label {
diff --git a/packages/components/src/form-token-field/README.md b/packages/components/src/form-token-field/README.md
index e24f2f2ed7d8c4..2df2ad3c501759 100644
--- a/packages/components/src/form-token-field/README.md
+++ b/packages/components/src/form-token-field/README.md
@@ -56,6 +56,7 @@ The `value` property is handled in a manner similar to controlled form component
     -   `removed` - The user removed an existing token.
     -   `remove` - The user focused the button to remove the token.
     -   `__experimentalInvalid` - The user tried to add a token that didn't pass the validation.
+-   `__experimentalRenderItem` - Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
 -   `__experimentalExpandOnFocus` - If true, the suggestions list will be always expanded when the input field has the focus.
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
@@ -78,7 +79,7 @@ const continents = [
 const MyFormTokenField = () => {
 	const [ selectedContinents, setSelectedContinents ] = useState( [] );
 
-	return(
+	return (
 		<FormTokenField
 			value={ selectedContinents }
 			suggestions={ continents }
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index eb96daa8fd6f24..9195f2d5ba59aa 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -34,6 +34,7 @@ import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
 import { FlexItem } from '../flex';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const identity = ( value: string ) => value;
 
@@ -72,6 +73,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			remove: __( 'Remove item' ),
 			__experimentalInvalid: __( 'Invalid item' ),
 		},
+		__experimentalRenderItem,
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
@@ -659,12 +661,12 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<label
+			<StyledLabel
 				htmlFor={ `components-form-token-input-${ instanceId }` }
 				className="components-form-token-field__label"
 			>
 				{ label }
-			</label>
+			</StyledLabel>
 			<div
 				ref={ tokensAndInput }
 				className={ classes }
@@ -692,6 +694,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 						scrollIntoView={ selectedSuggestionScroll }
 						onHover={ onSuggestionHovered }
 						onSelect={ onSuggestionSelected }
+						__experimentalRenderItem={ __experimentalRenderItem }
 					/>
 				) }
 			</div>
diff --git a/packages/components/src/form-token-field/stories/index.tsx b/packages/components/src/form-token-field/stories/index.tsx
index 0d7fcad6564be0..54a4467a791eb5 100644
--- a/packages/components/src/form-token-field/stories/index.tsx
+++ b/packages/components/src/form-token-field/stories/index.tsx
@@ -101,3 +101,17 @@ Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	__experimentalRenderItem: ( { item } ) => (
+		<div>{ `${ item } — a nice place to visit` }</div>
+	),
+};
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 30048e11ea7706..b56cc1c3620221 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -48,11 +48,6 @@
 	}
 }
 
-.components-form-token-field__label {
-	display: inline-block;
-	margin-bottom: $grid-unit-10;
-}
-
 .components-form-token-field__help {
 	font-size: $helptext-font-size;
 	font-style: normal;
diff --git a/packages/components/src/form-token-field/suggestions-list.tsx b/packages/components/src/form-token-field/suggestions-list.tsx
index 3828feef5dfab2..cb3f8299c935f7 100644
--- a/packages/components/src/form-token-field/suggestions-list.tsx
+++ b/packages/components/src/form-token-field/suggestions-list.tsx
@@ -4,7 +4,7 @@
 import { map } from 'lodash';
 import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -31,6 +31,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	suggestions = [],
 	displayTransform,
 	instanceId,
+	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
@@ -122,6 +123,24 @@ export function SuggestionsList< T extends string | { value: string } >( {
 					}
 				);
 
+				let output: ReactNode;
+
+				if ( typeof __experimentalRenderItem === 'function' ) {
+					output = __experimentalRenderItem( { item: suggestion } );
+				} else if ( matchText ) {
+					output = (
+						<span aria-label={ displayTransform( suggestion ) }>
+							{ matchText.suggestionBeforeMatch }
+							<strong className="components-form-token-field__suggestion-match">
+								{ matchText.suggestionMatch }
+							</strong>
+							{ matchText.suggestionAfterMatch }
+						</span>
+					);
+				} else {
+					output = displayTransform( suggestion );
+				}
+
 				/* eslint-disable jsx-a11y/click-events-have-key-events */
 				return (
 					<li
@@ -139,17 +158,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
 					>
-						{ matchText ? (
-							<span aria-label={ displayTransform( suggestion ) }>
-								{ matchText.suggestionBeforeMatch }
-								<strong className="components-form-token-field__suggestion-match">
-									{ matchText.suggestionMatch }
-								</strong>
-								{ matchText.suggestionAfterMatch }
-							</span>
-						) : (
-							displayTransform( suggestion )
-						) }
+						{ output }
 					</li>
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index f7e0a11e0e4140..8a032700b411a1 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+import type {
+	ComponentPropsWithRef,
+	MouseEventHandler,
+	ReactNode,
+} from 'react';
 
 type Messages = {
 	/**
@@ -154,9 +158,18 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Custom renderer for suggestions.
+	 */
+	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
 }
 
-export interface SuggestionsListProps< T = string | { value: string } > {
+/**
+ * `T` can be either a `string` or an object which must have a `value` prop as a string.
+ */
+export interface SuggestionsListProps<
+	T = string | ( Record< string, unknown > & { value: string } )
+> {
 	selectedIndex: number;
 	scrollIntoView: boolean;
 	match: T;
@@ -165,6 +178,7 @@ export interface SuggestionsListProps< T = string | { value: string } > {
 	suggestions: T[];
 	displayTransform: ( value: T ) => string;
 	instanceId: string | number;
+	__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;
 }
 
 export interface TokenProps extends TokenItem {
diff --git a/packages/components/src/guide/test/page-control.js b/packages/components/src/guide/test/page-control.js
index cc9509e8be5c0e..caeb3dd005476a 100644
--- a/packages/components/src/guide/test/page-control.js
+++ b/packages/components/src/guide/test/page-control.js
@@ -1,12 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -15,29 +11,30 @@ import PageControl from '../page-control';
 
 describe( 'PageControl', () => {
 	it( 'renders an empty list when there are no pages', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 0 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 0 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 0 } /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a button for each page', () => {
-		const wrapper = shallow(
-			<PageControl currentPage={ 0 } numberOfPages={ 5 } />
-		);
-		expect( wrapper.find( Button ) ).toHaveLength( 5 );
+		render( <PageControl currentPage={ 0 } numberOfPages={ 5 } /> );
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 5 );
 	} );
 
-	it( 'sets the current page when a button is clicked', () => {
+	it( 'sets the current page when a button is clicked', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const setCurrentPage = jest.fn();
-		const wrapper = shallow(
+		render(
 			<PageControl
 				currentPage={ 0 }
 				numberOfPages={ 2 }
 				setCurrentPage={ setCurrentPage }
 			/>
 		);
-		wrapper.find( Button ).at( 1 ).simulate( 'click' );
+
+		await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
 		expect( setCurrentPage ).toHaveBeenCalledWith( 1 );
 	} );
 } );
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index e380338ac14ebf..71d2fb2144f25c 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -30,7 +30,10 @@ export {
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
-export { default as __experimentalBoxControl } from './box-control';
+export {
+	default as __experimentalBoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export {
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 a7fb7ecc7fa544..1fa5dfdbd82e22 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -11,7 +11,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { COLORS, rtl } from '../../utils';
+import { baseLabelTypography, COLORS, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
 import { space } from '../../ui/utils/space';
 
@@ -272,6 +272,8 @@ const labelMargin = ( {
 
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
+		${ baseLabelTypography };
+
 		box-sizing: border-box;
 		display: block;
 		padding-top: 0;
diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
index 146924d9cda74a..84fbc957f0ca3e 100644
--- a/packages/components/src/mobile/global-styles-context/utils.native.js
+++ b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, startsWith, get, camelCase, has } from 'lodash';
+import { find, get, camelCase, has } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -32,6 +32,7 @@ const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 
 const PADDING = 12; // $solid-border-space
 const UNKNOWN_VALUE = 'undefined';
+const DEFAULT_FONT_SIZE = 16;
 
 export function getBlockPaddings(
 	mergedStyle,
@@ -103,7 +104,7 @@ export function getBlockColors(
 
 	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
-		const isCustomColor = startsWith( value, '#' );
+		const isCustomColor = value?.startsWith?.( '#' );
 		let styleKey = key;
 
 		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
@@ -190,7 +191,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom', 'var' ];
+	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -203,6 +204,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
 		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
+		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -244,6 +246,21 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				return UNKNOWN_VALUE;
 			} );
 		}
+
+		if ( variable === 'fontSize' ) {
+			const { width, height } = Dimensions.get( 'window' );
+
+			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
+				const parsedFontSize =
+					getPxFromCssUnit( $2, {
+						width,
+						height,
+						fontSize: DEFAULT_FONT_SIZE,
+					} ) || `${ DEFAULT_FONT_SIZE }px`;
+
+				return `"fontSize":"${ parsedFontSize }"`;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -297,7 +314,7 @@ function normalizeFontSizes( fontSizes ) {
 						{
 							width: dimensions.width,
 							height: dimensions.height,
-							fontSize: 16,
+							fontSize: DEFAULT_FONT_SIZE,
 						}
 					);
 					return fontSizeObject;
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index abd4d86f9a1660..7260fc5f7abb03 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { Image as RNImage, Text, View } from 'react-native';
+import {
+	Image as RNImage,
+	Text,
+	View,
+	useWindowDimensions,
+} from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -11,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image as icon } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,6 +59,10 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ shouldUseFallback, setShouldUseFallback ] = useState( false );
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = useRef( windowWidth > windowHeight );
+
 	const Image = ! shouldUseFastImage ? RNImage : FastImage;
 	const imageResizeMode = ! shouldUseFastImage
 		? resizeMode
@@ -80,6 +89,21 @@ const ImageComponent = ( {
 		return () => ( isCurrent = false );
 	}, [ url ] );
 
+	// Workaround for Android where changing the orientation breaks FastImage
+	// for now if there's any orientation changes, it will use the fallback
+	// prop to use the default Image component.
+	// https://github.com/WordPress/gutenberg/issues/42869
+	useEffect( () => {
+		if ( Platform.isAndroid && shouldUseFastImage ) {
+			const isCurrentOrientationLandscape = windowWidth > windowHeight;
+
+			if ( isLandscape.current !== isCurrentOrientationLandscape ) {
+				setShouldUseFallback( true );
+				isLandscape.current = isCurrentOrientationLandscape;
+			}
+		}
+	}, [ windowHeight, windowWidth ] );
+
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -226,6 +250,7 @@ const ImageComponent = ( {
 								resizeMethod: 'scale',
 							} ) }
 							resizeMode={ imageResizeMode }
+							fallback={ shouldUseFallback }
 						/>
 					</View>
 				) }
diff --git a/packages/components/src/mobile/link-picker/link-picker-screen.native.js b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
index feb6b3e2eafb21..f77cf4e18a1b07 100644
--- a/packages/components/src/mobile/link-picker/link-picker-screen.native.js
+++ b/packages/components/src/mobile/link-picker/link-picker-screen.native.js
@@ -3,12 +3,11 @@
  */
 import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,10 +17,12 @@ import { LinkPicker } from './';
 const LinkPickerScreen = ( { returnScreenName } ) => {
 	const navigation = useNavigation();
 	const route = useRoute();
+	const navigateToLinkTimeoutRef = useRef( null );
+	const navigateBackTimeoutRef = useRef( null );
 
 	const onLinkPicked = ( { url, title } ) => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateToLinkTimeoutRef.current = setTimeout( () => {
 			navigation.navigate( returnScreenName, {
 				inputValue: url,
 				text: title,
@@ -31,11 +32,18 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 
 	const onCancel = () => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateBackTimeoutRef.current = setTimeout( () => {
 			navigation.goBack();
 		}, 100 );
 	};
 
+	useEffect( () => {
+		return () => {
+			clearTimeout( navigateToLinkTimeoutRef.current );
+			clearTimeout( navigateBackTimeoutRef.current );
+		};
+	}, [] );
+
 	const { inputValue } = route.params;
 	return useMemo( () => {
 		return (
diff --git a/packages/components/src/mobile/picker/index.ios.js b/packages/components/src/mobile/picker/index.ios.js
index bd99917ec40426..dac31ded159be0 100644
--- a/packages/components/src/mobile/picker/index.ios.js
+++ b/packages/components/src/mobile/picker/index.ios.js
@@ -10,6 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { BottomSheetContext } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
 
 class Picker extends Component {
 	presentPicker() {
@@ -23,10 +29,16 @@ class Picker extends Component {
 			isBottomSheetOpened,
 			closeBottomSheet,
 			onHandleClosingBottomSheet,
+			colorScheme,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
+		const buttonTitleColor =
+			colorScheme === 'light'
+				? styles[ 'components-picker__button-title' ].color
+				: styles[ 'components-picker__button-title--dark' ].color;
+
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
 				title,
@@ -35,6 +47,7 @@ class Picker extends Component {
 				destructiveButtonIndex,
 				disabledButtonIndices,
 				anchor: getAnchor && getAnchor(),
+				tintColor: buttonTitleColor,
 			},
 			( buttonIndex ) => {
 				if ( buttonIndex === 0 ) {
@@ -66,6 +79,8 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
 
+	const colorScheme = usePreferredColorScheme();
+
 	return (
 		<Picker
 			ref={ ref }
@@ -73,6 +88,7 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 			isBottomSheetOpened={ isBottomSheetOpened }
 			closeBottomSheet={ closeGeneralSidebar }
 			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
+			colorScheme={ colorScheme }
 		/>
 	);
 } );
diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss
index 0e3bc40cd388ed..de3e504e6257e4 100644
--- a/packages/components/src/mobile/picker/styles.native.scss
+++ b/packages/components/src/mobile/picker/styles.native.scss
@@ -19,3 +19,11 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.components-picker__button-title {
+	color: $blue-50;
+}
+
+.components-picker__button-title--dark {
+	color: $blue-30;
+}
diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index 25411ba93adb5e..c4c3aa3373f0a1 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -163,6 +163,7 @@ function Option( {
 					{ ! isGradient && (
 						<ColorPicker
 							color={ value }
+							enableAlpha
 							onChange={ ( newColor ) =>
 								onChange( {
 									...element,
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index 890a72c6add48f..500e5e6fd1a798 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -35,9 +35,12 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	height: $grid-unit-60;
 	border-bottom: $border-width solid $gray-300;
 
+	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
+	box-sizing: content-box;
+	height: $grid-unit-60 - $border-width;
+
 	h2 {
 		margin: 0;
 		font-size: inherit;
diff --git a/packages/components/src/placeholder/README.md b/packages/components/src/placeholder/README.md
index 85224ca9d23523..bc59b593b463af 100644
--- a/packages/components/src/placeholder/README.md
+++ b/packages/components/src/placeholder/README.md
@@ -9,12 +9,52 @@ import { more } from '@wordpress/icons';
 const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
 ```
 
-### Props
-
-| Name              | Type                | Default     | Description                                                       |
-| ----------------  | ------------------- | ----------- | ----------------------------------------------------------------- |
-| `icon`            | `string, WPElement` | `undefined` | If provided, renders an icon next to the label.                   |
-| `label`           | `string`            | `undefined` | Renders a label for the placeholder.                              |
-| `instructions`    | `string`            | `undefined` | Renders instruction text below label.                             |
-| `isColumnLayout`  | `bool`              | `false`     | Changes placeholder children layout from flex-row to flex-column. |
-| `withIllustration`| `bool`              | `false`     | Outputs a placeholder illustration.                             |
+## Props
+
+### `className`: `string`
+
+Class to set on the container div.
+
+-   Required: No
+
+### `icon`: `string|Function|WPComponent|null`
+
+If provided, renders an icon next to the label.
+
+-   Required: No
+
+### `instructions`: `string`
+
+Instructions of the placeholder.
+
+-   Required: No
+
+### `isColumnLayout`: `boolean`
+
+Changes placeholder children layout from flex-row to flex-column.
+
+-   Required: No
+
+### `label`: `string`
+
+Title of the placeholder.
+
+-   Required: Yes
+
+### `notices`: `ReactNode`
+
+A rendered notices list
+
+-   Required: No
+
+### `preview`: `ReactNode`
+
+Preview to be rendered in the placeholder.
+
+-   Required: No
+
+### `withIllustration`: `boolean`
+
+Outputs a placeholder illustration.
+
+-   Required: No
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.tsx
similarity index 66%
rename from packages/components/src/placeholder/index.js
rename to packages/components/src/placeholder/index.tsx
index a4555135f331a1..cc9f33fe4f6032 100644
--- a/packages/components/src/placeholder/index.js
+++ b/packages/components/src/placeholder/index.tsx
@@ -13,6 +13,8 @@ import { SVG, Path } from '@wordpress/primitives';
  * Internal dependencies
  */
 import Icon from '../icon';
+import type { PlaceholderProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
 const PlaceholderIllustration = (
 	<SVG
@@ -29,31 +31,33 @@ const PlaceholderIllustration = (
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
  *
- * @param {Object}    props                  The component props.
- * @param {WPIcon}    props.icon             An icon rendered before the label.
- * @param {WPElement} props.children         Children to be rendered.
- * @param {string}    props.label            Title of the placeholder.
- * @param {string}    props.instructions     Instructions of the placeholder.
- * @param {string}    props.className        Class to set on the container div.
- * @param {Object}    props.notices          A rendered notices list.
- * @param {Object}    props.preview          Preview to be rendered in the placeholder.
- * @param {boolean}   props.isColumnLayout   Whether a column layout should be used.
- * @param {boolean}   props.withIllustration Whether to add an illustration to the placeholder.
+ * ```jsx
+ * import { Placeholder } from '@wordpress/components';
+ * import { more } from '@wordpress/icons';
  *
- * @return {Object} The rendered placeholder.
+ * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
+ * ```
  */
-function Placeholder( {
-	icon,
-	children,
-	label,
-	instructions,
-	className,
-	notices,
-	preview,
-	isColumnLayout,
-	withIllustration,
-	...additionalProps
-} ) {
+export function Placeholder< IconProps = unknown >(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to Placeholder.
+	props: Omit<
+		WordPressComponentProps< PlaceholderProps< IconProps >, 'div', false >,
+		'ref'
+	>
+) {
+	const {
+		icon,
+		children,
+		label,
+		instructions,
+		className,
+		notices,
+		preview,
+		isColumnLayout,
+		withIllustration,
+		...additionalProps
+	} = props;
 	const [ resizeListener, { width } ] = useResizeObserver();
 
 	// Since `useResizeObserver` will report a width of `null` until after the
diff --git a/packages/components/src/placeholder/stories/index.js b/packages/components/src/placeholder/stories/index.js
deleted file mode 100644
index 408bc0985f2803..00000000000000
--- a/packages/components/src/placeholder/stories/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-import TextControl from '../../text-control';
-
-export default {
-	title: 'Components/Placeholder',
-	component: Placeholder,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const icon = text( 'Icon', 'smiley' );
-	const instructions = text(
-		'Instructions',
-		'Here are instructions you should follow'
-	);
-	const label = text( 'Label', 'My Placeholder Label' );
-	const isColumnLayout = boolean( 'isColumnLayout', false );
-
-	return (
-		<Placeholder
-			icon={ icon }
-			instructions={ instructions }
-			label={ label }
-			isColumnLayout={ isColumnLayout }
-		>
-			<div>
-				<TextControl
-					label="Sample Field"
-					placeholder="Enter something here"
-				/>
-			</div>
-		</Placeholder>
-	);
-};
diff --git a/packages/components/src/placeholder/stories/index.tsx b/packages/components/src/placeholder/stories/index.tsx
new file mode 100644
index 00000000000000..e501b98c4b0e67
--- /dev/null
+++ b/packages/components/src/placeholder/stories/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { starEmpty, starFilled, styles, wordpress } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Placeholder from '../';
+import TextControl from '../../text-control';
+
+const ICONS = { starEmpty, starFilled, styles, wordpress };
+
+const meta: ComponentMeta< typeof Placeholder > = {
+	component: Placeholder,
+	title: 'Components/Placeholder',
+	argTypes: {
+		children: { control: { type: null } },
+		notices: { control: { type: null } },
+		preview: { control: { type: null } },
+		icon: {
+			control: { type: 'select' },
+			options: Object.keys( ICONS ),
+			mapping: ICONS,
+		},
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Placeholder > = ( args ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<Placeholder { ...args }>
+			<div>
+				<TextControl
+					label="Sample Field"
+					placeholder="Enter something here"
+					value={ value }
+					onChange={ setValue }
+				/>
+			</div>
+		</Placeholder>
+	);
+};
+
+export const Default: ComponentStory< typeof Placeholder > = Template.bind(
+	{}
+);
+Default.args = {
+	icon: 'wordpress',
+	label: 'My Placeholder Label',
+	instructions: 'Here are instructions you should follow',
+};
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index d74fd7cdde9bb0..714c1570fe8f60 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -27,10 +27,6 @@
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
 
-	.components-base-control__label {
-		font-size: $default-font-size;
-	}
-
 	&.has-illustration {
 		background: none;
 		border: none;
diff --git a/packages/components/src/placeholder/types.ts b/packages/components/src/placeholder/types.ts
new file mode 100644
index 00000000000000..617cc9585edfc5
--- /dev/null
+++ b/packages/components/src/placeholder/types.ts
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { IconType } from '../icon';
+
+export type PlaceholderProps< IconProps = unknown > = {
+	/**
+	 * The children elements.
+	 */
+	children?: ReactNode;
+	/**
+	 * Class to set on the container div.
+	 */
+	className?: string;
+	/**
+	 * If provided, renders an icon next to the label.
+	 */
+	icon?: IconType< IconProps >;
+	/**
+	 * Instructions of the placeholder.
+	 */
+	instructions?: string;
+	/**
+	 * Changes placeholder children layout from flex-row to flex-column.
+	 */
+	isColumnLayout?: boolean;
+	/**
+	 * Title of the placeholder.
+	 */
+	label?: string;
+	/**
+	 * A rendered notices list
+	 */
+	notices?: ReactNode;
+	/**
+	 * Preview to be rendered in the placeholder.
+	 */
+	preview?: ReactNode;
+	/**
+	 * Outputs a placeholder illustration.
+	 */
+	withIllustration?: boolean;
+};
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index c3f56c93895fe5..0dac37685281d9 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -129,7 +129,7 @@ const Popover = (
 		noArrow = true,
 		isAlternate,
 		position,
-		placement = 'bottom-start',
+		placement: placementProp = 'bottom-start',
 		offset,
 		focusOnMount = 'firstElement',
 		anchorRef,
@@ -139,11 +139,11 @@ const Popover = (
 		onFocusOutside,
 		__unstableSlotName = SLOT_NAME,
 		__unstableObserveElement,
-		__unstableForcePosition,
+		__unstableForcePosition = false,
 		__unstableShift = false,
 		...contentProps
 	},
-	ref
+	forwardedRef
 ) => {
 	if ( range ) {
 		deprecated( 'range prop in Popover component', {
@@ -154,33 +154,35 @@ const Popover = (
 
 	const arrowRef = useRef( null );
 	const anchorRefFallback = useRef( null );
+
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const hasArrow = ! isExpanded && ! noArrow;
-	const usedPlacement = position
+	const normalizedPlacementFromProps = position
 		? positionToPlacement( position )
-		: placement;
+		: placementProp;
 
 	const ownerDocument = useMemo( () => {
+		let documentToReturn;
+
 		if ( anchorRef?.top ) {
-			return anchorRef?.top.ownerDocument;
+			documentToReturn = anchorRef?.top.ownerDocument;
 		} else if ( anchorRef?.startContainer ) {
-			return anchorRef.startContainer.ownerDocument;
+			documentToReturn = anchorRef.startContainer.ownerDocument;
 		} else if ( anchorRef?.current ) {
-			return anchorRef.current.ownerDocument;
+			documentToReturn = anchorRef.current.ownerDocument;
 		} else if ( anchorRef ) {
 			// This one should be deprecated.
-			return anchorRef.ownerDocument;
+			documentToReturn = anchorRef.ownerDocument;
 		} else if ( anchorRect && anchorRect?.ownerDocument ) {
-			return anchorRect.ownerDocument;
+			documentToReturn = anchorRect.ownerDocument;
 		} else if ( getAnchorRect ) {
-			return (
-				getAnchorRect( anchorRefFallback.current )?.ownerDocument ??
-				document
-			);
+			documentToReturn = getAnchorRect(
+				anchorRefFallback.current
+			)?.ownerDocument;
 		}
 
-		return document;
+		return documentToReturn ?? document;
 	}, [ anchorRef, anchorRect, getAnchorRect ] );
 
 	/**
@@ -198,7 +200,7 @@ const Popover = (
 		return { x: iframeRect.left, y: iframeRect.top };
 	}, [ ownerDocument ] );
 
-	const middlewares = [
+	const middleware = [
 		frameOffset || offset
 			? offsetMiddleware( ( { placement: currentPlacement } ) => {
 					if ( ! frameOffset ) {
@@ -278,28 +280,38 @@ const Popover = (
 	} );
 
 	const {
+		// Positioning coordinates
 		x,
 		y,
+		// Callback refs (not regular refs). This allows the position to be updated.
+		// when either elements change.
 		reference,
 		floating,
-		strategy,
+		// Object with "regular" refs to both "reference" and "floating"
 		refs,
+		// Type of CSS position property to use (absolute or fixed)
+		strategy,
 		update,
-		placement: placementData,
+		placement: computedPlacement,
 		middlewareData: { arrow: arrowData = {} },
-	} = useFloating( {
-		placement: usedPlacement,
-		middleware: middlewares,
-	} );
-
-	const mergedRefs = useMergeRefs( [ floating, dialogRef, ref ] );
-
-	// Updates references
+	} = useFloating( { placement: normalizedPlacementFromProps, middleware } );
+
+	// Update the `reference`'s ref.
+	//
+	// In floating-ui's terms:
+	// - "reference" refers to the popover's anchor element.
+	// - "floating" refers the floating popover's element.
+	// A floating element can also be positioned relative to a virtual element,
+	// instead of a real one. A virtual element is represented by an object
+	// with the `getBoundingClientRect()` function (like real elements).
+	// See https://floating-ui.com/docs/virtual-elements for more info.
 	useLayoutEffect( () => {
-		// No ref or position have been passed
-		let usedRef;
+		let resultingReferenceRef;
+
 		if ( anchorRef?.top ) {
-			usedRef = {
+			// Create a virtual element for the ref. The expectation is that
+			// if anchorRef.top is defined, then anchorRef.bottom is defined too.
+			resultingReferenceRef = {
 				getBoundingClientRect() {
 					const topRect = anchorRef.top.getBoundingClientRect();
 					const bottomRect = anchorRef.bottom.getBoundingClientRect();
@@ -312,17 +324,22 @@ const Popover = (
 				},
 			};
 		} else if ( anchorRef?.current ) {
-			usedRef = anchorRef.current;
+			// Standard React ref.
+			resultingReferenceRef = anchorRef.current;
 		} else if ( anchorRef ) {
-			usedRef = anchorRef;
+			// If `anchorRef` holds directly the element's value (no `current` key)
+			// This is a weird scenario and should be deprecated.
+			resultingReferenceRef = anchorRef;
 		} else if ( anchorRect ) {
-			usedRef = {
+			// Create a virtual element for the ref.
+			resultingReferenceRef = {
 				getBoundingClientRect() {
 					return anchorRect;
 				},
 			};
 		} else if ( getAnchorRect ) {
-			usedRef = {
+			// Create a virtual element for the ref.
+			resultingReferenceRef = {
 				getBoundingClientRect() {
 					const rect = getAnchorRect( anchorRefFallback.current );
 					return new window.DOMRect(
@@ -334,23 +351,29 @@ const Popover = (
 				},
 			};
 		} else if ( anchorRefFallback.current ) {
-			usedRef = anchorRefFallback.current;
+			// If no explicit ref is passed via props, fall back to
+			// anchoring to the popover's parent node.
+			resultingReferenceRef = anchorRefFallback.current.parentNode;
 		}
 
-		if ( ! usedRef ) {
+		if ( ! resultingReferenceRef ) {
 			return;
 		}
 
-		reference( usedRef );
+		reference( resultingReferenceRef );
 
 		if ( ! refs.floating.current ) {
 			return;
 		}
 
-		return autoUpdate( usedRef, refs.floating.current, update );
+		return autoUpdate(
+			resultingReferenceRef,
+			refs.floating.current,
+			update
+		);
 	}, [ anchorRef, anchorRect, getAnchorRect ] );
 
-	// This is only needed for a smoth transition when moving blocks.
+	// This is only needed for a smooth transition when moving blocks.
 	useLayoutEffect( () => {
 		if ( ! __unstableObserveElement ) {
 			return;
@@ -363,7 +386,9 @@ const Popover = (
 		};
 	}, [ __unstableObserveElement ] );
 
-	// If we're using getAnchorRect, we need to update the position as we scroll the iframe.
+	// If the reference element is in a different ownerDocument (e.g. iFrame),
+	// we need to manually update the floating's position as the reference's owner
+	// document scrolls.
 	useLayoutEffect( () => {
 		if ( ownerDocument === document ) {
 			return;
@@ -378,9 +403,15 @@ const Popover = (
 		!! animate &&
 		getAnimateClassName( {
 			type: 'appear',
-			origin: placementToAnimationOrigin( placementData ),
+			origin: placementToAnimationOrigin( computedPlacement ),
 		} );
 
+	const mergedFloatingRef = useMergeRefs( [
+		floating,
+		dialogRef,
+		forwardedRef,
+	] );
+
 	// Disable reason: We care to capture the _bubbled_ events from inputs
 	// within popover as inferring close intent.
 
@@ -398,7 +429,7 @@ const Popover = (
 				}
 			) }
 			{ ...contentProps }
-			ref={ mergedRefs }
+			ref={ mergedFloatingRef }
 			{ ...dialogProps }
 			tabIndex="-1"
 			style={
@@ -411,6 +442,7 @@ const Popover = (
 					  }
 			}
 		>
+			{ /* Prevents scroll on the document */ }
 			{ isExpanded && <ScrollLock /> }
 			{ isExpanded && (
 				<div className="components-popover__header">
@@ -430,7 +462,7 @@ const Popover = (
 					ref={ arrowRef }
 					className={ [
 						'components-popover__arrow',
-						`is-${ placementData.split( '-' )[ 0 ] }`,
+						`is-${ computedPlacement.split( '-' )[ 0 ] }`,
 					].join( ' ' ) }
 					style={ {
 						left: Number.isFinite( arrowData?.x )
diff --git a/packages/components/src/popover/stories/_utils.js b/packages/components/src/popover/stories/_utils.js
deleted file mode 100644
index c99c23190e3603..00000000000000
--- a/packages/components/src/popover/stories/_utils.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useState } from '@wordpress/element';
-
-export const DraggableWrapper = (
-	props = { role: 'presentation', style: {} }
-) => {
-	const { role, style, ...restProps } = props;
-	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ isDragging, setDragging ] = useState( false );
-
-	const updatePosition = useCallback(
-		( event ) => {
-			if ( ! isDragging ) {
-				return false;
-			}
-			const { movementX, movementY } = event;
-			setPosition( {
-				...position,
-				x: position.x + movementX,
-				y: position.y + movementY,
-			} );
-		},
-		[ isDragging, position ]
-	);
-
-	const startDragging = useCallback( () => setDragging( true ), [] );
-	const stopDragging = useCallback( () => setDragging( false ), [] );
-
-	useEffect( () => {
-		document.addEventListener( 'mousemove', updatePosition );
-		document.addEventListener( 'mouseup', stopDragging );
-		return () => {
-			document.removeEventListener( 'mousemove', updatePosition );
-			document.removeEventListener( 'mouseup', stopDragging );
-		};
-	}, [ updatePosition, stopDragging ] );
-
-	const { x, y } = position;
-
-	/**
-	 * Ideally, the x and y coordinates would be applied transform: translate.
-	 * However, using transform is causing layout rendering issues when
-	 * combined with components like Popover (due to their positioning
-	 * strategy).
-	 */
-	const componentStyle = {
-		...style,
-		position: 'relative',
-		top: y,
-		left: x,
-	};
-
-	return (
-		<div
-			{ ...restProps }
-			onMouseUp={ stopDragging }
-			onMouseDown={ startDragging }
-			role={ role }
-			style={ componentStyle }
-		/>
-	);
-};
diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js
index 0025e66fe0f4e1..32bcb6463d677e 100644
--- a/packages/components/src/popover/stories/index.js
+++ b/packages/components/src/popover/stories/index.js
@@ -1,123 +1,176 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
+import { __unstableIframe as Iframe } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { DraggableWrapper } from './_utils';
-import Popover from '../';
 import Button from '../../button';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import Popover from '../';
+
+// Format: "[yAxis] [xAxis]"
+// Valid yAxis values: 'top', 'middle', 'bottom'
+// Valid xAxis values: 'left', 'center', 'right'
+const AVAILABLE_POSITIONS = [
+	'top left',
+	'top center',
+	'top right',
+	'middle left',
+	'middle center',
+	'middle right',
+	'bottom left',
+	'bottom center',
+	'bottom right',
+];
+
+// Follows floating UI's conventions
+// See https://floating-ui.com/docs/computePosition#placement
+const AVAILABLE_PLACEMENTS = [
+	'top',
+	'top-start',
+	'top-end',
+	'right',
+	'right-start',
+	'right-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+];
 
 export default {
 	title: 'Components/Popover',
 	component: Popover,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const show = boolean( 'Example: Show', true );
-	const children = text( 'children', 'Popover Content' );
-	const animate = boolean( 'animate', false );
-	const expandOnMobile = boolean( 'expandOnMobile', false );
-	const focusOnMount = select(
-		'focusOnMount',
-		{
-			firstElement: 'firstElement',
-			container: 'container',
+	argTypes: {
+		anchorRef: { control: { type: null } },
+		anchorRect: { control: { type: null } },
+		animate: { control: { type: 'boolean' } },
+		children: { control: { type: null } },
+		className: { control: { type: 'text' } },
+		expandOnMobile: { control: { type: 'boolean' } },
+		focusOnMount: {
+			control: { type: 'select' },
+			options: [ 'firstElement', 'container', false ],
 		},
-		'firstElement'
-	);
-	const noArrow = boolean( 'noArrow', false );
-	const isAlternate = boolean( 'isAlternate', false );
-
-	const props = {
-		animate,
-		children,
-		expandOnMobile,
-		focusOnMount,
-		noArrow,
-		isAlternate,
-	};
-
-	if ( ! show ) {
-		return null;
-	}
-
-	return <Popover { ...props } />;
+		getAnchorRect: { control: { type: null } },
+		headerTitle: { control: { type: 'text' } },
+		isAlternate: { control: { type: 'boolean' } },
+		noArrow: { control: { type: 'boolean' } },
+		onClose: { control: { type: null } },
+		offset: { control: { type: 'number' } },
+		onFocusOutside: { control: { type: null } },
+		placement: {
+			control: { type: 'select' },
+			options: AVAILABLE_PLACEMENTS,
+		},
+		position: {
+			control: { type: 'select' },
+			options: AVAILABLE_POSITIONS,
+		},
+		__unstableSlotName: { control: { type: null } },
+		__unstableObserveElement: { control: { type: null } },
+		__unstableForcePosition: { control: { type: 'boolean' } },
+		__unstableShift: { control: { type: 'boolean' } },
+	},
 };
 
-const DragExample = ( props ) => {
-	const { label, content, ...restProps } = props;
+const PopoverWithAnchor = ( args ) => {
+	const anchorRef = useRef( null );
 
 	return (
-		<div>
-			<div style={ { position: 'absolute', color: '#555' } }>
-				<p>Move the gray box around.</p>
-				<p>
-					The{ ' ' }
-					<strong style={ { background: 'pink' } }>
-						pink bordered
-					</strong>{ ' ' }
-					element is a parent.
-				</p>
-				<p>
-					The{ ' ' }
-					<strong style={ { background: 'cyan' } }>
-						cyan bordered
-					</strong>{ ' ' }
-					element is a sibling to <strong>Popover</strong>.
-				</p>
-				<p>
-					<strong>Popover</strong> aligns to the content within
-					parent.
-				</p>
-			</div>
-			<div
-				style={ {
-					height: '100vh',
-					width: '100%',
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
+		<div
+			style={ {
+				height: '200px',
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+			} }
+		>
+			<p
+				style={ { padding: '8px', background: 'salmon' } }
+				ref={ anchorRef }
 			>
-				<DraggableWrapper
-					style={ {
-						background: '#ddd',
-						border: '2px solid pink',
-						borderRadius: 4,
-						padding: 10,
-						userSelect: 'none',
-					} }
-				>
-					<div style={ { border: '2px solid cyan' } }>{ label }</div>
-					<Popover { ...restProps }>{ content }</Popover>
-				</DraggableWrapper>
-			</div>
+				Popover&apos;s anchor
+			</p>
+			<Popover { ...args } anchorRef={ anchorRef } />
 		</div>
 	);
 };
 
-export const positioning = () => {
-	const label = text( 'Example: Label', 'Drag Me!' );
-	const content = text( 'Example: Content', 'Popover' );
-	const noArrow = boolean( 'noArrow', false );
+export const Default = ( args ) => {
+	const [ isVisible, setIsVisible ] = useState( false );
+	const toggleVisible = () => {
+		setIsVisible( ( state ) => ! state );
+	};
 
 	return (
-		<DragExample label={ label } content={ content } noArrow={ noArrow } />
+		<div
+			style={ {
+				minWidth: '600px',
+				minHeight: '600px',
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+			} }
+		>
+			<Button variant="secondary" onClick={ toggleVisible }>
+				Toggle Popover
+				{ isVisible && <Popover { ...args } /> }
+			</Button>
+		</div>
 	);
 };
+Default.args = {
+	children: <>Popover&apos;s&nbsp;content</>,
+};
 
-function DynamicHeightPopover() {
+/**
+ * Resize / scroll the viewport to test the behavior of the popovers when they
+ * reach the viewport boundaries.
+ */
+export const AllPlacements = ( { children, ...args } ) => (
+	<div
+		style={ {
+			minWidth: '600px',
+			marginLeft: 'auto',
+			marginRight: 'auto',
+		} }
+	>
+		<h2>
+			Resize / scroll the viewport to test the behavior of the popovers
+			when they reach the viewport boundaries.
+		</h2>
+		<div>
+			{ AVAILABLE_PLACEMENTS.map( ( p ) => (
+				<PopoverWithAnchor key={ p } placement={ p } { ...args }>
+					{ children }
+					<div>
+						<small>(placement: { p })</small>
+					</div>
+				</PopoverWithAnchor>
+			) ) }
+		</div>
+	</div>
+);
+// Excluding placement and position since they all possible values
+// are passed directly in code.
+AllPlacements.parameters = {
+	controls: {
+		exclude: [ 'placement', 'position' ],
+	},
+};
+AllPlacements.args = {
+	...Default.args,
+	noArrow: false,
+	offset: 10,
+};
+
+export const DynamicHeight = ( { children, ...args } ) => {
 	const [ height, setHeight ] = useState( 200 );
 	const increase = () => setHeight( height + 100 );
 	const decrease = () => setHeight( height - 100 );
@@ -146,7 +199,7 @@ function DynamicHeightPopover() {
 			</p>
 
 			<div>
-				<Popover>
+				<Popover { ...args }>
 					<div
 						style={ {
 							height,
@@ -154,14 +207,62 @@ function DynamicHeightPopover() {
 							padding: '20px',
 						} }
 					>
-						Content with dynamic height
+						{ children }
 					</div>
 				</Popover>
 			</div>
 		</div>
 	);
-}
+};
+DynamicHeight.args = {
+	...Default.args,
+	children: 'Content with dynamic height',
+};
+
+export const WithSlotOutsideIframe = ( args ) => {
+	const anchorRef = useRef( null );
+	const slotName = 'popover-with-slot-outside-iframe';
 
-export const dynamicHeight = () => {
-	return <DynamicHeightPopover />;
+	return (
+		<SlotFillProvider>
+			<div>
+				<Popover.Slot name={ slotName } />
+				<Iframe
+					style={ {
+						width: '100%',
+						height: '100%',
+					} }
+				>
+					<div
+						style={ {
+							height: '200vh',
+							paddingTop: '10vh',
+						} }
+					>
+						<p
+							style={ {
+								padding: '8px',
+								background: 'salmon',
+								maxWidth: '200px',
+								marginTop: '30px',
+								marginLeft: 'auto',
+								marginRight: 'auto',
+							} }
+							ref={ anchorRef }
+						>
+							Popover&apos;s anchor
+						</p>
+						<Popover
+							{ ...args }
+							__unstableSlotName={ slotName }
+							anchorRef={ anchorRef }
+						/>
+					</div>
+				</Iframe>
+			</div>
+		</SlotFillProvider>
+	);
+};
+WithSlotOutsideIframe.args = {
+	...Default.args,
 };
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 00639f67216781..d8b57e50013766 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -65,6 +65,7 @@ $arrow-triangle-base-size: 14px;
 	width: $arrow-triangle-base-size;
 	height: $arrow-triangle-base-size;
 	pointer-events: none;
+	display: flex;
 
 	// Thin line that helps to make sure that the underlying
 	// popover__content's outline is fully overlapped by the
@@ -73,9 +74,9 @@ $arrow-triangle-base-size: 14px;
 		content: "";
 		position: absolute;
 		top: -1px;
-		left: 0;
+		left: 1px;
 		height: 2px;
-		width: 100%;
+		right: 1px;
 		background-color: $white;
 	}
 
@@ -103,9 +104,8 @@ $arrow-triangle-base-size: 14px;
 }
 
 .components-popover__triangle {
-	position: absolute;
-	height: 100%;
-	width: 100%;
+	display: block;
+	flex: 1;
 }
 
 .components-popover__triangle-bg {
diff --git a/packages/components/src/popover/test/index.js b/packages/components/src/popover/test/index.js
index 98dc26f20699a1..68ede81280f4b9 100644
--- a/packages/components/src/popover/test/index.js
+++ b/packages/components/src/popover/test/index.js
@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { act, render } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,4 +49,21 @@ describe( 'Popover', () => {
 
 		expect( result.container.querySelector( 'span' ) ).toMatchSnapshot();
 	} );
+
+	it( 'should render correctly when anchorRef is provided', () => {
+		const PopoverWithAnchor = ( args ) => {
+			const anchorRef = useRef( null );
+
+			return (
+				<div>
+					<p ref={ anchorRef }>Anchor</p>
+					<Popover { ...args } anchorRef={ anchorRef } />
+				</div>
+			);
+		};
+
+		render( <PopoverWithAnchor>Popover content</PopoverWithAnchor> );
+
+		expect( screen.getByText( 'Popover content' ) ).toBeInTheDocument();
+	} );
 } );
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index 3045b5c0283ddf..de3c60d9246273 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -49,6 +49,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -212,6 +213,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -225,6 +227,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 					className={ wrapperClasses }
 					color={ colorProp }
 					marks={ !! marks }
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index aa316a4a97929c..b54cbcbc7412f3 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -28,9 +28,8 @@ const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
-	box-sizing: border-box;
 	align-items: flex-start;
-	display: inline-flex;
+	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
@@ -41,11 +40,14 @@ export const Root = styled.div`
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
 	css( { color } );
 
-const wrapperMargin = ( { marks }: WrapperProps ) =>
-	css( { marginBottom: marks ? 16 : undefined } );
+const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
+	if ( ! __nextHasNoMarginBottom ) {
+		return css( { marginBottom: marks ? 16 : undefined } );
+	}
+	return '';
+};
 
 export const Wrapper = styled.div< WrapperProps >`
-	box-sizing: border-box;
 	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
@@ -58,12 +60,14 @@ export const Wrapper = styled.div< WrapperProps >`
 `;
 
 export const BeforeIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginRight: 6 } ) }
 `;
 
 export const AfterIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginLeft: 6 } ) }
@@ -81,7 +85,6 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
 
 export const Rail = styled.span`
 	background-color: ${ COLORS.lightGray[ 600 ] };
-	box-sizing: border-box;
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -108,7 +111,6 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 export const Track = styled.span`
 	background-color: currentColor;
 	border-radius: ${ railHeight }px;
-	box-sizing: border-box;
 	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
@@ -120,7 +122,6 @@ export const Track = styled.span`
 `;
 
 export const MarksWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	pointer-events: none;
 	position: relative;
@@ -141,7 +142,6 @@ const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
 };
 
 export const Mark = styled.span`
-	box-sizing: border-box;
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
@@ -158,7 +158,6 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 };
 
 export const MarkLabel = styled.span`
-	box-sizing: border-box;
 	color: ${ COLORS.lightGray[ 600 ] };
 	left: 0;
 	font-size: 11px;
@@ -181,7 +180,6 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 
 export const ThumbWrapper = styled.span`
 	align-items: center;
-	box-sizing: border-box;
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
@@ -223,7 +221,6 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
 	border-radius: 50%;
-	box-sizing: border-box;
 	height: 100%;
 	outline: 0;
 	position: absolute;
@@ -272,7 +269,6 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
 export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: 2px;
-	box-sizing: border-box;
 	color: white;
 	display: inline-block;
 	font-size: 12px;
@@ -298,7 +294,6 @@ export const Tooltip = styled.span< TooltipProps >`
 // @todo: Refactor RangeControl with latest HStack configuration
 // @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
-	box-sizing: border-box;
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
@@ -312,7 +307,6 @@ export const InputNumber = styled( NumberControl )`
 `;
 
 export const ActionRightWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	margin-top: 0;
 
diff --git a/packages/components/src/range-control/types.ts b/packages/components/src/range-control/types.ts
index e59f240496c9d6..594ce7a77a4445 100644
--- a/packages/components/src/range-control/types.ts
+++ b/packages/components/src/range-control/types.ts
@@ -76,7 +76,7 @@ export type ControlledRangeValue = number | '' | null;
 
 export type RangeControlProps< IconProps = unknown > = Pick<
 	BaseControlProps,
-	'hideLabelFromVision' | 'help'
+	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
 	MarksProps & {
 		/**
@@ -243,7 +243,10 @@ export type InputRangeProps = {
 	value?: number | '';
 };
 
-export type WrapperProps = {
+export type WrapperProps = Pick<
+	BaseControlProps,
+	'__nextHasNoMarginBottom'
+> & {
 	color?: CSSProperties[ 'color' ];
 	marks?: RangeMarks;
 };
diff --git a/packages/components/src/select-control/chevron-down.tsx b/packages/components/src/select-control/chevron-down.tsx
new file mode 100644
index 00000000000000..cb8ce67c0c03b3
--- /dev/null
+++ b/packages/components/src/select-control/chevron-down.tsx
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	chevronIconSize,
+	DownArrowWrapper,
+	InputControlSuffixWrapperWithClickThrough,
+} from './styles/select-control-styles';
+
+const SelectControlChevronDown = () => {
+	return (
+		<InputControlSuffixWrapperWithClickThrough>
+			<DownArrowWrapper>
+				<Icon icon={ chevronDown } size={ chevronIconSize } />
+			</DownArrowWrapper>
+		</InputControlSuffixWrapperWithClickThrough>
+	);
+};
+
+export default SelectControlChevronDown;
diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
index 252230baefa9ab..2abd647388cf27 100644
--- a/packages/components/src/select-control/index.tsx
+++ b/packages/components/src/select-control/index.tsx
@@ -9,16 +9,16 @@ import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { useState, forwardRef } from '@wordpress/element';
-import { Icon, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import InputBase from '../input-control/input-base';
-import { Select, DownArrowWrapper } from './styles/select-control-styles';
+import { Select } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { SelectControlProps } from './types';
+import SelectControlChevronDown from './chevron-down';
 
 const noop = () => {};
 
@@ -48,6 +48,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		__next36pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
 		...props
 	}: WordPressComponentProps< SelectControlProps, 'select', false >,
@@ -100,18 +101,14 @@ function UnforwardedSelectControl(
 				isFocused={ isFocused }
 				label={ label }
 				size={ size }
-				suffix={
-					suffix || (
-						<DownArrowWrapper>
-							<Icon icon={ chevronDown } size={ 18 } />
-						</DownArrowWrapper>
-					)
-				}
+				suffix={ suffix || <SelectControlChevronDown /> }
 				prefix={ prefix }
 				labelPosition={ labelPosition }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
 			>
 				<Select
 					{ ...props }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
 					disabled={ disabled }
diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts
index b1ea3215f87922..ed56359972fffa 100644
--- a/packages/components/src/select-control/styles/select-control-styles.ts
+++ b/packages/components/src/select-control/styles/select-control-styles.ts
@@ -8,7 +8,9 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
+import { space } from '../../ui/utils/space';
 import type { SelectControlProps } from '../types';
+import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 
 interface SelectProps
 	extends Pick< SelectControlProps, '__next36pxDefaultSize' | 'disabled' > {
@@ -85,29 +87,33 @@ const sizeStyles = ( {
 	return css( style );
 };
 
+export const chevronIconSize = 18;
+
 const sizePaddings = ( {
 	__next36pxDefaultSize,
 	selectSize = 'default',
 }: SelectProps ) => {
+	const iconWidth = chevronIconSize;
+
 	const sizes = {
 		default: {
 			paddingLeft: 16,
-			paddingRight: 32,
+			paddingRight: 16 + iconWidth,
 		},
 		small: {
 			paddingLeft: 8,
-			paddingRight: 24,
+			paddingRight: 8 + iconWidth,
 		},
 		'__unstable-large': {
 			paddingLeft: 16,
-			paddingRight: 32,
+			paddingRight: 16 + iconWidth,
 		},
 	};
 
 	if ( ! __next36pxDefaultSize ) {
 		sizes.default = {
 			paddingLeft: 8,
-			paddingRight: 24,
+			paddingRight: 8 + iconWidth,
 		};
 	}
 
@@ -129,6 +135,8 @@ export const Select = styled.select< SelectProps >`
 		font-family: inherit;
 		margin: 0;
 		width: 100%;
+		max-width: none;
+		cursor: pointer;
 
 		${ disabledStyles };
 		${ fontSizeStyles };
@@ -138,18 +146,15 @@ export const Select = styled.select< SelectProps >`
 `;
 
 export const DownArrowWrapper = styled.div`
-	align-items: center;
-	bottom: 0;
-	box-sizing: border-box;
-	display: flex;
-	padding: 0 4px;
-	pointer-events: none;
+	margin-inline-end: ${ space( -1 ) }; // optically adjust the icon
+	line-height: 0;
+`;
+
+export const InputControlSuffixWrapperWithClickThrough = styled(
+	InputControlSuffixWrapper
+)`
 	position: absolute;
-	top: 0;
+	pointer-events: none;
 
 	${ rtl( { right: 0 } ) }
-
-	svg {
-		display: block;
-	}
 `;
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index fbcdbc59c3f451..d26b4aee22c7d2 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -39,7 +39,6 @@
 @import "./search-control/style.scss";
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
-@import "./swatch/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./tip/style.scss";
diff --git a/packages/components/src/swatch/index.js b/packages/components/src/swatch/index.js
deleted file mode 100644
index 1d86ace0ec7736..00000000000000
--- a/packages/components/src/swatch/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-
-function Swatch( { fill } ) {
-	return fill ? (
-		<span className="components-swatch" style={ { background: fill } } />
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default Swatch;
diff --git a/packages/components/src/swatch/style.scss b/packages/components/src/swatch/style.scss
deleted file mode 100644
index b18b361f39d652..00000000000000
--- a/packages/components/src/swatch/style.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.components-swatch {
-	width: 18px;
-	height: 18px;
-	border-radius: 50%;
-	color: transparent;
-	background: transparent;
-
-	// Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does.
-	&::after {
-		content: "";
-		display: block;
-		width: 100%;
-		height: 100%;
-		border: $border-width solid rgba(0, 0, 0, 0.2);
-		border-radius: 50%;
-	}
-}
-
-.components-button.has-icon.has-text .components-swatch {
-	margin-right: $grid-unit;
-}
diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js
index c914293c70e5e4..7a83bc9c336999 100644
--- a/packages/components/src/text/hook.js
+++ b/packages/components/src/text/hook.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import { isPlainObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -167,8 +166,11 @@ export default function useText( props ) {
 	 */
 	if ( ! truncate && Array.isArray( children ) ) {
 		content = Children.map( children, ( child ) => {
-			// @ts-ignore
-			if ( ! isPlainObject( child ) || ! ( 'props' in child ) ) {
+			if (
+				typeof child !== 'object' ||
+				child === null ||
+				! ( 'props' in child )
+			) {
 				return child;
 			}
 
diff --git a/packages/components/src/toggle-group-control/stories/index.js b/packages/components/src/toggle-group-control/stories/index.js
index 8299fc70f11661..13cb5829ea2577 100644
--- a/packages/components/src/toggle-group-control/stories/index.js
+++ b/packages/components/src/toggle-group-control/stories/index.js
@@ -18,14 +18,18 @@ import {
 	ToggleGroupControlOptionIcon,
 } from '../index';
 import { View } from '../../view';
+import { HStack } from '../../h-stack';
 import Button from '../../button';
 
 export default {
 	component: ToggleGroupControl,
 	title: 'Components (Experimental)/ToggleGroupControl',
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
 	argTypes: {
+		__experimentalIsIconGroup: { control: { type: 'boolean' } },
+		__nextHasNoMarginBottom: { control: 'boolean' },
 		size: {
-			control: 'select',
+			control: 'radio',
 			options: [ 'default', '__unstable-large' ],
 		},
 	},
@@ -138,6 +142,10 @@ WithAriaLabel.args = {
 	],
 };
 
+/**
+ * The `<ToggleGroupControlOptionIcon>` component can be used for icon options.
+ * In this case, the `__experimentalIsIconGroup` style is preferred.
+ */
 export const WithIcons = ( props ) => {
 	const [ state, setState ] = useState();
 	return (
@@ -151,20 +159,19 @@ export const WithIcons = ( props ) => {
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
+				label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
+				label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
 };
 WithIcons.args = {
 	...Default.args,
+	__experimentalIsIconGroup: true,
 };
 
 export const WithReset = ( props ) => {
@@ -182,7 +189,7 @@ export const WithReset = ( props ) => {
 		/>
 	) );
 	return (
-		<View>
+		<HStack alignment="center" justify="flex-start">
 			<ToggleGroupControl
 				{ ...props }
 				onChange={ setAlignState }
@@ -195,9 +202,10 @@ export const WithReset = ( props ) => {
 			<Button onClick={ () => setAlignState( undefined ) } isTertiary>
 				Reset
 			</Button>
-		</View>
+		</HStack>
 	);
 };
 WithReset.args = {
 	...Default.args,
+	__nextHasNoMarginBottom: true,
 };
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
similarity index 92%
rename from packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
rename to packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index 64c1e6833c0c1e..91fa420c5d078f 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -4,6 +4,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -15,14 +22,18 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -34,6 +45,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -42,10 +54,6 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
 .emotion-6:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #007cba);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
@@ -53,6 +61,10 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   background: #1e1e1e;
   border-radius: 2px;
@@ -140,14 +152,20 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-13 {
+  width: 30px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.emotion-14 {
   color: #fff;
 }
 
-.emotion-13:active {
+.emotion-14:active {
   background: transparent;
 }
 
-.emotion-14 {
+.emotion-15 {
   font-size: 13px;
   line-height: 1;
 }
@@ -189,7 +207,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         <button
           aria-checked="true"
           aria-label="Uppercase"
-          class="emotion-12 components-toggle-group-control-option-base emotion-13"
+          class="emotion-12 emotion-13 components-toggle-group-control-option-base emotion-14"
           data-value="uppercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -198,7 +216,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
           >
             <svg
               aria-hidden="true"
@@ -222,7 +240,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         <button
           aria-checked="false"
           aria-label="Lowercase"
-          class="emotion-12 components-toggle-group-control-option-base"
+          class="emotion-12 emotion-13 components-toggle-group-control-option-base"
           data-value="lowercase"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOptionBase"
@@ -231,7 +249,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-14 emotion-15"
+            class="emotion-15 emotion-16"
           >
             <svg
               aria-hidden="true"
@@ -257,6 +275,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -268,14 +293,18 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-4 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
   display: inline-block;
   margin-bottom: calc(4px * 2);
+  padding: 0;
 }
 
 .emotion-6 {
   background: #fff;
-  border: 1px solid;
-  border-color: #757575;
+  border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -287,6 +316,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   -webkit-transition: -webkit-transform 100ms linear;
   transition: transform 100ms linear;
   min-height: 36px;
+  border-color: #757575;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
@@ -295,10 +325,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   }
 }
 
-.emotion-6:hover {
-  border-color: #757575;
-}
-
 .emotion-6:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #007cba);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
@@ -306,6 +332,10 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   z-index: 1;
 }
 
+.emotion-6:hover {
+  border-color: #757575;
+}
+
 .emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
diff --git a/packages/components/src/toggle-group-control/test/index.js b/packages/components/src/toggle-group-control/test/index.tsx
similarity index 97%
rename from packages/components/src/toggle-group-control/test/index.js
rename to packages/components/src/toggle-group-control/test/index.tsx
index 80af2ef3c9bf09..b6f2d9a5be49dc 100644
--- a/packages/components/src/toggle-group-control/test/index.js
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -59,14 +59,12 @@ describe( 'ToggleGroupControl', () => {
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
 						icon={ formatUppercase }
-						showTooltip={ true }
-						aria-label="Uppercase"
+						label="Uppercase"
 					/>
 					<ToggleGroupControlOptionIcon
 						value="lowercase"
 						icon={ formatLowercase }
-						showTooltip={ true }
-						aria-label="Lowercase"
+						label="Lowercase"
 					/>
 				</ToggleGroupControl>
 			);
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 e1520e4ac58265..9b87dd7f98bdf2 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
@@ -60,8 +60,10 @@ function ToggleGroupControlOptionBase(
 	const {
 		className,
 		isBlock = false,
+		isIcon = false,
 		value,
 		children,
+		size = 'default',
 		showTooltip = false,
 		...radioProps
 	} = {
@@ -74,6 +76,7 @@ function ToggleGroupControlOptionBase(
 	const labelViewClasses = cx( isBlock && styles.labelBlock );
 	const classes = cx(
 		styles.buttonView,
+		isIcon && styles.isIcon( { size } ),
 		className,
 		isActive && styles.buttonActive
 	);
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 6c40f8861cfa66..da2cc709f50454 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,6 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { CONFIG, COLORS, reduceMotion } from '../../utils';
+import type { ToggleGroupControlProps } from '../types';
 
 export const LabelView = styled.div`
 	display: inline-flex;
@@ -69,3 +70,20 @@ export const ButtonContentView = styled.div`
 export const separatorActive = css`
 	background: transparent;
 `;
+
+export const isIcon = ( {
+	size,
+}: {
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
+} ) => {
+	const iconButtonSizes = {
+		default: '30px',
+		'__unstable-large': '34px',
+	};
+
+	return css`
+		width: ${ iconButtonSizes[ size ] };
+		padding-left: 0;
+		padding-right: 0;
+	`;
+};
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
index 0d5da7dcef8c78..484dfa0b24b313 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/README.md
@@ -17,18 +17,16 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl label="my label" value="lowercase" isBlock>
+		<ToggleGroupControl __experimentalIsIconGroup>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
+				label="Uppercase"
 			/>
 			<ToggleGroupControlOptionIcon
 				value="lowercase"
 				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
+				label="Lowercase"
 			/>
 		</ToggleGroupControl>
 	);
@@ -49,8 +47,8 @@ Icon displayed as the content of the option. Usually one of the icons from the `
 
 -   Required: Yes
 
-### `showTooltip`: `boolean`
+### `label`: `string`
 
-Whether to show a tooltip when hovering over the option. The tooltip will only show if a label for it is provided using the `aria-label` prop.
+The text to accessibly label the icon option. Will also be shown in a tooltip.
 
--   Required: No
+-   Required: Yes
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
index b39af225827b5a..a8fc60000e97df 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -6,16 +16,23 @@ import type { ToggleGroupControlOptionIconProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 import Icon from '../../icon';
 
-export default function ToggleGroupControlOptionIcon(
+function UnforwardedToggleGroupControlOptionIcon(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionIconProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
-	const { icon, ...restProps } = props;
+	const { icon, label, ...restProps } = props;
 	return (
-		<ToggleGroupControlOptionBase { ...restProps }>
+		<ToggleGroupControlOptionBase
+			{ ...restProps }
+			isIcon
+			aria-label={ label }
+			showTooltip
+			ref={ ref }
+		>
 			<Icon icon={ icon } />
 		</ToggleGroupControlOptionBase>
 	);
@@ -25,7 +42,6 @@ export default function ToggleGroupControlOptionIcon(
  * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a
  * child of `ToggleGroupControl` and displays an icon.
  *
- * @example
  * ```jsx
  *
  * import {
@@ -36,17 +52,24 @@ export default function ToggleGroupControlOptionIcon(
  *
  * function Example() {
  *	return (
- *		<ToggleGroupControl label="my label" value="vertical" isBlock>
+ *		<ToggleGroupControl __experimentalIsIconGroup>
  *			<ToggleGroupControlOptionIcon
  *				value="uppercase"
+ *				label="Uppercase"
  *				icon={ formatUppercase }
  *			/>
  *			<ToggleGroupControlOptionIcon
  *				value="lowercase"
+ *				label="Lowercase"
  *				icon={ formatLowercase }
  *			/>
  *		</ToggleGroupControl>
  *	);
  * }
- ** ```
+ * ```
  */
+export const ToggleGroupControlOptionIcon = forwardRef(
+	UnforwardedToggleGroupControlOptionIcon
+);
+
+export default ToggleGroupControlOptionIcon;
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
index f6c3bf9f5c4e9f..52d85d08be8f59 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
@@ -1,3 +1,13 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -5,12 +15,13 @@ import type { WordPressComponentProps } from '../../ui/context';
 import type { ToggleGroupControlOptionProps } from '../types';
 import { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';
 
-export default function ToggleGroupControlOption(
+function UnforwardedToggleGroupControlOption(
 	props: WordPressComponentProps<
 		ToggleGroupControlOptionProps,
 		'button',
 		false
-	>
+	>,
+	ref: ForwardedRef< any >
 ) {
 	const { label, ...restProps } = props;
 	const optionLabel = restProps[ 'aria-label' ] || label;
@@ -18,6 +29,7 @@ export default function ToggleGroupControlOption(
 		<ToggleGroupControlOptionBase
 			{ ...restProps }
 			aria-label={ optionLabel }
+			ref={ ref }
 		>
 			{ label }
 		</ToggleGroupControlOptionBase>
@@ -28,7 +40,6 @@ export default function ToggleGroupControlOption(
  * `ToggleGroupControlOption` is a form component and is meant to be used as a
  * child of `ToggleGroupControl`.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalToggleGroupControl as ToggleGroupControl,
@@ -45,3 +56,8 @@ export default function ToggleGroupControlOption(
  * }
  * ```
  */
+export const ToggleGroupControlOption = forwardRef(
+	UnforwardedToggleGroupControlOption
+);
+
+export default ToggleGroupControlOption;
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 8d928b0a6b5e7b..b17cadc6411c7d 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
@@ -40,9 +40,11 @@ function ToggleGroupControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		className,
 		isAdaptiveWidth = false,
 		isBlock = false,
+		__experimentalIsIconGroup = false,
 		label,
 		hideLabelFromVision = false,
 		help,
@@ -85,15 +87,19 @@ function ToggleGroupControl(
 		() =>
 			cx(
 				styles.ToggleGroupControl( { size } ),
+				! __experimentalIsIconGroup && styles.border,
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, size ]
+		[ className, cx, isBlock, __experimentalIsIconGroup, size ]
 	);
 	return (
-		<BaseControl help={ help }>
+		<BaseControl
+			help={ help }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+		>
 			<ToggleGroupControlContext.Provider
-				value={ { ...radio, isBlock: ! isAdaptiveWidth } }
+				value={ { ...radio, isBlock: ! isAdaptiveWidth, size } }
 			>
 				{ ! hideLabelFromVision && (
 					<div>
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 f977b755b7c787..5d92004603778f 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
@@ -16,8 +16,7 @@ export const ToggleGroupControl = ( {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
-	border: 1px solid;
-	border-color: ${ COLORS.ui.border };
+	border: 1px solid transparent;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
@@ -28,10 +27,6 @@ export const ToggleGroupControl = ( {
 
 	${ toggleGroupControlSize( size ) }
 
-	&:hover {
-		border-color: ${ COLORS.ui.borderHover };
-	}
-
 	&:focus-within {
 		border-color: ${ COLORS.ui.borderFocus };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
@@ -40,6 +35,14 @@ export const ToggleGroupControl = ( {
 	}
 `;
 
+export const border = css`
+	border-color: ${ COLORS.ui.border };
+
+	&:hover {
+		border-color: ${ COLORS.ui.borderHover };
+	}
+`;
+
 export const toggleGroupControlSize = (
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index b77779b0138047..f42ef84f83660b 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/packages/components/src/toggle-group-control/types.ts
@@ -8,10 +8,17 @@ 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;
+	/**
+	 * Style the option as an icon option.
+	 *
+	 * @default false
+	 */
+	isIcon?: boolean;
 	value: ReactText;
 	/**
 	 * Whether to display a Tooltip for the control option. If set to `true`, the tooltip will
@@ -22,20 +29,24 @@ export type ToggleGroupControlOptionBaseProps = {
 	showTooltip?: boolean;
 };
 
-export type ToggleGroupControlOptionIconProps = Omit<
+export type ToggleGroupControlOptionIconProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'children'
+	'value'
 > & {
 	/**
 	 * Icon displayed as the content of the option. Usually one of the icons from
 	 * the `@wordpress/icons` package, or a custom React `<svg>` icon.
 	 */
 	icon: JSX.Element;
+	/**
+	 * The text to accessibly label the icon option. Will also be shown in a tooltip.
+	 */
+	label: string;
 };
 
-export type ToggleGroupControlOptionProps = Omit<
+export type ToggleGroupControlOptionProps = Pick<
 	ToggleGroupControlOptionBaseProps,
-	'children'
+	'value' | 'showTooltip'
 > & {
 	/**
 	 * Label for the option. If needed, the `aria-label` prop can be used in addition
@@ -64,62 +75,65 @@ export type WithToolTipProps = {
 export type ToggleGroupControlProps = Omit<
 	FormElementProps< any >,
 	'defaultValue'
-> & {
-	/**
-	 * 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;
-	/**
-	 * Callback when a segment is selected.
-	 */
-	onChange?: ( value: ReactText | undefined ) => void;
-	/**
-	 * The value of `ToggleGroupControl`
-	 */
-	value?: ReactText;
-	/**
-	 * React children
-	 */
-	children: ReactNode;
-	/**
-	 * If this property is added, a help text will be generated
-	 * using help property as the content.
-	 */
-	help?: ReactNode;
-	/**
-	 * The size variant of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
+> &
+	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;
+		/**
+		 * Style for use with `ToggleGroupControlOptionIcon`s.
+		 *
+		 * @default false
+		 */
+		__experimentalIsIconGroup?: boolean; // TODO: Refactor so this can be private
+		/**
+		 * Callback when a segment is selected.
+		 */
+		onChange?: ( value: ReactText | undefined ) => void;
+		/**
+		 * The value of `ToggleGroupControl`
+		 */
+		value?: ReactText;
+		/**
+		 * React children
+		 */
+		children: ReactNode;
+		/**
+		 * The size variant of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: 'default' | '__unstable-large';
+	};
 
-export type ToggleGroupControlContextProps = RadioStateReturn & {
-	/**
-	 * Renders `ToggleGroupControl` as a (CSS) block element.
-	 *
-	 * @default false
-	 */
-	isBlock?: boolean;
-};
+export type ToggleGroupControlContextProps = RadioStateReturn &
+	Pick< ToggleGroupControlProps, 'size' > & {
+		/**
+		 * Renders `ToggleGroupControl` as a (CSS) block element.
+		 *
+		 * @default false
+		 */
+		isBlock?: boolean;
+	};
 
 export type ToggleGroupControlBackdropProps = {
 	containerRef: MutableRefObject< HTMLElement | undefined >;
diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
index 6dec56f1b59685..696cebe7393681 100644
--- a/packages/components/src/tools-panel/styles.ts
+++ b/packages/components/src/tools-panel/styles.ts
@@ -9,7 +9,6 @@ import { css } from '@emotion/react';
 import {
 	StyledField as BaseControlField,
 	StyledHelp as BaseControlHelp,
-	StyledLabel as BaseControlLabel,
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
@@ -17,6 +16,9 @@ import { COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
+	columns: ( columns: number ) => css`
+		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
+	`,
 	spacing: css`
 		column-gap: ${ space( 4 ) };
 		row-gap: ${ space( 6 ) };
@@ -28,8 +30,9 @@ const toolsPanelGrid = {
 	},
 };
 
-export const ToolsPanel = css`
-	${ toolsPanelGrid.spacing };
+export const ToolsPanel = ( columns: number ) => css`
+	${ toolsPanelGrid.columns( columns ) }
+	${ toolsPanelGrid.spacing }
 
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
 	margin-top: -1px;
@@ -46,7 +49,7 @@ export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
 	return css`
 		> div:not( :first-of-type ) {
 			display: grid;
-			grid-template-columns: ${ `repeat( ${ columns }, 1fr )` };
+			${ toolsPanelGrid.columns( columns ) }
 			${ toolsPanelGrid.spacing }
 			${ toolsPanelGrid.item.fullWidth }
 		}
@@ -133,18 +136,6 @@ export const ToolsPanelItem = css`
 			line-height: 1.4em;
 		}
 	}
-
-	/**
-	 * The targeting of .components-custom-select-control__label here is a
-	 * temporary measure only.
-	 *
-	 * It should be replaced once CustomSelectControl component has been
-	 * refactored and can be targeted via component interpolation.
-	 */
-	.components-custom-select-control__label,
-	${ BaseControlLabel } {
-		line-height: 1.4em;
-	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`
diff --git a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
index 395f3820e1eabb..c5a037a0f64194 100644
--- a/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
+++ b/packages/components/src/tools-panel/test/__snapshots__/index.js.snap
@@ -5,6 +5,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   display: grid;
   gap: calc( 4px * 3 );
   grid-template-columns: repeat( 2, 1fr );
+  grid-template-columns: repeat( 2, minmax(0, 1fr) );
   -webkit-column-gap: calc(4px * 4);
   column-gap: calc(4px * 4);
   row-gap: calc(4px * 6);
@@ -15,7 +16,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
 
 .emotion-0>div:not( :first-of-type ) {
   display: grid;
-  grid-template-columns: repeat( 2, 1fr );
+  grid-template-columns: repeat( 2, minmax(0, 1fr) );
   -webkit-column-gap: calc(4px * 4);
   column-gap: calc(4px * 4);
   row-gap: calc(4px * 6);
@@ -105,11 +106,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   line-height: 1.4em;
 }
 
-.emotion-6 .components-custom-select-control__label,
-.emotion-6 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
 .emotion-8 {
   grid-column: 1/-1;
 }
@@ -137,11 +133,6 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   line-height: 1.4em;
 }
 
-.emotion-8 .components-custom-select-control__label,
-.emotion-8 .ej5x27r2 {
-  line-height: 1.4em;
-}
-
 <div>
   <div
     class="components-grid components-tools-panel emotion-0 emotion-1"
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 81d28282a2e602..7eab36f07bfed2 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -190,7 +190,12 @@ export function useToolsPanel(
 			areAllOptionalControlsHidden &&
 			styles.ToolsPanelHiddenInnerWrapper;
 
-		return cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );
+		return cx(
+			styles.ToolsPanel( DEFAULT_COLUMNS ),
+			wrapperStyle,
+			emptyStyle,
+			className
+		);
 	}, [
 		areAllOptionalControlsHidden,
 		className,
diff --git a/packages/components/src/utils/base-label.ts b/packages/components/src/utils/base-label.ts
new file mode 100644
index 00000000000000..e9c241bf2e7351
--- /dev/null
+++ b/packages/components/src/utils/base-label.ts
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
+// This is a very low-level mixin which you shouldn't have to use directly.
+// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
+export const baseLabelTypography = css`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+`;
diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js
index a2827af3412783..c858e8731fc523 100644
--- a/packages/components/src/utils/style-mixins.js
+++ b/packages/components/src/utils/style-mixins.js
@@ -6,3 +6,4 @@ export { font } from './font';
 export { breakpoint } from './breakpoint';
 export { default as CONFIG } from './config-values';
 export { COLORS } from './colors-values';
+export { baseLabelTypography } from './base-label';
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index cc5f7e3be2634b..0d63f0483fb495 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -72,6 +72,7 @@
 		"src/navigable-container/**/*",
 		"src/navigator/**/*",
 		"src/number-control/**/*",
+		"src/placeholder/**/*",
 		"src/popover/**/*",
 		"src/radio-control/**/*",
 		"src/range-control/**/*",
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 8154271edb5a27..7afa2c5e976894 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -38,6 +38,7 @@
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/priority-queue": "file:../priority-queue",
+		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js
index b8d3c50b641c4e..849fc7476c4428 100644
--- a/packages/compose/src/index.native.js
+++ b/packages/compose/src/index.native.js
@@ -31,3 +31,4 @@ export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useDebounce } from './hooks/use-debounce';
 export { default as useThrottle } from './hooks/use-throttle';
 export { default as useMergeRefs } from './hooks/use-merge-refs';
+export { default as useRefEffect } from './hooks/use-ref-effect';
diff --git a/packages/compose/src/utils/create-higher-order-component/index.ts b/packages/compose/src/utils/create-higher-order-component/index.ts
index ca38ea51d2e0c1..90f9787f3149ee 100644
--- a/packages/compose/src/utils/create-higher-order-component/index.ts
+++ b/packages/compose/src/utils/create-higher-order-component/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { camelCase, upperFirst } from 'lodash';
+import { pascalCase } from 'change-case';
 import type { ComponentType } from 'react';
 
 type GetProps< C > = C extends ComponentType< infer P > ? P : never;
@@ -45,7 +45,7 @@ export function createHigherOrderComponent<
  */
 const hocName = ( name: string, Inner: ComponentType< any > ) => {
 	const inner = Inner.displayName || Inner.name || 'Component';
-	const outer = upperFirst( camelCase( name ) );
+	const outer = pascalCase( name ?? '' );
 
 	return `${ outer }(${ inner })`;
 };
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 5740e5d6d5740d..2a5631013e77a1 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -764,6 +764,57 @@ In the above example, when `PageTitleDisplay` is rendered into an
 application, the page and the resolution details will be retrieved from
 the store state using `getEntityRecord()`, or resolved if missing.
 
+```js
+import { useState } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+import { store as noticeStore } from '@wordpress/notices';
+import { useEntityRecord } from '@wordpress/core-data';
+
+function PageRenameForm( { id } ) {
+	const page = useEntityRecord( 'postType', 'page', id );
+	const [ title, setTitle ] = useState( () => page.record.title.rendered );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticeStore );
+
+	if ( page.isResolving ) {
+		return 'Loading...';
+	}
+
+	async function onRename( event ) {
+		event.preventDefault();
+		page.edit( { title } );
+		try {
+			await page.save();
+			createSuccessNotice( __( 'Page renamed.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			createErrorNotice( error.message, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<form onSubmit={ onRename }>
+			<TextControl
+				label={ __( 'Name' ) }
+				value={ title }
+				onChange={ setTitle }
+			/>
+			<button type="submit">{ __( 'Save' ) }</button>
+		</form>
+	);
+}
+
+// Rendered in the application:
+// <PageRenameForm id={ 1 } />
+```
+
+In the above example, updating and saving the page title is handled
+via the `edit()` and `save()` mutation helpers provided by
+`useEntityRecord()`;
+
 _Parameters_
 
 -   _kind_ `string`: Kind of the entity, e.g. `root` or a `postType`. See rootEntitiesConfig in ../entities.ts for a list of available kinds.
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index 259004d141589f..9c4705f50063a3 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -39,6 +39,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/url": "file:../url",
+		"change-case": "^4.1.2",
 		"equivalent-key-map": "^0.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
diff --git a/packages/core-data/src/batch/create-batch.js b/packages/core-data/src/batch/create-batch.js
index b99968759f3e5c..dd2c3b74188c13 100644
--- a/packages/core-data/src/batch/create-batch.js
+++ b/packages/core-data/src/batch/create-batch.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { zip } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -138,12 +133,8 @@ export default function createBatch( processor = defaultProcessor ) {
 
 			let isSuccess = true;
 
-			for ( const pair of zip( results, queue ) ) {
-				/** @type {{error?: unknown, output?: unknown}} */
-				const result = pair[ 0 ];
-
-				/** @type {{resolve: (value: any) => void; reject: (error: any) => void} | undefined} */
-				const queueItem = pair[ 1 ];
+			results.forEach( ( result, key ) => {
+				const queueItem = queue[ key ];
 
 				if ( result?.error ) {
 					queueItem?.reject( result.error );
@@ -151,7 +142,7 @@ export default function createBatch( processor = defaultProcessor ) {
 				} else {
 					queueItem?.resolve( result?.output ?? result );
 				}
-			}
+			} );
 
 			queue = [];
 
diff --git a/packages/core-data/src/entities.ts b/packages/core-data/src/entities.ts
index a73a27dc2c2e7c..3637563adceaa5 100644
--- a/packages/core-data/src/entities.ts
+++ b/packages/core-data/src/entities.ts
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { upperFirst, camelCase, map, find, get, startCase } from 'lodash';
+import { capitalCase, pascalCase } from 'change-case';
+import { map, find, get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -457,7 +458,9 @@ async function loadPostTypeEntities() {
 			getTitle: ( record ) =>
 				record?.title?.rendered ||
 				record?.title ||
-				( isTemplate ? startCase( record.slug ) : String( record.id ) ),
+				( isTemplate
+					? capitalCase( record.slug ?? '' )
+					: String( record.id ) ),
 			__unstablePrePersist: isTemplate ? undefined : prePersistPostType,
 			__unstable_rest_base: postType.rest_base,
 		};
@@ -511,12 +514,11 @@ export const getMethodName = (
 	usePlural = false
 ) => {
 	const entityConfig = find( rootEntitiesConfig, { kind, name } );
-	const kindPrefix = kind === 'root' ? '' : upperFirst( camelCase( kind ) );
-	const nameSuffix =
-		upperFirst( camelCase( name ) ) + ( usePlural ? 's' : '' );
+	const kindPrefix = kind === 'root' ? '' : pascalCase( kind );
+	const nameSuffix = pascalCase( name ) + ( usePlural ? 's' : '' );
 	const suffix =
 		usePlural && 'plural' in entityConfig! && entityConfig?.plural
-			? upperFirst( camelCase( entityConfig.plural ) )
+			? pascalCase( entityConfig.plural )
 			: nameSuffix;
 	return `${ prefix }${ kindPrefix }${ suffix }`;
 };
diff --git a/packages/core-data/src/hooks/test/use-entity-record.js b/packages/core-data/src/hooks/test/use-entity-record.js
index fa67aded0c5785..524c7d8348c088 100644
--- a/packages/core-data/src/hooks/test/use-entity-record.js
+++ b/packages/core-data/src/hooks/test/use-entity-record.js
@@ -50,7 +50,11 @@ describe( 'useEntityRecord', () => {
 		);
 
 		expect( data ).toEqual( {
-			records: undefined,
+			edit: expect.any( Function ),
+			editedRecord: {},
+			hasEdits: false,
+			record: undefined,
+			save: expect.any( Function ),
 			hasResolved: false,
 			isResolving: false,
 			status: 'IDLE',
@@ -66,7 +70,11 @@ describe( 'useEntityRecord', () => {
 		} );
 
 		expect( data ).toEqual( {
+			edit: expect.any( Function ),
+			editedRecord: {},
+			hasEdits: false,
 			record: { hello: 'world', id: 1 },
+			save: expect.any( Function ),
 			hasResolved: true,
 			isResolving: false,
 			status: 'SUCCESS',
diff --git a/packages/core-data/src/hooks/use-entity-record.ts b/packages/core-data/src/hooks/use-entity-record.ts
index e751663f168049..a1f1a6c89fa075 100644
--- a/packages/core-data/src/hooks/use-entity-record.ts
+++ b/packages/core-data/src/hooks/use-entity-record.ts
@@ -1,7 +1,9 @@
 /**
  * WordPress dependencies
  */
+import { useDispatch, useSelect } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,11 +16,25 @@ export interface EntityRecordResolution< RecordType > {
 	/** The requested entity record */
 	record: RecordType | null;
 
+	/** The edited entity record */
+	editedRecord: Partial< RecordType >;
+
+	/** Apply local (in-browser) edits to the edited entity record */
+	edit: ( diff: Partial< RecordType > ) => void;
+
+	/** Persist the edits to the server */
+	save: () => Promise< void >;
+
 	/**
 	 * Is the record still being resolved?
 	 */
 	isResolving: boolean;
 
+	/**
+	 * Does the record have any local edits?
+	 */
+	hasEdits: boolean;
+
 	/**
 	 * Is the record resolved by now?
 	 */
@@ -66,6 +82,58 @@ export interface Options {
  * application, the page and the resolution details will be retrieved from
  * the store state using `getEntityRecord()`, or resolved if missing.
  *
+ * @example
+ * ```js
+ * import { useState } from '@wordpress/data';
+ * import { useDispatch } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ * import { TextControl } from '@wordpress/components';
+ * import { store as noticeStore } from '@wordpress/notices';
+ * import { useEntityRecord } from '@wordpress/core-data';
+ *
+ * function PageRenameForm( { id } ) {
+ * 	const page = useEntityRecord( 'postType', 'page', id );
+ * 	const [ title, setTitle ] = useState( () => page.record.title.rendered );
+ * 	const { createSuccessNotice, createErrorNotice } =
+ * 		useDispatch( noticeStore );
+ *
+ * 	if ( page.isResolving ) {
+ * 		return 'Loading...';
+ * 	}
+ *
+ * 	async function onRename( event ) {
+ * 		event.preventDefault();
+ * 		page.edit( { title } );
+ * 		try {
+ * 			await page.save();
+ * 			createSuccessNotice( __( 'Page renamed.' ), {
+ * 				type: 'snackbar',
+ * 			} );
+ * 		} catch ( error ) {
+ * 			createErrorNotice( error.message, { type: 'snackbar' } );
+ * 		}
+ * 	}
+ *
+ * 	return (
+ * 		<form onSubmit={ onRename }>
+ * 			<TextControl
+ * 				label={ __( 'Name' ) }
+ * 				value={ title }
+ * 				onChange={ setTitle }
+ * 			/>
+ * 			<button type="submit">{ __( 'Save' ) }</button>
+ * 		</form>
+ * 	);
+ * }
+ *
+ * // Rendered in the application:
+ * // <PageRenameForm id={ 1 } />
+ * ```
+ *
+ * In the above example, updating and saving the page title is handled
+ * via the `edit()` and `save()` mutation helpers provided by
+ * `useEntityRecord()`;
+ *
  * @return Entity record data.
  * @template RecordType
  */
@@ -75,7 +143,31 @@ export default function useEntityRecord< RecordType >(
 	recordId: string | number,
 	options: Options = { enabled: true }
 ): EntityRecordResolution< RecordType > {
-	const { data: record, ...rest } = useQuerySelect(
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	const mutations = useMemo(
+		() => ( {
+			edit: ( record ) =>
+				editEntityRecord( kind, name, recordId, record ),
+			save: ( saveOptions: any = {} ) =>
+				saveEditedEntityRecord( kind, name, recordId, {
+					throwOnError: true,
+					...saveOptions,
+				} ),
+		} ),
+		[ recordId ]
+	);
+
+	const { editedRecord, hasEdits } = useSelect(
+		( select ) => ( {
+			editedRecord: select( coreStore ).getEditedEntityRecord(),
+			hasEdits: select( coreStore ).hasEditsForEntityRecord(),
+		} ),
+		[ kind, name, recordId ]
+	);
+
+	const { data: record, ...querySelectRest } = useQuerySelect(
 		( query ) => {
 			if ( ! options.enabled ) {
 				return null;
@@ -87,7 +179,10 @@ export default function useEntityRecord< RecordType >(
 
 	return {
 		record,
-		...rest,
+		editedRecord,
+		hasEdits,
+		...querySelectRest,
+		...mutations,
 	};
 }
 
diff --git a/packages/create-block/lib/scaffold.js b/packages/create-block/lib/scaffold.js
index 30b173c5dcb0e7..a342a807eec2fc 100644
--- a/packages/create-block/lib/scaffold.js
+++ b/packages/create-block/lib/scaffold.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-const { camelCase, snakeCase } = require( 'change-case' );
+const { pascalCase, snakeCase } = require( 'change-case' );
 
 /**
  * Internal dependencies
@@ -13,10 +13,6 @@ const initWPEnv = require( './init-wp-env' );
 const { code, info, success } = require( './log' );
 const { writeOutputAsset, writeOutputTemplate } = require( './output' );
 
-function upperFirst( str ) {
-	return str.charAt( 0 ).toUpperCase() + str.substr( 1 );
-}
-
 module.exports = async (
 	{ blockOutputTemplates, pluginOutputTemplates, outputAssets },
 	{
@@ -61,7 +57,7 @@ module.exports = async (
 		namespaceSnakeCase: snakeCase( namespace ),
 		slug,
 		slugSnakeCase: snakeCase( slug ),
-		slugPascalCase: upperFirst( camelCase( slug ) ),
+		slugPascalCase: pascalCase( slug ),
 		title,
 		description,
 		dashicon,
diff --git a/packages/create-block/lib/templates/block/save.js.mustache b/packages/create-block/lib/templates/block/save.js.mustache
index 705e06973e6de0..eeb81e432055cf 100644
--- a/packages/create-block/lib/templates/block/save.js.mustache
+++ b/packages/create-block/lib/templates/block/save.js.mustache
@@ -1,10 +1,3 @@
-/**
- * Retrieves the translation of text.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
@@ -25,10 +18,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 export default function save() {
 	return (
 		<p { ...useBlockProps.save() }>
-			{ __(
-				'{{title}} – hello from the saved content!',
-				'{{textdomain}}'
-			) }
+			{ '{{title}} – hello from the saved content!' }
 		</p>
 	);
 }
diff --git a/packages/create-block/lib/templates/es5/index.js.mustache b/packages/create-block/lib/templates/es5/index.js.mustache
index 89ea222570061d..895cd9f97aebd4 100644
--- a/packages/create-block/lib/templates/es5/index.js.mustache
+++ b/packages/create-block/lib/templates/es5/index.js.mustache
@@ -108,7 +108,7 @@
 			return el(
 				'p',
 				useBlockProps.save(),
-				__( '{{title}} – hello from the saved content!', '{{textdomain}}' )
+				'{{title}} – hello from the saved content!',
 			);
 		},
 	} );
diff --git a/packages/customize-widgets/src/components/header/index.js b/packages/customize-widgets/src/components/header/index.js
index b23c75de1d7ed6..201831b90cd78a 100644
--- a/packages/customize-widgets/src/components/header/index.js
+++ b/packages/customize-widgets/src/components/header/index.js
@@ -10,7 +10,7 @@ import { createPortal, useState, useEffect } from '@wordpress/element';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { NavigableToolbar } from '@wordpress/block-editor';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { plus, undo as undoIcon, redo as redoIcon } from '@wordpress/icons';
 
 /**
@@ -31,6 +31,10 @@ function Header( {
 		sidebar.hasRedo(),
 	] );
 
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	useEffect( () => {
 		return sidebar.subscribeHistory( () => {
 			setUndoRedo( [ sidebar.hasUndo(), sidebar.hasRedo() ] );
@@ -64,7 +68,7 @@ function Header( {
 						icon={ ! isRTL() ? redoIcon : undoIcon }
 						/* translators: button label text should, if possible, be under 16 characters. */
 						label={ __( 'Redo' ) }
-						shortcut={ displayShortcut.primaryShift( 'z' ) }
+						shortcut={ shortcut }
 						// If there are no undo levels we don't want to actually disable this
 						// button, because it will remove focus for keyboard users.
 						// See: https://github.com/WordPress/gutenberg/issues/3486
diff --git a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
index 4990af592e9c23..7e098a87be2cd9 100644
--- a/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
+++ b/packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
@@ -32,4 +32,8 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'd' },
 		description: __( 'Strikethrough the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];
diff --git a/packages/data/package.json b/packages/data/package.json
index 7f50bbd8383b00..5aeadf1ed6bf66 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -35,6 +35,7 @@
 		"@wordpress/priority-queue": "file:../priority-queue",
 		"@wordpress/redux-routine": "file:../redux-routine",
 		"equivalent-key-map": "^0.2.2",
+		"is-plain-obj": "^4.1.0",
 		"is-promise": "^4.0.0",
 		"lodash": "^4.17.21",
 		"redux": "^4.1.2",
diff --git a/packages/data/src/plugins/persistence/index.js b/packages/data/src/plugins/persistence/index.js
index 3029b459b3ad91..a9eb1d21bd1e9e 100644
--- a/packages/data/src/plugins/persistence/index.js
+++ b/packages/data/src/plugins/persistence/index.js
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { merge, isPlainObject } from 'lodash';
+import isPlainObject from 'is-plain-obj';
+import { merge } from 'lodash';
 
 /**
  * Internal dependencies
diff --git a/packages/docgen/lib/get-export-entries.js b/packages/docgen/lib/get-export-entries.js
index fb697264d3162a..dc4046b72fcc77 100644
--- a/packages/docgen/lib/get-export-entries.js
+++ b/packages/docgen/lib/get-export-entries.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-const { get } = require( 'lodash' );
-
 /**
  * Returns the export entry records of the given export statement.
  * Unlike [the standard](http://www.ecma-international.org/ecma-262/9.0/#exportentry-record),
@@ -31,7 +26,7 @@ module.exports = ( token ) => {
 					name = t.declaration.left.name;
 					break;
 				default:
-					name = get( t.declaration, [ 'id', 'name' ], '*default*' );
+					name = t.declaration.id?.name ?? '*default*';
 			}
 			return name;
 		};
@@ -64,7 +59,7 @@ module.exports = ( token ) => {
 			name.push( {
 				localName: specifier.local.name,
 				exportName: specifier.exported.name,
-				module: get( token.source, [ 'value' ], null ),
+				module: token.source?.value ?? null,
 				lineStart: specifier.loc.start.line,
 				lineEnd: specifier.loc.end.line,
 			} )
diff --git a/packages/docgen/lib/get-intermediate-representation.js b/packages/docgen/lib/get-intermediate-representation.js
index 253283d74a27fe..2f8e155c575650 100644
--- a/packages/docgen/lib/get-intermediate-representation.js
+++ b/packages/docgen/lib/get-intermediate-representation.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-const { get } = require( 'lodash' );
-
 /**
  * Internal dependencies
  */
@@ -154,8 +149,8 @@ module.exports = (
 			ir.push( {
 				path,
 				name: entry.exportName,
-				description: get( doc, [ 'description' ], UNDOCUMENTED ),
-				tags: get( doc, [ 'tags' ], [] ),
+				description: doc?.description ?? UNDOCUMENTED,
+				tags: doc?.tags ?? [],
 				lineStart: entry.lineStart,
 				lineEnd: entry.lineEnd,
 			} );
diff --git a/packages/docgen/lib/get-leading-comments.js b/packages/docgen/lib/get-leading-comments.js
index 09911a995c064c..ddc0261f368e68 100644
--- a/packages/docgen/lib/get-leading-comments.js
+++ b/packages/docgen/lib/get-leading-comments.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-const { last } = require( 'lodash' );
-
 /**
  * Function that returns the leading comment
  * of a Espree node.
@@ -14,7 +9,10 @@ const { last } = require( 'lodash' );
 module.exports = ( declaration ) => {
 	let comments;
 	if ( declaration.leadingComments ) {
-		const lastComment = last( declaration.leadingComments );
+		const lastComment =
+			declaration.leadingComments[
+				declaration.leadingComments.length - 1
+			];
 		if ( lastComment ) {
 			comments = lastComment.value;
 		}
diff --git a/packages/docgen/lib/index.js b/packages/docgen/lib/index.js
index f21864d2f7411e..42416d9b452388 100644
--- a/packages/docgen/lib/index.js
+++ b/packages/docgen/lib/index.js
@@ -3,7 +3,6 @@
  */
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { last } = require( 'lodash' );
 
 /**
  * Internal dependencies
@@ -60,7 +59,10 @@ const processFile = ( rootDir, inputFile ) => {
 		const result = engine(
 			relativePath,
 			data,
-			getIRFromRelativePath( rootDir, last( currentFileStack ) )
+			getIRFromRelativePath(
+				rootDir,
+				currentFileStack[ currentFileStack.length - 1 ]
+			)
 		);
 		currentFileStack.pop();
 		return result;
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 2d3caaa27eab8b..73844baa723c14 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -29,7 +29,6 @@
 	"dependencies": {
 		"@babel/core": "^7.16.0",
 		"comment-parser": "^1.1.1",
-		"lodash": "^4.17.21",
 		"mdast-util-inject": "1.1.0",
 		"optionator": "0.8.2",
 		"remark": "10.0.1",
diff --git a/packages/dom/package.json b/packages/dom/package.json
index db0a52e5a3eeff..4a586551942c19 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -29,8 +29,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/deprecated": "^3.8.0",
-		"lodash": "^4.17.21"
+		"@wordpress/deprecated": "^3.8.0"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/dom/src/dom/clean-node-list.js b/packages/dom/src/dom/clean-node-list.js
index 38fc62751b8e1f..bbdff13b470d69 100644
--- a/packages/dom/src/dom/clean-node-list.js
+++ b/packages/dom/src/dom/clean-node-list.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -70,7 +65,7 @@ export default function cleanNodeList( nodeList, doc, schema, inline ) {
 						Array.from( node.attributes ).forEach( ( { name } ) => {
 							if (
 								name !== 'class' &&
-								! includes( attributes, name )
+								! attributes.includes( name )
 							) {
 								node.removeAttribute( name );
 							}
diff --git a/packages/dom/src/phrasing-content.js b/packages/dom/src/phrasing-content.js
index 494b7026f2b3cb..571d081c2843a1 100644
--- a/packages/dom/src/phrasing-content.js
+++ b/packages/dom/src/phrasing-content.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit, without } from 'lodash';
-
 /**
  * All phrasing content elements.
  *
@@ -64,9 +59,13 @@ const textContentSchema = {
 // Recursion is needed.
 // Possible: strong > em > strong.
 // Impossible: strong > strong.
-without( Object.keys( textContentSchema ), '#text', 'br' ).forEach( ( tag ) => {
-	textContentSchema[ tag ].children = omit( textContentSchema, tag );
-} );
+const excludedElements = [ '#text', 'br' ];
+Object.keys( textContentSchema )
+	.filter( ( element ) => ! excludedElements.includes( element ) )
+	.forEach( ( tag ) => {
+		const { [ tag ]: removedTag, ...restSchema } = textContentSchema;
+		textContentSchema[ tag ].children = restSchema;
+	} );
 
 /**
  * Embedded content elements.
@@ -151,24 +150,27 @@ export function getPhrasingContentSchema( context ) {
 		return phrasingContentSchema;
 	}
 
-	return omit(
-		{
-			...phrasingContentSchema,
-			// We shouldn't paste potentially sensitive information which is not
-			// visible to the user when pasted, so strip the attributes.
-			ins: { children: phrasingContentSchema.ins.children },
-			del: { children: phrasingContentSchema.del.children },
-		},
-		[
-			'u', // Used to mark misspelling. Shouldn't be pasted.
-			'abbr', // Invisible.
-			'data', // Invisible.
-			'time', // Invisible.
-			'wbr', // Invisible.
-			'bdi', // Invisible.
-			'bdo', // Invisible.
-		]
-	);
+	/**
+	 * @type {Partial<ContentSchema>}
+	 */
+	const {
+		u, // Used to mark misspelling. Shouldn't be pasted.
+		abbr, // Invisible.
+		data, // Invisible.
+		time, // Invisible.
+		wbr, // Invisible.
+		bdi, // Invisible.
+		bdo, // Invisible.
+		...remainingContentSchema
+	} = {
+		...phrasingContentSchema,
+		// We shouldn't paste potentially sensitive information which is not
+		// visible to the user when pasted, so strip the attributes.
+		ins: { children: phrasingContentSchema.ins.children },
+		del: { children: phrasingContentSchema.del.children },
+	};
+
+	return remainingContentSchema;
 }
 
 /**
diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js
index 00a6103a70215b..66ae1ee7d4fd46 100644
--- a/packages/dom/src/tabbable.js
+++ b/packages/dom/src/tabbable.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without, first, last } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -74,7 +69,7 @@ function createStatefulCollapseRadioGroup() {
 		// the element which had previously been considered the chosen one.
 		if ( hasChosen ) {
 			const hadChosenElement = CHOSEN_RADIO_BY_NAME[ name ];
-			result = without( result, hadChosenElement );
+			result = result.filter( ( e ) => e !== hadChosenElement );
 		}
 
 		CHOSEN_RADIO_BY_NAME[ name ] = element;
@@ -174,7 +169,8 @@ export function findPrevious( element ) {
 	// Remove all focusables after and including `element`.
 	focusables.length = index;
 
-	return last( filterTabbable( focusables ) );
+	const tabbable = filterTabbable( focusables );
+	return tabbable[ tabbable.length - 1 ];
 }
 
 /**
@@ -182,6 +178,8 @@ export function findPrevious( element ) {
  *
  * @param {Element} element The focusable element after which to look. Defaults
  *                          to the active element.
+ *
+ * @return {Element|undefined} Next tabbable element.
  */
 export function findNext( element ) {
 	const focusables = findFocusable( element.ownerDocument.body );
@@ -190,5 +188,5 @@ export function findNext( element ) {
 	// Remove all focusables before and including `element`.
 	const remaining = focusables.slice( index + 1 );
 
-	return first( filterTabbable( remaining ) );
+	return filterTabbable( remaining )[ 0 ];
 }
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 0a1631298245fd..3a72253c4f52ca 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -34,6 +34,7 @@
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/url": "file:../url",
+		"change-case": "^4.1.2",
 		"form-data": "^4.0.0",
 		"lodash": "^4.17.21"
 	},
diff --git a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts b/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts
index 835243f7ef8081..1d68ca21392267 100644
--- a/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts
+++ b/packages/e2e-test-utils-playwright/src/page-utils/press-key-with-modifier.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { capitalize } from 'lodash';
+import { capitalCase } from 'change-case';
 import type { Page } from '@playwright/test';
 
 /**
@@ -123,7 +123,7 @@ export async function pressKeyWithModifier(
 			_isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
 	};
 	const mappedModifiers = overWrittenModifiers[ modifier ]( isAppleOS ).map(
-		( keycode ) => ( keycode === CTRL ? 'Control' : capitalize( keycode ) )
+		( keycode ) => ( keycode === CTRL ? 'Control' : capitalCase( keycode ) )
 	);
 
 	await this.page.keyboard.press(
diff --git a/packages/e2e-test-utils/src/create-reusable-block.js b/packages/e2e-test-utils/src/create-reusable-block.js
index 74276d2be64317..3bf2e33aeb34f3 100644
--- a/packages/e2e-test-utils/src/create-reusable-block.js
+++ b/packages/e2e-test-utils/src/create-reusable-block.js
@@ -19,7 +19,7 @@ export const createReusableBlock = async ( content, title ) => {
 	await page.keyboard.type( content );
 
 	await clickBlockToolbarButton( 'Options' );
-	await clickMenuItem( 'Add to Reusable blocks' );
+	await clickMenuItem( 'Create Reusable block' );
 	const nameInput = await page.waitForSelector(
 		reusableBlockNameInputSelector
 	);
diff --git a/packages/e2e-test-utils/src/press-key-with-modifier.js b/packages/e2e-test-utils/src/press-key-with-modifier.js
index 24eb4c3c86e487..265c186752f8dd 100644
--- a/packages/e2e-test-utils/src/press-key-with-modifier.js
+++ b/packages/e2e-test-utils/src/press-key-with-modifier.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { capitalize } from 'lodash';
+import { capitalCase } from 'change-case';
 
 /**
  * WordPress dependencies
@@ -168,7 +168,7 @@ export async function pressKeyWithModifier( modifier, key ) {
 
 	await Promise.all(
 		mappedModifiers.map( async ( mod ) => {
-			const capitalizedMod = capitalize( ctrlSwap( mod ) );
+			const capitalizedMod = capitalCase( ctrlSwap( mod ) );
 			return page.keyboard.down( capitalizedMod );
 		} )
 	);
@@ -177,7 +177,7 @@ export async function pressKeyWithModifier( modifier, key ) {
 
 	await Promise.all(
 		mappedModifiers.map( async ( mod ) => {
-			const capitalizedMod = capitalize( ctrlSwap( mod ) );
+			const capitalizedMod = capitalCase( ctrlSwap( mod ) );
 			return page.keyboard.up( capitalizedMod );
 		} )
 	);
diff --git a/packages/e2e-tests/README.md b/packages/e2e-tests/README.md
index de87194690db89..b0e0960e2516cd 100644
--- a/packages/e2e-tests/README.md
+++ b/packages/e2e-tests/README.md
@@ -18,30 +18,30 @@ The following commands are available on the Gutenberg repo:
 
 ```json
 {
-	"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
-	"test-e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
-	"test-e2e:watch": "npm run test-e2e -- --watch"
+	"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
+	"test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
+	"test:e2e:watch": "npm run test:e2e -- --watch"
 }
 ```
 
 ### Run all available tests
 
 ```bash
-npm run test-e2e
+npm run test:e2e
 ```
 
 ### Run all available tests and listen for changes.
 
 ```bash
-npm run test-e2e:watch
+npm run test:e2e:watch
 ```
 
 ### Run a specific test file
 
 ```bash
-npm run test-e2e -- packages/e2e-test/<path_to_test_file>
+npm run test:e2e -- packages/e2e-test/<path_to_test_file>
 # Or, in order to watch for changes:
-npm run test-e2e:watch -- packages/e2e-test/<path_to_test_file>
+npm run test:e2e:watch -- packages/e2e-test/<path_to_test_file>
 ```
 
 ### Debugging
@@ -49,7 +49,7 @@ npm run test-e2e:watch -- packages/e2e-test/<path_to_test_file>
 Makes e2e tests available to debug in a Chrome Browser.
 
 ```bash
-npm run test-e2e:debug
+npm run test:e2e:debug
 ```
 
 After running the command, tests will be available for debugging in Chrome by going to chrome://inspect/#devices and clicking `inspect` under the path to `/test-e2e.js`.
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap
deleted file mode 100644
index df7b3f6419f155..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/group.test.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Group can be created using the block inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can be created using the slash inserter 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Group can have other blocks appended to it using the button appender 1`] = `
-"<!-- wp:group -->
-<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-<p>Group Block with a Paragraph</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/group.test.js b/packages/e2e-tests/specs/editor/blocks/group.test.js
deleted file mode 100644
index 142cfe79523df0..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/group.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	searchForBlock,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	transformBlockTo,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Group', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created using the block inserter', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created using the slash inserter', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '/group' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can have other blocks appended to it using the button appender', async () => {
-		await searchForBlock( 'Group' );
-		await page.click( '.editor-block-list-item-group' );
-		await page.click( '.block-editor-button-block-appender' );
-		await page.click( '.editor-block-list-item-paragraph' );
-		await page.keyboard.type( 'Group Block with a Paragraph' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can wrap in group and unwrap group', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '2' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
-		await transformBlockTo( 'Group' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:group -->
-			<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
-			<p>1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>2</p>
-			<!-- /wp:paragraph --></div>
-			<!-- /wp:group -->"
-		` );
-
-		await transformBlockTo( 'Unwrap' );
-
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>1</p>
-			<!-- /wp:paragraph -->
-
-			<!-- wp:paragraph -->
-			<p>2</p>
-			<!-- /wp:paragraph -->"
-		` );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/blocks/missing.test.js b/packages/e2e-tests/specs/editor/blocks/missing.test.js
deleted file mode 100644
index 4c74cdab9c336f..00000000000000
--- a/packages/e2e-tests/specs/editor/blocks/missing.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, setPostContent } from '@wordpress/e2e-test-utils';
-
-describe( 'missing block', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should strip potentially malicious on* attributes', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		await setPostContent(
-			`<!-- wp:non-existing-block-here --><img src onerror=alert(1)>`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( hasAlert ).toBe( false );
-	} );
-
-	it( 'hould strip potentially malicious script tags', async () => {
-		let hasAlert = false;
-
-		page.on( 'dialog', () => {
-			hasAlert = true;
-		} );
-
-		await setPostContent(
-			`<!-- wp:non-existing-block-here --><script>alert("EVIL");</script>`
-		);
-
-		// Give the browser time to show the alert.
-		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( hasAlert ).toBe( false );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/deprecated-node-matcher.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/deprecated-node-matcher.test.js.snap
deleted file mode 100644
index d36c990c04c37d..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/deprecated-node-matcher.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Deprecated Node Matcher should insert block with children source 1`] = `
-"<!-- wp:deprecated-children-matcher -->
-<p class=\\"wp-block-deprecated-children-matcher\\">test<br/><strong>a</strong></p>
-<!-- /wp:deprecated-children-matcher -->"
-`;
-
-exports[`Deprecated Node Matcher should insert block with node source 1`] = `
-"<!-- wp:deprecated-node-matcher -->
-<blockquote class=\\"wp-block-deprecated-node-matcher\\"><p>test</p><p></p></blockquote>
-<!-- /wp:deprecated-node-matcher -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/plugins/deprecated-node-matcher.test.js b/packages/e2e-tests/specs/editor/plugins/deprecated-node-matcher.test.js
deleted file mode 100644
index 21b587a00c28b4..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/deprecated-node-matcher.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	getEditedPostContent,
-	insertBlock,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Deprecated Node Matcher', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-deprecated-node-matcher' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-deprecated-node-matcher' );
-	} );
-
-	it( 'should insert block with node source', async () => {
-		await insertBlock( 'Deprecated Node Matcher' );
-		await page.keyboard.type( 'test' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should insert block with children source', async () => {
-		await insertBlock( 'Deprecated Children Matcher' );
-		await page.keyboard.type( 'test' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'a' );
-		await page.keyboard.down( 'Shift' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.up( 'Shift' );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js b/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js
deleted file mode 100644
index 4d0ef632780f8e..00000000000000
--- a/packages/e2e-tests/specs/editor/plugins/wp-editor-meta-box.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	publishPost,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'WP Editor Meta Boxes', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-wp-editor-meta-box' );
-	} );
-
-	it( 'Should save the changes', async () => {
-		// Add title to enable valid non-empty post save.
-		await page.type( '.editor-post-title__input', 'Hello Meta' );
-
-		// Type something.
-		await expect( page ).toClick( '#test_tinymce_id-html' );
-		await page.type( '#test_tinymce_id', 'Typing in a metabox' );
-		await page.click( '#test_tinymce_id-tmce' );
-
-		await publishPost();
-
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-
-		await expect( page ).toClick( '#test_tinymce_id-html' );
-		await page.waitForSelector( '#test_tinymce_id' );
-		const content = await page.$eval(
-			'#test_tinymce_id',
-			( textarea ) => textarea.value
-		);
-
-		/*
-		 * `content` may or may not contain the <p> tags depending on hasWpautop value in this line:
-		 * https://github.com/WordPress/wordpress-develop/blob/2382765afa36e10bf3c74420024ad4e85763a47c/src/js/_enqueues/vendor/tinymce/plugins/wordpress/plugin.js#L15
-		 *
-		 * Now, for the purposes of this e2e test we explicitly set wpautop to true in the test plugin:
-		 * https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/e2e-tests/plugins/wp-editor-metabox.php#L36
-		 *
-		 * If this test randomly fails because of the actual value being wrapped in <p> like <p>Typing in a metabox</p>, it means that
-		 * hasWpautop has been errorneously set to false in the line above. You may want to check:
-		 * * Is window.wp.editor.autop a function? It should be one since https://github.com/WordPress/gutenberg/pull/33228
-		 * * Is wpautop still true in the second link mentioned in this comment?
-		 *
-		 * For more context, see https://github.com/WordPress/gutenberg/pull/33228/files#r666897885
-		 */
-		expect( content ).toBe( 'Typing in a metabox' );
-	} );
-} );
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap
index ae7c7c14b20b04..cef8263aca7c6a 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/draggable-block.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Draggable block should drag and drop 1`] = `
+exports[`Draggable block can drag and drop to the bottom of a block list 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>
 <!-- /wp:paragraph -->
@@ -10,7 +10,27 @@ exports[`Draggable block should drag and drop 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Draggable block should drag and drop 2`] = `
+exports[`Draggable block can drag and drop to the bottom of a block list 2`] = `
+"<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Draggable block can drag and drop to the top of a block list 1`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Draggable block can drag and drop to the top of a block list 2`] = `
 "<!-- wp:paragraph -->
 <p>2</p>
 <!-- /wp:paragraph -->
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
index 6923de7cc83f3f..de86d82627bf04 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap
@@ -267,13 +267,17 @@ exports[`Multi-block selection should select all from empty selection 1`] = `
 exports[`Multi-block selection should select all from empty selection 2`] = `""`;
 
 exports[`Multi-block selection should select separator (single element block) 1`] = `
-"<!-- wp:separator -->
-<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
-<!-- /wp:separator -->
+"<!-- wp:paragraph -->
+<p>a</p>
+<!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>a</p>
-<!-- /wp:paragraph -->"
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:separator -->
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<!-- /wp:separator -->"
 `;
 
 exports[`Multi-block selection should select separator (single element block) 2`] = `
diff --git a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
index 98f5e067900905..0847f4d45c1dbc 100644
--- a/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-editor-keyboard-shortcuts.test.js
@@ -87,7 +87,7 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Add to Reusable blocks' );
+			await clickMenuItem( 'Create Reusable block' );
 			const reusableBlockNameInputSelector =
 				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(
diff --git a/packages/e2e-tests/specs/editor/various/draggable-block.test.js b/packages/e2e-tests/specs/editor/various/draggable-block.test.js
index 772f2dedfac397..03ce983b75f231 100644
--- a/packages/e2e-tests/specs/editor/various/draggable-block.test.js
+++ b/packages/e2e-tests/specs/editor/various/draggable-block.test.js
@@ -7,51 +7,120 @@ import {
 	deactivatePlugin,
 	activatePlugin,
 	showBlockToolbar,
+	setBrowserViewport,
+	waitForWindowDimensions,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Draggable block', () => {
-	beforeAll( async () => {
-		await page.setDragInterception( true );
+	// Tests don't seem to pass if beforeAll and afterAll are used.
+	// Unsure why.
+	beforeEach( async () => {
 		await deactivatePlugin(
 			'gutenberg-test-plugin-disables-the-css-animations'
 		);
+
+		// Set the viewport at a larger size than normal to ensure scrolling doesn't occur.
+		// Scrolling can interfere with the drag coordinates.
+		await page.setViewport( { width: 960, height: 1024 } );
+		await waitForWindowDimensions( 960, 1024 );
+		await createNewPost();
+		await page.setDragInterception( true );
 	} );
 
-	afterAll( async () => {
+	afterEach( async () => {
 		await page.setDragInterception( false );
+
+		// Reset the viewport to normal large size.
+		await setBrowserViewport( 'large' );
 		await activatePlugin(
 			'gutenberg-test-plugin-disables-the-css-animations'
 		);
 	} );
 
-	beforeEach( async () => {
-		await createNewPost();
+	it( 'can drag and drop to the top of a block list', async () => {
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2' );
+
+		// Confirm correct setup.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await showBlockToolbar();
+		const dragHandle = await page.waitForSelector(
+			'.block-editor-block-mover__drag-handle'
+		);
+		const dragHandlePoint = await dragHandle.clickablePoint();
+
+		const firstParagraph = await page.$( '[data-type="core/paragraph"]' );
+		const targetPoint = await firstParagraph.clickablePoint();
+		const targetRect = await firstParagraph.boundingBox();
+		const target = {
+			x: targetPoint.x,
+			// Drag to the top half.
+			y: targetPoint.y - targetRect.height * 0.25,
+		};
+
+		const dragData = await page.mouse.drag( dragHandlePoint, target );
+		await page.mouse.dragEnter( target, dragData );
+		await page.mouse.dragOver( target, dragData );
+
+		// Wait for the insertion point to be visible.
+		const insertionPoint = await page.waitForSelector(
+			'.block-editor-block-list__insertion-point'
+		);
+
+		// Expect the insertion point to be visible above the first paragraph.
+		const insertionPointBoundingBox = await insertionPoint.boundingBox();
+		expect( insertionPointBoundingBox.y ).toBeLessThan( target.y );
+
+		await page.mouse.drop( target, dragData );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should drag and drop', async () => {
+	it( 'can drag and drop to the bottom of a block list', async () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
+		await page.keyboard.press( 'ArrowUp' );
 
 		// Confirm correct setup.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
+		const [ , secondParagraph ] = await page.$$(
+			'[data-type="core/paragraph"]'
+		);
+
 		await showBlockToolbar();
 		const dragHandle = await page.waitForSelector(
 			'.block-editor-block-mover__drag-handle'
 		);
 		const dragHandlePoint = await dragHandle.clickablePoint();
 
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
-		const paragraphPoint = await paragraph.clickablePoint();
-		const paragraphRect = await paragraph.boundingBox();
+		const targetPoint = await secondParagraph.clickablePoint();
+		const targetRect = await secondParagraph.boundingBox();
+		const target = {
+			x: targetPoint.x,
+			// Drag to the bottom half.
+			y: targetPoint.y + targetRect.height * 0.25,
+		};
 
-		await page.mouse.dragAndDrop( dragHandlePoint, {
-			x: paragraphPoint.x,
-			// Drag to the top half.
-			y: paragraphPoint.y - paragraphRect.height / 4,
-		} );
+		const dragData = await page.mouse.drag( dragHandlePoint, target );
+		await page.mouse.dragEnter( target, dragData );
+		await page.mouse.dragOver( target, dragData );
+
+		// Wait for the insertion point to be visible.
+		const insertionPoint = await page.waitForSelector(
+			'.block-editor-block-list__insertion-point'
+		);
+
+		// Expect the insertion point to be visible below the first paragraph.
+		const insertionPointBoundingBox = await insertionPoint.boundingBox();
+		expect( insertionPointBoundingBox.y ).toBeGreaterThan( target.y );
+
+		await page.mouse.drop( target, dragData );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index 2d1360e9b46335..79d26ada4cea41 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -907,11 +907,16 @@ describe( 'Multi-block selection', () => {
 
 	it( 'should select separator (single element block)', async () => {
 		await clickBlockAppender();
-		await page.keyboard.type( '/hr' );
+		await page.keyboard.type( 'a' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'a' );
-		await pressKeyWithModifier( 'shift', 'ArrowUp' );
+		await page.keyboard.type( '/hr' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowUp' );
+		await page.keyboard.press( 'ArrowRight' );
+		await pressKeyWithModifier( 'shift', 'ArrowDown' );
+		await pressKeyWithModifier( 'shift', 'ArrowDown' );
 
 		// Test setup.
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -921,7 +926,7 @@ describe( 'Multi-block selection', () => {
 		// Ensure selection is in the correct place.
 		await page.keyboard.type( '&' );
 
-		// Expect two blocks with "&" in between.
+		// Expect a paragraph with "&".
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -996,4 +1001,22 @@ describe( 'Multi-block selection', () => {
 			expect( selectedBlocks.length ).toBe( 2 );
 		} );
 	} );
+
+	it( 'should select by dragging into separator', async () => {
+		await clickBlockAppender();
+		await page.keyboard.type( '1' );
+		await insertBlock( 'Separator' );
+		await page.keyboard.press( 'ArrowUp' );
+
+		const [ paragraph, hr ] = await page.$$( '[data-type]' );
+		const coord1 = await paragraph.clickablePoint();
+		const coord2 = await hr.clickablePoint();
+
+		await page.mouse.move( coord1.x, coord1.y );
+		await page.mouse.down();
+		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );
+		await page.mouse.up();
+
+		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );
+	} );
 } );
diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
index 9e2dfb5098e455..8340d2546e778d 100644
--- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js
@@ -192,7 +192,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Add to Reusable blocks' );
+		await clickMenuItem( 'Create Reusable block' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -373,7 +373,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Add to Reusable blocks' );
+		await clickMenuItem( 'Create Reusable block' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
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 8d5eb549dacde3..d10d69c74f2486 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
@@ -207,15 +207,15 @@ describe( 'Multi-entity save flow', () => {
 			await page.keyboard.type( '...' );
 
 			await insertBlock( 'Site Tagline' );
-			// Ensure tagline is retrieved before typing.
+			// Wait for the placeholder.
 			await page.waitForXPath(
-				'//p[contains(text(), "Just another WordPress site")]'
+				'//span[@data-rich-text-placeholder="Write site tagline…"]'
 			);
 			const editableSiteTagLineSelector =
 				'.wp-block-site-tagline[contenteditable="true"]';
 			await page.waitForSelector( editableSiteTagLineSelector );
 			await page.focus( editableSiteTagLineSelector );
-			await page.keyboard.type( '...' );
+			await page.keyboard.type( 'Just another WordPress site' );
 
 			await clickButton( 'Publish' );
 			await page.waitForSelector( savePanelSelector );
diff --git a/packages/edit-navigation/src/components/header/redo-button.js b/packages/edit-navigation/src/components/header/redo-button.js
index 70521b1d0eceaf..c4f4e6df37b915 100644
--- a/packages/edit-navigation/src/components/header/redo-button.js
+++ b/packages/edit-navigation/src/components/header/redo-button.js
@@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function RedoButton() {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -18,7 +22,7 @@ export default function RedoButton() {
 		<ToolbarButton
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486
diff --git a/packages/edit-navigation/src/store/actions.js b/packages/edit-navigation/src/store/actions.js
index 393deb14e16638..def7a7e79e40b3 100644
--- a/packages/edit-navigation/src/store/actions.js
+++ b/packages/edit-navigation/src/store/actions.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { difference, zip } from 'lodash';
+import { difference } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -170,7 +170,12 @@ const batchInsertPlaceholderMenuItems =
 			.__experimentalBatch( tasks );
 
 		// Return an updated navigation block with all the IDs in.
-		const blockToResult = new Map( zip( blocksWithoutRecordId, results ) );
+		const blockToResult = new Map(
+			blocksWithoutRecordId.map( ( block, index ) => [
+				block,
+				results[ index ],
+			] )
+		);
 		return mapBlocksTree( navigationBlock, ( block ) => {
 			if ( ! blockToResult.has( block ) ) {
 				return block;
diff --git a/packages/edit-navigation/src/store/transform.js b/packages/edit-navigation/src/store/transform.js
index 45027b1461557d..5d34b6a09cbea3 100644
--- a/packages/edit-navigation/src/store/transform.js
+++ b/packages/edit-navigation/src/store/transform.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, omit, sortBy, zip } from 'lodash';
+import { get, omit, sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -199,8 +199,8 @@ function mapMenuItemsToBlocks( menuItems ) {
 		return createBlock( itemBlockName, attributes, nestedBlocks );
 	} );
 
-	return zip( blocks, sortedItems ).map( ( [ block, menuItem ] ) =>
-		addRecordIdToBlock( block, menuItem.id )
+	return blocks.map( ( block, blockIndex ) =>
+		addRecordIdToBlock( block, sortedItems[ blockIndex ].id )
 	);
 }
 
diff --git a/packages/edit-post/src/components/header/template-title/delete-template.js b/packages/edit-post/src/components/header/template-title/delete-template.js
index 7eb72ad5aa5a6e..9e0ac957b3dbd8 100644
--- a/packages/edit-post/src/components/header/template-title/delete-template.js
+++ b/packages/edit-post/src/components/header/template-title/delete-template.js
@@ -84,7 +84,7 @@ export default function DeleteTemplate() {
 					} }
 					info={
 						isRevertable
-							? __( 'Restore template to default state' )
+							? __( 'Use the template as supplied by the theme.' )
 							: undefined
 					}
 				>
diff --git a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index 977bc195fea0a8..9b012529df837a 100644
--- a/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -4,6 +4,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -67,6 +74,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -116,6 +130,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -179,6 +200,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js
index 87b905b5a434a3..b16330a0350f96 100644
--- a/packages/edit-post/src/components/sidebar/post-template/index.js
+++ b/packages/edit-post/src/components/sidebar/post-template/index.js
@@ -12,6 +12,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import PostTemplateForm from './form';
+import { store as editPostStore } from '../../../store';
 
 export default function PostTemplate() {
 	const anchorRef = useRef();
@@ -72,16 +73,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 		const templateSlug =
 			select( editorStore ).getEditedPostAttribute( 'template' );
 
-		const settings = select( editorStore ).getEditorSettings();
-		if ( settings.availableTemplates[ templateSlug ] ) {
-			return settings.availableTemplates[ templateSlug ];
+		const { supportsTemplateMode, availableTemplates } =
+			select( editorStore ).getEditorSettings();
+		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
+			return availableTemplates[ templateSlug ];
 		}
 
-		const template = select( coreStore )
-			.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-			?.find( ( { slug } ) => slug === templateSlug );
-
-		return template?.title.rendered;
+		const template = select( editPostStore ).getEditedPostTemplate();
+		return template?.title ?? template?.slug;
 	}, [] );
 
 	return (
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 0f351f0148c0e8..0d8614946a8144 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -27,7 +27,7 @@ import {
 	__experimentalLayoutStyle as LayoutStyle,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__unstableIframe as Iframe,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { Button, __unstableMotion as motion } from '@wordpress/components';
@@ -175,11 +175,6 @@ export default function VisualEditor( { styles } ) {
 
 	const blockSelectionClearerRef = useBlockSelectionClearer();
 
-	const [ , RecursionProvider ] = useNoRecursiveRenders(
-		wrapperUniqueId,
-		wrapperBlockName
-	);
-
 	const layout = useMemo( () => {
 		if ( isTemplateMode ) {
 			return { type: 'default' };
@@ -262,7 +257,10 @@ export default function VisualEditor( { styles } ) {
 								<PostTitle ref={ titleRef } />
 							</div>
 						) }
-						<RecursionProvider>
+						<RecursionProvider
+							blockName={ wrapperBlockName }
+							uniqueId={ wrapperUniqueId }
+						>
 							<BlockList
 								className={
 									isTemplateMode
diff --git a/packages/edit-post/src/test/editor.native.js b/packages/edit-post/src/test/editor.native.js
index 28aac9d3ae4238..c3e35e92598988 100644
--- a/packages/edit-post/src/test/editor.native.js
+++ b/packages/edit-post/src/test/editor.native.js
@@ -35,7 +35,9 @@ afterAll( () => {
 } );
 
 describe( 'Editor', () => {
-	beforeAll( registerCoreBlocks );
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
 
 	it( 'detects unsupported block and sends hasUnsupportedBlocks true to native', () => {
 		RNReactNativeGutenbergBridge.editorDidMount = jest.fn();
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
index 378bfbed4d8e36..3b425966b4b12d 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -192,9 +192,18 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 							isBlock
 							as={ Button }
 							onClick={ () => {
-								const { slug, title, description } =
-									entityForSuggestions.template;
-								onSelect( { slug, title, description } );
+								const {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} = entityForSuggestions.template;
+								onSelect( {
+									slug,
+									title,
+									description,
+									templatePrefix,
+								} );
 							} }
 						>
 							<Text as="span" weight={ 600 }>
diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
index f491b2000ce8e8..035f21f07c982b 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -38,6 +40,7 @@ import {
 	useDefaultTemplateTypes,
 	useTaxonomiesMenuItems,
 	usePostTypeMenuItems,
+	useAuthorMenuItem,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
@@ -90,7 +93,19 @@ export default function NewTemplate( { postType } ) {
 
 	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
-			const { title, description, slug } = template;
+			const { title, description, slug, templatePrefix } = template;
+			let templateContent = template.content;
+			// Try to find fallback content from existing templates.
+			if ( ! templateContent ) {
+				const fallbackTemplate = await apiFetch( {
+					path: addQueryArgs( '/wp/v2/templates/lookup', {
+						slug,
+						is_custom: ! isWPSuggestion,
+						template_prefix: templatePrefix,
+					} ),
+				} );
+				templateContent = fallbackTemplate.content;
+			}
 			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
@@ -100,6 +115,7 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
+					content: templateContent,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
 					is_wp_suggestion: isWPSuggestion,
 				},
@@ -243,26 +259,30 @@ function useMissingTemplates(
 		useTaxonomiesMenuItems( onClickMenuItem );
 	const { defaultPostTypesMenuItems, postTypesMenuItems } =
 		usePostTypeMenuItems( onClickMenuItem );
-	[ ...defaultTaxonomiesMenuItems, ...defaultPostTypesMenuItems ].forEach(
-		( menuItem ) => {
-			if ( ! menuItem ) {
-				return;
-			}
-			const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
-				( template ) => template.slug === menuItem.slug
-			);
-			// Some default template types might have been filtered above from
-			// `missingDefaultTemplates` because they only check for the general
-			// template. So here we either replace or append the item, augmented
-			// with the check if it has available specific item to create a
-			// template for.
-			if ( matchIndex > -1 ) {
-				enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
-			} else {
-				enhancedMissingDefaultTemplateTypes.push( menuItem );
-			}
+
+	const authorMenuItem = useAuthorMenuItem( onClickMenuItem );
+	[
+		...defaultTaxonomiesMenuItems,
+		...defaultPostTypesMenuItems,
+		authorMenuItem,
+	].forEach( ( menuItem ) => {
+		if ( ! menuItem ) {
+			return;
 		}
-	);
+		const matchIndex = enhancedMissingDefaultTemplateTypes.findIndex(
+			( template ) => template.slug === menuItem.slug
+		);
+		// Some default template types might have been filtered above from
+		// `missingDefaultTemplates` because they only check for the general
+		// template. So here we either replace or append the item, augmented
+		// with the check if it has available specific item to create a
+		// template for.
+		if ( matchIndex > -1 ) {
+			enhancedMissingDefaultTemplateTypes[ matchIndex ] = menuItem;
+		} else {
+			enhancedMissingDefaultTemplateTypes.push( menuItem );
+		}
+	} );
 	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
 	enhancedMissingDefaultTemplateTypes?.sort( ( template1, template2 ) => {
 		return (
diff --git a/packages/edit-site/src/components/add-new-template/utils.js b/packages/edit-site/src/components/add-new-template/utils.js
index b4e6eabe65026f..607848291bdb16 100644
--- a/packages/edit-site/src/components/add-new-template/utils.js
+++ b/packages/edit-site/src/components/add-new-template/utils.js
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { blockMeta, post } from '@wordpress/icons';
 
@@ -152,7 +152,10 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -167,6 +170,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 						icon: icon?.startsWith( 'dashicons-' )
 							? icon.slice( 10 )
 							: post,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = postTypesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -210,6 +214,7 @@ export const usePostTypeMenuItems = ( onClickMenuItem ) => {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -317,7 +322,10 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 				);
 			}
 			const menuItem = defaultTemplateType
-				? { ...defaultTemplateType }
+				? {
+						...defaultTemplateType,
+						templatePrefix: templatePrefixes[ slug ],
+				  }
 				: {
 						slug: generalTemplateSlug,
 						title: menuItemTitle,
@@ -327,6 +335,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 							labels.singular_name
 						),
 						icon: blockMeta,
+						templatePrefix: templatePrefixes[ slug ],
 				  };
 			const hasEntities = taxonomiesInfo?.[ slug ]?.hasEntities;
 			// We have a different template creation flow only if they have entities.
@@ -369,6 +378,7 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 									title,
 									description,
 									slug: `${ templatePrefixes[ slug ] }-${ suggestion.slug }`,
+									templatePrefix: templatePrefixes[ slug ],
 								};
 							},
 						},
@@ -408,6 +418,112 @@ export const useTaxonomiesMenuItems = ( onClickMenuItem ) => {
 	return taxonomiesMenuItems;
 };
 
+function useAuthorNeedsUniqueIndentifier() {
+	const authors = useSelect(
+		( select ) =>
+			select( coreStore ).getUsers( { who: 'authors', per_page: -1 } ),
+		[]
+	);
+	const authorsCountByName = useMemo( () => {
+		return ( authors || [] ).reduce( ( authorsCount, { name } ) => {
+			authorsCount[ name ] = ( authorsCount[ name ] || 0 ) + 1;
+			return authorsCount;
+		}, {} );
+	}, [ authors ] );
+	return useCallback(
+		( name ) => {
+			return authorsCountByName[ name ] > 1;
+		},
+		[ authorsCountByName ]
+	);
+}
+
+const USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX = { user: 'author' };
+const USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS = { user: { who: 'authors' } };
+export function useAuthorMenuItem( onClickMenuItem ) {
+	const existingTemplates = useExistingTemplates();
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	const authorInfo = useEntitiesInfo(
+		'root',
+		USE_AUTHOR_MENU_ITEM_TEMPLATE_PREFIX,
+		USE_AUTHOR_MENU_ITEM_QUERY_PARAMETERS
+	);
+	const authorNeedsUniqueId = useAuthorNeedsUniqueIndentifier();
+	let authorMenuItem = defaultTemplateTypes?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( ! authorMenuItem ) {
+		authorMenuItem = {
+			description: __(
+				'Displays latest posts written by a single author.'
+			),
+			slug: 'author',
+			title: 'Author',
+		};
+	}
+	const hasGeneralTemplate = !! existingTemplates?.find(
+		( { slug } ) => slug === 'author'
+	);
+	if ( authorInfo.user?.hasEntities ) {
+		authorMenuItem = { ...authorMenuItem, templatePrefix: 'author' };
+		authorMenuItem.onClick = ( template ) => {
+			onClickMenuItem( {
+				type: 'root',
+				slug: 'user',
+				config: {
+					queryArgs: ( { search } ) => {
+						return {
+							_fields: 'id,name,slug,link',
+							orderBy: search ? 'name' : 'registered_date',
+							exclude: authorInfo.user.existingEntitiesIds,
+							who: 'authors',
+						};
+					},
+					getSpecificTemplate: ( suggestion ) => {
+						const needsUniqueId = authorNeedsUniqueId(
+							suggestion.name
+						);
+						const title = needsUniqueId
+							? sprintf(
+									// translators: %1$s: Represents the name of an author e.g: "Jorge", %2$s: Represents the slug of an author e.g: "author-jorge-slug".
+									__( 'Author: %1$s (%2$s)' ),
+									suggestion.name,
+									suggestion.slug
+							  )
+							: sprintf(
+									// translators: %s: Represents the name of an author e.g: "Jorge".
+									__( 'Author: %s' ),
+									suggestion.name
+							  );
+						const description = sprintf(
+							// translators: %s: Represents the name of an author e.g: "Jorge".
+							__( 'Template for Author: %s' ),
+							suggestion.name
+						);
+						return {
+							title,
+							description,
+							slug: `author-${ suggestion.slug }`,
+							templatePrefix: 'author',
+						};
+					},
+				},
+				labels: {
+					singular_name: __( 'Author' ),
+					search_items: __( 'Search Authors' ),
+					not_found: __( 'No authors found.' ),
+					all_items: __( 'All Authors' ),
+				},
+				hasGeneralTemplate,
+				template,
+			} );
+		};
+	}
+	if ( ! hasGeneralTemplate || authorInfo.user?.hasEntities ) {
+		return authorMenuItem;
+	}
+}
+
 /**
  * Helper hook that filters all the existing templates by the given
  * object with the entity's slug as key and the template prefix as value.
@@ -456,11 +572,16 @@ const useExistingTemplateSlugs = ( templatePrefixes ) => {
  * Helper hook that finds the existing records with an associated template,
  * as they need to be excluded from the template suggestions.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the existing records as value.
  */
-const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
+const useTemplatesToExclude = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const slugsToExcludePerEntity =
 		useExistingTemplateSlugs( templatePrefixes );
 	const recordsToExcludePerEntity = useSelect(
@@ -473,6 +594,7 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
 						_fields: 'id',
 						context: 'view',
 						slug: slugsWithTemplates,
+						...additionalQueryParameters[ slug ],
 					} );
 					if ( entitiesWithTemplates?.length ) {
 						accumulator[ slug ] = entitiesWithTemplates;
@@ -497,14 +619,20 @@ const useTemplatesToExclude = ( entityName, templatePrefixes ) => {
  * First we need to find the existing records with an associated template,
  * to query afterwards for any remaining record, by excluding them.
  *
- * @param {string}                entityName       The entity's name.
- * @param {Record<string,string>} templatePrefixes An object with the entity's slug as key and the template prefix as value.
+ * @param {string}                entityName                The entity's name.
+ * @param {Record<string,string>} templatePrefixes          An object with the entity's slug as key and the template prefix as value.
+ * @param {Record<string,Object>} additionalQueryParameters An object with the entity's slug as key and additional query parameters as value.
  * @return {Record<string,EntitiesInfo>} An object with the entity's slug as key and the EntitiesInfo as value.
  */
-const useEntitiesInfo = ( entityName, templatePrefixes ) => {
+const useEntitiesInfo = (
+	entityName,
+	templatePrefixes,
+	additionalQueryParameters = {}
+) => {
 	const recordsToExcludePerEntity = useTemplatesToExclude(
 		entityName,
-		templatePrefixes
+		templatePrefixes,
+		additionalQueryParameters
 	);
 	const entitiesInfo = useSelect(
 		( select ) => {
@@ -523,6 +651,7 @@ const useEntitiesInfo = ( entityName, templatePrefixes ) => {
 								_fields: 'id',
 								context: 'view',
 								exclude: existingEntitiesIds,
+								...additionalQueryParameters[ slug ],
 							}
 						)?.length,
 						existingEntitiesIds,
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 71fe69769719ea..ec6c9a4ecc12b0 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -179,11 +179,11 @@ export default function BorderPanel( { name } ) {
 					<BorderBoxControl
 						colors={ colors }
 						enableAlpha={ true }
+						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
-						showStyle={ showBorderStyle }
-						value={ border }
-						popoverPlacement="left-start"
 						popoverOffset={ 40 }
+						popoverPlacement="left-start"
+						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index bdfa0c5a054eb6..76ef759886c507 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -160,8 +160,9 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const hasPaddingValue = () =>
-		!! paddingValues && Object.keys( paddingValues ).length;
+	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
+	const hasPaddingValue = () => !! userSetPaddingValue;
 
 	return {
 		paddingValues,
@@ -204,7 +205,8 @@ function useMarginProps( name ) {
 function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
 	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! gapValue;
+	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const hasGapValue = () => !! userSetGapValue;
 	return {
 		gapValue,
 		setGapValue,
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 98aecf962fe08f..1da9a7293835fa 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -128,21 +128,21 @@ export function useStyle( path, blockName, source = 'all' ) {
 	switch ( source ) {
 		case 'all':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath )
 			);
 			break;
 		case 'base':
 			result = getValueFromVariable(
-				baseConfig.settings,
+				baseConfig,
 				blockName,
 				get( baseConfig, finalPath )
 			);
@@ -170,6 +170,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'padding',
 	'contentSize',
 	'wideSize',
+	'blockGap',
 ];
 
 export function getSupportedGlobalStylesPanels( name ) {
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index e19d1939dab8e4..0e5b9c5d960fc1 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -24,7 +24,7 @@ function ScreenColorPalette( { name } ) {
 				tabs={ [
 					{
 						name: 'solid',
-						title: 'Solid color',
+						title: 'Solid',
 						value: 'solid',
 					},
 					{
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index b6af8f40095e69..87d74604e63e14 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -114,6 +114,36 @@ function LinkColorItem( { name, parentMenu } ) {
 	);
 }
 
+function HeadingColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'color' );
+	const [ color ] = useStyle( 'elements.heading.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/heading' }
+			aria-label={ __( 'Colors heading styles' ) }
+		>
+			<HStack justify="flex-start">
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
+				<FlexItem>{ __( 'Headings' ) }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
 function ButtonColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'buttonColor' );
@@ -174,6 +204,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<HeadingColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
new file mode 100644
index 00000000000000..4a40ebc4d4d80a
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js
@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+	useGradientsPerOrigin,
+} from './hooks';
+
+function ScreenHeadingColor( { name } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ gradients ] = useSetting( 'color.gradients', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useSetting(
+		'color.customGradient',
+		name
+	);
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const gradientsPerOrigin = useGradientsPerOrigin( name );
+
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const hasBackgroundColor =
+		supports.includes( 'backgroundColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		supports.includes( 'background' ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
+
+	const [ color, setColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name
+	);
+	const [ userColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name,
+		'user'
+	);
+
+	const [ backgroundColor, setBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name
+	);
+	const [ userBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name,
+		'user'
+	);
+
+	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
+	}
+
+	let backgroundSettings = {};
+	if ( hasBackgroundColor ) {
+		backgroundSettings = {
+			colorValue: backgroundColor,
+			onColorChange: setBackgroundColor,
+		};
+		if ( backgroundColor ) {
+			backgroundSettings.clearable =
+				backgroundColor === userBackgroundColor;
+		}
+	}
+
+	let gradientSettings = {};
+	if ( hasGradientColor ) {
+		gradientSettings = {
+			gradientValue: gradient,
+			onGradientChange: setGradient,
+		};
+		if ( gradient ) {
+			gradientSettings.clearable = gradient === userGradient;
+		}
+	}
+
+	const controlProps = {
+		...backgroundSettings,
+		...gradientSettings,
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Headings' ) }
+				description={ __(
+					'Set the default color used for headings across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-heading-color">
+				<h4>{ __( 'Select heading level' ) }</h4>
+
+				<ToggleGroupControl
+					label={ __( 'Select heading level' ) }
+					hideLabelFromVision={ true }
+					value={ selectedLevel }
+					onChange={ setCurrentTab }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="heading"
+						/* translators: 'All' refers to selecting all heading levels 
+						and applying the same style to h1-h6. */
+						label={ __( 'All' ) }
+					/>
+					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
+					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
+					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
+					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
+					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
+					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
+				</ToggleGroupControl>
+			</div>
+			{ hasTextColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Text color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Text color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-text-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ color }
+						onColorChange={ setColor }
+						clearable={ color === userColor }
+					/>
+				</div>
+			) }
+			{ hasBackgroundColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Background color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Background color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-background-color__control"
+						colors={ colorsPerOrigin }
+						gradients={ gradientsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						disableCustomGradients={ ! areCustomGradientsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						{ ...controlProps }
+					/>
+				</div>
+			) }
+		</>
+	);
+}
+
+export default ScreenHeadingColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 4f7abe955803ee..a14801c43a3b0e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -18,6 +18,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on the links.' ),
 		title: __( 'Links' ),
 	},
+	heading: {
+		description: __( 'Manage the fonts and typography used on headings.' ),
+		title: __( 'Headings' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index f2b59ee320f301..3f7a5eb3eb8670 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -104,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="heading"
+								label={ __( 'Headings' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index f94a6dcc1620a1..ed72bfb1fde31f 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -21,6 +21,11 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-typography-panel__half-width-control {
+	width: calc((100% - #{$grid-unit-30}) / 2);
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
 }
@@ -73,12 +78,6 @@
 	padding: $grid-unit-20;
 }
 
-.edit-site-screen-background-color__control {
-	.block-editor-color-gradient-control__tab-panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index fbaf2ac7ee45d5..b84afdf5972b86 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -13,6 +13,7 @@ import {
 	getBlockSelectors,
 	toCustomProperties,
 	toStyles,
+	getStylesDeclarations,
 } from '../use-global-styles-output';
 import { ROOT_BLOCK_SELECTOR } from '../utils';
 
@@ -478,7 +479,7 @@ describe( 'global styles renderer', () => {
 
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
-					'body{background-color: red;margin: 10px;padding: 10px;}h1{font-size: 42px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
+					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
 					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
@@ -681,4 +682,66 @@ describe( 'global styles renderer', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getStylesDeclarations', () => {
+		const blockStyles = {
+			spacing: {
+				padding: {
+					top: '33px',
+					right: '33px',
+					bottom: '33px',
+					left: '33px',
+				},
+			},
+			color: {
+				background: 'var:preset|color|light-green-cyan',
+			},
+			typography: {
+				fontFamily: 'sans-serif',
+			},
+		};
+
+		it( 'Should output padding variables and other properties if useRootPaddingAwareAlignments is enabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', true )
+			).toEqual( [
+				'font-family: sans-serif',
+				'--wp--style--root--padding-top: 33px',
+				'--wp--style--root--padding-right: 33px',
+				'--wp--style--root--padding-bottom: 33px',
+				'--wp--style--root--padding-left: 33px',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+			] );
+		} );
+
+		it( 'Should output padding and other properties if useRootPaddingAwareAlignments is disabled', () => {
+			expect(
+				getStylesDeclarations( blockStyles, 'body', false )
+			).toEqual( [
+				'font-family: sans-serif',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+			] );
+		} );
+
+		it( 'Should not output padding variables if selector is not root', () => {
+			expect(
+				getStylesDeclarations(
+					blockStyles,
+					'.wp-block-button__link',
+					true
+				)
+			).toEqual( [
+				'font-family: sans-serif',
+				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'padding-top: 33px',
+				'padding-right: 33px',
+				'padding-bottom: 33px',
+				'padding-left: 33px',
+			] );
+		} );
+	} );
 } );
diff --git a/packages/edit-site/src/components/global-styles/test/utils.js b/packages/edit-site/src/components/global-styles/test/utils.js
index 283384f36658f2..fcd62e69fe017f 100644
--- a/packages/edit-site/src/components/global-styles/test/utils.js
+++ b/packages/edit-site/src/components/global-styles/test/utils.js
@@ -110,7 +110,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided an invalid variable', () => {
 			it( 'returns the originally provided value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					styles,
 					'root',
 					undefined
 				);
@@ -122,7 +122,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a preset variable', () => {
 			it( 'retrieves the correct preset value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					styles,
 					'root',
 					'var:preset|color|primary'
 				);
@@ -134,7 +134,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a custom variable', () => {
 			it( 'retrieves the correct custom value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					styles,
 					'root',
 					'var(--wp--custom--color--secondary)'
 				);
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 1d7229f2f099c2..6c049d670aad6a 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -11,8 +11,11 @@ import {
 	PanelBody,
 	FontSizePicker,
 	__experimentalSpacer as Spacer,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
-
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -59,9 +62,14 @@ function useHasLetterSpacingControl( name ) {
 }
 
 export default function TypographyPanel( { name, element } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
 	const supports = getSupportedGlobalStylesPanels( name );
-	const prefix =
-		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ selectedLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
@@ -78,6 +86,12 @@ export default function TypographyPanel( { name, element } ) {
 	const hasAppearanceControl = useHasAppearanceControl( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
 
+	/* Disable font size controls when the option to style all headings is selected. */
+	let hasFontSizeEnabled = supports.includes( 'fontSize' );
+	if ( element === 'heading' && selectedLevel === 'heading' ) {
+		hasFontSizeEnabled = false;
+	}
+
 	const [ fontFamily, setFontFamily ] = useStyle(
 		prefix + 'typography.fontFamily',
 		name
@@ -130,30 +144,79 @@ export default function TypographyPanel( { name, element } ) {
 			>
 				Aa
 			</div>
-
+			{ element === 'heading' && (
+				<div>
+					<h4>{ __( 'Select heading level' ) }</h4>
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision={ true }
+						value={ selectedLevel }
+						onChange={ setCurrentTab }
+						isBlock
+						size="__unstable-large"
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+							label={ __( 'All' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</div>
+			) }
 			{ supports.includes( 'fontFamily' ) && (
 				<FontFamilyControl
 					fontFamilies={ fontFamilies }
 					value={ fontFamily }
 					onChange={ setFontFamily }
+					size="__unstable-large"
 				/>
 			) }
-			{ supports.includes( 'fontSize' ) && (
+			{ hasFontSizeEnabled && (
 				<FontSizePicker
 					value={ fontSize }
 					onChange={ setFontSize }
 					fontSizes={ fontSizes }
 					disableCustomFontSizes={ disableCustomFontSizes }
+					size="__unstable-large"
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<Spacer marginBottom={ 6 }>
-					<LineHeightControl
-						__nextHasNoMarginBottom={ true }
-						value={ lineHeight }
-						onChange={ setLineHeight }
-					/>
-				</Spacer>
+				<div className="edit-site-typography-panel__half-width-control">
+					<Spacer marginBottom={ 6 }>
+						<LineHeightControl
+							__nextHasNoMarginBottom={ true }
+							__unstableInputWidth="auto"
+							value={ lineHeight }
+							onChange={ setLineHeight }
+							size="__unstable-large"
+						/>
+					</Spacer>
+				</div>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl
@@ -170,13 +233,19 @@ export default function TypographyPanel( { name, element } ) {
 					} }
 					hasFontStyles={ hasFontStyles }
 					hasFontWeights={ hasFontWeights }
+					size="__unstable-large"
+					__nextUnconstrainedWidth
 				/>
 			) }
 			{ hasLetterSpacingControl && (
-				<LetterSpacingControl
-					value={ letterSpacing }
-					onChange={ setLetterSpacing }
-				/>
+				<div className="edit-site-typography-panel__half-width-control">
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</div>
 			) }
 		</PanelBody>
 	);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 750985ad1f94fb..6eeada1e67c61d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -20,6 +20,7 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
 import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
+import ScreenHeadingColor from './screen-heading-color';
 import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -59,6 +60,12 @@ function ContextScreens( { name } ) {
 				<ScreenTypographyElement name={ name } element="link" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/heading' }
+			>
+				<ScreenTypographyElement name={ name } element="heading" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -89,6 +96,12 @@ function ContextScreens( { name } ) {
 				<ScreenLinkColor name={ name } />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/heading' }
+			>
+				<ScreenHeadingColor name={ name } />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/button' }
 			>
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index c4e9d000b703ec..761a77455906b3 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -10,7 +10,6 @@ import {
 	pickBy,
 	reduce,
 	set,
-	startsWith,
 } from 'lodash';
 
 /**
@@ -22,7 +21,7 @@ import {
 	getBlockTypes,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import { useEffect, useState, useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import { getCSSRules } from '@wordpress/style-engine';
 import {
 	__unstablePresetDuotoneFilter as PresetDuotoneFilter,
@@ -50,7 +49,8 @@ function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+
+	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -190,12 +190,15 @@ function flattenTree( input = {}, prefix, token ) {
  *
  * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
+ * @param {Object}  tree				A theme.json tree containing layout definitions.
+ *
  * @return {Array} An array of style declarations.
  */
-function getStylesDeclarations(
+export function getStylesDeclarations(
 	blockStyles = {},
 	selector = '',
-	useRootPaddingAlign
+	useRootPaddingAlign,
+	tree = {}
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
@@ -211,6 +214,15 @@ function getStylesDeclarations(
 
 			const styleValue = get( blockStyles, pathToValue );
 
+			// Root-level padding styles don't currently support strings with CSS shorthand values.
+			// This may change: https://github.com/WordPress/gutenberg/issues/40132.
+			if (
+				key === '--wp--style--root--padding' &&
+				( typeof styleValue === 'string' || ! useRootPaddingAlign )
+			) {
+				return declarations;
+			}
+
 			if ( !! properties && typeof styleValue !== 'string' ) {
 				Object.entries( properties ).forEach( ( entry ) => {
 					const [ name, prop ] = entry;
@@ -230,13 +242,6 @@ function getStylesDeclarations(
 						) }`
 					);
 				} );
-			} else if (
-				key === '--wp--style--root--padding' &&
-				typeof styleValue === 'string'
-			) {
-				// Root-level padding styles don't currently support strings with CSS shorthand values.
-				// This may change: https://github.com/WordPress/gutenberg/issues/40132.
-				return declarations;
 			} else if ( get( blockStyles, pathToValue, false ) ) {
 				const cssProperty = key.startsWith( '--' )
 					? key
@@ -253,18 +258,27 @@ function getStylesDeclarations(
 		[]
 	);
 
-	if ( isRoot && useRootPaddingAlign ) {
-		return output;
-	}
-
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
+		// Don't output padding properties if padding variables are set.
+		if (
+			isRoot &&
+			useRootPaddingAlign &&
+			rule.key.startsWith( 'padding' )
+		) {
+			return;
+		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
-		output.push( `${ cssProperty }: ${ compileStyleValue( rule.value ) }` );
+		let ruleValue = rule.value;
+		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
+			const refPath = ruleValue.ref.split( '.' );
+			ruleValue = get( tree, refPath );
+		}
+		output.push( `${ cssProperty }: ${ compileStyleValue( ruleValue ) }` );
 	} );
 
 	return output;
@@ -435,11 +449,12 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 			selector: ROOT_BLOCK_SELECTOR,
 		} );
 	}
-	forEach( tree.styles?.elements, ( value, key ) => {
-		if ( !! value && !! ELEMENTS[ key ] ) {
+
+	forEach( ELEMENTS, ( selector, name ) => {
+		if ( !! tree.styles?.elements[ name ] ) {
 			nodes.push( {
-				styles: value,
-				selector: ELEMENTS[ key ],
+				styles: tree.styles?.elements[ name ],
+				selector,
 			} );
 		}
 	} );
@@ -647,7 +662,8 @@ export const toStyles = (
 			const declarations = getStylesDeclarations(
 				styles,
 				selector,
-				useRootPaddingAlign
+				useRootPaddingAlign,
+				tree
 			);
 			if ( declarations?.length ) {
 				ruleset =
@@ -782,9 +798,6 @@ export const getBlockSelectors = ( blockTypes ) => {
 };
 
 export function useGlobalStylesOutput() {
-	const [ stylesheets, setStylesheets ] = useState( [] );
-	const [ settings, setSettings ] = useState( {} );
-	const [ svgFilters, setSvgFilters ] = useState( {} );
 	const { merged: mergedConfig } = useContext( GlobalStylesContext );
 	const [ blockGap ] = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
@@ -794,9 +807,9 @@ export function useGlobalStylesOutput() {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
-	useEffect( () => {
+	return useMemo( () => {
 		if ( ! mergedConfig?.styles || ! mergedConfig?.settings ) {
-			return;
+			return [];
 		}
 
 		const blockSelectors = getBlockSelectors( getBlockTypes() );
@@ -812,7 +825,7 @@ export function useGlobalStylesOutput() {
 			disableLayoutStyles
 		);
 		const filters = toSvgFilters( mergedConfig, blockSelectors );
-		setStylesheets( [
+		const stylesheets = [
 			{
 				css: customProperties,
 				isGlobalStyles: true,
@@ -821,15 +834,13 @@ export function useGlobalStylesOutput() {
 				css: globalStyles,
 				isGlobalStyles: true,
 			},
-		] );
-		setSettings( mergedConfig.settings );
-		setSvgFilters( filters );
+		];
+
+		return [ stylesheets, mergedConfig.settings, filters ];
 	}, [
 		hasBlockGapSupport,
 		hasFallbackGapSupport,
 		mergedConfig,
 		disableLayoutStyles,
 	] );
-
-	return [ stylesheets, settings, svgFilters, hasBlockGapSupport ];
 }
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 4c4aef887c6e0d..b7b5c5c96a9a15 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -85,6 +85,9 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
 	'elements.button.backgroundColor': 'background-color',
+	'elements.heading.color': 'color',
+	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -192,7 +195,7 @@ function getValueFromPresetVariable(
 	}
 
 	const presetObject = findInPresetsBy(
-		features,
+		features.settings,
 		blockName,
 		metadata.path,
 		'slug',
@@ -210,8 +213,8 @@ function getValueFromPresetVariable(
 
 function getValueFromCustomVariable( features, blockName, variable, path ) {
 	const result =
-		get( features, [ 'blocks', blockName, 'custom', ...path ] ) ??
-		get( features, [ 'custom', ...path ] );
+		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
+		get( features.settings, [ 'custom', ...path ] );
 	if ( ! result ) {
 		return variable;
 	}
@@ -221,7 +224,12 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 
 export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
-		return variable;
+		if ( variable?.ref && typeof variable?.ref === 'string' ) {
+			const refPath = variable.ref.split( '.' );
+			variable = get( features, refPath );
+		} else {
+			return variable;
+		}
 	}
 	const USER_VALUE_PREFIX = 'var:';
 	const THEME_VALUE_PREFIX = 'var(--wp--';
diff --git a/packages/edit-site/src/components/header/undo-redo/redo.js b/packages/edit-site/src/components/header/undo-redo/redo.js
index 1c21a934e388e9..17d0ecb892d0a5 100644
--- a/packages/edit-site/src/components/header/undo-redo/redo.js
+++ b/packages/edit-site/src/components/header/undo-redo/redo.js
@@ -5,11 +5,15 @@ import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 function RedoButton( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -21,7 +25,7 @@ function RedoButton( props, ref ) {
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486
diff --git a/packages/edit-site/src/components/list/actions/index.js b/packages/edit-site/src/components/list/actions/index.js
index dc91e9f9b27380..74cdb5bc65882b 100644
--- a/packages/edit-site/src/components/list/actions/index.js
+++ b/packages/edit-site/src/components/list/actions/index.js
@@ -79,7 +79,9 @@ export default function Actions( { template } ) {
 					) }
 					{ isRevertable && (
 						<MenuItem
-							info={ __( 'Restore to default state' ) }
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
 							onClick={ () => {
 								revertAndSaveTemplate();
 								onClose();
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js
index 25e035d0f06df5..86e7d334318cc3 100644
--- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js
+++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js
@@ -48,9 +48,5 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
-	return (
-		<>
-			<ListView id={ id } />
-		</>
-	);
+	return <ListView id={ id } />;
 }
diff --git a/packages/edit-site/src/components/sidebar/template-card/template-actions.js b/packages/edit-site/src/components/sidebar/template-card/template-actions.js
index 09208c03edf781..b68cf1ff617579 100644
--- a/packages/edit-site/src/components/sidebar/template-card/template-actions.js
+++ b/packages/edit-site/src/components/sidebar/template-card/template-actions.js
@@ -28,7 +28,9 @@ export default function Actions( { template } ) {
 			{ ( { onClose } ) => (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ () => {
 							revertTemplate( template );
 							onClose();
diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
index 56141dc264dcd6..7c7704a4580481 100644
--- a/packages/edit-site/src/components/template-details/index.js
+++ b/packages/edit-site/src/components/template-details/index.js
@@ -79,7 +79,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
 						className="edit-site-template-details__revert-button"
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }
diff --git a/packages/edit-site/src/components/template-details/template-areas.js b/packages/edit-site/src/components/template-details/template-areas.js
index f7bafc106d524b..dfd8e33ad577d3 100644
--- a/packages/edit-site/src/components/template-details/template-areas.js
+++ b/packages/edit-site/src/components/template-details/template-areas.js
@@ -59,7 +59,9 @@ function TemplatePartItemMore( {
 			{ isTemplateRevertable( templatePart ) && (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template part as supplied by the theme.'
+						) }
 						onClick={ clearCustomizations }
 					>
 						{ __( 'Clear customizations' ) }
diff --git a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
index 16cdf874ca25be..e23e0addbf5613 100644
--- a/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
+++ b/packages/edit-site/src/components/template-part-converter/convert-to-template-part.js
@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -65,11 +66,12 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 			<BlockSettingsMenuControls>
 				{ () => (
 					<MenuItem
+						icon={ symbolFilled }
 						onClick={ () => {
 							setIsModalOpen( true );
 						} }
 					>
-						{ __( 'Make template part' ) }
+						{ __( 'Create Template part' ) }
 					</MenuItem>
 				) }
 			</BlockSettingsMenuControls>
diff --git a/packages/edit-widgets/src/components/header/undo-redo/redo.js b/packages/edit-widgets/src/components/header/undo-redo/redo.js
index 70521b1d0eceaf..c4f4e6df37b915 100644
--- a/packages/edit-widgets/src/components/header/undo-redo/redo.js
+++ b/packages/edit-widgets/src/components/header/undo-redo/redo.js
@@ -5,10 +5,14 @@ import { __, isRTL } from '@wordpress/i18n';
 import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function RedoButton() {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -18,7 +22,7 @@ export default function RedoButton() {
 		<ToolbarButton
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486
diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js
index f80d14646d5564..1383360a94bf1e 100644
--- a/packages/editor/src/components/editor-history/redo.js
+++ b/packages/editor/src/components/editor-history/redo.js
@@ -4,7 +4,7 @@
 import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
 import { forwardRef } from '@wordpress/element';
 
@@ -14,6 +14,10 @@ import { forwardRef } from '@wordpress/element';
 import { store as editorStore } from '../../store';
 
 function EditorHistoryRedo( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( editorStore ).hasEditorRedo(),
 		[]
@@ -26,7 +30,7 @@ function EditorHistoryRedo( props, ref ) {
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			/* translators: button label text should, if possible, be under 16 characters. */
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no redo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486
diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js
index 38b8138d85943d..c7498acbf394f4 100644
--- a/packages/editor/src/components/post-url/label.js
+++ b/packages/editor/src/components/post-url/label.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { filterURLForDisplay } from '@wordpress/url';
+import { filterURLForDisplay, safeDecodeURIComponent } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -18,5 +18,5 @@ export function usePostURLLabel() {
 		( select ) => select( editorStore ).getCurrentPost().link,
 		[]
 	);
-	return filterURLForDisplay( postLink );
+	return filterURLForDisplay( safeDecodeURIComponent( postLink ) );
 }
diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js
index 52981d294c3a56..0eb3fd1bb27bd8 100644
--- a/packages/editor/src/store/actions.js
+++ b/packages/editor/src/store/actions.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { has } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -48,7 +43,7 @@ export const setupEditor =
 			// included as part of editor setup action. Assume edited content as
 			// canonical if provided, falling back to post.
 			let content;
-			if ( has( edits, [ 'content' ] ) ) {
+			if ( 'content' in edits ) {
 				content = edits.content;
 			} else {
 				content = post.content.raw;
diff --git a/packages/editor/src/store/reducer.js b/packages/editor/src/store/reducer.js
index 88d7f251bf86ab..3b9f39732fd6fb 100644
--- a/packages/editor/src/store/reducer.js
+++ b/packages/editor/src/store/reducer.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit, isEqual } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,7 +34,12 @@ export function getPostRawValue( value ) {
  * @return {boolean} Whether the two objects have the same keys.
  */
 export function hasSameKeys( a, b ) {
-	return isEqual( Object.keys( a ), Object.keys( b ) );
+	const keysA = Object.keys( a ).sort();
+	const keysB = Object.keys( b ).sort();
+	return (
+		keysA.length === keysB.length &&
+		keysA.every( ( key, index ) => keysB[ index ] === key )
+	);
 }
 
 /**
@@ -184,8 +184,11 @@ export function postSavingLock( state = {}, action ) {
 		case 'LOCK_POST_SAVING':
 			return { ...state, [ action.lockName ]: true };
 
-		case 'UNLOCK_POST_SAVING':
-			return omit( state, action.lockName );
+		case 'UNLOCK_POST_SAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
 	}
 	return state;
 }
@@ -205,8 +208,11 @@ export function postAutosavingLock( state = {}, action ) {
 		case 'LOCK_POST_AUTOSAVING':
 			return { ...state, [ action.lockName ]: true };
 
-		case 'UNLOCK_POST_AUTOSAVING':
-			return omit( state, action.lockName );
+		case 'UNLOCK_POST_AUTOSAVING': {
+			const { [ action.lockName ]: removedLockName, ...restState } =
+				state;
+			return restState;
+		}
 	}
 	return state;
 }
diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js
index daa6227796df0d..29944ef805e2e4 100644
--- a/packages/editor/src/store/selectors.js
+++ b/packages/editor/src/store/selectors.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { find, get, has, includes, some } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -149,8 +148,7 @@ export const hasNonPostEntityChanges = createRegistrySelector(
 		const dirtyEntityRecords =
 			select( coreStore ).__experimentalGetDirtyEntityRecords();
 		const { type, id } = getCurrentPost( state );
-		return some(
-			dirtyEntityRecords,
+		return dirtyEntityRecords.some(
 			( entityRecord ) =>
 				entityRecord.kind !== 'postType' ||
 				entityRecord.name !== type ||
@@ -232,10 +230,8 @@ export function getCurrentPostId( state ) {
  * @return {number} Number of revisions.
  */
 export function getCurrentPostRevisionsCount( state ) {
-	return get(
-		getCurrentPost( state ),
-		[ '_links', 'version-history', 0, 'count' ],
-		0
+	return (
+		getCurrentPost( state )._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0
 	);
 }
 
@@ -248,9 +244,8 @@ export function getCurrentPostRevisionsCount( state ) {
  * @return {?number} ID of the last revision.
  */
 export function getCurrentPostLastRevisionId( state ) {
-	return get(
-		getCurrentPost( state ),
-		[ '_links', 'predecessor-version', 0, 'id' ],
+	return (
+		getCurrentPost( state )._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ??
 		null
 	);
 }
@@ -371,7 +366,7 @@ export function getEditedPostAttribute( state, attributeName ) {
 export const getAutosaveAttribute = createRegistrySelector(
 	( select ) => ( state, attributeName ) => {
 		if (
-			! includes( AUTOSAVE_PROPERTIES, attributeName ) &&
+			! AUTOSAVE_PROPERTIES.includes( attributeName ) &&
 			attributeName !== 'preview_link'
 		) {
 			return;
@@ -379,9 +374,7 @@ export const getAutosaveAttribute = createRegistrySelector(
 
 		const postType = getCurrentPostType( state );
 		const postId = getCurrentPostId( state );
-		const currentUserId = get( select( coreStore ).getCurrentUser(), [
-			'id',
-		] );
+		const currentUserId = select( coreStore ).getCurrentUser()?.id;
 		const autosave = select( coreStore ).getAutosave(
 			postType,
 			postId,
@@ -589,9 +582,7 @@ export const isEditedPostAutosaveable = createRegistrySelector(
 			postType,
 			postId
 		);
-		const currentUserId = get( select( coreStore ).getCurrentUser(), [
-			'id',
-		] );
+		const currentUserId = select( coreStore ).getCurrentUser()?.id;
 
 		// Disable reason - this line causes the side-effect of fetching the autosave
 		// via a resolver, moving below the return would result in the autosave never
@@ -710,8 +701,7 @@ export const isSavingNonPostEntityChanges = createRegistrySelector(
 		const entitiesBeingSaved =
 			select( coreStore ).__experimentalGetEntitiesBeingSaved();
 		const { type, id } = getCurrentPost( state );
-		return some(
-			entitiesBeingSaved,
+		return entitiesBeingSaved.some(
 			( entityRecord ) =>
 				entityRecord.kind !== 'postType' ||
 				entityRecord.name !== type ||
@@ -771,7 +761,7 @@ export function isAutosavingPost( state ) {
 	if ( ! isSavingPost( state ) ) {
 		return false;
 	}
-	return !! get( state.saving, [ 'options', 'isAutosave' ] );
+	return Boolean( state.saving.options?.isAutosave );
 }
 
 /**
@@ -785,7 +775,7 @@ export function isPreviewingPost( state ) {
 	if ( ! isSavingPost( state ) ) {
 		return false;
 	}
-	return !! get( state.saving, [ 'options', 'isPreview' ] );
+	return Boolean( state.saving.options?.isPreview );
 }
 
 /**
@@ -1081,10 +1071,11 @@ export function getActivePostLock( state ) {
  * @return {boolean} Whether the user can or can't post unfiltered HTML.
  */
 export function canUserUseUnfilteredHTML( state ) {
-	return has( getCurrentPost( state ), [
-		'_links',
-		'wp:action-unfiltered-html',
-	] );
+	return Boolean(
+		getCurrentPost( state )._links?.hasOwnProperty(
+			'wp:action-unfiltered-html'
+		)
+	);
 }
 
 /**
@@ -1583,8 +1574,18 @@ export const __experimentalGetDefaultTemplatePartAreas = createSelector(
  * @return {Object} The template type.
  */
 export const __experimentalGetDefaultTemplateType = createSelector(
-	( state, slug ) =>
-		find( __experimentalGetDefaultTemplateTypes( state ), { slug } ) || {},
+	( state, slug ) => {
+		const templateTypes = __experimentalGetDefaultTemplateTypes( state );
+		if ( ! templateTypes ) {
+			return EMPTY_OBJECT;
+		}
+
+		return (
+			Object.values( templateTypes ).find(
+				( type ) => type.slug === slug
+			) ?? EMPTY_OBJECT
+		);
+	},
 	( state, slug ) => [ __experimentalGetDefaultTemplateTypes( state ), slug ]
 );
 
diff --git a/packages/element/package.json b/packages/element/package.json
index 769dfcfa44c7ac..358464b0d6226e 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -32,7 +32,8 @@
 		"@types/react": "^17.0.37",
 		"@types/react-dom": "^17.0.11",
 		"@wordpress/escape-html": "file:../escape-html",
-		"lodash": "^4.17.21",
+		"change-case": "^4.1.2",
+		"is-plain-obj": "^4.1.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
index 9e14a089f8eb4c..79cbc92822181c 100644
--- a/packages/element/src/serialize.js
+++ b/packages/element/src/serialize.js
@@ -28,7 +28,8 @@
 /**
  * External dependencies
  */
-import { kebabCase, isPlainObject } from 'lodash';
+import isPlainObject from 'is-plain-obj';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 0c128c813684f7..8467cf5c7b6d87 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Enhancement
+- Previously, wp-env used the WordPress version provided by Docker in the WordPress image for installations which don't specify a WordPress version. Now, wp-env will find the latest stable version on WordPress.org and check out the https://github.com/WordPress/WordPress repository at the tag matching that version. In most cases, this will match what Docker provides. The benefit is that wp-env (and WordPress.org) now controls the default WordPress version rather than Docker.
+
+### Bug Fix
+- Downloading a default WordPress version also resolves a bug where the wrong WordPress test files were used if no core source was specified in wp-env.json. The current trunk test files were downloaded rather than the stable version. Now, the test files will match the default stable version.
+
 ## 5.0.0 (2022-07-27)
 
 ### Breaking Changes
diff --git a/packages/env/README.md b/packages/env/README.md
index fad2d008a3ce90..af7aa69b3beb53 100644
--- a/packages/env/README.md
+++ b/packages/env/README.md
@@ -16,7 +16,7 @@ The local environment will be available at http://localhost:8888 (Username: `adm
 
 ## Prerequisites
 
-`wp-env` requires Docker to be installed. There are instructions available for installing Docker on [Windows 10 Pro](https://docs.docker.com/docker-for-windows/install/), [all other versions of Windows](https://docs.docker.com/toolbox/toolbox_install_windows/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/#install-using-the-convenience-script).
+`wp-env` requires Docker to be installed. There are instructions available for installing Docker on [Windows](https://docs.docker.com/desktop/install/windows-install/), [macOS](https://docs.docker.com/docker-for-mac/install/), and [Linux](https://docs.docker.com/desktop/install/linux-install/).
 
 Node.js and NPM are required. The latest LTS version of Node.js is used to develop `wp-env` and is recommended.
 
@@ -40,7 +40,9 @@ If your project already has a package.json, it's also possible to use `wp-env` a
 $ npm i @wordpress/env --save-dev
 ```
 
-Then modify your package.json and add an extra command to npm `scripts` (https://docs.npmjs.com/misc/scripts):
+At this point, you can use the local, project-level version of wp-env via [`npx`](https://www.npmjs.com/package/npx), a utility automatically installed with `npm`.`npx` finds binaries like wp-env installed through node modules. As an example: `npx wp-env start --update`.
+
+If you don't wish to use `npx`, modify your package.json and add an extra command to npm `scripts` (https://docs.npmjs.com/misc/scripts):
 
 ```json
 "scripts": {
@@ -51,7 +53,7 @@ Then modify your package.json and add an extra command to npm `scripts` (https:/
 When installing `wp-env` in this way, all `wp-env` commands detailed in these docs must be prefixed with `npm run`, for example:
 
 ```sh
-# You must add another double dash to pass the "update" flag to wp-env
+# You must add another double dash to pass flags to the script (wp-env) rather than to npm itself
 $ npm run wp-env start -- --update
 ```
 
@@ -117,15 +119,14 @@ Running `docker ps` and inspecting the `PORTS` column allows you to determine wh
 
 You may also specify the port numbers in your `.wp-env.json` file, but the environment variables take precedent.
 
-### 3. Restart `wp-env`
+### 3. Restart `wp-env` with updates
 
 Restarting `wp-env` will restart the underlying Docker containers which can fix many issues.
 
-To restart `wp-env`:
+To restart `wp-env`, just run `wp-env start` again. It will automatically stop and start the container. If you also pass the `--update` argument, it will download updates and configure WordPress agian.
 
 ```sh
-$ wp-env stop
-$ wp-env start
+$ wp-env start --update
 ```
 
 ### 4. Restart Docker
@@ -156,16 +157,17 @@ $ wp-env clean all
 $ wp-env start
 ```
 
-### 6. Nuke everything and start again 🔥
+### 6. Destroy everything and start again 🔥
 
-When all else fails, you can use `wp-env destroy` to forcibly remove all of the underlying Docker containers and volumes. This will allow you to start from scratch.
+When all else fails, you can use `wp-env destroy` to forcibly remove all of the underlying Docker containers, volumes, and files. This will allow you to start from scratch.
 
-To nuke everything:
+To do so:
 
 **⚠️ WARNING: This will permanently delete any posts, pages, media, etc. in the local WordPress installation.**
 
 ```sh
 $ wp-env destroy
+# This new instance is a fresh start with no existing data:
 $ wp-env start
 ```
 
@@ -211,10 +213,12 @@ wp-env start
 wp-env start --xdebug=profile,trace,debug
 ```
 
-When you're running `wp-env` using `npm run`, like when working in the Gutenberg repo or when having `wp-env` as a local project dependency, don't forget to add an extra double dash before the `--xdebug` command:
+When you're running `wp-env` using `npm run`, like when working in the Gutenberg repo or when `wp-env` is a local project dependency, don't forget to add an extra double dash before the `--xdebug` command:
 
 ```sh
 npm run wp-env start -- --xdebug
+# Alternatively, use npx:
+npx wp-env start --xdebug
 ```
 
 If you forget about that, the `--xdebug` parameter will be passed to NPM instead of the `wp-env start` command and it will be ignored.
@@ -532,7 +536,7 @@ Additionally, the values referencing a URL include the specified port for the gi
 
 ### Examples
 
-#### Latest production WordPress + current directory as a plugin
+#### Latest stable WordPress + current directory as a plugin
 
 This is useful for plugin development.
 
diff --git a/packages/env/lib/config/config.js b/packages/env/lib/config/config.js
index 25b76d8d304b73..ae3d0a4ed364ae 100644
--- a/packages/env/lib/config/config.js
+++ b/packages/env/lib/config/config.js
@@ -15,6 +15,7 @@ const readRawConfigFile = require( './read-raw-config-file' );
 const parseConfig = require( './parse-config' );
 const { includeTestsPath, parseSourceString } = parseConfig;
 const md5 = require( '../md5' );
+const { getLatestWordPressVersion } = require( '../wordpress' );
 
 /**
  * wp-env configuration.
@@ -33,7 +34,7 @@ const md5 = require( '../md5' );
  * Base-level config for any particular environment. (development/tests/etc)
  *
  * @typedef WPServiceConfig
- * @property {?WPSource}                 coreSource    The WordPress installation to load in the environment.
+ * @property {WPSource}                  coreSource    The WordPress installation to load in the environment.
  * @property {WPSource[]}                pluginSources Plugins to load in the environment.
  * @property {WPSource[]}                themeSources  Themes to load in the environment.
  * @property {number}                    port          The port to use.
@@ -68,9 +69,37 @@ module.exports = async function readConfig( configPath ) {
 		md5( configPath )
 	);
 
+	// The specified base configuration from .wp-env.json or from the local
+	// source type which was automatically detected.
+	const baseConfig =
+		( await readRawConfigFile( '.wp-env.json', configPath ) ) ||
+		( await getDefaultBaseConfig( configPath ) );
+
+	// Overriden .wp-env.json on a per-user case.
+	const overrideConfig =
+		( await readRawConfigFile(
+			'.wp-env.override.json',
+			configPath.replace( /\.wp-env\.json$/, '.wp-env.override.json' )
+		) ) || {};
+
+	const detectedLocalConfig =
+		Object.keys( { ...baseConfig, ...overrideConfig } ).length > 0;
+
+	// If there is no local WordPress version, use the latest stable version from GitHub.
+	let coreRef;
+	if ( ! overrideConfig.core && ! baseConfig.core ) {
+		const wpVersion = await getLatestWordPressVersion();
+		if ( ! wpVersion ) {
+			throw new ValidationError(
+				'Could not find the latest WordPress version. There may be a network issue.'
+			);
+		}
+		coreRef = `WordPress/WordPress#${ wpVersion }`;
+	}
+
 	// Default configuration which is overridden by .wp-env.json files.
 	const defaultConfiguration = {
-		core: null,
+		core: coreRef,
 		phpVersion: null,
 		plugins: [],
 		themes: [],
@@ -96,22 +125,6 @@ module.exports = async function readConfig( configPath ) {
 		},
 	};
 
-	// The specified base configuration from .wp-env.json or from the local
-	// source type which was automatically detected.
-	const baseConfig =
-		( await readRawConfigFile( '.wp-env.json', configPath ) ) ||
-		( await getDefaultBaseConfig( configPath ) );
-
-	// Overriden .wp-env.json on a per-user case.
-	const overrideConfig =
-		( await readRawConfigFile(
-			'.wp-env.override.json',
-			configPath.replace( /\.wp-env\.json$/, '.wp-env.override.json' )
-		) ) || {};
-
-	const detectedLocalConfig =
-		Object.keys( { ...baseConfig, ...overrideConfig } ).length > 0;
-
 	// A quick validation before merging on a service by service level allows us
 	// to check the root configuration options and provide more helpful errors.
 	validateConfig(
diff --git a/packages/env/lib/config/test/__snapshots__/config.js.snap b/packages/env/lib/config/test/__snapshots__/config.js.snap
index 4ba5e9daacea15..ad0c18e4279de7 100644
--- a/packages/env/lib/config/test/__snapshots__/config.js.snap
+++ b/packages/env/lib/config/test/__snapshots__/config.js.snap
@@ -21,7 +21,6 @@ Object {
         "WP_TESTS_EMAIL": "admin@example.org",
         "WP_TESTS_TITLE": "Test Blog",
       },
-      "coreSource": null,
       "mappings": Object {},
       "phpVersion": null,
       "pluginSources": Array [],
@@ -44,7 +43,6 @@ Object {
         "WP_TESTS_EMAIL": "admin@example.org",
         "WP_TESTS_TITLE": "Test Blog",
       },
-      "coreSource": null,
       "mappings": Object {},
       "phpVersion": null,
       "pluginSources": Array [],
diff --git a/packages/env/lib/config/test/config.js b/packages/env/lib/config/test/config.js
index fe76b87ec92325..1ca5a75d71bd79 100644
--- a/packages/env/lib/config/test/config.js
+++ b/packages/env/lib/config/test/config.js
@@ -19,6 +19,23 @@ jest.mock( 'fs', () => ( {
 	},
 } ) );
 
+// This mocks a small response with a format matching the stable-check API.
+// It makes getLatestWordPressVersion resolve to "100.0.0".
+jest.mock( 'got', () =>
+	jest.fn( ( url ) => ( {
+		json: () => {
+			if ( url === 'https://api.wordpress.org/core/stable-check/1.0/' ) {
+				return Promise.resolve( {
+					'1.0': 'insecure',
+					'99.1.1': 'outdated',
+					'100.0.0': 'latest',
+					'100.0.1': 'fancy',
+				} );
+			}
+		},
+	} ) )
+);
+
 jest.mock( '../detect-directory-type', () => jest.fn() );
 
 describe( 'readConfig', () => {
@@ -59,19 +76,38 @@ describe( 'readConfig', () => {
 			);
 			detectDirectoryType.mockImplementation( () => 'core' );
 			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource ).not.toBeNull();
+			expect( config.env.development.coreSource.type ).toBe( 'local' );
 			expect( config.env.tests.coreSource ).not.toBeNull();
 			expect( config.env.development.pluginSources ).toHaveLength( 0 );
 			expect( config.env.development.themeSources ).toHaveLength( 0 );
 		} );
 
+		it( 'should use the most recent stable WordPress version for the default core source', async () => {
+			readFile.mockImplementation( () =>
+				Promise.resolve( JSON.stringify( {} ) )
+			);
+			const config = await readConfig( '.wp-env.json' );
+
+			const expected = {
+				url: 'https://github.com/WordPress/WordPress.git',
+				type: 'git',
+				basename: 'WordPress',
+				ref: '100.0.0', // From the mock of https at the top of the file.
+			};
+
+			expect( config.env.development.coreSource ).toMatchObject(
+				expected
+			);
+			expect( config.env.tests.coreSource ).toMatchObject( expected );
+		} );
+
 		it( 'should infer a plugin config when ran from a plugin directory', async () => {
 			readFile.mockImplementation( () =>
 				Promise.reject( { code: 'ENOENT' } )
 			);
 			detectDirectoryType.mockImplementation( () => 'plugin' );
 			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource ).toBeNull();
+			expect( config.env.development.coreSource.type ).toBe( 'git' );
 			expect( config.env.development.pluginSources ).toHaveLength( 1 );
 			expect( config.env.tests.pluginSources ).toHaveLength( 1 );
 			expect( config.env.development.themeSources ).toHaveLength( 0 );
@@ -83,8 +119,8 @@ describe( 'readConfig', () => {
 			);
 			detectDirectoryType.mockImplementation( () => 'theme' );
 			const config = await readConfig( '.wp-env.json' );
-			expect( config.env.development.coreSource ).toBeNull();
-			expect( config.env.tests.coreSource ).toBeNull();
+			expect( config.env.development.coreSource.type ).toBe( 'git' );
+			expect( config.env.tests.coreSource.type ).toBe( 'git' );
 			expect( config.env.development.themeSources ).toHaveLength( 1 );
 			expect( config.env.tests.themeSources ).toHaveLength( 1 );
 			expect( config.env.development.pluginSources ).toHaveLength( 0 );
@@ -197,6 +233,11 @@ describe( 'readConfig', () => {
 			// Remove generated values which are different on other machines.
 			delete config.dockerComposeConfigPath;
 			delete config.workDirectoryPath;
+
+			// This encodes both the version of WordPress (which can change frequently)
+			// as well as the wp-env directory which is unique on every machine.
+			delete config.env.development.coreSource;
+			delete config.env.tests.coreSource;
 			expect( config ).toMatchSnapshot();
 		} );
 	} );
diff --git a/packages/env/lib/wordpress.js b/packages/env/lib/wordpress.js
index 62360b4c182e77..b1f54fb0e85d80 100644
--- a/packages/env/lib/wordpress.js
+++ b/packages/env/lib/wordpress.js
@@ -5,6 +5,7 @@ const dockerCompose = require( 'docker-compose' );
 const util = require( 'util' );
 const fs = require( 'fs' ).promises;
 const path = require( 'path' );
+const got = require( 'got' );
 
 /**
  * Promisified dependencies
@@ -246,11 +247,6 @@ async function copyCoreFiles( fromPath, toPath ) {
  * @return {string} The version of WordPress the source is for.
  */
 async function readWordPressVersion( coreSource, spinner, debug ) {
-	// No source means they're using the bleeding edge.
-	if ( coreSource === null ) {
-		return null;
-	}
-
 	const versionFilePath = path.join(
 		coreSource.path,
 		'wp-includes',
@@ -275,6 +271,24 @@ async function readWordPressVersion( coreSource, spinner, debug ) {
 	return versionMatch[ 1 ];
 }
 
+/**
+ * Returns the latest stable version of WordPress by requesting the stable-check
+ * endpoint on WordPress.org.
+ *
+ * @return {string} The latest stable version of WordPress, like "6.0.1"
+ */
+async function getLatestWordPressVersion() {
+	const versions = await got(
+		'https://api.wordpress.org/core/stable-check/1.0/'
+	).json();
+
+	for ( const [ version, status ] of Object.entries( versions ) ) {
+		if ( status === 'latest' ) {
+			return version;
+		}
+	}
+}
+
 module.exports = {
 	hasSameCoreSource,
 	checkDatabaseConnection,
@@ -282,4 +296,5 @@ module.exports = {
 	resetDatabase,
 	setupWordPressDirectories,
 	readWordPressVersion,
+	getLatestWordPressVersion,
 };
diff --git a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js
index a46eeaa400610b..bbd8503566b007 100644
--- a/packages/format-library/src/link/modal-screens/link-picker-screen.native.js
+++ b/packages/format-library/src/link/modal-screens/link-picker-screen.native.js
@@ -3,11 +3,11 @@
  */
 import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { delay } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 import { LinkPicker } from '@wordpress/components';
 
@@ -19,9 +19,12 @@ import linkSettingsScreens from './screens';
 const LinkPickerScreen = () => {
 	const navigation = useNavigation();
 	const route = useRoute();
+	const navigateToLinkTimeoutRef = useRef( null );
+	const navigateBackTimeoutRef = useRef( null );
+
 	const onLinkPicked = ( { url, title } ) => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateToLinkTimeoutRef.current = setTimeout( () => {
 			navigation.navigate( linkSettingsScreens.settings, {
 				inputValue: url,
 				text: title,
@@ -31,11 +34,18 @@ const LinkPickerScreen = () => {
 
 	const onCancel = () => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateBackTimeoutRef.current = setTimeout( () => {
 			navigation.goBack();
 		}, 100 );
 	};
 
+	useEffect( () => {
+		return () => {
+			clearTimeout( navigateToLinkTimeoutRef.current );
+			clearTimeout( navigateBackTimeoutRef.current );
+		};
+	}, [] );
+
 	const { inputValue } = route.params;
 	return useMemo( () => {
 		return (
diff --git a/packages/icons/src/icon/stories/index.js b/packages/icons/src/icon/stories/index.js
index 1cb4f2f4901b17..8fda801f23884f 100644
--- a/packages/icons/src/icon/stories/index.js
+++ b/packages/icons/src/icon/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,9 +12,16 @@ import * as icons from '../../';
 
 const { Icon: _Icon, ...availableIcons } = icons;
 
-export default { title: 'Icons/Icon', component: Icon };
+const meta = {
+	component: Icon,
+	title: 'Icons/Icon',
+	parameters: {
+		controls: { hideNoControlsWarning: true },
+	},
+};
+export default meta;
 
-export const _default = () => {
+export const Default = () => {
 	return (
 		<>
 			<div>
@@ -45,8 +52,8 @@ const LibraryExample = () => {
 		  )
 		: availableIcons;
 	return (
-		<div style={ { padding: '20px' } }>
-			<label htmlFor="filter-icon" style={ { paddingRight: '10px' } }>
+		<div style={ { padding: 20 } }>
+			<label htmlFor="filter-icon" style={ { paddingRight: 10 } }>
 				Filter Icons
 			</label>
 			<input
@@ -57,20 +64,29 @@ const LibraryExample = () => {
 				placeholder="Icon name"
 				onChange={ ( event ) => setFilter( event.target.value ) }
 			/>
-			{ Object.entries( filteredIcons ).map( ( [ name, icon ] ) => {
-				return (
-					<div
-						key={ name }
-						style={ { display: 'flex', alignItems: 'center' } }
-					>
-						<strong style={ { width: '120px' } }>{ name }</strong>
-
-						<Icon icon={ icon } />
-						<Icon icon={ icon } size={ 36 } />
-						<Icon icon={ icon } size={ 48 } />
-					</div>
-				);
-			} ) }
+			<div style={ { marginTop: 20 } }>
+				<div
+					style={ {
+						display: 'inline-grid',
+						alignItems: 'center',
+						gap: 4,
+						gridTemplateColumns: 'auto 24px 36px 48px',
+					} }
+				>
+					{ Object.entries( filteredIcons ).map(
+						( [ name, icon ] ) => {
+							return (
+								<Fragment key={ name }>
+									<strong>{ name }</strong>
+									<Icon icon={ icon } />
+									<Icon icon={ icon } size={ 36 } />
+									<Icon icon={ icon } size={ 48 } />
+								</Fragment>
+							);
+						}
+					) }
+				</div>
+			</div>
 		</div>
 	);
 };
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index e25c4b256bc12a..a967293418d5c0 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -34,6 +34,7 @@ export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
 export { default as chevronDown } from './library/chevron-down';
 export { default as chevronLeft } from './library/chevron-left';
+export { default as chevronLeftSmall } from './library/chevron-left-small';
 export { default as chevronRight } from './library/chevron-right';
 export { default as chevronRightSmall } from './library/chevron-right-small';
 export { default as chevronUp } from './library/chevron-up';
diff --git a/packages/icons/src/library/chevron-left-small.js b/packages/icons/src/library/chevron-left-small.js
new file mode 100644
index 00000000000000..aaa0e8f0218fe3
--- /dev/null
+++ b/packages/icons/src/library/chevron-left-small.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const chevronLeftSmall = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m13.1 16-3.4-4 3.4-4 1.1 1-2.6 3 2.6 3-1.1 1z" />
+	</SVG>
+);
+
+export default chevronLeftSmall;
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 164585ffcfc458..2fa2e484c85e52 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -29,6 +29,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/i18n": "file:../i18n",
+		"change-case": "^4.1.2",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
diff --git a/packages/keycodes/src/index.js b/packages/keycodes/src/index.js
index e2306d9d75d056..3acb7412032eca 100644
--- a/packages/keycodes/src/index.js
+++ b/packages/keycodes/src/index.js
@@ -12,7 +12,8 @@
 /**
  * External dependencies
  */
-import { get, mapValues, includes, capitalize, xor } from 'lodash';
+import { capitalCase } from 'change-case';
+import { get, mapValues, includes, xor } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -232,7 +233,13 @@ export const displayShortcutList = mapValues( modifiers, ( modifier ) => {
 			/** @type {string[]} */ ( [] )
 		);
 
-		const capitalizedCharacter = capitalize( character );
+		// Symbols (`,.) are removed by the default regular expression,
+		// so override the rule to allow symbols used for shortcuts.
+		// see: https://github.com/blakeembrey/change-case#options
+		const capitalizedCharacter = capitalCase( character, {
+			stripRegexp: /[^A-Z0-9`,\.]/gi,
+		} );
+
 		return [ ...modifierKeys, capitalizedCharacter ];
 	};
 } );
@@ -294,7 +301,7 @@ export const shortcutAriaLabel = mapValues( modifiers, ( modifier ) => {
 		};
 
 		return [ ...modifier( _isApple ), character ]
-			.map( ( key ) => capitalize( get( replacementKeyMap, key, key ) ) )
+			.map( ( key ) => capitalCase( get( replacementKeyMap, key, key ) ) )
 			.join( isApple ? ' ' : ' + ' );
 	};
 } );
diff --git a/packages/npm-package-json-lint-config/test/index.test.js b/packages/npm-package-json-lint-config/test/index.test.js
index 16dd989d61fd36..15733d7d0198c7 100644
--- a/packages/npm-package-json-lint-config/test/index.test.js
+++ b/packages/npm-package-json-lint-config/test/index.test.js
@@ -1,17 +1,13 @@
+/**
+ * External dependencies
+ */
+import isPlainObject from 'is-plain-obj';
+
 /**
  * Internal dependencies
  */
 import config from '../';
 
-const isPlainObject = ( obj ) => {
-	return (
-		typeof obj === 'object' &&
-		obj !== null &&
-		obj.constructor === Object &&
-		Object.prototype.toString.call( obj ) === '[object Object]'
-	);
-};
-
 describe( 'npm-package-json-lint config tests', () => {
 	it( 'should be an object', () => {
 		expect( isPlainObject( config ) ).toBeTruthy();
diff --git a/packages/prettier-config/test/index.js b/packages/prettier-config/test/index.js
index 991ed5d3bbe5e4..13b136107db884 100644
--- a/packages/prettier-config/test/index.js
+++ b/packages/prettier-config/test/index.js
@@ -1,17 +1,13 @@
+/**
+ * External dependencies
+ */
+import isPlainObject from 'is-plain-obj';
+
 /**
  * Internal dependencies
  */
 import config from '../lib/';
 
-const isPlainObject = ( obj ) => {
-	return (
-		typeof obj === 'object' &&
-		obj !== null &&
-		obj.constructor === Object &&
-		Object.prototype.toString.call( obj ) === '[object Object]'
-	);
-};
-
 describe( 'prettier config tests', () => {
 	it( 'should be an object', () => {
 		expect( isPlainObject( config ) ).toBeTruthy();
diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json
index 2a281e93dd7561..52e9a4b40be8d8 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.80.0",
+	"version": "1.81.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
index 31ecbfe912f690..7185ce82c07979 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt
@@ -55,6 +55,8 @@ data class GutenbergProps @JvmOverloads constructor(
                     ?.let { putSerializable(PROP_GALLERY_WITH_IMAGE_BLOCKS, it) }
             theme.getSerializable(PROP_QUOTE_BLOCK_V2)
                     ?.let { putSerializable(PROP_QUOTE_BLOCK_V2, it) }
+            theme.getSerializable(PROP_LIST_BLOCK_V2)
+                    ?.let { putSerializable(PROP_LIST_BLOCK_V2, it) }
         }
     }
 
@@ -98,6 +100,7 @@ data class GutenbergProps @JvmOverloads constructor(
         private const val PROP_IS_FSE_THEME = "isFSETheme"
         private const val PROP_GALLERY_WITH_IMAGE_BLOCKS = "galleryWithImageBlocks"
         private const val PROP_QUOTE_BLOCK_V2 = "quoteBlockV2"
+        private const val PROP_LIST_BLOCK_V2 = "listBlockV2"
 
         const val PROP_LOCALE = "locale"
         const val PROP_CAPABILITIES = "capabilities"
diff --git a/packages/react-native-bridge/ios/Gutenberg.swift b/packages/react-native-bridge/ios/Gutenberg.swift
index f502eee257e36b..da327fb11ef7ef 100644
--- a/packages/react-native-bridge/ios/Gutenberg.swift
+++ b/packages/react-native-bridge/ios/Gutenberg.swift
@@ -210,6 +210,10 @@ public class Gutenberg: UIResponder {
             settingsUpdates["quoteBlockV2"] = quoteBlockV2
         }
 
+        if let listBlockV2 = editorSettings?.listBlockV2 {
+            settingsUpdates["listBlockV2"] = listBlockV2
+        }
+
         if let rawStyles = editorSettings?.rawStyles {
             settingsUpdates["rawStyles"] = rawStyles
         }
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
index 09b57fc690f242..7866e048fe5e41 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift
@@ -84,6 +84,7 @@ public protocol GutenbergEditorSettings {
     var isFSETheme: Bool { get }
     var galleryWithImageBlocks: Bool { get }
     var quoteBlockV2: Bool { get }
+    var listBlockV2: Bool { get }
     var rawStyles: String? { get }
     var rawFeatures: String? { get }
     var colors: [[String: String]]? { get }
diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json
index 29201ac95e3224..eafbeb6b5d91e3 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.80.0",
+	"version": "1.81.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 44543b53e974ee..cc3ebfda6d52db 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,12 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+## 1.81.0
+-   [***] List block V2 [#42702]
+
+## 1.80.1
+-   [*] Image - Workaround for Android and orientation changes [#42900]
+
 ## 1.80.0
 -   [*] Add React Native FastImage [#42009]
 -   [*] Block inserter displays block collections [#42405]
diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle
index d2488b71822215..e4b5d092724e26 100644
--- a/packages/react-native-editor/android/app/build.gradle
+++ b/packages/react-native-editor/android/app/build.gradle
@@ -170,16 +170,17 @@ android {
 }
 
 dependencies {
+    def packageJson = '../../package.json'
+
     implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", {
         exclude group: 'org.wordpress', module: 'utils'
     })
     implementation 'androidx.appcompat:appcompat:1.2.0'
     //noinspection GradleDynamicVersion
-    implementation "com.facebook.react:react-native:+"  // From node_modules
+    implementation "com.facebook.react:react-native:${extractPackageVersion(packageJson, 'react-native', 'dependencies')}" // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
 
-    def packageJson = '../../package.json'
     implementation "org.wordpress-mobile:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}"
diff --git a/packages/react-native-editor/android/gradle.properties b/packages/react-native-editor/android/gradle.properties
index 28aa4856737ee9..094d0de62d995d 100644
--- a/packages/react-native-editor/android/gradle.properties
+++ b/packages/react-native-editor/android/gradle.properties
@@ -11,6 +11,7 @@
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx10248m -XX:MaxPermSize=256m
 # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+org.gradle.jvmargs=-Xmx6g -XX:+HeapDumpOnOutOfMemoryError
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock
index 49985a3614dacd..bf9721cb70c0af 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.80.0):
+  - Gutenberg (1.81.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.80.0):
+  - RNTAztecView (1.81.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: 6ccd799c85433d1d1a0e0ecaccebe77d410acb43
+  Gutenberg: d54a8223fceb4f08381e7238597449bb70c9abc8
   libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
   RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9
   RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a
@@ -569,7 +569,7 @@ SPEC CHECKSUMS:
   RNReanimated: b413cc7aa3e2a740d9804cda3a9396a68f9eea7f
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0
-  RNTAztecView: 7326c35cf5ebef31470b95d618ef473ea8f8c63d
+  RNTAztecView: b7ab8acc090ef19f02cefecab9dfc896241c897b
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
index 5f056657908eb2..dc246210b01e5b 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.80.0",
+	"version": "1.81.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-native-editor/src/setup.js b/packages/react-native-editor/src/setup.js
index 19d8e6d06de6c8..47c9bd501386f5 100644
--- a/packages/react-native-editor/src/setup.js
+++ b/packages/react-native-editor/src/setup.js
@@ -58,9 +58,12 @@ const gutenbergSetup = () => {
 
 const setupInitHooks = () => {
 	addAction( 'native.pre-render', 'core/react-native-editor', ( props ) => {
-		registerBlocks();
-
 		const capabilities = props.capabilities ?? {};
+		const blocksFlags = {
+			__experimentalEnableListBlockV2: props?.listBlockV2,
+		};
+
+		registerBlocks( blocksFlags );
 
 		// Unregister non-supported blocks by capabilities
 		if (
@@ -118,12 +121,12 @@ const setupInitHooks = () => {
 };
 
 let blocksRegistered = false;
-const registerBlocks = () => {
+const registerBlocks = ( blocksFlags ) => {
 	if ( blocksRegistered ) {
 		return;
 	}
 
-	registerCoreBlocks();
+	registerCoreBlocks( blocksFlags );
 
 	blocksRegistered = true;
 };
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index f99a2f87d8b753..321d66b563649e 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -30,6 +30,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"is-plain-obj": "^4.1.0",
 		"is-promise": "^4.0.0",
 		"lodash": "^4.17.21",
 		"rungen": "^0.3.2"
diff --git a/packages/redux-routine/src/is-action.js b/packages/redux-routine/src/is-action.js
index bcabab4e07a88b..cdd59c8cd63d25 100644
--- a/packages/redux-routine/src/is-action.js
+++ b/packages/redux-routine/src/is-action.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isPlainObject } from 'lodash';
+import isPlainObject from 'is-plain-obj';
 
 /* eslint-disable jsdoc/valid-types */
 /**
diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
index 48970ed4abff82..8762729a8f2261 100644
--- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
+++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -115,7 +115,7 @@ export default function ReusableBlockConvertButton( {
 							setIsModalOpen( true );
 						} }
 					>
-						{ __( 'Add to Reusable blocks' ) }
+						{ __( 'Create Reusable block' ) }
 					</MenuItem>
 					{ isModalOpen && (
 						<Modal
diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
index ce6ae2327cf69e..2db89998a9d76c 100644
--- a/packages/rich-text/src/component/index.native.js
+++ b/packages/rich-text/src/component/index.native.js
@@ -1048,6 +1048,7 @@ export class RichText extends Component {
 			selectionStart,
 			selectionEnd,
 			disableSuggestions,
+			containerWidth,
 		} = this.props;
 		const { currentFontSize } = this.state;
 
@@ -1124,11 +1125,16 @@ export class RichText extends Component {
 			maxWidth && this.state.width && maxWidth - this.state.width < 10
 				? maxWidth
 				: this.state.width;
-		const containerStyles = style?.padding &&
-			style?.backgroundColor && {
-				padding: style.padding,
-				backgroundColor: style.backgroundColor,
-			};
+		const containerStyles = [
+			style?.padding &&
+				style?.backgroundColor && {
+					padding: style.padding,
+					backgroundColor: style.backgroundColor,
+				},
+			containerWidth && {
+				width: containerWidth,
+			},
+		];
 
 		const EditableView = ( props ) => {
 			this.customEditableOnKeyDown = props?.onKeyDown;
diff --git a/packages/rich-text/src/test/__snapshots__/index.native.js.snap b/packages/rich-text/src/test/__snapshots__/index.native.js.snap
index 49c9a7dad92da9..92e73606aea8fa 100644
--- a/packages/rich-text/src/test/__snapshots__/index.native.js.snap
+++ b/packages/rich-text/src/test/__snapshots__/index.native.js.snap
@@ -7,7 +7,14 @@ exports[`<RichText/> Font Size renders component with style and font size 1`] =
 `;
 
 exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+    ]
+  }
+>
   <TextInput
     accessibilityLabel="Text input. Empty"
     activeFormats={Array []}
@@ -36,7 +43,14 @@ exports[`<RichText/> Font Size should update the font size when style prop with
 `;
 
 exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+    ]
+  }
+>
   <TextInput
     accessibilityLabel="Text input. Empty"
     activeFormats={Array []}
diff --git a/packages/scripts/README.md b/packages/scripts/README.md
index db354c01a0e545..11587e0ae59ab7 100644
--- a/packages/scripts/README.md
+++ b/packages/scripts/README.md
@@ -410,8 +410,8 @@ This is how you execute those scripts using the presented setup:
 -   `npm run test:e2e:help` - prints all available options to configure e2e test runner.
 -   `npm run test-e2e -- --puppeteer-interactive` - runs all e2e tests interactively.
 -   `npm run test-e2e FILE_NAME -- --puppeteer-interactive` - runs one test file interactively.
--   `npm run test-e2e:watch -- --puppeteer-interactive` - runs all tests interactively and watch for changes.
--   `npm run test-e2e:debug` - runs all tests interactively and enables [debugging tests](#debugging-e2e-tests).
+-   `npm run test:e2e:watch -- --puppeteer-interactive` - runs all tests interactively and watch for changes.
+-   `npm run test:e2e:debug` - runs all tests interactively and enables [debugging tests](#debugging-e2e-tests).
 
 Jest will look for test files with any of the following popular naming conventions:
 
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 4a2990c6b5f669..03ae933f24c909 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -2,6 +2,158 @@
 
 The Style Engine powering global styles and block customizations.
 
+## Backend API
+
+### wp_style_engine_get_styles()
+
+Global public function to generate styles from a single style object, e.g., the value of
+a [block's attributes.style object](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles)
+or
+the [top level styles in theme.json](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/)
+.
+
+_Parameters_
+
+-   _$block_styles_ `array` A block's `attributes.style` object or the top level styles in theme.json
+-   _$options_ `array<string|boolean>` An array of options to determine the output.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
+        global-styles'. Default is 'block-supports'.
+    -   _enqueue_ `boolean` When `true` will attempt to store and enqueue for rendering in a `style` tag on the site frontend.
+    -   _convert_vars_to_classnames_ `boolean` Whether to skip converting CSS var:? values to var( --wp--preset--\* )
+        values. Default is `false`.
+    -   _selector_ `string` When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`,
+        otherwise a concatenated string of properties and values.
+
+_Returns_
+`array<string|array>|null`
+
+```php
+array(
+    'css'           => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
+    'declarations'  => (array) An array of property/value pairs representing parsed CSS declarations.
+    'classnames'    => (string) Classnames separated by a space.
+);
+```
+
+It will return compiled CSS declarations for inline styles, or, where a selector is provided, a complete CSS rule.
+
+To enqueue a style for rendering in the site's frontend, the `$options` array requires the following:
+
+1.  **selector (string)** - this is the CSS selector for your block style CSS declarations.
+2.  **context (string)** - this tells the style engine where to store the styles. Styles in the same context will be
+    batched together and printed in the same HTML style tag. The default is `'block-supports'`.
+3.  **enqueue (boolean)** - tells the style engine to store the styles.
+
+`wp_style_engine_get_styles` will return the compiled CSS and CSS declarations array.
+
+#### Usage
+
+```php
+$block_styles =  array(
+     'spacing' => array( 'padding' => '100px' )
+);
+$styles = wp_style_engine_get_styles(
+    $block_styles,
+    array(
+        'selector' => '.a-selector',
+        'context'  => 'block-supports',
+        'enqueue'  => true,
+    )
+);
+print_r( $styles );
+
+/*
+array(
+    'css'                 => '.a-selector{padding:10px}'
+    'declarations'  => array( 'padding' => '100px' )
+)
+*/
+```
+
+### wp_style_engine_get_stylesheet_from_css_rules()
+
+Use this function to compile and return a stylesheet for any CSS rules. The style engine will automatically merge declarations and combine selectors.
+
+This function acts as a CSS compiler, but will also enqueue styles for rendering where `enqueue` and `context` strings are passed in the options.
+
+_Parameters_
+
+-   _$css_rules_ `array<array>`
+-   _$options_ `array<string|boolean>` An array of options to determine the output.
+    -   _context_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or '
+        global-styles'. Default is 'block-supports'.
+    -   _enqueue_ `boolean` When `true` will store using the `context` value as a key.
+
+_Returns_
+`string` A compiled CSS string based on `$css_rules`.
+
+#### Usage
+
+```php
+$styles = array(
+    array(
+        'selector'.       => '.wp-pumpkin',
+        'declarations' => array( 'color' => 'orange' )
+    ),
+    array(
+        'selector'.       => '.wp-tomato',
+        'declarations' => array( 'color' => 'red' )
+    ),
+    array(
+        'selector'.       => '.wp-tomato',
+        'declarations' => array( 'padding' => '100px' )
+    ),
+    array(
+        'selector'.       => '.wp-kumquat',
+        'declarations' => array( 'color' => 'orange' )
+    ),
+);
+
+$stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+    $styles,
+    array(
+        'context'  => 'block-supports', // Indicates that these styles should be stored with block supports CSS.
+        'enqueue'  => true, // Render the styles for output.
+    )
+);
+print_r( $stylesheet ); // .wp-pumpkin, .wp-kumquat {color:orange}.wp-tomato{color:red;padding:100px}
+```
+
+### wp_style_engine_get_stylesheet_from_store()
+
+Returns compiled CSS from a store, if found.
+
+_Parameters_
+
+-   _$store_key_ `string` An identifier describing the origin of the style object, e.g., 'block-supports' or ' global-styles'. Default is 'block-supports'.
+
+_Returns_
+`string` A compiled CSS string from the stored CSS rules.
+
+#### Usage
+
+```php
+// First register some styles.
+$styles = array(
+    array(
+        'selector'.       => '.wp-apple',
+        'declarations' => array( 'color' => 'green' )
+    ),
+);
+
+$stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+    $styles,
+    array(
+        'context'  => 'fruit-styles',
+        'enqueue'  => true,
+    )
+);
+
+// Later, fetch compiled rules from store.
+$stylesheet = gutenberg_style_engine_get_stylesheet_from_store( 'fruit-styles' );
+print_r( $stylesheet ); // .wp-apple{color:green;}
+```
+
 ## Installation (JS only)
 
 Install the module
@@ -10,13 +162,18 @@ Install the module
 npm install @wordpress/style-engine --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has
+limited or no support for such language features and APIs, you should
+include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill)
+in your code._
 
 ## Important
 
-This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json.
+This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a
+style object that is consistent between: backend, frontend, block style object and theme.json.
 
-Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get there, the following tasks need to be completed:
+Because this package is experimental and still in development it does not yet generate a `wp.styleEngine` global. To get
+there, the following tasks need to be completed:
 
 **TODO List:**
 
@@ -26,7 +183,8 @@ Because this package is experimental and still in development it does not yet ge
 -   Support generating styles in the backend (block supports and theme.json stylesheet). (Ongoing)
 -   Refactor all block styles to use the style engine server side. (Ongoing)
 -   Consolidate global and block style rendering and enqueuing
--   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific attributes).
+-   Refactor all blocks to consistently use the "style" attribute for all customizations (get rid of the preset specific
+    attributes).
 
 See [Tracking: Add a Style Engine to manage rendering block styles #38167](https://github.com/WordPress/gutenberg/issues/38167)
 
diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
index fe686edddaac06..edd755f163d4a3 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -34,9 +34,6 @@ class WP_Style_Engine_CSS_Declarations {
 	 * @param array $declarations An array of declarations (property => value pairs).
 	 */
 	public function __construct( $declarations = array() ) {
-		if ( empty( $declarations ) ) {
-			return;
-		}
 		$this->add_declarations( $declarations );
 	}
 
@@ -94,12 +91,12 @@ public function add_declarations( $declarations ) {
 	/**
 	 * Remove multiple declarations.
 	 *
-	 * @param array $declarations An array of properties.
+	 * @param array $properties An array of properties.
 	 *
 	 * @return void
 	 */
-	public function remove_declarations( $declarations = array() ) {
-		foreach ( $declarations as $property ) {
+	public function remove_declarations( $properties = array() ) {
+		foreach ( $properties as $property ) {
 			$this->remove_declaration( $property );
 		}
 	}
@@ -113,18 +110,39 @@ public function get_declarations() {
 		return $this->declarations;
 	}
 
+	/**
+	 * Filters a CSS property + value pair.
+	 *
+	 * @param string $property The CSS property.
+	 * @param string $value    The value to be filtered.
+	 * @param string $spacer   The spacer between the colon and the value. Defaults to an empty string.
+	 *
+	 * @return string The filtered declaration as a single string.
+	 */
+	protected static function filter_declaration( $property, $value, $spacer = '' ) {
+		return safecss_filter_attr( "{$property}:{$spacer}{$value}" );
+	}
+
 	/**
 	 * Filters and compiles the CSS declarations.
 	 *
+	 * @param boolean $should_prettify Whether to add spacing, new lines and indents.
+	 * @param number  $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
+	 *
 	 * @return string The CSS declarations.
 	 */
-	public function get_declarations_string() {
+	public function get_declarations_string( $should_prettify = false, $indent_count = 0 ) {
 		$declarations_array  = $this->get_declarations();
 		$declarations_output = '';
+		$indent              = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
+		$suffix              = $should_prettify ? ' ' : '';
+		$suffix              = $should_prettify && $indent_count > 0 ? "\n" : $suffix;
+		$spacer              = $should_prettify ? ' ' : '';
+
 		foreach ( $declarations_array as $property => $value ) {
-			$filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
+			$filtered_declaration = static::filter_declaration( $property, $value, $spacer );
 			if ( $filtered_declaration ) {
-				$declarations_output .= $filtered_declaration . '; ';
+				$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
 			}
 		}
 		return rtrim( $declarations_output );
diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
index 5429b282f328db..dbaf027057b3db 100644
--- a/packages/style-engine/class-wp-style-engine-css-rule.php
+++ b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -51,14 +51,10 @@ public function __construct( $selector = '', $declarations = array() ) {
 	 *
 	 * @param string $selector The CSS selector.
 	 *
-	 * @return WP_Style_Engine_CSS_Rule|void Returns the object to allow chaining of methods.
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
 	 */
 	public function set_selector( $selector ) {
-		if ( empty( $selector ) ) {
-			return;
-		}
 		$this->selector = $selector;
-
 		return $this;
 	}
 
@@ -107,9 +103,23 @@ public function get_selector() {
 	/**
 	 * Get the CSS.
 	 *
+	 * @param boolean $should_prettify Whether to add spacing, new lines and indents.
+	 * @param number  $indent_count    The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
+	 *
 	 * @return string
 	 */
-	public function get_css() {
-		return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
+	public function get_css( $should_prettify = false, $indent_count = 0 ) {
+		$rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
+		$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
+		$new_line            = $should_prettify ? "\n" : '';
+		$space               = $should_prettify ? ' ' : '';
+		$selector            = $should_prettify ? str_replace( ',', ",\n", $this->get_selector() ) : $this->get_selector();
+		$css_declarations    = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
+
+		if ( empty( $css_declarations ) ) {
+			return '';
+		}
+
+		return "{$rule_indent}{$selector}{$space}{{$new_line}{$css_declarations}{$new_line}{$rule_indent}}";
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
index d3cc079afe6e96..c7e8ab2e2b2d6c 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules-store.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -27,7 +27,6 @@ class WP_Style_Engine_CSS_Rules_Store {
 	 */
 	protected static $stores = array();
 
-
 	/**
 	 * The store name.
 	 *
@@ -114,7 +113,6 @@ public function get_all_rules() {
 	 * @return WP_Style_Engine_CSS_Rule|null Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
 	 */
 	public function add_rule( $selector ) {
-
 		$selector = trim( $selector );
 
 		// Bail early if there is no selector.
diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php
index 088513e83284d1..fe2309b55f4c0a 100644
--- a/packages/style-engine/class-wp-style-engine-processor.php
+++ b/packages/style-engine/class-wp-style-engine-processor.php
@@ -63,21 +63,35 @@ public function add_rules( $css_rules ) {
 	/**
 	 * Get the CSS rules as a string.
 	 *
+	 * @param array $options array(
+	 *    'optimize' => (boolean) Whether to optimize the CSS output, e.g., combine rules.
+	 *    'prettify' => (boolean) Whether to add new lines to output.
+	 * );.
+	 *
 	 * @return string The computed CSS.
 	 */
-	public function get_css() {
+	public function get_css( $options = array() ) {
+		$defaults = array(
+			'optimize' => true,
+			'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
+		);
+		$options  = wp_parse_args( $options, $defaults );
+
 		// If we have stores, get the rules from them.
 		foreach ( $this->stores as $store ) {
 			$this->add_rules( $store->get_all_rules() );
 		}
 
 		// Combine CSS selectors that have identical declarations.
-		$this->combine_rules_selectors();
+		if ( true === $options['optimize'] ) {
+			$this->combine_rules_selectors();
+		}
 
 		// Build the CSS.
 		$css = '';
 		foreach ( $this->css_rules as $rule ) {
-			$css .= $rule->get_css();
+			$css .= $rule->get_css( $options['prettify'] );
+			$css .= $options['prettify'] ? "\n" : '';
 		}
 		return $css;
 	}
@@ -114,7 +128,8 @@ private function combine_rules_selectors() {
 				unset( $this->css_rules[ $key ] );
 			}
 			// Create a new rule with the combined selectors.
-			$this->css_rules[ implode( ',', $duplicates ) ] = new WP_Style_Engine_CSS_Rule( implode( ',', $duplicates ), $declarations );
+			$duplicate_selectors                     = implode( ',', $duplicates );
+			$this->css_rules[ $duplicate_selectors ] = new WP_Style_Engine_CSS_Rule( $duplicate_selectors, $declarations );
 		}
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 33533fc872f699..a7fdf38a492c81 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -23,13 +23,6 @@
  * @access private
  */
 class WP_Style_Engine {
-	/**
-	 * Container for the main instance of the class.
-	 *
-	 * @var WP_Style_Engine|null
-	 */
-	private static $instance = null;
-
 	/**
 	 * Style definitions that contain the instructions to
 	 * parse/output valid Gutenberg styles from a block's attributes.
@@ -271,34 +264,7 @@ protected static function is_valid_style_value( $style_value ) {
 			return true;
 		}
 
-		if ( empty( $style_value ) ) {
-			return false;
-		}
-
-		return true;
-	}
-
-	/**
-	 * Private constructor to prevent instantiation.
-	 */
-	private function __construct() {
-		// Register the hook callback to render stored styles to the page.
-		static::register_actions( array( __CLASS__, 'process_and_enqueue_stored_styles' ) );
-	}
-
-	/**
-	 * Utility method to retrieve the main instance of the class.
-	 *
-	 * The instance will be created if it does not exist yet.
-	 *
-	 * @return WP_Style_Engine The main instance.
-	 */
-	public static function get_instance() {
-		if ( null === static::$instance ) {
-			static::$instance = new static();
-		}
-
-		return static::$instance;
+		return ! empty( $style_value );
 	}
 
 	/**
@@ -328,53 +294,6 @@ public static function get_store( $store_key ) {
 		return WP_Style_Engine_CSS_Rules_Store::get_store( $store_key );
 	}
 
-	/**
-	 * Taken from gutenberg_enqueue_block_support_styles()
-	 *
-	 * This function takes care of registering hooks to add inline styles
-	 * in the proper place, depending on the theme in use.
-	 *
-	 * 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.
-	 *
-	 * @param callable $callable A user-defined callback function for a WordPress hook.
-	 * @param int      $priority To set the priority for the add_action.
-	 *
-	 * @see gutenberg_enqueue_block_support_styles()
-	 */
-	protected static function register_actions( $callable, $priority = 10 ) {
-		if ( ! $callable ) {
-			return;
-		}
-		add_action( 'wp_enqueue_scripts', $callable );
-		add_action(
-			wp_is_block_theme() ? 'wp_head' : 'wp_footer',
-			$callable,
-			$priority
-		);
-	}
-
-	/**
-	 * Fetches, processes and compiles stored styles, then renders them to the page.
-	 */
-	public static function process_and_enqueue_stored_styles() {
-		$stores = WP_Style_Engine_CSS_Rules_Store::get_stores();
-
-		foreach ( $stores as $key => $store ) {
-			$processor = new WP_Style_Engine_Processor();
-			$processor->add_store( $store );
-			$styles = $processor->get_css();
-
-			if ( ! empty( $styles ) ) {
-				wp_register_style( $key, false, array(), true, true );
-				wp_add_inline_style( $key, $styles );
-				wp_enqueue_style( $key );
-			}
-		}
-	}
-
 	/**
 	 * Returns classnames and CSS based on the values in a styles object.
 	 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
@@ -491,6 +410,11 @@ protected static function get_css_declarations( $style_value, $style_definition,
 		// If the input contains an array, assume box model-like properties
 		// for styles such as margins and padding.
 		if ( is_array( $style_value ) ) {
+			// Bail out early if the `'individual'` property is not defined.
+			if ( ! isset( $style_property_keys['individual'] ) ) {
+				return $css_declarations;
+			}
+
 			foreach ( $style_value as $key => $value ) {
 				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
 					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
@@ -575,6 +499,7 @@ public static function compile_css( $css_declarations, $css_selector ) {
 			return $css_rule->get_css();
 		}
 		$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
+
 		return $css_declarations->get_declarations_string();
 	}
 
@@ -605,18 +530,18 @@ public static function compile_stylesheet_from_css_rules( $css_rules ) {
  *
  * @access public
  *
- * @param array         $block_styles The style object.
- * @param array<string> $options      array(
+ * @param array                 $block_styles The style object.
+ * @param array<string|boolean> $options      array(
  *     'context'                    => (string) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
  *     'enqueue'                    => (boolean) When `true` will attempt to store and enqueue for rendering on the frontend.
  *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
  *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
  * );.
  *
- * @return array<string>|null array(
- *     'css'           => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
- *     'declarations'  => (array) An array of property/value pairs representing parsed CSS declarations.
- *     'classnames'    => (string) Classnames separated by a space.
+ * @return array<string|array>|null array(
+ *     'css'          => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
+ *     'declarations' => (array) An array of property/value pairs representing parsed CSS declarations.
+ *     'classnames'   => (string) Classnames separated by a space.
  * );
  */
 function wp_style_engine_get_styles( $block_styles, $options = array() ) {
@@ -630,13 +555,12 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
 		'enqueue'                    => false,
 	);
 
-	$style_engine  = WP_Style_Engine::get_instance();
 	$options       = wp_parse_args( $options, $defaults );
 	$parsed_styles = null;
 
 	// Block supports styles.
 	if ( 'block-supports' === $options['context'] ) {
-		$parsed_styles = $style_engine::parse_block_styles( $block_styles, $options );
+		$parsed_styles = WP_Style_Engine::parse_block_styles( $block_styles, $options );
 	}
 
 	// Output.
@@ -647,10 +571,10 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
 	}
 
 	if ( ! empty( $parsed_styles['declarations'] ) ) {
-		$styles_output['css']          = $style_engine::compile_css( $parsed_styles['declarations'], $options['selector'] );
+		$styles_output['css']          = WP_Style_Engine::compile_css( $parsed_styles['declarations'], $options['selector'] );
 		$styles_output['declarations'] = $parsed_styles['declarations'];
 		if ( true === $options['enqueue'] ) {
-			$style_engine::store_css_rule( $options['context'], $options['selector'], $parsed_styles['declarations'] );
+			WP_Style_Engine::store_css_rule( $options['context'], $options['selector'], $parsed_styles['declarations'] );
 		}
 	}
 
@@ -661,64 +585,46 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) {
 	return array_filter( $styles_output );
 }
 
-/**
- * Global public interface method to register styles to be enqueued and rendered.
- *
- * @access public
- *
- * @param string $store_key A valid store key.
- * @param array  $css_rules array(
- *     'selector'         => (string) A CSS selector.
- *     'declarations' => (boolean) An array of CSS definitions, e.g., array( "$property" => "$value" ).
- * );.
- *
- * @return WP_Style_Engine_CSS_Rules_Store|null.
- */
-function wp_style_engine_add_to_store( $store_key, $css_rules = array() ) {
-	if ( ! class_exists( 'WP_Style_Engine' ) || ! $store_key ) {
-		return null;
-	}
-
-	// Get instance here to ensure that we register hooks to enqueue stored styles.
-	$style_engine = WP_Style_Engine::get_instance();
-
-	if ( empty( $css_rules ) ) {
-		return $style_engine::get_store( $store_key );
-	}
-
-	foreach ( $css_rules as $css_rule ) {
-		if ( empty( $css_rule['selector'] ) || empty( $css_rule['declarations'] ) ) {
-			continue;
-		}
-		$style_engine::store_css_rule( $store_key, $css_rule['selector'], $css_rule['declarations'] );
-	}
-	return $style_engine::get_store( $store_key );
-}
-
 /**
  * Returns compiled CSS from a collection of selectors and declarations.
  * This won't add to any store, but is useful for returning a compiled style sheet from any CSS selector + declarations combos.
  *
  * @access public
  *
- * @param array $css_rules array(
- *     'selector'     => (string) A CSS selector.
- *     'declarations' => (boolean) An array of CSS definitions, e.g., array( "$property" => "$value" ).
+ * @param array<array>  $css_rules array(
+ *      array(
+ *          'selector'    => (string) A CSS selector.
+ *          declarations' => (boolean) An array of CSS definitions, e.g., array( "$property" => "$value" ).
+ *      )
+ *  );.
+ * @param array<string> $options array(
+ *     'context' => (string) An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is 'block-supports'.
+ *     'enqueue' => (boolean) When `true` will attempt to store and enqueue for rendering on the frontend.
  * );.
  *
  * @return string A compiled CSS string.
  */
-function wp_style_engine_get_stylesheet_from_css_rules( $css_rules = array() ) {
-	if ( ! class_exists( 'WP_Style_Engine' ) ) {
+function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = array() ) {
+	if ( ! class_exists( 'WP_Style_Engine' ) || empty( $css_rules ) ) {
 		return '';
 	}
 
+	$defaults         = array(
+		'context' => 'block-supports',
+		'enqueue' => false,
+	);
+	$options          = wp_parse_args( $options, $defaults );
 	$css_rule_objects = array();
 
 	foreach ( $css_rules as $css_rule ) {
 		if ( empty( $css_rule['selector'] ) || empty( $css_rule['declarations'] ) || ! is_array( $css_rule['declarations'] ) ) {
 			continue;
 		}
+
+		if ( true === $options['enqueue'] ) {
+			WP_Style_Engine::store_css_rule( $options['context'], $css_rule['selector'], $css_rule['declarations'] );
+		}
+
 		$css_rule_objects[] = new WP_Style_Engine_CSS_Rule( $css_rule['selector'], $css_rule['declarations'] );
 	}
 
@@ -728,3 +634,22 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules = array() ) {
 
 	return WP_Style_Engine::compile_stylesheet_from_css_rules( $css_rule_objects );
 }
+
+/**
+ * Returns compiled CSS from a store, if found.
+ *
+ * @access public
+ *
+ * @param string $store_key A valid store key.
+ *
+ * @return string A compiled CSS string.
+ */
+function wp_style_engine_get_stylesheet_from_store( $store_key ) {
+	if ( ! class_exists( 'WP_Style_Engine' ) || empty( $store_key ) ) {
+		return '';
+	}
+
+	$store = WP_Style_Engine::get_store( $store_key );
+
+	return WP_Style_Engine::compile_stylesheet_from_css_rules( $store->get_all_rules() );
+}
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
index f093a496d538a7..948fbcae7f1025 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
@@ -84,24 +84,102 @@ public function test_generate_css_declarations_string() {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: red; border-top-left-radius: 99px; text-decoration: underline;',
+			'color:red;border-top-left-radius:99px;text-decoration:underline;',
 			$css_declarations->get_declarations_string()
 		);
 	}
 
+	/**
+	 * Should compile css declarations into a prettified css declarations block string.
+	 */
+	public function test_generate_prettified_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: red; border-top-left-radius: 99px; text-decoration: underline;',
+			$css_declarations->get_declarations_string( true )
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a prettified and indented css declarations block string.
+	 */
+	public function test_generate_prettified_with_indent_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'	color: red;
+	border-top-left-radius: 99px;
+	text-decoration: underline;',
+			$css_declarations->get_declarations_string( true, 1 )
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a css declarations block string.
+	 */
+	public function test_generate_prettified_with_more_indents_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'		color: red;
+		border-top-left-radius: 99px;
+		text-decoration: underline;',
+			$css_declarations->get_declarations_string( true, 2 )
+		);
+	}
+
 	/**
 	 * Should escape values and run the CSS through safecss_filter_attr.
 	 */
 	public function test_remove_unsafe_properties_and_values() {
 		$input_declarations = array(
-			'color'        => '<red/>',
+			'color'        => 'url("https://wordpress.org")',
 			'margin-right' => '10em',
 			'potato'       => 'uppercase',
 		);
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: &lt;red/&gt;; margin-right: 10em;',
+			'margin-right:10em;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+
+	/**
+	 * Should allow calc, clamp, min, max, and minmax CSS functions.
+	 */
+	public function test_allow_particular_css_functions() {
+		$input_declarations = array(
+			'background'       => 'var(--wp--preset--color--primary, 10px)', // Simple var().
+			'font-size'        => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
+			'width'            => 'min(150vw, 100px)',
+			'min-width'        => 'max(150vw, 100px)',
+			'max-width'        => 'minmax(400px, 50%)',
+			'padding'          => 'calc(80px * -1)',
+			'background-image' => 'url("https://wordpress.org")',
+			'line-height'      => 'url("https://wordpress.org")',
+			'margin'           => 'illegalfunction(30px)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");',
 			$css_declarations->get_declarations_string()
 		);
 	}
@@ -118,13 +196,13 @@ public function test_remove_declaration() {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: tomato; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			'color:tomato;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 
 		$css_declarations->remove_declaration( 'color' );
 		$this->assertSame(
-			'margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 	}
@@ -141,13 +219,13 @@ public function test_remove_declarations() {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: cucumber; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			'color:cucumber;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 
 		$css_declarations->remove_declarations( array( 'color', 'margin' ) );
 		$this->assertSame(
-			'font-family: Happy Font serif;',
+			'font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 	}
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
index 80547d998fb876..06ccc003e7cda7 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
@@ -27,7 +27,7 @@ public function test_instantiate_with_selector_and_rules() {
 
 		$this->assertSame( $selector, $css_rule->get_selector() );
 
-		$expected = "$selector {{$css_declarations->get_declarations_string()}}";
+		$expected = "$selector{{$css_declarations->get_declarations_string()}}";
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
@@ -45,12 +45,12 @@ public function test_dedupe_properties_in_rules() {
 		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
 		$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );
 
-		$expected = '.taggart {font-size: 4px;}';
+		$expected = '.taggart{font-size:4px;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should add declarations.
 	 */
 	public function test_add_declarations() {
 		// Declarations using a WP_Style_Engine_CSS_Declarations object.
@@ -60,12 +60,12 @@ public function test_add_declarations() {
 		$css_rule                   = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
 		$css_rule->add_declarations( $some_more_css_declarations );
 
-		$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
+		$expected = '.hill-street-blues{margin-top:10px;font-size:1rem;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should set selector.
 	 */
 	public function test_set_selector() {
 		$selector = '.taggart';
@@ -79,7 +79,7 @@ public function test_set_selector() {
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should generate CSS rules.
 	 */
 	public function test_get_css() {
 		$selector           = '.chips';
@@ -89,8 +89,39 @@ public function test_get_css() {
 		);
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
-		$expected           = "$selector {{$css_declarations->get_declarations_string()}}";
+		$expected           = "$selector{{$css_declarations->get_declarations_string()}}";
 
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
+
+	/**
+	 * Should return empty string with no declarations.
+	 */
+	public function test_get_css_no_declarations() {
+		$selector           = '.holmes';
+		$input_declarations = array();
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+
+		$this->assertSame( '', $css_rule->get_css() );
+	}
+
+	/**
+	 * Should generate prettified CSS rules.
+	 */
+	public function test_get_prettified_css() {
+		$selector           = '.baptiste';
+		$input_declarations = array(
+			'margin-left' => '0',
+			'font-family' => 'Detective Sans',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+		$expected           = '.baptiste {
+	margin-left: 0;
+	font-family: Detective Sans;
+}';
+
+		$this->assertSame( $expected, $css_rule->get_css( true ) );
+	}
 }
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
index 9fe664752e4bff..b9511727132a12 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
@@ -85,7 +85,7 @@ public function test_add_rule() {
 		$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
 		$selector      = '.wp-block-sauce a:hover';
 		$store_rule    = $new_pie_store->add_rule( $selector );
-		$expected      = "$selector {}";
+		$expected      = '';
 		$this->assertEquals( $expected, $store_rule->get_css() );
 
 		$pie_declarations = array(
@@ -97,7 +97,7 @@ public function test_add_rule() {
 		$store_rule->add_declarations( $css_declarations );
 
 		$store_rule = $new_pie_store->add_rule( $selector );
-		$expected   = "$selector {{$css_declarations->get_declarations_string()}}";
+		$expected   = "$selector{{$css_declarations->get_declarations_string()}}";
 		$this->assertEquals( $expected, $store_rule->get_css() );
 	}
 
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
index ebee00f05ce16a..5c94e81c48ac92 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
@@ -35,14 +35,63 @@ public function test_return_rules_as_css() {
 		);
 		$a_nice_processor = new WP_Style_Engine_Processor();
 		$a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
-		$this->assertEquals( '.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}', $a_nice_processor->get_css() );
+		$this->assertEquals(
+			'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
+			$a_nice_processor->get_css()
+		);
+	}
+
+	/**
+	 * Should compile CSS rules.
+	 */
+	public function test_return_prettified_rules_as_css() {
+		$a_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-wonderful-rule' );
+		$a_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_very_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-very_wonderful-rule' );
+		$a_very_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_more_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-more-wonderful-rule' );
+		$a_more_wonderful_css_rule->add_declarations(
+			array(
+				'font-family'      => 'Wonderful sans',
+				'font-size'        => '1em',
+				'background-color' => 'orange',
+			)
+		);
+		$a_wonderful_processor = new WP_Style_Engine_Processor();
+		$a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) );
+
+		$expected = '.a-more-wonderful-rule {
+	font-family: Wonderful sans;
+	font-size: 1em;
+	background-color: orange;
+}
+.a-wonderful-rule,
+.a-very_wonderful-rule {
+	color: var(--wonderful-color);
+	background-color: orange;
+}
+';
+		$this->assertEquals(
+			$expected,
+			$a_wonderful_processor->get_css( array( 'prettify' => true ) )
+		);
 	}
 
 	/**
 	 * Should compile CSS rules from the store.
 	 */
 	public function test_return_store_rules_as_css() {
-		$a_nice_store = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'nice' );
+		$a_nice_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'nice' );
 		$a_nice_store->add_rule( '.a-nice-rule' )->add_declarations(
 			array(
 				'color'            => 'var(--nice-color)',
@@ -56,9 +105,12 @@ public function test_return_store_rules_as_css() {
 				'background-color' => 'purple',
 			)
 		);
-		$a_nice_renderer = new WP_Style_Engine_Processor_Gutenberg();
+		$a_nice_renderer = new WP_Style_Engine_Processor();
 		$a_nice_renderer->add_store( $a_nice_store );
-		$this->assertEquals( '.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}', $a_nice_renderer->get_css() );
+		$this->assertEquals(
+			'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
+			$a_nice_renderer->get_css()
+		);
 	}
 
 	/**
@@ -84,7 +136,10 @@ public function test_dedupe_and_merge_css_declarations() {
 			)
 		);
 		$an_excellent_processor->add_rules( $another_excellent_rule );
-		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dotted; border-color: brown;}', $an_excellent_processor->get_css() );
+		$this->assertEquals(
+			'.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
+			$an_excellent_processor->get_css()
+		);
 
 		$yet_another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
 		$yet_another_excellent_rule->add_declarations(
@@ -95,7 +150,47 @@ public function test_dedupe_and_merge_css_declarations() {
 			)
 		);
 		$an_excellent_processor->add_rules( $yet_another_excellent_rule );
-		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dashed; border-color: brown; border-width: 2px;}', $an_excellent_processor->get_css() );
+		$this->assertEquals(
+			'.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
+			$an_excellent_processor->get_css()
+		);
+	}
+
+	/**
+	 * Should print out uncombined selectors duplicate CSS rules.
+	 */
+	public function test_output_verbose_css_rules() {
+		$a_sweet_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-sweet-rule',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweeter_rule = new WP_Style_Engine_CSS_Rule(
+			'#an-even-sweeter-rule > marquee',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$the_sweetest_rule = new WP_Style_Engine_CSS_Rule(
+			'.the-sweetest-rule-of-all a',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweet_processor = new WP_Style_Engine_Processor();
+		$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule, $the_sweetest_rule ) );
+
+		$this->assertEquals(
+			'.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}.the-sweetest-rule-of-all a{color:var(--sweet-color);background-color:purple;}',
+			$a_sweet_processor->get_css( array( 'optimize' => false ) )
+		);
 	}
 
 	/**
@@ -121,7 +216,10 @@ public function test_combine_css_rules() {
 		$a_sweet_processor = new WP_Style_Engine_Processor();
 		$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );
 
-		$this->assertEquals( '.a-sweet-rule,#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}', $a_sweet_processor->get_css() );
+		$this->assertEquals(
+			'.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
+			$a_sweet_processor->get_css()
+		);
 	}
 		/**
 		 * Should combine and store CSS rules.
@@ -142,7 +240,7 @@ public function test_combine_previously_added_css_rules() {
 			)
 		);
 		$a_lovely_processor->add_rules( $a_lovelier_rule );
-		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule {border-color: purple;}', $a_lovely_processor->get_css() );
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css() );
 
 		$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
 			'.a-most-lovely-rule',
@@ -160,6 +258,9 @@ public function test_combine_previously_added_css_rules() {
 		);
 		$a_lovely_processor->add_rules( $a_perfectly_lovely_rule );
 
-		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule {border-color: purple;}', $a_lovely_processor->get_css() );
+		$this->assertEquals(
+			'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
+			$a_lovely_processor->get_css()
+		);
 	}
 }
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-test.php b/packages/style-engine/phpunit/class-wp-style-engine-test.php
index 14938e075fa260..62c9d0a9189165 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php
@@ -100,7 +100,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'css'          => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
+					'css'          => 'border-style:dotted;border-width:2rem;padding:0;margin:111px;',
 					'declarations' => array(
 						'border-style' => 'dotted',
 						'border-width' => '2rem',
@@ -125,7 +125,7 @@ public function data_get_styles_fixtures() {
 					'context'                    => 'block-supports',
 				),
 				'expected_output' => array(
-					'css'          => 'margin: 20px;',
+					'css'          => 'margin:20px;',
 					'declarations' => array(
 						'margin' => '20px',
 					),
@@ -176,7 +176,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
+					'css'          => 'border-top-left-radius:99px;border-top-right-radius:98px;border-bottom-left-radius:97px;border-bottom-right-radius:96px;padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
 					'declarations' => array(
 						'border-top-left-radius'     => '99px',
 						'border-top-right-radius'    => '98px',
@@ -209,7 +209,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
@@ -236,7 +236,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array( 'selector' => '.wp-selector > p' ),
 				'expected_output' => array(
-					'css'          => '.wp-selector > p {padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem;}',
+					'css'          => '.wp-selector > p{padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;}',
 					'declarations' => array(
 						'padding-top'    => '42px',
 						'padding-left'   => '2%',
@@ -256,7 +256,7 @@ public function data_get_styles_fixtures() {
 					'selector' => '.wp-selector',
 				),
 				'expected_output' => array(
-					'css'          => '.wp-selector {color: var(--wp--preset--color--my-little-pony);}',
+					'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--my-little-pony)',
 					),
@@ -302,7 +302,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: var(--wp--preset--color--teal-independents);',
+					'css'          => 'color:var(--wp--preset--color--teal-independents);',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--teal-independents)',
 					),
@@ -319,7 +319,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: #fff;',
+					'css'          => 'color:#fff;',
 					'declarations' => array(
 						'color' => '#fff',
 					),
@@ -353,7 +353,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
+					'css'          => 'padding:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--10);',
 					'declarations' => array(
 						'padding' => 'var(--wp--preset--spacing--20)',
 						'margin'  => 'var(--wp--preset--spacing--10)',
@@ -380,7 +380,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
+					'css'          => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--20);margin-top:1rem;margin-bottom:1rem;',
 					'declarations' => array(
 						'padding-left'   => 'var(--wp--preset--spacing--30)',
 						'padding-right'  => 'var(--wp--preset--spacing--40)',
@@ -407,7 +407,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'margin-top: 1rem; margin-bottom: 0;',
+					'css'          => 'margin-top:1rem;margin-bottom:0;',
 					'declarations' => array(
 						'margin-top'    => '1rem',
 						'margin-bottom' => '0',
@@ -456,7 +456,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
+					'css'          => 'border-top-color:#fe1;border-top-width:1.5rem;border-top-style:dashed;border-right-color:#fe2;border-right-width:1.4rem;border-right-style:solid;border-bottom-color:#fe3;border-bottom-width:1.3rem;border-left-color:var(--wp--preset--color--swampy-yellow);border-left-width:0.5rem;border-left-style:dotted;',
 					'declarations' => array(
 						'border-top-color'    => '#fe1',
 						'border-top-width'    => '1.5rem',
@@ -499,7 +499,7 @@ public function data_get_styles_fixtures() {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'css'          => 'border-bottom-color:var(--wp--preset--color--terrible-lizard);',
 					'declarations' => array(
 						'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
 					),
@@ -531,7 +531,7 @@ public function test_enqueue_block_styles_store() {
 				'selector' => 'article',
 			)
 		);
-		$store            = WP_Style_Engine::get_instance()::get_store( 'block-supports' );
+		$store            = WP_Style_Engine::get_store( 'block-supports' );
 		$rule             = $store->get_all_rules()['article'];
 		$this->assertSame( $generated_styles['css'], $rule->get_css() );
 	}
@@ -540,14 +540,38 @@ public function test_enqueue_block_styles_store() {
 	 * Tests adding rules to a store and retrieving a generated stylesheet.
 	 */
 	public function test_add_to_store() {
-		$store = wp_style_engine_add_to_store( 'test-store', array() );
-
-		// wp_style_engine_add_to_store returns a store object.
-		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $store );
+		$css_rules           = array(
+			array(
+				'selector'     => '.frodo',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '10px',
+					'width'        => '30px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.samwise',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '20px',
+					'width'        => '50px',
+					'border-style' => 'solid',
+				),
+			),
+		);
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+			$css_rules,
+			array(
+				'context' => 'test-store',
+				'enqueue' => true,
+			)
+		);
 
 		// Check that the style engine knows about the store.
-		$stored_store = WP_Style_Engine::get_instance()::get_store( 'test-store' );
+		$stored_store = WP_Style_Engine::get_store( 'test-store' );
 		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $stored_store );
+		$this->assertSame( $compiled_stylesheet, WP_Style_Engine::compile_stylesheet_from_css_rules( $stored_store->get_all_rules() ) );
 	}
 
 	/**
@@ -585,7 +609,7 @@ public function test_get_stylesheet_from_css_rules() {
 		);
 
 		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
-		$this->assertSame( '.saruman {color: white; height: 100px; border-style: solid; align-self: unset;}.gandalf {color: grey; height: 90px; border-style: dotted; align-self: safe center;}.radagast {color: brown; height: 60px; border-style: dashed; align-self: stretch;}', $compiled_stylesheet );
+		$this->assertSame( '.saruman{color:white;height:100px;border-style:solid;align-self:unset;}.gandalf{color:grey;height:90px;border-style:dotted;align-self:safe center;}.radagast{color:brown;height:60px;border-style:dashed;align-self:stretch;}', $compiled_stylesheet );
 	}
 
 	/**
@@ -629,6 +653,6 @@ public function test_get_deduped_and_merged_stylesheet() {
 		);
 
 		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
-		$this->assertSame( '.gandalf {color: white; height: 190px; border-style: dotted; padding: 10px; margin-bottom: 100px;}.dumbledore,.rincewind {color: grey; height: 90px; border-style: dotted;}', $compiled_stylesheet );
+		$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
 	}
 }
diff --git a/packages/viewport/src/store/actions.js b/packages/viewport/src/store/actions.js
index 0da1576677c0e1..e12a4f304ce54d 100644
--- a/packages/viewport/src/store/actions.js
+++ b/packages/viewport/src/store/actions.js
@@ -2,6 +2,9 @@
  * Returns an action object used in signalling that viewport queries have been
  * updated. Values are specified as an object of breakpoint query keys where
  * value represents whether query matches.
+ * Ignored from documentation as it is for internal use only.
+ *
+ * @ignore
  *
  * @param {Object} values Breakpoint query matches.
  *
diff --git a/packages/viewport/src/store/selectors.js b/packages/viewport/src/store/selectors.js
index d379beeb5052fa..04612df652e661 100644
--- a/packages/viewport/src/store/selectors.js
+++ b/packages/viewport/src/store/selectors.js
@@ -8,8 +8,21 @@
  * @example
  *
  * ```js
- * isViewportMatch( state, '< huge' );
- * isViewPortMatch( state, 'medium' );
+ * import { store as viewportStore } from '@wordpress/viewport';
+ * import { useSelect } from '@wordpress/data';
+ * import { __ } from '@wordpress/i18n';
+ * const ExampleComponent = () => {
+ *     const isMobile = useSelect(
+ *         ( select ) => select( viewportStore ).isViewportMatch( '< small' ),
+ *         []
+ *     );
+ *
+ *     return isMobile ? (
+ *         <div>{ __( 'Mobile' ) }</div>
+ *     ) : (
+ *         <div>{ __( 'Not Mobile' ) }</div>
+ *     );
+ * };
  * ```
  *
  * @return {boolean} Whether viewport matches query.
diff --git a/phpcs.xml.dist b/phpcs.xml.dist
index ce2c3a67a6a423..59c87341f6eb29 100644
--- a/phpcs.xml.dist
+++ b/phpcs.xml.dist
@@ -87,5 +87,14 @@
 	<!-- Ignore filename error since it requires WP core build process change -->
 	<rule ref="WordPress.Files.FileName.InvalidClassFileName">
 		<exclude-pattern>./packages/block-serialization-default-parser/parser.php</exclude-pattern>
+		<exclude-pattern>/phpunit/*</exclude-pattern>
+	</rule>
+
+	<!-- Exclude PHPUnit tests from file and class name sniffs (for Core parity). -->
+	<rule ref="WordPress.Files.FileName.NotHyphenatedLowercase">
+		<exclude-pattern>/phpunit/*</exclude-pattern>
+	</rule>
+	<rule ref="PEAR.NamingConventions.ValidClassName.Invalid">
+		<exclude-pattern>/phpunit/*</exclude-pattern>
 	</rule>
 </ruleset>
diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php
index a199dd34ad833c..dd2b279867aeb7 100644
--- a/phpunit/block-supports/border-test.php
+++ b/phpunit/block-supports/border-test.php
@@ -117,7 +117,7 @@ function test_border_color_slug_with_numbers_is_kebab_cased_properly() {
 		$actual   = gutenberg_apply_border_support( $block_type, $block_atts );
 		$expected = array(
 			'class' => 'has-border-color has-red-border-color',
-			'style' => 'border-radius: 10px; border-style: dashed; border-width: 1px;',
+			'style' => 'border-radius:10px;border-style:dashed;border-width:1px;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -179,7 +179,7 @@ function test_flat_border_with_individual_skipped_serialization() {
 
 		$actual   = gutenberg_apply_border_support( $block_type, $block_atts );
 		$expected = array(
-			'style' => 'border-style: dotted; border-width: 1px;',
+			'style' => 'border-style:dotted;border-width:1px;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -208,7 +208,7 @@ function test_split_border_radius() {
 		);
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
-			'style' => 'border-top-left-radius: 1em; border-top-right-radius: 2rem; border-bottom-left-radius: 30px; border-bottom-right-radius: 4vh;',
+			'style' => 'border-top-left-radius:1em;border-top-right-radius:2rem;border-bottom-left-radius:30px;border-bottom-right-radius:4vh;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -237,7 +237,7 @@ function test_flat_border_with_custom_color() {
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
 			'class' => 'has-border-color',
-			'style' => 'border-color: #72aee6; border-style: dashed; border-width: 2px;',
+			'style' => 'border-color:#72aee6;border-style:dashed;border-width:2px;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -282,7 +282,7 @@ function test_split_borders_with_custom_colors() {
 		);
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
-			'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: #007017; border-bottom-style: solid; border-left-width: 1px; border-left-color: #f6f7f7; border-left-style: solid;',
+			'style' => 'border-top-width:2px;border-top-color:#72aee6;border-top-style:dashed;border-right-width:0.25rem;border-right-color:#e65054;border-right-style:dotted;border-bottom-width:0.5em;border-bottom-color:#007017;border-bottom-style:solid;border-left-width:1px;border-left-color:#f6f7f7;border-left-style:solid;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -372,7 +372,7 @@ function test_split_borders_with_skipped_individual_feature_serialization() {
 		);
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
-			'style' => 'border-top-color: #72aee6; border-right-color: #e65054; border-bottom-color: #007017; border-left-color: #f6f7f7;',
+			'style' => 'border-top-color:#72aee6;border-right-color:#e65054;border-bottom-color:#007017;border-left-color:#f6f7f7;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -409,7 +409,7 @@ function test_partial_split_borders() {
 		);
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
-			'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-left-style: solid;',
+			'style' => 'border-top-width:2px;border-top-color:#72aee6;border-top-style:dashed;border-right-width:0.25rem;border-right-color:#e65054;border-left-style:solid;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -454,7 +454,7 @@ function test_split_borders_with_named_colors() {
 		);
 		$actual      = gutenberg_apply_border_support( $block_type, $block_attrs );
 		$expected    = array(
-			'style' => 'border-top-width: 2px; border-top-color: var(--wp--preset--color--red); border-top-style: dashed; border-right-width: 0.25rem; border-right-color: var(--wp--preset--color--green); border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: var(--wp--preset--color--blue); border-bottom-style: solid; border-left-width: 1px; border-left-color: var(--wp--preset--color--yellow); border-left-style: solid;',
+			'style' => 'border-top-width:2px;border-top-color:var(--wp--preset--color--red);border-top-style:dashed;border-right-width:0.25rem;border-right-color:var(--wp--preset--color--green);border-right-style:dotted;border-bottom-width:0.5em;border-bottom-color:var(--wp--preset--color--blue);border-bottom-style:solid;border-left-width:1px;border-left-color:var(--wp--preset--color--yellow);border-left-style:solid;',
 		);
 
 		$this->assertSame( $expected, $actual );
diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
index fba82fafb4becb..89b3a9192270e6 100644
--- a/phpunit/block-supports/colors-test.php
+++ b/phpunit/block-supports/colors-test.php
@@ -136,7 +136,7 @@ function test_gradient_with_individual_skipped_serialization_block_supports() {
 		$actual   = gutenberg_apply_colors_support( $block_type, $block_atts );
 		$expected = array(
 			'class' => 'has-text-color',
-			'style' => 'color: #d92828;',
+			'style' => 'color:#d92828;',
 		);
 
 		$this->assertSame( $expected, $actual );
diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php
index 51b537bff4d14a..4caaf12911f9ad 100644
--- a/phpunit/block-supports/spacing-test.php
+++ b/phpunit/block-supports/spacing-test.php
@@ -62,7 +62,7 @@ function test_spacing_style_is_applied() {
 
 		$actual   = gutenberg_apply_spacing_support( $block_type, $block_atts );
 		$expected = array(
-			'style' => 'padding: 111px; margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;',
+			'style' => 'padding:111px;margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;',
 		);
 
 		$this->assertSame( $expected, $actual );
@@ -152,7 +152,7 @@ function test_margin_with_individual_skipped_serialization_block_supports() {
 
 		$actual   = gutenberg_apply_spacing_support( $block_type, $block_atts );
 		$expected = array(
-			'style' => 'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;',
+			'style' => 'padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;',
 		);
 
 		$this->assertSame( $expected, $actual );
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index f5b5ac954f9e21..297c90a1bc8a91 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -75,7 +75,7 @@ function test_font_family_with_legacy_inline_styles_using_a_value() {
 		$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) );
 
 		$actual   = gutenberg_apply_typography_support( $block_type, $block_atts );
-		$expected = array( 'style' => 'font-family: serif;' );
+		$expected = array( 'style' => 'font-family:serif;' );
 
 		$this->assertSame( $expected, $actual );
 	}
@@ -175,7 +175,7 @@ function test_font_family_with_legacy_inline_styles_using_a_css_var() {
 		$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) );
 
 		$actual   = gutenberg_apply_typography_support( $block_type, $block_atts );
-		$expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' );
+		$expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' );
 
 		$this->assertSame( $expected, $actual );
 	}
diff --git a/phpunit/block-template-utils-test.php b/phpunit/block-template-utils-test.php
new file mode 100644
index 00000000000000..ceffe180d98707
--- /dev/null
+++ b/phpunit/block-template-utils-test.php
@@ -0,0 +1,164 @@
+<?php
+/**
+ * Tests_Block_Template_Utils class
+ *
+ * @package WordPress
+ */
+
+class Tests_Block_Template_Utils extends WP_UnitTestCase {
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'emptytheme' );
+	}
+
+	public function test_get_template_hierarchy() {
+		$hierarchy = get_template_hierarchy( 'front-page' );
+		$this->assertEquals( array( 'front-page', 'home', 'index' ), $hierarchy );
+		// Custom templates.
+		$hierarchy = get_template_hierarchy( 'whatever-slug', true );
+		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
+		// Single slug templates(ex. page, tag, author, etc..
+		$hierarchy = get_template_hierarchy( 'page' );
+		$this->assertEquals( array( 'page', 'singular', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'tag' );
+		$this->assertEquals( array( 'tag', 'archive', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'author' );
+		$this->assertEquals( array( 'author', 'archive', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'date' );
+		$this->assertEquals( array( 'date', 'archive', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'taxonomy' );
+		$this->assertEquals( array( 'taxonomy', 'archive', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'attachment' );
+		$this->assertEquals(
+			array(
+				'attachment',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = get_template_hierarchy( 'singular' );
+		$this->assertEquals( array( 'singular', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'single' );
+		$this->assertEquals( array( 'single', 'singular', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'archive' );
+		$this->assertEquals( array( 'archive', 'index' ), $hierarchy );
+		$hierarchy = get_template_hierarchy( 'index' );
+		$this->assertEquals( array( 'index' ), $hierarchy );
+
+		// Taxonomies.
+		$hierarchy = get_template_hierarchy( 'taxonomy-books', false, 'taxonomy-books' );
+		$this->assertEquals( array( 'taxonomy-books', 'taxonomy', 'archive', 'index' ), $hierarchy );
+		// Single word category.
+		$hierarchy = get_template_hierarchy( 'category-fruits', false, 'category' );
+		$this->assertEquals(
+			array(
+				'category-fruits',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+		// Multi word category.
+		$hierarchy = get_template_hierarchy( 'category-fruits-yellow', false, 'category' );
+		$this->assertEquals(
+			array(
+				'category-fruits-yellow',
+				'category',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+		// Single word taxonomy.
+		$hierarchy = get_template_hierarchy( 'taxonomy-books-action', false, 'taxonomy-books' );
+		$this->assertEquals(
+			array(
+				'taxonomy-books-action',
+				'taxonomy-books',
+				'taxonomy',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = get_template_hierarchy( 'taxonomy-books-action-adventure', false, 'taxonomy-books' );
+		$this->assertEquals(
+			array(
+				'taxonomy-books-action-adventure',
+				'taxonomy-books',
+				'taxonomy',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+		// Multi word taxonomy/terms.
+		$hierarchy = get_template_hierarchy( 'taxonomy-greek-books-action-adventure', false, 'taxonomy-greek-books' );
+		$this->assertEquals(
+			array(
+				'taxonomy-greek-books-action-adventure',
+				'taxonomy-greek-books',
+				'taxonomy',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+		// Post types.
+		$hierarchy = get_template_hierarchy( 'single-book', false, 'single-book' );
+		$this->assertEquals(
+			array(
+				'single-book',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = get_template_hierarchy( 'single-art-project', false, 'single-art-project' );
+		$this->assertEquals(
+			array(
+				'single-art-project',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = get_template_hierarchy( 'single-art-project-imagine', false, 'single-art-project' );
+		$this->assertEquals(
+			array(
+				'single-art-project-imagine',
+				'single-art-project',
+				'single',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		$hierarchy = get_template_hierarchy( 'page-hi', false, 'page' );
+		$this->assertEquals(
+			array(
+				'page-hi',
+				'page',
+				'singular',
+				'index',
+			),
+			$hierarchy
+		);
+		// Authors.
+		$hierarchy = get_template_hierarchy( 'author-rigas', false, 'author' );
+		$this->assertEquals(
+			array(
+				'author-rigas',
+				'author',
+				'archive',
+				'index',
+			),
+			$hierarchy
+		);
+	}
+}
diff --git a/phpunit/class-gutenberg-rest-templates-controller-test.php b/phpunit/class-gutenberg-rest-templates-controller-test.php
new file mode 100644
index 00000000000000..cd91f3dcf6bf24
--- /dev/null
+++ b/phpunit/class-gutenberg-rest-templates-controller-test.php
@@ -0,0 +1,97 @@
+<?php
+
+class Gutenberg_REST_Templates_Controller_Test extends WP_Test_REST_Controller_Testcase {
+	/**
+	 * @var int
+	 */
+	protected static $admin_id;
+
+	public function set_up() {
+		parent::set_up();
+		switch_theme( 'emptytheme' );
+	}
+
+	/**
+	 * Create fake data before our tests run.
+	 *
+	 * @param WP_UnitTest_Factory $factory Helper that lets us create fake data.
+	 */
+	public static function wpSetupBeforeClass( $factory ) {
+		self::$admin_id = $factory->user->create(
+			array(
+				'role' => 'administrator',
+			)
+		);
+	}
+
+	public function test_register_routes() {
+		$routes = rest_get_server()->get_routes();
+		$this->assertArrayHasKey(
+			'/wp/v2/templates/lookup',
+			$routes,
+			'Get template fallback content route does not exist'
+		);
+	}
+
+	public function test_get_template_fallback() {
+		$base_path = gutenberg_dir_path() . 'test/emptytheme/block-templates/';
+		wp_set_current_user( self::$admin_id );
+		$request = new WP_REST_Request( 'GET', '/wp/v2/templates/lookup' );
+		// Should match `category.html`.
+		$request->set_param( 'slug', 'category-fruits' );
+		$request->set_param( 'is_custom', false );
+		$request->set_param( 'template_prefix', 'category' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data()->content;
+		$expected = file_get_contents( $base_path . 'category.html' );
+		$this->assertEquals( $expected, $data );
+		// Should fallback to `index.html` .
+		$request->set_param( 'slug', 'tag-status' );
+		$request->set_param( 'is_custom', false );
+		$request->set_param( 'template_prefix', 'tag' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data()->content;
+		$expected = file_get_contents( $base_path . 'index.html' );
+		$this->assertEquals( $expected, $data );
+		// Should fallback to `singular.html` .
+		$request->set_param( 'slug', 'page-hello' );
+		$request->set_param( 'is_custom', false );
+		$request->set_param( 'template_prefix', 'page' );
+		$response = rest_get_server()->dispatch( $request );
+		$data     = $response->get_data()->content;
+		$expected = file_get_contents( $base_path . 'singular.html' );
+		$this->assertEquals( $expected, $data );
+	}
+
+	public function test_context_param() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_get_items() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_get_item() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_create_item() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_update_item() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_delete_item() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_prepare_item() {
+		$this->markTestIncomplete();
+	}
+
+	public function test_get_item_schema() {
+		$this->markTestIncomplete();
+	}
+}
diff --git a/phpunit/script-loader.php b/phpunit/script-loader.php
new file mode 100644
index 00000000000000..b8dfa970b1762e
--- /dev/null
+++ b/phpunit/script-loader.php
@@ -0,0 +1,71 @@
+<?php
+/**
+ * Tests script and style loading.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Script_Loader_Test extends WP_UnitTestCase {
+	/**
+	 * Clean up global scope.
+	 *
+	 * @global WP_Scripts $wp_scripts
+	 * @global WP_Styles $wp_styles
+	 */
+	public function clean_up_global_scope() {
+		global $wp_styles;
+		parent::clean_up_global_scope();
+		$wp_styles = null;
+	}
+	/**
+	 * Tests that stored CSS is enqueued.
+	 */
+	public function test_enqueue_stored_styles() {
+		global $wp_styles;
+
+		$core_styles_to_enqueue = array(
+			array(
+				'selector'     => '.saruman',
+				'declarations' => array(
+					'color'        => 'white',
+					'height'       => '100px',
+					'border-style' => 'solid',
+				),
+			),
+		);
+
+		// Enqueue a block supports (core styles).
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$core_styles_to_enqueue,
+			array(
+				'context' => 'block-supports',
+				'enqueue' => true,
+			)
+		);
+
+		$my_styles_to_enqueue = array(
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+		);
+
+		// Enqueue some other styles.
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$my_styles_to_enqueue,
+			array(
+				'context' => 'my-styles',
+				'enqueue' => true,
+			)
+		);
+
+		gutenberg_enqueue_stored_styles();
+
+		$this->assertEquals( array( '.saruman{color:white;height:100px;border-style:solid;}' ), $wp_styles->get_data( 'core-block-supports', 'after' ) );
+		$this->assertEquals( array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ), $wp_styles->get_data( 'wp-style-engine-my-styles', 'after' ) );
+	}
+}
diff --git a/test/e2e/README.md b/test/e2e/README.md
index 5a27a9f8c1fee3..56da393ea68fbe 100644
--- a/test/e2e/README.md
+++ b/test/e2e/README.md
@@ -62,16 +62,16 @@ We can insert as many assertions in one test as needed. It's better to make expl
 
 ```bash
 # Run all available tests.
-npm run test-e2e:playwright
+npm run test:e2e:playwright
 
 # Run in headed mode.
-npm run test-e2e:playwright -- --headed
+npm run test:e2e:playwright -- --headed
 
 # 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
+npm run test:e2e:playwright -- <path_to_test_file> # E.g., npm run test:e2e:playwright -- site-editor/title.spec.js
 
 # Debugging
-npm run test-e2e:playwright -- --debug
+npm run test:e2e:playwright -- --debug
 ```
 
 **Note**: This package requires Node.js 12.0.0 or later. It is not compatible with older versions.
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt
new file mode 100644
index 00000000000000..44774b1bf76800
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt
new file mode 100644
index 00000000000000..44774b1bf76800
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
new file mode 100644
index 00000000000000..09839ec9963532
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Group Block with a Paragraph</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
new file mode 100644
index 00000000000000..6e534c3010ec1d
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Group', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created using the block inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		// Search for the group block and insert it.
+		const inserterButton = page.locator(
+			'role=button[name="Toggle block inserter"i]'
+		);
+
+		await inserterButton.click();
+
+		await page.type(
+			'role=searchbox[name="Search for blocks and patterns"i]',
+			'Group'
+		);
+
+		await page.click(
+			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
+		);
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can be created using the slash inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/group' );
+		await expect(
+			page.locator( 'role=option[name="Group"i][selected]' )
+		).toBeVisible();
+		await page.keyboard.press( 'Enter' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can have other blocks appended to it using the button appender', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/group' } );
+		await page.click( 'role=button[name="Add block"i]' );
+		await page.click(
+			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
+		);
+		await page.keyboard.type( 'Group Block with a Paragraph' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );
diff --git a/test/e2e/specs/editor/blocks/missing.spec.js b/test/e2e/specs/editor/blocks/missing.spec.js
new file mode 100644
index 00000000000000..69c26c3f858762
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/missing.spec.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'missing block', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should strip potentially malicious on* attributes', async ( {
+		page,
+	} ) => {
+		let hasAlert = false;
+
+		page.on( 'dialog', () => {
+			hasAlert = true;
+		} );
+
+		await page.evaluate( () => {
+			const block = window.wp.blocks.parse(
+				`<!-- wp:non-existing-block-here --><img src onerror=alert(1)>`
+			);
+			window.wp.data.dispatch( 'core/block-editor' ).resetBlocks( block );
+		} );
+
+		// Give the browser time to show the alert.
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
+
+		expect( hasAlert ).toBe( false );
+	} );
+
+	test( 'should strip potentially malicious script tags', async ( {
+		page,
+	} ) => {
+		let hasAlert = false;
+
+		page.on( 'dialog', () => {
+			hasAlert = true;
+		} );
+
+		await page.evaluate( () => {
+			const block = window.wp.blocks.parse(
+				`<!-- wp:non-existing-block-here --><script>alert("EVIL");</script>`
+			);
+			window.wp.data.dispatch( 'core/block-editor' ).resetBlocks( block );
+		} );
+
+		// Give the browser time to show the alert.
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
+
+		expect( hasAlert ).toBe( false );
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-children-source-1-chromium.txt b/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-children-source-1-chromium.txt
new file mode 100644
index 00000000000000..469b0e769f04bd
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-children-source-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:deprecated-children-matcher -->
+<p class="wp-block-deprecated-children-matcher">test<br/><strong>a</strong></p>
+<!-- /wp:deprecated-children-matcher -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-node-source-1-chromium.txt b/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-node-source-1-chromium.txt
new file mode 100644
index 00000000000000..4e5daa5abfffec
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/__snapshots__/Deprecated-Node-Matcher-should-insert-block-with-node-source-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:deprecated-node-matcher -->
+<blockquote class="wp-block-deprecated-node-matcher"><p>test</p><p></p></blockquote>
+<!-- /wp:deprecated-node-matcher -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js
new file mode 100644
index 00000000000000..fd57954e9905da
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/deprecated-node-matcher.spec.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Deprecated Node Matcher', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-deprecated-node-matcher'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-deprecated-node-matcher'
+		);
+	} );
+
+	test( 'should insert block with node source', async ( {
+		page,
+		editor,
+	} ) => {
+		// await insertBlock( 'Deprecated Node Matcher' );
+		await editor.insertBlock( { name: 'core/deprecated-node-matcher' } );
+		await page.keyboard.type( 'test' );
+		await page.keyboard.press( 'Enter' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'should insert block with children source', async ( {
+		page,
+		editor,
+		pageUtils,
+	} ) => {
+		// await insertBlock( 'Deprecated Children Matcher' );
+		await editor.insertBlock( {
+			name: 'core/deprecated-children-matcher',
+		} );
+		await page.keyboard.type( 'test' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'a' );
+		await page.keyboard.down( 'Shift' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.up( 'Shift' );
+		await pageUtils.pressKeyWithModifier( 'primary', 'b' );
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );
diff --git a/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
new file mode 100644
index 00000000000000..6b19e3ff69f593
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/wp-editor-meta-box.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'WP Editor Meta Boxes', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-plugin-wp-editor-meta-box'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-plugin-wp-editor-meta-box'
+		);
+	} );
+
+	test( 'Should save the changes', async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+
+		// Add title to enable valid non-empty post save.
+		await page.type( 'role=textbox[name="Add title"i]', 'Hello Meta' );
+
+		// Type something.
+		await page.click( 'role=button[name="Text"i]' );
+		await page.click( '#test_tinymce_id' );
+		await page.keyboard.type( 'Typing in a metabox' );
+		await page.type( '#test_tinymce_id-html', 'Typing in a metabox' );
+		await page.click( 'role=button[name="Visual"i]' );
+
+		await editor.publishPost();
+
+		await expect( page.locator( '.edit-post-layout' ) ).toBeVisible();
+
+		await page.click( 'role=button[name="Text"i]' );
+
+		// Expect the typed text on the tinymce editor
+		const content = page.locator( '#test_tinymce_id' );
+		await expect( content ).toHaveValue( 'Typing in a metabox' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js
index e3be08c31b01e1..a793e97158a11f 100644
--- a/test/e2e/specs/site-editor/template-part.spec.js
+++ b/test/e2e/specs/site-editor/template-part.spec.js
@@ -106,7 +106,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( paragraphBlock );
 
 		// Convert block to a template part.
-		await editor.clickBlockOptionsMenuItem( 'Make template part' );
+		await editor.clickBlockOptionsMenuItem( 'Create Template part' );
 		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Test' );
 		await page.keyboard.press( 'Enter' );
 
@@ -156,7 +156,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( paragraphBlock1, paragraphBlock2 );
 
 		// Convert block to a template part.
-		await editor.clickBlockOptionsMenuItem( 'Make template part' );
+		await editor.clickBlockOptionsMenuItem( 'Create Template part' );
 		await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Test' );
 		await page.keyboard.press( 'Enter' );
 
diff --git a/test/emptytheme/block-templates/category.html b/test/emptytheme/block-templates/category.html
new file mode 100644
index 00000000000000..8c389a214392d0
--- /dev/null
+++ b/test/emptytheme/block-templates/category.html
@@ -0,0 +1 @@
+<!-- wp:query-title {"type":"archive"} /-->
diff --git a/test/emptytheme/block-templates/index.html b/test/emptytheme/block-templates/index.html
index 74f7551f8bb495..f1cd4dcbb00655 100644
--- a/test/emptytheme/block-templates/index.html
+++ b/test/emptytheme/block-templates/index.html
@@ -1,5 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-
+<!-- wp:template-part {"slug":"header","tagName":"header","theme":"emptytheme"} /-->
 <!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
 <div class="wp-block-query">
 	<!-- wp:post-template -->
diff --git a/test/emptytheme/block-templates/singular.html b/test/emptytheme/block-templates/singular.html
index 45d77e8279e498..b77fd11ad9a765 100644
--- a/test/emptytheme/block-templates/singular.html
+++ b/test/emptytheme/block-templates/singular.html
@@ -1,5 +1,3 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
-
+<!-- wp:template-part {"slug":"header","tagName":"header","theme":"emptytheme"} /-->
 <!-- wp:post-title /-->
-
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
\ No newline at end of file
+<!-- wp:post-content {"layout":{"inherit":true}} /-->
diff --git a/test/integration/blocks-raw-handling.test.js b/test/integration/blocks-raw-handling.test.js
index 6e3f0e63aba946..14f38348bc68ae 100644
--- a/test/integration/blocks-raw-handling.test.js
+++ b/test/integration/blocks-raw-handling.test.js
@@ -345,6 +345,7 @@ describe( 'Blocks raw handling', () => {
 			'wordpress',
 			'gutenberg',
 			'shortcode-matching',
+			'slack-quote',
 		].forEach( ( type ) => {
 			// eslint-disable-next-line jest/valid-title
 			it( type, () => {
diff --git a/test/integration/fixtures/blocks/core__archives.json b/test/integration/fixtures/blocks/core__archives.json
index a2e4ef4f703e09..8ae0e436df050f 100644
--- a/test/integration/fixtures/blocks/core__archives.json
+++ b/test/integration/fixtures/blocks/core__archives.json
@@ -4,6 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"displayAsDropdown": false,
+			"showLabel": true,
 			"showPostCounts": false,
 			"type": "monthly"
 		},
diff --git a/test/integration/fixtures/blocks/core__archives__showPostCounts.json b/test/integration/fixtures/blocks/core__archives__showPostCounts.json
index fdae4b426c0fdb..28263276799261 100644
--- a/test/integration/fixtures/blocks/core__archives__showPostCounts.json
+++ b/test/integration/fixtures/blocks/core__archives__showPostCounts.json
@@ -4,6 +4,7 @@
 		"isValid": true,
 		"attributes": {
 			"displayAsDropdown": false,
+			"showLabel": true,
 			"showPostCounts": true,
 			"type": "monthly"
 		},
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.html
new file mode 100644
index 00000000000000..811950397bafab
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill">
+	<figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56.00000000000001% 56.99999999999999%">
+		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" />
+	</figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…"} -->
+		<p>My Content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.json
new file mode 100644
index 00000000000000..1f252de69c1ad7
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.json
@@ -0,0 +1,32 @@
+[
+	{
+		"name": "core/media-text",
+		"isValid": true,
+		"attributes": {
+			"align": "wide",
+			"mediaAlt": "My alt text",
+			"mediaPosition": "left",
+			"mediaType": "image",
+			"mediaWidth": 50,
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+			"imageFill": true,
+			"focalPoint": {
+				"x": "0.56",
+				"y": "0.57"
+			}
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "My Content",
+					"dropCap": false,
+					"placeholder": "Content…"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.parsed.json b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.parsed.json
new file mode 100644
index 00000000000000..52265f85c33c90
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.parsed.json
@@ -0,0 +1,30 @@
+[
+	{
+		"blockName": "core/media-text",
+		"attrs": {
+			"mediaType": "image",
+			"imageFill": true,
+			"focalPoint": {
+				"x": "0.56",
+				"y": "0.57"
+			}
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Content…"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t\t<p>My Content</p>\n\t\t",
+				"innerContent": [ "\n\t\t<p>My Content</p>\n\t\t" ]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-image-fill\">\n\t<figure class=\"wp-block-media-text__media\" style=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56.00000000000001% 56.99999999999999%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"My alt text\" />\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile is-image-fill\">\n\t<figure class=\"wp-block-media-text__media\" style=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56.00000000000001% 56.99999999999999%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\" alt=\"My alt text\" />\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			null,
+			"\n\t</div>\n</div>\n"
+		]
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
new file mode 100644
index 00000000000000..9b33221d935d55
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:56% 57%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
+<p>My Content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
index 09bd96105d54c8..47a0f0c126fa70 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html
@@ -1,7 +1,7 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
 <div class="wp-block-media-text alignwide is-image-fill is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media"
-		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84.70588235294117% 84.70588235294117%">
+		style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
 			alt="My alt text" /></figure>
 	<div class="wp-block-media-text__content">
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
index 6fe461d3e0086c..fcae892bf1304a 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.json
@@ -12,8 +12,8 @@
 			"isStackedOnMobile": true,
 			"imageFill": true,
 			"focalPoint": {
-				"x": 0.8470588235294118,
-				"y": 0.8470588235294118
+				"x": 0.84,
+				"y": 0.84
 			}
 		},
 		"innerBlocks": [
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
index eab7975fae4eff..175fbad27927b7 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -5,8 +5,8 @@
 			"mediaType": "image",
 			"imageFill": true,
 			"focalPoint": {
-				"x": 0.8470588235294118,
-				"y": 0.8470588235294118
+				"x": 0.84,
+				"y": 0.84
 			}
 		},
 		"innerBlocks": [
@@ -23,9 +23,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84.70588235294117% 84.70588235294117%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\"\n\t\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
index c34d01c132d159..a1d3bb9c40fcc7 100644
--- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
+++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.8470588235294118,"y":0.8470588235294118}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84.70588235294117% 84.70588235294117%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<!-- wp:media-text {"mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=);background-position:84% 84%"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
 <p class="has-large-font-size">My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/test/integration/fixtures/blocks/core__media-text__media-right-custom-width__deprecated.json b/test/integration/fixtures/blocks/core__media-text__media-right-custom-width__deprecated.json
index 280b695c5e5a26..746a1cb641dbd9 100644
--- a/test/integration/fixtures/blocks/core__media-text__media-right-custom-width__deprecated.json
+++ b/test/integration/fixtures/blocks/core__media-text__media-right-custom-width__deprecated.json
@@ -6,10 +6,10 @@
 			"align": "full",
 			"mediaAlt": "",
 			"mediaPosition": "right",
-			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE=",
 			"mediaType": "video",
 			"mediaWidth": 41,
-			"isStackedOnMobile": true
+			"isStackedOnMobile": true,
+			"mediaUrl": "data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAC721kYXQhEAUgpBv/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA3pwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcCEQBSCkG//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADengAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcAAAAsJtb292AAAAbG12aGQAAAAAAAAAAAAAAAAAAAPoAAAALwABAAABAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAB7HRyYWsAAABcdGtoZAAAAAMAAAAAAAAAAAAAAAIAAAAAAAAALwAAAAAAAAAAAAAAAQEAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAACRlZHRzAAAAHGVsc3QAAAAAAAAAAQAAAC8AAAAAAAEAAAAAAWRtZGlhAAAAIG1kaGQAAAAAAAAAAAAAAAAAAKxEAAAIAFXEAAAAAAAtaGRscgAAAAAAAAAAc291bgAAAAAAAAAAAAAAAFNvdW5kSGFuZGxlcgAAAAEPbWluZgAAABBzbWhkAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAADTc3RibAAAAGdzdHNkAAAAAAAAAAEAAABXbXA0YQAAAAAAAAABAAAAAAAAAAAAAgAQAAAAAKxEAAAAAAAzZXNkcwAAAAADgICAIgACAASAgIAUQBUAAAAAAfQAAAHz+QWAgIACEhAGgICAAQIAAAAYc3R0cwAAAAAAAAABAAAAAgAABAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAIAAAABAAAAHHN0c3oAAAAAAAAAAAAAAAIAAAFzAAABdAAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYnVkdGEAAABabWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAtaWxzdAAAACWpdG9vAAAAHWRhdGEAAAABAAAAAExhdmY1Ni40MC4xMDE="
 		},
 		"innerBlocks": [
 			{
diff --git a/test/integration/fixtures/blocks/core__post-date.json b/test/integration/fixtures/blocks/core__post-date.json
index 6c5b7ac83f0d1e..ec8dc784b3403b 100644
--- a/test/integration/fixtures/blocks/core__post-date.json
+++ b/test/integration/fixtures/blocks/core__post-date.json
@@ -3,7 +3,8 @@
 		"name": "core/post-date",
 		"isValid": true,
 		"attributes": {
-			"isLink": false
+			"isLink": false,
+			"displayType": "date"
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/blocks/core__query-title.json b/test/integration/fixtures/blocks/core__query-title.json
index f9139728f25fa9..d3665a3407519d 100644
--- a/test/integration/fixtures/blocks/core__query-title.json
+++ b/test/integration/fixtures/blocks/core__query-title.json
@@ -3,7 +3,8 @@
 		"name": "core/query-title",
 		"isValid": true,
 		"attributes": {
-			"level": 1
+			"level": 1,
+			"showSearchTerm": true
 		},
 		"innerBlocks": []
 	}
diff --git a/test/integration/fixtures/documents/slack-quote-in.html b/test/integration/fixtures/documents/slack-quote-in.html
new file mode 100644
index 00000000000000..6e18f3e462f136
--- /dev/null
+++ b/test/integration/fixtures/documents/slack-quote-in.html
@@ -0,0 +1 @@
+<blockquote type="cite" class="c-mrkdwn__quote" data-stringify-type="quote" style="box-sizing: inherit; margin: 4px 0px; padding: 0px 0px 0px 16px; position: relative; counter-reset: list-0 0 list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; color: rgb(209, 210, 211); font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(34, 37, 41); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">Test with<span> </span><a target="_blank" class="c-link" data-stringify-link="http://w.org" delay="150" data-sk="tooltip_parent" href="http://w.org/" rel="noopener noreferrer" tabindex="-1" data-remove-tab-index="true" style="box-sizing: inherit; color: rgba(var(--sk_highlight,18,100,163),1); text-decoration: none;">link</a>.</blockquote>
\ No newline at end of file
diff --git a/test/integration/fixtures/documents/slack-quote-out.html b/test/integration/fixtures/documents/slack-quote-out.html
new file mode 100644
index 00000000000000..b5f9f82483d788
--- /dev/null
+++ b/test/integration/fixtures/documents/slack-quote-out.html
@@ -0,0 +1,5 @@
+<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Test with&nbsp;<a target="_blank" href="http://w.org/" rel="noreferrer noopener">link</a>.</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
\ No newline at end of file
diff --git a/test/integration/full-content/full-content.test.js b/test/integration/full-content/full-content.test.js
index 4aace84aab006c..8066d3b7eb8347 100644
--- a/test/integration/full-content/full-content.test.js
+++ b/test/integration/full-content/full-content.test.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import glob from 'fast-glob';
-import { startsWith, get } from 'lodash';
+import { get } from 'lodash';
 import { format } from 'util';
 
 /**
@@ -237,7 +237,7 @@ describe( 'full post content fixture', () => {
 					.filter(
 						( basename ) =>
 							basename === nameToFilename ||
-							startsWith( basename, nameToFilename + '__' )
+							basename.startsWith( nameToFilename + '__' )
 					)
 					.map( ( basename ) => {
 						const { filename: htmlFixtureFileName } =
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index 11f58d79b1afcd..f81d0b9809638c 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -165,4 +165,7 @@ module.exports = {
 	blockShortcodeContainer: {
 		padding: 12,
 	},
+	'wp-block-list-item__list-item--default': {
+		fontSize: 16,
+	},
 };
diff --git a/test/native/jest.config.js b/test/native/jest.config.js
index a6ccf676882fb2..0a7bf84287f421 100644
--- a/test/native/jest.config.js
+++ b/test/native/jest.config.js
@@ -65,7 +65,7 @@ module.exports = {
 		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/257#discussion_r234978268
 		// There is no overloading in jest so we need to rewrite the config from react-native-jest-preset:
 		// https://github.com/facebook/react-native/blob/HEAD/jest-preset.json#L20
-		'node_modules/(?!(simple-html-tokenizer|(jest-)?react-native|@react-native|react-clone-referenced-element|@react-navigation))',
+		'node_modules/(?!(simple-html-tokenizer|is-plain-obj|(jest-)?react-native|@react-native|react-clone-referenced-element|@react-navigation))',
 	],
 	snapshotSerializers: [ '@emotion/jest/serializer' ],
 	reporters: [ 'default', 'jest-junit' ],
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index c430aae0ed244c..2294974ffea32a 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -36,6 +36,7 @@ module.exports = {
 	transform: {
 		'^.+\\.[jt]sx?$': '<rootDir>/test/unit/scripts/babel-transformer.js',
 	},
+	transformIgnorePatterns: [ 'node_modules/(?!(is-plain-obj))' ],
 	snapshotSerializers: [
 		'enzyme-to-json/serializer',
 		'@emotion/jest/serializer',