diff --git a/.eslintrc.js b/.eslintrc.js
index 13c7e260e9bd9..4063bb42cf32a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -105,6 +105,7 @@ const restrictedImports = [
 			'lowerCase',
 			'map',
 			'mapKeys',
+			'mapValues',
 			'maxBy',
 			'memoize',
 			'merge',
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index d3ba813d3cd8a..d578b20c6cb61 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,5 +1,5 @@
 # Documentation
-/docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy
+/docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy @ndiego
 
 # Schemas
 /schemas/json                                   @ajlende
@@ -57,7 +57,7 @@
 # Tooling
 /bin                                            @ntwb @nerrad @ajitbohra
 /bin/api-docs                                   @ntwb @nerrad @ajitbohra
-/docs/tool                                      @ajitbohra
+/docs/tool                                      @ajitbohra @ndiego
 /packages/babel-plugin-import-jsx-pragma        @ntwb @nerrad @ajitbohra
 /packages/babel-plugin-makepot                  @ntwb @nerrad @ajitbohra
 /packages/babel-preset-default                  @gziolo @ntwb @nerrad @ajitbohra
@@ -125,7 +125,7 @@
 /packages/report-flaky-tests                    @kevin940726
 
 # wp-env
-/packages/env                                   @noahtallen
+/packages/env                                   @noahtallen @ObliviousHarmony
 
 # PHP
 /lib                                            @spacedmonkey
diff --git a/.github/workflows/check-components-changelog.yml b/.github/workflows/check-components-changelog.yml
index 23fbe9183ca8d..c0cb4894009a2 100644
--- a/.github/workflows/check-components-changelog.yml
+++ b/.github/workflows/check-components-changelog.yml
@@ -42,8 +42,8 @@ jobs:
                     exit 1
                   fi
 
-                  pr_link_pattern="\(\[#${PR_NUMBER}\]\(https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}\)\)"
-                  pr_link_grep_pattern="(\[#${PR_NUMBER}\](https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}))"
+                  pr_link_pattern="\[#${PR_NUMBER}\]\(https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER}\)"
+                  pr_link_grep_pattern="\[#${PR_NUMBER}\](https://github\.com/WordPress/gutenberg/pull/${PR_NUMBER})"
 
                   unreleased_section=$(sed -n '/^## Unreleased$/,/^## /p' "${changelog_path}")
 
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 230a971e8f39d..16a7eba93858c 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -180,11 +180,35 @@ jobs:
 
             - name: Running single site unit tests
               if: ${{ ! matrix.multisite }}
-              run: npm run test:unit:php
+              run: |
+                  set -o pipefail
+                  npm run test:unit:php | tee phpunit.log
 
             - name: Running multisite unit tests
               if: ${{ matrix.multisite }}
-              run: npm run test:unit:php:multisite
+              run: |
+                  set -o pipefail
+                  npm run test:unit:php:multisite | tee phpunit.log
+
+            # Verifies that PHPUnit actually runs in the first place. We want visibility
+            # into issues which can cause it to fail silently, so we check the output
+            # to verify that at least 500 tests have passed. This is an arbitrary
+            # number, but makes sure a drastic change doesn't happen without us noticing.
+            - name: Check number of passed tests
+              run: |
+                  # Note: relies on PHPUnit execution to fail on test failure.
+                  # Extract the number of executed tests from the log file.
+                  if ! num_tests=$(grep -Eo 'OK \([0-9]+ tests' phpunit.log) ; then
+                    if ! num_tests=$(grep -Eo 'Tests: [0-9]+, Assertions:' phpunit.log) ; then
+                      echo "PHPUnit failed or did not run. Check the PHPUnit output in the previous step to debug." && exit 1
+                    fi
+                  fi
+                  # Extract just the number of tests from the string.
+                  num_tests=$(echo "$num_tests" | grep -Eo '[0-9]+')
+                  if [ $num_tests -lt 500 ] ; then
+                    echo "Only $num_tests tests passed, which is much fewer than expected." && exit 1
+                  fi
+                  echo "$num_tests tests passed."
 
     phpcs:
         name: PHP coding standards
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
index e82091ff84374..3f1512ef0feb7 100644
--- a/bin/packages/build-worker.js
+++ b/bin/packages/build-worker.js
@@ -103,9 +103,13 @@ async function buildCSS( file ) {
 		'animations',
 		'z-index',
 	]
-		// Editor styles should be excluded from the default CSS vars output.
+		// Editor and component styles should be excluded from the default CSS vars output.
 		.concat(
-			file.includes( 'common.scss' ) || ! file.includes( 'block-library' )
+			file.includes( 'common.scss' ) ||
+				! (
+					file.includes( 'block-library' ) ||
+					file.includes( 'components' )
+				)
 				? [ 'default-custom-properties' ]
 				: []
 		)
diff --git a/bin/plugin/commands/changelog.js b/bin/plugin/commands/changelog.js
index dfee1faa50065..69be77ac66991 100644
--- a/bin/plugin/commands/changelog.js
+++ b/bin/plugin/commands/changelog.js
@@ -919,6 +919,10 @@ function getContributorProps( pullRequests ) {
 		getContributorPropsMarkdownList,
 	] )( pullRequests );
 
+	if ( ! contributorsList ) {
+		return '';
+	}
+
 	return (
 		'## First time contributors' +
 		'\n\n' +
diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js
index 0804c794e9d8e..57c6674500a22 100644
--- a/bin/plugin/commands/performance.js
+++ b/bin/plugin/commands/performance.js
@@ -3,7 +3,6 @@
  */
 const fs = require( 'fs' );
 const path = require( 'path' );
-const { mapValues } = require( 'lodash' );
 const SimpleGit = require( 'simple-git' );
 
 /**
@@ -475,10 +474,26 @@ async function runPerformanceTests( branches, options ) {
 					( r ) => r[ branch ][ dataPoint ]
 				);
 			} );
-			const medians = mapValues( resultsByDataPoint, median );
+			// @ts-ignore
+			const medians = Object.fromEntries(
+				Object.entries( resultsByDataPoint ).map(
+					( [ dataPoint, dataPointResults ] ) => [
+						dataPoint,
+						median( dataPointResults ),
+					]
+				)
+			);
 
 			// Format results as times.
-			results[ testSuite ][ branch ] = mapValues( medians, formatTime );
+			// @ts-ignore
+			results[ testSuite ][ branch ] = Object.fromEntries(
+				Object.entries( medians ).map(
+					( [ dataPoint, dataPointMedian ] ) => [
+						dataPoint,
+						formatTime( dataPointMedian ),
+					]
+				)
+			);
 		}
 	}
 
diff --git a/bin/plugin/commands/test/changelog.js b/bin/plugin/commands/test/changelog.js
index 6d201fbc27c96..52a9391af11d1 100644
--- a/bin/plugin/commands/test/changelog.js
+++ b/bin/plugin/commands/test/changelog.js
@@ -485,6 +485,11 @@ describe( 'getContributorProps', () => {
 		// npm run other:changelog -- --milestone="Gutenberg 11.3"
 		expect( getContributorProps( pullRequests ) ).toMatchSnapshot();
 	} );
+	test( 'do not include first time contributors section if there are not any', () => {
+		expect(
+			getContributorProps( pullRequests.slice( 0, 4 ) )
+		).toMatchInlineSnapshot( `""` );
+	} );
 } );
 
 describe( 'getContributorList', () => {
diff --git a/changelog.txt b/changelog.txt
index 79f119e74f776..c0eb6f61a62ae 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,9 +1,329 @@
 == Changelog ==
 
-= 15.7.0-rc.1 =
+= 15.8.0-rc.1 =
+
+## Changelog
+
+### Features
+
+- Add the command center to the post editor. ([50128](https://github.com/WordPress/gutenberg/pull/50128))
+- Add revisions UI. ([50089](https://github.com/WordPress/gutenberg/pull/50089))
+- Add Theme Previews for block themes. ([50030](https://github.com/WordPress/gutenberg/pull/50030))
+
+
+### Enhancements
+
+#### Global Styles
+- Fluid typography: Use `layout.wideSize` as max viewport width. ([49815](https://github.com/WordPress/gutenberg/pull/49815))
+- Global styles revisions: Remove human time diff and custom author fields from the API response. ([50234](https://github.com/WordPress/gutenberg/pull/50234))
+- Unify the global block styles panel with the block inspector panels. ([49428](https://github.com/WordPress/gutenberg/pull/49428))
+
+#### Post Editor
+- Add `<ViewLink>` component. ([50260](https://github.com/WordPress/gutenberg/pull/50260))
+- Update background color of post editor when viewing mobile or tablet viewports, or in template mode. ([50361](https://github.com/WordPress/gutenberg/pull/50361))
+- Display device icon on "preview" and "view" buttons. ([50218](https://github.com/WordPress/gutenberg/pull/50218))
+- Improve "switch to draft" placement. ([50217](https://github.com/WordPress/gutenberg/pull/50217))
+- Post Featured Image: New design for Replace and Remove buttons. ([50269](https://github.com/WordPress/gutenberg/pull/50269))
+
+#### Block Library
+- More intuitive Details block with summary and innerBlocks content. ([49808](https://github.com/WordPress/gutenberg/pull/49808))
+- Simplify cover block description. ([50355](https://github.com/WordPress/gutenberg/pull/50355))
+- Cover: Only show overlay controls when color support enabled. ([50115](https://github.com/WordPress/gutenberg/pull/50115))
+- Navigation: Hide color controls when color support is disabled. ([50368](https://github.com/WordPress/gutenberg/pull/50368))
+- Post Featured Image: Hide overlay controls when color support is disabled. ([50331](https://github.com/WordPress/gutenberg/pull/50331))
+- Social Icons: Hide color controls when color support is disabled. ([50275](https://github.com/WordPress/gutenberg/pull/50275))
+
+#### Fonts API
+- Separate BC Layer. ([50077](https://github.com/WordPress/gutenberg/pull/50077))
+
+#### Site Editor
+- Add the pages menu to the site editor. ([50463](https://github.com/WordPress/gutenberg/pull/50463))
+- Introduce new PluginTemplateSettingPanel slot. ([50257](https://github.com/WordPress/gutenberg/pull/50257))
+- Add chevrons to the templates and template parts in site editor. ([50076](https://github.com/WordPress/gutenberg/pull/50076))
+
+#### Components
+- Button: Add opt-in prop for next 40px default size. ([50254](https://github.com/WordPress/gutenberg/pull/50254))
+- Consolidate and add documentation to Storybook. ([50226](https://github.com/WordPress/gutenberg/pull/50226))
+- DimensionControl: Use WordPress package instead of react in code example. ([50435](https://github.com/WordPress/gutenberg/pull/50435))
+- FormTokenField, ComboboxControl: Add opt-in prop for next 40px default size. ([50261](https://github.com/WordPress/gutenberg/pull/50261))
+- Global Styles: Fix palette color popovers. ([49975](https://github.com/WordPress/gutenberg/pull/49975))
+- Relax link pattern matching in CHANGELOG CI check. ([50248](https://github.com/WordPress/gutenberg/pull/50248))
+- Remove custom padding for tertiary buttons. ([50276](https://github.com/WordPress/gutenberg/pull/50276))
+- Update `Autocomplete` usage example. ([49965](https://github.com/WordPress/gutenberg/pull/49965))
+- Update default accent color. ([50193](https://github.com/WordPress/gutenberg/pull/50193))
+- Update has-text has-icon button spacing. ([50277](https://github.com/WordPress/gutenberg/pull/50277))
+
+#### CSS & Styling
+- Polish confirm dialog padding. ([50283](https://github.com/WordPress/gutenberg/pull/50283))
+
+#### Template Editor
+- Remove `start blank` option in template pattern suggestions and add `skip` button. ([50099](https://github.com/WordPress/gutenberg/pull/50099))
+- Templates: Sort  by the rendered title instead of the slug. ([50353](https://github.com/WordPress/gutenberg/pull/50353))
+
+
+#### Block Editor
+- List View: Allow dragging to all levels of the block hierarchy. ([49742](https://github.com/WordPress/gutenberg/pull/49742))
+- Allow dragging-and-dropping images from the inserter to image blocks. ([49673](https://github.com/WordPress/gutenberg/pull/49673))
+- Try always showing the dimensions controls. ([50305](https://github.com/WordPress/gutenberg/pull/50305))
+- Adds a renderAdditionalBlockUI prop to ListView. ([50465](https://github.com/WordPress/gutenberg/pull/50465))
+- Update the expanded text color so that it works in both a dark and light context. ([50434](https://github.com/WordPress/gutenberg/pull/50434))
+- Enable Loginout block in Nav block. ([49160](https://github.com/WordPress/gutenberg/pull/49160))
+- Mark related selector as resolved when sideloading Navigation fallback. ([50324](https://github.com/WordPress/gutenberg/pull/50324))
+- Update Template Parts icon to use the symbol. ([50410](https://github.com/WordPress/gutenberg/pull/50410))
+- Use Core Data for Nav fallbacks and side load resulting entity into state. ([50032](https://github.com/WordPress/gutenberg/pull/50032))
+- Tweak copy for block settings menu "Insert..." to "Add...". ([50444](https://github.com/WordPress/gutenberg/pull/50444))
+- Block settings menu: Rearrange items. ([50453](https://github.com/WordPress/gutenberg/pull/50453))
+
+#### Rest API
+- Update image editor to use new REST API. ([28530](https://github.com/WordPress/gutenberg/pull/28530))
+
+
+
+### Bug Fixes
+
+#### Block Library
+- Center align button text in editor. ([50228](https://github.com/WordPress/gutenberg/pull/50228))
+- Comment Template Block: Set `commentId` context via filter. ([50279](https://github.com/WordPress/gutenberg/pull/50279))
+- Cover: Use overflow: clip, falling back to overflow: Hidden to allow sticky children (technically). ([50237](https://github.com/WordPress/gutenberg/pull/50237))
+- Ensure imported Classic Menu dirty state to include in Editor entity changes list. ([50318](https://github.com/WordPress/gutenberg/pull/50318))
+- File Block: Defer hiding PDF embeds for unsupported browsers until the page has loaded. ([50113](https://github.com/WordPress/gutenberg/pull/50113))
+- Fix template part area variation matching. ([49500](https://github.com/WordPress/gutenberg/pull/49500))
+- Fix the pocket casts embed variation. ([50132](https://github.com/WordPress/gutenberg/pull/50132))
+- Gallery: Fix inner block selection. ([50363](https://github.com/WordPress/gutenberg/pull/50363))
+- Post Terms: Use publicly_queryable to query taxonomies used to register variations. ([50244](https://github.com/WordPress/gutenberg/pull/50244))
+- Remove extraneous "Link" copy from PanelBody components. ([50186](https://github.com/WordPress/gutenberg/pull/50186))
+- Remove Quote transform from Group ([50424](https://github.com/WordPress/gutenberg/pull/50424))
+- [Post Featured Image]: Revert maxWidth addition. ([50427](https://github.com/WordPress/gutenberg/pull/50427))
+- [Post Title]: Insert default block on Enter at end. ([50312](https://github.com/WordPress/gutenberg/pull/50312))
+- Ensure that view scripts are correctly registered for core blocks. ([50364](https://github.com/WordPress/gutenberg/pull/50364))
+
+#### Global Styles
+- Close stylebook if the editor canvas container slot is not filled. ([50086](https://github.com/WordPress/gutenberg/pull/50086))
+- Fix positioning of gradient palette popovers on mobile. ([50233](https://github.com/WordPress/gutenberg/pull/50233))
+- Fix/wp get global styles for custom props returns internal variable. ([50366](https://github.com/WordPress/gutenberg/pull/50366))
+- Revisions controller: Fix author and date fields. ([50117](https://github.com/WordPress/gutenberg/pull/50117))
+- Fix hover/focus styles for `style variation` buttons. ([50056](https://github.com/WordPress/gutenberg/pull/50056))
+
+#### Block Editor
+- Fix issue with margin collapsing when selecting blocks. ([50215](https://github.com/WordPress/gutenberg/pull/50215))
+- List View / Block Draggable: Fix scroll to top issue when dragging the second last block in the list. ([50119](https://github.com/WordPress/gutenberg/pull/50119))
+- Multi-select: Capitalise B in blocks. ([50356](https://github.com/WordPress/gutenberg/pull/50356))
+- URLInput: Update the 'ENTER' key down event handler. ([50158](https://github.com/WordPress/gutenberg/pull/50158))
+- Update OffCanvas component's more menu to get clientId from block rather than passed in as prop. ([50473](https://github.com/WordPress/gutenberg/pull/50473))
+- Block Toolbar: Don't use effects for focus management. ([50497](https://github.com/WordPress/gutenberg/pull/50497))
+- Don't remount the block when the 'templateLock' is set to 'contentOnly'. ([50292](https://github.com/WordPress/gutenberg/pull/50292))
+
+#### Themes
+- Refactor theme previews. ([50338](https://github.com/WordPress/gutenberg/pull/50338))
+- Remove gutenberg plugin mention in schema. ([50207](https://github.com/WordPress/gutenberg/pull/50207))
+- Theme Preview: Restrict to admin users. ([50335](https://github.com/WordPress/gutenberg/pull/50335))
+- Theme Previews: Fix refactor. ([50354](https://github.com/WordPress/gutenberg/pull/50354))
+
+#### Site Editor
+- Display conditionally the `styles` in sidebar main navigation screen. ([50329](https://github.com/WordPress/gutenberg/pull/50329))
+- Remove canvas box shadow. ([50374](https://github.com/WordPress/gutenberg/pull/50374))
+- Save Button: Fix the label in the disabled state. ([50284](https://github.com/WordPress/gutenberg/pull/50284))
+- Remove white background on Site Editor 'Frame'. ([48970](https://github.com/WordPress/gutenberg/pull/48970))
+- Update some visual details in the add-template modal(s). ([50143](https://github.com/WordPress/gutenberg/pull/50143))
+
+#### Components
+- Spacing: Fix reset of spacing sizes control. ([50455](https://github.com/WordPress/gutenberg/pull/50455))
+- `NavigableContailer`: Do not trap focus in `TabbableContainer`. ([49846](https://github.com/WordPress/gutenberg/pull/49846))
+- Remove fill="none" from levelUp icon. ([50264](https://github.com/WordPress/gutenberg/pull/50264))
+
+
+#### Accessibility
+- Add missing tooltip to Site Editor navigation Back icon button. ([50104](https://github.com/WordPress/gutenberg/pull/50104))
+- Fix Multiple Tooltips from Focus Toolbar Shortcut on Widget Editor. ([50344](https://github.com/WordPress/gutenberg/pull/50344))
+- Site Editor Keyboard Navigation Flow. ([50296](https://github.com/WordPress/gutenberg/pull/50296))
+- Small improvements for the sidebars and Close buttons labeling. ([49614](https://github.com/WordPress/gutenberg/pull/49614))
+
+#### Design Tools
+- Changed so that borders and radius are maintained when Duotone is changed. ([50088](https://github.com/WordPress/gutenberg/pull/50088))
+- LineHeightControl: Fix application of zero values in editor. ([48917](https://github.com/WordPress/gutenberg/pull/48917))
+
+#### Fonts API
+- [Font API] Do not print in admin using 'admin_print_styles' for themes with theme.json. ([50259](https://github.com/WordPress/gutenberg/pull/50259))
+
+#### Widget Editor
+- Fixes fixed block toolbar in widgets editor. ([50371](https://github.com/WordPress/gutenberg/pull/50371))
+
+
+### Performance
+- Improve Site Editor loading experience([50222](https://github.com/WordPress/gutenberg/pull/50222))
+
+
+### Experiments
+
+#### Interactivity API
+- Add Interactivity API runtime. ([49994](https://github.com/WordPress/gutenberg/pull/49994))
+- Navigation block with the Interactivity API. ([50041](https://github.com/WordPress/gutenberg/pull/50041))
+
+#### Command Center
+- Update the experiment label. ([50467](https://github.com/WordPress/gutenberg/pull/50467))
+- Add an API to open/close the command center. ([50423](https://github.com/WordPress/gutenberg/pull/50423))
+- Fix a style glitch on Safari. ([50138](https://github.com/WordPress/gutenberg/pull/50138))
+- Add a button to open it from the site editor view mode. ([50425](https://github.com/WordPress/gutenberg/pull/50425))
+- Do not show dynamic add new post, add new page commands. ([50221](https://github.com/WordPress/gutenberg/pull/50221))
+- Extract the WordPress reusable commands to a dedicated package. ([49956](https://github.com/WordPress/gutenberg/pull/49956))
+- Fix command menu not re-opening after closing it. ([50213](https://github.com/WordPress/gutenberg/pull/50213))
+
+
+### Documentation
+
+- Add changelog for eslint-plugin validating dependencies in `useSelect` and `useSuspenseSelect` hooks. ([50247](https://github.com/WordPress/gutenberg/pull/50247))
+- Add client-side filter reference to Curating the Editor doc and fix links. ([50203](https://github.com/WordPress/gutenberg/pull/50203))
+- Add missing closing parenthesis in code example. ([50253](https://github.com/WordPress/gutenberg/pull/50253))
+- Adds example to change the permalink structure. ([50251](https://github.com/WordPress/gutenberg/pull/50251))
+- Adds links to REST-API reference. ([50070](https://github.com/WordPress/gutenberg/pull/50070))
+- Create-block script includes link to documentation in render.php file. ([50206](https://github.com/WordPress/gutenberg/pull/50206))
+- Block API > Registration: Switch markdown to a-tags. ([50110](https://github.com/WordPress/gutenberg/pull/50110))
+- Don't use markdown in the callout section. ([50437](https://github.com/WordPress/gutenberg/pull/50437))
+- Remove  mention of perf testing from release documentation. ([50345](https://github.com/WordPress/gutenberg/pull/50345))
+- Update Callout documentation on links. ([50131](https://github.com/WordPress/gutenberg/pull/50131))
+- Fix incorrect label in contributor docs. ([50201](https://github.com/WordPress/gutenberg/pull/50201))
+- Fix minor formatting issues in Performance doc. ([50202](https://github.com/WordPress/gutenberg/pull/50202))
+- Fixes incorrect URLs in doc blocks. ([50123](https://github.com/WordPress/gutenberg/pull/50123))
+- Use alert callout in the block deprecation documentation. ([50286](https://github.com/WordPress/gutenberg/pull/50286))
+- Improve CardMedia documentation. ([50074](https://github.com/WordPress/gutenberg/pull/50074))
+- Update README of TreeGrid with data-expanded attribute usage. ([50026](https://github.com/WordPress/gutenberg/pull/50026))
+
+
+### Code Quality
+
+- Block Editor: Directly import useShouldContextualToolbarShow hook. ([50506](https://github.com/WordPress/gutenberg/pull/50506))
+- BlockControls, InspectorControls: Remove useSlot, unify behavior on bad group. ([50198](https://github.com/WordPress/gutenberg/pull/50198))
+- Enqueue registered block assets and resolve iframe styles end-to-end failure. ([50185](https://github.com/WordPress/gutenberg/pull/50185))
+- Make eslint-plugin validate dependencies in `useSelect` and `useSuspenseSelect` hooks. ([49900](https://github.com/WordPress/gutenberg/pull/49900))
+- Save Hub: Reuse the save button component to save code. ([50145](https://github.com/WordPress/gutenberg/pull/50145))
+- Use apiFetch instead of window.fetch. ([50043](https://github.com/WordPress/gutenberg/pull/50043))
+- Add types to dispatch and select. ([49930](https://github.com/WordPress/gutenberg/pull/49930))
+- Remove duplicate comment. ([50304](https://github.com/WordPress/gutenberg/pull/50304))
+
+#### Lodash removal
+- Remove from blocks store reducer. ([50471](https://github.com/WordPress/gutenberg/pull/50471))
+- Remove `_.mapValues()` from `getBlockContentSchemaFromTransforms`. ([50096](https://github.com/WordPress/gutenberg/pull/50096))
+- Refactor away from `_.mapValues()`. ([50285](https://github.com/WordPress/gutenberg/pull/50285))
+- Remove `_.mapValues()` from blocks reducer. ([50097](https://github.com/WordPress/gutenberg/pull/50097))
+
+#### Components
+- Fix incorrect focus style widths. ([50127](https://github.com/WordPress/gutenberg/pull/50127))
+- Refactor/toolbar item component to typescript. ([49190](https://github.com/WordPress/gutenberg/pull/49190))
+- SlotFill: Several code cleanups. ([50098](https://github.com/WordPress/gutenberg/pull/50098))
+- SlotFill: Some code cleanups of the bubblesVirtually version. ([50133](https://github.com/WordPress/gutenberg/pull/50133))
+- Convert `NavigableContainer` to TypeScript. ([49377](https://github.com/WordPress/gutenberg/pull/49377))
+
+#### Block Editor
+- Block Editor: Add names for the 'editor.BlockListBlock' filter HoCs. ([50513](https://github.com/WordPress/gutenberg/pull/50513))
+- Refactor around missing dependency in Link Control internal value sync effect. ([49509](https://github.com/WordPress/gutenberg/pull/49509))
+- Don't export Slot/Fill constants separately. ([50274](https://github.com/WordPress/gutenberg/pull/50274))
+
+#### Block Library
+- Centralize constants for the navigation block. ([50191](https://github.com/WordPress/gutenberg/pull/50191))
+- Move deprecated Nav block functions to bottom of render file. ([50328](https://github.com/WordPress/gutenberg/pull/50328))
+- Refactor BlockList uses Hooks. ([50293](https://github.com/WordPress/gutenberg/pull/50293))
+
+#### List View
+- Replace OffCanvasEditor in browse mode with the List View component. ([50287](https://github.com/WordPress/gutenberg/pull/50287))
+- Use block select button class for retaining colors when expanded or hovered. ([50155](https://github.com/WordPress/gutenberg/pull/50155))
+
+#### Global Styles
+- Global styles revisions: Ensure the revisions endpoint permissions match the global styles controller. ([50270](https://github.com/WordPress/gutenberg/pull/50270))
+- Simplify CustomCSS UI. ([49721](https://github.com/WordPress/gutenberg/pull/49721))
+
+#### Plugin
+- Update REST API Controller PHPUnit tests. ([50120](https://github.com/WordPress/gutenberg/pull/50120))
+- Update the Gutenberg plugin to require at least the WP 6.1 version. ([50079](https://github.com/WordPress/gutenberg/pull/50079))
+- Update the tested up to version for the gutenberg plugin. ([50360](https://github.com/WordPress/gutenberg/pull/50360))
+
+#### Native
+- Add a few import required for the React Native wrapper distribution as iOS XCFramework. ([50009](https://github.com/WordPress/gutenberg/pull/50009))
+
+#### Site Editor
+- Extract the Router APIs and context into a dedicated package. ([50100](https://github.com/WordPress/gutenberg/pull/50100))
+- Move loading logic to a separate hook. ([50511](https://github.com/WordPress/gutenberg/pull/50511))
+
+
+
+### Tools
+
+#### wp-env
+- Add `wp-env` After Setup Command. ([50196](https://github.com/WordPress/gutenberg/pull/50196))
+- Fix wp-env destroy. ([50445](https://github.com/WordPress/gutenberg/pull/50445))
+- Refactored `wp-env` configuration Parsing. ([50071](https://github.com/WordPress/gutenberg/pull/50071))
+- Wp-env fix exec command in CI. ([50411](https://github.com/WordPress/gutenberg/pull/50411))
+- wp-env: Add better default PHPunit settings, fix Xdebug, and update documentation. ([50490](https://github.com/WordPress/gutenberg/pull/50490))
+- wp-env: Improve run command execution speed. ([50007](https://github.com/WordPress/gutenberg/pull/50007))
+- Cleaned up Port Validation and Removed Unnecessary Default Ports. ([50300](https://github.com/WordPress/gutenberg/pull/50300))
+- Match Container's User and Group to Host. ([49962](https://github.com/WordPress/gutenberg/pull/49962))
+
+#### Testing
+- Add end-to-end test for editing the title of a new custom template part. ([50195](https://github.com/WordPress/gutenberg/pull/50195))
+- Add test to verify image appears on frontend. ([50472](https://github.com/WordPress/gutenberg/pull/50472))
+- Add tests coverage for the navigation block frontend interactivity. ([50462](https://github.com/WordPress/gutenberg/pull/50462))
+- Migrate Adding Patterns Test to Playwright. ([50083](https://github.com/WordPress/gutenberg/pull/50083))
+- Migrate Keep Transform Block Test Case to Playwright. ([49719](https://github.com/WordPress/gutenberg/pull/49719))
+- Migrate PullQuote test case to playwright. ([50085](https://github.com/WordPress/gutenberg/pull/50085))
+- Migrate undo to Playwright. ([48701](https://github.com/WordPress/gutenberg/pull/48701))
+- Prerelease end-to-end Test Utils for Playwright. ([43998](https://github.com/WordPress/gutenberg/pull/43998))
+- Skip creating flaky issues on PRs. ([50146](https://github.com/WordPress/gutenberg/pull/50146))
+- end-to-end tests: Try to fix flaky global styles revisions tests. ([50454](https://github.com/WordPress/gutenberg/pull/50454))
+- Add BlockList text coverage. ([50252](https://github.com/WordPress/gutenberg/pull/50252))
+
+#### Build Tooling
+- Changelog automation: Apply proper top-level categorization precedence to meta PRs. ([50208](https://github.com/WordPress/gutenberg/pull/50208))
+- Do not include first time contributors section in changelog if there are not any. ([50291](https://github.com/WordPress/gutenberg/pull/50291))
+- Publish rich text build types. ([49651](https://github.com/WordPress/gutenberg/pull/49651))
+- Rich text: Rename index.js > index.ts for type-only exports. ([50212](https://github.com/WordPress/gutenberg/pull/50212))
+- Remove PHPUnit and Composer packages. ([50408](https://github.com/WordPress/gutenberg/pull/50408))
+
+#### Repository Maintainance
+- Add ndiego as codeowner for docs. ([50289](https://github.com/WordPress/gutenberg/pull/50289))
+
+
+## First time contributors
+
+The following PRs were merged by first time contributors:
+
+- @johnhooks: feature(data): Add types to dispatch and select. ([49930](https://github.com/WordPress/gutenberg/pull/49930))
+- @margolisj: Refactor/toolbar item component to typescript. ([49190](https://github.com/WordPress/gutenberg/pull/49190))
+- @n2erjo00: Create-block script includes link to documentation in render.php file. ([50206](https://github.com/WordPress/gutenberg/pull/50206))
+- @samnajian: Fix/wp get global styles for custom props returns internal variable. ([50366](https://github.com/WordPress/gutenberg/pull/50366))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @ajlende @alexstine @andrewserong @apeatling @artemiomorales @aurooba @bph @chad1008 @ciampo @DAreRodz @dcalhoun @draganescu @ecgan @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hellofromtonya @ironprogrammer @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @jsnajdr @juanfra @kevin940726 @kienstra @Mamaduka @margolisj @mburridge @mirka @mokagio @mtias @n2erjo00 @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ocean90 @ockham @pavanpatil1 @pooja-muchandikar @priethor @ramonjd @richtabor @samnajian @SantosGuillamot @scruffian @SiobhyB @t-hamano @talldan @tellthemachines @torounit @tyxla @westonruter @youknowriad
+
+
+= 15.7.1 =
 
 
 
+## Changelog
+
+### Enhancements
+
+#### Fonts API
+- Relocate which fonts to print into wp_print_fonts(). ([50151](https://github.com/WordPress/gutenberg/pull/50151))
+
+
+### Tools
+
+#### Testing
+- Skip  iframe-inline-styles end-to-end test. ([50320](https://github.com/WordPress/gutenberg/pull/50320))
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@hellofromtonya @scruffian
+
+
+= 15.7.0 =
+
 ## Changelog
 
 ### Enhancements
@@ -57,6 +377,8 @@
 - Adjust copy of Site Logo Block. ([49540](https://github.com/WordPress/gutenberg/pull/49540))
 - Adapt flex child controls for Spacer. ([49362](https://github.com/WordPress/gutenberg/pull/49362))
 - Social Icon: Update the `link` and `mail` block variation's icons. ([49952](https://github.com/WordPress/gutenberg/pull/49952))
+- Cover: Re-instate overflow:Hidden rule to fix issue with border radius. ([50209](https://github.com/WordPress/gutenberg/pull/50209))
+- Fix site logo preview image size with long filenames. ([50242](https://github.com/WordPress/gutenberg/pull/50242))
 
 #### Components
 - CheckboxControl: Add support custom IDs. ([49977](https://github.com/WordPress/gutenberg/pull/49977))
@@ -76,6 +398,7 @@
 - Do not add unregistered style variations to the theme.json schema. ([49807](https://github.com/WordPress/gutenberg/pull/49807))
 - Update preset styles to use Selectors API. ([49427](https://github.com/WordPress/gutenberg/pull/49427))
 - Change the 'WP_Theme_JSON_Data_Gutenberg' class directory. ([50062](https://github.com/WordPress/gutenberg/pull/50062))
+- Layout: Fix issue where saving user global styles included layout definitions in layout settings. ([50268](https://github.com/WordPress/gutenberg/pull/50268))
 
 #### Site Editor
 - Fix screen flash when deleting templates in templates list. ([48449](https://github.com/WordPress/gutenberg/pull/48449))
@@ -88,7 +411,7 @@
 - Correctly return 'isResolving' from 'useAlternativeTemplateParts' hook. ([49921](https://github.com/WordPress/gutenberg/pull/49921))
 
 #### Patterns
-- Increase dimensions of the pattern modal that appears when creating a new page. ([49859](https://github.com/WordPress/gutenberg/pull/49859))
+- Increase the dimensions of the pattern modal that appears when creating a new page. ([49859](https://github.com/WordPress/gutenberg/pull/49859))
 - Update full screen modal dimensions, and pattern grids. ([49894](https://github.com/WordPress/gutenberg/pull/49894))
 - Increase pattern modal dimensions when creating a new template. ([49722](https://github.com/WordPress/gutenberg/pull/49722))
 
@@ -206,6 +529,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @adamziel @ajlende @alexstine @andrewserong @annziel @aurooba @bdurette @bph @carolinan @chad1008 @chintu51 @courtneyr-dev @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @gaambo @geriux @getdave @gigitux @guarani @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jasmussen @jeryj @jhnstn @jsnajdr @juanmaguitar @kevin940726 @m0hanraj @MaggieCabrera @MahendraBishnoi29 @Mamaduka @masteradhoc @mburridge @mcsf @mikachan @mirka @mokagio @mtias @ndiego @noahtallen @ntsekouras @oandregal @ObliviousHarmony @priethor @ramonjd @scruffian @SiobhyB @Soean @sque89 @t-hamano @talldan @tellthemachines @tyrann0us @tyxla @Wtower @youknowriad @zzap
 
 
+
+
 = 15.6.2 =
 
 
diff --git a/docs/contributors/code/release.md b/docs/contributors/code/release.md
index 8d9f46120d2f5..3dd8863859e37 100644
--- a/docs/contributors/code/release.md
+++ b/docs/contributors/code/release.md
@@ -17,7 +17,7 @@ We release a new major version approximately every two weeks. The current and ne
 
 -   **On the date of the current milestone**, we publish a release candidate and make it available for plugin authors and users to test. If any regressions are found with a release candidate, a new one can be published. On this date, all remaining PRs on the milestone are moved automatically to the next release. Release candidates should be versioned incrementally, starting with `-rc.1`, then `-rc.2`, and so on. [Preparation of the release post starts here](/docs/block-editor/contributors/code/release/#writing-the-release-notes-and-post) and spans until the final release.
 
--   **One week after the first release candidate**, the stable version is created based on the last release candidate and any necessary regression fixes. Once the stable version is released, the release post is published, including a [performance audit](/docs/block-editor/contributors/testing-overview/#performance-testing).
+-   **One week after the first release candidate**, the stable version is created based on the last release candidate and any necessary regression fixes. Once the stable version is released and the release post is published.  
 
 If critical bugs are discovered on stable versions of the plugin, patch versions can be released at any time.
 
@@ -103,8 +103,7 @@ Documenting the release is a group effort between the release manager, Gutenberg
 1. Curating the changelog - Wednesday after the RC release to Friday
 2. Selecting the release highlights - Friday to Monday
 3. Drafting the release post - Monday to Wednesday
-4. Running the performance tests - Wednesday right after the stable release
-5. Publishing the post - Wednesday after stable release
+4. Publishing the post - Wednesday after stable release
 
 #### 1. Curating the changelog
 
@@ -140,21 +139,6 @@ When possible, the highlighted changes in the release post should include an ani
 
 These visual assets should maintain consistency with previous release posts; using lean, white themes helps in this regard and visually integrate well with the [make.wordpress.org/core](https://make.wordpress.org/core/) blog aesthetics. Including copyrighted material should be avoided, and browser plugins that can be seen in the browser canvas (spell checkers, form fillers, etc.) disabled when capturing the assets.
 
-#### 4. Running the performance tests
-
-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 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:
-
--   Time to the first block (test named `firstBlock`)
--   KeyPress Event (typing) (test named `type`)
-
 #### 5. Publishing the post
 
 Once the post content is ready, an author already having permissions to post in [make.wordpress.org/core](https://make.wordpress.org/core/) will create a new draft and import the content; this post should be published after the actual release, helping external media to echo and amplify the release news. Remember asking for peer review is encouraged by the [make/core posting guidelines](https://make.wordpress.org/core/handbook/best-practices/post-comment-guidelines/#peer-review)!
@@ -165,7 +149,7 @@ Occasionally it's necessary to create a minor release (i.e. X.Y.**Z**) of the Pl
 
 As you proceed with the following process, it's worth bearing in mind that such minor releases are not created as branches in their own right (e.g. `release/12.5.0`) but are simply [tags](https://github.com/WordPress/gutenberg/releases/tag/v12.5.1).
 
-The method for minor releases is nearly identical to the main Plugin release process (see above) but has some notable exceptions. Please make sure to read _the whole_ of this guide before proceeding.
+The method for minor releases is nearly identical to the main Plugin release process (see above) but has some notable exceptions. Please make sure to read _the entire_ guide before proceeding.
 
 #### Updating the release branch
 
@@ -217,7 +201,7 @@ This is expected. The draft release will contain only the plugin zip. Only once
 
 > Do I need to publish point releases to WordPress.org?
 
-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.
+Yes. The method for this is identical to the main Plugin release process. You will need a member of the Gutenberg Core team the Gutenberg Release team to approve the release workflow.
 
 > The release process failed to cherry-pick version bump commit to the trunk branch.
 
diff --git a/docs/explanations/faq.md b/docs/explanations/faq.md
index f9c6b059e133d..4a365ce5b41d1 100644
--- a/docs/explanations/faq.md
+++ b/docs/explanations/faq.md
@@ -151,7 +151,7 @@ This is the canonical list of keyboard shortcuts:
 			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd></td>
 		</tr>
 		<tr>
-			<td>Show or hide the settings sidebar.</td>
+			<td>Show or hide the Settings sidebar.</td>
 			<td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>,</kbd></td>
 			<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
 		</tr>
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 5956f36d52563..4a3dc8f70a85e 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -1174,7 +1174,7 @@ Currently block variations exist for "header" and "footer" values of the area te
 
 ### patterns
 
-<div class="callout callout-alert">Supported in WordPress from version 6.0 using [version 2](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/) of `theme.json`.</div>
+<div class="callout callout-alert">Supported in WordPress from version 6.0 using <a href="https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/">version 2</a> of <code>theme.json</code>.</div>
 
 Within this field themes can list patterns to register from [Pattern Directory](https://wordpress.org/patterns/). The `patterns` field is an array of pattern `slugs` from the Pattern Directory. Pattern slugs can be extracted by the `url` in single pattern view at the Pattern Directory. For example in this url `https://wordpress.org/patterns/pattern/partner-logos` the slug is `partner-logos`.
 
diff --git a/docs/manifest.json b/docs/manifest.json
index 304acd00a79ea..8b6677d39c559 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1577,6 +1577,12 @@
 		"markdown_source": "../packages/dom/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/e2e-test-utils-playwright",
+		"slug": "packages-e2e-test-utils-playwright",
+		"markdown_source": "../packages/e2e-test-utils-playwright/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/e2e-test-utils",
 		"slug": "packages-e2e-test-utils",
diff --git a/docs/reference-guides/block-api/block-deprecation.md b/docs/reference-guides/block-api/block-deprecation.md
index 7154f84072e61..d40c13c040612 100644
--- a/docs/reference-guides/block-api/block-deprecation.md
+++ b/docs/reference-guides/block-api/block-deprecation.md
@@ -55,7 +55,9 @@ Deprecations are defined on a block type as its `deprecated` property, an array
 	- _Return_
 		- `boolean`: Whether or not this otherwise valid block is eligible to be migrated by this deprecation.
 
-It's important to note that `attributes`, `supports`, and `save` are not automatically inherited from the current version, since they can impact parsing and serialization of a block, so they must be defined on the deprecated object in order to be processed during a migration.
+<div class="callout callout-alert">
+It's important to note that <code>attributes</code>, <code>supports</code>, and <code>save</code> are not automatically inherited from the current version, since they can impact parsing and serialization of a block, so they must be defined on the deprecated object in order to be processed during a migration.
+</div>
 
 ### Example:
 
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 751fe394962f6..25790ba3ab4e9 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -226,7 +226,7 @@ Displays a title with the number of comments ([Source](https://github.com/WordPr
 
 ## Cover
 
-Add an image or video with a text overlay — great for headers. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover))
+Add an image or video with a text overlay. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/cover))
 
 -	**Name:** core/cover
 -	**Category:** media
@@ -235,30 +235,12 @@ Add an image or video with a text overlay — great for headers. ([Source](https
 
 ## Details
 
-A block that displays a summary and shows or hides additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
+Hide and show additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
 
 -	**Name:** core/details
 -	**Category:** text
--	**Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** showContent
-
-## Details Content
-
-Add content that may be shown or hidden via a Details block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-content))
-
--	**Name:** core/details-content
--	**Category:** text
--	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
--	**Attributes:** 
-
-## Details Summary
-
-Provide summary text used to toggle the display of content inside a Details block. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details-summary))
-
--	**Name:** core/details-summary
--	**Category:** text
--	**Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~align~~, ~~html~~, ~~lock~~, ~~multiple~~, ~~reusable~~
--	**Attributes:** summary
+-	**Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** showContent, summary
 
 ## Embed
 
@@ -383,7 +365,7 @@ Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree
 
 -	**Name:** core/loginout
 -	**Category:** theme
--	**Supports:** anchor, className, typography (~~fontSize~~)
+-	**Supports:** anchor, className, typography (fontSize, lineHeight)
 -	**Attributes:** displayLoginAsForm, redirectToCurrent
 
 ## Media & Text
diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
index ca925ef741e77..1ee04e09550e2 100644
--- a/docs/reference-guides/data/data-core.md
+++ b/docs/reference-guides/data/data-core.md
@@ -126,6 +126,18 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Object | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.
@@ -317,6 +329,18 @@ _Returns_
 
 -   `any`: The entity record's save error.
 
+### getNavigationFallbackId
+
+Retrieve the fallback Navigation.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `EntityRecordKey | undefined`: The ID for the fallback Navigation post.
+
 ### getRawEntityRecord
 
 Returns the entity's record object by key, with its attributes mapped to their raw values.
@@ -607,6 +631,18 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveNavigationFallbackId
+
+Returns an action object signalling that the fallback Navigation Menu id has been received.
+
+_Parameters_
+
+-   _fallbackId_ `integer`: the id of the fallback Navigation Menu
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveThemeSupports
 
 > **Deprecated** since WP 5.9, this is not useful anymore, use the selector direclty.
diff --git a/gutenberg.php b/gutenberg.php
index 6a5b12a03f26f..ce72c8eb81e4c 100644
--- a/gutenberg.php
+++ b/gutenberg.php
@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.1
  * Requires PHP: 5.6
- * Version: 15.7.0-rc.1
+ * Version: 15.8.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
new file mode 100644
index 0000000000000..c0f514da8d85e
--- /dev/null
+++ b/lib/block-editor-settings.php
@@ -0,0 +1,82 @@
+<?php
+/**
+ * Adds settings to the block editor.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds styles and __experimentalFeatures to the block editor settings.
+ *
+ * Note: The settings that are WP version specific should be handled inside the `compat` directory.
+ *
+ * @param array $settings Existing block editor settings.
+ *
+ * @return array New block editor settings.
+ */
+function gutenberg_get_block_editor_settings( $settings ) {
+	// Recreate global styles.
+	$global_styles = array();
+	$presets       = array(
+		array(
+			'css'            => 'variables',
+			'__unstableType' => 'presets',
+			'isGlobalStyles' => true,
+		),
+		array(
+			'css'            => 'presets',
+			'__unstableType' => 'presets',
+			'isGlobalStyles' => true,
+		),
+	);
+	foreach ( $presets as $preset_style ) {
+		$actual_css = gutenberg_get_global_stylesheet( array( $preset_style['css'] ) );
+		if ( '' !== $actual_css ) {
+			$preset_style['css'] = $actual_css;
+			$global_styles[]     = $preset_style;
+		}
+	}
+
+	if ( wp_theme_has_theme_json() ) {
+		$block_classes = array(
+			'css'            => 'styles',
+			'__unstableType' => 'theme',
+			'isGlobalStyles' => true,
+		);
+		$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
+		if ( '' !== $actual_css ) {
+			$block_classes['css'] = $actual_css;
+			$global_styles[]      = $block_classes;
+		}
+
+		/*
+		 * Add the custom CSS as a separate stylesheet so any invalid CSS
+		 * entered by users does not break other global styles.
+		 */
+		$global_styles[] = array(
+			'css'            => gutenberg_get_global_styles_custom_css(),
+			'__unstableType' => 'user',
+			'isGlobalStyles' => true,
+		);
+	} else {
+		// If there is no `theme.json` file, ensure base layout styles are still available.
+		$block_classes = array(
+			'css'            => 'base-layout-styles',
+			'__unstableType' => 'base-layout',
+			'isGlobalStyles' => true,
+		);
+		$actual_css    = gutenberg_get_global_stylesheet( array( $block_classes['css'] ) );
+		if ( '' !== $actual_css ) {
+			$block_classes['css'] = $actual_css;
+			$global_styles[]      = $block_classes;
+		}
+	}
+
+	$settings['styles'] = array_merge( $global_styles, get_block_editor_theme_styles() );
+
+	// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
+	$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', PHP_INT_MAX );
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 8fc7a9bdcafb3..f1d29217e3883 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -265,12 +265,11 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array()
 		return null;
 	}
 
-	// Converts numeric values to pixel values by default.
 	if ( empty( $raw_value ) ) {
 		return null;
 	}
 
-	// Converts numbers to pixel values by default.
+	// Converts numeric values to pixel values by default.
 	if ( is_numeric( $raw_value ) ) {
 		$raw_value = $raw_value . 'px';
 	}
@@ -429,7 +428,10 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	}
 
 	// Checks if fluid font sizes are activated.
-	$typography_settings         = gutenberg_get_global_settings( array( 'typography' ) );
+	$global_settings     = gutenberg_get_global_settings();
+	$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
+	$layout_settings     = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
+
 	$should_use_fluid_typography
 		= isset( $typography_settings['fluid'] ) &&
 		( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ?
@@ -443,7 +445,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
 	$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
 
 	// Defaults.
-	$default_maximum_viewport_width       = '1600px';
+	$default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
 	$default_minimum_viewport_width       = '320px';
 	$default_minimum_font_size_factor_max = 0.75;
 	$default_minimum_font_size_factor_min = 0.25;
diff --git a/lib/blocks.php b/lib/blocks.php
index 5fd004c007ad4..8ed03ee04de04 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -23,8 +23,6 @@ function gutenberg_reregister_core_block_types() {
 				'columns',
 				'comments',
 				'details',
-				'details-content',
-				'details-summary',
 				'group',
 				'html',
 				'list',
@@ -139,8 +137,6 @@ function gutenberg_reregister_core_block_types() {
 		$block_folders = $details['block_folders'];
 		$block_names   = $details['block_names'];
 
-		$registry = WP_Block_Type_Registry::get_instance();
-
 		foreach ( $block_folders as $folder_name ) {
 			$block_json_file = $blocks_dir . $folder_name . '/block.json';
 
@@ -152,10 +148,7 @@ function gutenberg_reregister_core_block_types() {
 				continue;
 			}
 
-			if ( $registry->is_registered( $metadata['name'] ) ) {
-				$registry->unregister( $metadata['name'] );
-			}
-
+			gutenberg_deregister_core_block_and_assets( $metadata['name'] );
 			gutenberg_register_core_block_assets( $folder_name );
 			register_block_type_from_metadata( $block_json_file );
 		}
@@ -167,9 +160,7 @@ function gutenberg_reregister_core_block_types() {
 
 			$sub_block_names_normalized = is_string( $sub_block_names ) ? array( $sub_block_names ) : $sub_block_names;
 			foreach ( $sub_block_names_normalized as $block_name ) {
-				if ( $registry->is_registered( $block_name ) ) {
-					$registry->unregister( $block_name );
-				}
+				gutenberg_deregister_core_block_and_assets( $block_name );
 				gutenberg_register_core_block_assets( $block_name );
 			}
 
@@ -180,6 +171,28 @@ function gutenberg_reregister_core_block_types() {
 
 add_action( 'init', 'gutenberg_reregister_core_block_types' );
 
+/**
+ * Deregisters the existing core block type and its assets.
+ *
+ * @param string $block_name The name of the block.
+ *
+ * @return void
+ */
+function gutenberg_deregister_core_block_and_assets( $block_name ) {
+	$registry = WP_Block_Type_Registry::get_instance();
+	if ( $registry->is_registered( $block_name ) ) {
+		$block_type = $registry->get_registered( $block_name );
+		if ( ! empty( $block_type->view_script_handles ) ) {
+			foreach ( $block_type->view_script_handles as $view_script_handle ) {
+				if ( str_starts_with( $view_script_handle, 'wp-block-' ) ) {
+					wp_deregister_script( $view_script_handle );
+				}
+			}
+		}
+		$registry->unregister( $block_name );
+	}
+}
+
 /**
  * Registers block styles for a core block.
  *
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index fbbf9a05d1c81..dc9c25c8f90a5 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -795,7 +795,7 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n
 			if ( empty( $result ) ) {
 				unset( $output[ $subtree ] );
 			} else {
-				$output[ $subtree ] = $result;
+				$output[ $subtree ] = static::resolve_custom_css_format( $result );
 			}
 		}
 
@@ -1928,10 +1928,6 @@ protected static function compute_style_properties( $styles, $settings = array()
 	/**
 	 * Returns the style property for the given path.
 	 *
-	 * It also converts CSS Custom Property stored as
-	 * "var:preset|color|secondary" to the form
-	 * "--wp--preset--color--secondary".
-	 *
 	 * It also converts references to a path to the value
 	 * stored at that location, e.g.
 	 * { "ref": "style.color.background" } => "#fff".
@@ -1989,20 +1985,6 @@ protected static function get_property_value( $styles, $path, $theme_json = null
 			return $value;
 		}
 
-		// Convert custom CSS properties.
-		$prefix     = 'var:';
-		$prefix_len = strlen( $prefix );
-		$token_in   = '|';
-		$token_out  = '--';
-		if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
-			$unwrapped_name = str_replace(
-				$token_in,
-				$token_out,
-				substr( $value, $prefix_len )
-			);
-			$value          = "var(--wp--$unwrapped_name)";
-		}
-
 		return $value;
 	}
 
@@ -3578,4 +3560,51 @@ protected function get_feature_declarations_for_node( $metadata, &$node ) {
 
 		return $declarations;
 	}
+
+	/**
+	 * This is used to convert the internal representation of variables to the CSS representation.
+	 * For example, `var:preset|color|vivid-green-cyan` becomes `var(--wp--preset--color--vivid-green-cyan)`.
+	 *
+	 * @since 6.3.0
+	 * @param string $value The variable such as var:preset|color|vivid-green-cyan to convert.
+	 * @return string The converted variable.
+	 */
+	private static function convert_custom_properties( $value ) {
+		$prefix     = 'var:';
+		$prefix_len = strlen( $prefix );
+		$token_in   = '|';
+		$token_out  = '--';
+		if ( 0 === strpos( $value, $prefix ) ) {
+			$unwrapped_name = str_replace(
+				$token_in,
+				$token_out,
+				substr( $value, $prefix_len )
+			);
+			$value          = "var(--wp--$unwrapped_name)";
+		}
+
+		return $value;
+	}
+
+	/**
+	 * Given a tree, converts the internal representation of variables to the CSS representation.
+	 * It is recursive and modifies the input in-place.
+	 *
+	 * @since 6.3.0
+	 * @param array $tree   Input to process.
+	 * @return array The modified $tree.
+	 */
+	private static function resolve_custom_css_format( $tree ) {
+		$prefix = 'var:';
+
+		foreach ( $tree as $key => $data ) {
+			if ( is_string( $data ) && 0 === strpos( $data, $prefix ) ) {
+				$tree[ $key ] = self::convert_custom_properties( $data );
+			} elseif ( is_array( $data ) ) {
+				$tree[ $key ] = self::resolve_custom_css_format( $data );
+			}
+		}
+
+		return $tree;
+	}
 }
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 9c0483ea539b9..9757e4b7ff24a 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -77,16 +77,8 @@ function gutenberg_override_script( $scripts, $handle, $src, $deps = array(), $v
 		$scripts->add( $handle, $src, $deps, $ver, ( $in_footer ? 1 : null ) );
 	}
 
-	/*
-	 * `WP_Dependencies::set_translations` will fall over on itself if setting
-	 * translations on the `wp-i18n` handle, since it internally adds `wp-i18n`
-	 * as a dependency of itself, exhausting memory. The same applies for the
-	 * polyfill and hooks scripts, which are dependencies _of_ `wp-i18n`.
-	 *
-	 * See: https://core.trac.wordpress.org/ticket/46089
-	 */
-	if ( ! in_array( $handle, array( 'wp-i18n', 'wp-polyfill', 'wp-hooks' ), true ) ) {
-		$scripts->set_translations( $handle, 'default' );
+	if ( in_array( 'wp-i18n', $deps, true ) ) {
+		$scripts->set_translations( $handle );
 	}
 
 	/*
diff --git a/lib/compat/wordpress-6.2/block-editor-settings.php b/lib/compat/wordpress-6.2/block-editor-settings.php
deleted file mode 100644
index 593a8b7e6b55f..0000000000000
--- a/lib/compat/wordpress-6.2/block-editor-settings.php
+++ /dev/null
@@ -1,31 +0,0 @@
-<?php
-/**
- * Adds settings to the block editor.
- *
- * @package gutenberg
- */
-
-/**
- * Adds styles and __experimentalFeatures to the block editor settings.
- *
- * @param array $settings Existing block editor settings.
- *
- * @return array New block editor settings.
- */
-function gutenberg_get_block_editor_settings_6_2( $settings ) {
-	if ( wp_theme_has_theme_json() ) {
-		// Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles.
-		$settings['styles'][] = array(
-			'css'            => gutenberg_get_global_styles_custom_css(),
-			'__unstableType' => 'user',
-			'isGlobalStyles' => true,
-		);
-	}
-
-	// Copied from get_block_editor_settings() at wordpress-develop/block-editor.php.
-	$settings['__experimentalFeatures'] = gutenberg_get_global_settings();
-
-	return $settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_6_2', PHP_INT_MAX );
diff --git a/lib/compat/wordpress-6.2/default-filters.php b/lib/compat/wordpress-6.2/default-filters.php
index 6a5bcb3b75b05..7e797af3e43b1 100644
--- a/lib/compat/wordpress-6.2/default-filters.php
+++ b/lib/compat/wordpress-6.2/default-filters.php
@@ -17,13 +17,6 @@
  * @package gutenberg
  */
 
-/**
- * When backporting to core, the existing filters hooked to WP_Theme_JSON_Resolver::clean_cached_data()
- * need to be removed.
- */
-add_action( 'start_previewing_theme', '_gutenberg_clean_theme_json_caches' );
-add_action( 'switch_theme', '_gutenberg_clean_theme_json_caches' );
-
 /**
  * This is a temporary fix to ensure that the block editor styles are enqueued
  * in the order the iframe expects.
diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
index e02a0466a0b98..eb1481a3808b6 100644
--- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php
@@ -59,176 +59,6 @@ function wp_theme_has_theme_json_clean_cache() {
 	}
 }
 
-/**
- * Gets the global styles custom css from theme.json.
- *
- * @return string
- */
-function gutenberg_get_global_styles_custom_css() {
-	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
-	$can_use_cached = ! WP_DEBUG;
-	$cache_key      = 'gutenberg_get_global_custom_css';
-	$cache_group    = 'theme_json';
-	if ( $can_use_cached ) {
-		$cached = wp_cache_get( $cache_key, $cache_group );
-		if ( $cached ) {
-			return $cached;
-		}
-	}
-
-	if ( ! wp_theme_has_theme_json() ) {
-		return '';
-	}
-
-	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$stylesheet = $tree->get_custom_css();
-
-	if ( $can_use_cached ) {
-		wp_cache_set( $cache_key, $stylesheet, $cache_group );
-	}
-
-	return $stylesheet;
-}
-
-/**
- * Returns the stylesheet resulting of merging core, theme, and user data.
- *
- * @param array $types Types of styles to load. Optional.
- *                     It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles.
- *                     If empty, it'll load the following:
- *                     - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
- *                     - for themes with theme.json: 'variables', 'presets', 'styles'.
- *
- * @return string Stylesheet.
- */
-function gutenberg_get_global_stylesheet( $types = array() ) {
-	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
-	$can_use_cached = empty( $types ) && ! WP_DEBUG;
-	$cache_key      = 'gutenberg_get_global_stylesheet';
-	$cache_group    = 'theme_json';
-	if ( $can_use_cached ) {
-		$cached = wp_cache_get( $cache_key, $cache_group );
-		if ( $cached ) {
-			return $cached;
-		}
-	}
-	$tree                = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
-	$supports_theme_json = wp_theme_has_theme_json();
-	if ( empty( $types ) && ! $supports_theme_json ) {
-		$types = array( 'variables', 'presets', 'base-layout-styles' );
-	} elseif ( empty( $types ) ) {
-		$types = array( 'variables', 'presets', 'styles' );
-	}
-
-	/*
-	 * If variables are part of the stylesheet,
-	 * we add them.
-	 *
-	 * This is so themes without a theme.json still work as before 5.9:
-	 * they can override the default presets.
-	 * See https://core.trac.wordpress.org/ticket/54782
-	 */
-	$styles_variables = '';
-	if ( in_array( 'variables', $types, true ) ) {
-		/*
-		 * We only use the default, theme, and custom origins.
-		 * This is because styles for blocks origin are added
-		 * at a later phase (render cycle) so we only render the ones in use.
-		 * @see wp_add_global_styles_for_blocks
-		 */
-		$origins          = array( 'default', 'theme', 'custom' );
-		$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins );
-		$types            = array_diff( $types, array( 'variables' ) );
-	}
-
-	/*
-	 * For the remaining types (presets, styles), we do consider origins:
-	 *
-	 * - themes without theme.json: only the classes for the presets defined by core
-	 * - themes with theme.json: the presets and styles classes, both from core and the theme
-	 */
-	$styles_rest = '';
-	if ( ! empty( $types ) ) {
-		/*
-		 * We only use the default, theme, and custom origins.
-		 * This is because styles for blocks origin are added
-		 * at a later phase (render cycle) so we only render the ones in use.
-		 * @see wp_add_global_styles_for_blocks
-		 */
-		$origins = array( 'default', 'theme', 'custom' );
-		if ( ! $supports_theme_json ) {
-			$origins = array( 'default' );
-		}
-		$styles_rest = $tree->get_stylesheet( $types, $origins );
-	}
-	$stylesheet = $styles_variables . $styles_rest;
-	if ( $can_use_cached ) {
-		wp_cache_set( $cache_key, $stylesheet, $cache_group );
-	}
-	return $stylesheet;
-}
-
-/**
- * Function to get the settings resulting of merging core, theme, and user data.
- *
- * @param array $path    Path to the specific setting to retrieve. Optional.
- *                       If empty, will return all settings.
- * @param array $context {
- *     Metadata to know where to retrieve the $path from. Optional.
- *
- *     @type string $block_name Which block to retrieve the settings from.
- *                              If empty, it'll return the settings for the global context.
- *     @type string $origin     Which origin to take data from.
- *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
- *                              If empty or unknown, 'all' is used.
- * }
- *
- * @return array The settings to retrieve.
- */
-function gutenberg_get_global_settings( $path = array(), $context = array() ) {
-	if ( ! empty( $context['block_name'] ) ) {
-		$new_path = array( 'blocks', $context['block_name'] );
-		foreach ( $path as $subpath ) {
-			$new_path[] = $subpath;
-		}
-		$path = $new_path;
-	}
-
-	// This is the default value when no origin is provided or when it is 'all'.
-	$origin = 'custom';
-	if (
-		! wp_theme_has_theme_json() ||
-		( isset( $context['origin'] ) && 'base' === $context['origin'] )
-	) {
-		$origin = 'theme';
-	}
-
-	$cache_group = 'theme_json';
-	$cache_key   = 'gutenberg_get_global_settings_' . $origin;
-	$settings    = wp_cache_get( $cache_key, $cache_group );
-
-	if ( false === $settings || WP_DEBUG ) {
-		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_settings();
-		wp_cache_set( $cache_key, $settings, $cache_group );
-	}
-
-	return _wp_array_get( $settings, $path, $settings );
-}
-
-/**
- * Private function to clean the caches used by gutenberg_get_global_settings method.
- *
- * @access private
- */
-function _gutenberg_clean_theme_json_caches() {
-	wp_cache_delete( 'wp_theme_has_theme_json', 'theme_json' );
-	wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' );
-	wp_cache_delete( 'gutenberg_get_global_settings_custom', 'theme_json' );
-	wp_cache_delete( 'gutenberg_get_global_settings_theme', 'theme_json' );
-	wp_cache_delete( 'gutenberg_get_global_custom_css', 'theme_json' );
-	WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
-}
-
 /**
  * Tell the cache mechanisms not to persist theme.json data across requests.
  * The data stored under this cache group:
diff --git a/lib/compat/wordpress-6.2/html-api/class-wp-html-tag-processor.php b/lib/compat/wordpress-6.2/html-api/class-wp-html-tag-processor.php
index 8c41e732154b4..f06302d4b742f 100644
--- a/lib/compat/wordpress-6.2/html-api/class-wp-html-tag-processor.php
+++ b/lib/compat/wordpress-6.2/html-api/class-wp-html-tag-processor.php
@@ -39,10 +39,10 @@
  *
  * Example:
  * ```php
- *     $tags = new WP_HTML_Tag_Processor( $html );
- *     if ( $tags->next_tag( 'option' ) ) {
- *         $tags->set_attribute( 'selected', true );
- *     }
+ * $tags = new WP_HTML_Tag_Processor( $html );
+ * if ( $tags->next_tag( 'option' ) ) {
+ *     $tags->set_attribute( 'selected', true );
+ * }
  * ```
  *
  * ### Finding tags
@@ -55,7 +55,7 @@
  *
  * If you want to _find whatever the next tag is_:
  * ```php
- *     $tags->next_tag();
+ * $tags->next_tag();
  * ```
  *
  * | Goal                                                      | Query                                                                           |
@@ -88,17 +88,17 @@
  *
  * Example:
  * ```php
- *     // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
- *     $remaining_count = 5;
- *     while ( $remaining_count > 0 && $tags->next_tag() ) {
- *         if (
- *              ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
- *              'jazzy' === $tags->get_attribute( 'data-style' )
- *         ) {
- *             $tags->add_class( 'theme-style-everest-jazz' );
- *             $remaining_count--;
- *         }
+ * // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
+ * $remaining_count = 5;
+ * while ( $remaining_count > 0 && $tags->next_tag() ) {
+ *     if (
+ *          ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
+ *          'jazzy' === $tags->get_attribute( 'data-style' )
+ *     ) {
+ *         $tags->add_class( 'theme-style-everest-jazz' );
+ *         $remaining_count--;
  *     }
+ * }
  * ```
  *
  * `get_attribute()` will return `null` if the attribute wasn't present
@@ -117,10 +117,10 @@
  *
  * Example:
  * ```php
- *     if ( $tags->next_tag( array( 'class' => 'wp-group-block' ) ) ) {
- *         $tags->set_attribute( 'title', 'This groups the contained content.' );
- *         $tags->remove_attribute( 'data-test-id' );
- *     }
+ * if ( $tags->next_tag( array( 'class' => 'wp-group-block' ) ) ) {
+ *     $tags->set_attribute( 'title', 'This groups the contained content.' );
+ *     $tags->remove_attribute( 'data-test-id' );
+ * }
  * ```
  *
  * If `set_attribute()` is called for an existing attribute it will
@@ -142,29 +142,29 @@
  *
  * Example:
  * ```php
- *     // from `<span>Yippee!</span>`
- *     //   to `<span class="is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span>Yippee!</span>`
+ * //   to `<span class="is-active">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<span class="excited">Yippee!</span>`
- *     //   to `<span class="excited is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span class="excited">Yippee!</span>`
+ * //   to `<span class="excited is-active">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<span class="is-active heavy-accent">Yippee!</span>`
- *     //   to `<span class="is-active heavy-accent">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span class="is-active heavy-accent">Yippee!</span>`
+ * //   to `<span class="is-active heavy-accent">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<input type="text" class="is-active rugby not-disabled" length="24">`
- *     //   to `<input type="text" class="is-active not-disabled" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" class="is-active rugby not-disabled" length="24">`
+ * //   to `<input type="text" class="is-active not-disabled" length="24">
+ * $tags->remove_class( 'rugby' );
  *
- *     // from `<input type="text" class="rugby" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" class="rugby" length="24">`
+ * //   to `<input type="text" length="24">
+ * $tags->remove_class( 'rugby' );
  *
- *     // from `<input type="text" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" length="24">`
+ * //   to `<input type="text" length="24">
+ * $tags->remove_class( 'rugby' );
  * ```
  *
  * When class changes are enqueued but a direct change to `class` is made via
@@ -185,24 +185,24 @@
  * bookmark and update it frequently, such as within a loop.
  *
  * ```php
- *     $total_todos = 0;
- *     while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
- *         $p->set_bookmark( 'list-start' );
- *         while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
- *             if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
- *                 $p->set_bookmark( 'list-end' );
- *                 $p->seek( 'list-start' );
- *                 $p->set_attribute( 'data-contained-todos', (string) $total_todos );
- *                 $total_todos = 0;
- *                 $p->seek( 'list-end' );
- *                 break;
- *             }
+ * $total_todos = 0;
+ * while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
+ *     $p->set_bookmark( 'list-start' );
+ *     while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+ *         if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
+ *             $p->set_bookmark( 'list-end' );
+ *             $p->seek( 'list-start' );
+ *             $p->set_attribute( 'data-contained-todos', (string) $total_todos );
+ *             $total_todos = 0;
+ *             $p->seek( 'list-end' );
+ *             break;
+ *         }
  *
- *             if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
- *                 $total_todos++;
- *             }
+ *         if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
+ *             $total_todos++;
  *         }
  *     }
+ * }
  * ```
  *
  * ## Design and limitations
@@ -229,11 +229,11 @@
  * The Tag Processor's design incorporates a "garbage-in-garbage-out" philosophy.
  * HTML5 specifies that certain invalid content be transformed into different forms
  * for display, such as removing null bytes from an input document and replacing
- * invalid characters with the Unicode replacement character U+FFFD �. Where errors
- * or transformations exist within the HTML5 specification, the Tag Processor leaves
- * those invalid inputs untouched, passing them through to the final browser to handle.
- * While this implies that certain operations will be non-spec-compliant, such as
- * reading the value of an attribute with invalid content, it also preserves a
+ * invalid characters with the Unicode replacement character `U+FFFD` (visually "�").
+ * Where errors or transformations exist within the HTML5 specification, the Tag Processor
+ * leaves those invalid inputs untouched, passing them through to the final browser
+ * to handle. While this implies that certain operations will be non-spec-compliant,
+ * such as reading the value of an attribute with invalid content, it also preserves a
  * simplicity and efficiency for handling those error cases.
  *
  * Most operations within the Tag Processor are designed to minimize the difference
@@ -253,9 +253,10 @@ class WP_HTML_Tag_Processor {
 	 * The maximum number of bookmarks allowed to exist at
 	 * any given time.
 	 *
-	 * @see set_bookmark()
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::set_bookmark()
 	 */
 	const MAX_BOOKMARKS = 10;
 
@@ -263,9 +264,10 @@ class WP_HTML_Tag_Processor {
 	 * Maximum number of times seek() can be called.
 	 * Prevents accidental infinite loops.
 	 *
-	 * @see seek()
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
 	 */
 	const MAX_SEEK_OPS = 1000;
 
@@ -317,23 +319,6 @@ class WP_HTML_Tag_Processor {
 	 */
 	private $stop_on_tag_closers;
 
-	/**
-	 * Holds updated HTML as updates are applied.
-	 *
-	 * Updates and unmodified portions of the input document are
-	 * appended to this value as they are applied. It will hold
-	 * a copy of the updated document up until the point of the
-	 * latest applied update. The fully-updated HTML document
-	 * will comprise this value plus the part of the input document
-	 * which follows that latest update.
-	 *
-	 * @see $bytes_already_copied
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	private $output_buffer = '';
-
 	/**
 	 * How many bytes from the original HTML document have been read and parsed.
 	 *
@@ -346,23 +331,6 @@ class WP_HTML_Tag_Processor {
 	 */
 	private $bytes_already_parsed = 0;
 
-	/**
-	 * How many bytes from the input HTML document have already been
-	 * copied into the output buffer.
-	 *
-	 * Lexical updates are enqueued and processed in batches. Prior
-	 * to any given update in the input document, there might exist
-	 * a span of HTML unaffected by any changes. This span ought to
-	 * be copied verbatim into the output buffer before applying the
-	 * following update. This value will point to the starting byte
-	 * offset in the input document where that unaffected span of
-	 * HTML starts.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	private $bytes_already_copied = 0;
-
 	/**
 	 * Byte offset in input document where current tag name starts.
 	 *
@@ -421,23 +389,23 @@ class WP_HTML_Tag_Processor {
 	 *
 	 * Example:
 	 * ```php
-	 *     // supposing the parser is working through this content
-	 *     // and stops after recognizing the `id` attribute
-	 *     // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
-	 *     //                 ^ parsing will continue from this point
-	 *     $this->attributes = array(
-	 *         'id' => new WP_HTML_Attribute_Match( 'id', null, 6, 17 )
-	 *     );
-	 *
-	 *     // when picking up parsing again, or when asking to find the
-	 *     // `class` attribute we will continue and add to this array
-	 *     $this->attributes = array(
-	 *         'id'    => new WP_HTML_Attribute_Match( 'id', null, 6, 17 ),
-	 *         'class' => new WP_HTML_Attribute_Match( 'class', 'outline', 18, 32 )
-	 *     );
-	 *
-	 *     // Note that only the `class` attribute value is stored in the index.
-	 *     // That's because it is the only value used by this class at the moment.
+	 * // supposing the parser is working through this content
+	 * // and stops after recognizing the `id` attribute
+	 * // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
+	 * //                 ^ parsing will continue from this point
+	 * $this->attributes = array(
+	 *     'id' => new WP_HTML_Attribute_Match( 'id', null, 6, 17 )
+	 * );
+	 *
+	 * // when picking up parsing again, or when asking to find the
+	 * // `class` attribute we will continue and add to this array
+	 * $this->attributes = array(
+	 *     'id'    => new WP_HTML_Attribute_Match( 'id', null, 6, 17 ),
+	 *     'class' => new WP_HTML_Attribute_Match( 'class', 'outline', 18, 32 )
+	 * );
+	 *
+	 * // Note that only the `class` attribute value is stored in the index.
+	 * // That's because it is the only value used by this class at the moment.
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -458,12 +426,12 @@ class WP_HTML_Tag_Processor {
 	 *
 	 * Example:
 	 * ```php
-	 *     // Add the `wp-block-group` class, remove the `wp-group` class.
-	 *     $classname_updates = array(
-	 *         // Indexed by a comparable class name
-	 *         'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
-	 *         'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
-	 *     );
+	 * // Add the `wp-block-group` class, remove the `wp-group` class.
+	 * $classname_updates = array(
+	 *     // Indexed by a comparable class name
+	 *     'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
+	 *     'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
+	 * );
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -512,16 +480,16 @@ class WP_HTML_Tag_Processor {
 	 *
 	 * Example:
 	 * ```php
-	 *     // Replace an attribute stored with a new value, indices
-	 *     // sourced from the lazily-parsed HTML recognizer.
-	 *     $start = $attributes['src']->start;
-	 *     $end   = $attributes['src']->end;
-	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $end, $new_value );
-	 *
-	 *     // Correspondingly, something like this will appear in this array.
-	 *     $lexical_updates = array(
-	 *         WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
-	 *     );
+	 * // Replace an attribute stored with a new value, indices
+	 * // sourced from the lazily-parsed HTML recognizer.
+	 * $start = $attributes['src']->start;
+	 * $end   = $attributes['src']->end;
+	 * $modifications[] = new WP_HTML_Text_Replacement( $start, $end, $new_value );
+	 *
+	 * // Correspondingly, something like this will appear in this array.
+	 * $lexical_updates = array(
+	 *     WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
+	 * );
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -532,9 +500,10 @@ class WP_HTML_Tag_Processor {
 	/**
 	 * Tracks and limits `seek()` calls to prevent accidental infinite loops.
 	 *
-	 * @see seek
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
 	 */
 	protected $seek_count = 0;
 
@@ -754,9 +723,10 @@ public function release_bookmark( $name ) {
 	/**
 	 * Skips contents of title and textarea tags.
 	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
 	 * @since 6.2.0
 	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
+	 *
 	 * @param string $tag_name – the lowercase tag name which will close the RCDATA region.
 	 * @return bool Whether an end to the RCDATA region was found before the end of the document.
 	 */
@@ -1303,8 +1273,7 @@ private function skip_whitespace() {
 	 * @return void
 	 */
 	private function after_tag() {
-		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
+		$this->get_updated_html();
 		$this->tag_name_starts_at = null;
 		$this->tag_name_length    = null;
 		$this->tag_ends_at        = null;
@@ -1316,11 +1285,11 @@ private function after_tag() {
 	 * Converts class name updates into tag attributes updates
 	 * (they are accumulated in different data formats for performance).
 	 *
-	 * @see $lexical_updates
-	 * @see $classname_updates
-	 *
 	 * @since 6.2.0
 	 *
+	 * @see WP_HTML_Tag_Processor::$lexical_updates
+	 * @see WP_HTML_Tag_Processor::$classname_updates
+	 *
 	 * @return void
 	 */
 	private function class_name_updates_to_attributes_updates() {
@@ -1460,15 +1429,19 @@ private function class_name_updates_to_attributes_updates() {
 	 * Applies attribute updates to HTML document.
 	 *
 	 * @since 6.2.0
+	 * @since 6.2.1 Accumulates shift for internal cursor and passed pointer.
 	 * @since 6.3.0 Invalidate any bookmarks whose targets are overwritten.
 	 *
-	 * @return void
+	 * @param int $shift_this_point Accumulate and return shift for this position.
+	 * @return int How many bytes the given pointer moved in response to the updates.
 	 */
-	private function apply_attributes_updates() {
+	private function apply_attributes_updates( $shift_this_point = 0 ) {
 		if ( ! count( $this->lexical_updates ) ) {
-			return;
+			return 0;
 		}
 
+		$accumulated_shift_for_given_point = 0;
+
 		/*
 		 * Attribute updates can be enqueued in any order but updates
 		 * to the document must occur in lexical order; that is, each
@@ -1481,12 +1454,28 @@ private function apply_attributes_updates() {
 		 */
 		usort( $this->lexical_updates, array( self::class, 'sort_start_ascending' ) );
 
+		$bytes_already_copied = 0;
+		$output_buffer        = '';
 		foreach ( $this->lexical_updates as $diff ) {
-			$this->output_buffer       .= substr( $this->html, $this->bytes_already_copied, $diff->start - $this->bytes_already_copied );
-			$this->output_buffer       .= $diff->text;
-			$this->bytes_already_copied = $diff->end;
+			$shift = strlen( $diff->text ) - ( $diff->end - $diff->start );
+
+			// Adjust the cursor position by however much an update affects it.
+			if ( $diff->start <= $this->bytes_already_parsed ) {
+				$this->bytes_already_parsed += $shift;
+			}
+
+			// Accumulate shift of the given pointer within this function call.
+			if ( $diff->start <= $shift_this_point ) {
+				$accumulated_shift_for_given_point += $shift;
+			}
+
+			$output_buffer       .= substr( $this->html, $bytes_already_copied, $diff->start - $bytes_already_copied );
+			$output_buffer       .= $diff->text;
+			$bytes_already_copied = $diff->end;
 		}
 
+		$this->html = $output_buffer . substr( $this->html, $bytes_already_copied );
+
 		/*
 		 * Adjust bookmark locations to account for how the text
 		 * replacements adjust offsets in the input document.
@@ -1527,6 +1516,8 @@ private function apply_attributes_updates() {
 		}
 
 		$this->lexical_updates = array();
+
+		return $accumulated_shift_for_given_point;
 	}
 
 	/**
@@ -1576,8 +1567,6 @@ public function seek( $bookmark_name ) {
 
 		// Point this tag processor before the sought tag opener and consume it.
 		$this->bytes_already_parsed = $this->bookmarks[ $bookmark_name ]->start;
-		$this->bytes_already_copied = $this->bytes_already_parsed;
-		$this->output_buffer        = substr( $this->html, 0, $this->bytes_already_copied );
 		return $this->next_tag( array( 'tag_closers' => 'visit' ) );
 	}
 
@@ -1676,14 +1665,14 @@ private function get_enqueued_attribute_value( $comparable_name ) {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute( 'data-test-id' ) === '14';
-	 *     $p->get_attribute( 'enabled' ) === true;
-	 *     $p->get_attribute( 'aria-label' ) === null;
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute( 'class' ) === null;
+	 * $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
+	 * $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 * $p->get_attribute( 'data-test-id' ) === '14';
+	 * $p->get_attribute( 'enabled' ) === true;
+	 * $p->get_attribute( 'aria-label' ) === null;
+	 *
+	 * $p->next_tag() === false;
+	 * $p->get_attribute( 'class' ) === null;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -1755,20 +1744,20 @@ public function get_attribute( $name ) {
 	 * > case-insensitive match for each other.
 	 *     - HTML 5 spec
 	 *
-	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
+	 * $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
+	 * $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 * $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
 	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
+	 * $p->next_tag() === false;
+	 * $p->get_attribute_names_with_prefix( 'data-' ) === null;
 	 * ```
 	 *
 	 * @since 6.2.0
 	 *
+	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+	 *
 	 * @param string $prefix Prefix of requested attribute names.
 	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
 	 */
@@ -1793,12 +1782,12 @@ function get_attribute_names_with_prefix( $prefix ) {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<DIV CLASS="test">Test</DIV>' );
-	 *     $p->next_tag() === true;
-	 *     $p->get_tag() === 'DIV';
+	 * $p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
+	 * $p->next_tag() === true;
+	 * $p->get_tag() === 'DIV';
 	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_tag() === null;
+	 * $p->next_tag() === false;
+	 * $p->get_tag() === null;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -1845,12 +1834,12 @@ public function has_self_closing_flag() {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div></div>' );
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === false;
+	 * $p = new WP_HTML_Tag_Processor( '<div></div>' );
+	 * $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 * $p->is_tag_closer() === false;
 	 *
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === true;
+	 * $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 * $p->is_tag_closer() === true;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -2110,7 +2099,8 @@ public function remove_class( $class_name ) {
 	 * Returns the string representation of the HTML Tag Processor.
 	 *
 	 * @since 6.2.0
-	 * @see get_updated_html
+	 *
+	 * @see WP_HTML_Tag_Processor::get_updated_html()
 	 *
 	 * @return string The processed HTML.
 	 */
@@ -2122,6 +2112,7 @@ public function __toString() {
 	 * Returns the string representation of the HTML Tag Processor.
 	 *
 	 * @since 6.2.0
+	 * @since 6.2.1 Shifts the internal cursor corresponding to the applied updates.
 	 *
 	 * @return string The processed HTML.
 	 */
@@ -2132,46 +2123,24 @@ public function get_updated_html() {
 		 * When there is nothing more to update and nothing has already been
 		 * updated, return the original document and avoid a string copy.
 		 */
-		if ( $requires_no_updating && 0 === $this->bytes_already_copied ) {
+		if ( $requires_no_updating ) {
 			return $this->html;
 		}
 
 		/*
-		 * If there are no updates left to apply, but some have already
-		 * been applied, then finish by copying the rest of the input
-		 * to the end of the updated document and return.
+		 * Keep track of the position right before the current tag. This will
+		 * be necessary for reparsing the current tag after updating the HTML.
 		 */
-		if ( $requires_no_updating && $this->bytes_already_copied > 0 ) {
-			$this->html                 = $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-			$this->bytes_already_copied = strlen( $this->output_buffer );
-			return $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-		}
-
-		// Apply the updates, rewind to before the current tag, and reparse the attributes.
-		$content_up_to_opened_tag_name = $this->output_buffer . substr(
-			$this->html,
-			$this->bytes_already_copied,
-			$this->tag_name_starts_at + $this->tag_name_length - $this->bytes_already_copied
-		);
+		$before_current_tag = $this->tag_name_starts_at - 1;
 
 		/*
-		 * 1. Apply the edits by flushing them to the output buffer and updating the copied byte count.
-		 *
-		 * Note: `apply_attributes_updates()` modifies `$this->output_buffer`.
+		 * 1. Apply the enqueued edits and update all the pointers to reflect those changes.
 		 */
 		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
+		$before_current_tag += $this->apply_attributes_updates( $before_current_tag );
 
 		/*
-		 * 2. Replace the original HTML with the now-updated HTML so that it's possible to
-		 *    seek to a previous location and have a consistent view of the updated document.
-		 */
-		$this->html                 = $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-		$this->output_buffer        = $content_up_to_opened_tag_name;
-		$this->bytes_already_copied = strlen( $this->output_buffer );
-
-		/*
-		 * 3. Point this tag processor at the original tag opener and consume it
+		 * 2. Rewind to before the current tag and reparse to get updated attributes.
 		 *
 		 * At this point the internal cursor points to the end of the tag name.
 		 * Rewind before the tag name starts so that it's as if the cursor didn't
@@ -2183,9 +2152,19 @@ public function get_updated_html() {
 		 *                 ^  | back up by the length of the tag name plus the opening <
 		 *                 \<-/ back up by strlen("em") + 1 ==> 3
 		 */
-		$this->bytes_already_parsed = strlen( $content_up_to_opened_tag_name ) - $this->tag_name_length - 1;
+
+		// Store existing state so it can be restored after reparsing.
+		$previous_parsed_byte_count = $this->bytes_already_parsed;
+		$previous_query             = $this->last_query;
+
+		// Reparse attributes.
+		$this->bytes_already_parsed = $before_current_tag;
 		$this->next_tag();
 
+		// Restore previous state.
+		$this->bytes_already_parsed = $previous_parsed_byte_count;
+		$this->parse_query( $previous_query );
+
 		return $this->html;
 	}
 
diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php
index 149a6a18e1450..6ed69244726d3 100644
--- a/lib/compat/wordpress-6.2/script-loader.php
+++ b/lib/compat/wordpress-6.2/script-loader.php
@@ -129,28 +129,11 @@ function gutenberg_resolve_assets_override() {
 
 	$scripts = ob_get_clean();
 
-	/*
-	 * Generate font @font-face styles for the site editor iframe.
-	 * Use the registered font families for printing.
-	 */
-	if ( class_exists( 'WP_Fonts' ) ) {
-		$wp_fonts   = wp_fonts();
-		$registered = $wp_fonts->get_registered_font_families();
-		if ( ! empty( $registered ) ) {
-			$queue = $wp_fonts->queue;
-			$done  = $wp_fonts->done;
-
-			$wp_fonts->done  = array();
-			$wp_fonts->queue = $registered;
-
-			ob_start();
-			$wp_fonts->do_items();
-			$styles .= ob_get_clean();
-
-			// Reset the Web Fonts API.
-			$wp_fonts->done  = $done;
-			$wp_fonts->queue = $queue;
-		}
+	// Generate font @font-face styles.
+	if ( function_exists( 'wp_print_fonts' ) ) {
+		ob_start();
+		wp_print_fonts( true );
+		$styles .= ob_get_clean();
 	}
 
 	return array(
@@ -169,25 +152,3 @@ function( $settings ) {
 	},
 	100
 );
-
-/**
- * Enqueues the global styles custom css.
- *
- * @since 6.2.0
- */
-function gutenberg_enqueue_global_styles_custom_css() {
-	if ( ! wp_is_block_theme() ) {
-		return;
-	}
-
-	// Don't enqueue Customizer's custom CSS separately.
-	remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
-
-	$custom_css  = wp_get_custom_css();
-	$custom_css .= gutenberg_get_global_styles_custom_css();
-
-	if ( ! empty( $custom_css ) ) {
-		wp_add_inline_style( 'global-styles', $custom_css );
-	}
-}
-add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' );
diff --git a/lib/compat/wordpress-6.3/get-global-styles-and-settings.php b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php
index bb489664e1eea..609d9b3de38a1 100644
--- a/lib/compat/wordpress-6.3/get-global-styles-and-settings.php
+++ b/lib/compat/wordpress-6.3/get-global-styles-and-settings.php
@@ -124,3 +124,37 @@ function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = f
 function gutenberg_get_remote_theme_patterns() {
 	return WP_Theme_JSON_Resolver_Gutenberg::get_theme_data( array(), array( 'with_supports' => false ) )->get_patterns();
 }
+
+/**
+ * Gets the styles resulting of merging core, theme, and user data.
+ *
+ * @since 5.9.0
+ * @since 6.3.0 the internal link format "var:preset|color|secondary" is resolved
+ * to "var(--wp--preset--font-size--small)" so consumers don't have to.
+ *
+ * @param array $path    Path to the specific style to retrieve. Optional.
+ *                       If empty, will return all styles.
+ * @param array $context {
+ *     Metadata to know where to retrieve the $path from. Optional.
+ *
+ *     @type string $block_name Which block to retrieve the styles from.
+ *                              If empty, it'll return the styles for the global context.
+ *     @type string $origin     Which origin to take data from.
+ *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
+ *                              If empty or unknown, 'all' is used.
+ * }
+ * @return array The styles to retrieve.
+ */
+function gutenberg_get_global_styles( $path = array(), $context = array() ) {
+	if ( ! empty( $context['block_name'] ) ) {
+		$path = array_merge( array( 'blocks', $context['block_name'] ), $path );
+	}
+
+	$origin = 'custom';
+	if ( isset( $context['origin'] ) && 'base' === $context['origin'] ) {
+		$origin = 'theme';
+	}
+	$styles = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_raw_data()['styles'];
+
+	return _wp_array_get( $styles, $path, $styles );
+}
diff --git a/lib/compat/wordpress-6.3/html-api/class-gutenberg-html-tag-processor-6-3.php b/lib/compat/wordpress-6.3/html-api/class-gutenberg-html-tag-processor-6-3.php
index 65fcefe8ac9c8..5b38484f659ac 100644
--- a/lib/compat/wordpress-6.3/html-api/class-gutenberg-html-tag-processor-6-3.php
+++ b/lib/compat/wordpress-6.3/html-api/class-gutenberg-html-tag-processor-6-3.php
@@ -39,10 +39,10 @@
  *
  * Example:
  * ```php
- *     $tags = new WP_HTML_Tag_Processor( $html );
- *     if ( $tags->next_tag( 'option' ) ) {
- *         $tags->set_attribute( 'selected', true );
- *     }
+ * $tags = new WP_HTML_Tag_Processor( $html );
+ * if ( $tags->next_tag( 'option' ) ) {
+ *     $tags->set_attribute( 'selected', true );
+ * }
  * ```
  *
  * ### Finding tags
@@ -55,7 +55,7 @@
  *
  * If you want to _find whatever the next tag is_:
  * ```php
- *     $tags->next_tag();
+ * $tags->next_tag();
  * ```
  *
  * | Goal                                                      | Query                                                                           |
@@ -88,17 +88,17 @@
  *
  * Example:
  * ```php
- *     // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
- *     $remaining_count = 5;
- *     while ( $remaining_count > 0 && $tags->next_tag() ) {
- *         if (
- *              ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
- *              'jazzy' === $tags->get_attribute( 'data-style' )
- *         ) {
- *             $tags->add_class( 'theme-style-everest-jazz' );
- *             $remaining_count--;
- *         }
+ * // Paint up to the first five DIV or SPAN tags marked with the "jazzy" style.
+ * $remaining_count = 5;
+ * while ( $remaining_count > 0 && $tags->next_tag() ) {
+ *     if (
+ *          ( 'DIV' === $tags->get_tag() || 'SPAN' === $tags->get_tag() ) &&
+ *          'jazzy' === $tags->get_attribute( 'data-style' )
+ *     ) {
+ *         $tags->add_class( 'theme-style-everest-jazz' );
+ *         $remaining_count--;
  *     }
+ * }
  * ```
  *
  * `get_attribute()` will return `null` if the attribute wasn't present
@@ -117,10 +117,10 @@
  *
  * Example:
  * ```php
- *     if ( $tags->next_tag( array( 'class' => 'wp-group-block' ) ) ) {
- *         $tags->set_attribute( 'title', 'This groups the contained content.' );
- *         $tags->remove_attribute( 'data-test-id' );
- *     }
+ * if ( $tags->next_tag( array( 'class' => 'wp-group-block' ) ) ) {
+ *     $tags->set_attribute( 'title', 'This groups the contained content.' );
+ *     $tags->remove_attribute( 'data-test-id' );
+ * }
  * ```
  *
  * If `set_attribute()` is called for an existing attribute it will
@@ -142,29 +142,29 @@
  *
  * Example:
  * ```php
- *     // from `<span>Yippee!</span>`
- *     //   to `<span class="is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span>Yippee!</span>`
+ * //   to `<span class="is-active">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<span class="excited">Yippee!</span>`
- *     //   to `<span class="excited is-active">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span class="excited">Yippee!</span>`
+ * //   to `<span class="excited is-active">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<span class="is-active heavy-accent">Yippee!</span>`
- *     //   to `<span class="is-active heavy-accent">Yippee!</span>`
- *     $tags->add_class( 'is-active' );
+ * // from `<span class="is-active heavy-accent">Yippee!</span>`
+ * //   to `<span class="is-active heavy-accent">Yippee!</span>`
+ * $tags->add_class( 'is-active' );
  *
- *     // from `<input type="text" class="is-active rugby not-disabled" length="24">`
- *     //   to `<input type="text" class="is-active not-disabled" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" class="is-active rugby not-disabled" length="24">`
+ * //   to `<input type="text" class="is-active not-disabled" length="24">
+ * $tags->remove_class( 'rugby' );
  *
- *     // from `<input type="text" class="rugby" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" class="rugby" length="24">`
+ * //   to `<input type="text" length="24">
+ * $tags->remove_class( 'rugby' );
  *
- *     // from `<input type="text" length="24">`
- *     //   to `<input type="text" length="24">
- *     $tags->remove_class( 'rugby' );
+ * // from `<input type="text" length="24">`
+ * //   to `<input type="text" length="24">
+ * $tags->remove_class( 'rugby' );
  * ```
  *
  * When class changes are enqueued but a direct change to `class` is made via
@@ -185,24 +185,24 @@
  * bookmark and update it frequently, such as within a loop.
  *
  * ```php
- *     $total_todos = 0;
- *     while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
- *         $p->set_bookmark( 'list-start' );
- *         while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
- *             if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
- *                 $p->set_bookmark( 'list-end' );
- *                 $p->seek( 'list-start' );
- *                 $p->set_attribute( 'data-contained-todos', (string) $total_todos );
- *                 $total_todos = 0;
- *                 $p->seek( 'list-end' );
- *                 break;
- *             }
+ * $total_todos = 0;
+ * while ( $p->next_tag( array( 'tag_name' => 'UL', 'class_name' => 'todo' ) ) ) {
+ *     $p->set_bookmark( 'list-start' );
+ *     while ( $p->next_tag( array( 'tag_closers' => 'visit' ) ) ) {
+ *         if ( 'UL' === $p->get_tag() && $p->is_tag_closer() ) {
+ *             $p->set_bookmark( 'list-end' );
+ *             $p->seek( 'list-start' );
+ *             $p->set_attribute( 'data-contained-todos', (string) $total_todos );
+ *             $total_todos = 0;
+ *             $p->seek( 'list-end' );
+ *             break;
+ *         }
  *
- *             if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
- *                 $total_todos++;
- *             }
+ *         if ( 'LI' === $p->get_tag() && ! $p->is_tag_closer() ) {
+ *             $total_todos++;
  *         }
  *     }
+ * }
  * ```
  *
  * ## Design and limitations
@@ -229,11 +229,11 @@
  * The Tag Processor's design incorporates a "garbage-in-garbage-out" philosophy.
  * HTML5 specifies that certain invalid content be transformed into different forms
  * for display, such as removing null bytes from an input document and replacing
- * invalid characters with the Unicode replacement character U+FFFD �. Where errors
- * or transformations exist within the HTML5 specification, the Tag Processor leaves
- * those invalid inputs untouched, passing them through to the final browser to handle.
- * While this implies that certain operations will be non-spec-compliant, such as
- * reading the value of an attribute with invalid content, it also preserves a
+ * invalid characters with the Unicode replacement character `U+FFFD` (visually "�").
+ * Where errors or transformations exist within the HTML5 specification, the Tag Processor
+ * leaves those invalid inputs untouched, passing them through to the final browser
+ * to handle. While this implies that certain operations will be non-spec-compliant,
+ * such as reading the value of an attribute with invalid content, it also preserves a
  * simplicity and efficiency for handling those error cases.
  *
  * Most operations within the Tag Processor are designed to minimize the difference
@@ -253,9 +253,10 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 * The maximum number of bookmarks allowed to exist at
 	 * any given time.
 	 *
-	 * @see set_bookmark()
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::set_bookmark()
 	 */
 	const MAX_BOOKMARKS = 10;
 
@@ -263,9 +264,10 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 * Maximum number of times seek() can be called.
 	 * Prevents accidental infinite loops.
 	 *
-	 * @see seek()
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
 	 */
 	const MAX_SEEK_OPS = 1000;
 
@@ -317,23 +319,6 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 */
 	private $stop_on_tag_closers;
 
-	/**
-	 * Holds updated HTML as updates are applied.
-	 *
-	 * Updates and unmodified portions of the input document are
-	 * appended to this value as they are applied. It will hold
-	 * a copy of the updated document up until the point of the
-	 * latest applied update. The fully-updated HTML document
-	 * will comprise this value plus the part of the input document
-	 * which follows that latest update.
-	 *
-	 * @see $bytes_already_copied
-	 *
-	 * @since 6.2.0
-	 * @var string
-	 */
-	private $output_buffer = '';
-
 	/**
 	 * How many bytes from the original HTML document have been read and parsed.
 	 *
@@ -346,23 +331,6 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 */
 	private $bytes_already_parsed = 0;
 
-	/**
-	 * How many bytes from the input HTML document have already been
-	 * copied into the output buffer.
-	 *
-	 * Lexical updates are enqueued and processed in batches. Prior
-	 * to any given update in the input document, there might exist
-	 * a span of HTML unaffected by any changes. This span ought to
-	 * be copied verbatim into the output buffer before applying the
-	 * following update. This value will point to the starting byte
-	 * offset in the input document where that unaffected span of
-	 * HTML starts.
-	 *
-	 * @since 6.2.0
-	 * @var int
-	 */
-	private $bytes_already_copied = 0;
-
 	/**
 	 * Byte offset in input document where current tag name starts.
 	 *
@@ -421,23 +389,23 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 *
 	 * Example:
 	 * ```php
-	 *     // supposing the parser is working through this content
-	 *     // and stops after recognizing the `id` attribute
-	 *     // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
-	 *     //                 ^ parsing will continue from this point
-	 *     $this->attributes = array(
-	 *         'id' => new WP_HTML_Attribute_Match( 'id', null, 6, 17 )
-	 *     );
-	 *
-	 *     // when picking up parsing again, or when asking to find the
-	 *     // `class` attribute we will continue and add to this array
-	 *     $this->attributes = array(
-	 *         'id'    => new WP_HTML_Attribute_Match( 'id', null, 6, 17 ),
-	 *         'class' => new WP_HTML_Attribute_Match( 'class', 'outline', 18, 32 )
-	 *     );
-	 *
-	 *     // Note that only the `class` attribute value is stored in the index.
-	 *     // That's because it is the only value used by this class at the moment.
+	 * // supposing the parser is working through this content
+	 * // and stops after recognizing the `id` attribute
+	 * // <div id="test-4" class=outline title="data:text/plain;base64=asdk3nk1j3fo8">
+	 * //                 ^ parsing will continue from this point
+	 * $this->attributes = array(
+	 *     'id' => new WP_HTML_Attribute_Match( 'id', null, 6, 17 )
+	 * );
+	 *
+	 * // when picking up parsing again, or when asking to find the
+	 * // `class` attribute we will continue and add to this array
+	 * $this->attributes = array(
+	 *     'id'    => new WP_HTML_Attribute_Match( 'id', null, 6, 17 ),
+	 *     'class' => new WP_HTML_Attribute_Match( 'class', 'outline', 18, 32 )
+	 * );
+	 *
+	 * // Note that only the `class` attribute value is stored in the index.
+	 * // That's because it is the only value used by this class at the moment.
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -458,12 +426,12 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 *
 	 * Example:
 	 * ```php
-	 *     // Add the `wp-block-group` class, remove the `wp-group` class.
-	 *     $classname_updates = array(
-	 *         // Indexed by a comparable class name
-	 *         'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
-	 *         'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
-	 *     );
+	 * // Add the `wp-block-group` class, remove the `wp-group` class.
+	 * $classname_updates = array(
+	 *     // Indexed by a comparable class name
+	 *     'wp-block-group' => WP_HTML_Tag_Processor::ADD_CLASS,
+	 *     'wp-group'       => WP_HTML_Tag_Processor::REMOVE_CLASS
+	 * );
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -512,16 +480,16 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	 *
 	 * Example:
 	 * ```php
-	 *     // Replace an attribute stored with a new value, indices
-	 *     // sourced from the lazily-parsed HTML recognizer.
-	 *     $start = $attributes['src']->start;
-	 *     $end   = $attributes['src']->end;
-	 *     $modifications[] = new WP_HTML_Text_Replacement( $start, $end, $new_value );
-	 *
-	 *     // Correspondingly, something like this will appear in this array.
-	 *     $lexical_updates = array(
-	 *         WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
-	 *     );
+	 * // Replace an attribute stored with a new value, indices
+	 * // sourced from the lazily-parsed HTML recognizer.
+	 * $start = $attributes['src']->start;
+	 * $end   = $attributes['src']->end;
+	 * $modifications[] = new WP_HTML_Text_Replacement( $start, $end, $new_value );
+	 *
+	 * // Correspondingly, something like this will appear in this array.
+	 * $lexical_updates = array(
+	 *     WP_HTML_Text_Replacement( 14, 28, 'https://my-site.my-domain/wp-content/uploads/2014/08/kittens.jpg' )
+	 * );
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -532,9 +500,10 @@ class Gutenberg_HTML_Tag_Processor_6_3 {
 	/**
 	 * Tracks and limits `seek()` calls to prevent accidental infinite loops.
 	 *
-	 * @see seek
 	 * @since 6.2.0
 	 * @var int
+	 *
+	 * @see WP_HTML_Tag_Processor::seek()
 	 */
 	protected $seek_count = 0;
 
@@ -754,9 +723,10 @@ public function release_bookmark( $name ) {
 	/**
 	 * Skips contents of title and textarea tags.
 	 *
-	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
 	 * @since 6.2.0
 	 *
+	 * @see https://html.spec.whatwg.org/multipage/parsing.html#rcdata-state
+	 *
 	 * @param string $tag_name – the lowercase tag name which will close the RCDATA region.
 	 * @return bool Whether an end to the RCDATA region was found before the end of the document.
 	 */
@@ -1303,8 +1273,7 @@ private function skip_whitespace() {
 	 * @return void
 	 */
 	private function after_tag() {
-		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
+		$this->get_updated_html();
 		$this->tag_name_starts_at = null;
 		$this->tag_name_length    = null;
 		$this->tag_ends_at        = null;
@@ -1316,11 +1285,11 @@ private function after_tag() {
 	 * Converts class name updates into tag attributes updates
 	 * (they are accumulated in different data formats for performance).
 	 *
-	 * @see $lexical_updates
-	 * @see $classname_updates
-	 *
 	 * @since 6.2.0
 	 *
+	 * @see WP_HTML_Tag_Processor::$lexical_updates
+	 * @see WP_HTML_Tag_Processor::$classname_updates
+	 *
 	 * @return void
 	 */
 	private function class_name_updates_to_attributes_updates() {
@@ -1460,15 +1429,19 @@ private function class_name_updates_to_attributes_updates() {
 	 * Applies attribute updates to HTML document.
 	 *
 	 * @since 6.2.0
+	 * @since 6.2.1 Accumulates shift for internal cursor and passed pointer.
 	 * @since 6.3.0 Invalidate any bookmarks whose targets are overwritten.
 	 *
-	 * @return void
+	 * @param int $shift_this_point Accumulate and return shift for this position.
+	 * @return int How many bytes the given pointer moved in response to the updates.
 	 */
-	private function apply_attributes_updates() {
+	private function apply_attributes_updates( $shift_this_point = 0 ) {
 		if ( ! count( $this->lexical_updates ) ) {
-			return;
+			return 0;
 		}
 
+		$accumulated_shift_for_given_point = 0;
+
 		/*
 		 * Attribute updates can be enqueued in any order but updates
 		 * to the document must occur in lexical order; that is, each
@@ -1481,12 +1454,28 @@ private function apply_attributes_updates() {
 		 */
 		usort( $this->lexical_updates, array( self::class, 'sort_start_ascending' ) );
 
+		$bytes_already_copied = 0;
+		$output_buffer        = '';
 		foreach ( $this->lexical_updates as $diff ) {
-			$this->output_buffer       .= substr( $this->html, $this->bytes_already_copied, $diff->start - $this->bytes_already_copied );
-			$this->output_buffer       .= $diff->text;
-			$this->bytes_already_copied = $diff->end;
+			$shift = strlen( $diff->text ) - ( $diff->end - $diff->start );
+
+			// Adjust the cursor position by however much an update affects it.
+			if ( $diff->start <= $this->bytes_already_parsed ) {
+				$this->bytes_already_parsed += $shift;
+			}
+
+			// Accumulate shift of the given pointer within this function call.
+			if ( $diff->start <= $shift_this_point ) {
+				$accumulated_shift_for_given_point += $shift;
+			}
+
+			$output_buffer       .= substr( $this->html, $bytes_already_copied, $diff->start - $bytes_already_copied );
+			$output_buffer       .= $diff->text;
+			$bytes_already_copied = $diff->end;
 		}
 
+		$this->html = $output_buffer . substr( $this->html, $bytes_already_copied );
+
 		/*
 		 * Adjust bookmark locations to account for how the text
 		 * replacements adjust offsets in the input document.
@@ -1527,6 +1516,8 @@ private function apply_attributes_updates() {
 		}
 
 		$this->lexical_updates = array();
+
+		return $accumulated_shift_for_given_point;
 	}
 
 	/**
@@ -1576,8 +1567,6 @@ public function seek( $bookmark_name ) {
 
 		// Point this tag processor before the sought tag opener and consume it.
 		$this->bytes_already_parsed = $this->bookmarks[ $bookmark_name ]->start;
-		$this->bytes_already_copied = $this->bytes_already_parsed;
-		$this->output_buffer        = substr( $this->html, 0, $this->bytes_already_copied );
 		return $this->next_tag( array( 'tag_closers' => 'visit' ) );
 	}
 
@@ -1676,14 +1665,14 @@ private function get_enqueued_attribute_value( $comparable_name ) {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute( 'data-test-id' ) === '14';
-	 *     $p->get_attribute( 'enabled' ) === true;
-	 *     $p->get_attribute( 'aria-label' ) === null;
-	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute( 'class' ) === null;
+	 * $p = new WP_HTML_Tag_Processor( '<div enabled class="test" data-test-id="14">Test</div>' );
+	 * $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 * $p->get_attribute( 'data-test-id' ) === '14';
+	 * $p->get_attribute( 'enabled' ) === true;
+	 * $p->get_attribute( 'aria-label' ) === null;
+	 *
+	 * $p->next_tag() === false;
+	 * $p->get_attribute( 'class' ) === null;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -1755,20 +1744,20 @@ public function get_attribute( $name ) {
 	 * > case-insensitive match for each other.
 	 *     - HTML 5 spec
 	 *
-	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
-	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
-	 *     $p->next_tag( array( 'class_name' => 'test' ) ) === true;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
+	 * $p = new WP_HTML_Tag_Processor( '<div data-ENABLED class="test" DATA-test-id="14">Test</div>' );
+	 * $p->next_tag( array( 'class_name' => 'test' ) ) === true;
+	 * $p->get_attribute_names_with_prefix( 'data-' ) === array( 'data-enabled', 'data-test-id' );
 	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_attribute_names_with_prefix( 'data-' ) === null;
+	 * $p->next_tag() === false;
+	 * $p->get_attribute_names_with_prefix( 'data-' ) === null;
 	 * ```
 	 *
 	 * @since 6.2.0
 	 *
+	 * @see https://html.spec.whatwg.org/multipage/syntax.html#attributes-2:ascii-case-insensitive
+	 *
 	 * @param string $prefix Prefix of requested attribute names.
 	 * @return array|null List of attribute names, or `null` when no tag opener is matched.
 	 */
@@ -1793,12 +1782,12 @@ function get_attribute_names_with_prefix( $prefix ) {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<DIV CLASS="test">Test</DIV>' );
-	 *     $p->next_tag() === true;
-	 *     $p->get_tag() === 'DIV';
+	 * $p = new WP_HTML_Tag_Processor( '<div class="test">Test</div>' );
+	 * $p->next_tag() === true;
+	 * $p->get_tag() === 'DIV';
 	 *
-	 *     $p->next_tag() === false;
-	 *     $p->get_tag() === null;
+	 * $p->next_tag() === false;
+	 * $p->get_tag() === null;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -1845,12 +1834,12 @@ public function has_self_closing_flag() {
 	 *
 	 * Example:
 	 * ```php
-	 *     $p = new WP_HTML_Tag_Processor( '<div></div>' );
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === false;
+	 * $p = new WP_HTML_Tag_Processor( '<div></div>' );
+	 * $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 * $p->is_tag_closer() === false;
 	 *
-	 *     $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
-	 *     $p->is_tag_closer() === true;
+	 * $p->next_tag( array( 'tag_name' => 'div', 'tag_closers' => 'visit' ) );
+	 * $p->is_tag_closer() === true;
 	 * ```
 	 *
 	 * @since 6.2.0
@@ -2110,7 +2099,8 @@ public function remove_class( $class_name ) {
 	 * Returns the string representation of the HTML Tag Processor.
 	 *
 	 * @since 6.2.0
-	 * @see get_updated_html
+	 *
+	 * @see WP_HTML_Tag_Processor::get_updated_html()
 	 *
 	 * @return string The processed HTML.
 	 */
@@ -2122,6 +2112,7 @@ public function __toString() {
 	 * Returns the string representation of the HTML Tag Processor.
 	 *
 	 * @since 6.2.0
+	 * @since 6.2.1 Shifts the internal cursor corresponding to the applied updates.
 	 *
 	 * @return string The processed HTML.
 	 */
@@ -2132,46 +2123,24 @@ public function get_updated_html() {
 		 * When there is nothing more to update and nothing has already been
 		 * updated, return the original document and avoid a string copy.
 		 */
-		if ( $requires_no_updating && 0 === $this->bytes_already_copied ) {
+		if ( $requires_no_updating ) {
 			return $this->html;
 		}
 
 		/*
-		 * If there are no updates left to apply, but some have already
-		 * been applied, then finish by copying the rest of the input
-		 * to the end of the updated document and return.
+		 * Keep track of the position right before the current tag. This will
+		 * be necessary for reparsing the current tag after updating the HTML.
 		 */
-		if ( $requires_no_updating && $this->bytes_already_copied > 0 ) {
-			$this->html                 = $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-			$this->bytes_already_copied = strlen( $this->output_buffer );
-			return $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-		}
-
-		// Apply the updates, rewind to before the current tag, and reparse the attributes.
-		$content_up_to_opened_tag_name = $this->output_buffer . substr(
-			$this->html,
-			$this->bytes_already_copied,
-			$this->tag_name_starts_at + $this->tag_name_length - $this->bytes_already_copied
-		);
+		$before_current_tag = $this->tag_name_starts_at - 1;
 
 		/*
-		 * 1. Apply the edits by flushing them to the output buffer and updating the copied byte count.
-		 *
-		 * Note: `apply_attributes_updates()` modifies `$this->output_buffer`.
+		 * 1. Apply the enqueued edits and update all the pointers to reflect those changes.
 		 */
 		$this->class_name_updates_to_attributes_updates();
-		$this->apply_attributes_updates();
+		$before_current_tag += $this->apply_attributes_updates( $before_current_tag );
 
 		/*
-		 * 2. Replace the original HTML with the now-updated HTML so that it's possible to
-		 *    seek to a previous location and have a consistent view of the updated document.
-		 */
-		$this->html                 = $this->output_buffer . substr( $this->html, $this->bytes_already_copied );
-		$this->output_buffer        = $content_up_to_opened_tag_name;
-		$this->bytes_already_copied = strlen( $this->output_buffer );
-
-		/*
-		 * 3. Point this tag processor at the original tag opener and consume it
+		 * 2. Rewind to before the current tag and reparse to get updated attributes.
 		 *
 		 * At this point the internal cursor points to the end of the tag name.
 		 * Rewind before the tag name starts so that it's as if the cursor didn't
@@ -2183,9 +2152,19 @@ public function get_updated_html() {
 		 *                 ^  | back up by the length of the tag name plus the opening <
 		 *                 \<-/ back up by strlen("em") + 1 ==> 3
 		 */
-		$this->bytes_already_parsed = strlen( $content_up_to_opened_tag_name ) - $this->tag_name_length - 1;
+
+		// Store existing state so it can be restored after reparsing.
+		$previous_parsed_byte_count = $this->bytes_already_parsed;
+		$previous_query             = $this->last_query;
+
+		// Reparse attributes.
+		$this->bytes_already_parsed = $before_current_tag;
 		$this->next_tag();
 
+		// Restore previous state.
+		$this->bytes_already_parsed = $previous_parsed_byte_count;
+		$this->parse_query( $previous_query );
+
 		return $this->html;
 	}
 
diff --git a/lib/compat/wordpress-6.3/navigation-block-preloading.php b/lib/compat/wordpress-6.3/navigation-block-preloading.php
new file mode 100644
index 0000000000000..82fe81b236a59
--- /dev/null
+++ b/lib/compat/wordpress-6.3/navigation-block-preloading.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Patches resources loaded by the block editor page
+ * to include Navigation posts.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Preloads requests needed for Navigation posts
+ *
+ * @param array                   $preload_paths    Preload paths to be filtered.
+ * @param WP_Block_Editor_Context $context          The current block editor context.
+ * @return array
+ */
+function gutenberg_preload_navigation_posts( $preload_paths, $context ) {
+
+	// Limit to the Site Editor.
+	if ( ! empty( $context->name ) && 'core/edit-site' !== $context->name ) {
+		return $preload_paths;
+	}
+
+	$navigation_rest_route = rest_get_route_for_post_type_items(
+		'wp_navigation'
+	);
+
+	// Preload the OPTIONS request for all Navigation posts request.
+	$preload_paths[] = array( $navigation_rest_route, 'OPTIONS' );
+
+	// Preload the GET request for ALL 'published' or 'draft' Navigation posts.
+	$preload_paths[] = array(
+		add_query_arg(
+			array(
+				'context'   => 'edit',
+				'per_page'  => 100,
+				'_locale'   => 'user',
+				// array indices are required to avoid query being encoded and not matching in cache.
+				'status[0]' => 'publish',
+				'status[1]' => 'draft',
+			),
+			$navigation_rest_route
+		),
+		'GET',
+	);
+
+	// Preload request for Browse Mode sidebar "Navigation" section.
+	$preload_paths[] = array(
+		add_query_arg(
+			array(
+				'context'  => 'edit',
+				'per_page' => 1,
+				'status'   => 'publish',
+				'order'    => 'desc',
+				'orderby'  => 'date',
+			),
+			$navigation_rest_route
+		),
+		'GET',
+	);
+
+	return $preload_paths;
+}
+add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_preload_navigation_posts', 10, 2 );
diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php
index c735f3b8a792a..8b00e10d09b66 100644
--- a/lib/compat/wordpress-6.3/script-loader.php
+++ b/lib/compat/wordpress-6.3/script-loader.php
@@ -56,7 +56,7 @@ function _gutenberg_get_iframed_editor_assets() {
 
 	ob_start();
 	wp_print_styles();
-	wp_print_fonts();
+	wp_print_fonts( true );
 	$styles = ob_get_clean();
 
 	ob_start();
diff --git a/lib/compat/wordpress-6.3/theme-previews.php b/lib/compat/wordpress-6.3/theme-previews.php
index 5671274925765..e73c13daa7cfb 100644
--- a/lib/compat/wordpress-6.3/theme-previews.php
+++ b/lib/compat/wordpress-6.3/theme-previews.php
@@ -6,32 +6,27 @@
  */
 
 /**
- * Filters the blog option to return the directory for the previewed theme.
+ * Filters the blog option to return the path for the previewed theme.
  *
- * @param string $current_stylesheet The current theme directory.
- * @return string The previewed theme directory.
+ * @param string $current_stylesheet The current theme's stylesheet or template path.
+ * @return string The previewed theme's stylesheet or template path.
  */
-function gutenberg_theme_preview_stylesheet( $current_stylesheet = null ) {
-	$preview_stylesheet = ! empty( $_GET['theme_preview'] ) ? $_GET['theme_preview'] : null;
-	$wp_theme           = wp_get_theme( $preview_stylesheet );
-	if ( ! is_wp_error( $wp_theme->errors() ) ) {
-		return sanitize_text_field( $preview_stylesheet );
+function gutenberg_get_theme_preview_path( $current_stylesheet = null ) {
+	// Don't allow non-admins to preview themes.
+	if ( ! current_user_can( 'switch_themes' ) ) {
+		return;
 	}
 
-	return $current_stylesheet;
-}
-
-/**
- * Filters the blog option to return the parent theme directory for the previewed theme.
- *
- * @param string $current_stylesheet The current theme directory.
- * @return string The previewed theme directory.
- */
-function gutenberg_theme_preview_template( $current_stylesheet = null ) {
 	$preview_stylesheet = ! empty( $_GET['theme_preview'] ) ? $_GET['theme_preview'] : null;
 	$wp_theme           = wp_get_theme( $preview_stylesheet );
 	if ( ! is_wp_error( $wp_theme->errors() ) ) {
-		return sanitize_text_field( $wp_theme->get_template() );
+		if ( current_filter() === 'template' ) {
+			$theme_path = $wp_theme->get_template();
+		} else {
+			$theme_path = $wp_theme->get_stylesheet();
+		}
+
+		return sanitize_text_field( $theme_path );
 	}
 
 	return $current_stylesheet;
@@ -41,6 +36,11 @@ function gutenberg_theme_preview_template( $current_stylesheet = null ) {
  * Adds a middleware to the REST API to set the theme for the preview.
  */
 function gutenberg_attach_theme_preview_middleware() {
+	// Don't allow non-admins to preview themes.
+	if ( ! current_user_can( 'switch_themes' ) ) {
+		return;
+	}
+
 	wp_add_inline_script(
 		'wp-api-fetch',
 		sprintf(
@@ -104,7 +104,7 @@ function addLivePreviewButton() {
  * Adds a nonce for the theme activation link.
  */
 function block_theme_activate_nonce() {
-	$nonce_handle = 'switch-theme_' . gutenberg_theme_preview_stylesheet();
+	$nonce_handle = 'switch-theme_' . gutenberg_get_theme_preview_path();
 	?>
 <script type="text/javascript">
 	window.BLOCK_THEME_ACTIVATE_NONCE = '<?php echo wp_create_nonce( $nonce_handle ); ?>';
@@ -119,8 +119,8 @@ function block_theme_activate_nonce() {
 	 * Attaches filters to enable theme previews in the Site Editor.
 	 */
 	if ( ! empty( $_GET['theme_preview'] ) ) {
-		add_filter( 'stylesheet', 'gutenberg_theme_preview_stylesheet' );
-		add_filter( 'template', 'gutenberg_theme_preview_template' );
+		add_filter( 'stylesheet', 'gutenberg_get_theme_preview_path' );
+		add_filter( 'template', 'gutenberg_get_theme_preview_path' );
 		add_filter( 'init', 'gutenberg_attach_theme_preview_middleware' );
 	}
 
diff --git a/lib/experimental/block-editor-settings-mobile.php b/lib/experimental/block-editor-settings-mobile.php
index b9d1147d60f96..91e3694c199f8 100644
--- a/lib/experimental/block-editor-settings-mobile.php
+++ b/lib/experimental/block-editor-settings-mobile.php
@@ -23,7 +23,7 @@ function gutenberg_get_block_editor_settings_mobile( $settings ) {
 		'mobile' === $_GET['context']
 	) {
 		if ( wp_theme_has_theme_json() ) {
-			$settings['__experimentalStyles'] = wp_get_global_styles();
+			$settings['__experimentalStyles'] = gutenberg_get_global_styles();
 		}
 
 		// To tell mobile that the site uses quote v2 (inner blocks).
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index fe7def9d3e6ff..72cba34770e0b 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -97,6 +97,9 @@ function gutenberg_enable_experiments() {
 	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-playlist-block', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnablePlaylistBlock = true', 'before' );
+  }
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-interactivity-api-navigation-block', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableNavigationBlockInteractivity = true', 'before' );
 	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-theme-previews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableThemePreviews = true', 'before' );
diff --git a/lib/experimental/fonts-api/bc-layer/class-gutenberg-fonts-api-bc-layer.php b/lib/experimental/fonts-api/bc-layer/class-gutenberg-fonts-api-bc-layer.php
new file mode 100644
index 0000000000000..8c85976987523
--- /dev/null
+++ b/lib/experimental/fonts-api/bc-layer/class-gutenberg-fonts-api-bc-layer.php
@@ -0,0 +1,96 @@
+<?php
+/**
+ * Fonts API BC Layer helpers.
+ *
+ * BACKPORT NOTE: Do not backport this file to Core.
+ * This file is now part of the API's Backwards-Compatibility (BC) layer.
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ * @since      15.7.0
+ */
+
+/**
+ * Class Gutenberg_Fonts_API_BC_Layer
+ *
+ * BACKPORT NOTE: Do not backport this file to Core.
+ */
+class Gutenberg_Fonts_API_BC_Layer {
+
+	/**
+	 * Determines if the given fonts array is the deprecated array structure.
+	 *
+	 * @param array $fonts Array of fonts to check.
+	 * @return bool True when deprecated structure, else false.
+	 */
+	public static function is_deprecated_structure( array $fonts ) {
+		/*
+		 * Iterates over the array's first dimension keys, which should
+		 * be the variation's font-family. If a key is empty or a non-string,
+		 * then the fonts are using a deprecated structure.
+		 */
+		foreach ( array_keys( $fonts ) as $font_family ) {
+			if ( ! WP_Fonts_Utils::is_defined( $font_family ) ) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	/**
+	 * Migrates deprecated fonts structure into new API data structure,
+	 * i.e. variations grouped by their font-family.
+	 *
+	 * @param array $fonts               Array of fonts to migrate.
+	 * @param bool  $silence_deprecation Optional. Silences the deprecation notice. For internal use.
+	 *                                   Default false.
+	 * @return array
+	 */
+	public static function migrate_deprecated_structure( array $fonts, $silence_deprecation = false ) {
+		if ( ! self::is_deprecated_structure( $fonts ) ) {
+			return $fonts;
+		}
+
+		if ( ! $silence_deprecation ) {
+			_deprecated_argument(
+				__METHOD__,
+				'14.9.1',
+				'A deprecated fonts array structure passed to wp_register_fonts(). Variations must be grouped and keyed by their font family.'
+			);
+		}
+
+		$new_fonts = array();
+		foreach ( $fonts as $font ) {
+			$font_family = WP_Fonts_Utils::get_font_family_from_variation( $font );
+			if ( ! $font_family ) {
+				continue;
+			}
+
+			if ( ! isset( $new_fonts[ $font_family ] ) ) {
+				$new_fonts[ $font_family ] = array();
+			}
+
+			$new_fonts[ $font_family ][] = $font;
+		}
+
+		return $new_fonts;
+	}
+
+	/**
+	 * Handle the deprecated fonts structure.
+	 *
+	 * @param array  $font    Font for extracting font family.
+	 * @param string $message Deprecation message to throw.
+	 * @return string|null The font family slug if successfully registered. Else null.
+	 */
+	protected static function extract_font_family_from_deprecated_fonts_structure( array $font, $message ) {
+		_deprecated_argument( __METHOD__, '14.9.1', $message );
+
+		$font_family = WP_Fonts_Utils::get_font_family_from_variation( $font );
+		if ( ! $font_family ) {
+			return null;
+		}
+
+		return WP_Fonts_Utils::convert_font_family_into_handle( $font_family );
+	}
+}
diff --git a/lib/experimental/fonts-api/deprecations/class-wp-web-fonts.php b/lib/experimental/fonts-api/bc-layer/class-wp-web-fonts.php
similarity index 100%
rename from lib/experimental/fonts-api/deprecations/class-wp-web-fonts.php
rename to lib/experimental/fonts-api/bc-layer/class-wp-web-fonts.php
diff --git a/lib/experimental/fonts-api/deprecations/class-wp-webfonts-provider-local.php b/lib/experimental/fonts-api/bc-layer/class-wp-webfonts-provider-local.php
similarity index 100%
rename from lib/experimental/fonts-api/deprecations/class-wp-webfonts-provider-local.php
rename to lib/experimental/fonts-api/bc-layer/class-wp-webfonts-provider-local.php
diff --git a/lib/experimental/fonts-api/deprecations/class-wp-webfonts-provider.php b/lib/experimental/fonts-api/bc-layer/class-wp-webfonts-provider.php
similarity index 100%
rename from lib/experimental/fonts-api/deprecations/class-wp-webfonts-provider.php
rename to lib/experimental/fonts-api/bc-layer/class-wp-webfonts-provider.php
diff --git a/lib/experimental/fonts-api/deprecations/class-wp-webfonts-utils.php b/lib/experimental/fonts-api/bc-layer/class-wp-webfonts-utils.php
similarity index 100%
rename from lib/experimental/fonts-api/deprecations/class-wp-webfonts-utils.php
rename to lib/experimental/fonts-api/bc-layer/class-wp-webfonts-utils.php
diff --git a/lib/experimental/fonts-api/deprecations/class-wp-webfonts.php b/lib/experimental/fonts-api/bc-layer/class-wp-webfonts.php
similarity index 50%
rename from lib/experimental/fonts-api/deprecations/class-wp-webfonts.php
rename to lib/experimental/fonts-api/bc-layer/class-wp-webfonts.php
index 62ec947fe286c..58633b9f8082b 100644
--- a/lib/experimental/fonts-api/deprecations/class-wp-webfonts.php
+++ b/lib/experimental/fonts-api/bc-layer/class-wp-webfonts.php
@@ -7,8 +7,8 @@
  * using the previous API, it exists to prevent breakages, giving
  * developers time to upgrade their code.
  *
- * @package    WordPress
- * @subpackage Fonts API
+ * @package    Gutenberg
+ * @subpackage Fonts API's BC Layer
  * @since      X.X.X
  */
 
@@ -19,11 +19,25 @@
 /**
  * Class WP_Webfonts
  *
- * BACKPORT NOTE: Do not backport this file to Core.
- * This class exists to give extenders guidance and time to upgrade their code
- * to use the new Web Fonts API.
+ * @deprecated GB 15.1 Use WP_Fonts instead.
  */
-class WP_Webfonts extends WP_Dependencies {
+class WP_Webfonts {
+	/**
+	 * Instance of WP_Fonts.
+	 *
+	 * @var WP_Fonts
+	 */
+	private $wp_fonts;
+
+	/**
+	 * Instantiate an instance of WP_Webfonts.
+	 *
+	 * @param null|WP_Fonts $wp_fonts Optional. Instance of WP_Fonts.
+	 *                                Default uses wp_fonts().
+	 */
+	public function __construct( $wp_fonts = null ) {
+		$this->wp_fonts = ! empty( $wp_fonts ) ? $wp_fonts : wp_fonts();
+	}
 
 	/**
 	 * Gets the font slug.
@@ -39,9 +53,22 @@ public static function get_font_slug( $to_convert ) {
 		$message = is_array( $to_convert )
 			? 'Use WP_Fonts_Utils::get_font_family_from_variation() to get the font family from an array and then WP_Fonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle'
 			: 'Use WP_Fonts_Utils::convert_font_family_into_handle() to convert the font-family name into a handle';
-		_deprecated_function( __METHOD__, 'X.X.X', $message );
+		_deprecated_function( __METHOD__, 'GB 14.9.1', $message );
+
+		if ( empty( $to_convert ) ) {
+			return false;
+		}
 
-		return static::_get_font_slug( $to_convert );
+		$font_family_name = is_array( $to_convert )
+			? WP_Fonts_Utils::get_font_family_from_variation( $to_convert )
+			: $to_convert;
+
+		$slug = false;
+		if ( ! empty( $font_family_name ) ) {
+			$slug = WP_Fonts_Utils::convert_font_family_into_handle( $font_family_name );
+		}
+
+		return $slug;
 	}
 
 	/**
@@ -54,6 +81,20 @@ public static function init() {
 		_deprecated_function( __METHOD__, 'GB 14.9.1', 'wp_fonts()' );
 	}
 
+	/**
+	 * Get the list of all registered font family handles.
+	 *
+	 * @since X.X.X
+	 * @deprecated GB 15.8.0 Use wp_fonts()->get_registered_font_families().
+	 *
+	 * @return string[]
+	 */
+	public function get_registered_font_families() {
+		_deprecated_function( __METHOD__, 'GB 15.8.0', 'wp_fonts()->get_registered_font_families()' );
+
+		return $this->wp_fonts->get_registered_font_families();
+	}
+
 	/**
 	 * Gets the list of registered fonts.
 	 *
@@ -79,7 +120,7 @@ public function get_registered_webfonts() {
 	public function get_enqueued_webfonts() {
 		_deprecated_function( __METHOD__, 'GB 14.9.1', 'wp_fonts()->get_enqueued()' );
 
-		return $this->queue;
+		return $this->wp_fonts->queue;
 	}
 
 	/**
@@ -114,21 +155,35 @@ public function register_webfont( array $webfont, $font_family_handle = '', $var
 			_deprecated_function( __METHOD__, 'GB 14.9.1', 'wp_register_fonts()' );
 		}
 
-		// When font family's handle is not passed, attempt to get it from the variation.
-		if ( ! WP_Fonts_Utils::is_defined( $font_family_handle ) ) {
-			$font_family = WP_Fonts_Utils::get_font_family_from_variation( $webfont );
-			if ( $font_family ) {
-				$font_family_handle = WP_Fonts_Utils::convert_font_family_into_handle( $font_family );
-			}
+		// Bail out if no variation passed as there's not to register.
+		if ( empty( $webfont ) ) {
+			return false;
+		}
+
+		// Restructure definition: keyed by font-family and array of variations.
+		$font = array( $webfont );
+		if ( WP_Fonts_Utils::is_defined( $font_family_handle ) ) {
+			$font = array( $font_family_handle => $font );
+		} else {
+			$font               = Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure( $font, true );
+			$font_family_handle = array_key_first( $font );
 		}
 
-		if ( empty( $font_family_handle ) ) {
+		if ( empty( $font ) || empty( $font_family_handle ) ) {
 			return false;
 		}
 
-		return $this->add_variation( $font_family_handle, $webfont, $variation_handle )
-			? $font_family_handle
-			: false;
+		// If the variation handle was passed, add it as variation key.
+		if ( WP_Fonts_Utils::is_defined( $variation_handle ) ) {
+			$font[ $font_family_handle ] = array( $variation_handle => $font[ $font_family_handle ][0] );
+		}
+
+		// Register with the Fonts API.
+		$handle = wp_register_fonts( $font );
+		if ( empty( $handle ) ) {
+			return false;
+		}
+		return array_pop( $handle );
 	}
 
 	/**
@@ -147,82 +202,6 @@ public function enqueue_webfont( $font_family_name ) {
 		return true;
 	}
 
-	/**
-	 * Migrates deprecated webfonts structure into new API data structure,
-	 * i.e. variations grouped by their font-family.
-	 *
-	 * @param array $webfonts Array of webfonts to migrate.
-	 * @return array
-	 */
-	public function migrate_deprecated_structure( array $webfonts ) {
-		$message = 'A deprecated fonts array structure passed to wp_register_fonts(). ' .
-			'Variations must be grouped and keyed by their font family.';
-		_deprecated_argument( __METHOD__, '14.9.1', $message );
-
-		$new_webfonts = array();
-		foreach ( $webfonts as $webfont ) {
-			$font_family = WP_Fonts_Utils::get_font_family_from_variation( $webfont );
-			if ( ! $font_family ) {
-				continue;
-			}
-
-			if ( ! isset( $new_webfonts[ $font_family ] ) ) {
-				$new_webfonts[ $font_family ] = array();
-			}
-
-			$new_webfonts[ $font_family ][] = $webfont;
-		}
-
-		return $new_webfonts;
-	}
-
-	/**
-	 * Determines if the given webfonts array is the deprecated array structure.
-	 *
-	 * @param array $webfonts Array of webfonts to check.
-	 * @return bool True when deprecated structure, else false.
-	 */
-	public function is_deprecated_structure( array $webfonts ) {
-		// Checks the first key to determine if it's empty or non-string.
-		foreach ( $webfonts as $font_family => $variations ) {
-			return ! WP_Fonts_Utils::is_defined( $font_family );
-		}
-	}
-
-	/**
-	 * Handle the deprecated web fonts structure.
-	 *
-	 * @param array  $webfont Web font for extracting font family.
-	 * @param string $message Deprecation message to throw.
-	 * @return string|null The font family slug if successfully registered. Else null.
-	 */
-	protected function extract_font_family_from_deprecated_webfonts_structure( array $webfont, $message ) {
-		_deprecated_argument( __METHOD__, '14.9.1', $message );
-
-		$font_family = WP_Fonts_Utils::get_font_family_from_variation( $webfont );
-		if ( ! $font_family ) {
-			return null;
-		}
-
-		return WP_Fonts_Utils::convert_font_family_into_handle( $font_family );
-	}
-
-	/**
-	 * Gets the font slug.
-	 *
-	 * Helper function for reuse without the deprecation.
-	 *
-	 * @param array|string $to_convert The value to convert into a slug. Expected as the web font's array
-	 *                                 or a font-family as a string.
-	 * @return string|false The font slug on success, or false if the font-family cannot be determined.
-	 */
-	private static function _get_font_slug( $to_convert ) {
-		$font_family_name = is_array( $to_convert ) ? WP_Fonts_Utils::get_font_family_from_variation( $to_convert ) : $to_convert;
-		return ! empty( $font_family_name )
-			? WP_Fonts_Utils::convert_font_family_into_handle( $font_family_name )
-			: false;
-	}
-
 	/**
 	 * Gets the registered webfonts in the original web font property structure keyed by each handle.
 	 *
@@ -233,7 +212,7 @@ private function _get_registered_webfonts() {
 		$registered    = array();
 
 		// Find the registered font families.
-		foreach ( $this->registered as $handle => $obj ) {
+		foreach ( $this->wp_fonts->registered as $handle => $obj ) {
 			if ( ! $obj->extra['is_font_family'] ) {
 				continue;
 			}
@@ -248,7 +227,7 @@ private function _get_registered_webfonts() {
 		// Build the return array structure.
 		foreach ( $font_families as $font_family_handle => $variations ) {
 			foreach ( $variations as $variation_handle ) {
-				$variation_obj = $this->registered[ $variation_handle ];
+				$variation_obj = $this->wp_fonts->registered[ $variation_handle ];
 
 				$registered[ $font_family_handle ][ $variation_handle ] = $variation_obj->extra['font-properties'];
 			}
@@ -256,40 +235,4 @@ private function _get_registered_webfonts() {
 
 		return $registered;
 	}
-
-	/**
-	 * Gets the enqueued webfonts in the original web font property structure keyed by each handle.
-	 *
-	 * @return array[]
-	 */
-	private function _get_enqueued_webfonts() {
-		$enqueued = array();
-		foreach ( $this->queue as $handle ) {
-			// Skip if not registered.
-			if ( ! isset( $this->registered[ $handle ] ) ) {
-				continue;
-			}
-
-			// Skip if already found.
-			if ( isset( $enqueued[ $handle ] ) ) {
-				continue;
-			}
-
-			$obj = $this->registered[ $handle ];
-
-			// If a variation, add it.
-			if ( ! $obj->extra['is_font_family'] ) {
-				$enqueued[ $handle ] = $obj->extra['font-properties'];
-				continue;
-			}
-
-			// If font-family, add all of its variations.
-			foreach ( $obj->deps as $variation_handle ) {
-				$obj                           = $this->registered[ $variation_handle ];
-				$enqueued[ $variation_handle ] = $obj->extra['font-properties'];
-			}
-		}
-
-		return $enqueued;
-	}
 }
diff --git a/lib/experimental/fonts-api/deprecations/webfonts-deprecations.php b/lib/experimental/fonts-api/bc-layer/webfonts-deprecations.php
similarity index 95%
rename from lib/experimental/fonts-api/deprecations/webfonts-deprecations.php
rename to lib/experimental/fonts-api/bc-layer/webfonts-deprecations.php
index 7179370471ad1..7a3a7bd013eea 100644
--- a/lib/experimental/fonts-api/deprecations/webfonts-deprecations.php
+++ b/lib/experimental/fonts-api/bc-layer/webfonts-deprecations.php
@@ -17,16 +17,18 @@
 	 * @since X.X.X
 	 * @deprecated GB 15.1 Use wp_fonts() instead.
 	 *
-	 * @global WP_Web_Fonts $wp_webfonts
+	 * @global WP_Webfonts $wp_webfonts
 	 *
-	 * @return WP_Web_Fonts WP_Web_Fonts instance.
+	 * @return WP_Webfonts WP_Webfonts instance.
 	 */
 	function wp_webfonts() {
 		_deprecated_function( __FUNCTION__, 'GB 15.1', 'wp_fonts()' );
 
 		global $wp_webfonts;
 
-		$wp_webfonts = wp_fonts();
+		if ( ! ( $wp_webfonts instanceof WP_Webfonts ) ) {
+			$wp_webfonts = new WP_Webfonts( wp_fonts() );
+		}
 
 		return $wp_webfonts;
 	}
@@ -59,6 +61,8 @@ function wp_webfonts() {
 	function wp_register_webfonts( array $webfonts ) {
 		_deprecated_function( __FUNCTION__, 'GB 15.1', 'wp_register_fonts()' );
 
+		$webfonts = Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure( $webfonts );
+
 		return wp_register_fonts( $webfonts );
 	}
 }
@@ -249,6 +253,8 @@ function wp_register_webfont_provider( $name, $classname ) {
 	 *                        An empty array if none were processed.
 	 */
 	function wp_print_webfonts( $handles = false ) {
+		_deprecated_function( __FUNCTION__, 'GB 15.1', 'wp_print_fonts' );
+
 		return wp_print_fonts( $handles );
 	}
 }
diff --git a/lib/experimental/fonts-api/class-wp-fonts.php b/lib/experimental/fonts-api/class-wp-fonts.php
index 6a06de8f4c86a..cbabd3d85d36d 100644
--- a/lib/experimental/fonts-api/class-wp-fonts.php
+++ b/lib/experimental/fonts-api/class-wp-fonts.php
@@ -16,7 +16,7 @@
  *
  * @since X.X.X
  */
-class WP_Fonts extends WP_Webfonts {
+class WP_Fonts extends WP_Dependencies {
 
 	/**
 	 * An array of registered providers.
diff --git a/lib/experimental/fonts-api/fonts-api.php b/lib/experimental/fonts-api/fonts-api.php
index 85d0f94ccc96f..5f3f7a60ee883 100644
--- a/lib/experimental/fonts-api/fonts-api.php
+++ b/lib/experimental/fonts-api/fonts-api.php
@@ -22,7 +22,18 @@ function wp_fonts() {
 
 		if ( ! ( $wp_fonts instanceof WP_Fonts ) ) {
 			$wp_fonts = new WP_Fonts();
+
+			// Initialize.
 			$wp_fonts->register_provider( 'local', 'WP_Fonts_Provider_Local' );
+			add_action( 'wp_head', 'wp_print_fonts', 50 );
+
+			/*
+			 * For themes without a theme.json, admin printing is initiated by the 'admin_print_styles' hook.
+			 * For themes with theme.json, admin printing is initiated by _wp_get_iframed_editor_assets().
+			 */
+			if ( ! wp_theme_has_theme_json() ) {
+				add_action( 'admin_print_styles', 'wp_print_fonts', 50 );
+			}
 		}
 
 		return $wp_fonts;
@@ -56,12 +67,6 @@ function wp_register_fonts( array $fonts ) {
 		$registered = array();
 		$wp_fonts   = wp_fonts();
 
-		// BACKPORT NOTE: Do not backport this code block to Core.
-		if ( $wp_fonts->is_deprecated_structure( $fonts ) ) {
-			$fonts = $wp_fonts->migrate_deprecated_structure( $fonts );
-		}
-		// BACKPORT NOTE: end of code block.
-
 		foreach ( $fonts as $font_family => $variations ) {
 			$font_family_handle = $wp_fonts->add_font_family( $font_family );
 			if ( ! $font_family_handle ) {
@@ -176,34 +181,52 @@ function wp_register_font_provider( $name, $classname ) {
 	 *
 	 * @since X.X.X
 	 *
-	 * @param string|string[]|false $handles Optional. Items to be processed: queue (false),
-	 *                                       single item (string), or multiple items (array of strings).
-	 *                                       Default false.
+	 * @param string|string[]|bool $handles Optional. Items to be processed: queue (false),
+	 *                                      for iframed editor assets (true), single item (string),
+	 *                                      or multiple items (array of strings).
+	 *                                      Default false.
 	 * @return array|string[] Array of font handles that have been processed.
 	 *                        An empty array if none were processed.
 	 */
 	function wp_print_fonts( $handles = false ) {
-		$wp_fonts   = wp_fonts();
-		$registered = $wp_fonts->get_registered_font_families();
+		$wp_fonts          = wp_fonts();
+		$registered        = $wp_fonts->get_registered_font_families();
+		$in_iframed_editor = true === $handles;
 
 		// Nothing to print, as no fonts are registered.
 		if ( empty( $registered ) ) {
 			return array();
 		}
 
-		if ( empty( $handles ) ) {
-			$handles = false;
+		// Skip this reassignment decision-making when using the default of `false`.
+		if ( false !== $handles ) {
+			// When `true`, print all registered fonts for the iframed editor.
+			if ( $in_iframed_editor ) {
+				$queue           = $wp_fonts->queue;
+				$done            = $wp_fonts->done;
+				$wp_fonts->done  = array();
+				$wp_fonts->queue = $registered;
+				$handles         = false;
+			} elseif ( empty( $handles ) ) {
+				// When falsey, assign `false` to print enqueued fonts.
+				$handles = false;
+			}
 		}
 
 		_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );
 
-		return $wp_fonts->do_items( $handles );
+		$printed = $wp_fonts->do_items( $handles );
+
+		// Reset the API.
+		if ( $in_iframed_editor ) {
+			$wp_fonts->done  = $done;
+			$wp_fonts->queue = $queue;
+		}
+
+		return $printed;
 	}
 }
 
-add_action( 'admin_print_styles', 'wp_print_fonts', 50 );
-add_action( 'wp_head', 'wp_print_fonts', 50 );
-
 /**
  * Add webfonts mime types.
  */
diff --git a/lib/experimental/interactivity-api/navigation-block-interactivity.php b/lib/experimental/interactivity-api/navigation-block-interactivity.php
new file mode 100644
index 0000000000000..21e1e0381b70e
--- /dev/null
+++ b/lib/experimental/interactivity-api/navigation-block-interactivity.php
@@ -0,0 +1,240 @@
+<?php
+/**
+ * Extend WordPress core navigation block to use the Interactivity API.
+ * Interactivity API directives are added using the Tag Processor while it is experimental.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Add Interactivity API directives to the navigation block markup using the Tag Processor
+ * The final HTML of the navigation block will look similar to this:
+ *
+ * <nav
+ *   data-wp-island
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation__responsive-container-open"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *   <div
+ *     class="wp-block-navigation__responsive-container"
+ *     data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
+ *     data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
+ *     data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.keydow="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     tabindex="-1"
+ *   >
+ *     <div class="wp-block-navigation__responsive-close">
+ *       <div
+ *         class="wp-block-navigation__responsive-dialog"
+ *         data-wp-bind.aria-modal="context.core.navigation.isMenuOpen"
+ *         data-wp-bind.role="selectors.core.navigation.roleAttribute"
+ *         data-wp-effect="effects.core.navigation.focusFirstElement"
+ *       >
+ *         <button
+ *           class="wp-block-navigation__responsive-container-close"
+ *           data-wp-on.click="actions.core.navigation.closeMenu"
+ *         >
+ *           <svg>
+ *         <button>
+ *         MENU ITEMS
+ *       </div>
+ *     </div>
+ *   </div>
+ * </nav>
+ *
+ * @param string $block_content Markup of the navigation block.
+ *
+ * @return string Navigation block markup with the proper directives
+ */
+function gutenberg_block_core_navigation_add_directives_to_markup( $block_content ) {
+	$w = new WP_HTML_Tag_Processor( $block_content );
+	// Add directives to the `<nav>` element.
+	if ( $w->next_tag( 'nav' ) ) {
+		$w->set_attribute( 'data-wp-island', '' );
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": true, "roleAttribute": "" } } }' );
+	};
+
+	// Add directives to the open menu button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-open',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->remove_attribute( 'data-micromodal-trigger' );
+	} else {
+		// If the open modal button not found, we handle submenus immediately.
+		$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );
+
+		// Add directives to the menu container.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'tabindex', '-1' );
+		};
+
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+		return $w->get_updated_html();
+	}
+
+	// Add directives to the menu container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-container',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+		$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		$w->set_attribute( 'tabindex', '-1' );
+	};
+
+	// Remove micromodal attribute.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-close',
+		)
+	) ) {
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Add directives to the dialog container.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'DIV',
+			'class_name' => 'wp-block-navigation__responsive-dialog',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-bind.aria-modal', 'context.core.navigation.isMenuOpen' );
+		$w->set_attribute( 'data-wp-bind.role', 'selectors.core.navigation.roleAttribute' );
+		$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.focusFirstElement' );
+	};
+
+	// Add directives to the close button.
+	if ( $w->next_tag(
+		array(
+			'tag_name'   => 'BUTTON',
+			'class_name' => 'wp-block-navigation__responsive-container-close',
+		)
+	) ) {
+		$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.closeMenu' );
+		$w->remove_attribute( 'data-micromodal-close' );
+	};
+
+	// Submenus.
+	gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+
+	return $w->get_updated_html();
+};
+
+/**
+ * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor
+ * The final HTML of the navigation-submenu and the page-list blocks will look similar to this:
+ *
+ * <li
+ *   class="has-child"
+ *   data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }'
+ * >
+ *   <button
+ *     class="wp-block-navigation-submenu__toggle"
+ *     data-wp-on.click="actions.core.navigation.openMenu"
+ *     data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *   >
+ *   </button>
+ *   <span>Title</span>
+ *   <ul
+ *     class="wp-block-navigation__submenu-container"
+ *     data-wp-effect="effects.core.navigation.initModal"
+ *     data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+ *     data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+ *   >
+ *     SUBMENU ITEMS
+ *   </ul>
+ * </li>
+ *
+ * @param string $w Markup of the navigation block.
+ *
+ * @return void
+ */
+function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
+	while ( $w->next_tag(
+		array(
+			'tag_name'   => 'LI',
+			'class_name' => 'has-child',
+		)
+	) ) {
+		// Add directives to the parent `<li>`.
+		$w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' );
+
+		// Add directives to the toggle submenu button.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'BUTTON',
+				'class_name' => 'wp-block-navigation-submenu__toggle',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-on.click', 'actions.core.navigation.openMenu' );
+			$w->set_attribute( 'data-wp-bind.aria-expanded', 'context.core.navigation.isMenuOpen' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+		};
+
+		// Add directives to the `<ul>` containing the subitems.
+		if ( $w->next_tag(
+			array(
+				'tag_name'   => 'UL',
+				'class_name' => 'wp-block-navigation__submenu-container',
+			)
+		) ) {
+			$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
+			$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
+			$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
+		};
+		// Iterate through subitems if exist.
+		gutenberg_block_core_navigation_add_directives_to_submenu( $w );
+	}
+};
+
+add_filter( 'render_block_core/navigation', 'gutenberg_block_core_navigation_add_directives_to_markup', 10, 1 );
+
+// Enqueue the `interactivity.js` file with the store.
+add_filter(
+	'block_type_metadata',
+	function ( $metadata ) {
+		if ( 'core/navigation' === $metadata['name'] ) {
+			wp_register_script(
+				'wp-block-navigation-view',
+				gutenberg_url( 'build/block-library/interactive-blocks/navigation.min.js' ),
+				array( 'wp-interactivity-runtime' )
+			);
+			$metadata['viewScript'] = array( 'wp-block-navigation-view' );
+		}
+		return $metadata;
+	},
+	10,
+	1
+);
diff --git a/lib/experimental/interactivity-api/script-loader.php b/lib/experimental/interactivity-api/script-loader.php
new file mode 100644
index 0000000000000..15804ca1e9244
--- /dev/null
+++ b/lib/experimental/interactivity-api/script-loader.php
@@ -0,0 +1,49 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers interactivity runtime and vendor scripts to use with interactive blocks.
+ *
+ * @param WP_Scripts $scripts WP_Scripts instance.
+ */
+function gutenberg_register_interactivity_scripts( $scripts ) {
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-runtime',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/interactivity.min.js'
+		),
+		array( 'wp-interactivity-vendors' )
+	);
+
+	gutenberg_override_script(
+		$scripts,
+		'wp-interactivity-vendors',
+		gutenberg_url(
+			'build/block-library/interactive-blocks/vendors.min.js'
+		)
+	);
+}
+add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 );
+
+/**
+ * Adds the "defer" attribute to all the interactivity script tags.
+ *
+ * @param string $tag    The generated script tag.
+ *
+ * @return string The modified script tag.
+ */
+function gutenberg_interactivity_scripts_add_defer_attribute( $tag ) {
+	if ( str_contains( $tag, '/block-library/interactive-blocks/' ) ) {
+		$p = new WP_HTML_Tag_Processor( $tag );
+		$p->next_tag( array( 'tag' => 'script' ) );
+		$p->set_attribute( 'defer', true );
+		return $p->get_updated_html();
+	}
+	return $tag;
+}
+add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 1 );
diff --git a/lib/experimental/navigation-fallback.php b/lib/experimental/navigation-fallback.php
new file mode 100644
index 0000000000000..f3a22e5ce997c
--- /dev/null
+++ b/lib/experimental/navigation-fallback.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Navigation Fallback
+ *
+ * Functions required for managing Navigation fallbacks behavior.
+ *
+ * @package Gutenberg
+ * @since 6.3.0
+ */
+
+/**
+ * Expose additional fields in the embeddable links of the
+ * Navigation Fallback REST endpoint.
+ *
+ * The endpoint may embed the full Navigation Menu object into the
+ * response as the `self` link. By default the Posts Controller
+ * will only exposes a limited subset of fields but the editor requires
+ * additional fields to be available in order to utilise the menu.
+ *
+ * @param array $schema the schema for the `wp_navigation` post.
+ * @return array the modified schema.
+ */
+function gutenberg_add_fields_to_navigation_fallback_embeded_links( $schema ) {
+	// Expose top level fields.
+	$schema['properties']['status']['context']  = array_merge( $schema['properties']['status']['context'], array( 'embed' ) );
+	$schema['properties']['content']['context'] = array_merge( $schema['properties']['content']['context'], array( 'embed' ) );
+
+	// Expose sub properties of content field.
+	$schema['properties']['content']['properties']['raw']['context']           = array_merge( $schema['properties']['content']['properties']['raw']['context'], array( 'embed' ) );
+	$schema['properties']['content']['properties']['rendered']['context']      = array_merge( $schema['properties']['content']['properties']['rendered']['context'], array( 'embed' ) );
+	$schema['properties']['content']['properties']['block_version']['context'] = array_merge( $schema['properties']['content']['properties']['block_version']['context'], array( 'embed' ) );
+
+	return $schema;
+}
+
+add_filter(
+	'rest_wp_navigation_item_schema',
+	'gutenberg_add_fields_to_navigation_fallback_embeded_links'
+);
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index b7428ba5a066e..1556176f65a83 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -72,7 +72,7 @@ function gutenberg_initialize_experiments_settings() {
 		'gutenberg-experiments',
 		'gutenberg_experiments_section',
 		array(
-			'label' => __( 'Test the command center; Open it using cmd + k in the site editor.', 'gutenberg' ),
+			'label' => __( 'Test the command center; Open it using cmd + k in the site or post editors.', 'gutenberg' ),
 			'id'    => 'gutenberg-command-center',
 		)
 	);
@@ -124,6 +124,19 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-playlist-block',
 		)
 	);
+  
+  
+	add_settings_field(
+		'gutenberg-interactivity-api-navigation-block',
+		__( 'Navigation block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test the Navigation block using the Interactivity API', 'gutenberg' ),
+			'id'    => 'gutenberg-interactivity-api-navigation-block',
+		)
+	);
 
 	register_setting(
 		'gutenberg-experiments',
diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php
new file mode 100644
index 0000000000000..b239080f298c2
--- /dev/null
+++ b/lib/global-styles-and-settings.php
@@ -0,0 +1,233 @@
+<?php
+/**
+ * API to interact with global settings & styles.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Returns the stylesheet resulting of merging core, theme, and user data.
+ *
+ * @param array $types Types of styles to load. Optional.
+ *                     It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles.
+ *                     If empty, it'll load the following:
+ *                     - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'.
+ *                     - for themes with theme.json: 'variables', 'presets', 'styles'.
+ *
+ * @return string Stylesheet.
+ */
+function gutenberg_get_global_stylesheet( $types = array() ) {
+	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
+	$can_use_cached = empty( $types ) && ! WP_DEBUG;
+	$cache_key      = 'gutenberg_get_global_stylesheet';
+	$cache_group    = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+
+	$supports_theme_json = wp_theme_has_theme_json();
+	if ( empty( $types ) && ! $supports_theme_json ) {
+		$types = array( 'variables', 'presets', 'base-layout-styles' );
+	} elseif ( empty( $types ) ) {
+		$types = array( 'variables', 'presets', 'styles' );
+	}
+
+	/*
+	 * If variables are part of the stylesheet,
+	 * we add them.
+	 *
+	 * This is so themes without a theme.json still work as before 5.9:
+	 * they can override the default presets.
+	 * See https://core.trac.wordpress.org/ticket/54782
+	 */
+	$styles_variables = '';
+	if ( in_array( 'variables', $types, true ) ) {
+		/*
+		 * We only use the default, theme, and custom origins.
+		 * This is because styles for blocks origin are added
+		 * at a later phase (render cycle) so we only render the ones in use.
+		 * @see wp_add_global_styles_for_blocks
+		 */
+		$origins          = array( 'default', 'theme', 'custom' );
+		$styles_variables = $tree->get_stylesheet( array( 'variables' ), $origins );
+		$types            = array_diff( $types, array( 'variables' ) );
+	}
+
+	/*
+	 * For the remaining types (presets, styles), we do consider origins:
+	 *
+	 * - themes without theme.json: only the classes for the presets defined by core
+	 * - themes with theme.json: the presets and styles classes, both from core and the theme
+	 */
+	$styles_rest = '';
+	if ( ! empty( $types ) ) {
+		/*
+		 * We only use the default, theme, and custom origins.
+		 * This is because styles for blocks origin are added
+		 * at a later phase (render cycle) so we only render the ones in use.
+		 * @see wp_add_global_styles_for_blocks
+		 */
+		$origins = array( 'default', 'theme', 'custom' );
+		if ( ! $supports_theme_json ) {
+			$origins = array( 'default' );
+		}
+		$styles_rest = $tree->get_stylesheet( $types, $origins );
+	}
+	$stylesheet = $styles_variables . $styles_rest;
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+	return $stylesheet;
+}
+
+/**
+ * Function to get the settings resulting of merging core, theme, and user data.
+ *
+ * @param array $path    Path to the specific setting to retrieve. Optional.
+ *                       If empty, will return all settings.
+ * @param array $context {
+ *     Metadata to know where to retrieve the $path from. Optional.
+ *
+ *     @type string $block_name Which block to retrieve the settings from.
+ *                              If empty, it'll return the settings for the global context.
+ *     @type string $origin     Which origin to take data from.
+ *                              Valid values are 'all' (core, theme, and user) or 'base' (core and theme).
+ *                              If empty or unknown, 'all' is used.
+ * }
+ *
+ * @return array The settings to retrieve.
+ */
+function gutenberg_get_global_settings( $path = array(), $context = array() ) {
+	if ( ! empty( $context['block_name'] ) ) {
+		$new_path = array( 'blocks', $context['block_name'] );
+		foreach ( $path as $subpath ) {
+			$new_path[] = $subpath;
+		}
+		$path = $new_path;
+	}
+
+	// This is the default value when no origin is provided or when it is 'all'.
+	$origin = 'custom';
+	if (
+		! wp_theme_has_theme_json() ||
+		( isset( $context['origin'] ) && 'base' === $context['origin'] )
+	) {
+		$origin = 'theme';
+	}
+
+	$cache_group = 'theme_json';
+	$cache_key   = 'gutenberg_get_global_settings_' . $origin;
+	$settings    = wp_cache_get( $cache_key, $cache_group );
+
+	if ( false === $settings || WP_DEBUG ) {
+		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( $origin )->get_settings();
+		wp_cache_set( $cache_key, $settings, $cache_group );
+	}
+
+	return _wp_array_get( $settings, $path, $settings );
+}
+
+/**
+ * Gets the global styles custom css from theme.json.
+ *
+ * @return string
+ */
+function gutenberg_get_global_styles_custom_css() {
+	// Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow.
+	$can_use_cached = ! WP_DEBUG;
+	$cache_key      = 'gutenberg_get_global_custom_css';
+	$cache_group    = 'theme_json';
+	if ( $can_use_cached ) {
+		$cached = wp_cache_get( $cache_key, $cache_group );
+		if ( $cached ) {
+			return $cached;
+		}
+	}
+
+	if ( ! wp_theme_has_theme_json() ) {
+		return '';
+	}
+
+	$tree       = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$stylesheet = $tree->get_custom_css();
+
+	if ( $can_use_cached ) {
+		wp_cache_set( $cache_key, $stylesheet, $cache_group );
+	}
+
+	return $stylesheet;
+}
+
+/**
+ * Adds global style rules to the inline style for each block.
+ *
+ * @return void
+ */
+function gutenberg_add_global_styles_for_blocks() {
+	$tree        = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+	$block_nodes = $tree->get_styles_block_nodes();
+	foreach ( $block_nodes as $metadata ) {
+		$block_css = $tree->get_styles_for_block( $metadata );
+
+		if ( ! wp_should_load_separate_core_block_assets() ) {
+			wp_add_inline_style( 'global-styles', $block_css );
+			continue;
+		}
+
+		$stylesheet_handle = 'global-styles';
+		if ( isset( $metadata['name'] ) ) {
+			/*
+			 * These block styles are added on block_render.
+			 * This hooks inline CSS to them so that they are loaded conditionally
+			 * based on whether or not the block is used on the page.
+			 */
+			if ( str_starts_with( $metadata['name'], 'core/' ) ) {
+				$block_name        = str_replace( 'core/', '', $metadata['name'] );
+				$stylesheet_handle = 'wp-block-' . $block_name;
+			}
+			wp_add_inline_style( $stylesheet_handle, $block_css );
+		}
+
+		// The likes of block element styles from theme.json do not have  $metadata['name'] set.
+		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
+			$result = array_values(
+				array_filter(
+					$metadata['path'],
+					function ( $item ) {
+						if ( strpos( $item, 'core/' ) !== false ) {
+							return true;
+						}
+						return false;
+					}
+				)
+			);
+			if ( isset( $result[0] ) ) {
+				if ( str_starts_with( $result[0], 'core/' ) ) {
+					$block_name        = str_replace( 'core/', '', $result[0] );
+					$stylesheet_handle = 'wp-block-' . $block_name;
+				}
+				wp_add_inline_style( $stylesheet_handle, $block_css );
+			}
+		}
+	}
+}
+
+/**
+ * Private function to clean the caches used by gutenberg_get_global_settings method.
+ *
+ * @access private
+ */
+function _gutenberg_clean_theme_json_caches() {
+	wp_cache_delete( 'wp_theme_has_theme_json', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_settings_custom', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_settings_theme', 'theme_json' );
+	wp_cache_delete( 'gutenberg_get_global_custom_css', 'theme_json' );
+	WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data();
+}
+add_action( 'start_previewing_theme', '_gutenberg_clean_theme_json_caches' );
+add_action( 'switch_theme', '_gutenberg_clean_theme_json_caches' );
diff --git a/lib/load.php b/lib/load.php
index a322e8af03a9d..8883f66c26794 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -49,6 +49,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.3/class-gutenberg-rest-global-styles-controller-6-3.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/rest-api.php';
 	require_once __DIR__ . '/compat/wordpress-6.3/theme-previews.php';
+	require_once __DIR__ . '/compat/wordpress-6.3/navigation-block-preloading.php';
 
 	// Experimental.
 	if ( ! class_exists( 'WP_Rest_Customizer_Nonces' ) ) {
@@ -73,7 +74,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
 require __DIR__ . '/compat/wordpress-6.2/site-editor.php';
 require __DIR__ . '/compat/wordpress-6.2/block-editor.php';
-require __DIR__ . '/compat/wordpress-6.2/block-editor-settings.php';
 require __DIR__ . '/compat/wordpress-6.2/theme.php';
 require __DIR__ . '/compat/wordpress-6.2/widgets.php';
 require __DIR__ . '/compat/wordpress-6.2/menu.php';
@@ -98,32 +98,43 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
 require __DIR__ . '/experimental/block-editor-settings.php';
 require __DIR__ . '/experimental/blocks.php';
+require __DIR__ . '/experimental/interactivity-api/script-loader.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';
+require __DIR__ . '/experimental/navigation-fallback.php';
+if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-navigation-block' ) ) {
+	require __DIR__ . '/experimental/interactivity-api/navigation-block-interactivity.php';
+}
 
 // Fonts API.
 if ( ! class_exists( 'WP_Fonts' ) ) {
+	// Fonts API files.
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts-provider.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/webfonts-deprecations.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/class-wp-webfonts-utils.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/class-wp-webfonts-provider.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/class-wp-webfonts-provider-local.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/class-wp-webfonts.php';
-	require __DIR__ . '/experimental/fonts-api/deprecations/class-wp-web-fonts.php';
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts-utils.php';
 	require __DIR__ . '/experimental/fonts-api/register-fonts-from-theme-json.php';
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts.php';
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts-provider-local.php';
 	require __DIR__ . '/experimental/fonts-api/fonts-api.php';
+	// BC Layer files, which will not be backported to WP Core.
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/webfonts-deprecations.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-wp-webfonts-utils.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-wp-webfonts-provider.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-wp-webfonts-provider-local.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-wp-webfonts.php';
+	require __DIR__ . '/experimental/fonts-api/bc-layer/class-wp-web-fonts.php';
 }
 
 // Plugin specific code.
+require __DIR__ . '/script-loader.php';
+require __DIR__ . '/global-styles-and-settings.php';
 require __DIR__ . '/class-wp-theme-json-data-gutenberg.php';
 require __DIR__ . '/class-wp-theme-json-gutenberg.php';
 require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
 require __DIR__ . '/class-wp-duotone-gutenberg.php';
 require __DIR__ . '/blocks.php';
+require __DIR__ . '/block-editor-settings.php';
 require __DIR__ . '/client-assets.php';
 require __DIR__ . '/demo.php';
 require __DIR__ . '/experiments-page.php';
@@ -151,3 +162,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/block-supports/duotone.php';
 require __DIR__ . '/block-supports/anchor.php';
 require __DIR__ . '/block-supports/shadow.php';
+
diff --git a/lib/script-loader.php b/lib/script-loader.php
new file mode 100644
index 0000000000000..2b5c7bb08a676
--- /dev/null
+++ b/lib/script-loader.php
@@ -0,0 +1,94 @@
+<?php
+/**
+ * Overrides the script-loader.php file.
+ *
+ * @package gutenberg
+ */
+
+// Remove core actions to override.
+remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
+remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
+
+/**
+ * Enqueues the global styles defined via theme.json.
+ *
+ * Copy of the core `wp_enqueue_global_styles`. Uses helper methods bundled with the plugin.
+ *
+ * @return void
+ */
+function gutenberg_enqueue_global_styles() {
+	$separate_assets  = wp_should_load_separate_core_block_assets();
+	$is_block_theme   = wp_is_block_theme();
+	$is_classic_theme = ! $is_block_theme;
+
+	/*
+	 * Global styles should be printed in the head when loading all styles combined.
+	 * The footer should only be used to print global styles for classic themes with separate core assets enabled.
+	 *
+	 * See https://core.trac.wordpress.org/ticket/53494.
+	 */
+	if (
+		( $is_block_theme && doing_action( 'wp_footer' ) ) ||
+		( $is_classic_theme && doing_action( 'wp_footer' ) && ! $separate_assets ) ||
+		( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) && $separate_assets )
+	) {
+		return;
+	}
+
+	/*
+	 * If loading the CSS for each block separately, then load the theme.json CSS conditionally.
+	 * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block.
+	 * This filter must be registered before calling wp_get_global_stylesheet();
+	 */
+	add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+
+	$stylesheet = gutenberg_get_global_stylesheet();
+	if ( empty( $stylesheet ) ) {
+		return;
+	}
+
+	wp_register_style( 'global-styles', false );
+	wp_add_inline_style( 'global-styles', $stylesheet );
+	wp_enqueue_style( 'global-styles' );
+
+	// Add each block as an inline css.
+	gutenberg_add_global_styles_for_blocks();
+}
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' );
+add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 );
+
+/**
+ * Enqueues the global styles custom css.
+ *
+ * @since 6.2.0
+ */
+function gutenberg_enqueue_global_styles_custom_css() {
+	if ( ! wp_is_block_theme() ) {
+		return;
+	}
+
+	// Don't enqueue Customizer's custom CSS separately.
+	remove_action( 'wp_head', 'wp_custom_css_cb', 101 );
+
+	$custom_css  = wp_get_custom_css();
+	$custom_css .= gutenberg_get_global_styles_custom_css();
+
+	if ( ! empty( $custom_css ) ) {
+		wp_add_inline_style( 'global-styles', $custom_css );
+	}
+}
+remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' );
+add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_custom_css' );
+
+/**
+ * Function that enqueues the CSS Custom Properties coming from theme.json.
+ *
+ * @since 5.9.0
+ */
+function gutenberg_enqueue_global_styles_css_custom_properties() {
+	wp_register_style( 'global-styles-css-custom-properties', false );
+	wp_add_inline_style( 'global-styles-css-custom-properties', gutenberg_get_global_stylesheet( array( 'variables' ) ) );
+	wp_enqueue_style( 'global-styles-css-custom-properties' );
+}
+remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );
+add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_global_styles_css_custom_properties' );
diff --git a/package-lock.json b/package-lock.json
index 5154297bb1711..d798b89d8e91a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "15.7.0-rc.1",
+	"version": "15.8.0-rc.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
@@ -7095,6 +7095,28 @@
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
 			"integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
 		},
+		"@preact/signals": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@preact/signals/-/signals-1.1.3.tgz",
+			"integrity": "sha512-N09DuAVvc90bBZVRwD+aFhtGyHAmJLhS3IFoawO/bYJRcil4k83nBOchpCEoS0s5+BXBpahgp0Mjf+IOqP57Og==",
+			"requires": {
+				"@preact/signals-core": "^1.2.3"
+			}
+		},
+		"@preact/signals-core": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.3.0.tgz",
+			"integrity": "sha512-M+M3ZOtd1dtV/uasyk4SZu1vbfEJ4NeENv0F7F12nijZYedB5wSgbtZcuACyssnTznhF4ctUyrR0dZHuHfyWKA=="
+		},
+		"@preact/signals-react": {
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-1.3.1.tgz",
+			"integrity": "sha512-YHWoGAT2Mmv2OGlGx7CCCbaLjAH/InV9ytGAR+esX8Y0HJmMAw51QlqGYOD5GPA5LwimV7Ht1x7KEIegDZIoxg==",
+			"requires": {
+				"@preact/signals-core": "^1.3.0",
+				"use-sync-external-store": "^1.2.0"
+			}
+		},
 		"@radix-ui/primitive": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
@@ -16862,6 +16884,7 @@
 			"version": "file:packages/block-library",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"@preact/signals": "^1.1.3",
 				"@wordpress/a11y": "file:packages/a11y",
 				"@wordpress/api-fetch": "file:packages/api-fetch",
 				"@wordpress/autop": "file:packages/autop",
@@ -16894,12 +16917,14 @@
 				"change-case": "^4.1.2",
 				"classnames": "^2.3.1",
 				"colord": "^2.7.0",
+				"deepsignal": "^1.3.0",
 				"escape-html": "^1.0.3",
 				"fast-average-color": "^9.1.1",
 				"fast-deep-equal": "^3.1.3",
 				"lodash": "^4.17.21",
 				"memize": "^1.1.0",
 				"micromodal": "^0.4.10",
+				"preact": "^10.13.2",
 				"remove-accents": "^0.4.2"
 			}
 		},
@@ -17387,6 +17412,7 @@
 				"@wordpress/core-commands": "file:packages/core-commands",
 				"@wordpress/core-data": "file:packages/core-data",
 				"@wordpress/data": "file:packages/data",
+				"@wordpress/date": "file:packages/date",
 				"@wordpress/deprecated": "file:packages/deprecated",
 				"@wordpress/dom": "file:packages/dom",
 				"@wordpress/editor": "file:packages/editor",
@@ -25510,7 +25536,7 @@
 		"array-ify": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
-			"integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=",
+			"integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
 			"dev": true
 		},
 		"array-includes": {
@@ -30679,7 +30705,7 @@
 		"debuglog": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
-			"integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=",
+			"integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==",
 			"dev": true
 		},
 		"decache": {
@@ -30794,6 +30820,16 @@
 			"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
 			"dev": true
 		},
+		"deepsignal": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/deepsignal/-/deepsignal-1.3.0.tgz",
+			"integrity": "sha512-tMh3g3F7Ka6gKALqu7uOzi/3Xm00mGWgWR3hp1GUzGGnTz2J926ime5aOe1haz233v4encyjTkZESr5R6hr8oQ==",
+			"requires": {
+				"@preact/signals": "^1.0.0",
+				"@preact/signals-core": "^1.0.0",
+				"@preact/signals-react": "^1.0.0"
+			}
+		},
 		"default-browser-id": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-1.0.4.tgz",
@@ -35511,7 +35547,7 @@
 		"git-remote-origin-url": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz",
-			"integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=",
+			"integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==",
 			"dev": true,
 			"requires": {
 				"gitconfiglocal": "^1.0.0",
@@ -35558,7 +35594,7 @@
 		"gitconfiglocal": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz",
-			"integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=",
+			"integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==",
 			"dev": true,
 			"requires": {
 				"ini": "^1.3.2"
@@ -36832,7 +36868,7 @@
 		"humanize-ms": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-			"integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=",
+			"integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
 			"dev": true,
 			"requires": {
 				"ms": "^2.0.0"
@@ -37848,7 +37884,7 @@
 		"is-text-path": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz",
-			"integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=",
+			"integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==",
 			"dev": true,
 			"requires": {
 				"text-extensions": "^1.0.0"
@@ -39621,7 +39657,7 @@
 		"jsonparse": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-			"integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=",
+			"integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
 			"dev": true
 		},
 		"jsprim": {
@@ -40721,7 +40757,7 @@
 		"lodash.ismatch": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz",
-			"integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=",
+			"integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==",
 			"dev": true
 		},
 		"lodash.isplainobject": {
@@ -47601,6 +47637,11 @@
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
 			"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
 		},
+		"preact": {
+			"version": "10.13.2",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz",
+			"integrity": "sha512-q44QFLhOhty2Bd0Y46fnYW0gD/cbVM9dUVtNTDKPcdXSMA7jfY+Jpd6rk3GB0lcQss0z5s/6CmVP0Z/hV+g6pw=="
+		},
 		"prelude-ls": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -48219,7 +48260,7 @@
 		"promzard": {
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-			"integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=",
+			"integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==",
 			"dev": true,
 			"requires": {
 				"read": "1"
@@ -48253,7 +48294,7 @@
 		"proto-list": {
 			"version": "1.2.4",
 			"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-			"integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
+			"integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
 			"dev": true
 		},
 		"protocols": {
@@ -49810,7 +49851,7 @@
 		"read": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-			"integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=",
+			"integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==",
 			"dev": true,
 			"requires": {
 				"mute-stream": "~0.0.4"
@@ -55167,7 +55208,7 @@
 		"temp-dir": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-			"integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
+			"integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
 			"dev": true
 		},
 		"terminal-link": {
diff --git a/package.json b/package.json
index 45b1e5ef319d2..a1122bfda1142 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "15.7.0-rc.1",
+	"version": "15.8.0-rc.1",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
@@ -272,7 +272,7 @@
 		"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",
+		"format:php": "wp-env run --env-cwd=\"wp-content/plugins/gutenberg\" cli composer run-script format",
 		"lint": "concurrently \"npm run lint:lockfile\" \"npm run lint:tsconfig\" \"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",
@@ -281,8 +281,8 @@
 		"lint:lockfile": "node ./bin/validate-package-lock.js",
 		"lint:tsconfig": "node ./bin/validate-tsconfig.mjs",
 		"lint:md:docs": "wp-scripts lint-md-docs",
-		"prelint:php": "wp-env run composer \"update --no-interaction\"",
-		"lint:php": "wp-env run composer run-script lint",
+		"prelint:php": "wp-env run --env-cwd='wp-content/plugins/gutenberg' cli composer update --no-interaction",
+		"lint:php": "wp-env run --env-cwd=\"wp-content/plugins/gutenberg\" cli 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",
@@ -318,9 +318,9 @@
 		"test:unit:debug": "wp-scripts --inspect-brk test-unit-js --runInBand --no-cache --verbose --config test/unit/jest.config.js ",
 		"test:unit:profile": "wp-scripts --cpu-prof 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",
+		"test:unit:php": "wp-env run --env-cwd=\"wp-content/plugins/gutenberg\" tests-wordpress vendor/bin/phpunit -c 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:php:multisite": "wp-env run --env-cwd=\"wp-content/plugins/gutenberg\" tests-wordpress vendor/bin/phpunit -c phpunit/multisite.xml --verbose",
 		"test:unit:update": "npm run test:unit -- --updateSnapshot",
 		"test:unit:watch": "npm run test:unit -- --watch",
 		"wp-env": "wp-env"
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 93a9a1cee8e0b..710aa0353f3b6 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 8efbabb1b040a..9d90d43289403 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index d08e665f0c3c6..ed1e0048686b0 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.33.0 (2023-05-10)
+
 ## 2.32.0 (2023-04-26)
 
 ## 2.31.0 (2023-04-12)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index ba53cfcf3b2d9..150316357118e 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "2.32.0",
+	"version": "2.33.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index 3601bf97c18de..2a1e7f019c6af 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.30.0 (2023-05-10)
+
 ## 6.29.0 (2023-04-26)
 
 ## 6.28.0 (2023-04-12)
diff --git a/packages/api-fetch/README.md b/packages/api-fetch/README.md
index 9fd172cdd9f9b..8c17e4ce8bbad 100644
--- a/packages/api-fetch/README.md
+++ b/packages/api-fetch/README.md
@@ -30,7 +30,7 @@ import { addQueryArgs } from '@wordpress/url';
 
 const queryParams = { include: [1,2,3] }; // Return posts with ID = 1,2,3.
 
-apiFetch( { path: addQueryArgs( '/wp/v2/posts', queryParams } ).then( ( posts ) => {
+apiFetch( { path: addQueryArgs( '/wp/v2/posts', queryParams ) } ).then( ( posts ) => {
 	console.log( posts );
 } );
 ```
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index bb11f86e2e7cd..57d23a1cd1513 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "6.29.0",
+	"version": "6.30.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index df3ceadd8a7f6..6d570bec38371 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 6d5b0981ef072..e1cf9e9342342 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index cc8d0c9c2a6eb..1128c0bf2dd40 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.16.0 (2023-05-10)
+
 ## 4.15.0 (2023-04-26)
 
 ## 4.14.0 (2023-04-12)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 7a5f08111fa0d..d920dfe231e76 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "4.15.0",
+	"version": "4.16.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index 4011353dd849b..abe855e9d38e0 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.17.0 (2023-05-10)
+
 ## 5.16.0 (2023-04-26)
 
 ## 5.15.0 (2023-04-12)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index 78447ce77f568..42af82649fd03 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "5.16.0",
+	"version": "5.17.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index ea1746ef03fb4..ff2444a7c24b4 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.17.0 (2023-05-10)
+
 ## 7.16.0 (2023-04-26)
 
 ## 7.15.0 (2023-04-12)
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index 2a7477510d3c0..65a3eaf71efa2 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "7.16.0",
+	"version": "7.17.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index a6b137c8c175e..a7f96d707768a 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.24.0 (2023-05-10)
+
 ## 4.23.0 (2023-04-26)
 
 ## 4.22.0 (2023-04-12)
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 1a23bf77fb8a6..fcfc235616827 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -46,6 +46,7 @@ $grid-unit-80: 8 * $grid-unit;		// 64px
 
 $icon-size: 24px;
 $button-size: 36px;
+$button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 0432ad7475595..c8d2b6d52655d 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "4.23.0",
+	"version": "4.24.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index 66c202988b722..e249ed11cfbc0 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 6eda39602f283..745e2aa527fec 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index daa99aa903b74..26f1b82ffe80a 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index fb2f88ca52119..eb67f973217a6 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 18e5be254a4f0..2639c2dcc7b32 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 12.1.0 (2023-05-10)
+
+-   `MediaPlaceholder`: Remove the undocumented `onHTMLDrop` prop ([#49673](https://github.com/WordPress/gutenberg/pull/49673)).
+
 ## 12.0.0 (2023-04-26)
 
 ### Breaking Changes
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index c25c2f7b07cf1..91aa34572648d 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -539,7 +539,7 @@ Provides the CSS class names and inline styles for a block's typography support
 _Parameters_
 
 -   _attributes_ `Object`: Block attributes.
--   _fluidTypographySettings_ `Object|boolean`: If boolean, whether the function should try to convert font sizes to fluid values, otherwise an object containing theme fluid typography settings.
+-   _settings_ `Object|boolean`: Merged theme.json settings
 
 _Returns_
 
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 47a41269b3b48..efd980cba06c6 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.0.0",
+	"version": "12.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js
index 40f61bfc79ce4..02844e8899397 100644
--- a/packages/block-editor/src/components/block-draggable/index.js
+++ b/packages/block-editor/src/components/block-draggable/index.js
@@ -67,14 +67,18 @@ const BlockDraggable = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				startDraggingBlocks( clientIds );
-				isDragging.current = true;
+				// Defer hiding the dragged source element to the next
+				// frame to enable dragging.
+				window.requestAnimationFrame( () => {
+					startDraggingBlocks( clientIds );
+					isDragging.current = true;
 
-				startScrolling( event );
+					startScrolling( event );
 
-				if ( onDragStart ) {
-					onDragStart();
-				}
+					if ( onDragStart ) {
+						onDragStart();
+					}
+				} );
 			} }
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {
diff --git a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
index 83f4513ba643e..ae6da81e4d007 100644
--- a/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
+++ b/packages/block-editor/src/components/block-list/block-invalid-warning.native.js
@@ -8,7 +8,7 @@ import { TouchableWithoutFeedback } from 'react-native';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,22 +16,30 @@ import { createBlock } from '@wordpress/blocks';
 import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
-	const accessibilityLabel = sprintf(
-		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
-		__( '%s block. This block has invalid content' ),
-		blockTitle
-	);
-
+export default function BlockInvalidWarning( { clientId } ) {
 	const selector = ( select ) => {
 		const { getBlock } = select( blockEditorStore );
 		const block = getBlock( clientId );
+		const { name } = block || {};
+
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType?.title;
+		const blockIcon = blockType?.icon;
+
 		return {
 			block,
+			blockTitle: title,
+			icon: blockIcon,
 		};
 	};
 
-	const { block } = useSelect( selector, [ clientId ] );
+	const { block, blockTitle, icon } = useSelect( selector, [ clientId ] );
+
+	const accessibilityLabel = sprintf(
+		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
+		__( '%s block. This block has invalid content' ),
+		blockTitle
+	);
 
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
diff --git a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
index e32d793af46d6..80aa2589eb64f 100644
--- a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
@@ -7,14 +7,23 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
-function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
+function BlockListItemCell( { children, item: clientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
+	const { rootClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+			return { rootClientId: getBlockRootClientId( clientId ) };
+		},
+		[ clientId ]
+	);
 
 	useEffect( () => {
 		return () => {
diff --git a/packages/block-editor/src/components/block-list/block-list-item.native.js b/packages/block-editor/src/components/block-list/block-list-item.native.js
index 394defd84c9e3..f1885196f67f7 100644
--- a/packages/block-editor/src/components/block-list/block-list-item.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item.native.js
@@ -1,237 +1,209 @@
 /**
  * External dependencies
  */
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockListBlock from './block';
-import BlockInsertionPoint from './insertion-point';
+import Block from './block';
 import Grid from './grid-item';
-
-import styles from './block-list-item.native.scss';
+import BlockInsertionPoint from './insertion-point';
 import { store as blockEditorStore } from '../../store';
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
 
-const stretchStyle = {
-	flex: 1,
-};
-
-export class BlockListItem extends Component {
-	getMarginHorizontal() {
-		const {
-			blockAlignment,
-			marginHorizontal,
-			parentBlockAlignment,
-			hasParents,
-			blockName,
-			parentBlockName,
-			parentWidth,
-			blockWidth,
-		} = this.props;
-		const { isFullWidth, isWideWidth, isWider, isContainerRelated } =
-			alignmentHelpers;
-
-		if ( isFullWidth( blockAlignment ) ) {
-			if ( ! hasParents ) {
-				return 0;
-			}
-			return marginHorizontal;
-		}
-		if ( isWideWidth( blockAlignment ) ) {
-			return marginHorizontal;
-		}
-
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-
-		if (
-			isFullWidth( parentBlockAlignment ) &&
-			! isWider( blockWidth, 'medium' )
-		) {
-			if (
-				isContainerRelated( blockName ) ||
-				isWider( screenWidth, 'mobile' )
-			) {
-				return marginHorizontal;
-			}
-			return marginHorizontal * 2;
-		}
-
-		if (
-			isContainerRelated( parentBlockName ) &&
-			! isContainerRelated( blockName )
-		) {
-			const isScreenWidthEqual = parentWidth === screenWidth;
-			if ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {
-				return marginHorizontal;
-			}
-		}
-
-		return marginHorizontal;
-	}
-
-	getContentStyles( readableContentViewStyle ) {
-		const { blockAlignment, blockName, hasParents, parentBlockName } =
-			this.props;
-		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-
-		return [
-			readableContentViewStyle,
-			isFullWidth( blockAlignment ) &&
-				! hasParents && {
-					width: styles.fullAlignment.width,
-				},
-			! blockAlignment &&
-				hasParents &&
-				! isContainerRelated( parentBlockName ) &&
-				isContainerRelated( blockName ) && {
-					paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
-				},
-		];
-	}
-
-	renderContent() {
-		const {
-			blockAlignment,
-			clientId,
-			isReadOnly,
-			shouldShowInsertionPointBefore,
-			shouldShowInsertionPointAfter,
-			contentResizeMode,
-			shouldShowInnerBlockAppender,
-			parentWidth,
-			marginHorizontal,
-			blockName,
-			blockWidth,
-			...restProps
-		} = this.props;
-
-		const readableContentViewStyle =
-			contentResizeMode === 'stretch' && stretchStyle;
-		const { isContainerRelated } = alignmentHelpers;
-
-		return (
-			<ReadableContentView
-				align={ blockAlignment }
-				style={ [
-					readableContentViewStyle,
-					isContainerRelated( blockName ) &&
-						parentWidth && {
-							maxWidth: parentWidth + 2 * marginHorizontal,
-						},
-				] }
-			>
-				<View
-					style={ this.getContentStyles( readableContentViewStyle ) }
-					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
-				>
-					{ shouldShowInsertionPointBefore && (
-						<BlockInsertionPoint />
-					) }
-					<BlockListBlock
-						key={ clientId }
-						showTitle={ false }
-						clientId={ clientId }
-						parentWidth={ parentWidth }
-						{ ...restProps }
-						marginHorizontal={ this.getMarginHorizontal() }
-						blockWidth={ blockWidth }
-					/>
-					{ ! shouldShowInnerBlockAppender() &&
-						shouldShowInsertionPointAfter && (
-							<BlockInsertionPoint />
-						) }
-				</View>
-			</ReadableContentView>
-		);
-	}
-
-	render() {
-		const { parentWidth, blockWidth, isGridItem } = this.props;
-
-		if ( ! blockWidth ) {
-			return null;
-		}
-
-		if ( isGridItem ) {
-			const { numOfColumns, tileCount, tileIndex } = this.props;
-			return (
-				<Grid
-					maxWidth={ parentWidth }
-					numOfColumns={ numOfColumns }
-					tileCount={ tileCount }
-					index={ tileIndex }
-				>
-					{ this.renderContent() }
-				</Grid>
-			);
-		}
-		return this.renderContent();
-	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { rootClientId, isStackedHorizontally, clientId } ) => {
+/**
+ * BlockListItemContent component. Renders a block with an optional insertion point.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent} The rendered block list item content.
+ */
+function BlockListItemContent( {
+	blockWidth,
+	clientId,
+	contentResizeMode,
+	contentStyle,
+	index,
+	isStackedHorizontally,
+	marginHorizontal,
+	marginVertical,
+	onAddBlock,
+	onDeleteBlock,
+	parentWidth,
+	rootClientId,
+	shouldShowInnerBlockAppender,
+} ) {
+	const {
+		blockAlignment,
+		blockName,
+		hasParents,
+		parentBlockAlignment,
+		parentBlockName,
+		shouldShowInsertionPointAfter,
+		shouldShowInsertionPointBefore,
+	} = useSelect(
+		( select ) => {
 			const {
-				getBlockOrder,
+				getBlockAttributes,
 				getBlockInsertionPoint,
+				getBlockName,
+				getBlockOrder,
 				isBlockInsertionPointVisible,
-				getSettings,
-				getBlockParents,
-				getBlock,
 			} = select( blockEditorStore );
-
 			const blockClientIds = getBlockOrder( rootClientId );
 			const insertionPoint = getBlockInsertionPoint();
-			const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-			const shouldShowInsertionPointBefore =
-				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If list is empty, show the insertion point (via the default appender)
-				( blockClientIds.length === 0 ||
-					// Or if the insertion point is right before the denoted block.
-					blockClientIds[ insertionPoint.index ] === clientId );
-
-			const shouldShowInsertionPointAfter =
+
+			const insertionPointVisibleInCurrentRoot =
 				! isStackedHorizontally &&
-				blockInsertionPointIsVisible &&
-				insertionPoint.rootClientId === rootClientId &&
-				// If the insertion point is at the end of the list.
-				blockClientIds.length === insertionPoint.index &&
-				// And the denoted block is the last one on the list, show the indicator at the end of the block.
+				isBlockInsertionPointVisible() &&
+				insertionPoint.rootClientId === rootClientId;
+
+			const isListEmpty = blockClientIds.length === 0;
+			const isInsertionPointBeforeBlock =
+				blockClientIds[ insertionPoint.index ] === clientId;
+			const isInsertionPointAtEnd =
+				blockClientIds.length === insertionPoint.index;
+			const isBlockLastInList =
 				blockClientIds[ insertionPoint.index - 1 ] === clientId;
 
-			const isReadOnly = getSettings().readOnly;
+			const showInsertionPointBefore =
+				insertionPointVisibleInCurrentRoot &&
+				( isListEmpty || isInsertionPointBeforeBlock );
+
+			const showInsertionPointAfter =
+				insertionPointVisibleInCurrentRoot &&
+				isInsertionPointAtEnd &&
+				isBlockLastInList;
 
-			const { attributes, name } = getBlock( clientId ) || {};
-			const { align } = attributes || {};
-			const parents = getBlockParents( clientId, true );
-			const hasParents = !! parents.length;
-			const parentBlock = hasParents ? getBlock( parents[ 0 ] ) : {};
-			const { align: parentBlockAlignment } =
-				parentBlock?.attributes || {};
-			const { name: parentBlockName } = parentBlock || {};
+			const blockHasParents = !! rootClientId;
+			const name = getBlockName( clientId );
+			const parentName = getBlockName( rootClientId );
+			const { align } = getBlockAttributes( clientId ) || {};
+			const { align: parentBlockAlign } =
+				getBlockAttributes( rootClientId ) || {};
 
 			return {
-				shouldShowInsertionPointBefore,
-				shouldShowInsertionPointAfter,
-				isReadOnly,
-				hasParents,
 				blockAlignment: align,
-				parentBlockAlignment,
 				blockName: name,
-				parentBlockName,
+				hasParents: blockHasParents,
+				parentBlockAlignment: parentBlockAlign,
+				parentBlockName: parentName,
+				shouldShowInsertionPointAfter: showInsertionPointAfter,
+				shouldShowInsertionPointBefore: showInsertionPointBefore,
 			};
-		}
-	),
-] )( BlockListItem );
+		},
+		[ isStackedHorizontally, rootClientId, clientId ]
+	);
+
+	const [ wrapperStyles, margin ] = useEditorWrapperStyles( {
+		align: blockAlignment,
+		blockName,
+		blockWidth,
+		contentResizeMode,
+		hasParents,
+		marginHorizontal,
+		parentBlockAlignment,
+		parentBlockName,
+		parentWidth,
+	} );
+
+	const shouldShowBlockInsertionPointAfter =
+		! shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
+
+	return (
+		<View style={ wrapperStyles }>
+			{ shouldShowInsertionPointBefore && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-before-row-${ index + 1 }` }
+				/>
+			) }
+			<Block
+				blockWidth={ blockWidth }
+				clientId={ clientId }
+				contentStyle={ contentStyle }
+				isStackedHorizontally={ isStackedHorizontally }
+				marginHorizontal={ margin }
+				marginVertical={ marginVertical }
+				onAddBlock={ onAddBlock }
+				parentBlockAlignment={ parentBlockAlignment }
+				onDeleteBlock={ onDeleteBlock }
+				parentWidth={ parentWidth }
+				rootClientId={ rootClientId }
+			/>
+			{ shouldShowBlockInsertionPointAfter && (
+				<BlockInsertionPoint
+					testID={ `block-insertion-point-after-row-${ index + 1 }` }
+				/>
+			) }
+		</View>
+	);
+}
+
+/**
+ * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
+ * @param {number}   props.numOfColumns                 The number of columns for grid layout.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {number}   props.tileCount                    The total number of tiles in the grid.
+ * @param {number}   props.tileIndex                    The index of the current tile in the grid.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent|null} The rendered block list item or null if the block width is not provided.
+ */
+function BlockListItem( props ) {
+	const { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =
+		props;
+
+	if ( ! props?.blockWidth ) {
+		return null;
+	}
+
+	if ( isGridItem ) {
+		return (
+			<Grid
+				maxWidth={ props?.parentWidth }
+				numOfColumns={ numOfColumns }
+				tileCount={ tileCount }
+				index={ tileIndex }
+			>
+				<BlockListItemContent { ...restProps } />
+			</Grid>
+		);
+	}
+
+	return <BlockListItemContent { ...restProps } />;
+}
+
+export default BlockListItem;
diff --git a/packages/block-editor/src/components/block-list/block-outline.native.js b/packages/block-editor/src/components/block-list/block-outline.native.js
new file mode 100644
index 0000000000000..eabff38fa6e7b
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/block-outline.native.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { alignmentHelpers } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+function BlockOutline( {
+	align,
+	blockWidth,
+	isParentSelected,
+	isSelected,
+	name,
+	screenWidth,
+} ) {
+	const { isFullWidth, isContainerRelated } = alignmentHelpers;
+	const isScreenWidthWider = blockWidth < screenWidth;
+
+	const styleSolidBorder = [
+		styles.solidBorder,
+		isFullWidth( align ) && isScreenWidthWider && styles.borderFullWidth,
+		isFullWidth( align ) &&
+			isContainerRelated( name ) &&
+			isScreenWidthWider &&
+			styles.containerBorderFullWidth,
+		usePreferredColorSchemeStyle(
+			styles.solidBorderColor,
+			styles.solidBorderColorDark
+		),
+	];
+	const styleDashedBorder = [
+		styles.dashedBorder,
+		usePreferredColorSchemeStyle(
+			styles.dashedBorderColor,
+			styles.dashedBorderColorDark
+		),
+	];
+
+	return (
+		<>
+			{ isSelected && (
+				<View pointerEvents="box-none" style={ styleSolidBorder } />
+			) }
+			{ isParentSelected && <View style={ styleDashedBorder } /> }
+		</>
+	);
+}
+
+export default BlockOutline;
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
index 061ff216a1383..2c4516db06017 100644
--- a/packages/block-editor/src/components/block-list/block.native.js
+++ b/packages/block-editor/src/components/block-list/block.native.js
@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { View, Text, TouchableWithoutFeedback, Dimensions } from 'react-native';
+import { Pressable, useWindowDimensions, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { Component, createRef, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useRef, useState } from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
@@ -14,51 +14,265 @@ import {
 	alignmentHelpers,
 	useGlobalStyles,
 } from '@wordpress/components';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import {
-	getBlockType,
 	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-	switchToBlockType,
+	getBlockType,
 	getDefaultBlockName,
 	isUnmodifiedBlock,
+	isUnmodifiedDefaultBlock,
+	switchToBlockType,
 } from '@wordpress/blocks';
-import { useSetting } from '@wordpress/block-editor';
+import {
+	useDispatch,
+	useSelect,
+	withDispatch,
+	withSelect,
+} from '@wordpress/data';
+import { compose, ifCondition, pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import styles from './block.scss';
 import BlockEdit from '../block-edit';
+import BlockDraggable from '../block-draggable';
 import BlockInvalidWarning from './block-invalid-warning';
 import BlockMobileToolbar from '../block-mobile-toolbar';
+import BlockOutline from './block-outline';
+import styles from './block.scss';
 import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
 import { useLayout } from './layout';
+import useSetting from '../use-setting';
 
 const emptyArray = [];
-function BlockForType( {
+
+// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
+const wrapperPropsCache = new WeakMap();
+const emptyObj = {};
+function getWrapperProps( value, getWrapperPropsFunction ) {
+	if ( ! getWrapperPropsFunction ) {
+		return emptyObj;
+	}
+	const cachedValue = wrapperPropsCache.get( value );
+	if ( ! cachedValue ) {
+		const wrapperProps = getWrapperPropsFunction( value );
+		wrapperPropsCache.set( value, wrapperProps );
+		return wrapperProps;
+	}
+	return cachedValue;
+}
+
+function BlockWrapper( {
+	accessibilityLabel,
+	align,
+	blockWidth,
+	children,
+	clientId,
+	draggingClientId,
+	draggingEnabled,
+	isDescendentBlockSelected,
+	isParentSelected,
+	isSelected,
+	isStackedHorizontally,
+	isTouchable,
+	marginHorizontal,
+	marginVertical,
+	onDeleteBlock,
+	onFocus,
+} ) {
+	const { width: screenWidth } = useWindowDimensions();
+	const anchorNodeRef = useRef();
+	const { isFullWidth } = alignmentHelpers;
+	const isScreenWidthEqual = blockWidth === screenWidth;
+	const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
+	const blockWrapperStyles = { flex: 1 };
+	const blockWrapperStyle = [
+		blockWrapperStyles,
+		{
+			marginVertical,
+			marginHorizontal,
+		},
+	];
+	const accessible = ! ( isSelected || isDescendentBlockSelected );
+
+	return (
+		<Pressable
+			accessibilityLabel={ accessibilityLabel }
+			accessibilityRole="button"
+			accessible={ accessible }
+			disabled={ ! isTouchable }
+			onPress={ onFocus }
+			style={ blockWrapperStyle }
+		>
+			<BlockOutline
+				isSelected={ isSelected }
+				isParentSelected={ isParentSelected }
+				screenWidth={ screenWidth }
+			/>
+			<BlockDraggable
+				clientId={ clientId }
+				draggingClientId={ draggingClientId }
+				enabled={ draggingEnabled }
+				testID="draggable-trigger-content"
+			>
+				{ children }
+			</BlockDraggable>
+			<View style={ styles.neutralToolbar } ref={ anchorNodeRef }>
+				{ isSelected && (
+					<BlockMobileToolbar
+						anchorNodeRef={ anchorNodeRef.current }
+						blockWidth={ blockWidth }
+						clientId={ clientId }
+						draggingClientId={ draggingClientId }
+						isFullWidth={ isFullWidthToolbar }
+						isStackedHorizontally={ isStackedHorizontally }
+						onDelete={ onDeleteBlock }
+					/>
+				) }
+			</View>
+		</Pressable>
+	);
+}
+
+function BlockListBlock( {
 	attributes,
+	blockWidth: blockWrapperWidth,
+	canRemove,
 	clientId,
 	contentStyle,
-	getBlockWidth,
-	insertBlocksAfter,
+	isLocked,
 	isSelected,
-	onMerge,
+	isSelectionEnabled,
+	isStackedHorizontally,
+	isValid,
+	marginHorizontal,
+	marginVertical,
 	name,
-	onBlockFocus,
-	onChange,
 	onDeleteBlock,
+	onInsertBlocksAfter,
+	onMerge,
 	onReplace,
-	parentWidth,
 	parentBlockAlignment,
-	wrapperProps,
-	blockWidth,
-	baseGlobalStyles,
+	parentWidth,
+	rootClientId,
+	setAttributes,
+	toggleSelection,
 } ) {
+	const {
+		baseGlobalStyles,
+		blockType,
+		draggingClientId,
+		draggingEnabled,
+		firstToSelectId,
+		isDescendantOfParentSelected,
+		isDescendentBlockSelected,
+		isParentSelected,
+		order,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockCount,
+				getBlockHierarchyRootClientId,
+				getBlockIndex,
+				getBlockParents,
+				getLowestCommonAncestorWithSelectedBlock,
+				getSelectedBlockClientId,
+				getSettings,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
+			const currentBlockType = getBlockType( name || 'core/missing' );
+			const blockOrder = getBlockIndex( clientId );
+			const descendentBlockSelected = hasSelectedInnerBlock(
+				clientId,
+				true
+			);
+			const selectedBlockClientId = getSelectedBlockClientId();
+
+			const parents = getBlockParents( clientId, true );
+			const parentSelected =
+				// Set false as a default value to prevent re-render when it's changed from null to false.
+				( selectedBlockClientId || false ) &&
+				selectedBlockClientId === rootClientId;
+
+			const selectedParents = clientId ? parents : [];
+			const descendantOfParentSelected =
+				selectedParents.includes( rootClientId );
+			const hasInnerBlocks = getBlockCount( clientId ) > 0;
+
+			const commonAncestor =
+				getLowestCommonAncestorWithSelectedBlock( clientId );
+			const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
+			const firstBlockToSelectId = commonAncestor
+				? parents[ commonAncestorIndex ]
+				: parents[ parents.length - 1 ];
+
+			// For blocks with inner blocks, we only enable the dragging in the nested
+			// blocks if any of them are selected. This way we prevent the long-press
+			// gesture from being disabled for elements within the block UI.
+			const isDraggingEnabled =
+				! hasInnerBlocks || isSelected || ! descendentBlockSelected;
+			// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
+			// will be the top in the hierarchy.
+			const currentDraggingClientId =
+				getBlockHierarchyRootClientId( clientId );
+
+			const globalStylesBaseStyles =
+				getSettings()?.__experimentalGlobalStylesBaseStyles;
+
+			return {
+				baseGlobalStyles: globalStylesBaseStyles,
+				blockType: currentBlockType,
+				draggingClientId: currentDraggingClientId,
+				draggingEnabled: isDraggingEnabled,
+				firstToSelectId: firstBlockToSelectId,
+				isDescendantOfParentSelected: descendantOfParentSelected,
+				isDescendentBlockSelected: descendentBlockSelected,
+				isParentSelected: parentSelected,
+				order: blockOrder,
+			};
+		},
+		[ clientId, isSelected, name, rootClientId ]
+	);
+	const { removeBlock, selectBlock } = useDispatch( blockEditorStore );
+	const initialBlockWidth = blockWrapperWidth - 2 * marginHorizontal;
+	const [ blockWidth, setBlockWidth ] = useState( initialBlockWidth );
+	const parentLayout = useLayout() || {};
 	const defaultColors = useMobileGlobalStylesColors();
-	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
 	const globalStyle = useGlobalStyles();
+	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
+
+	const onRemove = useCallback(
+		() => removeBlock( clientId ),
+		[ clientId, removeBlock ]
+	);
+	const onFocus = useCallback( () => {
+		const blockId = firstToSelectId ?? clientId;
+		if ( ! isSelected ) {
+			selectBlock( blockId );
+		}
+	}, [ selectBlock, clientId, firstToSelectId, isSelected ] );
+
+	const onLayout = useCallback(
+		( { nativeEvent } ) => {
+			const layoutWidth = Math.floor( nativeEvent.layout.width );
+
+			if ( ! blockWidth || ! layoutWidth ) {
+				return;
+			}
+
+			if ( blockWidth !== layoutWidth ) {
+				setBlockWidth( layoutWidth );
+			}
+		},
+		[ blockWidth, setBlockWidth ]
+	);
+
+	// Block level styles.
+	const wrapperProps = getWrapperProps(
+		attributes,
+		blockType.getEditWrapperProps
+	);
+
+	// Inherited styles merged with block level styles.
 	const mergedStyle = useMemo( () => {
 		return getMergedGlobalStyles(
 			baseGlobalStyles,
@@ -69,12 +283,20 @@ function BlockForType( {
 			name,
 			fontSizes
 		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
-		defaultColors,
-		globalStyle,
-		// I couldn't simply use attributes and wrapperProps.styles as a dependency because they are almost always a new reference.
-		// Thanks to the JSON.stringify we check if the value is the same instead of reference.
+		// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
+		// JSON.stringify is used for the following purposes:
+		// 1. To create a single, comparable value from the globalStyle, wrapperProps.style, and attributes objects. This allows useMemo to
+		//    efficiently determine if a change has occurred in any of these objects.
+		// 2. To filter the attributes object, ensuring that only the relevant attributes (included in
+		//    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
+		//    unnecessary useMemo calls when other, unrelated attributes change.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		JSON.stringify( globalStyle ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( wrapperProps.style ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify(
 			Object.fromEntries(
 				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>
@@ -84,502 +306,251 @@ function BlockForType( {
 		),
 	] );
 
-	const parentLayout = useLayout();
-
-	return (
-		<GlobalStylesContext.Provider value={ mergedStyle }>
-			<BlockEdit
-				name={ name }
-				isSelected={ isSelected }
-				attributes={ attributes }
-				setAttributes={ onChange }
-				onFocus={ onBlockFocus }
-				onReplace={ onReplace }
-				insertBlocksAfter={ insertBlocksAfter }
-				mergeBlocks={ onMerge }
-				// Block level styles.
-				wrapperProps={ wrapperProps }
-				// Inherited styles merged with block level styles.
-				style={ mergedStyle }
-				clientId={ clientId }
-				parentWidth={ parentWidth }
-				contentStyle={ contentStyle }
-				onDeleteBlock={ onDeleteBlock }
-				blockWidth={ blockWidth }
-				parentBlockAlignment={ parentBlockAlignment }
-				__unstableParentLayout={ parentLayout }
-			/>
-			<View onLayout={ getBlockWidth } />
-		</GlobalStylesContext.Provider>
+	const { align } = attributes;
+	const isFocused = isSelected || isDescendentBlockSelected;
+	const isTouchable =
+		isSelected ||
+		isDescendantOfParentSelected ||
+		isParentSelected ||
+		! rootClientId;
+
+	const accessibilityLabel = getAccessibleBlockLabel(
+		blockType,
+		attributes,
+		order + 1
 	);
-}
-
-class BlockListBlock extends Component {
-	constructor() {
-		super( ...arguments );
-
-		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
-		this.onFocus = this.onFocus.bind( this );
-		this.getBlockWidth = this.getBlockWidth.bind( this );
-
-		this.state = {
-			blockWidth: this.props.blockWidth - 2 * this.props.marginHorizontal,
-		};
-
-		this.anchorNodeRef = createRef();
-	}
-
-	onFocus() {
-		const { firstToSelectId, isSelected, onSelect } = this.props;
-		if ( ! isSelected ) {
-			onSelect( firstToSelectId );
-		}
-	}
-
-	insertBlocksAfter( blocks ) {
-		this.props.onInsertBlocks( blocks, this.props.order + 1 );
-
-		if ( blocks[ 0 ] ) {
-			// Focus on the first block inserted.
-			this.props.onSelect( blocks[ 0 ].clientId );
-		}
-	}
-
-	getBlockWidth( { nativeEvent } ) {
-		const { layout } = nativeEvent;
-		const { blockWidth } = this.state;
-		const layoutWidth = Math.floor( layout.width );
-
-		if ( ! blockWidth || ! layoutWidth ) {
-			return;
-		}
-
-		if ( blockWidth !== layoutWidth ) {
-			this.setState( { blockWidth: layoutWidth } );
-		}
-	}
-
-	getBlockForType() {
-		const { blockWidth } = this.state;
-		return (
-			<BlockForType
-				{ ...this.props }
-				onBlockFocus={ this.onFocus }
-				insertBlocksAfter={ this.insertBlocksAfter }
-				getBlockWidth={ this.getBlockWidth }
-				blockWidth={ blockWidth }
-			/>
-		);
-	}
-
-	renderBlockTitle() {
-		return (
-			<View style={ styles.blockTitle }>
-				<Text>BlockType: { this.props.name }</Text>
-			</View>
-		);
-	}
 
-	render() {
-		const {
-			attributes,
-			blockType,
-			clientId,
-			icon,
-			isSelected,
-			isValid,
-			order,
-			title,
-			isDimmed,
-			isTouchable,
-			onDeleteBlock,
-			isStackedHorizontally,
-			isParentSelected,
-			getStylesFromColorScheme,
-			marginVertical,
-			marginHorizontal,
-			isInnerBlockSelected,
-			name,
-			draggingEnabled,
-			draggingClientId,
-		} = this.props;
-
-		if ( ! attributes || ! blockType ) {
-			return null;
-		}
-		const { blockWidth } = this.state;
-		const { align } = attributes;
-		const accessibilityLabel = getAccessibleBlockLabel(
-			blockType,
-			attributes,
-			order + 1
-		);
-		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-		const accessible = ! ( isSelected || isInnerBlockSelected );
-		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-		const isScreenWidthEqual = blockWidth === screenWidth;
-		const isScreenWidthWider = blockWidth < screenWidth;
-		const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;
-
-		return (
-			<TouchableWithoutFeedback
-				onPress={ this.onFocus }
-				accessible={ accessible }
-				accessibilityRole={ 'button' }
-			>
-				<View
-					style={ { flex: 1 } }
-					accessibilityLabel={ accessibilityLabel }
-				>
-					<View
-						pointerEvents={ isTouchable ? 'auto' : 'box-only' }
-						accessibilityLabel={ accessibilityLabel }
-						style={ [
-							{ marginVertical, marginHorizontal, flex: 1 },
-							isDimmed && styles.dimmed,
-						] }
-					>
-						{ isSelected && (
-							<View
-								pointerEvents="box-none"
-								style={ [
-									styles.solidBorder,
-									isFullWidth( align ) &&
-										isScreenWidthWider &&
-										styles.borderFullWidth,
-									isFullWidth( align ) &&
-										isContainerRelated( name ) &&
-										isScreenWidthWider &&
-										styles.containerBorderFullWidth,
-									getStylesFromColorScheme(
-										styles.solidBorderColor,
-										styles.solidBorderColorDark
-									),
-								] }
-							/>
-						) }
-						{ isParentSelected && (
-							<View
-								style={ [
-									styles.dashedBorder,
-									getStylesFromColorScheme(
-										styles.dashedBorderColor,
-										styles.dashedBorderColorDark
-									),
-								] }
-							/>
-						) }
-						<BlockDraggable
+	return (
+		<BlockWrapper
+			accessibilityLabel={ accessibilityLabel }
+			align={ align }
+			blockWidth={ blockWidth }
+			clientId={ clientId }
+			draggingClientId={ draggingClientId }
+			draggingEnabled={ draggingEnabled }
+			isFocused={ isFocused }
+			isDescendentBlockSelected={ isDescendentBlockSelected }
+			isParentSelected={ isParentSelected }
+			isSelected={ isSelected }
+			isStackedHorizontally={ isStackedHorizontally }
+			isTouchable={ isTouchable }
+			marginHorizontal={ marginHorizontal }
+			marginVertical={ marginVertical }
+			onDeleteBlock={ onDeleteBlock }
+			onFocus={ onFocus }
+		>
+			{ () =>
+				! isValid ? (
+					<BlockInvalidWarning clientId={ clientId } />
+				) : (
+					<GlobalStylesContext.Provider value={ mergedStyle }>
+						<BlockEdit
+							attributes={ attributes }
+							blockWidth={ blockWidth }
 							clientId={ clientId }
-							draggingClientId={ draggingClientId }
-							enabled={ draggingEnabled }
-							testID="draggable-trigger-content"
-						>
-							{ () =>
-								isValid ? (
-									this.getBlockForType()
-								) : (
-									<BlockInvalidWarning
-										blockTitle={ title }
-										icon={ icon }
-										clientId={ clientId }
-									/>
-								)
+							contentStyle={ contentStyle }
+							insertBlocksAfter={
+								isLocked ? undefined : onInsertBlocksAfter
 							}
-						</BlockDraggable>
-						<View
-							style={ styles.neutralToolbar }
-							ref={ this.anchorNodeRef }
-						>
-							{ isSelected && (
-								<BlockMobileToolbar
-									clientId={ clientId }
-									onDelete={ onDeleteBlock }
-									isStackedHorizontally={
-										isStackedHorizontally
-									}
-									blockWidth={ blockWidth }
-									anchorNodeRef={ this.anchorNodeRef.current }
-									isFullWidth={ isFullWidthToolbar }
-									draggingClientId={ draggingClientId }
-								/>
-							) }
-						</View>
-					</View>
-				</View>
-			</TouchableWithoutFeedback>
-		);
-	}
-}
-
-// Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
-const wrapperPropsCache = new WeakMap();
-const emptyObj = {};
-function getWrapperProps( value, getWrapperPropsFunction ) {
-	if ( ! getWrapperPropsFunction ) {
-		return emptyObj;
-	}
-	const cachedValue = wrapperPropsCache.get( value );
-	if ( ! cachedValue ) {
-		const wrapperProps = getWrapperPropsFunction( value );
-		wrapperPropsCache.set( value, wrapperProps );
-		return wrapperProps;
-	}
-	return cachedValue;
+							isSelected={ isSelected }
+							isSelectionEnabled={ isSelectionEnabled }
+							mergeBlocks={ canRemove ? onMerge : undefined }
+							name={ name }
+							onFocus={ onFocus }
+							onRemove={ canRemove ? onRemove : undefined }
+							onReplace={ canRemove ? onReplace : undefined }
+							parentBlockAlignment={ parentBlockAlignment }
+							parentWidth={ parentWidth }
+							setAttributes={ setAttributes }
+							style={ mergedStyle }
+							toggleSelection={ toggleSelection }
+							__unstableParentLayout={
+								Object.keys( parentLayout ).length
+									? parentLayout
+									: undefined
+							}
+							wrapperProps={ wrapperProps }
+						/>
+						<View onLayout={ onLayout } />
+					</GlobalStylesContext.Provider>
+				)
+			}
+		</BlockWrapper>
+	);
 }
 
-export default compose( [
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlockIndex,
-			getBlockCount,
-			getSettings,
-			isBlockSelected,
-			getBlock,
-			getSelectedBlockClientId,
-			getLowestCommonAncestorWithSelectedBlock,
-			getBlockParents,
-			hasSelectedInnerBlock,
-			getBlockHierarchyRootClientId,
-		} = select( blockEditorStore );
-
-		const order = getBlockIndex( clientId );
-		const isSelected = isBlockSelected( clientId );
-		const isInnerBlockSelected = hasSelectedInnerBlock( clientId );
-		const block = getBlock( clientId );
-		const { name, attributes, isValid } = block || {};
-
-		const blockType = getBlockType( name || 'core/missing' );
-		const title = blockType?.title;
-		const icon = blockType?.icon;
-
-		const parents = getBlockParents( clientId, true );
-		const parentId = parents[ 0 ] || '';
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-
-		const commonAncestor =
-			getLowestCommonAncestorWithSelectedBlock( clientId );
-		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
-		const firstToSelectId = commonAncestor
-			? parents[ commonAncestorIndex ]
-			: parents[ parents.length - 1 ];
-
-		const isParentSelected =
-			// Set false as a default value to prevent re-render when it's changed from null to false.
-			( selectedBlockClientId || false ) &&
-			selectedBlockClientId === parentId;
-
-		const selectedParents = selectedBlockClientId
-			? getBlockParents( selectedBlockClientId )
-			: [];
-		const isDescendantOfParentSelected =
-			selectedParents.includes( parentId );
-		const isTouchable =
-			isSelected ||
-			isDescendantOfParentSelected ||
-			isParentSelected ||
-			parentId === '';
-		const baseGlobalStyles =
-			getSettings()?.__experimentalGlobalStylesBaseStyles;
-
-		const hasInnerBlocks = getBlockCount( clientId ) > 0;
-		// For blocks with inner blocks, we only enable the dragging in the nested
-		// blocks if any of them are selected. This way we prevent the long-press
-		// gesture from being disabled for elements within the block UI.
-		const draggingEnabled =
-			! hasInnerBlocks ||
-			isSelected ||
-			! hasSelectedInnerBlock( clientId, true );
-		// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
-		// will be the top in the hierarchy.
-		const draggingClientId = getBlockHierarchyRootClientId( clientId );
-
-		return {
-			icon,
-			name: name || 'core/missing',
-			order,
-			title,
-			attributes,
-			blockType,
-			draggingClientId,
-			draggingEnabled,
-			isSelected,
-			isInnerBlockSelected,
-			isValid,
-			isParentSelected,
-			firstToSelectId,
-			isTouchable,
-			baseGlobalStyles,
-			wrapperProps: getWrapperProps(
-				attributes,
-				blockType.getEditWrapperProps
-			),
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps, registry ) => {
-		const {
-			insertBlocks,
-			mergeBlocks,
-			replaceBlocks,
-			selectBlock,
-			updateBlockAttributes,
-			moveBlocksToPosition,
-			removeBlock,
-		} = dispatch( blockEditorStore );
-
-		return {
-			onMerge( forward ) {
-				const { clientId, rootClientId } = ownProps;
-				const {
-					getPreviousBlockClientId,
-					getNextBlockClientId,
-					getBlock,
-					getBlockAttributes,
-					getBlockName,
-					getBlockOrder,
-					getBlockIndex,
-					getBlockRootClientId,
-					canInsertBlockType,
-				} = registry.select( blockEditorStore );
-
-				/**
-				 * Moves the block with clientId up one level. If the block type
-				 * cannot be inserted at the new location, it will be attempted to
-				 * convert to the default block type.
-				 *
-				 * @param {string}  _clientId       The block to move.
-				 * @param {boolean} changeSelection Whether to change the selection
-				 *                                  to the moved block.
-				 */
-				function moveFirstItemUp( _clientId, changeSelection = true ) {
-					const targetRootClientId =
-						getBlockRootClientId( _clientId );
-					const blockOrder = getBlockOrder( _clientId );
-					const [ firstClientId ] = blockOrder;
-
+const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		isBlockSelected,
+		getBlockMode,
+		isSelectionEnabled,
+		getTemplateLock,
+		__unstableGetBlockWithoutInnerBlocks,
+		canRemoveBlock,
+		canMoveBlock,
+	} = select( blockEditorStore );
+	const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+	const isSelected = isBlockSelected( clientId );
+	const templateLock = getTemplateLock( rootClientId );
+	const canRemove = canRemoveBlock( clientId, rootClientId );
+	const canMove = canMoveBlock( clientId, rootClientId );
+
+	// The fallback to `{}` is a temporary fix.
+	// This function should never be called when a block is not present in
+	// the state. It happens now because the order in withSelect rendering
+	// is not correct.
+	const { name, attributes, isValid } = block || {};
+
+	// Do not add new properties here, use `useSelect` instead to avoid
+	// leaking new props to the public API (editor.BlockListBlock filter).
+	return {
+		mode: getBlockMode( clientId ),
+		isSelectionEnabled: isSelectionEnabled(),
+		isLocked: !! templateLock,
+		canRemove,
+		canMove,
+		// Users of the editor.BlockListBlock filter used to be able to
+		// access the block prop.
+		// Ideally these blocks would rely on the clientId prop only.
+		// This is kept for backward compatibility reasons.
+		block,
+		name,
+		attributes,
+		isValid,
+		isSelected,
+	};
+} );
+
+const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
+	const {
+		updateBlockAttributes,
+		insertBlocks,
+		mergeBlocks,
+		replaceBlocks,
+		toggleSelection,
+		__unstableMarkLastChangeAsPersistent,
+		moveBlocksToPosition,
+		removeBlock,
+	} = dispatch( blockEditorStore );
+
+	// Do not add new properties here, use `useDispatch` instead to avoid
+	// leaking new props to the public API (editor.BlockListBlock filter).
+	return {
+		setAttributes( newAttributes ) {
+			const { getMultiSelectedBlockClientIds } =
+				registry.select( blockEditorStore );
+			const multiSelectedBlockClientIds =
+				getMultiSelectedBlockClientIds();
+			const { clientId } = ownProps;
+			const clientIds = multiSelectedBlockClientIds.length
+				? multiSelectedBlockClientIds
+				: [ clientId ];
+
+			updateBlockAttributes( clientIds, newAttributes );
+		},
+		onInsertBlocks( blocks, index ) {
+			const { rootClientId } = ownProps;
+			insertBlocks( blocks, index, rootClientId );
+		},
+		onInsertBlocksAfter( blocks ) {
+			const { clientId, rootClientId } = ownProps;
+			const { getBlockIndex } = registry.select( blockEditorStore );
+			const index = getBlockIndex( clientId );
+			insertBlocks( blocks, index + 1, rootClientId );
+		},
+		onMerge( forward ) {
+			const { clientId, rootClientId } = ownProps;
+			const {
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getBlock,
+				getBlockAttributes,
+				getBlockName,
+				getBlockOrder,
+				getBlockIndex,
+				getBlockRootClientId,
+				canInsertBlockType,
+			} = registry.select( blockEditorStore );
+
+			/**
+			 * Moves the block with clientId up one level. If the block type
+			 * cannot be inserted at the new location, it will be attempted to
+			 * convert to the default block type.
+			 *
+			 * @param {string}  _clientId       The block to move.
+			 * @param {boolean} changeSelection Whether to change the selection
+			 *                                  to the moved block.
+			 */
+			function moveFirstItemUp( _clientId, changeSelection = true ) {
+				const targetRootClientId = getBlockRootClientId( _clientId );
+				const blockOrder = getBlockOrder( _clientId );
+				const [ firstClientId ] = blockOrder;
+
+				if (
+					blockOrder.length === 1 &&
+					isUnmodifiedBlock( getBlock( firstClientId ) )
+				) {
+					removeBlock( _clientId );
+				} else {
 					if (
-						blockOrder.length === 1 &&
-						isUnmodifiedBlock( getBlock( firstClientId ) )
+						canInsertBlockType(
+							getBlockName( firstClientId ),
+							targetRootClientId
+						)
 					) {
-						removeBlock( _clientId );
+						moveBlocksToPosition(
+							[ firstClientId ],
+							_clientId,
+							targetRootClientId,
+							getBlockIndex( _clientId )
+						);
 					} else {
-						if (
-							canInsertBlockType(
-								getBlockName( firstClientId ),
-								targetRootClientId
-							)
-						) {
-							moveBlocksToPosition(
-								[ firstClientId ],
-								_clientId,
-								targetRootClientId,
-								getBlockIndex( _clientId )
-							);
-						} else {
-							const replacement = switchToBlockType(
-								getBlock( firstClientId ),
-								getDefaultBlockName()
-							);
-
-							if ( replacement && replacement.length ) {
-								registry.batch( () => {
-									insertBlocks(
-										replacement,
-										getBlockIndex( _clientId ),
-										targetRootClientId,
-										changeSelection
-									);
-									removeBlock( firstClientId, false );
-								} );
-							}
-						}
-
-						if (
-							! getBlockOrder( _clientId ).length &&
-							isUnmodifiedBlock( getBlock( _clientId ) )
-						) {
-							removeBlock( _clientId, false );
-						}
-					}
-				}
-
-				// For `Delete` or forward merge, we should do the exact same thing
-				// as `Backspace`, but from the other block.
-				if ( forward ) {
-					if ( rootClientId ) {
-						const nextRootClientId =
-							getNextBlockClientId( rootClientId );
-
-						if ( nextRootClientId ) {
-							// If there is a block that follows with the same parent
-							// block name and the same attributes, merge the inner
-							// blocks.
-							if (
-								getBlockName( rootClientId ) ===
-								getBlockName( nextRootClientId )
-							) {
-								const rootAttributes =
-									getBlockAttributes( rootClientId );
-								const previousRootAttributes =
-									getBlockAttributes( nextRootClientId );
-
-								if (
-									Object.keys( rootAttributes ).every(
-										( key ) =>
-											rootAttributes[ key ] ===
-											previousRootAttributes[ key ]
-									)
-								) {
-									registry.batch( () => {
-										moveBlocksToPosition(
-											getBlockOrder( nextRootClientId ),
-											nextRootClientId,
-											rootClientId
-										);
-										removeBlock( nextRootClientId, false );
-									} );
-									return;
-								}
-							} else {
-								mergeBlocks( rootClientId, nextRootClientId );
-								return;
-							}
+						const replacement = switchToBlockType(
+							getBlock( firstClientId ),
+							getDefaultBlockName()
+						);
+
+						if ( replacement && replacement.length ) {
+							registry.batch( () => {
+								insertBlocks(
+									replacement,
+									getBlockIndex( _clientId ),
+									targetRootClientId,
+									changeSelection
+								);
+								removeBlock( firstClientId, false );
+							} );
 						}
 					}
 
-					const nextBlockClientId = getNextBlockClientId( clientId );
-
-					if ( ! nextBlockClientId ) {
-						return;
-					}
-
-					if ( getBlockOrder( nextBlockClientId ).length ) {
-						moveFirstItemUp( nextBlockClientId, false );
-					} else {
-						mergeBlocks( clientId, nextBlockClientId );
+					if (
+						! getBlockOrder( _clientId ).length &&
+						isUnmodifiedBlock( getBlock( _clientId ) )
+					) {
+						removeBlock( _clientId, false );
 					}
-				} else {
-					const previousBlockClientId =
-						getPreviousBlockClientId( clientId );
-
-					if ( previousBlockClientId ) {
-						mergeBlocks( previousBlockClientId, clientId );
-					} else if ( rootClientId ) {
-						const previousRootClientId =
-							getPreviousBlockClientId( rootClientId );
-
-						// If there is a preceding block with the same parent block
-						// name and the same attributes, merge the inner blocks.
+				}
+			}
+
+			// For `Delete` or forward merge, we should do the exact same thing
+			// as `Backspace`, but from the other block.
+			if ( forward ) {
+				if ( rootClientId ) {
+					const nextRootClientId =
+						getNextBlockClientId( rootClientId );
+
+					if ( nextRootClientId ) {
+						// If there is a block that follows with the same parent
+						// block name and the same attributes, merge the inner
+						// blocks.
 						if (
-							previousRootClientId &&
 							getBlockName( rootClientId ) ===
-								getBlockName( previousRootClientId )
+							getBlockName( nextRootClientId )
 						) {
 							const rootAttributes =
 								getBlockAttributes( rootClientId );
 							const previousRootAttributes =
-								getBlockAttributes( previousRootClientId );
+								getBlockAttributes( nextRootClientId );
 
 							if (
 								Object.keys( rootAttributes ).every(
@@ -590,33 +561,103 @@ export default compose( [
 							) {
 								registry.batch( () => {
 									moveBlocksToPosition(
-										getBlockOrder( rootClientId ),
-										rootClientId,
-										previousRootClientId
+										getBlockOrder( nextRootClientId ),
+										nextRootClientId,
+										rootClientId
 									);
-									removeBlock( rootClientId, false );
+									removeBlock( nextRootClientId, false );
 								} );
 								return;
 							}
+						} else {
+							mergeBlocks( rootClientId, nextRootClientId );
+							return;
 						}
+					}
+				}
+
+				const nextBlockClientId = getNextBlockClientId( clientId );
+
+				if ( ! nextBlockClientId ) {
+					return;
+				}
+
+				if ( getBlockOrder( nextBlockClientId ).length ) {
+					moveFirstItemUp( nextBlockClientId, false );
+				} else {
+					mergeBlocks( clientId, nextBlockClientId );
+				}
+			} else {
+				const previousBlockClientId =
+					getPreviousBlockClientId( clientId );
+
+				if ( previousBlockClientId ) {
+					mergeBlocks( previousBlockClientId, clientId );
+				} else if ( rootClientId ) {
+					const previousRootClientId =
+						getPreviousBlockClientId( rootClientId );
+
+					// If there is a preceding block with the same parent block
+					// name and the same attributes, merge the inner blocks.
+					if (
+						previousRootClientId &&
+						getBlockName( rootClientId ) ===
+							getBlockName( previousRootClientId )
+					) {
+						const rootAttributes =
+							getBlockAttributes( rootClientId );
+						const previousRootAttributes =
+							getBlockAttributes( previousRootClientId );
 
-						moveFirstItemUp( rootClientId );
+						if (
+							Object.keys( rootAttributes ).every(
+								( key ) =>
+									rootAttributes[ key ] ===
+									previousRootAttributes[ key ]
+							)
+						) {
+							registry.batch( () => {
+								moveBlocksToPosition(
+									getBlockOrder( rootClientId ),
+									rootClientId,
+									previousRootClientId
+								);
+								removeBlock( rootClientId, false );
+							} );
+							return;
+						}
 					}
+
+					moveFirstItemUp( rootClientId );
 				}
-			},
-			onInsertBlocks( blocks, index ) {
-				insertBlocks( blocks, index, ownProps.rootClientId );
-			},
-			onSelect( clientId = ownProps.clientId, initialPosition ) {
-				selectBlock( clientId, initialPosition );
-			},
-			onChange: ( attributes ) => {
-				updateBlockAttributes( ownProps.clientId, attributes );
-			},
-			onReplace( blocks, indexToSelect ) {
-				replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
-			},
-		};
-	} ),
-	withPreferredColorScheme,
-] )( BlockListBlock );
+			}
+		},
+		onReplace( blocks, indexToSelect, initialPosition ) {
+			if (
+				blocks.length &&
+				! isUnmodifiedDefaultBlock( blocks[ blocks.length - 1 ] )
+			) {
+				__unstableMarkLastChangeAsPersistent();
+			}
+			replaceBlocks(
+				[ ownProps.clientId ],
+				blocks,
+				indexToSelect,
+				initialPosition
+			);
+		},
+		toggleSelection( selectionEnabled ) {
+			toggleSelection( selectionEnabled );
+		},
+	};
+} );
+
+export default compose(
+	pure,
+	applyWithSelect,
+	applyWithDispatch,
+	// Block is sometimes not mounted at the right time, causing it be undefined
+	// see issue for more info
+	// https://github.com/WordPress/gutenberg/issues/17013
+	ifCondition( ( { block } ) => !! block )
+)( BlockListBlock );
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 02c79360b567a..48f839b156d45 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -6,9 +6,8 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { useRef, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 import {
 	KeyboardAwareFlatList,
@@ -57,83 +56,117 @@ const getStyles = (
 	return computedStyles;
 };
 
-export class BlockList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.extraData = {
-			parentWidth: this.props.parentWidth,
-			renderFooterAppender: this.props.renderFooterAppender,
-			renderAppender: this.props.renderAppender,
-			onDeleteBlock: this.props.onDeleteBlock,
-			contentStyle: this.props.contentStyle,
-		};
-		this.renderItem = this.renderItem.bind( this );
-		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
-		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
-		this.shouldFlatListPreventAutomaticScroll =
-			this.shouldFlatListPreventAutomaticScroll.bind( this );
-		this.shouldShowInnerBlockAppender =
-			this.shouldShowInnerBlockAppender.bind( this );
-		this.renderEmptyList = this.renderEmptyList.bind( this );
-		this.getExtraData = this.getExtraData.bind( this );
-		this.getCellRendererComponent =
-			this.getCellRendererComponent.bind( this );
-
-		this.onLayout = this.onLayout.bind( this );
-
-		this.state = {
-			blockWidth: this.props.blockWidth || 0,
-		};
-	}
+export default function BlockList( {
+	blockWidth: initialBlockWidth,
+	contentResizeMode,
+	contentStyle,
+	filterInnerBlocks,
+	gridProperties,
+	header,
+	horizontal,
+	horizontalAlignment,
+	marginHorizontal = styles.defaultBlock.marginLeft,
+	marginVertical = styles.defaultBlock.marginTop,
+	onAddBlock,
+	onDeleteBlock,
+	orientation,
+	parentWidth,
+	renderAppender,
+	renderFooterAppender,
+	rootClientId,
+	title,
+	withFooter = true,
+} ) {
+	const {
+		blockClientIds,
+		blockCount,
+		blockInsertionPointIsVisible,
+		isReadOnly,
+		isRootList,
+		isFloatingToolbarVisible,
+		isStackedHorizontally,
+		maxWidth,
+		isRTL,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockCount,
+				getBlockHierarchyRootClientId,
+				getBlockOrder,
+				getSelectedBlockClientId,
+				isBlockInsertionPointVisible,
+				getSettings,
+			} = select( blockEditorStore );
 
-	addBlockToEndOfPost( newBlock ) {
-		this.props.insertBlock( newBlock, this.props.blockCount );
-	}
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const rootBlockId = getBlockHierarchyRootClientId(
+				selectedBlockClientId
+			);
 
-	scrollViewInnerRef( ref ) {
-		this.scrollViewRef = ref;
-	}
+			let blockOrder = getBlockOrder( rootClientId );
+			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
+			if ( filterInnerBlocks ) {
+				blockOrder = filterInnerBlocks( blockOrder );
+			}
 
-	shouldFlatListPreventAutomaticScroll() {
-		return this.props.isBlockInsertionPointVisible;
-	}
+			const {
+				isRTL: isRTLSetting,
+				maxWidth: maxWidthSetting,
+				readOnly,
+			} = getSettings();
 
-	shouldShowInnerBlockAppender() {
-		const { blockClientIds, renderAppender } = this.props;
-		return renderAppender && blockClientIds.length > 0;
-	}
+			return {
+				blockClientIds: blockOrder,
+				blockCount: getBlockCount(),
+				blockInsertionPointIsVisible:
+					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+				isReadOnly: readOnly,
+				isRootList: rootClientId === undefined,
+				isFloatingToolbarVisible:
+					!! selectedBlockClientId && !! getBlockCount( rootBlockId ),
+				isStackedHorizontally: orientation === 'horizontal',
+				maxWidth: maxWidthSetting,
+				isRTL: isRTLSetting,
+			};
+		},
+		[ filterInnerBlocks, orientation, rootClientId ]
+	);
 
-	renderEmptyList() {
-		return (
-			<EmptyListComponentCompose
-				rootClientId={ this.props.rootClientId }
-				renderAppender={ this.props.renderAppender }
-				renderFooterAppender={ this.props.renderFooterAppender }
-			/>
-		);
-	}
+	const { insertBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 
-	getExtraData() {
-		const {
-			parentWidth,
-			renderFooterAppender,
-			onDeleteBlock,
-			contentStyle,
-			renderAppender,
-			gridProperties,
-		} = this.props;
-		const { blockWidth } = this.state;
+	const extraData = useRef( {
+		parentWidth,
+		renderFooterAppender,
+		renderAppender,
+		onDeleteBlock,
+		contentStyle,
+	} );
+
+	const [ blockWidth, setBlockWidth ] = useState( initialBlockWidth || 0 );
+
+	const addBlockToEndOfPost = ( newBlock ) => {
+		insertBlock( newBlock, blockCount );
+	};
+
+	const scrollViewRef = useRef( null );
+
+	const shouldFlatListPreventAutomaticScroll = () =>
+		blockInsertionPointIsVisible;
+
+	const shouldShowInnerBlockAppender = () =>
+		renderAppender && blockClientIds.length > 0;
+
+	const getExtraData = () => {
 		if (
-			this.extraData.parentWidth !== parentWidth ||
-			this.extraData.renderFooterAppender !== renderFooterAppender ||
-			this.extraData.onDeleteBlock !== onDeleteBlock ||
-			this.extraData.contentStyle !== contentStyle ||
-			this.extraData.renderAppender !== renderAppender ||
-			this.extraData.blockWidth !== blockWidth ||
-			this.extraData.gridProperties !== gridProperties
+			extraData.current.parentWidth !== parentWidth ||
+			extraData.current.renderFooterAppender !== renderFooterAppender ||
+			extraData.current.onDeleteBlock !== onDeleteBlock ||
+			extraData.current.contentStyle !== contentStyle ||
+			extraData.current.renderAppender !== renderAppender ||
+			extraData.current.blockWidth !== blockWidth ||
+			extraData.current.gridProperties !== gridProperties
 		) {
-			this.extraData = {
+			extraData.current = {
 				parentWidth,
 				renderFooterAppender,
 				onDeleteBlock,
@@ -143,80 +176,21 @@ export class BlockList extends Component {
 				gridProperties,
 			};
 		}
-		return this.extraData;
-	}
+		return extraData.current;
+	};
 
-	getCellRendererComponent( { children, item, onLayout } ) {
-		const { rootClientId } = this.props;
-		return (
-			<BlockListItemCell
-				children={ children }
-				clientId={ item }
-				onLayout={ onLayout }
-				rootClientId={ rootClientId }
-			/>
-		);
-	}
-
-	onLayout( { nativeEvent } ) {
+	const onLayout = ( { nativeEvent } ) => {
 		const { layout } = nativeEvent;
-		const { blockWidth } = this.state;
-		const { isRootList, maxWidth } = this.props;
 
 		const layoutWidth = Math.floor( layout.width );
 		if ( isRootList && blockWidth !== layoutWidth ) {
-			this.setState( {
-				blockWidth: Math.min( layoutWidth, maxWidth ),
-			} );
+			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
 		} else if ( ! isRootList && ! blockWidth ) {
-			this.setState( { blockWidth: Math.min( layoutWidth, maxWidth ) } );
+			setBlockWidth( Math.min( layoutWidth, maxWidth ) );
 		}
-	}
-
-	render() {
-		const { isRootList, isRTL } = this.props;
-		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-		const blockList = isRootList ? (
-			<BlockListProvider
-				value={ {
-					...DEFAULT_BLOCK_LIST_CONTEXT,
-					scrollRef: this.scrollViewRef,
-				} }
-			>
-				<BlockDraggableWrapper isRTL={ isRTL }>
-					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
-				</BlockDraggableWrapper>
-			</BlockListProvider>
-		) : (
-			<BlockListConsumer>
-				{ ( { scrollRef } ) =>
-					this.renderList( {
-						parentScrollRef: scrollRef,
-					} )
-				}
-			</BlockListConsumer>
-		);
-
-		return blockList;
-	}
+	};
 
-	renderList( extraProps = {} ) {
-		const {
-			clearSelectedBlock,
-			blockClientIds,
-			title,
-			header,
-			isReadOnly,
-			isRootList,
-			horizontal,
-			marginVertical = styles.defaultBlock.marginTop,
-			marginHorizontal = styles.defaultBlock.marginLeft,
-			isFloatingToolbarVisible,
-			isStackedHorizontally,
-			horizontalAlignment,
-			contentResizeMode,
-			blockWidth,
-		} = this.props;
+	const renderList = ( extraProps = {} ) => {
 		const { parentScrollRef, onScroll } = extraProps;
 
 		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
@@ -245,7 +219,7 @@ export class BlockList extends Component {
 			<View
 				style={ containerStyle }
 				onAccessibilityEscape={ clearSelectedBlock }
-				onLayout={ this.onLayout }
+				onLayout={ onLayout }
 				testID="block-list-wrapper"
 			>
 				<KeyboardAwareFlatList
@@ -254,12 +228,12 @@ export class BlockList extends Component {
 						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 					accessibilityLabel="block-list"
 					innerRef={ ( ref ) => {
-						this.scrollViewInnerRef( parentScrollRef || ref );
+						scrollViewRef.current = parentScrollRef || ref;
 					} }
 					extraScrollHeight={ extraScrollHeight }
 					keyboardShouldPersistTaps="always"
 					scrollViewStyle={ scrollViewStyle }
-					extraData={ this.getExtraData() }
+					extraData={ getExtraData() }
 					scrollEnabled={ isRootList }
 					contentContainerStyle={ [
 						horizontal && styles.horizontalContentContainer,
@@ -275,18 +249,37 @@ export class BlockList extends Component {
 					) }
 					data={ blockClientIds }
 					keyExtractor={ identity }
-					renderItem={ this.renderItem }
-					CellRendererComponent={ this.getCellRendererComponent }
+					listKey={
+						rootClientId ? `list-${ rootClientId }` : 'list-root'
+					}
+					renderItem={ renderItem }
+					CellRendererComponent={ BlockListItemCell }
 					shouldPreventAutomaticScroll={
-						this.shouldFlatListPreventAutomaticScroll
+						shouldFlatListPreventAutomaticScroll
 					}
 					title={ title }
 					ListHeaderComponent={ header }
-					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
-					ListFooterComponent={ this.renderBlockListFooter }
+					ListEmptyComponent={
+						! isReadOnly && (
+							<EmptyList
+								orientation={ orientation }
+								rootClientId={ rootClientId }
+								renderAppender={ renderAppender }
+								renderFooterAppender={ renderFooterAppender }
+							/>
+						)
+					}
+					ListFooterComponent={
+						<Footer
+							addBlockToEndOfPost={ addBlockToEndOfPost }
+							isReadOnly={ isReadOnly }
+							renderFooterAppender={ renderFooterAppender }
+							withFooter={ withFooter }
+						/>
+					}
 					onScroll={ onScroll }
 				/>
-				{ this.shouldShowInnerBlockAppender() && (
+				{ shouldShowInnerBlockAppender() && (
 					<View
 						style={ {
 							marginHorizontal:
@@ -295,32 +288,17 @@ export class BlockList extends Component {
 						} }
 					>
 						<BlockListAppender
-							rootClientId={ this.props.rootClientId }
-							renderAppender={ this.props.renderAppender }
+							rootClientId={ rootClientId }
+							renderAppender={ renderAppender }
 							showSeparator
 						/>
 					</View>
 				) }
 			</View>
 		);
-	}
-
-	renderItem( { item: clientId } ) {
-		const {
-			contentResizeMode,
-			contentStyle,
-			onAddBlock,
-			onDeleteBlock,
-			rootClientId,
-			isStackedHorizontally,
-			blockClientIds,
-			parentWidth,
-			marginVertical = styles.defaultBlock.marginTop,
-			marginHorizontal = styles.defaultBlock.marginLeft,
-			gridProperties,
-		} = this.props;
-		const { blockWidth } = this.state;
+	};
 
+	const renderItem = ( { item: clientId, index } ) => {
 		// Extracting the grid item properties here to avoid
 		// re-renders in the blockListItem component.
 		const isGridItem = !! gridProperties;
@@ -331,6 +309,7 @@ export class BlockList extends Component {
 		};
 		return (
 			<BlockListItem
+				index={ index }
 				isStackedHorizontally={ isStackedHorizontally }
 				rootClientId={ rootClientId }
 				clientId={ clientId }
@@ -341,141 +320,74 @@ export class BlockList extends Component {
 				marginVertical={ marginVertical }
 				marginHorizontal={ marginHorizontal }
 				onDeleteBlock={ onDeleteBlock }
-				shouldShowInnerBlockAppender={
-					this.shouldShowInnerBlockAppender
-				}
+				shouldShowInnerBlockAppender={ shouldShowInnerBlockAppender }
 				blockWidth={ blockWidth }
 				isGridItem={ isGridItem }
 				{ ...gridItemProps }
 			/>
 		);
-	}
-
-	renderBlockListFooter() {
-		const paragraphBlock = createBlock( 'core/paragraph' );
-		const {
-			isReadOnly,
-			withFooter = true,
-			renderFooterAppender,
-		} = this.props;
-
-		if ( ! isReadOnly && withFooter ) {
-			return (
-				<>
-					<TouchableWithoutFeedback
-						accessibilityLabel={ __( 'Add paragraph block' ) }
-						testID={ __( 'Add paragraph block' ) }
-						onPress={ () => {
-							this.addBlockToEndOfPost( paragraphBlock );
-						} }
-					>
-						<View style={ styles.blockListFooter } />
-					</TouchableWithoutFeedback>
-				</>
-			);
-		} else if ( renderFooterAppender ) {
-			return renderFooterAppender();
-		}
-		return null;
-	}
-}
-
-export default compose( [
-	withSelect(
-		( select, { rootClientId, orientation, filterInnerBlocks } ) => {
-			const {
-				getBlockCount,
-				getBlockHierarchyRootClientId,
-				getBlockOrder,
-				getSelectedBlockClientId,
-				isBlockInsertionPointVisible,
-				getSettings,
-			} = select( blockEditorStore );
-
-			const isStackedHorizontally = orientation === 'horizontal';
-
-			const selectedBlockClientId = getSelectedBlockClientId();
-
-			let blockClientIds = getBlockOrder( rootClientId );
-			// Display only block which fulfill the condition in passed `filterInnerBlocks` function.
-			if ( filterInnerBlocks ) {
-				blockClientIds = filterInnerBlocks( blockClientIds );
+	};
+
+	// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
+	const blockList = isRootList ? (
+		<BlockListProvider
+			value={ {
+				...DEFAULT_BLOCK_LIST_CONTEXT,
+				scrollRef: scrollViewRef.current,
+			} }
+		>
+			<BlockDraggableWrapper isRTL={ isRTL }>
+				{ ( { onScroll } ) => renderList( { onScroll } ) }
+			</BlockDraggableWrapper>
+		</BlockListProvider>
+	) : (
+		<BlockListConsumer>
+			{ ( { scrollRef } ) =>
+				renderList( {
+					parentScrollRef: scrollRef,
+				} )
 			}
+		</BlockListConsumer>
+	);
 
-			const { maxWidth } = getSettings();
-			const isReadOnly = getSettings().readOnly;
-
-			const blockCount = getBlockCount();
-			const rootBlockId = getBlockHierarchyRootClientId(
-				selectedBlockClientId
-			);
-
-			const isFloatingToolbarVisible =
-				!! selectedBlockClientId && !! getBlockCount( rootBlockId );
-			const isRTL = getSettings().isRTL;
-
-			return {
-				blockClientIds,
-				blockCount,
-				isBlockInsertionPointVisible:
-					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
-				isReadOnly,
-				isRootList: rootClientId === undefined,
-				isFloatingToolbarVisible,
-				isStackedHorizontally,
-				maxWidth,
-				isRTL,
-			};
-		}
-	),
-	withDispatch( ( dispatch ) => {
-		const { insertBlock, replaceBlock, clearSelectedBlock } =
-			dispatch( blockEditorStore );
-
-		return {
-			clearSelectedBlock,
-			insertBlock,
-			replaceBlock,
-		};
-	} ),
-	withPreferredColorScheme,
-] )( BlockList );
-
-class EmptyListComponent extends Component {
-	render() {
-		const {
-			shouldShowInsertionPoint,
-			rootClientId,
-			renderAppender,
-			renderFooterAppender,
-		} = this.props;
-
-		if ( renderFooterAppender || renderAppender === false ) {
-			return null;
-		}
+	return blockList;
+}
 
+function Footer( {
+	addBlockToEndOfPost,
+	isReadOnly,
+	renderFooterAppender,
+	withFooter,
+} ) {
+	if ( ! isReadOnly && withFooter ) {
 		return (
-			<View style={ styles.defaultAppender }>
-				<ReadableContentView
-					align={
-						renderAppender
-							? WIDE_ALIGNMENTS.alignments.full
-							: undefined
-					}
+			<>
+				<TouchableWithoutFeedback
+					accessibilityLabel={ __( 'Add paragraph block' ) }
+					testID={ __( 'Add paragraph block' ) }
+					onPress={ () => {
+						const paragraphBlock = createBlock( 'core/paragraph' );
+						addBlockToEndOfPost( paragraphBlock );
+					} }
 				>
-					<BlockListAppender
-						rootClientId={ rootClientId }
-						renderAppender={ renderAppender }
-						showSeparator={ shouldShowInsertionPoint }
-					/>
-				</ReadableContentView>
-			</View>
+					<View style={ styles.blockListFooter } />
+				</TouchableWithoutFeedback>
+			</>
 		);
+	} else if ( renderFooterAppender ) {
+		return renderFooterAppender();
 	}
+
+	return null;
 }
 
-const EmptyListComponentCompose = compose( [
-	withSelect( ( select, { rootClientId, orientation } ) => {
+function EmptyList( {
+	orientation,
+	renderAppender,
+	renderFooterAppender,
+	rootClientId,
+} ) {
+	const { shouldShowInsertionPoint } = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
 			getBlockInsertionPoint,
@@ -486,17 +398,36 @@ const EmptyListComponentCompose = compose( [
 		const blockClientIds = getBlockOrder( rootClientId );
 		const insertionPoint = getBlockInsertionPoint();
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-		const shouldShowInsertionPoint =
-			! isStackedHorizontally &&
-			blockInsertionPointIsVisible &&
-			insertionPoint.rootClientId === rootClientId &&
-			// If list is empty, show the insertion point (via the default appender)
-			( blockClientIds.length === 0 ||
-				// Or if the insertion point is right before the denoted block.
-				! blockClientIds[ insertionPoint.index ] );
 
 		return {
-			shouldShowInsertionPoint,
+			shouldShowInsertionPoint:
+				! isStackedHorizontally &&
+				blockInsertionPointIsVisible &&
+				insertionPoint.rootClientId === rootClientId &&
+				// If list is empty, show the insertion point (via the default appender)
+				( blockClientIds.length === 0 ||
+					// Or if the insertion point is right before the denoted block.
+					! blockClientIds[ insertionPoint.index ] ),
 		};
-	} ),
-] )( EmptyListComponent );
+	} );
+
+	if ( renderFooterAppender || renderAppender === false ) {
+		return null;
+	}
+
+	return (
+		<View style={ styles.defaultAppender }>
+			<ReadableContentView
+				align={
+					renderAppender ? WIDE_ALIGNMENTS.alignments.full : undefined
+				}
+			>
+				<BlockListAppender
+					rootClientId={ rootClientId }
+					renderAppender={ renderAppender }
+					showSeparator={ shouldShowInsertionPoint }
+				/>
+			</ReadableContentView>
+		</View>
+	);
+}
diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/packages/block-editor/src/components/block-list/insertion-point.native.js
index 5f19827ba6840..2d86ea3a8ecaa 100644
--- a/packages/block-editor/src/components/block-list/insertion-point.native.js
+++ b/packages/block-editor/src/components/block-list/insertion-point.native.js
@@ -14,7 +14,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+const BlockInsertionPoint = ( { getStylesFromColorScheme, testID } ) => {
 	const lineStyle = getStylesFromColorScheme(
 		styles.lineStyleAddHere,
 		styles.lineStyleAddHereDark
@@ -25,7 +25,7 @@ const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
 	);
 
 	return (
-		<View style={ styles.containerStyleAddHere }>
+		<View style={ styles.containerStyleAddHere } testID={ testID }>
 			<View style={ lineStyle }></View>
 			<Text style={ labelStyle }>{ __( 'ADD BLOCK HERE' ) }</Text>
 			<View style={ lineStyle }></View>
diff --git a/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js b/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js
new file mode 100644
index 0000000000000..ccc6aae75a266
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/test/block-invalid-warning.native.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block invalid warning', () => {
+	it( 'shows invalid placeholder', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+
+		// Assert
+		const warningElement = screen.getByText( /Problem displaying block./ );
+		expect( warningElement ).toBeVisible();
+	} );
+
+	it( 'recovers a block successfully', async () => {
+		// Arrange
+		const screen = await initializeEditor( {
+			initialHtml: `<!-- wp:spacer -->
+            <div styless="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+            <!-- /wp:spacer -->`,
+		} );
+
+		// Act
+		fireEvent.press( screen.getByText( /Problem displaying block./ ) );
+		const spacerBlock = getBlock( screen, 'Spacer' );
+		fireEvent.press( spacerBlock );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+        "<!-- wp:spacer -->
+        <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+        <!-- /wp:spacer -->"
+        ` );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-list/test/index.native.js b/packages/block-editor/src/components/block-list/test/index.native.js
new file mode 100644
index 0000000000000..dee27b963d162
--- /dev/null
+++ b/packages/block-editor/src/components/block-list/test/index.native.js
@@ -0,0 +1,205 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	triggerBlockListLayout,
+	within,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'BlockList', () => {
+	describe( 'when empty', () => {
+		beforeEach( async () => {
+			// Arrange
+			await initializeEditor();
+		} );
+
+		it( 'renders a post title', async () => {
+			// Assert
+			expect( screen.getByPlaceholderText( 'Add title' ) ).toBeTruthy();
+		} );
+
+		it( 'renders a block appender as a content placeholder', async () => {
+			// Act
+			const appender = screen.getByPlaceholderText( /Start writing/ );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+
+		it( 'renders an end-of-list paragraph appender', async () => {
+			// Act
+			const appender = screen.getByLabelText( 'Add paragraph block' );
+			fireEvent.press( appender );
+
+			// Assert
+			expect( await getBlock( screen, 'Paragraph' ) ).toBeVisible();
+		} );
+	} );
+
+	describe( 'when not empty', () => {
+		it( 'renders a footer appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Social Icons' );
+			const socialLinksBlock = await getBlock( screen, 'Social Icons' );
+			fireEvent.press( socialLinksBlock );
+			triggerBlockListLayout( socialLinksBlock );
+
+			// Act
+			fireEvent.press(
+				within( socialLinksBlock ).getByTestId( 'appender-button' )
+			);
+			const blockList = screen.getByTestId( 'InserterUI-Blocks' );
+			fireEvent.scroll( blockList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+			fireEvent.press( await screen.findByText( 'Amazon' ) );
+
+			// Assert
+			const amazonSettings = await screen.findByTestId(
+				'navigation-screen-LinkSettingsScreen'
+			);
+			expect( amazonSettings ).toBeVisible();
+		} );
+	} );
+
+	describe( 'for inner blocks', () => {
+		it( 'renders an inner block appender', async () => {
+			// Arrange
+			await initializeEditor();
+			await addBlock( screen, 'Group' );
+			const groupBlock = await getBlock( screen, 'Group' );
+			triggerBlockListLayout( groupBlock );
+
+			// Assert
+			expect(
+				within( groupBlock ).getByTestId( 'appender-button' )
+			).toBeTruthy();
+		} );
+
+		describe( 'when a non-last block is selected', () => {
+			beforeEach( async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+			} );
+
+			it( 'renders an insertion point before the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-1' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 1,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+
+		describe( 'when the last block is selected', () => {
+			it( 'renders an insertion point before the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block Before' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-before-row-2' )
+				).toBeTruthy();
+			} );
+
+			it( 'renders an insertion point after the block', async () => {
+				// Arrange
+				await initializeEditor();
+				await addBlock( screen, 'Group' );
+				const groupBlock = await getBlock( screen, 'Group' );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+				fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+				fireEvent.press(
+					within( groupBlock ).getByTestId( 'appender-button' )
+				);
+				await addBlock( screen, 'Paragraph', { isPickerOpened: true } );
+
+				// Act
+				const paragraphBlock = await getBlock( screen, 'Paragraph', {
+					rowIndex: 2,
+				} );
+				fireEvent.press( paragraphBlock );
+				fireEvent( screen.getByLabelText( 'Add block' ), 'longPress' );
+				fireEvent.press( screen.getByText( 'Add Block After' ) );
+
+				// Assert
+				expect( screen.getByText( 'ADD BLOCK HERE' ) ).toBeTruthy();
+				expect(
+					screen.getByTestId( 'block-insertion-point-after-row-2' )
+				).toBeTruthy();
+			} );
+		} );
+	} );
+} );
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
index 018f695086b64..0183fca510af7 100644
--- a/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
+++ b/packages/block-editor/src/components/block-mobile-toolbar/block-actions-menu.native.js
@@ -229,7 +229,9 @@ const BlockActionsMenu = ( {
 		canDuplicate && allOptions.cutButton,
 		canDuplicate && isPasteEnabled && allOptions.pasteButton,
 		canDuplicate && allOptions.duplicateButton,
-		isReusableBlockType && allOptions.convertToRegularBlocks,
+		isReusableBlockType &&
+			innerBlockCount > 0 &&
+			allOptions.convertToRegularBlocks,
 		! isLocked && allOptions.delete,
 	].filter( Boolean );
 
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index b7614b72c8018..ec8fa46d4859d 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -4,9 +4,12 @@
 import {
 	createSlotFill,
 	MenuGroup,
+	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { pipe } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,6 +20,7 @@ import {
 } from '../convert-to-group-buttons';
 import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
+import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
@@ -74,16 +78,32 @@ const BlockSettingsMenuControlsSlot = ( {
 
 				return (
 					<MenuGroup>
+						{ showConvertToGroupButton && (
+							<ConvertToGroupButton
+								{ ...convertToGroupButtonProps }
+								onClose={ fillProps?.onClose }
+							/>
+						) }
 						{ showLockButton && (
 							<BlockLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
 						{ fills }
-						{ showConvertToGroupButton && (
-							<ConvertToGroupButton
-								{ ...convertToGroupButtonProps }
-								onClose={ fillProps?.onClose }
+						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
+							<MenuItem
+								onClick={ pipe(
+									fillProps?.onClose,
+									fillProps?.onMoveTo
+								) }
+							>
+								{ __( 'Move to' ) }
+							</MenuItem>
+						) }
+						{ fillProps?.count === 1 && (
+							<BlockModeToggle
+								clientId={ fillProps?.firstBlockClientId }
+								onToggle={ fillProps?.onClose }
 							/>
 						) }
 					</MenuGroup>
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 29b322129e43a..2ee452b4fca96 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -24,7 +24,6 @@ import { pipe, useCopyToClipboard } from '@wordpress/compose';
  */
 import BlockActions from '../block-actions';
 import BlockIcon from '../block-icon';
-import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
@@ -278,7 +277,7 @@ export function BlockSettingsDropdown( {
 											) }
 											shortcut={ shortcuts.insertBefore }
 										>
-											{ __( 'Insert before' ) }
+											{ __( 'Add before' ) }
 										</MenuItem>
 										<MenuItem
 											onClick={ pipe(
@@ -287,23 +286,10 @@ export function BlockSettingsDropdown( {
 											) }
 											shortcut={ shortcuts.insertAfter }
 										>
-											{ __( 'Insert after' ) }
+											{ __( 'Add after' ) }
 										</MenuItem>
 									</>
 								) }
-								{ canMove && ! onlyBlock && (
-									<MenuItem
-										onClick={ pipe( onClose, onMoveTo ) }
-									>
-										{ __( 'Move to' ) }
-									</MenuItem>
-								) }
-								{ count === 1 && (
-									<BlockModeToggle
-										clientId={ firstBlockClientId }
-										onToggle={ onClose }
-									/>
-								) }
 							</MenuGroup>
 							<MenuGroup>
 								<CopyMenuItem
@@ -316,7 +302,14 @@ export function BlockSettingsDropdown( {
 								</MenuItem>
 							</MenuGroup>
 							<BlockSettingsMenuControls.Slot
-								fillProps={ { onClose } }
+								fillProps={ {
+									onClose,
+									canMove,
+									onMoveTo,
+									onlyBlock,
+									count,
+									firstBlockClientId,
+								} }
 								clientIds={ clientIds }
 								__unstableDisplayLocation={
 									__unstableDisplayLocation
diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
index c8eee6b48cbd4..385b120c352d2 100644
--- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -26,53 +26,12 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__collapse-fixed-toolbar"
-			icon={ levelUp }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show document tools' ) }
-		/>
-	);
-} );
-
-const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__expand-fixed-toolbar"
-			icon={ <BlockIcon icon={ icon } /> }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show block tools' ) }
-		/>
-	);
-} );
-
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
 	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const expandFixedToolbarButtonRef = useRef();
-	const collapseFixedToolbarButtonRef = useRef();
-
-	// Don't focus the block toolbar just because it mounts
-	const initialRender = useRef( true );
-	useEffect( () => {
-		if ( initialRender.current ) {
-			initialRender.current = false;
-			return;
-		}
-		if ( isCollapsed && expandFixedToolbarButtonRef.current ) {
-			expandFixedToolbarButtonRef.current.focus();
-		}
-		if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
-			collapseFixedToolbarButtonRef.current.focus();
-		}
-	}, [ isCollapsed ] );
+	const toolbarButtonRef = useRef();
 
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
 		useSelect( ( select ) => {
 			const {
@@ -113,12 +72,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
+	if (
+		blockType &&
+		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+	) {
+		return null;
 	}
 
 	// Shifts the toolbar to make room for the parent block selector.
@@ -144,18 +102,26 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
 					}
 				>
-					{ isCollapsed ? (
-						<ExpandFixedToolbarButton
-							onClick={ () => setIsCollapsed( false ) }
-							icon={ blockType.icon }
-							ref={ expandFixedToolbarButtonRef }
-						/>
-					) : (
-						<CollapseFixedToolbarButton
-							onClick={ () => setIsCollapsed( true ) }
-							ref={ collapseFixedToolbarButtonRef }
-						/>
-					) }
+					<ToolbarItem
+						as={ ToolbarButton }
+						ref={ toolbarButtonRef }
+						icon={
+							isCollapsed ? (
+								<BlockIcon icon={ blockType.icon } />
+							) : (
+								levelUp
+							)
+						}
+						onClick={ () => {
+							setIsCollapsed( ( collapsed ) => ! collapsed );
+							toolbarButtonRef.current.focus();
+						} }
+						label={
+							isCollapsed
+								? __( 'Show block tools' )
+								: __( 'Show document tools' )
+						}
+					/>
 				</ToolbarGroup>
 			) }
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js
index 6e3c77fe1ca18..d6268567b13a3 100644
--- a/packages/block-editor/src/components/block-tools/selected-block-popover.js
+++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js
@@ -20,8 +20,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
-import { unlock } from '../../lock-unlock';
-import { privateApis } from '../../private-apis';
+import { useShouldContextualToolbarShow } from '../../utils/use-should-contextual-toolbar-show';
 
 function selector( select ) {
 	const {
@@ -29,7 +28,7 @@ function selector( select ) {
 		hasMultiSelection,
 		isTyping,
 		getLastMultiSelectedBlockClientId,
-	} = unlock( select( blockEditorStore ) );
+	} = select( blockEditorStore );
 
 	return {
 		editorMode: __unstableGetEditorMode(),
@@ -54,7 +53,6 @@ function SelectedBlockPopover( {
 		[]
 	);
 
-	const { useShouldContextualToolbarShow } = unlock( privateApis );
 	const isInsertionPointVisible = useSelect(
 		( select ) => {
 			const {
@@ -75,7 +73,7 @@ function SelectedBlockPopover( {
 	);
 	const isToolbarForced = useRef( false );
 	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( clientId );
+		useShouldContextualToolbarShow();
 
 	const { stopTyping } = useDispatch( blockEditorStore );
 
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index a8cf19135b428..cf38c9ee47de2 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -219,6 +219,14 @@
 					}
 				}
 			}
+
+			.blocks-widgets-container & {
+				margin-left: $grid-unit-80 * 2.4;
+
+				&.is-collapsed {
+					margin-left: $grid-unit-80 * 4.2;
+				}
+			}
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index b5f73f2340f64..a24a87e7d9a20 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -20,7 +20,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -230,6 +230,11 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						'aria-label': sprintf(
+							/* translators: %s is the type of color property, e.g., "background" */
+							__( 'Color %s styles' ),
+							label
+						),
 					};
 
 					return (
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index bd748ccc6c1f9..28b2f80fc12d6 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -184,12 +184,12 @@ function DimensionsToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
-	contentSize: false,
-	wideSize: false,
-	padding: false,
-	margin: false,
-	blockGap: false,
-	minHeight: false,
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
 	childLayout: true,
 };
 
diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
index 7e41c11c507e7..2eb6a0f3287e5 100644
--- a/packages/block-editor/src/components/global-styles/index.js
+++ b/packages/block-editor/src/components/global-styles/index.js
@@ -5,7 +5,10 @@ export {
 	useSettingsForBlockElement,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
-export { useGlobalStylesOutput } from './use-global-styles-output';
+export {
+	useGlobalStylesOutput,
+	useGlobalStylesOutputWithConfig,
+} from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
 	default as TypographyPanel,
@@ -20,3 +23,4 @@ export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
 export { default as AdvancedPanel } from './advanced-panel';
+export { areGlobalStyleConfigsEqual } from './utils';
diff --git a/packages/block-editor/src/components/global-styles/test/utils.js b/packages/block-editor/src/components/global-styles/test/utils.js
index 7d0e3464557f6..0bca8da6f7da9 100644
--- a/packages/block-editor/src/components/global-styles/test/utils.js
+++ b/packages/block-editor/src/components/global-styles/test/utils.js
@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
+import {
+	areGlobalStyleConfigsEqual,
+	getPresetVariableFromValue,
+	getValueFromVariable,
+} from '../utils';
 
 describe( 'editor utils', () => {
 	const themeJson = {
@@ -203,4 +207,56 @@ describe( 'editor utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'areGlobalStyleConfigsEqual', () => {
+		test.each( [
+			{ original: null, variation: null, expected: true },
+			{ original: {}, variation: {}, expected: true },
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--blue)' },
+					},
+				},
+				expected: false,
+			},
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				expected: true,
+			},
+		] )(
+			'.areGlobalStyleConfigsEqual( $original, $variation )',
+			( { original, variation, expected } ) => {
+				expect(
+					areGlobalStyleConfigsEqual( original, variation )
+				).toBe( expected );
+			}
+		);
+	} );
 } );
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index d7ae30b84caf1..b8a6755935ad7 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -238,7 +238,7 @@ export default function TypographyPanel( {
 			)
 		);
 	};
-	const hasLineHeight = () => !! value?.typography?.lineHeight;
+	const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
 	const resetLineHeight = () => setLineHeight( undefined );
 
 	// Letter Spacing
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 8777869d43621..55dbab06de152 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -1106,9 +1106,17 @@ const processCSSNesting = ( css, blockSelector ) => {
 	return processedCSS;
 };
 
-export function useGlobalStylesOutput() {
-	let { merged: mergedConfig } = useContext( GlobalStylesContext );
-
+/**
+ * Returns the global styles output using a global styles configuration.
+ * If wishing to generate global styles and settings based on the
+ * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
+ * The use case for a custom config is to generate bespoke styles
+ * and settings for previews, or other out-of-editor experiences.
+ *
+ * @param {Object} mergedConfig Global styles configuration.
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
@@ -1190,3 +1198,13 @@ export function useGlobalStylesOutput() {
 		disableLayoutStyles,
 	] );
 }
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput() {
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	return useGlobalStylesOutputWithConfig( mergedConfig );
+}
diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
index d1abd0a57dbc2..0207110ae5223 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * Internal dependencies
@@ -376,3 +377,29 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ * Compares global style variations according to their styles and settings properties.
+ *
+ * @example
+ * ```js
+ * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
+ * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
+ * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
+ * // false
+ * ```
+ *
+ * @param {Object} original  A global styles object.
+ * @param {Object} variation A global styles object.
+ *
+ * @return {boolean} Whether `original` and `variation` match.
+ */
+export function areGlobalStyleConfigsEqual( original, variation ) {
+	if ( typeof original !== 'object' || typeof variation !== 'object' ) {
+		return original === variation;
+	}
+	return (
+		fastDeepEqual( original?.styles, variation?.styles ) &&
+		fastDeepEqual( original?.settings, variation?.settings )
+	);
+}
diff --git a/packages/block-editor/src/components/image-editor/use-save-image.js b/packages/block-editor/src/components/image-editor/use-save-image.js
index 07c7aeed5e704..2d1515ff0e3f0 100644
--- a/packages/block-editor/src/components/image-editor/use-save-image.js
+++ b/packages/block-editor/src/components/image-editor/use-save-image.js
@@ -32,24 +32,35 @@ export default function useSaveImage( {
 	const apply = useCallback( () => {
 		setIsInProgress( true );
 
-		let attrs = {};
+		const modifiers = [];
+
+		if ( rotation > 0 ) {
+			modifiers.push( {
+				type: 'rotate',
+				args: {
+					angle: rotation,
+				},
+			} );
+		}
 
 		// The crop script may return some very small, sub-pixel values when the image was not cropped.
 		// Crop only when the new size has changed by more than 0.1%.
 		if ( crop.width < 99.9 || crop.height < 99.9 ) {
-			attrs = crop;
-		}
-
-		if ( rotation > 0 ) {
-			attrs.rotation = rotation;
+			modifiers.push( {
+				type: 'crop',
+				args: {
+					left: crop.x,
+					top: crop.y,
+					width: crop.width,
+					height: crop.height,
+				},
+			} );
 		}
 
-		attrs.src = url;
-
 		apiFetch( {
 			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',
-			data: attrs,
+			data: { src: url, modifiers },
 		} )
 			.then( ( response ) => {
 				onSaveImage( {
diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
index c5cee77fa0025..0de9b3a2260f6 100644
--- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js
+++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
+import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -23,6 +24,9 @@ const InserterDraggableBlocks = ( {
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
+			onDragStart={ ( event ) => {
+				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }
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 61e0c4a3f3289..6fee380d52262 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -85,12 +85,17 @@ const LineHeightControl = ( {
 		: { marginBottom: 24 };
 
 	const handleOnChange = ( nextValue, { event } ) => {
+		if ( nextValue === '' ) {
+			onChange();
+			return;
+		}
+
 		if ( event.type === 'click' ) {
-			onChange( adjustNextValue( nextValue, false ) );
+			onChange( adjustNextValue( `${ nextValue }`, false ) );
 			return;
 		}
 
-		onChange( nextValue );
+		onChange( `${ nextValue }` );
 	};
 
 	return (
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
index 1b751409f32e3..76da83304d489 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -23,7 +23,7 @@ const Template = ( props ) => {
 export const Default = Template.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
-	__unstableInputWidth: '60px',
+	__unstableInputWidth: '100px',
 };
 
 export const UnconstrainedWidth = Template.bind( {} );
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index de2d060705617..4e2428fc0ac3f 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -2235,6 +2235,48 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state on value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
 
 async function toggleSettingsDrawer( user ) {
diff --git a/packages/block-editor/src/components/link-control/use-internal-input-value.js b/packages/block-editor/src/components/link-control/use-internal-input-value.js
index a4d9a1a7bca11..5dd3c59f3e873 100644
--- a/packages/block-editor/src/components/link-control/use-internal-input-value.js
+++ b/packages/block-editor/src/components/link-control/use-internal-input-value.js
@@ -8,14 +8,15 @@ export default function useInternalInputValue( value ) {
 		value || ''
 	);
 
+	// If the value prop changes, update the internal state.
 	useEffect( () => {
-		/**
-		 * If the value changes then sync this
-		 * back up with state.
-		 */
-		if ( value && value !== internalInputValue ) {
-			setInternalInputValue( value );
-		}
+		setInternalInputValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
 	}, [ value ] );
 
 	return [ internalInputValue, setInternalInputValue ];
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 507e7575344ab..a1f5f3562cfd4 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -46,6 +47,8 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +65,29 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
-					/>
-				) }
-			</BlockDraggable>
+			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );
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 21759d205845a..068688a7d5603 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
@@ -84,7 +84,11 @@ function ListViewBlockSelectButton(
 				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
index 43a135db7e5e8..1afde32cf1ec6 100644
--- a/packages/block-editor/src/components/list-view/block.js
+++ b/packages/block-editor/src/components/list-view/block.js
@@ -40,7 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -58,7 +58,6 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
 
 	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -90,6 +89,10 @@ function ListViewBlock( {
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = blockInformation?.title || __( 'Untitled' );
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -131,6 +134,7 @@ function ListViewBlock( {
 		collapse,
 		BlockSettingsMenu,
 		listViewInstanceId,
+		expandedState,
 	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
@@ -333,6 +337,8 @@ function ListViewBlock( {
 							} }
 							disableOpenOnArrowDown
 							__experimentalSelectBlock={ updateSelection }
+							expand={ expand }
+							expandedState={ expandedState }
 						/>
 					) }
 				</TreeGridCell>
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index d715e35d216f7..1c0a093e20835 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -56,16 +56,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                   Components props.
- * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers   Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description       Optional accessible description for the tree grid component.
- * @param {Ref}            ref                     Forwarded ref
+ * @param {Object}         props                         Components props.
+ * @param {string}         props.id                      An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description             Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Ref}            ref                           Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -77,6 +79,8 @@ function ListViewComponent(
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
 		description,
+		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -95,6 +99,7 @@ function ListViewComponent(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
+	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -128,11 +133,14 @@ function ListViewComponent(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -203,6 +211,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
+			renderAdditionalBlockUI,
 		} ),
 		[
 			draggedClientIds,
@@ -211,6 +220,7 @@ function ListViewComponent(
 			collapse,
 			BlockSettingsMenu,
 			instanceId,
+			renderAdditionalBlockUI,
 		]
 	);
 
@@ -264,6 +274,8 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
+			onSelect={ null }
+			renderAdditionalBlockUICallback={ null }
 		/>
 	);
 } );
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 8788cbec27662..d5a39c53751a2 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -18,7 +18,7 @@
 	.block-editor-list-view-block-select-button {
 		// When a row is expanded, retain the dark color.
 		&[aria-expanded="true"] {
-			color: $gray-900;
+			color: inherit;
 		}
 
 		// Ensure that on hover, the admin color is still used.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
index d54b1ef4f269f..341c2207c065c 100644
--- a/packages/block-editor/src/components/media-placeholder/index.js
+++ b/packages/block-editor/src/components/media-placeholder/index.js
@@ -17,6 +17,8 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
+import { pasteHandler } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -75,12 +77,19 @@ export function MediaPlaceholder( {
 	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
-	onHTMLDrop = noop,
+	onHTMLDrop: deprecatedOnHTMLDrop,
 	children,
 	mediaLibraryButton,
 	placeholder,
 	style,
 } ) {
+	if ( deprecatedOnHTMLDrop ) {
+		deprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {
+			since: '6.2',
+			version: '6.4',
+		} );
+	}
+
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
@@ -189,6 +198,70 @@ export function MediaPlaceholder( {
 		} );
 	};
 
+	async function handleBlocksDrop( blocks ) {
+		if ( ! blocks || ! Array.isArray( blocks ) ) {
+			return;
+		}
+
+		function recursivelyFindMediaFromBlocks( _blocks ) {
+			return _blocks.flatMap( ( block ) =>
+				( block.name === 'core/image' ||
+					block.name === 'core/audio' ||
+					block.name === 'core/video' ) &&
+				block.attributes.url
+					? [ block ]
+					: recursivelyFindMediaFromBlocks( block.innerBlocks )
+			);
+		}
+
+		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
+
+		if ( ! mediaBlocks.length ) {
+			return;
+		}
+
+		const uploadedMediaList = await Promise.all(
+			mediaBlocks.map( ( block ) =>
+				block.attributes.id
+					? block.attributes
+					: new Promise( ( resolve, reject ) => {
+							window
+								.fetch( block.attributes.url )
+								.then( ( response ) => response.blob() )
+								.then( ( blob ) =>
+									mediaUpload( {
+										filesList: [ blob ],
+										additionalData: {
+											title: block.attributes.title,
+											alt_text: block.attributes.alt,
+											caption: block.attributes.caption,
+										},
+										onFileChange: ( [ media ] ) => {
+											if ( media.id ) {
+												resolve( media );
+											}
+										},
+										allowedTypes,
+										onError: reject,
+									} )
+								)
+								.catch( () => resolve( block.attributes.url ) );
+					  } )
+			)
+		).catch( ( err ) => onError( err ) );
+
+		if ( multiple ) {
+			onSelect( uploadedMediaList );
+		} else {
+			onSelect( uploadedMediaList[ 0 ] );
+		}
+	}
+
+	async function onHTMLDrop( HTML ) {
+		const blocks = pasteHandler( { HTML } );
+		return await handleBlocksDrop( blocks );
+	}
+
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};
diff --git a/packages/block-editor/src/components/multi-selection-inspector/index.js b/packages/block-editor/src/components/multi-selection-inspector/index.js
index 380c4371a45b2..14eda5f930cad 100644
--- a/packages/block-editor/src/components/multi-selection-inspector/index.js
+++ b/packages/block-editor/src/components/multi-selection-inspector/index.js
@@ -23,14 +23,14 @@ function MultiSelectionInspector( { blocks } ) {
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(
 						/* translators: %d: number of blocks */
-						_n( '%d block', '%d blocks', blocks.length ),
+						_n( '%d Block', '%d Blocks', blocks.length ),
 						blocks.length
 					) }
 				</div>
 				<div className="block-editor-multi-selection-inspector__card-description">
 					{ sprintf(
 						/* translators: %d: number of words */
-						_n( '%d word', '%d words', words ),
+						_n( '%d word selected.', '%d words selected.', words ),
 						words
 					) }
 				</div>
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
index aa47b9d8bebea..d5bc4e46c6ce9 100644
--- a/packages/block-editor/src/components/off-canvas-editor/block.js
+++ b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -124,7 +124,7 @@ function ListViewBlock( {
 		[ selectBlock ]
 	);
 
-	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+	const { isTreeGridMounted, expand, expandedState, collapse, LeafMoreMenu } =
 		useListViewContext();
 
 	const toggleExpanded = useCallback(
@@ -334,6 +334,8 @@ function ListViewBlock( {
 									__experimentalSelectBlock={
 										updateSelection
 									}
+									expandedState={ expandedState }
+									expand={ expand }
 								/>
 							</>
 						) }
diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
index 66fca151e7189..8831b06b1eebc 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js
@@ -74,6 +74,7 @@ export default function SpacingInputControl( {
 
 	const previousValue = usePrevious( value );
 	if (
+		!! value &&
 		previousValue !== value &&
 		! isValueSpacingPreset( value ) &&
 		showCustomValueControl !== true
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index 8d5c7f850e89b..23e6809685377 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -205,7 +205,8 @@ export const withDataAlign = createHigherOrderComponent(
 		}
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withDataAlign'
 );
 
 /**
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
index 2460a47710699..0e0bdb34261c8 100644
--- a/packages/block-editor/src/hooks/border.js
+++ b/packages/block-editor/src/hooks/border.js
@@ -388,7 +388,8 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withBorderColorPaletteStyles'
 );
 
 addFilter(
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 09c65285c8df4..a20c2a98b5f1d 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -416,7 +416,8 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 		};
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	}
+	},
+	'withColorPaletteStyles'
 );
 
 const MIGRATION_PATHS = {
diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
index 568da7974925a..c1cf7016bfd44 100644
--- a/packages/block-editor/src/hooks/content-lock-ui.js
+++ b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -13,10 +13,6 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
-/**
- * External dependencies
- */
-import classnames from 'classnames';
 
 function StopEditingAsBlocksOnOutsideSelect( {
 	clientId,
@@ -37,7 +33,7 @@ function StopEditingAsBlocksOnOutsideSelect( {
 		if ( ! isBlockOrDescendantSelected ) {
 			stopEditingAsBlock();
 		}
-	}, [ isBlockOrDescendantSelected ] );
+	}, [ isBlockOrDescendantSelected, stopEditingAsBlock ] );
 	return null;
 }
 
@@ -91,7 +87,6 @@ export const withBlockControls = createHigherOrderComponent(
 			__unstableSetTemporarilyEditingAsBlocks();
 		}, [
 			props.clientId,
-			focusModeToRevert,
 			updateSettings,
 			updateBlockListSettings,
 			getBlockListSettings,
@@ -101,7 +96,7 @@ export const withBlockControls = createHigherOrderComponent(
 		] );
 
 		if ( ! isContentLocked && ! isEditingAsBlocks ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
@@ -156,14 +151,7 @@ export const withBlockControls = createHigherOrderComponent(
 						) }
 					</BlockSettingsMenuControls>
 				) }
-				<BlockEdit
-					{ ...props }
-					className={ classnames(
-						props.className,
-						isEditingAsBlocks &&
-							'is-content-locked-editing-as-blocks'
-					) }
-				/>
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index 57e98ef91f915..42bda25bfe1cc 100644
--- a/packages/block-editor/src/hooks/index.native.js
+++ b/packages/block-editor/src/hooks/index.native.js
@@ -15,3 +15,4 @@ export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index b05068ffbbce5..9b11e991004b3 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -429,7 +429,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withLayoutStyles'
 );
 
 /**
@@ -484,7 +485,8 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withChildLayoutStyles'
 );
 
 addFilter(
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index 64577a271a56d..81f29fd6a4144 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -386,7 +386,8 @@ export const withPositionStyles = createHigherOrderComponent(
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);
-	}
+	},
+	'withPositionStyles'
 );
 
 addFilter(
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 1d1e1f1e14df9..edf28773e14d5 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -447,7 +447,8 @@ const withElementsStyles = createHigherOrderComponent(
 				/>
 			</>
 		);
-	}
+	},
+	'withElementsStyles'
 );
 
 addFilter(
diff --git a/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js b/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
new file mode 100644
index 0000000000000..9c7fbe14df691
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
@@ -0,0 +1,282 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useEditorWrapperStyles } from '../use-editor-wrapper-styles';
+
+jest.mock( '../use-editor-wrapper-styles.scss', () => ( {
+	'use-editor-wrapper-styles': {
+		width: '100%',
+		maxWidth: 580,
+		alignSelf: 'center',
+	},
+	'use-editor-wrapper-styles--reversed': {
+		flexDirection: 'column-reverse',
+		width: '100%',
+		maxWidth: 580,
+	},
+} ) );
+
+const defaultCanvasStyles = {
+	width: '100%',
+	maxWidth: 580,
+	alignSelf: 'center',
+};
+
+describe( 'useEditorWrapperStyles', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should return the default wrapper styles when no props are set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () => useEditorWrapperStyles() );
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (medium) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 900, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 770,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide (landscape) alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 662,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for wide alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 1194, height: 834 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'wide',
+				blockName: 'core/group',
+				blockWidth: 800,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: 1054,
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for full alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				align: 'full',
+				blockName: 'core/cover',
+				blockWidth: 700,
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			expect.objectContaining( {
+				maxWidth: '100%',
+			} ),
+		] );
+		expect( result.current[ 1 ] ).toEqual( 0 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for left alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'left', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for center alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 640, height: 960 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'center', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin for right alignment', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 960, height: 640 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { align: 'right', marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( defaultCanvasStyles ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when reversed is true', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( { reversed: true, marginHorizontal: 16 } )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flexDirection: 'column-reverse',
+				width: '100%',
+				maxWidth: 580,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+
+	it( 'should return the correct wrapper styles and margin when contentResizeMode is set', () => {
+		// Arrange
+		jest.spyOn(
+			require( 'react-native' ),
+			'useWindowDimensions'
+		).mockReturnValue( { width: 800, height: 600 } );
+
+		// Act
+		const { result } = renderHook( () =>
+			useEditorWrapperStyles( {
+				contentResizeMode: 'stretch',
+				marginHorizontal: 16,
+			} )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toEqual( [
+			expect.objectContaining( {
+				flex: 1,
+			} ),
+			{},
+		] );
+		expect( result.current[ 1 ] ).toEqual( 16 );
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js
index 01d597a1ff15c..77b2e0cdf33cb 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -39,7 +39,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				},
 			},
 		};
-		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+			} )
+		).toEqual( {
 			className: 'has-tofu-font-family',
 			style: {
 				letterSpacing: '22px',
@@ -63,7 +71,11 @@ describe( 'getTypographyClassesAndStyles', () => {
 		};
 		expect(
 			getTypographyClassesAndStyles( attributes, {
-				minFontSize: '1rem',
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
 			} )
 		).toEqual( {
 			className: 'has-tofu-font-family',
@@ -75,4 +87,37 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should use layout.wideSize for the maximum viewport value', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				typography: {
+					fluid: {
+						minFontSize: '1rem',
+					},
+				},
+				layout: {
+					wideSize: '1000px',
+				},
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.765), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );
diff --git a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
new file mode 100644
index 0000000000000..beafe9b743f6f
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
@@ -0,0 +1,250 @@
+/**
+ * External dependencies
+ */
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	ALIGNMENT_BREAKPOINTS,
+	WIDE_ALIGNMENTS,
+	alignmentHelpers,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './use-editor-wrapper-styles.scss';
+
+const ALIGNMENT_MAX_WIDTH = {
+	full: '100%',
+	wide: 1054,
+	wideMedium: 770,
+	wideLandscape: 662,
+};
+
+const BLOCK_DEFAULT_MARGIN = 16;
+
+/**
+ * Get the styles for the wide width alignment.
+ *
+ * @param {Object}  [options]           The options for the helper.
+ * @param {string}  options.align       The alignment value.
+ * @param {boolean} options.isLandscape Whether the screen is in landscape mode.
+ * @param {number}  options.width       The width of the screen.
+ * @return {Object} An object containing the styles for the wide width alignment.
+ */
+function getWideWidthStyles( { align, isLandscape, width } = {} ) {
+	if ( align !== WIDE_ALIGNMENTS.alignments.wide ) {
+		return {};
+	}
+
+	if ( isLandscape && width < ALIGNMENT_BREAKPOINTS.large ) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideLandscape };
+	}
+
+	if ( width <= ALIGNMENT_BREAKPOINTS.small ) {
+		return { maxWidth: width };
+	}
+
+	if (
+		width >= ALIGNMENT_BREAKPOINTS.medium &&
+		width < ALIGNMENT_BREAKPOINTS.wide
+	) {
+		return { maxWidth: ALIGNMENT_MAX_WIDTH.wideMedium };
+	}
+
+	return { maxWidth: ALIGNMENT_MAX_WIDTH.wide };
+}
+
+/**
+ * Get the styles for the full width alignment.
+ *
+ * @param {Object}  [options]               The options for the helper.
+ * @param {string}  options.align           The alignment value.
+ * @param {string}  options.blockName       The name of the block.
+ * @param {boolean} options.hasParents      Whether the block has parents.
+ * @param {string}  options.parentBlockName The name of the parent block.
+ * @return {Object} An object containing the styles for the full width alignment.
+ */
+function getFullWidthStyles( {
+	align,
+	blockName,
+	hasParents,
+	parentBlockName,
+} = {} ) {
+	const { isContainerRelated, isFullWidth } = alignmentHelpers;
+	const fullWidthStyles = isFullWidth( align )
+		? { maxWidth: ALIGNMENT_MAX_WIDTH.full }
+		: {};
+
+	if (
+		! align &&
+		hasParents &&
+		! isContainerRelated( parentBlockName ) &&
+		isContainerRelated( blockName )
+	) {
+		fullWidthStyles.paddingHorizontal = BLOCK_DEFAULT_MARGIN;
+	}
+
+	return fullWidthStyles;
+}
+
+/**
+ * Get the block margin based on various conditions.
+ *
+ * @param {Object}  [options]                    The options for the helper.
+ * @param {string}  options.align                The alignment value.
+ * @param {string}  options.blockName            The name of the block.
+ * @param {number}  options.blockWidth           The width of the block.
+ * @param {boolean} options.hasParents           Whether the block has parents.
+ * @param {number}  options.marginHorizontal     Default horizontal margin.
+ * @param {string}  options.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  options.parentBlockName      The name of the parent block.
+ * @param {number}  options.parentWidth          The width of the parent block.
+ * @param {number}  options.width                The width of the screen.
+ * @return {number} The calculated block margin.
+ */
+function getBlockMargin( {
+	align,
+	blockName,
+	blockWidth,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	width,
+} = {} ) {
+	const { isContainerRelated, isWider, isWideWidth, isFullWidth } =
+		alignmentHelpers;
+
+	if ( isFullWidth( align ) ) {
+		if ( ! hasParents ) {
+			return 0;
+		}
+		return marginHorizontal;
+	}
+
+	if ( isWideWidth( align ) ) {
+		return marginHorizontal;
+	}
+
+	if (
+		isFullWidth( parentBlockAlignment ) &&
+		! isWider( blockWidth, 'medium' )
+	) {
+		if ( isContainerRelated( blockName ) || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+		return marginHorizontal * 2;
+	}
+
+	if (
+		isContainerRelated( parentBlockName ) &&
+		! isContainerRelated( blockName )
+	) {
+		const isScreenWidthEqual = parentWidth === width;
+		if ( isScreenWidthEqual || isWider( width, 'mobile' ) ) {
+			return marginHorizontal;
+		}
+	}
+
+	return marginHorizontal;
+}
+
+/**
+ * Custom hook to get the styles and margin for the editor wrapper.
+ *
+ * @param {Object}  [props]                    The props for the hook.
+ * @param {string}  props.align                The alignment value.
+ * @param {string}  props.blockName            The name of the block.
+ * @param {number}  props.blockWidth           The width of the block.
+ * @param {string}  props.contentResizeMode    The content resize mode.
+ * @param {boolean} props.hasParents           Whether the block has parents.
+ * @param {number}  props.marginHorizontal     Default horizontal margin.
+ * @param {string}  props.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  props.parentBlockName      The name of the parent block.
+ * @param {number}  props.parentWidth          The width of the parent block.
+ * @param {boolean} [props.reversed=false]     Whether the flex direction should be reversed.
+ * @return {[Array, number]} An array containing the wrapper styles and block margin.
+ */
+export function useEditorWrapperStyles( {
+	align,
+	blockName,
+	blockWidth,
+	contentResizeMode,
+	hasParents,
+	marginHorizontal,
+	parentBlockAlignment,
+	parentBlockName,
+	parentWidth,
+	reversed = false,
+} = {} ) {
+	const { width, height } = useWindowDimensions();
+	const isLandscape = width >= height;
+
+	const blockMargin = useMemo(
+		() =>
+			getBlockMargin( {
+				align,
+				blockName,
+				blockWidth,
+				hasParents,
+				marginHorizontal,
+				parentBlockAlignment,
+				parentBlockName,
+				parentWidth,
+				width,
+			} ),
+		[
+			align,
+			blockName,
+			blockWidth,
+			hasParents,
+			marginHorizontal,
+			parentBlockAlignment,
+			parentBlockName,
+			parentWidth,
+			width,
+		]
+	);
+
+	const wrapperStyles = useMemo( () => {
+		let canvasStyles;
+
+		if ( contentResizeMode === 'stretch' ) {
+			// For these cases, no width constraints should be added.
+			canvasStyles = { flex: 1 };
+		} else if ( reversed ) {
+			canvasStyles = styles[ 'use-editor-wrapper-styles--reversed' ];
+		} else {
+			canvasStyles = styles[ 'use-editor-wrapper-styles' ];
+		}
+
+		const alignmentStyles = {
+			...getWideWidthStyles( { align, isLandscape, width } ),
+			...getFullWidthStyles( {
+				align,
+				blockName,
+				hasParents,
+				parentBlockName,
+			} ),
+		};
+
+		return [ canvasStyles, alignmentStyles ];
+	}, [
+		align,
+		blockName,
+		hasParents,
+		parentBlockName,
+		isLandscape,
+		width,
+		contentResizeMode,
+		reversed,
+	] );
+
+	return [ wrapperStyles, blockMargin ];
+}
diff --git a/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
new file mode 100644
index 0000000000000..c980253ee6425
--- /dev/null
+++ b/packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
@@ -0,0 +1,11 @@
+.use-editor-wrapper-styles {
+	width: 100%;
+	max-width: 580;
+	align-self: center;
+}
+
+.use-editor-wrapper-styles--reversed {
+	flex-direction: column-reverse;
+	width: 100%;
+	max-width: 580;
+}
diff --git a/packages/block-editor/src/hooks/use-typography-props.js b/packages/block-editor/src/hooks/use-typography-props.js
index da5869ad9aec0..d6a6b0629143d 100644
--- a/packages/block-editor/src/hooks/use-typography-props.js
+++ b/packages/block-editor/src/hooks/use-typography-props.js
@@ -11,25 +11,23 @@ import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
 import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
-// This utility is intended to assist where the serialization of the typography
-// block support is being skipped for a block but the typography related CSS
-// styles still need to be generated so they can be applied to inner elements.
-
+/*
+ * This utility is intended to assist where the serialization of the typography
+ * block support is being skipped for a block but the typography related CSS
+ * styles still need to be generated so they can be applied to inner elements.
+ */
 /**
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}         attributes              Block attributes.
- * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
- *                                                 otherwise an object containing theme fluid typography settings.
+ * @param {Object}         attributes Block attributes.
+ * @param {Object|boolean} settings   Merged theme.json settings
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles(
-	attributes,
-	fluidTypographySettings
-) {
+export function getTypographyClassesAndStyles( attributes, settings ) {
 	let typographyStyles = attributes?.style?.typography || {};
+	const fluidTypographySettings = settings?.typography?.fluid;
 
 	if (
 		!! fluidTypographySettings &&
@@ -40,6 +38,7 @@ export function getTypographyClassesAndStyles(
 			getComputedFluidTypographyValue( {
 				fontSize: attributes?.style?.typography?.fontSize,
 				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+				maximumViewPortWidth: settings?.layout?.wideSize,
 			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
diff --git a/packages/block-editor/src/index.native.js b/packages/block-editor/src/index.native.js
new file mode 100644
index 0000000000000..f1b544c29c6bd
--- /dev/null
+++ b/packages/block-editor/src/index.native.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+export * from './index.js';
+
+export { useEditorWrapperStyles } from './hooks';
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 0b7e8b2511aa6..a7357311eedbe 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -5,7 +5,6 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
-import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
@@ -20,7 +19,6 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
-	LeafMoreMenu,
 	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
diff --git a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
index c07e6fc07be60..1aae7b99cbf14 100644
--- a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
+++ b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js
@@ -14,14 +14,16 @@ import { unlock } from '../lock-unlock';
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
- * @param {string} clientId The client ID of the block.
- *
  * @return {boolean} Whether the block toolbar is hidden.
  */
-export function useShouldContextualToolbarShow( clientId ) {
+export function useShouldContextualToolbarShow() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useSelect(
 		( select ) => {
 			const {
 				__unstableGetEditorMode,
@@ -31,14 +33,19 @@ export function useShouldContextualToolbarShow( clientId ) {
 				getBlock,
 				getSettings,
 				isNavigationMode,
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
 			} = unlock( select( blockEditorStore ) );
 
 			const isEditMode = __unstableGetEditorMode() === 'edit';
 			const hasFixedToolbar = getSettings().hasFixedToolbar;
 			const isDistractionFree = getSettings().isDistractionFree;
-			const hasClientId = !! clientId;
+			const selectedBlockId =
+				getFirstMultiSelectedBlockClientId() ||
+				getSelectedBlockClientId();
+			const hasSelectedBlockId = !! selectedBlockId;
 			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
-				getBlock( clientId ) || {}
+				getBlock( selectedBlockId ) || {}
 			);
 
 			const _shouldShowContextualToolbar =
@@ -48,13 +55,13 @@ export function useShouldContextualToolbarShow( clientId ) {
 				isLargeViewport &&
 				! isMultiSelecting() &&
 				! isTyping() &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! isEmptyDefaultBlock &&
 				! isBlockInterfaceHidden();
 
 			const _canFocusHiddenToolbar =
 				isEditMode &&
-				hasClientId &&
+				hasSelectedBlockId &&
 				! _shouldShowContextualToolbar &&
 				! hasFixedToolbar &&
 				! isDistractionFree &&
@@ -63,13 +70,16 @@ export function useShouldContextualToolbarShow( clientId ) {
 			return {
 				shouldShowContextualToolbar: _shouldShowContextualToolbar,
 				canFocusHiddenToolbar: _canFocusHiddenToolbar,
+				fixedToolbarCanBeFocused:
+					( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,
 			};
 		},
-		[ clientId, isLargeViewport ]
+		[ isLargeViewport ]
 	);
 
 	return {
 		shouldShowContextualToolbar,
 		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
 	};
 }
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index a4e529292e92d..03ede0874259f 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.10.0 (2023-05-10)
+
 ## 8.9.0 (2023-04-26)
 
 ## 8.8.0 (2023-04-12)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 9a34e8ae084fa..8ba08989c84d2 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.9.0",
+	"version": "8.10.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,10 +27,12 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js"
+		"{src,build,build-module}/*/init.js",
+		"{src,build,build-module}/utils/interactivity/index.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@preact/signals": "^1.1.3",
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/autop": "file:../autop",
@@ -63,12 +65,14 @@
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepsignal": "^1.3.0",
 		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
+		"preact": "^10.13.2",
 		"remove-accents": "^0.4.2"
 	},
 	"peerDependencies": {
diff --git a/packages/block-library/src/block/edit.native.js b/packages/block-library/src/block/edit.native.js
index 96472470efebd..e72aee3858eaf 100644
--- a/packages/block-library/src/block/edit.native.js
+++ b/packages/block-library/src/block/edit.native.js
@@ -36,6 +36,7 @@ import {
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { help } from '@wordpress/icons';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
+import { store as editorStore } from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -103,6 +104,11 @@ export default function ReusableBlockEdit( {
 		},
 		[ ref, clientId ]
 	);
+	const hostAppNamespace = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().hostAppNamespace,
+		[]
+	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
@@ -143,11 +149,19 @@ export default function ReusableBlockEdit( {
 	function renderSheet() {
 		const infoTitle =
 			Platform.OS === 'android'
-				? __(
-						'Editing reusable blocks is not yet supported on WordPress for Android'
+				? sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for Android'
+						),
+						hostAppNamespace
 				  )
-				: __(
-						'Editing reusable blocks is not yet supported on WordPress for iOS'
+				: sprintf(
+						/* translators: %s: name of the host app (e.g. WordPress) */
+						__(
+							'Editing reusable blocks is not yet supported on %s for iOS'
+						),
+						hostAppNamespace
 				  );
 
 		return (
diff --git a/packages/block-library/src/comment-author-name/edit.js b/packages/block-library/src/comment-author-name/edit.js
index 82e0c6b100ce7..629ff185394c5 100644
--- a/packages/block-library/src/comment-author-name/edit.js
+++ b/packages/block-library/src/comment-author-name/edit.js
@@ -70,7 +70,7 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Link to authors URL' ) }
diff --git a/packages/block-library/src/comment-edit-link/edit.js b/packages/block-library/src/comment-edit-link/edit.js
index c2360063e33ad..72de15757560f 100644
--- a/packages/block-library/src/comment-edit-link/edit.js
+++ b/packages/block-library/src/comment-edit-link/edit.js
@@ -37,7 +37,7 @@ export default function Edit( {
 	);
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Link settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<ToggleControl
 					__nextHasNoMarginBottom
 					label={ __( 'Open in new tab' ) }
diff --git a/packages/block-library/src/comment-template/index.php b/packages/block-library/src/comment-template/index.php
index 45fd993adbdeb..6a8698f60f0ec 100644
--- a/packages/block-library/src/comment-template/index.php
+++ b/packages/block-library/src/comment-template/index.php
@@ -25,13 +25,14 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 
 	$content = '';
 	foreach ( $comments as $comment ) {
-
-		$block_content = ( new WP_Block(
-			$block->parsed_block,
-			array(
-				'commentId' => $comment->comment_ID,
-			)
-		) )->render( array( 'dynamic' => false ) );
+		$comment_id           = $comment->comment_ID;
+		$filter_block_context = static function( $context ) use ( $comment_id ) {
+			$context['commentId'] = $comment_id;
+			return $context;
+		};
+		add_filter( 'render_block_context', $filter_block_context );
+		$block_content = $block->render( array( 'dynamic' => false ) );
+		remove_filter( 'render_block_context', $filter_block_context );
 
 		$children = $comment->get_children();
 
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 8c7cb0f9143c6..f7e117add4065 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -4,7 +4,7 @@
 	"name": "core/cover",
 	"title": "Cover",
 	"category": "media",
-	"description": "Add an image or video with a text overlay — great for headers.",
+	"description": "Add an image or video with a text overlay.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {
diff --git a/packages/block-library/src/cover/variations.js b/packages/block-library/src/cover/variations.js
index 37c04d9a3cb98..3d580af4c0ce4 100644
--- a/packages/block-library/src/cover/variations.js
+++ b/packages/block-library/src/cover/variations.js
@@ -8,9 +8,7 @@ const variations = [
 	{
 		name: 'cover',
 		title: __( 'Cover' ),
-		description: __(
-			'Add an image or video with a text overlay — great for headers.'
-		),
+		description: __( 'Add an image or video with a text overlay.' ),
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
 		icon: cover,
diff --git a/packages/block-library/src/details-content/block.json b/packages/block-library/src/details-content/block.json
deleted file mode 100644
index 4a990cb37d453..0000000000000
--- a/packages/block-library/src/details-content/block.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"__experimental": true,
-	"name": "core/details-content",
-	"title": "Details Content",
-	"category": "text",
-	"parent": [ "core/details" ],
-	"description": "Add content that may be shown or hidden via a Details block.",
-	"textdomain": "default",
-	"supports": {
-		"align": false,
-		"color": {
-			"gradients": true,
-			"link": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true,
-				"link": true
-			}
-		},
-		"__experimentalBorder": {
-			"radius": true,
-			"color": true,
-			"width": true,
-			"style": true
-		},
-		"html": false,
-		"lock": false,
-		"multiple": false,
-		"reusable": false,
-		"spacing": {
-			"margin": true,
-			"padding": true
-		},
-		"typography": {
-			"fontSize": true,
-			"lineHeight": true,
-			"__experimentalFontFamily": true,
-			"__experimentalFontWeight": true,
-			"__experimentalFontStyle": true,
-			"__experimentalTextTransform": true,
-			"__experimentalTextDecoration": true,
-			"__experimentalLetterSpacing": true,
-			"__experimentalDefaultControls": {
-				"fontSize": true
-			}
-		}
-	}
-}
diff --git a/packages/block-library/src/details-content/edit.js b/packages/block-library/src/details-content/edit.js
deleted file mode 100644
index a4e0c71109274..0000000000000
--- a/packages/block-library/src/details-content/edit.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { View } from '@wordpress/primitives';
-
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: __(
-				'Add text or blocks that will display when the details block is opened.'
-			),
-		},
-	],
-];
-
-function DetailsContentEdit() {
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
-		templateLock: false,
-	} );
-
-	return <View { ...innerBlocksProps }></View>;
-}
-
-export default DetailsContentEdit;
diff --git a/packages/block-library/src/details-content/index.js b/packages/block-library/src/details-content/index.js
deleted file mode 100644
index 1c7dbeaf193ad..0000000000000
--- a/packages/block-library/src/details-content/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { postContent as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import initBlock from '../utils/init-block';
-import metadata from './block.json';
-import edit from './edit';
-import save from './save';
-
-const { name } = metadata;
-export { metadata, name };
-
-export const settings = {
-	icon,
-	save,
-	edit,
-};
-
-export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details-content/save.js b/packages/block-library/src/details-content/save.js
deleted file mode 100644
index fe3f0641b1b22..0000000000000
--- a/packages/block-library/src/details-content/save.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-export default function save() {
-	const blockProps = useBlockProps.save();
-	return (
-		<div { ...blockProps }>
-			<InnerBlocks.Content />
-		</div>
-	);
-}
diff --git a/packages/block-library/src/details-summary/block.json b/packages/block-library/src/details-summary/block.json
deleted file mode 100644
index 314873e453667..0000000000000
--- a/packages/block-library/src/details-summary/block.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"__experimental": true,
-	"name": "core/details-summary",
-	"title": "Details Summary",
-	"category": "text",
-	"parent": [ "core/details" ],
-	"description": "Provide summary text used to toggle the display of content inside a Details block.",
-	"textdomain": "default",
-	"attributes": {
-		"summary": {
-			"type": "string"
-		}
-	},
-	"supports": {
-		"align": false,
-		"color": {
-			"gradients": true,
-			"__experimentalDefaultControls": {
-				"background": true,
-				"text": true
-			}
-		},
-		"__experimentalBorder": {
-			"radius": true,
-			"color": true,
-			"width": true,
-			"style": true
-		},
-		"html": false,
-		"lock": false,
-		"multiple": false,
-		"reusable": false,
-		"spacing": {
-			"margin": true,
-			"padding": true
-		},
-		"typography": {
-			"fontSize": true,
-			"lineHeight": true,
-			"__experimentalFontFamily": true,
-			"__experimentalFontWeight": true,
-			"__experimentalFontStyle": true,
-			"__experimentalTextTransform": true,
-			"__experimentalTextDecoration": true,
-			"__experimentalLetterSpacing": true,
-			"__experimentalDefaultControls": {
-				"fontSize": true
-			}
-		}
-	}
-}
diff --git a/packages/block-library/src/details-summary/edit.js b/packages/block-library/src/details-summary/edit.js
deleted file mode 100644
index 9e091382ab211..0000000000000
--- a/packages/block-library/src/details-summary/edit.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-function DetailsSummaryEdit( { attributes, setAttributes } ) {
-	const summary = attributes.summary ? attributes.summary : __( 'Details' );
-	return (
-		<summary
-			{ ...useBlockProps() }
-			onClick={ ( event ) => event.preventDefault() }
-		>
-			<RichText
-				aria-label={ __( 'Add summary' ) }
-				allowedFormats={ [] }
-				withoutInteractiveFormatting
-				value={ summary }
-				onChange={ ( newSummary ) =>
-					setAttributes( { summary: newSummary } )
-				}
-			/>
-		</summary>
-	);
-}
-
-export default DetailsSummaryEdit;
diff --git a/packages/block-library/src/details-summary/editor.scss b/packages/block-library/src/details-summary/editor.scss
deleted file mode 100644
index 168e2f8a0d35c..0000000000000
--- a/packages/block-library/src/details-summary/editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.wp-block-details-summary div {
-	display: inline;
-}
diff --git a/packages/block-library/src/details-summary/index.js b/packages/block-library/src/details-summary/index.js
deleted file mode 100644
index 874d806c4bbda..0000000000000
--- a/packages/block-library/src/details-summary/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { heading as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import initBlock from '../utils/init-block';
-import metadata from './block.json';
-import edit from './edit';
-import save from './save';
-
-const { name } = metadata;
-export { metadata, name };
-
-export const settings = {
-	icon,
-	save,
-	edit,
-};
-
-export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/details-summary/save.js b/packages/block-library/src/details-summary/save.js
deleted file mode 100644
index 0f73adb10093a..0000000000000
--- a/packages/block-library/src/details-summary/save.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
-
-export default function save( { attributes } ) {
-	const summary = attributes.summary ? attributes.summary : 'Details';
-	return (
-		<summary { ...useBlockProps.save() }>
-			<RichText.Content value={ summary } />
-		</summary>
-	);
-}
diff --git a/packages/block-library/src/details-summary/style.scss b/packages/block-library/src/details-summary/style.scss
deleted file mode 100644
index 9249d861cbe92..0000000000000
--- a/packages/block-library/src/details-summary/style.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.wp-block-details-summary {
-	cursor: pointer;
-}
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index 5d3ac00afbad1..40321ee6b0c9c 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -5,28 +5,29 @@
 	"name": "core/details",
 	"title": "Details",
 	"category": "text",
-	"description": "A block that displays a summary and shows or hides additional content.",
-	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
+	"description": "Hide and show additional content.",
+	"keywords": [ "disclosure", "summary", "hide", "accordion" ],
 	"textdomain": "default",
 	"attributes": {
 		"showContent": {
 			"type": "boolean",
 			"default": false
+		},
+		"summary": {
+			"type": "string"
 		}
 	},
 	"supports": {
-		"align": true,
+		"align": [ "wide", "full" ],
 		"color": {
 			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
-				"text": true,
-				"link": true
+				"text": true
 			}
 		},
 		"__experimentalBorder": {
-			"radius": true,
 			"color": true,
 			"width": true,
 			"style": true
@@ -50,5 +51,6 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-details-editor",
 	"style": "wp-block-details"
 }
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index fb202829e5079..bc0c206aa2d26 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -11,15 +12,21 @@ import { useSelect } from '@wordpress/data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __( 'Type / to add a hidden block' ),
+		},
+	],
+];
 
 function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent } = attributes;
+	const { showContent, summary } = attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: TEMPLATE,
 		template: TEMPLATE,
-		templateLock: 'all',
+		__experimentalCaptureToolbars: true,
 	} );
 
 	// Check if either the block or the inner blocks are selected.
@@ -51,7 +58,22 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<details
 				{ ...innerBlocksProps }
 				open={ hasSelection || showContent }
-			></details>
+			>
+				<summary onClick={ ( event ) => event.preventDefault() }>
+					<RichText
+						aria-label={ __( 'Write summary' ) }
+						placeholder={ __( 'Write summary…' ) }
+						allowedFormats={ [] }
+						withoutInteractiveFormatting
+						value={ summary }
+						onChange={ ( newSummary ) =>
+							setAttributes( { summary: newSummary } )
+						}
+						multiline={ false }
+					/>
+				</summary>
+				{ innerBlocksProps.children }
+			</details>
 		</>
 	);
 }
diff --git a/packages/block-library/src/details/editor.scss b/packages/block-library/src/details/editor.scss
new file mode 100644
index 0000000000000..76c676974d4d0
--- /dev/null
+++ b/packages/block-library/src/details/editor.scss
@@ -0,0 +1,3 @@
+.wp-block-details summary div {
+	display: inline;
+}
diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js
index 24ad75282ee0f..e30d1a8e04974 100644
--- a/packages/block-library/src/details/index.js
+++ b/packages/block-library/src/details/index.js
@@ -18,13 +18,18 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			summary: 'La Mancha',
+			showContent: true,
+		},
 		innerBlocks: [
 			{
-				name: 'core/details-summary',
-				attributes: { summary: __( 'Details' ) },
-			},
-			{
-				name: 'core/details-content',
+				name: 'core/paragraph',
+				attributes: {
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
+				},
 			},
 		],
 	},
diff --git a/packages/block-library/src/details/save.js b/packages/block-library/src/details/save.js
index da5d0c1c35f4b..0df5f63ce9410 100644
--- a/packages/block-library/src/details/save.js
+++ b/packages/block-library/src/details/save.js
@@ -1,14 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { showContent } = attributes;
+	const summary = attributes.summary ? attributes.summary : 'Details';
 	const blockProps = useBlockProps.save();
 
 	return (
 		<details { ...blockProps } open={ showContent }>
+			<summary>
+				<RichText.Content value={ summary } />
+			</summary>
 			<InnerBlocks.Content />
 		</details>
 	);
diff --git a/packages/block-library/src/details/style.scss b/packages/block-library/src/details/style.scss
index 59bf9c8b73005..415a3210a50ae 100644
--- a/packages/block-library/src/details/style.scss
+++ b/packages/block-library/src/details/style.scss
@@ -1,3 +1,19 @@
 .wp-block-details {
+	box-sizing: border-box;
 	overflow: hidden;
 }
+
+.wp-block-details summary {
+	cursor: pointer;
+}
+
+// Use block gap for block; falls back to browser default if not supported.
+.wp-block-details > *:not(summary) {
+	margin-block-start: var(--wp--style--block-gap);
+	margin-block-end: 0;
+}
+
+// Remove excess margin from the last block.
+.wp-block-details > *:last-child {
+	margin-bottom: 0;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 8b6aab68cfacf..e6170422f51d6 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -13,7 +13,7 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
-@import "./details-summary/editor.scss";
+@import "./details/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./freeform/editor.scss";
diff --git a/packages/block-library/src/file/view.js b/packages/block-library/src/file/view.js
index 820fdb507ad8e..6d0b61fa51cb7 100644
--- a/packages/block-library/src/file/view.js
+++ b/packages/block-library/src/file/view.js
@@ -3,4 +3,7 @@
  */
 import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
 
-hidePdfEmbedsOnUnsupportedBrowsers();
+document.addEventListener(
+	'DOMContentLoaded',
+	hidePdfEmbedsOnUnsupportedBrowsers
+);
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 64a6dae10ec90..8f4b785e57741 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -127,7 +127,6 @@ function GalleryEdit( props ) {
 		replaceInnerBlocks,
 		updateBlockAttributes,
 		selectBlock,
-		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
@@ -186,9 +185,6 @@ function GalleryEdit( props ) {
 				align: undefined,
 			} );
 		} );
-		if ( newImages?.length > 0 ) {
-			clearSelectedBlock();
-		}
 	}, [ newImages ] );
 
 	const imageSizeOptions = useImageSizes(
@@ -343,10 +339,6 @@ function GalleryEdit( props ) {
 			} );
 		} );
 
-		if ( newBlocks?.length > 0 ) {
-			selectBlock( newBlocks[ 0 ].clientId );
-		}
-
 		replaceInnerBlocks(
 			clientId,
 			existingImageBlocks
@@ -357,6 +349,11 @@ function GalleryEdit( props ) {
 						newOrderMap[ b.attributes.id ]
 				)
 		);
+
+		// Select the first block to scroll into view when new blocks are added.
+		if ( newBlocks?.length > 0 ) {
+			selectBlock( newBlocks[ 0 ].clientId );
+		}
 	}
 
 	function onUploadError( message ) {
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 2fdde40f4c19a..ec2b3b08a459c 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -4,12 +4,6 @@ figure.wp-block-gallery {
 	// See https://github.com/WordPress/gutenberg/pull/10358
 
 	display: block;
-	&.has-nested-images {
-		.components-drop-zone {
-			display: none;
-			pointer-events: none;
-		}
-	}
 
 	> .blocks-gallery-caption {
 		flex: 0 0 100%;
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index fc0efcdbdcb6c..dabc6d6b1b30c 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -14,7 +14,9 @@ import {
 	setupMediaUpload,
 	triggerBlockListLayout,
 	within,
+	setupPicker,
 } from 'test/helpers';
+import { ActionSheetIOS } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -36,6 +38,12 @@ import {
 	generateGalleryBlock,
 } from './helpers';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'WordPress Media Library',
+];
+
 const media = [
 	{
 		localId: 1,
@@ -96,9 +104,44 @@ describe( 'Gallery block', () => {
 		expect( getByText( 'WordPress Media Library' ) ).toBeVisible();
 	} );
 
+	it( 'displays correct media options picker', async () => {
+		// Initialize with an empty gallery
+		const screen = await initializeEditor( {
+			initialHtml: generateGalleryBlock( 0 ),
+		} );
+		const { getByText } = screen;
+
+		// Tap on Gallery block
+		const block = await getBlock( screen, 'Gallery' );
+		fireEvent.press( block );
+		fireEvent.press( within( block ).getByText( 'ADD MEDIA' ) );
+
+		// Observe that media options picker is displayed
+		/* eslint-disable jest/no-conditional-expect */
+		if ( Platform.isIOS ) {
+			// On iOS the picker is rendered natively, so we have
+			// to check the arguments passed to `ActionSheetIOS`.
+			expect(
+				ActionSheetIOS.showActionSheetWithOptions
+			).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					title: 'Choose images',
+					options: [ 'Cancel', ...MEDIA_OPTIONS ],
+				} ),
+				expect.any( Function )
+			);
+		} else {
+			expect( getByText( 'Choose images' ) ).toBeVisible();
+			MEDIA_OPTIONS.forEach( ( option ) =>
+				expect( getByText( option ) ).toBeVisible()
+			);
+		}
+		/* eslint-enable jest/no-conditional-expect */
+	} );
+
 	// This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444)
 	// is addressed.
-	it.skip( 'displays media options picker when selecting the block', async () => {
+	it.skip( 'block remains selected after dimissing the media options picker', async () => {
 		// Initialize with an empty gallery
 		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
@@ -213,11 +256,13 @@ describe( 'Gallery block', () => {
 			setupMediaPicker();
 
 		// Initialize with an empty gallery
-		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
+		const screen = await initializeWithGalleryBlock();
+		const { galleryBlock, getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
 
 		// Upload images from device
 		fireEvent.press( getByText( 'ADD MEDIA' ) );
-		fireEvent.press( getByText( 'Choose from device' ) );
+		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
 		// Return media items picked
diff --git a/packages/block-library/src/image/test/edit.native.js b/packages/block-library/src/image/test/edit.native.js
index 73f4ec22a554d..1f1bdd6ae4eda 100644
--- a/packages/block-library/src/image/test/edit.native.js
+++ b/packages/block-library/src/image/test/edit.native.js
@@ -8,6 +8,7 @@ import {
 	getEditorHtml,
 	render,
 	waitFor,
+	setupApiFetch,
 } from 'test/helpers';
 import { Image } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
@@ -22,9 +23,10 @@ import {
 	sendMediaUpload,
 	subscribeMediaUpload,
 } from '@wordpress/react-native-bridge';
-import { select } from '@wordpress/data';
+import { select, dispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import apiFetch from '@wordpress/api-fetch';
 import '@wordpress/jest-console';
 
 /**
@@ -45,7 +47,15 @@ function mockGetMedia( media ) {
 	jest.spyOn( select( coreStore ), 'getMedia' ).mockReturnValue( media );
 }
 
-const apiFetchPromise = Promise.resolve( {} );
+const FETCH_MEDIA = {
+	request: {
+		path: `/wp/v2/media/1?context=edit`,
+	},
+	response: {
+		source_url: 'https://cldup.com/cXyG__fTLN.jpg',
+		id: 1,
+	},
+};
 
 const clipboardPromise = Promise.resolve( '' );
 Clipboard.getString.mockImplementation( () => clipboardPromise );
@@ -58,6 +68,18 @@ beforeAll( () => {
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 } );
 
+beforeEach( () => {
+	// Mock media fetch requests
+	setupApiFetch( [ FETCH_MEDIA ] );
+
+	// Invalidate `getMedia` resolutions to allow requesting to the API the same media id
+	dispatch( coreStore ).invalidateResolutionForStoreSelector( 'getMedia' );
+} );
+
+afterEach( () => {
+	apiFetch.mockReset();
+} );
+
 afterAll( () => {
 	getBlockTypes().forEach( ( { name } ) => {
 		unregisterBlockType( name );
@@ -78,8 +100,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -105,8 +127,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -132,8 +154,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -169,8 +191,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -211,8 +233,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is not fetched via `getMedia` due to the presence of query parameters in the URL.
+		expect( apiFetch ).not.toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -236,8 +258,8 @@ describe( 'Image Block', () => {
 		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
@@ -267,8 +289,8 @@ describe( 'Image Block', () => {
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
-		// We must await the image fetch via `getMedia`
-		await act( () => apiFetchPromise );
+		// Check that image is fetched via `getMedia`
+		expect( apiFetch ).toHaveBeenCalledWith( FETCH_MEDIA.request );
 
 		const [ imageBlock ] = screen.getAllByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 74cbe739cf003..61024c6c0dfb2 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -46,8 +46,6 @@ import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as details from './details';
-import * as detailsContent from './details-content';
-import * as detailsSummary from './details-summary';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -231,8 +229,6 @@ const getAllBlocks = () => {
 	];
 	if ( window?.__experimentalEnableDetailsBlocks ) {
 		blocks.push( details );
-		blocks.push( detailsContent );
-		blocks.push( detailsSummary );
 	}
 	if ( window?.__experimentalEnablePlaylistBlock ) {
 		blocks.push( playlist );
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
index f613a44e72799..6a6a5eb11b88d 100644
--- a/packages/block-library/src/index.native.js
+++ b/packages/block-library/src/index.native.js
@@ -88,6 +88,7 @@ export const coreBlocks = [
 	column,
 	cover,
 	embed,
+	group,
 	file,
 	html,
 	mediaText,
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index aea0bb9e68840..3ba18dcf17143 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -21,7 +21,17 @@
 		"anchor": true,
 		"className": true,
 		"typography": {
-			"fontSize": false
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index fc192915ab368..68f73f2bcd212 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -429,7 +429,7 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
 						value={ label ? stripHTML( label ) : '' }
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 53b3fecf2c6b8..ed23540e38d95 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -384,7 +384,7 @@ export default function NavigationSubmenuEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
 						value={ label || '' }
diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js
new file mode 100644
index 0000000000000..5057978052243
--- /dev/null
+++ b/packages/block-library/src/navigation/constants.js
@@ -0,0 +1,16 @@
+export const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
+
+export const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/search',
+	'core/social-links',
+	'core/page-list',
+	'core/spacer',
+	'core/home-link',
+	'core/site-title',
+	'core/site-logo',
+	'core/navigation-submenu',
+	'core/loginout',
+];
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index f90bf313ff2f6..52760e6fdfd9b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -27,9 +27,9 @@ import {
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
-import { EntityProvider } from '@wordpress/core-data';
+import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
@@ -41,7 +41,6 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
-import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -87,7 +86,6 @@ function Navigation( {
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
-	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 } ) {
 	const {
@@ -220,42 +218,34 @@ function Navigation( {
 	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 
+	const { getNavigationFallbackId } = useSelect( coreStore );
+
+	const navigationFallbackId = ! ( ref || hasUnsavedBlocks )
+		? getNavigationFallbackId()
+		: null;
+
 	useEffect( () => {
 		// If:
 		// - there is an existing menu, OR
 		// - there are existing (uncontrolled) inner blocks
 		// ...then don't request a fallback menu.
-		if ( ref || hasUnsavedBlocks ) {
+		if ( ref || hasUnsavedBlocks || ! navigationFallbackId ) {
 			return;
 		}
 
-		apiFetch( { path: '/wp-block-editor/v1/navigation-fallback' } )
-			.then( ( fallbackNavigationMenu ) => {
-				if ( ! fallbackNavigationMenu?.id ) {
-					showNavigationMenuStatusNotice(
-						__( 'Unable to fetch a fallback Navigation Menu.' )
-					);
-					return;
-				}
-
-				/**
-				 *  This fallback displays (both in editor and on front)
-				 *  The fallback should not request a save (entity dirty state)
-				 *  nor to be undoable, hence why it is marked as non persistent
-				 */
-				__unstableMarkNextChangeAsNotPersistent();
-				setRef( fallbackNavigationMenu.id );
-			} )
-			.catch( () => {
-				showNavigationMenuStatusNotice(
-					__( 'Unable to fetch a fallback Navigation Menu.' )
-				);
-			} );
+		/**
+		 *  This fallback displays (both in editor and on front)
+		 *  The fallback should not request a save (entity dirty state)
+		 *  nor to be undoable, hence why it is marked as non persistent
+		 */
+
+		__unstableMarkNextChangeAsNotPersistent();
+		setRef( navigationFallbackId );
 	}, [
 		ref,
-		hasUnsavedBlocks,
 		setRef,
-		showNavigationMenuStatusNotice,
+		hasUnsavedBlocks,
+		navigationFallbackId,
 		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
@@ -588,60 +578,58 @@ function Navigation( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<InspectorControls group="color">
-				{ hasColorSettings && (
-					<>
-						<ColorGradientSettingsDropdown
-							__experimentalIsRenderedInSidebar
-							settings={ [
-								{
-									colorValue: textColor.color,
-									label: __( 'Text' ),
-									onColorChange: setTextColor,
-									resetAllFilter: () => setTextColor(),
-								},
-								{
-									colorValue: backgroundColor.color,
-									label: __( 'Background' ),
-									onColorChange: setBackgroundColor,
-									resetAllFilter: () => setBackgroundColor(),
-								},
-								{
-									colorValue: overlayTextColor.color,
-									label: __( 'Submenu & overlay text' ),
-									onColorChange: setOverlayTextColor,
-									resetAllFilter: () => setOverlayTextColor(),
-								},
-								{
-									colorValue: overlayBackgroundColor.color,
-									label: __( 'Submenu & overlay background' ),
-									onColorChange: setOverlayBackgroundColor,
-									resetAllFilter: () =>
-										setOverlayBackgroundColor(),
-								},
-							] }
-							panelId={ clientId }
-							{ ...colorGradientSettings }
-							gradients={ [] }
-							disableCustomGradients={ true }
-						/>
-						{ enableContrastChecking && (
-							<>
-								<ContrastChecker
-									backgroundColor={ detectedBackgroundColor }
-									textColor={ detectedColor }
-								/>
-								<ContrastChecker
-									backgroundColor={
-										detectedOverlayBackgroundColor
-									}
-									textColor={ detectedOverlayColor }
-								/>
-							</>
-						) }
-					</>
-				) }
-			</InspectorControls>
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					<ColorGradientSettingsDropdown
+						__experimentalIsRenderedInSidebar
+						settings={ [
+							{
+								colorValue: textColor.color,
+								label: __( 'Text' ),
+								onColorChange: setTextColor,
+								resetAllFilter: () => setTextColor(),
+							},
+							{
+								colorValue: backgroundColor.color,
+								label: __( 'Background' ),
+								onColorChange: setBackgroundColor,
+								resetAllFilter: () => setBackgroundColor(),
+							},
+							{
+								colorValue: overlayTextColor.color,
+								label: __( 'Submenu & overlay text' ),
+								onColorChange: setOverlayTextColor,
+								resetAllFilter: () => setOverlayTextColor(),
+							},
+							{
+								colorValue: overlayBackgroundColor.color,
+								label: __( 'Submenu & overlay background' ),
+								onColorChange: setOverlayBackgroundColor,
+								resetAllFilter: () =>
+									setOverlayBackgroundColor(),
+							},
+						] }
+						panelId={ clientId }
+						{ ...colorGradientSettings }
+						gradients={ [] }
+						disableCustomGradients={ true }
+					/>
+					{ enableContrastChecking && (
+						<>
+							<ContrastChecker
+								backgroundColor={ detectedBackgroundColor }
+								textColor={ detectedColor }
+							/>
+							<ContrastChecker
+								backgroundColor={
+									detectedOverlayBackgroundColor
+								}
+								textColor={ detectedOverlayColor }
+							/>
+						</>
+					) }
+				</InspectorControls>
+			) }
 		</>
 	);
 
diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js
index 7ad9667bb98d9..17a6896a80fdb 100644
--- a/packages/block-library/src/navigation/edit/inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/inner-blocks.js
@@ -14,22 +14,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import PlaceholderPreview from './placeholder/placeholder-preview';
-
-const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-];
-
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
+import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
 
 export default function NavigationInnerBlocks( {
 	clientId,
diff --git a/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js
similarity index 90%
rename from packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js
rename to packages/block-library/src/navigation/edit/leaf-more-menu.js
index d79f71638cbdf..f57335ce2bef6 100644
--- a/packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js
+++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js
@@ -11,13 +11,7 @@ import {
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import BlockTitle from '../block-title';
-import { useListViewContext } from './context';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -30,8 +24,7 @@ const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
 	'core/navigation-submenu',
 ];
 
-function AddSubmenuItem( { block, onClose } ) {
-	const { expandedState, expand } = useListViewContext();
+function AddSubmenuItem( { block, onClose, expandedState, expand } ) {
 	const { insertBlock, replaceBlock, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
 
@@ -88,7 +81,8 @@ function AddSubmenuItem( { block, onClose } ) {
 }
 
 export default function LeafMoreMenu( props ) {
-	const { clientId, block } = props;
+	const { block } = props;
+	const { clientId } = block;
 
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
 		useDispatch( blockEditorStore );
@@ -138,7 +132,13 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
-						<AddSubmenuItem block={ block } onClose={ onClose } />
+						<AddSubmenuItem
+							block={ block }
+							onClose={ onClose }
+							expanded
+							expandedState={ props.expandedState }
+							expand={ props.expand }
+						/>
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem
diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
index 38f97a9d8f90b..19bc18fc069d0 100644
--- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js
+++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -22,6 +22,7 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
+import LeafMoreMenu from './leaf-more-menu';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
@@ -33,7 +34,8 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
+	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
+
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
diff --git a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
index bb23db9c3bc8d..51a8d2aed7fe2 100644
--- a/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
+++ b/packages/block-library/src/navigation/edit/unsaved-inner-blocks.js
@@ -10,31 +10,10 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useNavigationMenu from '../use-navigation-menu';
 import { areBlocksDirty } from './are-blocks-dirty';
+import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants';
 
 const EMPTY_OBJECT = {};
-const DRAFT_MENU_PARAMS = [
-	'postType',
-	'wp_navigation',
-	{ status: 'draft', per_page: -1 },
-];
-
-const DEFAULT_BLOCK = {
-	name: 'core/navigation-link',
-};
-
-const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-];
 
 export default function UnsavedInnerBlocks( {
 	blocks,
@@ -90,35 +69,30 @@ export default function UnsavedInnerBlocks( {
 		}
 	);
 
-	const { isSaving, hasResolvedDraftNavigationMenus } = useSelect(
+	const { isSaving, hasResolvedAllNavigationMenus } = useSelect(
 		( select ) => {
 			if ( isDisabled ) {
 				return EMPTY_OBJECT;
 			}
 
-			const {
-				getEntityRecords,
-				hasFinishedResolution,
-				isSavingEntityRecord,
-			} = select( coreStore );
+			const { hasFinishedResolution, isSavingEntityRecord } =
+				select( coreStore );
 
 			return {
 				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
-				draftNavigationMenus: getEntityRecords(
-					// This is needed so that hasResolvedDraftNavigationMenus gives the correct status.
-					...DRAFT_MENU_PARAMS
-				),
-				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+				hasResolvedAllNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
-					DRAFT_MENU_PARAMS
+					[
+						'postType',
+						'wp_navigation',
+						{ per_page: -1, status: [ 'publish', 'draft' ] },
+					]
 				),
 			};
 		},
 		[ isDisabled ]
 	);
 
-	const { hasResolvedNavigationMenus } = useNavigationMenu();
-
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
@@ -136,8 +110,7 @@ export default function UnsavedInnerBlocks( {
 		if (
 			isDisabled ||
 			isSaving ||
-			! hasResolvedDraftNavigationMenus ||
-			! hasResolvedNavigationMenus ||
+			! hasResolvedAllNavigationMenus ||
 			! hasSelection ||
 			! innerBlocksAreDirty
 		) {
@@ -150,8 +123,7 @@ export default function UnsavedInnerBlocks( {
 		createNavigationMenu,
 		isDisabled,
 		isSaving,
-		hasResolvedDraftNavigationMenus,
-		hasResolvedNavigationMenus,
+		hasResolvedAllNavigationMenus,
 		innerBlocksAreDirty,
 		hasSelection,
 	] );
diff --git a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
index 29be140d345da..70f9a6ff4bfea 100644
--- a/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
+++ b/packages/block-library/src/navigation/edit/use-convert-classic-menu-to-block-menu.js
@@ -97,7 +97,7 @@ function useConvertClassicToBlockMenu( clientId ) {
 					'wp_navigation',
 					navigationMenu.id,
 					{
-						status: postStatus,
+						status: 'publish',
 					},
 					{ throwOnError: true }
 				);
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 5968404077576..37c760a30f959 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -67,60 +67,7 @@ function block_core_navigation_sort_menu_items_by_parent_id( $menu_items ) {
 	}
 }
 
-/**
- * Turns menu item data into a nested array of parsed blocks
- *
- * @param array $menu_items               An array of menu items that represent
- *                                        an individual level of a menu.
- * @param array $menu_items_by_parent_id  An array keyed by the id of the
- *                                        parent menu where each element is an
- *                                        array of menu items that belong to
- *                                        that parent.
- * @return array An array of parsed block data.
- */
-function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
-
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::parse_blocks_from_menu_items' );
-
-	if ( empty( $menu_items ) ) {
-		return array();
-	}
-
-	$blocks = array();
-
-	foreach ( $menu_items as $menu_item ) {
-		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
-		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
-		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
-		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
-		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
-
-		$block = array(
-			'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
-			'attrs'     => array(
-				'className'     => $class_name,
-				'description'   => $menu_item->description,
-				'id'            => $id,
-				'kind'          => $kind,
-				'label'         => $menu_item->title,
-				'opensInNewTab' => $opens_in_new_tab,
-				'rel'           => $rel,
-				'title'         => $menu_item->attr_title,
-				'type'          => $menu_item->object,
-				'url'           => $menu_item->url,
-			),
-		);
 
-		$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-			? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
-			: array();
-		$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
-
-		$blocks[] = $block;
-	}
-
-	return $blocks;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
@@ -251,159 +198,9 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
-/**
- * Get the classic navigation menu to use as a fallback.
- *
- * @return object WP_Term The classic navigation.
- */
-function block_core_navigation_get_classic_menu_fallback() {
-
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback' );
-
-	$classic_nav_menus = wp_get_nav_menus();
-
-	// If menus exist.
-	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
-		// Handles simple use case where user has a classic menu and switches to a block theme.
-
-		// Returns the menu assigned to location `primary`.
-		$locations = get_nav_menu_locations();
-		if ( isset( $locations['primary'] ) ) {
-			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
-			if ( $primary_menu ) {
-				return $primary_menu;
-			}
-		}
-
-		// Returns a menu if `primary` is its slug.
-		foreach ( $classic_nav_menus as $classic_nav_menu ) {
-			if ( 'primary' === $classic_nav_menu->slug ) {
-				return $classic_nav_menu;
-			}
-		}
-
-		// Otherwise return the most recently created classic menu.
-		usort(
-			$classic_nav_menus,
-			function( $a, $b ) {
-				return $b->term_id - $a->term_id;
-			}
-		);
-		return $classic_nav_menus[0];
-	}
-}
-
-/**
- * Converts a classic navigation to blocks.
- *
- * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
-
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback_blocks' );
-
-	// BEGIN: Code that already exists in wp_nav_menu().
-	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
-
-	// Set up the $menu_item variables.
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-
-	unset( $menu_items, $menu_item );
-
-	// END: Code that already exists in wp_nav_menu().
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
-		isset( $menu_items_by_parent_id[0] )
-			? $menu_items_by_parent_id[0]
-			: array(),
-		$menu_items_by_parent_id
-	);
-
-	return serialize_blocks( $inner_blocks );
-}
-
-/**
- * If there's a the classic menu then use it as a fallback.
- *
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_maybe_use_classic_menu_fallback() {
-
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::create_classic_menu_fallback' );
 
-	// See if we have a classic menu.
-	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
 
-	if ( ! $classic_nav_menu ) {
-		return;
-	}
 
-	// If we have a classic menu then convert it to blocks.
-	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
-
-	if ( empty( $classic_nav_menu_blocks ) ) {
-		return;
-	}
-
-	// Create a new navigation menu from the classic menu.
-	$wp_insert_post_result = wp_insert_post(
-		array(
-			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->name,
-			'post_name'    => $classic_nav_menu->slug,
-			'post_status'  => 'publish',
-			'post_type'    => 'wp_navigation',
-		),
-		true // So that we can check whether the result is an error.
-	);
-
-	if ( is_wp_error( $wp_insert_post_result ) ) {
-		return;
-	}
-
-	// Fetch the most recently published navigation which will be the classic one created above.
-	return block_core_navigation_get_most_recently_published_navigation();
-}
-
-/**
- * Finds the most recently published `wp_navigation` Post.
- *
- * @return WP_Post|null the first non-empty Navigation or null.
- */
-function block_core_navigation_get_most_recently_published_navigation() {
-
-	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_most_recently_published_navigation' );
-
-	// Default to the most recently created menu.
-	$parsed_args = array(
-		'post_type'              => 'wp_navigation',
-		'no_found_rows'          => true,
-		'update_post_meta_cache' => false,
-		'update_post_term_cache' => false,
-		'order'                  => 'DESC',
-		'orderby'                => 'date',
-		'post_status'            => 'publish',
-		'posts_per_page'         => 1, // get only the most recent.
-	);
-
-	$navigation_post = new WP_Query( $parsed_args );
-	if ( count( $navigation_post->posts ) > 0 ) {
-		return $navigation_post->posts[0];
-	}
-
-	return null;
-}
 
 /**
  * Filter out empty "null" blocks from the block list.
@@ -881,3 +678,212 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 }
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
+/**
+ * Turns menu item data into a nested array of parsed blocks
+ *
+ * @param array $menu_items               An array of menu items that represent
+ *                                        an individual level of a menu.
+ * @param array $menu_items_by_parent_id  An array keyed by the id of the
+ *                                        parent menu where each element is an
+ *                                        array of menu items that belong to
+ *                                        that parent.
+ * @return array An array of parsed block data.
+ */
+function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::parse_blocks_from_menu_items' );
+
+	if ( empty( $menu_items ) ) {
+		return array();
+	}
+
+	$blocks = array();
+
+	foreach ( $menu_items as $menu_item ) {
+		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
+		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
+		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
+		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
+		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
+
+		$block = array(
+			'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
+			'attrs'     => array(
+				'className'     => $class_name,
+				'description'   => $menu_item->description,
+				'id'            => $id,
+				'kind'          => $kind,
+				'label'         => $menu_item->title,
+				'opensInNewTab' => $opens_in_new_tab,
+				'rel'           => $rel,
+				'title'         => $menu_item->attr_title,
+				'type'          => $menu_item->object,
+				'url'           => $menu_item->url,
+			),
+		);
+
+		$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
+			? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
+			: array();
+		$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
+
+		$blocks[] = $block;
+	}
+
+	return $blocks;
+}
+
+/**
+ * Get the classic navigation menu to use as a fallback.
+ *
+ * @return object WP_Term The classic navigation.
+ */
+function block_core_navigation_get_classic_menu_fallback() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback' );
+
+	$classic_nav_menus = wp_get_nav_menus();
+
+	// If menus exist.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
+		// Handles simple use case where user has a classic menu and switches to a block theme.
+
+		// Returns the menu assigned to location `primary`.
+		$locations = get_nav_menu_locations();
+		if ( isset( $locations['primary'] ) ) {
+			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
+			if ( $primary_menu ) {
+				return $primary_menu;
+			}
+		}
+
+		// Returns a menu if `primary` is its slug.
+		foreach ( $classic_nav_menus as $classic_nav_menu ) {
+			if ( 'primary' === $classic_nav_menu->slug ) {
+				return $classic_nav_menu;
+			}
+		}
+
+		// Otherwise return the most recently created classic menu.
+		usort(
+			$classic_nav_menus,
+			function( $a, $b ) {
+				return $b->term_id - $a->term_id;
+			}
+		);
+		return $classic_nav_menus[0];
+	}
+}
+
+/**
+ * Converts a classic navigation to blocks.
+ *
+ * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback_blocks' );
+
+	// BEGIN: Code that already exists in wp_nav_menu().
+	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
+
+	// Set up the $menu_item variables.
+	_wp_menu_item_classes_by_context( $menu_items );
+
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
+	}
+
+	unset( $menu_items, $menu_item );
+
+	// END: Code that already exists in wp_nav_menu().
+
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
+	}
+
+	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
+		isset( $menu_items_by_parent_id[0] )
+			? $menu_items_by_parent_id[0]
+			: array(),
+		$menu_items_by_parent_id
+	);
+
+	return serialize_blocks( $inner_blocks );
+}
+
+/**
+ * If there's a the classic menu then use it as a fallback.
+ *
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_maybe_use_classic_menu_fallback() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::create_classic_menu_fallback' );
+
+	// See if we have a classic menu.
+	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
+
+	if ( ! $classic_nav_menu ) {
+		return;
+	}
+
+	// If we have a classic menu then convert it to blocks.
+	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
+
+	if ( empty( $classic_nav_menu_blocks ) ) {
+		return;
+	}
+
+	// Create a new navigation menu from the classic menu.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $classic_nav_menu_blocks,
+			'post_title'   => $classic_nav_menu->name,
+			'post_name'    => $classic_nav_menu->slug,
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the classic one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
+
+/**
+ * Finds the most recently published `wp_navigation` Post.
+ *
+ * @return WP_Post|null the first non-empty Navigation or null.
+ */
+function block_core_navigation_get_most_recently_published_navigation() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_most_recently_published_navigation' );
+
+	// Default to the most recently created menu.
+	$parsed_args = array(
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
+	);
+
+	$navigation_post = new WP_Query( $parsed_args );
+	if ( count( $navigation_post->posts ) > 0 ) {
+		return $navigation_post->posts[0];
+	}
+
+	return null;
+}
diff --git a/packages/block-library/src/navigation/interactivity.js b/packages/block-library/src/navigation/interactivity.js
new file mode 100644
index 0000000000000..bf537ceb803a4
--- /dev/null
+++ b/packages/block-library/src/navigation/interactivity.js
@@ -0,0 +1,144 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	effects: {
+		core: {
+			navigation: {
+				initModal: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( { context } ) => {
+					return context.core.navigation.overlay &&
+						context.core.navigation.isMenuOpen
+						? 'dialog'
+						: '';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenu: ( { context, ref } ) => {
+					context.core.navigation.isMenuOpen = true;
+					context.core.navigation.previousFocus = ref;
+					if ( context.core.navigation.overlay ) {
+						// It adds a `has-modal-open` class to the <html> root
+						document.documentElement.classList.add(
+							'has-modal-open'
+						);
+					}
+				},
+				closeMenu: ( { context } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						context.core.navigation.isMenuOpen = false;
+						if (
+							context.core.navigation.modal.contains(
+								window.document.activeElement
+							)
+						) {
+							context.core.navigation.previousFocus.focus();
+						}
+						context.core.navigation.modal = null;
+						context.core.navigation.previousFocus = null;
+						if ( context.core.navigation.overlay ) {
+							document.documentElement.classList.remove(
+								'has-modal-open'
+							);
+						}
+					}
+				},
+				handleMenuKeydown: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If Escape close the menu
+						if (
+							event?.key === 'Escape' ||
+							event?.keyCode === 27
+						) {
+							actions.core.navigation.closeMenu( { context } );
+							return;
+						}
+
+						// Trap focus if it is an overlay (main menu)
+						if (
+							context.core.navigation.overlay &&
+							( event.key === 'Tab' || event.keyCode === 9 )
+						) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If focus is outside modal, and in the document, close menu
+						// event.target === The element losing focus
+						// event.relatedTarget === The element receiving focus (if any)
+						// When focusout is outsite the document, `window.document.activeElement` doesn't change
+						if (
+							! context.core.navigation.modal.contains(
+								event.relatedTarget
+							) &&
+							event.target !== window.document.activeElement
+						) {
+							actions.core.navigation.closeMenu( { context } );
+						}
+					}
+				},
+			},
+		},
+	},
+} );
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 497a6b2c29a66..c5c4a71bf7925 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -43,7 +43,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
diff --git a/packages/block-library/src/post-author-name/edit.js b/packages/block-library/src/post-author-name/edit.js
index 1443797206231..9cd2d40799a00 100644
--- a/packages/block-library/src/post-author-name/edit.js
+++ b/packages/block-library/src/post-author-name/edit.js
@@ -69,7 +69,7 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 6500775cd5abf..96295a641a13c 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -97,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height, aspectRatio, maxWidth: '100%' },
+		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
 
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 41de46bf61013..6cb4110ee000e 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -92,7 +92,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height . 'max-width:100%;' ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
diff --git a/packages/block-library/src/post-featured-image/overlay.js b/packages/block-library/src/post-featured-image/overlay.js
index 236038897439f..ace5f8a5793b4 100644
--- a/packages/block-library/src/post-featured-image/overlay.js
+++ b/packages/block-library/src/post-featured-image/overlay.js
@@ -45,6 +45,10 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
 	return (
 		<>
 			{ !! dimRatio && (
diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
index 2143f037b27fd..96951a9e155ed 100644
--- a/packages/block-library/src/post-terms/index.php
+++ b/packages/block-library/src/post-terms/index.php
@@ -64,8 +64,8 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 function register_block_core_post_terms() {
 	$taxonomies = get_taxonomies(
 		array(
-			'public'       => true,
-			'show_in_rest' => true,
+			'publicly_queryable' => true,
+			'show_in_rest'       => true,
 		),
 		'objects'
 	);
diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
index b2455025e85a5..defc79e8dd4ca 100644
--- a/packages/block-library/src/post-title/edit.js
+++ b/packages/block-library/src/post-title/edit.js
@@ -15,6 +15,7 @@ import {
 } from '@wordpress/block-editor';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { useEntityProp } from '@wordpress/core-data';
 
 /**
@@ -27,6 +28,7 @@ export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
+	insertBlocksAfter,
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
@@ -38,6 +40,9 @@ export default function PostTitleEdit( {
 		postId
 	);
 	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
+	const onSplitAtEnd = () => {
+		insertBlocksAfter( createBlock( getDefaultBlockName() ) );
+	};
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -57,6 +62,7 @@ export default function PostTitleEdit( {
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
+					__unstableOnSplitAtEnd={ onSplitAtEnd }
 					{ ...blockProps }
 				/>
 			) : (
@@ -82,6 +88,7 @@ export default function PostTitleEdit( {
 						value={ rawTitle }
 						onChange={ setTitle }
 						__experimentalVersion={ 2 }
+						__unstableOnSplitAtEnd={ onSplitAtEnd }
 					/>
 				</TagName>
 			) : (
@@ -116,7 +123,7 @@ export default function PostTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Make title a link' ) }
diff --git a/packages/block-library/src/preformatted/edit.native.js b/packages/block-library/src/preformatted/edit.native.js
index 325e99e2a1583..1f29cddc88d9c 100644
--- a/packages/block-library/src/preformatted/edit.native.js
+++ b/packages/block-library/src/preformatted/edit.native.js
@@ -28,12 +28,10 @@ export default function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
-	const hasBaseColors =
-		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		hasBaseColors &&
+		style?.baseColors?.color &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
index f8977bd997492..d3c34ee517894 100644
--- a/packages/block-library/src/quote/transforms.js
+++ b/packages/block-library/src/quote/transforms.js
@@ -21,12 +21,6 @@ const transforms = {
 				);
 			},
 		},
-		{
-			type: 'block',
-			blocks: [ 'core/group' ],
-			transform: ( { anchor }, innerBlocks ) =>
-				createBlock( 'core/quote', { anchor }, innerBlocks ),
-		},
 		{
 			type: 'prefix',
 			prefix: '>',
diff --git a/packages/block-library/src/read-more/edit.js b/packages/block-library/src/read-more/edit.js
index db3db00f4e72a..852b4f6431bed 100644
--- a/packages/block-library/src/read-more/edit.js
+++ b/packages/block-library/src/read-more/edit.js
@@ -19,7 +19,7 @@ export default function ReadMore( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Open in new tab' ) }
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 78ff685ff01fe..5d82ced145926 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -115,10 +115,15 @@ export default function SearchEdit( {
 
 	const colorProps = useColorProps( attributes );
 	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const typographyProps = useTypographyProps(
-		attributes,
-		fluidTypographySettings
-	);
+	const layout = useSetting( 'layout' );
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index 573fa914d8e91..837cf8df688c1 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -138,7 +138,8 @@
 	}
 
 	img {
-		width: $grid-unit-50 * 0.5;
+		width: 20px;
+		min-width: 20px;
 		aspect-ratio: 1;
 		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 		border-radius: 50% !important;
diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js
index 067f4fc739203..d3224176a7e3a 100644
--- a/packages/block-library/src/site-title/edit/index.js
+++ b/packages/block-library/src/site-title/edit/index.js
@@ -109,7 +109,7 @@ export default function SiteTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Make title link to home' ) }
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 084ab1df9ac38..03bcd59573aec 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -195,7 +195,7 @@ export function SocialLinksEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Open links in new tab' ) }
@@ -214,37 +214,39 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls group="color">
-				{ colorSettings.map(
-					( { onChange, label, value, resetAllFilter } ) => (
-						<ColorGradientSettingsDropdown
-							key={ `social-links-color-${ label }` }
-							__experimentalIsRenderedInSidebar
-							settings={ [
-								{
-									colorValue: value,
-									label,
-									onColorChange: onChange,
-									isShownByDefault: true,
-									resetAllFilter,
-									enableAlpha: true,
-								},
-							] }
-							panelId={ clientId }
-							{ ...colorGradientSettings }
+			{ colorGradientSettings.hasColorsOrGradients && (
+				<InspectorControls group="color">
+					{ colorSettings.map(
+						( { onChange, label, value, resetAllFilter } ) => (
+							<ColorGradientSettingsDropdown
+								key={ `social-links-color-${ label }` }
+								__experimentalIsRenderedInSidebar
+								settings={ [
+									{
+										colorValue: value,
+										label,
+										onColorChange: onChange,
+										isShownByDefault: true,
+										resetAllFilter,
+										enableAlpha: true,
+									},
+								] }
+								panelId={ clientId }
+								{ ...colorGradientSettings }
+							/>
+						)
+					) }
+					{ ! logosOnly && (
+						<ContrastChecker
+							{ ...{
+								textColor: iconColorValue,
+								backgroundColor: iconBackgroundColorValue,
+							} }
+							isLargeText={ false }
 						/>
-					)
-				) }
-				{ ! logosOnly && (
-					<ContrastChecker
-						{ ...{
-							textColor: iconColorValue,
-							backgroundColor: iconBackgroundColorValue,
-						} }
-						isLargeText={ false }
-					/>
-				) }
-			</InspectorControls>
+					) }
+				</InspectorControls>
+			) }
 			<ul { ...innerBlocksProps } />
 		</>
 	);
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 6a4c7c2194f5f..7c8aec9e27b32 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -12,7 +12,6 @@
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
-@import "./details-summary/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";
diff --git a/packages/block-library/src/utils/interactivity/constants.js b/packages/block-library/src/utils/interactivity/constants.js
new file mode 100644
index 0000000000000..f462753c9f817
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/constants.js
@@ -0,0 +1 @@
+export const directivePrefix = 'data-wp-';
diff --git a/packages/block-library/src/utils/interactivity/directives.js b/packages/block-library/src/utils/interactivity/directives.js
new file mode 100644
index 0000000000000..d7583fa8eaa33
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/directives.js
@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import { useContext, useMemo, useEffect } from 'preact/hooks';
+import { deepSignal, peek } from 'deepsignal';
+
+/**
+ * Internal dependencies
+ */
+import { useSignalEffect } from './utils';
+import { directive } from './hooks';
+
+const isObject = ( item ) =>
+	item && typeof item === 'object' && ! Array.isArray( item );
+
+const mergeDeepSignals = ( target, source ) => {
+	for ( const k in source ) {
+		if ( typeof peek( target, k ) === 'undefined' ) {
+			target[ `$${ k }` ] = source[ `$${ k }` ];
+		} else if (
+			isObject( peek( target, k ) ) &&
+			isObject( peek( source, k ) )
+		) {
+			mergeDeepSignals(
+				target[ `$${ k }` ].peek(),
+				source[ `$${ k }` ].peek()
+			);
+		}
+	}
+};
+
+export default () => {
+	// data-wp-context
+	directive(
+		'context',
+		( {
+			directives: {
+				context: { default: context },
+			},
+			props: { children },
+			context: inherited,
+		} ) => {
+			const { Provider } = inherited;
+			const inheritedValue = useContext( inherited );
+			const value = useMemo( () => {
+				const localValue = deepSignal( context );
+				mergeDeepSignals( localValue, inheritedValue );
+				return localValue;
+			}, [ context, inheritedValue ] );
+
+			return <Provider value={ value }>{ children }</Provider>;
+		}
+	);
+
+	// data-wp-effect.[name]
+	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
+		const contextValue = useContext( context );
+		Object.values( effect ).forEach( ( path ) => {
+			useSignalEffect( () => {
+				return evaluate( path, { context: contextValue } );
+			} );
+		} );
+	} );
+
+	// data-wp-init.[name]
+	directive( 'init', ( { directives: { init }, context, evaluate } ) => {
+		const contextValue = useContext( context );
+		Object.values( init ).forEach( ( path ) => {
+			useEffect( () => {
+				return evaluate( path, { context: contextValue } );
+			}, [] );
+		} );
+	} );
+
+	// data-wp-on.[event]
+	directive( 'on', ( { directives: { on }, element, evaluate, context } ) => {
+		const contextValue = useContext( context );
+		Object.entries( on ).forEach( ( [ name, path ] ) => {
+			element.props[ `on${ name }` ] = ( event ) => {
+				evaluate( path, { event, context: contextValue } );
+			};
+		} );
+	} );
+
+	// data-wp-class.[classname]
+	directive(
+		'class',
+		( {
+			directives: { class: className },
+			element,
+			evaluate,
+			context,
+		} ) => {
+			const contextValue = useContext( context );
+			Object.keys( className )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( name ) => {
+					const result = evaluate( className[ name ], {
+						className: name,
+						context: contextValue,
+					} );
+					const currentClass = element.props.class || '';
+					const classFinder = new RegExp(
+						`(^|\\s)${ name }(\\s|$)`,
+						'g'
+					);
+					if ( ! result )
+						element.props.class = currentClass
+							.replace( classFinder, ' ' )
+							.trim();
+					else if ( ! classFinder.test( currentClass ) )
+						element.props.class = currentClass
+							? `${ currentClass } ${ name }`
+							: name;
+
+					useEffect( () => {
+						// This seems necessary because Preact doesn't change the class
+						// names on the hydration, so we have to do it manually. It doesn't
+						// need deps because it only needs to do it the first time.
+						if ( ! result ) {
+							element.ref.current.classList.remove( name );
+						} else {
+							element.ref.current.classList.add( name );
+						}
+					}, [] );
+				} );
+		}
+	);
+
+	// data-wp-bind.[attribute]
+	directive(
+		'bind',
+		( { directives: { bind }, element, context, evaluate } ) => {
+			const contextValue = useContext( context );
+			Object.entries( bind )
+				.filter( ( n ) => n !== 'default' )
+				.forEach( ( [ attribute, path ] ) => {
+					const result = evaluate( path, {
+						context: contextValue,
+					} );
+					element.props[ attribute ] = result;
+
+					useEffect( () => {
+						// This seems necessary because Preact doesn't change the attributes
+						// on the hydration, so we have to do it manually. It doesn't need
+						// deps because it only needs to do it the first time.
+						if ( result === false ) {
+							element.ref.current.removeAttribute( attribute );
+						} else {
+							element.ref.current.setAttribute(
+								attribute,
+								result === true ? '' : result
+							);
+						}
+					}, [] );
+				} );
+		}
+	);
+
+	// data-wp-ignore
+	directive(
+		'ignore',
+		( {
+			element: {
+				type: Type,
+				props: { innerHTML, ...rest },
+			},
+		} ) => {
+			// Preserve the initial inner HTML.
+			const cached = useMemo( () => innerHTML, [] );
+			return (
+				<Type
+					dangerouslySetInnerHTML={ { __html: cached } }
+					{ ...rest }
+				/>
+			);
+		}
+	);
+};
diff --git a/packages/block-library/src/utils/interactivity/hooks.js b/packages/block-library/src/utils/interactivity/hooks.js
new file mode 100644
index 0000000000000..ca3bd20964d51
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/hooks.js
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { h, options, createContext } from 'preact';
+import { useRef, useMemo } from 'preact/hooks';
+/**
+ * Internal dependencies
+ */
+import { rawStore as store } from './store';
+
+// Main context.
+const context = createContext( {} );
+
+// WordPress Directives.
+const directiveMap = {};
+export const directive = ( name, cb ) => {
+	directiveMap[ name ] = cb;
+};
+
+// Resolve the path to some property of the store object.
+const resolve = ( path, ctx ) => {
+	// If path starts with !, remove it and save a flag.
+	const hasNegationOperator =
+		path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
+	let current = { ...store, context: ctx };
+	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
+	return hasNegationOperator ? ! current : current;
+};
+
+// Generate the evaluate function.
+const getEvaluate =
+	( { ref } = {} ) =>
+	( path, extraArgs = {} ) => {
+		const value = resolve( path, extraArgs.context );
+		return typeof value === 'function'
+			? value( {
+					ref: ref.current,
+					...store,
+					...extraArgs,
+			  } )
+			: value;
+	};
+
+// Directive wrapper.
+const Directive = ( { type, directives, props: originalProps } ) => {
+	const ref = useRef( null );
+	const element = h( type, { ...originalProps, ref } );
+	const props = { ...originalProps, children: element };
+	const evaluate = useMemo( () => getEvaluate( { ref } ), [] );
+	const directiveArgs = { directives, props, element, context, evaluate };
+
+	for ( const d in directives ) {
+		const wrapper = directiveMap[ d ]?.( directiveArgs );
+		if ( wrapper !== undefined ) props.children = wrapper;
+	}
+
+	return props.children;
+};
+
+// Preact Options Hook called each time a vnode is created.
+const old = options.vnode;
+options.vnode = ( vnode ) => {
+	if ( vnode.props.__directives ) {
+		const props = vnode.props;
+		const directives = props.__directives;
+		delete props.__directives;
+		vnode.props = {
+			type: vnode.type,
+			directives,
+			props,
+		};
+		vnode.type = Directive;
+	}
+
+	if ( old ) old( vnode );
+};
diff --git a/packages/block-library/src/utils/interactivity/hydration.js b/packages/block-library/src/utils/interactivity/hydration.js
new file mode 100644
index 0000000000000..2fc34eeb64b9b
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/hydration.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { hydrate } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { toVdom, hydratedIslands } from './vdom';
+import { createRootFragment } from './utils';
+import { directivePrefix } from './constants';
+
+export const init = async () => {
+	document
+		.querySelectorAll( `[${ directivePrefix }island]` )
+		.forEach( ( node ) => {
+			if ( ! hydratedIslands.has( node ) ) {
+				const fragment = createRootFragment( node.parentNode, node );
+				const vdom = toVdom( node );
+				hydrate( vdom, fragment );
+			}
+		} );
+};
diff --git a/packages/block-library/src/utils/interactivity/index.js b/packages/block-library/src/utils/interactivity/index.js
new file mode 100644
index 0000000000000..6dbac1a45e88c
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/index.js
@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import registerDirectives from './directives';
+import { init } from './hydration';
+export { store } from './store';
+
+/**
+ * Initialize the Interactivity API.
+ */
+registerDirectives();
+
+document.addEventListener( 'DOMContentLoaded', async () => {
+	await init();
+	// eslint-disable-next-line no-console
+	console.log( 'Interactivity API started' );
+} );
diff --git a/packages/block-library/src/utils/interactivity/store.js b/packages/block-library/src/utils/interactivity/store.js
new file mode 100644
index 0000000000000..d11af90135201
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/store.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { deepSignal } from 'deepsignal';
+
+const isObject = ( item ) =>
+	item && typeof item === 'object' && ! Array.isArray( item );
+
+const deepMerge = ( target, source ) => {
+	if ( isObject( target ) && isObject( source ) ) {
+		for ( const key in source ) {
+			if ( isObject( source[ key ] ) ) {
+				if ( ! target[ key ] ) Object.assign( target, { [ key ]: {} } );
+				deepMerge( target[ key ], source[ key ] );
+			} else {
+				Object.assign( target, { [ key ]: source[ key ] } );
+			}
+		}
+	}
+};
+
+const getSerializedState = () => {
+	// TODO: change the store tag ID for a better one.
+	const storeTag = document.querySelector(
+		`script[type="application/json"]#store`
+	);
+	if ( ! storeTag ) return {};
+	try {
+		const { state } = JSON.parse( storeTag.textContent );
+		if ( isObject( state ) ) return state;
+		throw Error( 'Parsed state is not an object' );
+	} catch ( e ) {
+		// eslint-disable-next-line no-console
+		console.log( e );
+	}
+	return {};
+};
+
+const rawState = getSerializedState();
+export const rawStore = { state: deepSignal( rawState ) };
+
+export const store = ( { state, ...block } ) => {
+	deepMerge( rawStore, block );
+	deepMerge( rawState, state );
+};
diff --git a/packages/block-library/src/utils/interactivity/utils.js b/packages/block-library/src/utils/interactivity/utils.js
new file mode 100644
index 0000000000000..21d15da2f94ff
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/utils.js
@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { useRef, useEffect } from 'preact/hooks';
+import { effect } from '@preact/signals';
+
+function afterNextFrame( callback ) {
+	const done = () => {
+		window.cancelAnimationFrame( raf );
+		setTimeout( callback );
+	};
+	const raf = window.requestAnimationFrame( done );
+}
+
+// Using the mangled properties:
+// this.c: this._callback
+// this.x: this._compute
+// https://github.com/preactjs/signals/blob/main/mangle.json
+function createFlusher( compute, notify ) {
+	let flush;
+	const dispose = effect( function () {
+		flush = this.c.bind( this );
+		this.x = compute;
+		this.c = notify;
+		return compute();
+	} );
+	return { flush, dispose };
+}
+
+// Version of `useSignalEffect` with a `useEffect`-like execution. This hook
+// implementation comes from this PR:
+// https://github.com/preactjs/signals/pull/290.
+//
+// We need to include it here in this repo until the mentioned PR is merged.
+export function useSignalEffect( cb ) {
+	const callback = useRef( cb );
+	callback.current = cb;
+
+	useEffect( () => {
+		const execute = () => callback.current();
+		const notify = () => afterNextFrame( eff.flush );
+		const eff = createFlusher( execute, notify );
+		return eff.dispose;
+	}, [] );
+}
+
+// For wrapperless hydration.
+// See https://gist.github.com/developit/f4c67a2ede71dc2fab7f357f39cff28c
+export const createRootFragment = ( parent, replaceNode ) => {
+	replaceNode = [].concat( replaceNode );
+	const s = replaceNode[ replaceNode.length - 1 ].nextSibling;
+	function insert( c, r ) {
+		parent.insertBefore( c, r || s );
+	}
+	return ( parent.__k = {
+		nodeType: 1,
+		parentNode: parent,
+		firstChild: replaceNode[ 0 ],
+		childNodes: replaceNode,
+		insertBefore: insert,
+		appendChild: insert,
+		removeChild( c ) {
+			parent.removeChild( c );
+		},
+	} );
+};
diff --git a/packages/block-library/src/utils/interactivity/vdom.js b/packages/block-library/src/utils/interactivity/vdom.js
new file mode 100644
index 0000000000000..07640319b88a8
--- /dev/null
+++ b/packages/block-library/src/utils/interactivity/vdom.js
@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { h } from 'preact';
+/**
+ * Internal dependencies
+ */
+import { directivePrefix as p } from './constants';
+
+const ignoreAttr = `${ p }ignore`;
+const islandAttr = `${ p }island`;
+const directiveParser = new RegExp( `${ p }([^.]+)\.?(.*)$` );
+
+export const hydratedIslands = new WeakSet();
+
+// Recursive function that transforms a DOM tree into vDOM.
+export function toVdom( root ) {
+	const treeWalker = document.createTreeWalker(
+		root,
+		205 // ELEMENT + TEXT + COMMENT + CDATA_SECTION + PROCESSING_INSTRUCTION
+	);
+
+	function walk( node ) {
+		const { attributes, nodeType } = node;
+
+		if ( nodeType === 3 ) return [ node.data ];
+		if ( nodeType === 4 ) {
+			const next = treeWalker.nextSibling();
+			node.replaceWith( new window.Text( node.nodeValue ) );
+			return [ node.nodeValue, next ];
+		}
+		if ( nodeType === 8 || nodeType === 7 ) {
+			const next = treeWalker.nextSibling();
+			node.remove();
+			return [ null, next ];
+		}
+
+		const props = {};
+		const children = [];
+		const directives = {};
+		let hasDirectives = false;
+		let ignore = false;
+		let island = false;
+
+		for ( let i = 0; i < attributes.length; i++ ) {
+			const n = attributes[ i ].name;
+			if ( n[ p.length ] && n.slice( 0, p.length ) === p ) {
+				if ( n === ignoreAttr ) {
+					ignore = true;
+				} else if ( n === islandAttr ) {
+					island = true;
+				} else {
+					hasDirectives = true;
+					let val = attributes[ i ].value;
+					try {
+						val = JSON.parse( val );
+					} catch ( e ) {}
+					const [ , prefix, suffix ] = directiveParser.exec( n );
+					directives[ prefix ] = directives[ prefix ] || {};
+					directives[ prefix ][ suffix || 'default' ] = val;
+				}
+			} else if ( n === 'ref' ) {
+				continue;
+			}
+			props[ n ] = attributes[ i ].value;
+		}
+
+		if ( ignore && ! island )
+			return [
+				h( node.localName, {
+					...props,
+					innerHTML: node.innerHTML,
+					__directives: { ignore: true },
+				} ),
+			];
+		if ( island ) hydratedIslands.add( node );
+
+		if ( hasDirectives ) props.__directives = directives;
+
+		let child = treeWalker.firstChild();
+		if ( child ) {
+			while ( child ) {
+				const [ vnode, nextChild ] = walk( child );
+				if ( vnode ) children.push( vnode );
+				child = nextChild || treeWalker.nextSibling();
+			}
+			treeWalker.parentNode();
+		}
+
+		return [ h( node.localName, props, children ) ];
+	}
+
+	return walk( treeWalker.currentNode );
+}
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 86f4fd920b501..62600d922db6b 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index e582cc5a87364..92c0b6284a25b 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index ad15951377295..fdf1e60920a74 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index 883ac7418727e..374856b5c04ea 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 95d62825ccec7..4691b358c2fef 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.10.0 (2023-05-10)
+
 ## 12.9.0 (2023-04-26)
 
 ## 12.8.0 (2023-04-12)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index 822eea532c929..91cfec30c6a72 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -5,7 +5,7 @@
 For more context, refer to [_What Are Little Blocks Made Of?_](https://make.wordpress.org/design/2017/01/25/what-are-little-blocks-made-of/) from the [Make WordPress Design](https://make.wordpress.org/design/) blog.
 
 <div class="callout callout-alert">
-[Learn how to create your first block](https://developer.wordpress.org/block-editor/getting-started/create-block/) for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
+<a href="https://developer.wordpress.org/block-editor/getting-started/create-block/">Learn how to create your first block</a> for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all you need to know to get started with creating blocks.
 </div>
 
 ## Installation
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 4deb3a06d6690..39f31a7f0d86d 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "12.9.0",
+	"version": "12.10.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/parser/get-block-attributes.js b/packages/blocks/src/api/parser/get-block-attributes.js
index ffa67c11250c2..cc81c10800552 100644
--- a/packages/blocks/src/api/parser/get-block-attributes.js
+++ b/packages/blocks/src/api/parser/get-block-attributes.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { parse as hpqParse } from 'hpq';
-import { mapValues } from 'lodash';
 import memoize from 'memize';
 
 /**
@@ -217,9 +216,13 @@ export const matcherFromSource = memoize( ( sourceConfig ) => {
 		case 'node':
 			return node( sourceConfig.selector );
 		case 'query':
-			const subMatchers = mapValues(
-				sourceConfig.query,
-				matcherFromSource
+			const subMatchers = Object.fromEntries(
+				Object.entries( sourceConfig.query ).map(
+					( [ key, subSourceConfig ] ) => [
+						key,
+						matcherFromSource( subSourceConfig ),
+					]
+				)
 			);
 			return query( sourceConfig.selector, subMatchers );
 		case 'tag':
@@ -275,8 +278,13 @@ export function getBlockAttributes(
 	const doc = parseHtml( innerHTML );
 	const blockType = normalizeBlockType( blockTypeOrName );
 
-	const blockAttributes = mapValues( blockType.attributes, ( schema, key ) =>
-		getBlockAttribute( key, schema, doc, attributes, innerHTML )
+	const blockAttributes = Object.fromEntries(
+		Object.entries( blockType.attributes ?? {} ).map(
+			( [ key, schema ] ) => [
+				key,
+				getBlockAttribute( key, schema, doc, attributes, innerHTML ),
+			]
+		)
 	);
 
 	return applyFilters(
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index 76972a950deb1..d8f76e00fc71d 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -123,13 +118,11 @@ export function blockStyles( state = {}, action ) {
 					).map( ( [ name, blockType ] ) => [
 						name,
 						getUniqueItemsByName( [
-							...get( blockType, [ 'styles' ], [] ).map(
-								( style ) => ( {
-									...style,
-									source: 'block',
-								} )
-							),
-							...get( state, [ blockType.name ], [] ).filter(
+							...( blockType.styles ?? [] ).map( ( style ) => ( {
+								...style,
+								source: 'block',
+							} ) ),
+							...( state[ blockType.name ] ?? [] ).filter(
 								( { source } ) => 'block' !== source
 							),
 						] ),
@@ -140,17 +133,15 @@ export function blockStyles( state = {}, action ) {
 			return {
 				...state,
 				[ action.blockName ]: getUniqueItemsByName( [
-					...get( state, [ action.blockName ], [] ),
+					...( state[ action.blockName ] ?? [] ),
 					...action.styles,
 				] ),
 			};
 		case 'REMOVE_BLOCK_STYLES':
 			return {
 				...state,
-				[ action.blockName ]: get(
-					state,
-					[ action.blockName ],
-					[]
+				[ action.blockName ]: (
+					state[ action.blockName ] ?? []
 				).filter(
 					( style ) => action.styleNames.indexOf( style.name ) === -1
 				),
@@ -180,13 +171,13 @@ export function blockVariations( state = {}, action ) {
 						return [
 							name,
 							getUniqueItemsByName( [
-								...get( blockType, [ 'variations' ], [] ).map(
+								...( blockType.variations ?? [] ).map(
 									( variation ) => ( {
 										...variation,
 										source: 'block',
 									} )
 								),
-								...get( state, [ blockType.name ], [] ).filter(
+								...( state[ blockType.name ] ?? [] ).filter(
 									( { source } ) => 'block' !== source
 								),
 							] ),
@@ -198,17 +189,15 @@ export function blockVariations( state = {}, action ) {
 			return {
 				...state,
 				[ action.blockName ]: getUniqueItemsByName( [
-					...get( state, [ action.blockName ], [] ),
+					...( state[ action.blockName ] ?? [] ),
 					...action.variations,
 				] ),
 			};
 		case 'REMOVE_BLOCK_VARIATIONS':
 			return {
 				...state,
-				[ action.blockName ]: get(
-					state,
-					[ action.blockName ],
-					[]
+				[ action.blockName ]: (
+					state[ action.blockName ] ?? []
 				).filter(
 					( variation ) =>
 						action.variationNames.indexOf( variation.name ) === -1
@@ -269,7 +258,10 @@ export function categories( state = DEFAULT_CATEGORIES, action ) {
 		case 'SET_CATEGORIES':
 			return action.categories || [];
 		case 'UPDATE_CATEGORY': {
-			if ( ! action.category || isEmpty( action.category ) ) {
+			if (
+				! action.category ||
+				! Object.keys( action.category ).length
+			) {
 				return state;
 			}
 			const categoryToChange = state.find(
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index b2cf832fe53a1..269663e99d477 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.16.0 (2023-05-10)
+
 ## 5.15.0 (2023-04-26)
 
 ## 5.14.0 (2023-04-12)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index a303f0e529599..cebb63c17fc44 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index dd97138ee4005..3c9f36879bc98 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.4.0 (2023-05-10)
+
 ## 0.3.0 (2023-04-26)
 
 ## 0.2.0 (2023-04-12)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 662e8dd6a6ace..dff5562c57d7b 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index f65b2143124a5..d7bafca0a3931 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -139,13 +139,14 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const [ open, setOpen ] = useState( false );
-	const { groups } = useSelect( ( select ) => {
-		const { getGroups } = select( commandsStore );
+	const { groups, isOpen } = useSelect( ( select ) => {
+		const { getGroups, isOpen: _isOpen } = select( commandsStore );
 		return {
 			groups: getGroups(),
+			isOpen: _isOpen(),
 		};
 	}, [] );
+	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
 	const commandMenuInput = useRef();
 
@@ -165,7 +166,11 @@ export function CommandMenu() {
 		'core/commands',
 		( event ) => {
 			event.preventDefault();
-			setOpen( ( prevOpen ) => ! prevOpen );
+			if ( isOpen ) {
+				close();
+			} else {
+				open();
+			}
 		},
 		{
 			bindGlobal: true,
@@ -180,19 +185,19 @@ export function CommandMenu() {
 			} ) ),
 		[]
 	);
-	const close = () => {
+	const closeAndReset = () => {
 		setSearch( '' );
-		setOpen( false );
+		close();
 	};
 
 	useEffect( () => {
 		// Focus the command menu input when mounting the modal.
-		if ( open ) {
+		if ( isOpen ) {
 			commandMenuInput.current.focus();
 		}
-	}, [ open ] );
+	}, [ isOpen ] );
 
-	if ( ! open ) {
+	if ( ! isOpen ) {
 		return false;
 	}
 	const isLoading = Object.values( loaders ).some( Boolean );
@@ -201,7 +206,7 @@ export function CommandMenu() {
 		<Modal
 			className="commands-command-menu"
 			overlayClassName="commands-command-menu__overlay"
-			onRequestClose={ close }
+			onRequestClose={ closeAndReset }
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
@@ -227,7 +232,7 @@ export function CommandMenu() {
 									group={ group }
 									search={ search }
 									setLoader={ setLoader }
-									close={ close }
+									close={ closeAndReset }
 								/>
 							) ) }
 						</Command.List>
diff --git a/packages/commands/src/private-apis.js b/packages/commands/src/private-apis.js
index ef81227bdb720..a116c089fb841 100644
--- a/packages/commands/src/private-apis.js
+++ b/packages/commands/src/private-apis.js
@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
  */
 import { default as useCommand } from './hooks/use-command';
 import { default as useCommandLoader } from './hooks/use-command-loader';
+import { store } from './store';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
 lock( privateApis, {
 	useCommand,
 	useCommandLoader,
+	store,
 } );
diff --git a/packages/commands/src/store/actions.js b/packages/commands/src/store/actions.js
index 4ff9ca54e2d10..66d3c62af5706 100644
--- a/packages/commands/src/store/actions.js
+++ b/packages/commands/src/store/actions.js
@@ -91,3 +91,25 @@ export function unregisterCommandLoader( name, group ) {
 		group,
 	};
 }
+
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}
diff --git a/packages/commands/src/store/reducer.js b/packages/commands/src/store/reducer.js
index a94fe8041113d..df2e4bfdc7a79 100644
--- a/packages/commands/src/store/reducer.js
+++ b/packages/commands/src/store/reducer.js
@@ -74,9 +74,29 @@ function commandLoaders( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the command center open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isOpen( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN':
+			return true;
+		case 'CLOSE':
+			return false;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
+	isOpen,
 } );
 
 export default reducer;
diff --git a/packages/commands/src/store/selectors.js b/packages/commands/src/store/selectors.js
index b8ad97fb0d496..4b2d9cc814781 100644
--- a/packages/commands/src/store/selectors.js
+++ b/packages/commands/src/store/selectors.js
@@ -18,6 +18,7 @@ export const getGroups = createSelector(
 		),
 	( state ) => [ state.commands, state.commandLoaders ]
 );
+
 export const getCommands = createSelector(
 	( state, group ) => Object.values( state.commands[ group ] ?? {} ),
 	( state, group ) => [ state.commands[ group ] ]
@@ -27,3 +28,7 @@ export const getCommandLoaders = createSelector(
 	( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),
 	( state, group ) => [ state.commandLoaders[ group ] ]
 );
+
+export function isOpen( state ) {
+	return state.isOpen;
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4b39d87de055f..d67bb0fc303cc 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,22 +2,40 @@
 
 ## Unreleased
 
--   `CheckboxControl`, `CustomGradientPicker`, `FormToggle`, : Refactor and correct the focus style for consistency ([#50127](https://github.com/WordPress/gutenberg/pull/50127)).
+## 24.0.0 (2023-05-10)
+
+### Breaking Changes
+
+-   `onDragStart` in `<Draggable>` is now a synchronous function to allow setting additional data for `event.dataTransfer` ([#49673](https://github.com/WordPress/gutenberg/pull/49673)).
+
+### Bug Fix
+
+-   `NavigableContainer`: do not trap focus in `TabbableContainer` ([#49846](https://github.com/WordPress/gutenberg/pull/49846)).
 
 ### Internal
 
 -   `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)).
 -   `ToolbarItem`: Convert to TypeScript ([#49190](https://github.com/WordPress/gutenberg/pull/49190)).
 -   Move rich-text related types to the rich-text package ([#49651](https://github.com/WordPress/gutenberg/pull/49651)).
--   `SlotFill`: simplified the implementation and removed unused code ([#50098](https://github.com/WordPress/gutenberg/pull/50098) and [#50133](https://github.com/WordPress/gutenberg/pull/50133))
+-   `SlotFill`: simplified the implementation and removed unused code ([#50098](https://github.com/WordPress/gutenberg/pull/50098) and [#50133](https://github.com/WordPress/gutenberg/pull/50133)).
 
 ### Documentation
 
 -   `TreeGrid`: Update docs with `data-expanded` attribute usage ([#50026](https://github.com/WordPress/gutenberg/pull/50026)).
+-   Consolidate multiple versions of `README` and `CONTRIBUTING` docs, and add them to Storybook ([#50226](https://github.com/WordPress/gutenberg/pull/50226)).
+-   `DimensionControl`: Use WordPress package instead of react in code example ([#50435](https://github.com/WordPress/gutenberg/pull/50435)).
 
 ### Enhancements
 
+-   `FormTokenField`, `ComboboxControl`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size, superseding the `__next36pxDefaultSize` prop ([#50261](https://github.com/WordPress/gutenberg/pull/50261)).
 -   `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)).
+-   `Button`: Add `__next40pxDefaultSize` prop to opt into the new 40px default size ([#50254](https://github.com/WordPress/gutenberg/pull/50254)).
+-   `PaletteEdit`: Allow custom popover configuration ([#49975](https://github.com/WordPress/gutenberg/pull/49975)).
+-   Change the default color scheme to use the new WP Blueberry color. See PR description for instructions on how to restore the previous color scheme when using in a non-WordPress context ([#50193](https://github.com/WordPress/gutenberg/pull/50193)).
+-   `CheckboxControl`, `CustomGradientPicker`, `FormToggle`, : Refactor and correct the focus style for consistency ([#50127](https://github.com/WordPress/gutenberg/pull/50127)).
+-   `Button`, update spacing values in `has-text has-icon` buttons. ([#50277](https://github.com/WordPress/gutenberg/pull/50277)).
+-   `Button`, remove custom padding applied to `tertiary` variant. ([#50276](https://github.com/WordPress/gutenberg/pull/50276)).
+-   `Modal`: Correct padding for title less confirm variant. ([#50283](https://github.com/WordPress/gutenberg/pull/50283)).
 
 ## 23.9.0 (2023-04-26)
 
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 39945531435da..8464a4a732744 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -7,7 +7,7 @@ The following is a set of guidelines for contributing to the `@wordpress/compone
 This set of guidelines should apply especially to newly introduced components. In fact, while these guidelines should also be retroactively applied to existing components, it is sometimes impossible to do so for legacy/compatibility reasons.
 
 For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
-
+- [Introducing new components](#introducing-new-components)
 - [Compatibility](#compatibility)
 - [Compound components](#compound-components)
 - [Components & Hooks](#components--hooks)
@@ -21,6 +21,70 @@ For an example of a component that follows these requirements, take a look at [`
 - [Folder structure](#folder-structure)
 - [TypeScript migration guide](#refactoring-a-component-to-typescript)
 
+## Introducing new components
+
+### Does it belong in the component library?
+
+A component library should include components that are generic and flexible enough to work across a variety of products. It should include what’s shared across many products and omit what’s not.
+
+To determine if a component should be added, ask yourself:
+
+-   Could this component be used by other products/plugins?
+-   Does the new component overlap (in functionality or visual design) with any existing components?
+-   How much effort will be required to make and maintain?
+-   Is there a clear purpose for the component?
+
+Here’s a flowchart that can help determine if a new component is necessary:
+
+[![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)](https://coggle.it/diagram/WtUSrld3uAYZHsn-/t/new-ui-component/992b38cbe685d897b4aec6d0dd93cc4b47c06e0d4484eeb0d7d9a47fb2c48d94)
+
+### First steps
+
+If you have a component you'd like added or changed, start by opening a GitHub issue. Include a detailed description in which you:
+
+-   Explain the rationale
+-   Detail the intended behavior
+-   Clarify whether it’s a variation of an existing component, or a new asset
+-   Include mockups of any fidelity (optional)
+-   Include any inspirations from other products (optional)
+
+This issue will be used to discuss the proposed changes and track progress. Reviewers start by discussing the proposal to determine if it's appropriate for WordPress Components, or if there's overlap with an existing component.
+
+It’s encouraged to surface works-in-progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to pick up where you left off.
+
+### Next steps
+
+Once the team has discussed and approved the change, it's time to start implementing it.
+
+1. **Provide a rationale**: Explain how your component will add value to the system and the greater product ecosystem. Be sure to include any user experience and interaction descriptions.
+2. **Draft documentation**: New components need development, design, and accessibility guidelines. Additionally, if your change adds additional behavior or expands a component’s features, those changes will need to be fully documented as well. Read through existing component documentation for examples. Start with a rough draft, and reviewers will help polish documentation.
+3. **Provide working code**: The component or enhancement must be built in React. See the [developer contribution guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/README.md).
+4. **Create a design spec**: Create sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. [Figma automatically does this for you](https://help.figma.com/article/32-developer-handoff).
+
+Remember, it’s unlikely that all parts will be done by one person. Contribute where you can, and others will help.
+
+### Component refinement
+
+Before a component is published it will need to be fine-tuned:
+
+1. **Expand** the features of the component to a minimum. Agree on what features should be included.
+2. **Reduce** scope and leave off features lacking consensus.
+3. **Quality assurance**: each contribution must adhere to system standards.
+
+#### Quality assurance
+
+To ensure quality, each component should be tested. The testing process should be done during the development of the component and before the component is published.
+
+-   **Accessibility**: Has the design and implementation accounted for accessibility? Please use the [WordPress accessibility guidelines](https://make.wordpress.org/accessibility/handbook/best-practices/). You must use the "Needs Accessibility Feedback" label and get a review from the accessibility team. It's best to request a review early (at the documentation stage) in order to ensure the component is designed inclusively from the outset.
+-   **Visual quality**: Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variables, and does it follow [visual guidelines](https://make.wordpress.org/design/handbook/design-guide/)? You must use the "Needs Design Feedback" label and get a review from the design team.
+-   **Documentation**: Ensure that the component has proper documentation for development, design, and accessibility.
+-   **Sufficient states & variations**: Does it cover all the necessary variations (primary, secondary, dense, etc.) and states (default, hover, active, disabled, loading, etc.), within the intended scope?
+-   **Functionality**: Do all behaviors function as expected?
+-   **Responsiveness**: Does it incorporate responsive behaviors as needed? Is the component designed from a mobile-first perspective? Do all touch interactions work as expected?
+-   **Content resilience**: Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? How long can labels be, and what happens when you run out of space?
+-   **Composability**: Does it fit well when placed next to or layered with other components to form a larger composition?
+-   **Browser support**: Has the component visual quality and accuracy been checked across Safari, Chrome, Firefox, IE, etc? Please adhere to our [browser support requirements](https://github.com/WordPress/gutenberg/blob/HEAD/packages/browserslist-config/index.js).
+
 ## Compatibility
 
 The `@wordpress/components` package includes components that are relied upon by many developers across different projects. It is, therefore, very important to avoid introducing breaking changes.
diff --git a/packages/components/README.md b/packages/components/README.md
index 58df3ed873679..b0ad75ac0d08f 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -4,8 +4,6 @@ This package includes a library of generic WordPress components to be used for c
 
 ## Installation
 
-Install the module
-
 ```bash
 npm install @wordpress/components --save
 ```
@@ -27,7 +25,7 @@ export default function MyButton() {
 }
 ```
 
-Many components include CSS to add style, you will need to add in order to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
+Many components include CSS to add styles, which you will need to load in order for them to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies.
 
 In non-WordPress projects, link to the `build-style/style.css` file directly, it is located at `node_modules/@wordpress/components/build-style/style.css`.
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 828d7ee34f5b3..88446b1a9fb18 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "23.9.0",
+	"version": "24.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/src/CONTRIBUTING.md b/packages/components/src/CONTRIBUTING.md
deleted file mode 100644
index 2bbc78a44fe5e..0000000000000
--- a/packages/components/src/CONTRIBUTING.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# Contributing components
-
-You can contribute by adding, modifying, or deprecating components, as well as helping with design, development, and documentation.
-
-## Does it belong in the component library?
-
-A component library should include components that are generic and flexible enough to work across a variety of products. It should include what’s shared across many products and omit what’s not.
-
-To determine if a component should be added, ask yourself:
-
--   Could this component be used by other products/plugins?
--   Does the new component overlap (in functionality or visual design) with any existing components?
--   How much effort will be required to make and maintain?
--   Is there a clear purpose for the component?
-
-Here’s a flowchart that can help determine if a new component is necessary:
-
-[![New component flowchart](https://wordpress.org/gutenberg/files/2019/07/New_component_flowchart.png)](https://coggle.it/diagram/WtUSrld3uAYZHsn-/t/new-ui-component/992b38cbe685d897b4aec6d0dd93cc4b47c06e0d4484eeb0d7d9a47fb2c48d94)
-
-## First steps
-
-If you have a component you'd like added or changed, start by opening a GitHub issue. Include a detailed description in which you:
-
--   Explain the rationale
--   Detail the intended behavior
--   Clarify whether it’s a variation of an existing component, or a new asset
--   Include mockups of any fidelity (optional)
--   Include any inspirations from other products (optional)
-
-This issue will be used to discuss the proposed changes and track progress. Reviewers start by discussing the proposal to determine if it's appropriate for WordPress Components, or if there's overlap with an existing component.
-
-It’s encouraged to surface works-in-progress. If you’re not able to complete all of the parts yourself, someone in the community may be able to pick up where you left off.
-
-## Next steps
-
-Once the team has discussed and approved the change, it's time to start implementing it.
-
-1. **Provide a rationale**: Explain how your component will add value to the system and the greater product ecosystem. Be sure to include any user experience and interaction descriptions.
-2. **Draft documentation**: New components need development, design, and accessibility guidelines. Additionally, if your change adds additional behavior or expands a component’s features, those changes will need to be fully documented as well. Read through existing component documentation for examples. Start with a rough draft, and reviewers will help polish documentation.
-3. **Provide working code**: The component or enhancement must be built in React. See the [developer contribution guidelines](https://github.com/WordPress/gutenberg/blob/HEAD/docs/contributors/code/README.md).
-4. **Create a design spec**: Create sizing and styling annotations for all aspects of the component. This spec should provide a developer with everything they need to create the design in code. [Figma automatically does this for you](https://help.figma.com/article/32-developer-handoff).
-5. **Create a Figma component**: Any new components or changes to existing components will be mirrored in the [WordPress Components Figma library](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=735%3A0), so we’ll need to update the Figma library and publish the changes. Please follow the [guidelines](https://www.figma.com/file/ZtN5xslEVYgzU7Dd5CxgGZwq/WordPress-Components?node-id=746%3A38) for contributing to the Figma libraries.
-
-Remember, it’s unlikely that all parts will be done by one person. Contribute where you can, and others will help.
-
-## Component refinement
-
-Before a component is published it will need to be fine-tuned:
-
-1. **Expand** the features of the component to a minimum. Agree on what features should be included.
-2. **Reduce** scope and leave off features lacking consensus.
-3. **Quality assurance**: each contribution must adhere to system standards.
-
-### Quality assurance
-
-To ensure quality, each component should be tested. The testing process should be done during the development of the component and before the component is published.
-
--   **Accessibility**: Has the design and implementation accounted for accessibility? Please use the [WordPress accessibility guidelines](https://make.wordpress.org/accessibility/handbook/best-practices/). You must use the "Needs Accessibility Feedback" label and get a review from the accessibility team. It's best to request a review early (at the documentation stage) in order to ensure the component is designed inclusively from the outset.
--   **Visual quality**: Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variables, and does it follow [visual guidelines](https://make.wordpress.org/design/handbook/design-guide/)? You must use the "Needs Design Feedback" label and get a review from the design team.
--   **Documentation**: Ensure that the component has proper documentation for development, design, and accessibility.
--   **Sufficient states & variations**: Does it cover all the necessary variations (primary, secondary, dense, etc.) and states (default, hover, active, disabled, loading, etc.), within the intended scope?
--   **Functionality**: Do all behaviors function as expected?
--   **Responsiveness**: Does it incorporate responsive behaviors as needed? Is the component designed from a mobile-first perspective? Do all touch interactions work as expected?
--   **Content resilience**: Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? How long can labels be, and what happens when you run out of space?
--   **Composability**: Does it fit well when placed next to or layered with other components to form a larger composition?
--   **Browser support**: Has the component visual quality and accuracy been checked across Safari, Chrome, Firefox, IE, etc? Please adhere to our [browser support requirements](https://github.com/WordPress/gutenberg/blob/HEAD/packages/browserslist-config/index.js).
-
-## Deprecation
-
-A component or prop may need deprecation if it's renamed or removed.
-
-At no point does the deprecated component/prop become unavailable. Instead, the commitment to support it stops. The following steps are needed to deprecate a component:
-
-1. Communicate intent via regular channels.
-    1. Describe reasoning for deprecation.
-    2. Decide on a timeline.
-2. Ensure backwards compatibility to keep it available.
-3. Clearly mark the component as deprecated in documentation and other channels.
diff --git a/packages/components/src/README.md b/packages/components/src/README.md
deleted file mode 100644
index af17e9b3cafa8..0000000000000
--- a/packages/components/src/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Components
-
-This directory includes a library of generic React components to be used for creating common UI elements shared between screens and features of the WordPress dashboard.
-
-## Usage
-
-Within Gutenberg, these components can be accessed by importing from the `components` root directory:
-
-```jsx
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
-
-const MyButton = () => {
-	return <Button>Click Me!</Button>;
-};
-```
-
-Many components also include styles which will need to be output in order to appear correctly. Within WordPress, you can [add the `wp-components` stylesheet as a dependency of your plugin's stylesheet](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters). In other projects, you can link to the `build-style/style.css` file directly.
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index 5ffc22d3020e1..098f6eaac3b1c 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -75,6 +75,7 @@ export function UnforwardedButton(
 	ref: ForwardedRef< any >
 ) {
 	const {
+		__next40pxDefaultSize,
 		isSmall,
 		isPressed,
 		isBusy,
@@ -115,6 +116,7 @@ export function UnforwardedButton(
 			children?.[ 0 ]?.props?.className !== 'components-tooltip' );
 
 	const classes = classnames( 'components-button', className, {
+		'is-next-40px-default-size': __next40pxDefaultSize,
 		'is-secondary': variant === 'secondary',
 		'is-primary': variant === 'primary',
 		'is-small': isSmall,
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index e114756f9614f..3ec844906b039 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -18,6 +18,10 @@
 	border-radius: $radius-block-ui;
 	color: $components-color-foreground;
 
+	&.is-next-40px-default-size {
+		height: $button-size-next-default-40px;
+	}
+
 	&[aria-expanded="true"],
 	&:hover {
 		color: $components-color-accent;
@@ -160,13 +164,14 @@
 		white-space: nowrap;
 		color: $components-color-accent;
 		background: transparent;
-		padding: $grid-unit-15 * 0.5; // This reduces the horizontal padding on tertiary/text buttons, so as to space them optically.
 
 		&:hover:not(:disabled) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		}
 
 		&:active:not(:disabled) {
+			// TODO: Prepare for theming (https://github.com/WordPress/gutenberg/pull/45466/files#r1030872724)
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 		}
 
@@ -284,6 +289,10 @@
 		min-width: $button-size;
 		justify-content: center;
 
+		&.is-next-40px-default-size {
+			min-width: $button-size-next-default-40px;
+		}
+
 		.dashicon {
 			display: inline-block;
 			flex: 0 0 auto;
@@ -293,11 +302,9 @@
 
 		&.has-text {
 			justify-content: start;
-			padding-right: 12px;
-		}
-
-		&.has-text svg {
-			margin-right: $grid-unit-10;
+			padding-right: $grid-unit-15;
+			padding-left: $grid-unit-10;
+			gap: $grid-unit-05;
 		}
 
 		&.has-text .dashicon {
diff --git a/packages/components/src/button/types.ts b/packages/components/src/button/types.ts
index 7bddf3b9d8f6f..57e2a3df6ee61 100644
--- a/packages/components/src/button/types.ts
+++ b/packages/components/src/button/types.ts
@@ -18,6 +18,13 @@ export type ButtonAsButtonProps = BaseButtonProps & _ButtonProps;
 export type ButtonAsAnchorProps = BaseButtonProps & AnchorProps;
 
 type BaseButtonProps = {
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * The button's children.
 	 */
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index 07bc89a5df482..eb8ae89c0971e 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -32,6 +32,7 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -104,23 +105,28 @@ const getIndexOfMatchingSuggestion = (
  * }
  * ```
  */
-function ComboboxControl( {
-	__nextHasNoMarginBottom = false,
-	__next36pxDefaultSize = false,
-	value: valueProp,
-	label,
-	options,
-	onChange: onChangeProp,
-	onFilterValueChange = noop,
-	hideLabelFromVision,
-	help,
-	allowReset = true,
-	className,
-	messages = {
-		selected: __( 'Item selected.' ),
-	},
-	__experimentalRenderItem,
-}: ComboboxControlProps ) {
+function ComboboxControl( props: ComboboxControlProps ) {
+	const {
+		__nextHasNoMarginBottom = false,
+		__next40pxDefaultSize = false,
+		value: valueProp,
+		label,
+		options,
+		onChange: onChangeProp,
+		onFilterValueChange = noop,
+		hideLabelFromVision,
+		help,
+		allowReset = true,
+		className,
+		messages = {
+			selected: __( 'Item selected.' ),
+		},
+		__experimentalRenderItem,
+	} = useDeprecated36pxDefaultSizeProp< ComboboxControlProps >(
+		props,
+		'wp.components.ComboboxControl'
+	);
+
 	const [ value, setValue ] = useControlledValue( {
 		value: valueProp,
 		onChange: onChangeProp,
@@ -314,7 +320,7 @@ function ComboboxControl( {
 					onKeyDown={ onKeyDown }
 				>
 					<InputWrapperFlex
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					>
 						<FlexBlock>
 							<TokenInput
diff --git a/packages/components/src/combobox-control/stories/index.tsx b/packages/components/src/combobox-control/stories/index.tsx
index ca30b62d2d288..fe6fe2a9ef9ef 100644
--- a/packages/components/src/combobox-control/stories/index.tsx
+++ b/packages/components/src/combobox-control/stories/index.tsx
@@ -65,7 +65,6 @@ const Template: ComponentStory< typeof ComboboxControl > = ( {
 };
 export const Default = Template.bind( {} );
 Default.args = {
-	__next36pxDefaultSize: false,
 	allowReset: false,
 	label: 'Select a country',
 	options: countryOptions,
diff --git a/packages/components/src/combobox-control/styles.ts b/packages/components/src/combobox-control/styles.ts
index 25c71788fd602..de1ed2fb76677 100644
--- a/packages/components/src/combobox-control/styles.ts
+++ b/packages/components/src/combobox-control/styles.ts
@@ -12,9 +12,9 @@ import { space } from '../ui/utils/space';
 import type { ComboboxControlProps } from './types';
 
 const deprecatedDefaultSize = ( {
-	__next36pxDefaultSize,
-}: Pick< ComboboxControlProps, '__next36pxDefaultSize' > ) =>
-	! __next36pxDefaultSize &&
+	__next40pxDefaultSize,
+}: Pick< ComboboxControlProps, '__next40pxDefaultSize' > ) =>
+	! __next40pxDefaultSize &&
 	css`
 		height: 28px; // 30px - 2px vertical borders on parent container
 		padding-left: ${ space( 1 ) };
@@ -22,7 +22,7 @@ const deprecatedDefaultSize = ( {
 	`;
 
 export const InputWrapperFlex = styled( Flex )`
-	height: 34px; // 36px - 2px vertical borders on parent container
+	height: 38px; // 40px - 2px vertical borders on parent container
 	padding-left: ${ space( 2 ) };
 	padding-right: ${ space( 2 ) };
 
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index bcc4b8b9ed03c..6a32fb17e16c0 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -26,11 +26,18 @@ export type ComboboxControlProps = Pick<
 		item: ComboboxControlOption;
 	} ) => React.ReactNode;
 	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
 	 *
 	 * @default false
+	 * @deprecated
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * Show a reset button to clear the input.
 	 *
diff --git a/packages/components/src/dimension-control/index.tsx b/packages/components/src/dimension-control/index.tsx
index 21255a0ec65e0..0fbdd62b58a00 100644
--- a/packages/components/src/dimension-control/index.tsx
+++ b/packages/components/src/dimension-control/index.tsx
@@ -23,8 +23,8 @@ import type { SelectControlSingleSelectionProps } from '../select-control/types'
  * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
  *
  * ```jsx
- * import { useState } from 'react';
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
  * export default function MyCustomDimensionControl() {
  * 	const [ paddingSize, setPaddingSize ] = useState( '' );
diff --git a/packages/components/src/draggable/index.tsx b/packages/components/src/draggable/index.tsx
index 1f839332b66c0..0a3000538dbf2 100644
--- a/packages/components/src/draggable/index.tsx
+++ b/packages/components/src/draggable/index.tsx
@@ -212,14 +212,8 @@ export function Draggable( {
 		// Update cursor to 'grabbing', document wide.
 		ownerDocument.body.classList.add( bodyClass );
 
-		// Allow the Synthetic Event to be accessed from asynchronous code.
-		// https://reactjs.org/docs/events.html#event-pooling
-		event.persist();
-
-		let timerId: number | undefined;
-
 		if ( onDragStart ) {
-			timerId = setTimeout( () => onDragStart( event ) );
+			onDragStart( event );
 		}
 
 		cleanup.current = () => {
@@ -236,8 +230,6 @@ export function Draggable( {
 			ownerDocument.body.classList.remove( bodyClass );
 
 			ownerDocument.removeEventListener( 'dragover', throttledDragOver );
-
-			clearTimeout( timerId );
 		};
 	}
 
diff --git a/packages/components/src/form-token-field/index.tsx b/packages/components/src/form-token-field/index.tsx
index 5c87db86514b7..e378188037062 100644
--- a/packages/components/src/form-token-field/index.tsx
+++ b/packages/components/src/form-token-field/index.tsx
@@ -27,6 +27,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const identity = ( value: string ) => value;
 
@@ -69,10 +70,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
+		props,
+		'wp.components.FormTokenField'
+	);
 
 	const instanceId = useInstanceId( FormTokenField );
 
@@ -702,7 +706,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					align="center"
 					gap={ 1 }
 					wrap={ true }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>
 					{ renderTokensAndInput() }
diff --git a/packages/components/src/form-token-field/styles.ts b/packages/components/src/form-token-field/styles.ts
index 73044d57a9538..55cfbe5e242f5 100644
--- a/packages/components/src/form-token-field/styles.ts
+++ b/packages/components/src/form-token-field/styles.ts
@@ -11,22 +11,22 @@ import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
 
 type TokensAndInputWrapperProps = {
-	__next36pxDefaultSize: boolean;
+	__next40pxDefaultSize: boolean;
 	hasTokens: boolean;
 };
 
 const deprecatedPaddings = ( {
-	__next36pxDefaultSize,
+	__next40pxDefaultSize,
 	hasTokens,
 }: TokensAndInputWrapperProps ) =>
-	! __next36pxDefaultSize &&
+	! __next40pxDefaultSize &&
 	css`
 		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
 		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
 	`;
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
-	padding: 5px ${ space( 1 ) };
+	padding: 7px;
 
 	${ deprecatedPaddings }
 `;
diff --git a/packages/components/src/form-token-field/types.ts b/packages/components/src/form-token-field/types.ts
index 44c11d6461859..fe466ffbe59f8 100644
--- a/packages/components/src/form-token-field/types.ts
+++ b/packages/components/src/form-token-field/types.ts
@@ -151,13 +151,20 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Deprecated. Use `__next40pxDefaultSize` instead.
+	 *
+	 * @default false
+	 * @deprecated
+	 */
+	__next36pxDefaultSize?: boolean;
 	/**
 	 * Start opting into the larger default height that will become the
 	 * default size in a future version.
 	 *
 	 * @default false
 	 */
-	__next36pxDefaultSize?: boolean;
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * If true, the select the first matching suggestion when the user presses
 	 * the Enter key (or space when tokenizeOnSpace is true).
diff --git a/packages/components/src/mobile/global-styles-context/index.native.js b/packages/components/src/mobile/global-styles-context/index.native.js
index 3bae44222f70f..d5457c836223b 100644
--- a/packages/components/src/mobile/global-styles-context/index.native.js
+++ b/packages/components/src/mobile/global-styles-context/index.native.js
@@ -26,9 +26,20 @@ export const getMergedGlobalStyles = (
 	blockName,
 	fontSizes
 ) => {
+	// Current support for general styles and blocks.
 	const baseGlobalColors = {
-		baseColors: baseGlobalStyles || {},
+		baseColors: {
+			color: baseGlobalStyles?.color,
+			typography: baseGlobalStyles?.typography,
+			elements: {
+				link: baseGlobalStyles?.elements?.link,
+			},
+			blocks: {
+				'core/button': baseGlobalStyles?.blocks?.[ 'core/button' ],
+			},
+		},
 	};
+
 	const blockStyleAttributes = Object.fromEntries(
 		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
 			BLOCK_STYLE_ATTRIBUTES.includes( key )
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 8f0cd5e3d56c0..acc43de8b7f90 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -135,7 +135,7 @@
 
 	&.hide-header {
 		margin-top: 0;
-		padding-top: $grid-unit-30;
+		padding-top: $grid-unit-40;
 	}
 
 	&.is-scrollable:focus-visible {
diff --git a/packages/components/src/navigable-container/container.tsx b/packages/components/src/navigable-container/container.tsx
index f52754e06d61a..c5f92f8effcad 100644
--- a/packages/components/src/navigable-container/container.tsx
+++ b/packages/components/src/navigable-container/container.tsx
@@ -122,11 +122,7 @@ class NavigableContainer extends Component< NavigableContainerProps > {
 			const targetHasMenuItemRole =
 				!! targetRole && MENU_ITEM_ROLES.includes( targetRole );
 
-			// `preventDefault()` on tab to avoid having the browser move the focus
-			// after this component has already moved it.
-			const isTab = event.code === 'Tab';
-
-			if ( targetHasMenuItemRole || isTab ) {
+			if ( targetHasMenuItemRole ) {
 				event.preventDefault();
 			}
 		}
@@ -150,9 +146,16 @@ class NavigableContainer extends Component< NavigableContainerProps > {
 		const nextIndex = cycle
 			? cycleValue( index, focusables.length, offset )
 			: index + offset;
+
 		if ( nextIndex >= 0 && nextIndex < focusables.length ) {
 			focusables[ nextIndex ].focus();
 			onNavigate( nextIndex, focusables[ nextIndex ] );
+
+			// `preventDefault()` on tab to avoid having the browser move the focus
+			// after this component has already moved it.
+			if ( event.code === 'Tab' ) {
+				event.preventDefault();
+			}
 		}
 	}
 
diff --git a/packages/components/src/navigable-container/test/tababble-container.tsx b/packages/components/src/navigable-container/test/tababble-container.tsx
index 88fc10bd98560..eb14842025bec 100644
--- a/packages/components/src/navigable-container/test/tababble-container.tsx
+++ b/packages/components/src/navigable-container/test/tababble-container.tsx
@@ -11,18 +11,22 @@ import { TabbableContainer } from '../tabbable';
 import type { TabbableContainerProps } from '../types';
 
 const TabbableContainerTestCase = ( props: TabbableContainerProps ) => (
-	<TabbableContainer { ...props }>
-		<button>Item 1</button>
-		<span>
-			<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
-		</span>
-		<span>
-			<span tabIndex={ 0 }>Item 3</span>
-		</span>
-		<p>I can not be tabbed</p>
-		<input type="text" disabled name="disabled-input" />
-		<a href="https://example.com">Item 4</a>
-	</TabbableContainer>
+	<>
+		<button>Before container</button>
+		<TabbableContainer { ...props }>
+			<button>Item 1</button>
+			<span>
+				<span tabIndex={ -1 }>Item 2 (not tabbable)</span>
+			</span>
+			<span>
+				<span tabIndex={ 0 }>Item 3</span>
+			</span>
+			<p>I can not be tabbed</p>
+			<input type="text" disabled name="disabled-input" />
+			<a href="https://example.com">Item 4</a>
+		</TabbableContainer>
+		<button>After container</button>
+	</>
 );
 
 const getTabbableContainerTabbables = () => [
@@ -57,7 +61,11 @@ describe( 'TabbableContainer', () => {
 
 		const tabbables = getTabbableContainerTabbables();
 
-		// Move focus to first item.
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+
 		await user.tab();
 		expect( tabbables[ 0 ] ).toHaveFocus();
 
@@ -91,7 +99,11 @@ describe( 'TabbableContainer', () => {
 		const lastTabbableIndex = tabbables.length - 1;
 		const lastTabbable = tabbables[ lastTabbableIndex ];
 
-		// Move focus to first item.
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+
 		await user.tab();
 		expect( firstTabbable ).toHaveFocus();
 
@@ -116,12 +128,17 @@ describe( 'TabbableContainer', () => {
 			/>
 		);
 
-		// With the `cycle` prop set to `false`, cycling is not allowed.
 		// By default, cycling from first to last and from last to first is allowed.
+		// With the `cycle` prop set to `false`, cycling is not allowed.
+		// Therefore, focus will escape the `TabbableContainer` and continue its
+		// natural path in the page.
 		await user.tab( { shift: true } );
-		expect( firstTabbable ).toHaveFocus();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
 		expect( onNavigateSpy ).toHaveBeenCalledTimes( 2 );
 
+		await user.tab();
 		await user.tab();
 		await user.tab();
 		expect( lastTabbable ).toHaveFocus();
@@ -131,8 +148,12 @@ describe( 'TabbableContainer', () => {
 			lastTabbable
 		);
 
+		// Focus will move to the next natively focusable elements after
+		// `TabbableContainer`
 		await user.tab();
-		expect( lastTabbable ).toHaveFocus();
+		expect(
+			screen.getByRole( 'button', { name: 'After container' } )
+		).toHaveFocus();
 		expect( onNavigateSpy ).toHaveBeenCalledTimes( 4 );
 	} );
 
@@ -151,21 +172,27 @@ describe( 'TabbableContainer', () => {
 
 		const tabbables = getTabbableContainerTabbables();
 
-		// Move focus to first item
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', { name: 'Before container' } )
+		).toHaveFocus();
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 0 );
+
 		await user.tab();
 		expect( tabbables[ 0 ] ).toHaveFocus();
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
 
 		await user.keyboard( '[Space]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
 
 		await user.tab();
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 1 );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
 		await user.tab( { shift: true } );
 		// This extra call is caused by the "shift" key being pressed
 		// on its own before "tab"
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 2 );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 3 );
 
 		await user.keyboard( '[Escape]' );
-		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 3 );
+		expect( externalWrapperOnKeyDownSpy ).toHaveBeenCalledTimes( 4 );
 	} );
 } );
diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx
index bd9818d5d8db2..9061222567103 100644
--- a/packages/components/src/palette-edit/index.tsx
+++ b/packages/components/src/palette-edit/index.tsx
@@ -1,12 +1,19 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect, useCallback } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
 import {
@@ -106,15 +113,26 @@ function ColorPickerPopover< T extends Color | Gradient >( {
 	isGradient,
 	element,
 	onChange,
+	popoverProps: receivedPopoverProps,
 	onClose = () => {},
 }: ColorPickerPopoverProps< T > ) {
+	const popoverProps: ColorPickerPopoverProps< T >[ 'popoverProps' ] =
+		useMemo(
+			() => ( {
+				shift: true,
+				offset: 20,
+				placement: 'left-start',
+				...receivedPopoverProps,
+				className: classnames(
+					'components-palette-edit__popover',
+					receivedPopoverProps?.className
+				),
+			} ),
+			[ receivedPopoverProps ]
+		);
+
 	return (
-		<Popover
-			placement="left-start"
-			offset={ 20 }
-			className="components-palette-edit__popover"
-			onClose={ onClose }
-		>
+		<Popover { ...popoverProps } onClose={ onClose }>
 			{ ! isGradient && (
 				<ColorPicker
 					color={ element.color }
@@ -154,17 +172,31 @@ function Option< T extends Color | Gradient >( {
 	onStartEditing,
 	onRemove,
 	onStopEditing,
+	popoverProps: receivedPopoverProps,
 	slugPrefix,
 	isGradient,
 }: OptionProps< T > ) {
 	const focusOutsideProps = useFocusOutside( onStopEditing );
 	const value = isGradient ? element.gradient : element.color;
 
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const popoverProps = useMemo(
+		() => ( {
+			...receivedPopoverProps,
+			// Use the custom palette color item as the popover anchor.
+			anchor: popoverAnchor,
+		} ),
+		[ popoverAnchor, receivedPopoverProps ]
+	);
+
 	return (
 		<PaletteItem
 			className={ isEditing ? 'is-selected' : undefined }
 			as="div"
 			onClick={ onStartEditing }
+			ref={ setPopoverAnchor }
 			{ ...( isEditing
 				? { ...focusOutsideProps }
 				: {
@@ -218,6 +250,7 @@ function Option< T extends Color | Gradient >( {
 					isGradient={ isGradient }
 					onChange={ onChange }
 					element={ element }
+					popoverProps={ popoverProps }
 				/>
 			) }
 		</PaletteItem>
@@ -244,6 +277,7 @@ function PaletteEditListView< T extends Color | Gradient >( {
 	canOnlyChangeValues,
 	slugPrefix,
 	isGradient,
+	popoverProps,
 }: PaletteEditListViewProps< T > ) {
 	// When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.
 	const elementsReference = useRef< typeof elements >();
@@ -317,6 +351,7 @@ function PaletteEditListView< T extends Color | Gradient >( {
 							}
 						} }
 						slugPrefix={ slugPrefix }
+						popoverProps={ popoverProps }
 					/>
 				) ) }
 			</ItemGroup>
@@ -356,6 +391,7 @@ export function PaletteEdit( {
 	canOnlyChangeValues,
 	canReset,
 	slugPrefix = '',
+	popoverProps,
 }: PaletteEditProps ) {
 	const isGradient = !! gradients;
 	const elements = isGradient ? gradients : colors;
@@ -541,6 +577,7 @@ export function PaletteEdit( {
 							setEditingElement={ setEditingElement }
 							slugPrefix={ slugPrefix }
 							isGradient={ isGradient }
+							popoverProps={ popoverProps }
 						/>
 					) }
 					{ ! isEditing && editingElement !== null && (
@@ -568,6 +605,7 @@ export function PaletteEdit( {
 								);
 							} }
 							element={ elements[ editingElement ?? -1 ] }
+							popoverProps={ popoverProps }
 						/>
 					) }
 					{ ! isEditing &&
diff --git a/packages/components/src/palette-edit/stories/index.tsx b/packages/components/src/palette-edit/stories/index.tsx
index 5fd0d45592a82..5739964fbb276 100644
--- a/packages/components/src/palette-edit/stories/index.tsx
+++ b/packages/components/src/palette-edit/stories/index.tsx
@@ -59,6 +59,10 @@ Default.args = {
 	],
 	paletteLabel: 'Colors',
 	emptyMessage: 'Colors are empty',
+	popoverProps: {
+		placement: 'bottom-start',
+		offset: 8,
+	},
 };
 
 export const Gradients = Template.bind( {} );
diff --git a/packages/components/src/palette-edit/types.ts b/packages/components/src/palette-edit/types.ts
index 5513b94553778..1cc0611628c2f 100644
--- a/packages/components/src/palette-edit/types.ts
+++ b/packages/components/src/palette-edit/types.ts
@@ -6,6 +6,7 @@ import type { Key, MouseEventHandler } from 'react';
 /**
  * Internal dependencies
  */
+import type Popover from '../popover';
 import type { HeadingSize } from '../heading/types';
 
 export type Color = {
@@ -58,6 +59,13 @@ export type BasePaletteEdit = {
 	 * @default ''
 	 */
 	slugPrefix?: string;
+	/**
+	 * Props to pass through to the underlying Popover component.
+	 */
+	popoverProps?: Omit<
+		React.ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
 };
 
 type PaletteEditColors = {
@@ -94,6 +102,7 @@ export type ColorPickerPopoverProps< T extends Color | Gradient > = {
 	onChange: ( newElement: T ) => void;
 	isGradient?: T extends Gradient ? true : false;
 	onClose?: () => void;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 };
 
 export type NameInputProps = {
@@ -112,6 +121,7 @@ export type OptionProps< T extends Color | Gradient > = {
 	onRemove: MouseEventHandler< HTMLButtonElement >;
 	onStartEditing: () => void;
 	onStopEditing: () => void;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	slugPrefix: string;
 };
 
@@ -121,6 +131,7 @@ export type PaletteEditListViewProps< T extends Color | Gradient > = {
 	isGradient: T extends Gradient ? true : false;
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	editingElement?: EditingElement;
+	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 	setEditingElement: ( newEditingElement?: EditingElement ) => void;
 	slugPrefix: string;
 };
diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js
index 2cbfe9bf1a9ba..0b1b0eb88f2de 100644
--- a/packages/components/src/sandbox/index.native.js
+++ b/packages/components/src/sandbox/index.native.js
@@ -186,6 +186,8 @@ const Sandbox = forwardRef( function Sandbox(
 		url,
 		onWindowEvents = {},
 		viewportProps = '',
+		onLoadEnd = () => {},
+		testID,
 	},
 	ref
 ) {
@@ -372,6 +374,8 @@ const Sandbox = forwardRef( function Sandbox(
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
 			mediaPlaybackRequiresUserAction={ false }
+			onLoadEnd={ onLoadEnd }
+			testID={ testID }
 		/>
 	);
 } );
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 1c19336552aba..02dce83f66dcc 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -1,3 +1,9 @@
+// Include the default WP Components color variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 
diff --git a/packages/components/src/theme/color-algorithms.ts b/packages/components/src/theme/color-algorithms.ts
index c260b4ac5704d..b2f69e1db2128 100644
--- a/packages/components/src/theme/color-algorithms.ts
+++ b/packages/components/src/theme/color-algorithms.ts
@@ -48,7 +48,7 @@ export function checkContrasts(
 	outputs: ThemeOutputValues[ 'colors' ]
 ) {
 	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#007cba';
+	const accent = inputs.accent || '#3858e9';
 	const foreground = outputs.foreground || COLORS.gray[ 900 ];
 	const gray = outputs.gray || COLORS.gray;
 
diff --git a/packages/components/src/theme/stories/index.tsx b/packages/components/src/theme/stories/index.tsx
index 923b4fff4cdac..c9a3f495e4835 100644
--- a/packages/components/src/theme/stories/index.tsx
+++ b/packages/components/src/theme/stories/index.tsx
@@ -103,7 +103,7 @@ export const ColorScheme: ComponentStory< typeof Theme > = ( {
 	);
 };
 ColorScheme.args = {
-	accent: '#007cba',
+	accent: '#3858e9',
 	background: '#fff',
 };
 ColorScheme.argTypes = {
diff --git a/packages/components/src/theme/test/color-algorithms.ts b/packages/components/src/theme/test/color-algorithms.ts
index f901c8ad83a87..ff04c0b9511bf 100644
--- a/packages/components/src/theme/test/color-algorithms.ts
+++ b/packages/components/src/theme/test/color-algorithms.ts
@@ -53,9 +53,9 @@ describe( 'Theme color algorithms', () => {
 				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
 			);
 
-			generateThemeVariables( { background: '#eee' } );
+			generateThemeVariables( { background: '#1a1a1a' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#007cba").'
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );
 
diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index be5b20d593954..d9f173a571e48 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -65,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
@@ -400,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js
index 06dc62b881c65..556455b09ce33 100644
--- a/packages/components/src/utils/colors-values.js
+++ b/packages/components/src/utils/colors-values.js
@@ -29,11 +29,11 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches @wordpress/base-styles
+// Matches the Modern admin scheme in @wordpress/base-styles
 const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
 	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
 };
 
 const UI = {
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
index 0b664b8cd72e3..14e44f3ddc7d2 100644
--- a/packages/components/src/utils/theme-variables.scss
+++ b/packages/components/src/utils/theme-variables.scss
@@ -2,10 +2,10 @@
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
-// defined, fallback to the default theme color (WP blue).
-$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+// defined, fallback to the default theme color (WP blueberry).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
 // Used when placing text on the accent color.
 $components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);
diff --git a/packages/components/src/utils/use-deprecated-props.ts b/packages/components/src/utils/use-deprecated-props.ts
new file mode 100644
index 0000000000000..ee5dcc67a7530
--- /dev/null
+++ b/packages/components/src/utils/use-deprecated-props.ts
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function useDeprecated36pxDefaultSizeProp<
+	P extends Record< string, any > & {
+		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
+	}
+>(
+	props: P,
+	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
+	componentIdentifier: string
+) {
+	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
+		props;
+	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
+		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
+			alternative: '`__next40pxDefaultSize`',
+			since: '6.3',
+		} );
+	}
+
+	return {
+		...otherProps,
+		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
+	};
+}
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index 6278e5f64a570..8c67e66f1dd17 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.10.0 (2023-05-10)
+
 ## 6.9.0 (2023-04-26)
 
 ## 6.8.0 (2023-04-12)
diff --git a/packages/compose/package.json b/packages/compose/package.json
index f45021210b872..b6c07cd945fb8 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "6.9.0",
+	"version": "6.10.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index 6349399989da3..1405287645001 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,4 +2,6 @@
 
 ## Unreleased
 
+## 0.2.0 (2023-05-10)
+
 Initial release.
\ No newline at end of file
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index 8bb52848b7916..89c351f84a87d 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index e9e6b5880fc6d..5ad12ab0f34a7 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.10.0 (2023-05-10)
+
 ## 6.9.0 (2023-04-26)
 
 ## 6.8.0 (2023-04-12)
diff --git a/packages/core-data/README.md b/packages/core-data/README.md
index 115a7edc1f408..dddc3550e03b2 100644
--- a/packages/core-data/README.md
+++ b/packages/core-data/README.md
@@ -106,6 +106,18 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveNavigationFallbackId
+
+Returns an action object signalling that the fallback Navigation Menu id has been received.
+
+_Parameters_
+
+-   _fallbackId_ `integer`: the id of the fallback Navigation Menu
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveThemeSupports
 
 > **Deprecated** since WP 5.9, this is not useful anymore, use the selector direclty.
@@ -291,6 +303,18 @@ _Returns_
 
 -   `any`: The current theme.
 
+### getCurrentThemeGlobalStylesRevisions
+
+Returns the revisions of the current global styles theme.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `Object | null`: The current global styles.
+
 ### getCurrentUser
 
 Returns the current user.
@@ -482,6 +506,18 @@ _Returns_
 
 -   `any`: The entity record's save error.
 
+### getNavigationFallbackId
+
+Retrieve the fallback Navigation.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+
+_Returns_
+
+-   `EntityRecordKey | undefined`: The ID for the fallback Navigation post.
+
 ### getRawEntityRecord
 
 Returns the entity's record object by key, with its attributes mapped to their raw values.
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index ef9e54362633b..d3976a41d06e7 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "6.9.0",
+	"version": "6.10.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/src/actions.js b/packages/core-data/src/actions.js
index 4c36e2505e7f3..ffae417a83cd1 100644
--- a/packages/core-data/src/actions.js
+++ b/packages/core-data/src/actions.js
@@ -210,6 +210,25 @@ export function receiveThemeSupports() {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the theme global styles CPT post revisions have been received.
+ * Ignored from documentation as it's internal to the data store.
+ *
+ * @ignore
+ *
+ * @param {number} currentId The post id.
+ * @param {Array}  revisions The global styles revisions.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveThemeGlobalStyleRevisions( currentId, revisions ) {
+	return {
+		type: 'RECEIVE_THEME_GLOBAL_STYLE_REVISIONS',
+		currentId,
+		revisions,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the preview data for
  * a given URl has been received.
@@ -834,3 +853,17 @@ export function receiveAutosaves( postId, autosaves ) {
 		autosaves: Array.isArray( autosaves ) ? autosaves : [ autosaves ],
 	};
 }
+
+/**
+ * Returns an action object signalling that the fallback Navigation
+ * Menu id has been received.
+ *
+ * @param {integer} fallbackId the id of the fallback Navigation Menu
+ * @return {Object} Action object.
+ */
+export function receiveNavigationFallbackId( fallbackId ) {
+	return {
+		type: 'RECEIVE_NAVIGATION_FALLBACK_ID',
+		fallbackId,
+	};
+}
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 6d5fefd52ddf4..f04d543919b8c 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -642,6 +642,35 @@ export function blockPatternCategories( state = [], action ) {
 	return state;
 }
 
+export function navigationFallbackId( state = null, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_NAVIGATION_FALLBACK_ID':
+			return action.fallbackId;
+	}
+
+	return state;
+}
+
+/**
+ * Reducer managing the theme global styles revisions.
+ *
+ * @param {Record<string, object>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string, object>} Updated state.
+ */
+export function themeGlobalStyleRevisions( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_THEME_GLOBAL_STYLE_REVISIONS':
+			return {
+				...state,
+				[ action.currentId ]: action.revisions,
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -650,6 +679,7 @@ export default combineReducers( {
 	currentUser,
 	themeGlobalStyleVariations,
 	themeBaseGlobalStyles,
+	themeGlobalStyleRevisions,
 	taxonomies,
 	entities,
 	undo,
@@ -658,4 +688,5 @@ export default combineReducers( {
 	autosaves,
 	blockPatterns,
 	blockPatternCategories,
+	navigationFallbackId,
 } );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index c82bf5677788c..6437b75997690 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -180,7 +180,7 @@ export const getEntityRecords =
 
 			let records = Object.values( await apiFetch( { path } ) );
 			// If we request fields but the result doesn't contain the fields,
-			// explicitely set these fields as "undefined"
+			// explicitly set these fields as "undefined"
 			// that way we consider the query "fullfilled".
 			if ( query._fields ) {
 				records = records.map( ( record ) => {
@@ -500,6 +500,51 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 		);
 	};
 
+/**
+ * Fetches and returns the revisions of the current global styles theme.
+ */
+export const getCurrentThemeGlobalStylesRevisions =
+	() =>
+	async ( { resolveSelect, dispatch } ) => {
+		const globalStylesId =
+			await resolveSelect.__experimentalGetCurrentGlobalStylesId();
+		const record = globalStylesId
+			? await resolveSelect.getEntityRecord(
+					'root',
+					'globalStyles',
+					globalStylesId
+			  )
+			: undefined;
+		const revisionsURL = record?._links?.[ 'version-history' ]?.[ 0 ]?.href;
+
+		if ( revisionsURL ) {
+			const resetRevisions = await apiFetch( {
+				url: revisionsURL,
+			} );
+			const revisions = resetRevisions?.map( ( revision ) =>
+				Object.fromEntries(
+					Object.entries( revision ).map( ( [ key, value ] ) => [
+						camelCase( key ),
+						value,
+					] )
+				)
+			);
+			dispatch.receiveThemeGlobalStyleRevisions(
+				globalStylesId,
+				revisions
+			);
+		}
+	};
+
+getCurrentThemeGlobalStylesRevisions.shouldInvalidate = ( action ) => {
+	return (
+		action.type === 'SAVE_ENTITY_RECORD_FINISH' &&
+		action.kind === 'root' &&
+		! action.error &&
+		action.name === 'globalStyles'
+	);
+};
+
 export const getBlockPatterns =
 	() =>
 	async ( { dispatch } ) => {
@@ -525,3 +570,32 @@ export const getBlockPatternCategories =
 		} );
 		dispatch( { type: 'RECEIVE_BLOCK_PATTERN_CATEGORIES', categories } );
 	};
+
+export const getNavigationFallbackId =
+	() =>
+	async ( { dispatch } ) => {
+		const fallback = await apiFetch( {
+			path: addQueryArgs( '/wp-block-editor/v1/navigation-fallback', {
+				_embed: true,
+			} ),
+		} );
+
+		const record = fallback?._embedded?.self;
+
+		dispatch.receiveNavigationFallbackId( fallback?.id );
+
+		if ( record ) {
+			dispatch.receiveEntityRecords(
+				'postType',
+				'wp_navigation',
+				record
+			);
+
+			// Resolve to avoid further network requests.
+			dispatch.finishResolution( 'getEntityRecord', [
+				'postType',
+				'wp_navigation',
+				fallback?.id,
+			] );
+		}
+	};
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index f52e1bfdd32f9..7513d91810967 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -38,9 +38,11 @@ export interface State {
 	entities: EntitiesState;
 	themeBaseGlobalStyles: Record< string, Object >;
 	themeGlobalStyleVariations: Record< string, string >;
+	themeGlobalStyleRevisions: Record< number, Object >;
 	undo: UndoState;
 	userPermissions: Record< string, boolean >;
 	users: UserState;
+	navigationFallbackId: EntityRecordKey;
 }
 
 type EntityRecordKey = string | number;
@@ -1234,3 +1236,35 @@ export function getBlockPatterns( state: State ): Array< any > {
 export function getBlockPatternCategories( state: State ): Array< any > {
 	return state.blockPatternCategories;
 }
+
+/**
+ * Retrieve the fallback Navigation.
+ *
+ * @param state Data state.
+ * @return The ID for the fallback Navigation post.
+ */
+export function getNavigationFallbackId(
+	state: State
+): EntityRecordKey | undefined {
+	return state.navigationFallbackId;
+}
+
+/**
+ * Returns the revisions of the current global styles theme.
+ *
+ * @param state Data state.
+ *
+ * @return The current global styles.
+ */
+export function getCurrentThemeGlobalStylesRevisions(
+	state: State
+): Object | null {
+	const currentGlobalStylesId =
+		__experimentalGetCurrentGlobalStylesId( state );
+
+	if ( ! currentGlobalStylesId ) {
+		return null;
+	}
+
+	return state.themeGlobalStyleRevisions[ currentGlobalStylesId ];
+}
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 3680cded77618..14ea211519f8f 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.21.0 (2023-05-10)
+
 ## 2.20.0 (2023-04-26)
 
 ## 2.19.0 (2023-04-12)
diff --git a/packages/create-block-tutorial-template/block-templates/render.php.mustache b/packages/create-block-tutorial-template/block-templates/render.php.mustache
index bd08be1004a07..b971a023985e5 100644
--- a/packages/create-block-tutorial-template/block-templates/render.php.mustache
+++ b/packages/create-block-tutorial-template/block-templates/render.php.mustache
@@ -1,4 +1,9 @@
 {{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
 <p <?php echo get_block_wrapper_attributes(); ?>>
 	<?php echo esc_html( $attributes['message'] ); ?>
 </p>
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index e83fc463493f9..1f337bb66137c 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "2.20.0",
+	"version": "2.21.0",
 	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 3e89e131f7981..3bf65038d3196 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.17.0 (2023-05-10)
+
 ## 4.16.0 (2023-04-26)
 
 ## 4.15.0 (2023-04-12)
diff --git a/packages/create-block/lib/templates/block/render.php.mustache b/packages/create-block/lib/templates/block/render.php.mustache
index 39ccdaa2b6747..43ba65e079056 100644
--- a/packages/create-block/lib/templates/block/render.php.mustache
+++ b/packages/create-block/lib/templates/block/render.php.mustache
@@ -1,4 +1,9 @@
 {{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
 <p <?php echo get_block_wrapper_attributes(); ?>>
 	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
diff --git a/packages/create-block/lib/templates/es5/render.php.mustache b/packages/create-block/lib/templates/es5/render.php.mustache
index 39ccdaa2b6747..43ba65e079056 100644
--- a/packages/create-block/lib/templates/es5/render.php.mustache
+++ b/packages/create-block/lib/templates/es5/render.php.mustache
@@ -1,4 +1,9 @@
 {{#isDynamicVariant}}
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
 <p <?php echo get_block_wrapper_attributes(); ?>>
 	<?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{textdomain}}' ); ?>
 </p>
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index c030f8c0aee84..ca731643cc736 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.16.0",
+	"version": "4.17.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 1ef93bfb9373b..4a1e887e088d2 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index 67d871308c771..0c5d5f824bb77 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index 6a34d86dbf175..53b216e7d7289 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.2.0 (2023-05-10)
+
 ## 3.1.0 (2023-04-26)
 
 ## 3.0.0 (2023-04-12)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index d3f57ed544cce..71cba330d5e48 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 0042775844ef9..9ebac97c1bd74 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.3.0 (2023-05-10)
+
 ## 9.2.0 (2023-04-26)
 
 ## 9.1.0 (2023-04-12)
diff --git a/packages/data/package.json b/packages/data/package.json
index 6e8b043523a23..af03a30d203f8 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "9.2.0",
+	"version": "9.3.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/src/redux-store/metadata/selectors.js b/packages/data/src/redux-store/metadata/selectors.js
index 329074cd0a83b..4e5a999567302 100644
--- a/packages/data/src/redux-store/metadata/selectors.js
+++ b/packages/data/src/redux-store/metadata/selectors.js
@@ -131,3 +131,18 @@ export function isResolving( state, selectorName, args ) {
 export function getCachedResolvers( state ) {
 	return state;
 }
+
+/**
+ * Whether the store has any currently resolving selectors.
+ *
+ * @param {State} state Data state.
+ *
+ * @return {boolean} True if one or more selectors are resolving, false otherwise.
+ */
+export function hasResolvingSelectors( state ) {
+	return [ ...Object.values( state ) ].some( ( selectorState ) =>
+		[ ...selectorState._map.values() ].some(
+			( resolution ) => resolution[ 1 ]?.status === 'resolving'
+		)
+	);
+}
diff --git a/packages/data/src/redux-store/metadata/test/selectors.js b/packages/data/src/redux-store/metadata/test/selectors.js
index d84ef52bddd04..2eea14a7b6059 100644
--- a/packages/data/src/redux-store/metadata/test/selectors.js
+++ b/packages/data/src/redux-store/metadata/test/selectors.js
@@ -324,3 +324,35 @@ describe( 'getResolutionError', () => {
 		).toBeFalsy();
 	} );
 } );
+
+describe( 'hasResolvingSelectors', () => {
+	let registry;
+	beforeEach( () => {
+		registry = createRegistry();
+		registry.registerStore( 'testStore', testStore );
+	} );
+
+	it( 'returns false if no requests have started', () => {
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'returns false if all requests have finished', () => {
+		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [] );
+		registry.dispatch( 'testStore' ).finishResolution( 'getFoo', [] );
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( false );
+	} );
+
+	it( 'returns true if has started but not finished', () => {
+		registry.dispatch( 'testStore' ).startResolution( 'getFoo', [] );
+		const { hasResolvingSelectors } = registry.select( 'testStore' );
+		const result = hasResolvingSelectors();
+
+		expect( result ).toBe( true );
+	} );
+} );
diff --git a/packages/data/src/redux-store/test/index.js b/packages/data/src/redux-store/test/index.js
index daca128480dae..e3cc2c727dbc5 100644
--- a/packages/data/src/redux-store/test/index.js
+++ b/packages/data/src/redux-store/test/index.js
@@ -281,6 +281,7 @@ describe( 'resolveSelect', () => {
 
 	it( 'returns only store native selectors and excludes all meta ones', () => {
 		expect( Object.keys( registry.resolveSelect( 'store' ) ) ).toEqual( [
+			'hasResolvingSelectors',
 			'getItems',
 			'getItemsNoResolver',
 		] );
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index 89052cdb9a116..9730586ccd40d 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/date/README.md b/packages/date/README.md
index 7cd3116c73c4c..8edd4e94a8538 100644
--- a/packages/date/README.md
+++ b/packages/date/README.md
@@ -115,6 +115,19 @@ _Returns_
 
 -   `string`: Formatted date.
 
+### humanTimeDiff
+
+Returns a human-readable time difference between two dates, like human_time_diff() in PHP.
+
+_Parameters_
+
+-   _from_ `Moment | Date | string`: From date, in the WP timezone.
+-   _to_ `Moment | Date | string | undefined`: To date, formatted in the WP timezone.
+
+_Returns_
+
+-   `string`: Human-readable time difference.
+
 ### isInTheFuture
 
 Check whether a date is considered in the future according to the WordPress settings.
diff --git a/packages/date/package.json b/packages/date/package.json
index b36accb3de96d..1ff8c3742c9f4 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/date/src/index.js b/packages/date/src/index.js
index 2417d1b5edf85..9ac47f3a0a5f7 100644
--- a/packages/date/src/index.js
+++ b/packages/date/src/index.js
@@ -581,6 +581,20 @@ export function getDate( dateString ) {
 	return momentLib.tz( dateString, WP_ZONE ).toDate();
 }
 
+/**
+ * Returns a human-readable time difference between two dates, like human_time_diff() in PHP.
+ *
+ * @param {Moment | Date | string}             from From date, in the WP timezone.
+ * @param {Moment | Date | string | undefined} to   To date, formatted in the WP timezone.
+ *
+ * @return {string} Human-readable time difference.
+ */
+export function humanTimeDiff( from, to ) {
+	const fromMoment = momentLib.tz( from, WP_ZONE );
+	const toMoment = to ? momentLib.tz( to, WP_ZONE ) : momentLib.tz( WP_ZONE );
+	return fromMoment.from( toMoment );
+}
+
 /**
  * Creates a moment instance using the given timezone or, if none is provided, using global settings.
  *
diff --git a/packages/date/src/test/index.js b/packages/date/src/test/index.js
index 36414949af16a..ff82748e02f23 100644
--- a/packages/date/src/test/index.js
+++ b/packages/date/src/test/index.js
@@ -10,6 +10,7 @@ import {
 	gmdateI18n,
 	isInTheFuture,
 	setSettings,
+	humanTimeDiff,
 } from '../';
 
 describe( 'isInTheFuture', () => {
@@ -620,4 +621,27 @@ describe( 'Moment.js Localization', () => {
 		// Restore default settings.
 		setSettings( settings );
 	} );
+
+	describe( 'humanTimeDiff', () => {
+		it( 'should return human readable time differences', () => {
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-28T12:00:00.000Z'
+				)
+			).toBe( 'an hour ago' );
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-28T13:00:00.000Z'
+				)
+			).toBe( '2 hours ago' );
+			expect(
+				humanTimeDiff(
+					'2023-04-28T11:00:00.000Z',
+					'2023-04-30T13:00:00.000Z'
+				)
+			).toBe( '2 days ago' );
+		} );
+	} );
 } );
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 9ed9c81c2c877..1a10c8b293d41 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.16.0 (2023-05-10)
+
 ## 4.15.0 (2023-04-26)
 
 ## 4.14.0 (2023-04-12)
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index fb602a7bbd76f..b1a753f2f8d5f 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "4.15.0",
+	"version": "4.16.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 1ab643af1ce95..73c5b12a152aa 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index ccfb1b0ed518b..763b0d4a635cb 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 31d2343122b1d..01bd8279c9efe 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.42.0 (2023-05-10)
+
 ## 1.41.0 (2023-04-26)
 
 ## 1.40.0 (2023-04-12)
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 4dc4a393375bb..ca0fd867f40a0 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "1.41.0",
+	"version": "1.42.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index af898886ef6f5..4e05845fa1bcf 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 3dde998d8df1a..3f7e428ae9e80 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 1bc7b9ea7caa9..3fa850c44b29a 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/dom/package.json b/packages/dom/package.json
index b08e6d58707af..8efd4e699cf98 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index 34c83ae9061ba..9333ec2452a68 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,4 +2,6 @@
 
 ## Unreleased
 
--- Initial version of the package.
+## 0.1.0 (2023-05-10)
+
+- Initial version of the package.
diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md
index 50e9c0540b924..d03a6ced191f9 100644
--- a/packages/e2e-test-utils-playwright/README.md
+++ b/packages/e2e-test-utils-playwright/README.md
@@ -4,6 +4,10 @@ End-To-End (E2E) Playwright test utils for WordPress.
 
 _It works properly with the minimum version of Gutenberg `9.2.0` or the minimum version of WordPress `5.6.0`._
 
+<div class="callout callout-alert">
+This package is still under active development. Documentation might not be up-to-date, and the <code>v0.x</code> version can introduce breaking changes without a detailed migration guide. Early adopters are encouraged to use a <a href="https://docs.npmjs.com/cli/v9/configuring-npm/package-lock-json">lock file</a> to prevent unexpected breakages.
+</div>
+
 ## Installation
 
 Install the module
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index d168c7d70afbc..d016168080236 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,7 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "0.0.0",
-	"private": true,
+	"version": "0.1.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
index ac21dcbba0ed6..a9ddffcd6cd5e 100644
--- a/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/open-document-settings-sidebar.ts
@@ -24,7 +24,7 @@ export async function openDocumentSettingsSidebar( this: Editor ) {
 		await toggleButton.click();
 		await this.page
 			.getByRole( 'region', { name: 'Editor settings' } )
-			.getByRole( 'button', { name: 'Close settings' } )
+			.getByRole( 'button', { name: 'Close Settings' } )
 			.waitFor();
 	}
 }
diff --git a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
index a6fb454b912d4..d3fb58f9aab40 100644
--- a/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/editor/site-editor.ts
@@ -14,9 +14,10 @@ export async function saveSiteEditorEntities( this: Editor ) {
 	);
 	// Second Save button in the entities panel.
 	await this.page.click(
-		'role=region[name="Save sidebar"i] >> role=button[name="Save"i]'
-	);
-	await this.page.waitForSelector(
-		'role=region[name="Editor top bar"i] >> role=button[name="Save"i][disabled]'
+		'role=region[name="Save panel"i] >> role=button[name="Save"i]'
 	);
+	// A role selector cannot be used here because it needs to check that the `is-busy` class is not present.
+	await this.page.waitForSelector( '[aria-label="Saved"].is-busy', {
+		state: 'hidden',
+	} );
 }
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/index.ts b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
index e05e59bacc673..99a11bf995679 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/index.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/index.ts
@@ -17,7 +17,11 @@ import { createUser, deleteAllUsers } from './users';
 import { setupRest, rest, getMaxBatchSize, batchRest } from './rest';
 import { getPluginsMap, activatePlugin, deactivatePlugin } from './plugins';
 import { deleteAllTemplates } from './templates';
-import { activateTheme } from './themes';
+import {
+	activateTheme,
+	getCurrentThemeGlobalStylesPostId,
+	getThemeGlobalStylesRevisions,
+} from './themes';
 import { deleteAllBlocks } from './blocks';
 import { createComment, deleteAllComments } from './comments';
 import { createPost, deleteAllPosts } from './posts';
@@ -188,6 +192,12 @@ class RequestUtils {
 	deleteAllPages: typeof deleteAllPages = deleteAllPages.bind( this );
 	/** @borrows createPage as this.createPage */
 	createPage: typeof createPage = createPage.bind( this );
+	/** @borrows getCurrentThemeGlobalStylesPostId as this.getCurrentThemeGlobalStylesPostId */
+	getCurrentThemeGlobalStylesPostId: typeof getCurrentThemeGlobalStylesPostId =
+		getCurrentThemeGlobalStylesPostId.bind( this );
+	/** @borrows getThemeGlobalStylesRevisions as this.getThemeGlobalStylesRevisions */
+	getThemeGlobalStylesRevisions: typeof getThemeGlobalStylesRevisions =
+		getThemeGlobalStylesRevisions.bind( this );
 }
 
 export type { StorageState };
diff --git a/packages/e2e-test-utils-playwright/src/request-utils/themes.ts b/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
index 802530d947b0f..6b4fd17588737 100644
--- a/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
+++ b/packages/e2e-test-utils-playwright/src/request-utils/themes.ts
@@ -37,4 +37,54 @@ async function activateTheme(
 	await response.dispose();
 }
 
-export { activateTheme };
+// https://developer.wordpress.org/rest-api/reference/themes/#definition
+async function getCurrentThemeGlobalStylesPostId( this: RequestUtils ) {
+	type ThemeItem = {
+		stylesheet: string;
+		status: string;
+		_links: { 'wp:user-global-styles': { href: string }[] };
+	};
+	const themes = await this.rest< ThemeItem[] >( {
+		path: '/wp/v2/themes',
+	} );
+	let themeGlobalStylesId: string = '';
+	if ( themes && themes.length ) {
+		const currentTheme: ThemeItem | undefined = themes.find(
+			( { status } ) => status === 'active'
+		);
+
+		const globalStylesURL =
+			currentTheme?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href;
+		if ( globalStylesURL ) {
+			themeGlobalStylesId = globalStylesURL?.split(
+				'rest_route=/wp/v2/global-styles/'
+			)[ 1 ];
+		}
+	}
+	return themeGlobalStylesId;
+}
+
+/**
+ * Deletes all post revisions using the REST API.
+ *
+ * @param {}              this     RequestUtils.
+ * @param {string|number} parentId Post attributes.
+ */
+async function getThemeGlobalStylesRevisions(
+	this: RequestUtils,
+	parentId: number | string
+) {
+	// Lists all global styles revisions.
+	return await this.rest< Record< string, Object >[] >( {
+		path: `/wp/v2/global-styles/${ parentId }/revisions`,
+		params: {
+			per_page: 100,
+		},
+	} );
+}
+
+export {
+	activateTheme,
+	getCurrentThemeGlobalStylesPostId,
+	getThemeGlobalStylesRevisions,
+};
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index 61cf7ef3b3211..bf2016e1cdadb 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.4.0 (2023-05-10)
+
 ## 10.3.0 (2023-04-26)
 
 ## 10.2.0 (2023-04-12)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 1e5378008015e..c12d6b84a3f04 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "10.3.0",
+	"version": "10.4.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index 97f1c0e16bdda..619fc8b9cf630 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -10,6 +10,7 @@ import { addQueryArgs } from '@wordpress/url';
 
 const SELECTORS = {
 	visualEditor: '.edit-site-visual-editor iframe',
+	loadingSpinner: '.edit-site-canvas-spinner',
 };
 
 /**
@@ -128,6 +129,7 @@ export async function visitSiteEditor( query, skipWelcomeGuide = true ) {
 
 	await visitAdminPage( 'site-editor.php', query );
 	await page.waitForSelector( SELECTORS.visualEditor );
+	await page.waitForSelector( SELECTORS.loadingSpinner, { hidden: true } );
 
 	if ( skipWelcomeGuide ) {
 		await disableSiteEditorWelcomeGuide();
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index c13c4d495f625..1b2b39dab63e8 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.4.0 (2023-05-10)
+
 ## 7.3.0 (2023-04-26)
 
 ## 7.2.0 (2023-04-12)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index f30977ef09774..d818b1b487843 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.3.0",
+	"version": "7.4.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
index 402f719729928..f73ad5c68013b 100644
--- a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
+++ b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js
@@ -94,7 +94,7 @@
 				PluginSidebar,
 				{
 					name: 'annotations-sidebar',
-					title: __( 'Annotations Sidebar' ),
+					title: __( 'Annotations' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -103,7 +103,7 @@
 				{
 					target: 'annotations-sidebar',
 				},
-				__( 'Annotations Sidebar' )
+				__( 'Annotations' )
 			)
 		);
 	}
diff --git a/packages/e2e-tests/plugins/plugins-api/sidebar.js b/packages/e2e-tests/plugins/plugins-api/sidebar.js
index a97a940d846b8..01e0a80de7836 100644
--- a/packages/e2e-tests/plugins/plugins-api/sidebar.js
+++ b/packages/e2e-tests/plugins/plugins-api/sidebar.js
@@ -70,7 +70,7 @@
 				PluginSidebar,
 				{
 					name: 'title-sidebar',
-					title: __( 'Plugin sidebar title' ),
+					title: __( 'Plugin title' ),
 				},
 				el( SidebarContents, {} )
 			),
@@ -79,7 +79,7 @@
 				{
 					target: 'title-sidebar',
 				},
-				__( 'Plugin sidebar more menu title' )
+				__( 'Plugin more menu title' )
 			)
 		);
 	}
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
index 34c57bf11e7bc..4cac5cd6893cd 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;
 
-exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin sidebar title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
 
-exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin sidebar title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
+exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class="components-panel__header interface-complementary-area-header__small"><span class="interface-complementary-area-header__small-title">(no title)</span><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel__header interface-complementary-area-header" tabindex="-1"><strong>Plugin title</strong><button type="button" aria-pressed="true" aria-expanded="true" class="components-button interface-complementary-area__pin-unpin-item is-pressed has-icon" aria-label="Unpin from toolbar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg></button><button type="button" class="components-button has-icon" aria-label="Close plugin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path></svg></button></div><div class="components-panel"><div class="components-panel__body sidebar-title-plugin-panel is-opened"><div class="components-panel__row"><label for="title-plain-text">Title:</label><textarea class="block-editor-plain-text" id="title-plain-text" placeholder="(no title)" rows="1" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;"></textarea></div><div class="components-panel__row"><button type="button" class="components-button is-primary">Reset</button></div></div></div>"`;
diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js
index 0ab1fc0f99dff..85265bf424abc 100644
--- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js
@@ -100,7 +100,7 @@ describe( 'Annotations', () => {
 	it( 'allows a block to be annotated', async () => {
 		await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );
 
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
+		await clickOnMoreMenuItem( 'Annotations' );
 
 		let annotations = await page.$$( ANNOTATIONS_SELECTOR );
 		expect( annotations ).toHaveLength( 0 );
@@ -128,7 +128,7 @@ describe( 'Annotations', () => {
 
 	it( 'keeps the cursor in the same location when applying annotation', async () => {
 		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
+		await clickOnMoreMenuItem( 'Annotations' );
 
 		await annotateFirstBlock( 1, 2 );
 
@@ -146,7 +146,7 @@ describe( 'Annotations', () => {
 
 	it( 'moves when typing before it', async () => {
 		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
+		await clickOnMoreMenuItem( 'Annotations' );
 
 		await annotateFirstBlock( 1, 2 );
 
@@ -168,7 +168,7 @@ describe( 'Annotations', () => {
 
 	it( 'grows when typing inside it', async () => {
 		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-		await clickOnMoreMenuItem( 'Annotations Sidebar' );
+		await clickOnMoreMenuItem( 'Annotations' );
 
 		await annotateFirstBlock( 1, 2 );
 
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
index 52b22e550f41c..6e6b3d670082c 100644
--- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
@@ -32,7 +32,7 @@ describe( 'iframed inline styles', () => {
 	} );
 
 	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
-	it( 'should load inline styles in iframe', async () => {
+	it.skip( 'should load inline styles in iframe', async () => {
 		await insertBlock( 'Iframed Inline Styles' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
diff --git a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
index 2e3f9758dc684..4ad8d0e634204 100644
--- a/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
+++ b/packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
@@ -69,10 +69,10 @@ describe( 'Using Plugins API', () => {
 
 	describe( 'Sidebar', () => {
 		const SIDEBAR_PINNED_ITEM_BUTTON =
-			'.interface-pinned-items button[aria-label="Plugin sidebar title"]';
+			'.interface-pinned-items button[aria-label="Plugin title"]';
 		const SIDEBAR_PANEL_SELECTOR = '.sidebar-title-plugin-panel';
 		it( 'Should open plugins sidebar using More Menu item and render content', async () => {
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
+			await clickOnMoreMenuItem( 'Plugin more menu title' );
 
 			const pluginSidebarContent = await page.$eval(
 				'.edit-post-sidebar',
@@ -105,7 +105,7 @@ describe( 'Using Plugins API', () => {
 			await page.reload();
 			await page.waitForSelector( '.edit-post-layout' );
 			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).toBeNull();
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
+			await clickOnMoreMenuItem( 'Plugin more menu title' );
 			await page.click( 'button[aria-label="Pin to toolbar"]' );
 			expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).not.toBeNull();
 			await page.reload();
@@ -114,12 +114,12 @@ describe( 'Using Plugins API', () => {
 		} );
 
 		it( 'Should close plugins sidebar using More Menu item', async () => {
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
+			await clickOnMoreMenuItem( 'Plugin more menu title' );
 
 			const pluginSidebarOpened = await page.$( '.edit-post-sidebar' );
 			expect( pluginSidebarOpened ).not.toBeNull();
 
-			await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
+			await clickOnMoreMenuItem( 'Plugin more menu title' );
 
 			const pluginSidebarClosed = await page.$( '.edit-post-sidebar' );
 			expect( pluginSidebarClosed ).toBeNull();
@@ -135,7 +135,7 @@ describe( 'Using Plugins API', () => {
 			} );
 
 			it( 'Should open plugins sidebar using More Menu item and render content', async () => {
-				await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
+				await clickOnMoreMenuItem( 'Plugin more menu title' );
 
 				const pluginSidebarContent = await page.$eval(
 					'.edit-post-sidebar',
diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js
index 59445ecbe5552..98249637c7e96 100644
--- a/packages/e2e-tests/specs/editor/various/preferences.test.js
+++ b/packages/e2e-tests/specs/editor/various/preferences.test.js
@@ -46,7 +46,7 @@ describe( 'preferences', () => {
 
 		// Dismiss.
 		await page.click(
-			'.edit-post-sidebar__panel-tabs [aria-label="Close settings"]'
+			'.edit-post-sidebar__panel-tabs [aria-label="Close Settings"]'
 		);
 		expect( await getActiveSidebarTabText() ).toBe( null );
 
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 fa039fb10fd2e..d54f9c78dd8b8 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
@@ -275,7 +275,7 @@ describe( 'Multi-entity save flow', () => {
 				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]'
 			);
 			headerTemplatePartListViewButton.click();
-			await page.click( 'button[aria-label="Close List View Sidebar"]' );
+			await page.click( 'button[aria-label="Close"]' );
 
 			// Insert something to dirty the editor.
 			await insertBlock( 'Paragraph' );
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index 5abcedd3b665e..9dbefa820f445 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.10.0 (2023-05-10)
+
 ## 7.9.0 (2023-04-26)
 
 ## 7.8.0 (2023-04-12)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 1df3f566ab9d5..e201414635b55 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "7.9.0",
+	"version": "7.10.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
index e28591f78e601..c479741317459 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -41,27 +41,15 @@ function HeaderToolbar() {
 		showIconLabels,
 		isListViewOpen,
 		listViewShortcut,
-		selectedBlockId,
-		hasFixedToolbar,
 	} = useSelect( ( select ) => {
-		const {
-			hasInserterItems,
-			getBlockRootClientId,
-			getBlockSelectionEnd,
-			getSelectedBlockClientId,
-			getFirstMultiSelectedBlockClientId,
-			getSettings,
-		} = select( blockEditorStore );
+		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
+			select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-			selectedBlockId:
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId(),
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
 				getEditorMode() === 'visual' &&
@@ -83,14 +71,17 @@ function HeaderToolbar() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
-	const { shouldShowContextualToolbar, canFocusHiddenToolbar } =
-		useShouldContextualToolbarShow( selectedBlockId );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
 	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
 	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
 	const blockToolbarCanBeFocused =
 		shouldShowContextualToolbar ||
 		canFocusHiddenToolbar ||
-		( ( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId );
+		fixedToolbarCanBeFocused;
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index a7bdccbfe44d9..09a93424f6903 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar';
 import MoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import { default as DevicePreview } from '../device-preview';
+import ViewLink from '../view-link';
 import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
@@ -88,6 +89,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 						showIconLabels={ showIconLabels }
 					/>
 				) }
+				<ViewLink />
 				<DevicePreview />
 				<PostPreviewButton
 					forceIsAutosaveable={ hasActiveMetaboxes }
diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
index 13a989de7fd07..5344d9155c8a4 100644
--- a/packages/edit-post/src/components/keyboard-shortcuts/index.js
+++ b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -130,7 +130,7 @@ function KeyboardShortcuts() {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 3fdb90dea8555..5e8cdb4fb76e1 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -109,5 +109,4 @@
 			z-index: 19;
 		}
 	}
-
 }
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
index f9a2573352e95..5a6ff1e5fffee 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap
@@ -610,13 +610,13 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
 }
 
 .emotion-13:hover {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
 
 .emotion-13:focus {
   background-color: transparent;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
 }
 
diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
index a875c1b19e503..d83c206194672 100644
--- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js
@@ -17,7 +17,7 @@ import warning from '@wordpress/warning';
 import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
 import { store as editPostStore } from '../../../store';
 
-export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 
 const PluginDocumentSettingFill = ( {
 	isEnabled,
diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
index 0e79742f3048d..cbef3858cb274 100644
--- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
+++ b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js
@@ -7,7 +7,7 @@
  */
 import { createSlotFill, PanelRow } from '@wordpress/components';
 
-export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
+const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
 /**
  * Renders a row in the Summary panel of the Document sidebar.
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 677161c6b5a38..8450fec022593 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -73,7 +73,7 @@ const SettingsSidebar = () => {
 		<PluginSidebarEditPost
 			identifier={ sidebarName }
 			header={ <SettingsHeader sidebarName={ sidebarName } /> }
-			closeLabel={ __( 'Close settings' ) }
+			closeLabel={ __( 'Close Settings' ) }
 			headerClassName="edit-post-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
diff --git a/packages/edit-post/src/components/view-link/index.js b/packages/edit-post/src/components/view-link/index.js
new file mode 100644
index 0000000000000..10b10d8af1ee3
--- /dev/null
+++ b/packages/edit-post/src/components/view-link/index.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { external } from '@wordpress/icons';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export default function ViewLink() {
+	const { permalink, isPublished, label } = useSelect( ( select ) => {
+		// Grab post type to retrieve the view_item label.
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+
+		return {
+			permalink: select( editorStore ).getPermalink(),
+			isPublished: select( editorStore ).isCurrentPostPublished(),
+			label: postType?.labels.view_item,
+		};
+	}, [] );
+
+	// Only render the view button if the post is published and has a permalink.
+	if ( ! isPublished || ! permalink ) {
+		return null;
+	}
+
+	return (
+		<Button
+			icon={ external }
+			label={ label || __( 'View post' ) }
+			href={ permalink }
+			target="_blank"
+		/>
+	);
+}
diff --git a/packages/edit-post/src/components/visual-editor/header.native.js b/packages/edit-post/src/components/visual-editor/header.native.js
index fb52d0b79eb28..20ed9ae5d8164 100644
--- a/packages/edit-post/src/components/visual-editor/header.native.js
+++ b/packages/edit-post/src/components/visual-editor/header.native.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
 /**
  * WordPress dependencies
  */
@@ -6,8 +11,10 @@ import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { PostTitle } from '@wordpress/editor';
-import { ReadableContentView } from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	useEditorWrapperStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -21,12 +28,13 @@ const Header = memo(
 		title,
 		getStylesFromColorScheme,
 	} ) {
+		const [ wrapperStyles ] = useEditorWrapperStyles();
 		const blockHolderFocusedStyle = getStylesFromColorScheme(
 			styles.blockHolderFocused,
 			styles.blockHolderFocusedDark
 		);
 		return (
-			<ReadableContentView>
+			<View style={ wrapperStyles }>
 				<PostTitle
 					innerRef={ setTitleRef }
 					title={ title }
@@ -36,7 +44,7 @@ const Header = memo(
 					focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					accessibilityLabel="post-title"
 				/>
-			</ReadableContentView>
+			</View>
 		);
 	},
 	( prevProps, nextProps ) => prevProps.title === nextProps.title
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 86495e740edc0..e9216f0cf8f2f 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -7,7 +7,7 @@
 	// Gray preview overlay (desktop/tablet/mobile) is intentionally not set on an element with scrolling content like
 	// interface-interface-skeleton__content. This causes graphical glitches (flashes of the background color)
 	// when scrolling in Safari due to incorrect ordering of large compositing layers (GPU acceleration).
-	background-color: $gray-800;
+	background-color: $gray-900;
 
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index fcdf4c0c6b5a9..078bb8951d8f4 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index ba3586301830c..6e89e6979dfb3 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.9.0",
+	"version": "5.10.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,6 +38,7 @@
 		"@wordpress/core-commands": "file:../core-commands",
 		"@wordpress/core-data": "file:../core-data",
 		"@wordpress/data": "file:../data",
+		"@wordpress/date": "file:../date",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/dom": "file:../dom",
 		"@wordpress/editor": "file:../editor",
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 219d525071a7b..ccab5d82bd058 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
@@ -51,16 +51,25 @@ function SuggestionListItem( {
 				)
 			}
 		>
-			<span className={ `${ baseCssClass }__title` }>
+			<Text
+				size="body"
+				lineHeight={ 1.53846153846 } // 20px
+				weight={ 500 }
+				className={ `${ baseCssClass }__title` }
+			>
 				<TextHighlight
 					text={ decodeEntities( suggestion.name ) }
 					highlight={ search }
 				/>
-			</span>
+			</Text>
 			{ suggestion.link && (
-				<span className={ `${ baseCssClass }__info` }>
+				<Text
+					size="body"
+					lineHeight={ 1.53846153846 } // 20px
+					className={ `${ baseCssClass }__info` }
+				>
 					{ suggestion.link }
-				</span>
+				</Text>
 			) }
 		</CompositeItem>
 	);
@@ -221,10 +230,17 @@ function AddCustomTemplateModal( {
 								} );
 							} }
 						>
-							<Text as="span" weight={ 600 }>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{ entityForSuggestions.labels.all_items }
 							</Text>
-							<Text as="span">
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
 									__( 'For all items' )
@@ -238,10 +254,17 @@ function AddCustomTemplateModal( {
 								setShowSearchEntities( true );
 							} }
 						>
-							<Text as="span" weight={ 600 }>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{ entityForSuggestions.labels.singular_name }
 							</Text>
-							<Text as="span">
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
 									__( 'For a specific item' )
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
index c84bb12213c4d..fc33da1f35a13 100644
--- a/packages/edit-site/src/components/add-new-template/style.scss
+++ b/packages/edit-site/src/components/add-new-template/style.scss
@@ -18,16 +18,20 @@
 }
 
 .edit-site-custom-template-modal {
+	&__suggestions_list {
+		margin-left: - $grid-unit-15;
+		margin-right: - $grid-unit-15;
+	}
+
 	&__contents {
 		> .components-button {
 			padding: $grid-unit-30;
-			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
-			width: 256px;
 			height: auto;
 			display: flex;
 			flex-direction: column;
-			gap: $grid-unit;
+			justify-content: center;
+			border: $border-width solid $gray-300;
 
 			// Show the boundary of the button, in High Contrast Mode.
 			outline: 1px solid transparent;
@@ -42,15 +46,17 @@
 
 			&:hover {
 				color: var(--wp-admin-theme-color-darker-10);
-				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+				border-color: transparent;
 
-				span:first-child {
+				span {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-color: transparent;
 
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 3px solid transparent;
@@ -77,60 +83,58 @@
 	@include break-medium() {
 		width: 456px;
 	}
-}
-
-.edit-site-custom-template-modal__suggestions_list {
-	@include break-small() {
-		height: 232px;
-		overflow: scroll;
-	}
-
-	&__list-item {
-		display: block;
-		width: 100%;
-		text-align: left;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		height: auto;
 
-		mark {
-			font-weight: 700;
-			background: none;
+	.edit-site-custom-template-modal__suggestions_list {
+		@include break-small() {
+			height: 232px;
+			overflow: scroll;
 		}
 
-		&:hover {
-			background-color: $gray-100;
+		&__list-item {
+			display: block;
+			width: 100%;
+			text-align: left;
+			white-space: pre-wrap;
+			overflow-wrap: break-word;
+			height: auto;
+			padding: $grid-unit-10 $grid-unit-15;
 
 			mark {
-				color: var(--wp-admin-theme-color);
+				font-weight: 700;
+				background: none;
 			}
-		}
 
-		&:focus {
-			background-color: $gray-100;
-		}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-		}
+				* {
+					color: var(--wp-admin-theme-color);
+				}
 
-		&__title,
-		&__info {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: block;
-		}
+				mark {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 
-		&__title {
-			font-weight: 500;
-			margin-bottom: 0.2em;
-		}
+			&:focus {
+				background-color: $gray-100;
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+			}
 
-		&__info {
-			color: $gray-700;
-			font-size: 0.9em;
-			line-height: 1.3;
-			word-break: break-all;
+			&__title,
+			&__info {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: block;
+			}
+
+			&__info {
+				word-break: break-all;
+				color: $gray-700;
+			}
 		}
 	}
 }
diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
index 1f64c8c4c4f9c..be07453d8fc9e 100644
--- a/packages/edit-site/src/components/block-editor/editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,6 +14,9 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +39,30 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvasMode === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvasMode ] );
+
+	const viewModeProps = {
+		'aria-label': __( 'Editor Canvas' ),
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if ( keyCode === ENTER || keyCode === SPACE ) {
+				event.preventDefault();
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClick: () => setCanvasMode( 'edit' ),
+		readonly: true,
+	};
 
 	return (
 		<Iframe
@@ -40,15 +72,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			style={ enableResizing ? {} : deviceStyles }
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
-			className="edit-site-visual-editor__editor-canvas"
+			className={ classnames( 'edit-site-visual-editor__editor-canvas', {
+				'is-focused': isFocused && canvasMode === 'view',
+			} ) }
 			{ ...props }
-			role={ canvasMode === 'view' ? 'button' : undefined }
-			onClick={
-				canvasMode === 'view'
-					? () => setCanvasMode( 'edit' )
-					: undefined
-			}
-			readonly={ canvasMode === 'view' }
+			{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
 		>
 			<EditorStyles styles={ settings.styles } />
 			<style>{
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index e50faca23edef..f974f6d914b16 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -29,9 +29,14 @@
 
 	.edit-site-visual-editor__editor-canvas {
 		height: 100%;
-		background: $white;
+
+		&.is-focused {
+			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+		}
 	}
 
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
@@ -55,14 +60,16 @@
 		overflow: auto;
 	}
 
-	/*
-		Temporary to hide the contextual toolbar in view mode.
-		See: https://github.com/WordPress/gutenberg/pull/46298
-		This rule can possibly be removed once the
-		contextual toolbar has been redesigned.
-		See: https://github.com/WordPress/gutenberg/issues/40450
-	*/
 	&.is-view-mode {
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
+		/*
+			Temporary to hide the contextual toolbar in view mode.
+			See: https://github.com/WordPress/gutenberg/pull/46298
+			This rule can possibly be removed once the
+			contextual toolbar has been redesigned.
+			See: https://github.com/WordPress/gutenberg/issues/40450
+		*/
 		.block-editor-block-contextual-toolbar {
 			display: none;
 		}
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index c8fcca4a3a99c..091c5b9ec60f6 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -30,6 +30,8 @@ function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
 			return __( 'Style Book' );
+		case 'global-styles-revisions':
+			return __( 'Global styles revisions' );
 		default:
 			return '';
 	}
@@ -44,11 +46,7 @@ const {
 	Fill: EditorCanvasContainerFill,
 } = createPrivateSlotFill( SLOT_FILL_NAME );
 
-function EditorCanvasContainer( {
-	children,
-	closeButtonLabel,
-	onClose = () => {},
-} ) {
+function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -65,7 +63,9 @@ function EditorCanvasContainer( {
 		[ editorCanvasContainerView ]
 	);
 	function onCloseContainer() {
-		onClose();
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
 	}
@@ -93,22 +93,26 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
+	const shouldShowCloseButton = onClose || closeButtonLabel;
+
 	return (
 		<EditorCanvasContainerFill>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<section
 				className="edit-site-editor-canvas-container"
-				ref={ focusOnMountRef }
+				ref={ shouldShowCloseButton ? focusOnMountRef : null }
 				onKeyDown={ closeOnEscape }
 				aria-label={ title }
 			>
-				<Button
-					className="edit-site-editor-canvas-container__close-button"
-					icon={ closeSmall }
-					label={ closeButtonLabel || __( 'Close' ) }
-					onClick={ onCloseContainer }
-					showTooltip={ false }
-				/>
+				{ shouldShowCloseButton && (
+					<Button
+						className="edit-site-editor-canvas-container__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel || __( 'Close' ) }
+						onClick={ onCloseContainer }
+						showTooltip={ false }
+					/>
+				) }
 				{ childrenWithProps }
 			</section>
 		</EditorCanvasContainerFill>
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 62b62082e4b92..500402fca2900 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider } from '@wordpress/core-data';
+import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -37,6 +37,7 @@ import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -49,6 +50,39 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const { hasResolvingSelectors } = useSelect( ( select ) => {
+		return {
+			hasResolvingSelectors: select( coreStore ).hasResolvingSelectors(),
+		};
+	} );
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = ! loaded && ! hasResolvingSelectors;
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 1s timeout here to catch brief moments
+			 * without any resolving selectors that would result in displaying
+			 * brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 1s of artificial delay after loading has finished.
+			 */
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, 1000 );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded || ! hasLoadedPost;
+}
+
 export default function Editor() {
 	const {
 		record: editedPost,
@@ -152,12 +186,11 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	if ( ! hasLoadedPost ) {
-		return <CanvasSpinner />;
-	}
+	const isLoading = useIsSiteEditorLoading();
 
 	return (
 		<>
+			{ isLoading ? <CanvasSpinner /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -214,7 +247,10 @@ export default function Editor() {
 							sidebar={
 								isEditMode &&
 								isRightSidebarOpen && (
-									<ComplementaryArea.Slot scope="core/edit-site" />
+									<>
+										<ComplementaryArea.Slot scope="core/edit-site" />
+										<SidebarFixedBottomSlot />
+									</>
 								)
 							}
 							footer={
diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 9ff5a47f77f08..584df056ddee0 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -11,7 +11,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		...blockExample,
 		attributes: {
 			...blockExample?.attributes,
-			className: variation,
+			className: 'is-style-' + variation,
 		},
 	};
 	const blocks =
diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
deleted file mode 100644
index fd127039be748..0000000000000
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	BorderPanel: StylesBorderPanel,
-} = unlock( blockEditorPrivateApis );
-
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	const hasColorOrWidth = border.color || border.width;
-
-	if ( ! border.style && hasColorOrWidth ) {
-		return { ...border, style: 'solid' };
-	}
-
-	if ( border.style && ! hasColorOrWidth ) {
-		return undefined;
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
-export default function BorderPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	const onChange = ( newStyle ) => {
-		if ( ! newStyle?.border ) {
-			setStyle( newStyle );
-			return;
-		}
-
-		// As Global Styles can't conditionally generate styles based on if
-		// other style properties have been set, we need to force split
-		// border definitions for user set global border styles. Border
-		// radius is derived from the same property i.e. `border.radius` if
-		// it is a string that is used. The longhand border radii styles are
-		// only generated if that property is an object.
-		//
-		// For borders (color, style, and width) those are all properties on
-		// the `border` style property. This means if the theme.json defined
-		// split borders and the user condenses them into a flat border or
-		// vice-versa we'd get both sets of styles which would conflict.
-		const { radius, ...newBorder } = newStyle.border;
-		const border = applyAllFallbackStyles( newBorder );
-		const updatedBorder = ! hasSplitBorders( border )
-			? {
-					top: border,
-					right: border,
-					bottom: border,
-					left: border,
-			  }
-			: {
-					color: null,
-					style: null,
-					width: null,
-					...border,
-			  };
-
-		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
-	};
-
-	return (
-		<StylesBorderPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ onChange }
-			settings={ settings }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index 7bf422b878e01..185a46fdba476 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
@@ -14,6 +15,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 export default function ColorPalettePanel( { name } ) {
 	const [ themeColors, setThemeColors ] = useGlobalSetting(
@@ -43,6 +45,10 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
@@ -56,6 +62,7 @@ export default function ColorPalettePanel( { name } ) {
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -68,6 +75,7 @@ export default function ColorPalettePanel( { name } ) {
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -79,6 +87,7 @@ export default function ColorPalettePanel( { name } ) {
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 		</VStack>
 	);
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
deleted file mode 100644
index dca571881cd4e..0000000000000
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	FlexItem,
-	CardBody,
-	CardDivider,
-} from '@wordpress/components';
-import {
-	typography,
-	border,
-	filter,
-	shadow,
-	color,
-	layout,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
-import { isRTL, __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { useHasVariationsPanel } from './variations-panel';
-import { NavigationButtonAsItem } from './navigation-button';
-import { IconWithCurrentColor } from './icon-with-current-color';
-import { ScreenVariations } from './screen-variations';
-import { unlock } from '../../private-apis';
-
-const {
-	useHasDimensionsPanel,
-	useHasTypographyPanel,
-	useHasBorderPanel,
-	useHasColorPanel,
-	useHasEffectsPanel,
-	useHasFiltersPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-function ContextMenu( { name, parentMenu = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( settings );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	const hasFilterPanel = useHasFiltersPanel( settings );
-	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasLayoutPanel = hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
-
-	const { canEditCSS } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			canEditCSS:
-				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
-		};
-	}, [] );
-
-	const isBlocksPanel =
-		parentMenu.includes( 'blocks' ) &&
-		! parentMenu.includes( 'variations' );
-
-	return (
-		<>
-			<ItemGroup>
-				{ hasTypographyPanel && (
-					<NavigationButtonAsItem
-						icon={ typography }
-						path={ parentMenu + '/typography' }
-						aria-label={ __( 'Typography styles' ) }
-					>
-						{ __( 'Typography' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasColorPanel && (
-					<NavigationButtonAsItem
-						icon={ color }
-						path={ parentMenu + '/colors' }
-						aria-label={ __( 'Colors styles' ) }
-					>
-						{ __( 'Colors' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasBorderPanel && (
-					<NavigationButtonAsItem
-						icon={ border }
-						path={ parentMenu + '/border' }
-						aria-label={ __( 'Border' ) }
-					>
-						{ __( 'Border' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasEffectsPanel && (
-					<NavigationButtonAsItem
-						icon={ shadow }
-						path={ parentMenu + '/effects' }
-						aria-label={ __( 'Effects' ) }
-					>
-						{ __( 'Effects' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasFilterPanel && (
-					<NavigationButtonAsItem
-						icon={ filter }
-						path={ parentMenu + '/filters' }
-						aria-label={ __( 'Filters styles' ) }
-					>
-						{ __( 'Filters' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasLayoutPanel && (
-					<NavigationButtonAsItem
-						icon={ layout }
-						path={ parentMenu + '/layout' }
-						aria-label={ __( 'Layout styles' ) }
-					>
-						{ __( 'Layout' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasVariationsPanel && (
-					<ScreenVariations name={ name } path={ parentMenu } />
-				) }
-				{ isBlocksPanel && canEditCSS && (
-					<>
-						<CardDivider />
-						<CardBody>
-							<Spacer as="p" paddingTop={ 2 } marginBottom={ 4 }>
-								{ __(
-									'Add your own CSS to customize the block appearance.'
-								) }
-							</Spacer>
-							<ItemGroup>
-								<NavigationButtonAsItem
-									path={ parentMenu + '/css' }
-									aria-label={ __( 'Additional block CSS' ) }
-								>
-									<HStack justify="space-between">
-										<FlexItem>
-											{ __( 'Additional block CSS' ) }
-										</FlexItem>
-										<IconWithCurrentColor
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</NavigationButtonAsItem>
-							</ItemGroup>
-						</CardBody>
-						<CardDivider />
-					</>
-				) }
-			</ItemGroup>
-		</>
-	);
-}
-
-export default ContextMenu;
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
deleted file mode 100644
index 897c17633700e..0000000000000
--- a/packages/edit-site/src/components/global-styles/custom-css.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
-	blockEditorPrivateApis
-);
-
-function CustomCSSControl( { blockName } ) {
-	const [ style ] = useGlobalStyle( '', blockName, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', blockName, 'all', {
-		shouldDecodeEncode: false,
-	} );
-
-	return (
-		<StylesAdvancedPanel
-			value={ style }
-			onChange={ setStyle }
-			inheritedValue={ inheritedStyle }
-		/>
-	);
-}
-
-export default CustomCSSControl;
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 d2555a14bea64..11b44cd20092f 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -26,19 +26,15 @@ const DEFAULT_CONTROLS = {
 	childLayout: false,
 };
 
-export default function DimensionsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+export default function DimensionsPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
diff --git a/packages/edit-site/src/components/global-styles/effects-panel.js b/packages/edit-site/src/components/global-styles/effects-panel.js
deleted file mode 100644
index dfba278139fc0..0000000000000
--- a/packages/edit-site/src/components/global-styles/effects-panel.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalSetting,
-	useGlobalStyle,
-	EffectsPanel: StylesEffectsPanel,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-export default function EffectsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesEffectsPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ settings }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/filters-panel.js b/packages/edit-site/src/components/global-styles/filters-panel.js
deleted file mode 100644
index f62d6901073f3..0000000000000
--- a/packages/edit-site/src/components/global-styles/filters-panel.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	FiltersPanel: StylesFiltersPanel,
-} = unlock( blockEditorPrivateApis );
-
-export default function FiltersPanel( { name } ) {
-	const [ style ] = useGlobalStyle( '', name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesFiltersPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ {
-				...settings,
-				color: {
-					...settings.color,
-					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
-				},
-			} }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index 747534993c593..4c791b8e6b011 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
@@ -17,6 +18,7 @@ import Subtitle from './subtitle';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 const noop = () => {};
 
@@ -63,6 +65,9 @@ export default function GradientPalettePanel( { name } ) {
 		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
 	];
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
@@ -76,6 +81,7 @@ export default function GradientPalettePanel( { name } ) {
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -88,6 +94,7 @@ export default function GradientPalettePanel( { name } ) {
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -99,6 +106,7 @@ export default function GradientPalettePanel( { name } ) {
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
new file mode 100644
index 0000000000000..14c5c344e5f64
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import { typography, color, layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../private-apis';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasColorPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
+
+function RootMenu() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasDimensionsPanel;
+
+	return (
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path="/typography"
+						aria-label={ __( 'Typography styles' ) }
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem
+						icon={ color }
+						path="/colors"
+						aria-label={ __( 'Colors styles' ) }
+					>
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem
+						icon={ layout }
+						path="/layout"
+						aria-label={ __( 'Layout styles' ) }
+					>
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+export default RootMenu;
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index b929339860b2a..88c826c42e0d0 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -20,7 +20,7 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasVariationsPanel } from './variations-panel';
+import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../private-apis';
@@ -65,7 +65,7 @@ export function useBlockHasGlobalStyles( blockName ) {
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasVariationsPanel = !! useBlockVariations( blockName )?.length;
 	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 9e9d585e88d31..fe6221dfb5a65 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,25 +2,273 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+	__experimentalHasSplitBorders as hasSplitBorders,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import ContextMenu from './context-menu';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
+import { unlock } from '../../private-apis';
+import Subtitle from './subtitle';
+import { useBlockVariations, VariationsPanel } from './variations-panel';
 
-function ScreenBlock( { name } ) {
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
+	useGlobalStyle,
+	BorderPanel: StylesBorderPanel,
+	ColorPanel: StylesColorPanel,
+	TypographyPanel: StylesTypographyPanel,
+	DimensionsPanel: StylesDimensionsPanel,
+	EffectsPanel: StylesEffectsPanel,
+	FiltersPanel: StylesFiltersPanel,
+	AdvancedPanel: StylesAdvancedPanel,
+} = unlock( blockEditorPrivateApis );
+
+function ScreenBlock( { name, variation } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
+	const blockVariations = useBlockVariations( name );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasVariationsPanel = !! blockVariations?.length && ! variation;
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+	const currentBlockStyle = variation
+		? blockVariations.find( ( s ) => s.name === variation )
+		: null;
+
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
+		return {
+			...inheritedStyle,
+			layout: settings.layout,
+		};
+	}, [ inheritedStyle, settings.layout ] );
+	const styleWithLayout = useMemo( () => {
+		return {
+			...style,
+			layout: settings.layout,
+		};
+	}, [ style, settings.layout ] );
+	const onChangeDimensions = ( newStyle ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
+
+		if ( newStyle.layout !== settings.layout ) {
+			setSettings( {
+				...rawSettings,
+				layout: newStyle.layout,
+			} );
+		}
+	};
+	const onChangeBorders = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
 
 	return (
 		<>
-			<ScreenHeader title={ blockType.title } />
-			<BlockPreviewPanel name={ name } />
-			<ContextMenu
-				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
-				name={ name }
+			<ScreenHeader
+				title={ variation ? currentBlockStyle.label : blockType.title }
 			/>
+			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasVariationsPanel && (
+				<div className="edit-site-global-styles-screen-variations">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+						<VariationsPanel name={ name } />
+					</VStack>
+				</div>
+			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasDimensionsPanel && (
+				<StylesDimensionsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ onChangeBorders }
+					settings={ settings }
+				/>
+			) }
+			{ hasEffectsPanel && (
+				<StylesEffectsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ setStyle }
+					settings={ {
+						...settings,
+						color: {
+							...settings.color,
+							customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+						},
+					} }
+					includeLayoutControls
+				/>
+			) }
+			{ canEditCSS && (
+				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
+					<p>
+						{ sprintf(
+							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+							__(
+								'Add your own CSS to customize the appearance of the %s block.'
+							),
+							blockType?.title
+						) }
+					</p>
+					<StylesAdvancedPanel
+						value={ style }
+						onChange={ setStyle }
+						inheritedValue={ inheritedStyle }
+					/>
+				</PanelBody>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
deleted file mode 100644
index f700f2676448f..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BorderPanel from './border-panel';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-
-const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenBorder( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const variationClassName = getVariationClassName( variation );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasBorderPanel && (
-				<BorderPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenBorder;
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 1624bdefc7ae9..dc56bbc074b8b 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const {
@@ -21,21 +20,15 @@ const {
 	ColorPanel: StylesColorPanel,
 } = unlock( blockEditorPrivateApis );
 
-function ScreenColors( { name, variation = '' } ) {
-	const variationClassName = getVariationClassName( variation );
-
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+function ScreenColors() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	return (
 		<>
@@ -46,11 +39,11 @@ function ScreenColors( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
-					<Palette name={ name } />
+					<Palette />
 
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 779c64c86c4f5..50aae836ffa1c 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -1,34 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../private-apis';
 import ScreenHeader from './header';
-import CustomCSSControl from './custom-css';
 
-function ScreenCSS( { name } ) {
-	// If name is defined, we are customizing CSS at the block level.
-	// Display the block title in the description.
-	const blockType = getBlockType( name );
-	const title = blockType?.title;
+const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
+	blockEditorPrivateApis
+);
 
-	const description =
-		title !== undefined
-			? sprintf(
-					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-					__(
-						'Add your own CSS to customize the appearance of the %s block.'
-					),
-					title
-			  )
-			: __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-			  );
+function ScreenCSS() {
+	const description = __(
+		'Add your own CSS to customize the appearance and layout of your site.'
+	);
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
 
 	return (
 		<>
@@ -47,7 +43,11 @@ function ScreenCSS( { name } ) {
 				}
 			/>
 			<div className="edit-site-global-styles-screen-css">
-				<CustomCSSControl blockName={ name } />
+				<StylesAdvancedPanel
+					value={ style }
+					onChange={ setStyle }
+					inheritedValue={ inheritedStyle }
+				/>
 			</div>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-effects.js b/packages/edit-site/src/components/global-styles/screen-effects.js
deleted file mode 100644
index cc6b4c3ece0f7..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-effects.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-import EffectsPanel from './effects-panel';
-
-const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenEffects( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const variationClassName = getVariationClassName( variation );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Effects' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasEffectsPanel && (
-				<EffectsPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenEffects;
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
deleted file mode 100644
index e9ba07d935370..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import FiltersPanel from './filters-panel';
-import BlockPreviewPanel from './block-preview-panel';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-
-function ScreenFilters( { name } ) {
-	return (
-		<>
-			<ScreenHeader title={ __( 'Filters' ) } />
-			<BlockPreviewPanel name={ name } />
-			<FiltersPanel name={ name } />
-		</>
-	);
-}
-
-export default ScreenFilters;
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 02d28d3c9c6da..66626fa82e705 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -10,24 +10,20 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );
 
-function ScreenLayout( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+function ScreenLayout() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasDimensionsPanel && (
-				<DimensionsPanel name={ name } variation={ variation } />
-			) }
+			<BlockPreviewPanel />
+			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
new file mode 100644
index 0000000000000..92d5ae7d2bb68
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -0,0 +1,177 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	__experimentalUseNavigator as useNavigator,
+	__experimentalConfirmDialog as ConfirmDialog,
+	Spinner,
+} from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useContext, useState, useEffect } from '@wordpress/element';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from '../header';
+import { unlock } from '../../../private-apis';
+import Revisions from '../../revisions';
+import SidebarFixedBottom from '../../sidebar-edit-mode/sidebar-fixed-bottom';
+import { store as editSiteStore } from '../../../store';
+import useGlobalStylesRevisions from './use-global-styles-revisions';
+import RevisionsButtons from './revisions-buttons';
+
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenRevisions() {
+	const { goBack } = useNavigator();
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+	const { blocks, editorCanvasContainerView } = useSelect( ( select ) => {
+		return {
+			editorCanvasContainerView: unlock(
+				select( editSiteStore )
+			).getEditorCanvasContainerView(),
+			blocks: select( blockEditorStore ).getBlocks(),
+		};
+	}, [] );
+
+	const { revisions, isLoading, hasUnsavedChanges } =
+		useGlobalStylesRevisions();
+	const [ globalStylesRevision, setGlobalStylesRevision ] =
+		useState( userConfig );
+
+	const [ currentRevisionId, setCurrentRevisionId ] = useState(
+		/*
+		 * We need this for the first render,
+		 * otherwise the unsaved changes haven't been merged into the revisions array yet.
+		 */
+		hasUnsavedChanges ? 'unsaved' : revisions?.[ 0 ]?.id
+	);
+	const [
+		isLoadingRevisionWithUnsavedChanges,
+		setIsLoadingRevisionWithUnsavedChanges,
+	] = useState( false );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
+	useEffect( () => {
+		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
+			goBack();
+			setEditorCanvasContainerView( editorCanvasContainerView );
+		}
+	}, [ editorCanvasContainerView ] );
+
+	const onCloseRevisions = () => {
+		goBack();
+	};
+
+	const restoreRevision = ( revision ) => {
+		setUserConfig( () => ( {
+			styles: revision?.styles,
+			settings: revision?.settings,
+		} ) );
+		setIsLoadingRevisionWithUnsavedChanges( false );
+		onCloseRevisions();
+	};
+
+	const selectRevision = ( revision ) => {
+		setGlobalStylesRevision( {
+			styles: revision?.styles,
+			settings: revision?.settings,
+			id: revision?.id,
+		} );
+		setCurrentRevisionId( revision?.id );
+	};
+
+	const isLoadButtonEnabled =
+		!! globalStylesRevision?.id &&
+		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Revisions' ) }
+				description={ __(
+					'Revisions are added to the timeline when style changes are saved.'
+				) }
+			/>
+			{ isLoading && (
+				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
+			) }
+			{ ! isLoading && (
+				<Revisions
+					blocks={ blocks }
+					userConfig={ globalStylesRevision }
+					onClose={ onCloseRevisions }
+				/>
+			) }
+			<div className="edit-site-global-styles-screen-revisions">
+				<RevisionsButtons
+					onChange={ selectRevision }
+					currentRevisionId={ currentRevisionId }
+					userRevisions={ revisions }
+				/>
+				{ isLoadButtonEnabled && (
+					<SidebarFixedBottom>
+						<Button
+							variant="primary"
+							className="edit-site-global-styles-screen-revisions__button"
+							disabled={
+								! globalStylesRevision?.id ||
+								globalStylesRevision?.id === 'unsaved'
+							}
+							onClick={ () => {
+								if ( hasUnsavedChanges ) {
+									setIsLoadingRevisionWithUnsavedChanges(
+										true
+									);
+								} else {
+									restoreRevision( globalStylesRevision );
+								}
+							} }
+						>
+							{ __( 'Apply' ) }
+						</Button>
+					</SidebarFixedBottom>
+				) }
+			</div>
+			{ isLoadingRevisionWithUnsavedChanges && (
+				<ConfirmDialog
+					title={ __(
+						'Loading this revision will discard all unsaved changes.'
+					) }
+					isOpen={ isLoadingRevisionWithUnsavedChanges }
+					confirmButtonText={ __( ' Discard unsaved changes' ) }
+					onConfirm={ () => restoreRevision( globalStylesRevision ) }
+					onCancel={ () =>
+						setIsLoadingRevisionWithUnsavedChanges( false )
+					}
+				>
+					<>
+						<h2>
+							{ __(
+								'Loading this revision will discard all unsaved changes.'
+							) }
+						</h2>
+						<p>
+							{ __(
+								'Do you want to replace your unsaved changes in the editor?'
+							) }
+						</p>
+					</>
+				</ConfirmDialog>
+			) }
+		</>
+	);
+}
+
+export default ScreenRevisions;
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
new file mode 100644
index 0000000000000..c4d624bf1727e
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+
+/**
+ * Returns a button label for the revision.
+ *
+ * @param {Object} revision A revision object.
+ * @return {string} Translated label.
+ */
+function getRevisionLabel( revision ) {
+	const authorDisplayName = revision?.author?.name || __( 'User' );
+	const isUnsaved = 'unsaved' === revision?.id;
+
+	if ( isUnsaved ) {
+		return sprintf(
+			/* translators: %(name)s author display name */
+			__( 'Unsaved changes by %(name)s' ),
+			{
+				name: authorDisplayName,
+			}
+		);
+	}
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( revision?.modified )
+	);
+
+	return revision?.isLatest
+		? sprintf(
+				/* translators: %(name)s author display name, %(date)s: revision creation date */
+				__( 'Changes saved by %(name)s on %(date)s (current)' ),
+				{
+					name: authorDisplayName,
+					date: formattedDate,
+				}
+		  )
+		: sprintf(
+				/* translators: %(name)s author display name, %(date)s: revision creation date */
+				__( 'Changes saved by %(name)s on %(date)s' ),
+				{
+					name: authorDisplayName,
+					date: formattedDate,
+				}
+		  );
+}
+
+/**
+ * Returns a rendered list of revisions buttons.
+ *
+ * @typedef {Object} props
+ * @property {Array<Object>} userRevisions     A collection of user revisions.
+ * @property {number}        currentRevisionId Callback fired when the modal is closed or action cancelled.
+ * @property {Function}      onChange          Callback fired when a revision is selected.
+ *
+ * @param    {props}         Component         props.
+ * @return {JSX.Element} The modal component.
+ */
+function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
+	return (
+		<ol
+			className="edit-site-global-styles-screen-revisions__revisions-list"
+			aria-label={ __( 'Global styles revisions' ) }
+			role="group"
+		>
+			{ userRevisions.map( ( revision ) => {
+				const { id, author, isLatest, modified } = revision;
+				const authorDisplayName = author?.name || __( 'User' );
+				const authorAvatar = author?.avatar_urls?.[ '48' ];
+				/*
+				 * If the currentId hasn't been selected yet, the first revision is
+				 * the current one so long as the API returns revisions in descending order.
+				 */
+				const isActive = !! currentRevisionId
+					? id === currentRevisionId
+					: isLatest;
+
+				return (
+					<li
+						className={ classnames(
+							'edit-site-global-styles-screen-revisions__revision-item',
+							{
+								'is-current': isActive,
+							}
+						) }
+						key={ id }
+					>
+						<Button
+							className="edit-site-global-styles-screen-revisions__revision-button"
+							disabled={ isActive }
+							onClick={ () => {
+								onChange( revision );
+							} }
+							label={ getRevisionLabel( revision ) }
+						>
+							<span className="edit-site-global-styles-screen-revisions__description">
+								<time dateTime={ modified }>
+									{ humanTimeDiff( modified ) }
+								</time>
+								<span className="edit-site-global-styles-screen-revisions__meta">
+									{ sprintf(
+										/* translators: %(name)s author display name */
+										__( 'Changes saved by %(name)s' ),
+										{
+											name: authorDisplayName,
+										}
+									) }
+
+									<img
+										alt={ author?.name }
+										src={ authorAvatar }
+									/>
+								</span>
+							</span>
+						</Button>
+					</li>
+				);
+			} ) }
+		</ol>
+	);
+}
+
+export default RevisionsButtons;
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
new file mode 100644
index 0000000000000..2a214663447a8
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -0,0 +1,99 @@
+
+.edit-site-global-styles-screen-revisions {
+	margin: $grid-unit-20;
+}
+
+.edit-site-global-styles-screen-revisions__revisions-list {
+	list-style: none;
+	margin: 0;
+	li {
+		margin-bottom: 0;
+		border-left: 1px solid $gray-300;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__revision-item {
+	position: relative;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
+
+	&:first-child {
+		padding-top: 0;
+	}
+
+	&:last-child {
+		padding-bottom: 0;
+	}
+
+	&::before {
+		background: $gray-300;
+		border-radius: 50%;
+		content: "\a";
+		display: inline-block;
+		height: $grid-unit-10;
+		width: $grid-unit-10;
+		position: absolute;
+		top: 50%;
+		left: 0;
+		transform: translate(-50%, -50%);
+	}
+	&.is-current::before {
+		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+}
+
+.edit-site-global-styles-screen-revisions__revision-button {
+	width: 100%;
+	height: auto;
+	display: block;
+	padding: $grid-unit-10 $grid-unit-15;
+
+	&:hover {
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
+.is-current {
+	.edit-site-global-styles-screen-revisions__revision-button {
+		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		opacity: 1;
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+	}
+
+	.edit-site-global-styles-screen-revisions__meta {
+		color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-global-styles-screen-revisions__button {
+	justify-content: center;
+	width: 100%;
+}
+
+.edit-site-global-styles-screen-revisions__description {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: $grid-unit-10;
+}
+
+.edit-site-global-styles-screen-revisions__meta {
+	color: $gray-700;
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	align-items: center;
+
+	img {
+		width: $grid-unit-20;
+		height: $grid-unit-20;
+		border-radius: 100%;
+	}
+}
+
+.edit-site-global-styles-screen-revisions__loading {
+	margin: $grid-unit-30 auto !important;
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js
new file mode 100644
index 0000000000000..d1e36ec9e595f
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js
@@ -0,0 +1,125 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useGlobalStylesRevisions from '../use-global-styles-revisions';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+jest.mock( '@wordpress/element', () => {
+	return {
+		__esModule: true,
+		...jest.requireActual( '@wordpress/element' ),
+		useContext: jest.fn().mockImplementation( () => ( {
+			user: {
+				styles: 'ice-cream',
+				settings: 'cake',
+			},
+		} ) ),
+	};
+} );
+
+describe( 'useGlobalStylesRevisions', () => {
+	const selectValue = {
+		authors: [
+			{
+				id: 4,
+				name: 'sam',
+			},
+		],
+		currentUser: {
+			name: 'fred',
+			avatar_urls: {},
+		},
+		isDirty: false,
+		revisions: [
+			{
+				id: 1,
+				author: 4,
+				settings: {},
+				styles: {},
+			},
+		],
+		isLoading: false,
+	};
+
+	it( 'returns loaded revisions with no unsaved changes', () => {
+		useSelect.mockImplementation( () => selectValue );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns loaded revisions with saved changes', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isDirty: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( false );
+		expect( hasUnsavedChanges ).toBe( true );
+		expect( revisions ).toEqual( [
+			{
+				author: {
+					avatar_urls: {},
+					name: 'fred',
+				},
+				id: 'unsaved',
+				modified: revisions[ 0 ].modified,
+				settings: 'cake',
+				styles: 'ice-cream',
+			},
+			{
+				author: {
+					id: 4,
+					name: 'sam',
+				},
+				id: 1,
+				isLatest: true,
+				settings: {},
+				styles: {},
+			},
+		] );
+	} );
+
+	it( 'returns empty revisions when still loading', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			isLoading: true,
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( true );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+} );
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
new file mode 100644
index 0000000000000..e8f714ba72e9b
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/use-global-styles-revisions.js
@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../private-apis';
+
+const SITE_EDITOR_AUTHORS_QUERY = {
+	per_page: -1,
+	_fields: 'id,name,avatar_urls',
+	context: 'view',
+	capabilities: [ 'edit_theme_options' ],
+};
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+export default function useGlobalStylesRevisions() {
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const { authors, currentUser, isDirty, revisions, isLoading } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				getCurrentUser,
+				getUsers,
+				getCurrentThemeGlobalStylesRevisions,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const _currentUser = getCurrentUser();
+			const _isDirty = dirtyEntityRecords.length > 0;
+			const globalStylesRevisions =
+				getCurrentThemeGlobalStylesRevisions() || [];
+			const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY );
+
+			return {
+				authors: _authors,
+				currentUser: _currentUser,
+				isDirty: _isDirty,
+				revisions: globalStylesRevisions,
+				isLoading:
+					! globalStylesRevisions.length ||
+					isResolving( 'getUsers', [ SITE_EDITOR_AUTHORS_QUERY ] ),
+			};
+		},
+		[]
+	);
+	return useMemo( () => {
+		let _modifiedRevisions = [];
+		if ( isLoading || ! revisions.length ) {
+			return {
+				revisions: _modifiedRevisions,
+				hasUnsavedChanges: isDirty,
+				isLoading,
+			};
+		}
+		/*
+		 * Adds a flag to the first revision, which is the latest.
+		 * Also adds author information to the revision.
+		 * Then, if there are unsaved changes in the editor, create a
+		 * new "revision" item that represents the unsaved changes.
+		 */
+		_modifiedRevisions = revisions.map( ( revision ) => {
+			return {
+				...revision,
+				author: authors.find(
+					( author ) => author.id === revision.author
+				),
+			};
+		} );
+
+		if ( _modifiedRevisions[ 0 ]?.id !== 'unsaved' ) {
+			_modifiedRevisions[ 0 ].isLatest = true;
+		}
+
+		if ( isDirty && ! isEmpty( userConfig ) && currentUser ) {
+			const unsavedRevision = {
+				id: 'unsaved',
+				styles: userConfig?.styles,
+				settings: userConfig?.settings,
+				author: {
+					name: currentUser?.name,
+					avatar_urls: currentUser?.avatar_urls,
+				},
+				modified: new Date(),
+			};
+
+			_modifiedRevisions.unshift( unsavedRevision );
+		}
+		return {
+			revisions: _modifiedRevisions,
+			hasUnsavedChanges: isDirty,
+			isLoading,
+		};
+	}, [ revisions.length, isDirty, isLoading ] );
+}
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 3372826869b3b..4a4ce14e82e6f 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -23,7 +23,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
+import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
@@ -78,7 +78,7 @@ function ScreenRoot() {
 							</NavigationButtonAsItem>
 						</ItemGroup>
 					) }
-					<ContextMenu />
+					<RootMenu />
 				</VStack>
 			</CardBody>
 
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 f28bf2bfe1706..c5e4239930649 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
@@ -39,7 +39,7 @@ const elements = {
 	},
 };
 
-function ScreenTypographyElement( { name, element } ) {
+function ScreenTypographyElement( { element } ) {
 	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
 
 	return (
@@ -50,7 +50,6 @@ function ScreenTypographyElement( { name, element } ) {
 			/>
 			<Spacer marginX={ 4 }>
 				<TypographyPreview
-					name={ name }
 					element={ element }
 					headingLevel={ headingLevel }
 				/>
@@ -100,7 +99,6 @@ function ScreenTypographyElement( { name, element } ) {
 				</Spacer>
 			) }
 			<TypographyPanel
-				name={ name }
 				element={ element }
 				headingLevel={ headingLevel }
 			/>
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 239b1e05950c2..bfbff7f180ff3 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -16,15 +16,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
-import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function Item( { name, parentMenu, element, label } ) {
-	const hasSupport = ! name;
+function Item( { parentMenu, element, label } ) {
 	const prefix =
 		element === 'text' || ! element ? '' : `elements.${ element }.`;
 	const extraStyles =
@@ -33,32 +30,15 @@ function Item( { name, parentMenu, element, label } ) {
 					textDecoration: 'underline',
 			  }
 			: {};
-	const [ fontFamily ] = useGlobalStyle(
-		prefix + 'typography.fontFamily',
-		name
-	);
-	const [ fontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ fontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
+	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
+	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
 	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing',
-		name
+		prefix + 'typography.letterSpacing'
 	);
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
+	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
 	const navigationButtonLabel = sprintf(
 		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
@@ -92,9 +72,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name, variation = '' } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-	const variationClassName = getVariationClassName( variation );
+function ScreenTypography() {
+	const parentMenu = '';
+
 	return (
 		<>
 			<ScreenHeader
@@ -104,55 +84,40 @@ function ScreenTypography( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
-			{ ! name && (
-				<div className="edit-site-global-styles-screen-typography">
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="text"
-								label={ __( 'Text' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="link"
-								label={ __( 'Links' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="heading"
-								label={ __( 'Headings' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="caption"
-								label={ __( 'Captions' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="button"
-								label={ __( 'Buttons' ) }
-							/>
-						</ItemGroup>
-					</VStack>
-				</div>
-			) }
-			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && (
-				<TypographyPanel
-					name={ name }
-					variation={ variation }
-					element="text"
-				/>
-			) }
+			<div className="edit-site-global-styles-screen-typography">
+				<VStack spacing={ 3 }>
+					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+					<ItemGroup isBordered isSeparated>
+						<Item
+							parentMenu={ parentMenu }
+							element="text"
+							label={ __( 'Text' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="link"
+							label={ __( 'Links' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="heading"
+							label={ __( 'Headings' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="caption"
+							label={ __( 'Captions' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="button"
+							label={ __( 'Buttons' ) }
+						/>
+					</ItemGroup>
+				</VStack>
+			</div>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-variations.js b/packages/edit-site/src/components/global-styles/screen-variations.js
deleted file mode 100644
index 53023115caa26..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-variations.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import {
-	VariationPanel,
-	VariationsPanel,
-	useHasVariationsPanel,
-} from './variations-panel';
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import Subtitle from './subtitle';
-
-export function ScreenVariations( { name, path = '' } ) {
-	const hasVariationsPanel = useHasVariationsPanel( name, path );
-
-	if ( ! hasVariationsPanel ) {
-		return null;
-	}
-	return (
-		<div className="edit-site-global-styles-screen-variations">
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
-				<VariationsPanel name={ name } />
-			</VStack>
-		</div>
-	);
-}
-
-export function ScreenVariation( { blockName, style } ) {
-	const { name: styleName, label: styleLabel } = style;
-	return (
-		<>
-			<ScreenHeader title={ styleLabel } />
-			<BlockPreviewPanel
-				name={ blockName }
-				variation={ `is-style-${ styleName }` }
-			/>
-			<VariationPanel blockName={ blockName } styleName={ styleName } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
index 10d93a715405f..074d86af4f80f 100644
--- a/packages/edit-site/src/components/global-styles/style-variations-container.js
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -22,14 +21,9 @@ import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function compareVariations( a, b ) {
-	return (
-		fastDeepEqual( a.styles, b.styles ) &&
-		fastDeepEqual( a.settings, b.settings )
-	);
-}
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
 
 function Variation( { variation } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
@@ -63,7 +57,7 @@ function Variation( { variation } ) {
 	};
 
 	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
+		return areGlobalStyleConfigsEqual( user, variation );
 	}, [ user, variation ] );
 
 	return (
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 ebdc59484f182..ce5aa95b7246e 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -15,32 +15,31 @@ const {
 	TypographyPanel: StylesTypographyPanel,
 } = unlock( blockEditorPrivateApis );
 
-export default function TypographyPanel( {
-	name,
-	element,
-	headingLevel,
-	variation = '',
-} ) {
+export default function TypographyPanel( { element, headingLevel } ) {
 	let prefixParts = [];
 	if ( element === 'heading' ) {
 		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
 		prefixParts = prefixParts.concat( [ 'elements', element ] );
 	}
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+	const [ style ] = useGlobalStyle( prefix, undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle(
+		prefix,
+		undefined,
+		'all',
+		{
+			shouldDecodeEncode: false,
+		}
+	);
+	const [ rawSettings ] = useGlobalSetting( '' );
 	const usedElement = element === 'heading' ? headingLevel : element;
 	const settings = useSettingsForBlockElement(
 		rawSettings,
-		name,
+		undefined,
 		usedElement
 	);
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index a536014180a27..133e8d61d1148 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -14,7 +14,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -31,17 +31,14 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
-import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import { ScreenVariation } from './screen-variations';
-import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
+import ScreenRevisions from './screen-revisions';
 import { unlock } from '../../private-apis';
-import ScreenEffects from './screen-effects';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -50,7 +47,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 
 function GlobalStylesActionMenu() {
 	const { toggle } = useDispatch( preferencesStore );
-	const { canEditCSS } = useSelect( ( select ) => {
+	const { canEditCSS, revisionsCount } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
 
@@ -62,12 +59,23 @@ function GlobalStylesActionMenu() {
 		return {
 			canEditCSS:
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
 	const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const loadCustomCSS = () => goTo( '/css' );
+	const loadRevisions = () => {
+		goTo( '/revisions' );
+		setEditorCanvasContainerView( 'global-styles-revisions' );
+	};
+	const hasRevisions = revisionsCount >= 2;
+
 	return (
 		<GlobalStylesMenuFill>
 			<DropdownMenu
@@ -92,6 +100,22 @@ function GlobalStylesActionMenu() {
 								},
 						  ]
 						: [] ),
+					...( hasRevisions
+						? [
+								{
+									title: sprintf(
+										/* translators: %d: number of revisions */
+										_n(
+											'%d Revision',
+											'%d Revisions',
+											revisionsCount
+										),
+										revisionsCount
+									),
+									onClick: loadRevisions,
+								},
+						  ]
+						: [] ),
 				] }
 			/>
 		</GlobalStylesMenuFill>
@@ -112,33 +136,6 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function BlockStyleVariationsScreens( { name } ) {
-	const blockStyleVariations = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	if ( ! blockStyleVariations?.length ) {
-		return null;
-	}
-
-	return blockStyleVariations.map( ( variation ) => (
-		<ContextScreens
-			key={ variation.name + name }
-			name={ name }
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( name ) +
-				'/variations/' +
-				encodeURIComponent( variation.name )
-			}
-			variation={ variation.name }
-		/>
-	) );
-}
-
 function BlockStylesNavigationScreens( {
 	parentMenu,
 	blockStyles,
@@ -149,12 +146,12 @@ function BlockStylesNavigationScreens( {
 			key={ index }
 			path={ parentMenu + '/variations/' + style.name }
 		>
-			<ScreenVariation blockName={ blockName } style={ style } />
+			<ScreenBlock name={ blockName } variation={ style.name } />
 		</GlobalStylesNavigationScreen>
 	) );
 }
 
-function ContextScreens( { name, parentMenu = '', variation = '' } ) {
+function ContextScreens( { name, parentMenu = '' } ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -165,70 +162,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 
 	return (
 		<>
-			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/text' }
-			>
-				<ScreenTypographyElement name={ name } element="text" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/link' }
-			>
-				<ScreenTypographyElement name={ name } element="link" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/heading' }
-			>
-				<ScreenTypographyElement name={ name } element="heading" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/caption' }
-			>
-				<ScreenTypographyElement name={ name } element="caption" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/button' }
-			>
-				<ScreenTypographyElement name={ name } element="button" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/palette' }
 			>
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
-				<ScreenFilters name={ name } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
-				<ScreenEffects name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
-				<ScreenCSS name={ name } />
-			</GlobalStylesNavigationScreen>
-
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
 					parentMenu={ parentMenu }
@@ -320,6 +259,46 @@ function GlobalStylesUI() {
 				<ScreenBlockList />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography">
+				<ScreenTypography />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/text">
+				<ScreenTypographyElement element="text" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/link">
+				<ScreenTypographyElement element="link" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/heading">
+				<ScreenTypographyElement element="heading" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/caption">
+				<ScreenTypographyElement element="caption" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/button">
+				<ScreenTypographyElement element="button" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/colors">
+				<ScreenColors />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/layout">
+				<ScreenLayout />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path={ '/revisions' }>
+				<ScreenRevisions />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
@@ -339,14 +318,6 @@ function GlobalStylesUI() {
 				/>
 			) ) }
 
-			{ blocks.map( ( block, index ) => {
-				return (
-					<BlockStyleVariationsScreens
-						key={ 'screens-block-styles-' + block.name + index }
-						name={ block.name }
-					/>
-				);
-			} ) }
 			{ 'style-book' === editorCanvasContainerView && (
 				<GlobalStylesStyleBook />
 			) }
diff --git a/packages/edit-site/src/components/global-styles/variations-panel.js b/packages/edit-site/src/components/global-styles/variations-panel.js
index 7cfeb4301750d..823e27038defb 100644
--- a/packages/edit-site/src/components/global-styles/variations-panel.js
+++ b/packages/edit-site/src/components/global-styles/variations-panel.js
@@ -9,14 +9,12 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  */
 
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
 
 function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );
 }
 
-export function useHasVariationsPanel( name, parentMenu = '' ) {
-	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+export function useBlockVariations( name ) {
 	const blockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -25,18 +23,11 @@ export function useHasVariationsPanel( name, parentMenu = '' ) {
 		[ name ]
 	);
 	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+	return coreBlockStyles;
 }
 
 export function VariationsPanel( { name } ) {
-	const blockStyles = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	const coreBlockStyles = useBlockVariations( name );
 
 	return (
 		<ItemGroup isBordered isSeparated>
@@ -62,17 +53,3 @@ export function VariationsPanel( { name } ) {
 		</ItemGroup>
 	);
 }
-
-export function VariationPanel( { blockName, styleName } ) {
-	return (
-		<ContextMenu
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( blockName ) +
-				'/variations/' +
-				encodeURIComponent( styleName )
-			}
-			name={ blockName }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index 3f931ef0fb60f..94ff901203e0c 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -14,6 +14,7 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -125,6 +126,19 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = templateType === 'wp_template_part';
@@ -150,6 +164,9 @@ export default function HeaderEditMode() {
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
+					shouldUseKeyboardFocusShortcut={
+						! blockToolbarCanBeFocused
+					}
 				>
 					<div className="edit-site-header-edit-mode__toolbar">
 						<ToolbarItem
diff --git a/packages/edit-site/src/components/keyboard-shortcuts/register.js b/packages/edit-site/src/components/keyboard-shortcuts/register.js
index ba164cf05b0a3..0574125ba476b 100644
--- a/packages/edit-site/src/components/keyboard-shortcuts/register.js
+++ b/packages/edit-site/src/components/keyboard-shortcuts/register.js
@@ -66,7 +66,7 @@ function KeyboardShortcutsRegister() {
 		registerShortcut( {
 			name: 'core/edit-site/toggle-block-settings-sidebar',
 			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
+			description: __( 'Show or hide the Settings sidebar.' ),
 			keyCombination: {
 				modifier: 'primaryShift',
 				character: ',',
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
index abc33201d6c0a..446556719c923 100644
--- a/packages/edit-site/src/components/layout/index.js
+++ b/packages/edit-site/src/components/layout/index.js
@@ -252,7 +252,7 @@ export default function Layout() {
 								}
 							>
 								<NavigableRegion
-									ariaLabel={ __( 'Navigation sidebar' ) }
+									ariaLabel={ __( 'Navigation' ) }
 								>
 									<Sidebar />
 								</NavigableRegion>
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index de106e98ee399..89a6fa3c9ccf1 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -20,7 +20,7 @@
 	}
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
+		width: calc(#{$nav-sidebar-width} - #{$canvas-padding});
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -105,11 +105,10 @@
 	left: 0;
 	bottom: 0;
 	width: 100%;
+	overflow: hidden;
 
 	& > div {
 		color: $gray-900;
-		background: $white;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
 	}
 
 	@include break-medium {
@@ -135,7 +134,6 @@
 
 		& > div {
 			border-radius: 0;
-			box-shadow: none;
 		}
 	}
 }
diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index 8682b9f79181f..72b13b3a588be 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -33,6 +33,10 @@
 
 .edit-site {
 	.edit-site-list {
+		background: $white;
+		border-radius: $radius-block-ui * 4;
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
 		.interface-interface-skeleton__editor {
 			min-width: 100%;
 
diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
index 358807dc2e076..59ff5a9187ab0 100644
--- a/packages/edit-site/src/components/list/table.js
+++ b/packages/edit-site/src/components/list/table.js
@@ -61,7 +61,9 @@ export default function Table( { templateType } ) {
 	}
 
 	const sortedTemplates = [ ...templates ];
-	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
 
 	return (
 		// These explicit aria roles are needed for Safari.
diff --git a/packages/edit-site/src/components/plugin-template-setting-panel/index.js b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
new file mode 100644
index 0000000000000..6a059dc2520ad
--- /dev/null
+++ b/packages/edit-site/src/components/plugin-template-setting-panel/index.js
@@ -0,0 +1,33 @@
+/**
+ * Defines an extensibility slot for the Template sidebar.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginTemplateSettingPanel' );
+
+const PluginTemplateSettingPanel = Fill;
+PluginTemplateSettingPanel.Slot = Slot;
+
+/**
+ * Renders items in the Template Sidebar below the main information
+ * like the Template Card.
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { PluginTemplateSettingPanel } from '@wordpress/edit-site';
+ *
+ * const MyTemplateSettingTest = () => (
+ * 		<PluginTemplateSettingPanel>
+ *			<p>Hello, World!</p>
+ *		</PluginTemplateSettingPanel>
+ *	);
+ * ```
+ *
+ * @return {WPComponent} The component to be rendered.
+ */
+export default PluginTemplateSettingPanel;
diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js
new file mode 100644
index 0000000000000..347d05094ef37
--- /dev/null
+++ b/packages/edit-site/src/components/revisions/index.js
@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../private-apis';
+import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
+import EditorCanvasContainer from '../editor-canvas-container';
+
+const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
+	unlock( blockEditorPrivateApis );
+
+function Revisions( { onClose, userConfig, blocks } ) {
+	const { baseConfig } = useSelect(
+		( select ) => ( {
+			baseConfig:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		} ),
+		[]
+	);
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isEmpty( userConfig ) && ! isEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
+
+	const renderedBlocksArray = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const editorStyles =
+		! isEmpty( globalStyles ) && ! isEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
+	return (
+		<EditorCanvasContainer
+			title={ __( 'Revisions' ) }
+			onClose={ onClose }
+			closeButtonLabel={ __( 'Close revisions' ) }
+		>
+			<Iframe
+				className="edit-site-revisions__iframe"
+				name="revisions"
+				tabIndex={ 0 }
+			>
+				<EditorStyles styles={ editorStyles } />
+				<style>
+					{
+						// Forming a "block formatting context" to prevent margin collapsing.
+						// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+						`.is-root-container { display: flow-root; } body { position: relative; padding: 32px; }`
+					}
+				</style>
+				<Disabled className="edit-site-revisions__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocksArray }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</Iframe>
+		</EditorCanvasContainer>
+	);
+}
+
+export default Revisions;
diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js
index 4e4c6dfd35f65..0d78e32307797 100644
--- a/packages/edit-site/src/components/save-button/index.js
+++ b/packages/edit-site/src/components/save-button/index.js
@@ -37,14 +37,20 @@ export default function SaveButton( {
 	const activateSaveEnabled = isPreviewingTheme() || isDirty;
 	const disabled = isSaving || ! activateSaveEnabled;
 
-	let label;
-	if ( isPreviewingTheme() && isDirty ) {
-		label = __( 'Activate & Save' );
-	} else if ( isPreviewingTheme() ) {
-		label = __( 'Activate' );
-	} else {
-		label = __( 'Save' );
-	}
+	const getLabel = () => {
+		if ( disabled ) {
+			return __( 'Saved' );
+		}
+
+		if ( isPreviewingTheme() && isDirty ) {
+			return __( 'Activate & Save' );
+		} else if ( isPreviewingTheme() ) {
+			return __( 'Activate' );
+		}
+
+		return __( 'Save' );
+	};
+	const label = getLabel();
 
 	return (
 		<Button
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 398db8f3b40fa..fa9516f3599d9 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -66,7 +66,7 @@ export default function SavePanel() {
 			className={ classnames( 'edit-site-layout__actions', {
 				'is-entity-save-view-open': isSaveViewOpen,
 			} ) }
-			ariaLabel={ __( 'Save sidebar' ) }
+			ariaLabel={ __( 'Save panel' ) }
 		>
 			{ isSaveViewOpen ? (
 				entitySavedStates
diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
index dc33ffb649c7d..37c85216b9a35 100644
--- a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -20,6 +19,8 @@ import { ESCAPE } from '@wordpress/keycodes';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 
+const { PrivateListView } = unlock( blockEditorPrivateApis );
+
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 
@@ -32,13 +33,9 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
-	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-site-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
@@ -46,10 +43,10 @@ export default function ListViewSidebar() {
 				className="edit-site-editor__list-view-panel-header"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
+					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
index b4513e3df5e1a..ae124422f66ce 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/global-styles-sidebar.js
@@ -56,7 +56,7 @@ export default function GlobalStylesSidebar() {
 			identifier="edit-site/global-styles"
 			title={ __( 'Styles' ) }
 			icon={ styles }
-			closeLabel={ __( 'Close Styles sidebar' ) }
+			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex className="edit-site-global-styles-sidebar__header">
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
index 48574b783f5a2..5086981f87144 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelBody } from '@wordpress/components';
+import { createSlotFill, PanelBody, PanelRow } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { drawerLeft, drawerRight } from '@wordpress/icons';
-import { useEffect, Fragment } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -16,7 +16,9 @@ import DefaultSidebar from './default-sidebar';
 import GlobalStylesSidebar from './global-styles-sidebar';
 import { STORE_NAME } from '../../store/constants';
 import SettingsHeader from './settings-header';
+import LastRevision from './template-revisions';
 import TemplateCard from './template-card';
+import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from './constants';
 import { store as editSiteStore } from '../../store';
 
@@ -69,14 +71,23 @@ export function SidebarComplementaryAreaFills() {
 				identifier={ sidebarName }
 				title={ __( 'Settings' ) }
 				icon={ isRTL() ? drawerLeft : drawerRight }
-				closeLabel={ __( 'Close settings' ) }
+				closeLabel={ __( 'Close Settings' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
 				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
-					<PanelBody>
-						<TemplateCard />
-					</PanelBody>
+					<>
+						<PanelBody>
+							<TemplateCard />
+							<PanelRow
+								header={ __( 'Editing history' ) }
+								className="edit-site-template-revisions"
+							>
+								<LastRevision />
+							</PanelRow>
+						</PanelBody>
+						<PluginTemplateSettingPanel.Slot />
+					</>
 				) }
 				{ sidebarName === SIDEBAR_BLOCK && (
 					<InspectorSlot bubblesVirtually />
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js
new file mode 100644
index 0000000000000..c44b8c9c85c7f
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-edit-mode/sidebar-fixed-bottom.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME = 'SidebarFixedBottom';
+const { Slot: SidebarFixedBottomSlot, Fill: SidebarFixedBottomFill } =
+	createPrivateSlotFill( SIDEBAR_FIXED_BOTTOM_SLOT_FILL_NAME );
+
+export default function SidebarFixedBottom( { children } ) {
+	return (
+		<SidebarFixedBottomFill>
+			<div className="edit-site-sidebar-fixed-bottom-slot">
+				{ children }
+			</div>
+		</SidebarFixedBottomFill>
+	);
+}
+
+export { SidebarFixedBottomSlot };
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
index eeb5dc2d170cd..544c38e0ef07b 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/style.scss
@@ -99,3 +99,13 @@
 		}
 	}
 }
+
+.edit-site-sidebar-fixed-bottom-slot {
+	position: sticky;
+	bottom: 0;
+	background: $white;
+	display: flex;
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	box-sizing: content-box;
+}
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
index da03a769b306c..d43dca3b803f5 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/template-card/index.js
@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { PanelRow, Icon } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -14,7 +13,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
-import LastRevision from './last-revision';
 
 export default function TemplateCard() {
 	const {
@@ -56,12 +54,6 @@ export default function TemplateCard() {
 					<TemplateAreas />
 				</div>
 			</div>
-			<PanelRow
-				header={ __( 'Editing history' ) }
-				className="edit-site-template-revisions"
-			>
-				<LastRevision />
-			</PanelRow>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-card/last-revision.js b/packages/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js
similarity index 100%
rename from packages/edit-site/src/components/sidebar-edit-mode/template-card/last-revision.js
rename to packages/edit-site/src/components/sidebar-edit-mode/template-revisions/index.js
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index 8f419c0919666..a35e07220d52c 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
+import { layout, symbol, navigation, styles, page } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -17,23 +17,33 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
 export default function SidebarNavigationScreenMain() {
-	const hasNavigationMenus = useSelect( ( select ) => {
-		// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-		// to avoid double network calls.
-		const navigationMenus = select( coreStore ).getEntityRecords(
-			'postType',
-			'wp_navigation',
-			{
-				per_page: 1,
-				status: 'publish',
-				order: 'desc',
-				orderby: 'date',
-			}
-		);
-
-		return navigationMenus?.length > 0;
-	} );
-
+	const { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecords,
+				__experimentalGetCurrentThemeGlobalStylesVariations,
+			} = select( coreStore );
+			// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
+			// to avoid double network calls.
+			const navigationMenus = getEntityRecords(
+				'postType',
+				'wp_navigation',
+				{
+					per_page: 1,
+					status: 'publish',
+					order: 'desc',
+					orderby: 'date',
+				}
+			);
+			return {
+				hasNavigationMenus: !! navigationMenus?.length,
+				hasGlobalStyleVariations:
+					!! __experimentalGetCurrentThemeGlobalStylesVariations()
+						?.length,
+			};
+		},
+		[]
+	);
 	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
 		? hasNavigationMenus
 		: false;
@@ -56,13 +66,24 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
+					{ hasGlobalStyleVariations && (
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_global_styles"
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</NavigatorButton>
+					) }
+
 					<NavigatorButton
 						as={ SidebarNavigationItem }
-						path="/wp_global_styles"
+						path="/page"
 						withChevron
-						icon={ styles }
+						icon={ page }
 					>
-						{ __( 'Styles' ) }
+						{ __( 'Pages' ) }
 					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
@@ -76,7 +97,7 @@ export default function SidebarNavigationScreenMain() {
 						as={ SidebarNavigationItem }
 						path="/wp_template_part"
 						withChevron
-						icon={ symbolFilled }
+						icon={ symbol }
 					>
 						{ __( 'Template Parts' ) }
 					</NavigatorButton>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
index 549ed42d408a6..35e662a23c33d 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -36,15 +36,9 @@ export default function SidebarNavigationScreenNavigationItem() {
 					icon={ pencil }
 				/>
 			}
-			description={
-				postType === 'page'
-					? __(
-							'Pages are static and are not listed by date. Pages do not use tags or categories.'
-					  )
-					: __(
-							'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
-					  )
-			}
+			description={ __(
+				'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
+			) }
 			content={
 				<>
 					{ record?.link ? (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
index 8cf795adad096..e6b1d9069ca57 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -14,7 +14,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import NavigationMenuContent from './navigation-menu-content';
-import { NavigationMenuLoader } from './loader';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import {
@@ -75,7 +74,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		];
 	}, [ firstNavigationMenu ] );
 
-	const isLoading = ! hasResolvedNavigationMenus;
 	const hasNavigationMenus = !! navigationMenus?.length;
 
 	const onSelect = useCallback(
@@ -116,14 +114,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		);
 	}
 
-	if ( ! hasResolvedNavigationMenus || isLoading ) {
-		return (
-			<SidebarNavigationScreenWrapper>
-				<NavigationMenuLoader />
-			</SidebarNavigationScreenWrapper>
-		);
-	}
-
 	return (
 		<BlockEditorProvider
 			settings={ storedSettings }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
new file mode 100644
index 0000000000000..ab8c70fc852a6
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import {
+	addSubmenu,
+	chevronUp,
+	chevronDown,
+	moreVertical,
+} from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( { block, onClose, expandedState, expand } ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					insertBlock(
+						newLink,
+						block.innerBlocks.length,
+						clientId,
+						updateSelectionOnInsert
+					);
+				} else {
+					// Convert to a submenu if the block currently isn't one.
+					const newSubmenu = createBlock(
+						'core/navigation-submenu',
+						block.attributes,
+						block.innerBlocks
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
+export default function LeafMoreMenu( props ) {
+	const { block } = props;
+	const { clientId } = block;
+	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
+		useDispatch( blockEditorStore );
+
+	const removeLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<MenuGroup>
+						<MenuItem
+							icon={ chevronUp }
+							onClick={ () => {
+								moveBlocksUp( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move up' ) }
+						</MenuItem>
+						<MenuItem
+							icon={ chevronDown }
+							onClick={ () => {
+								moveBlocksDown( [ clientId ], rootClientId );
+								onClose();
+							} }
+						>
+							{ __( 'Move down' ) }
+						</MenuItem>
+						<AddSubmenuItem
+							block={ block }
+							onClose={ onClose }
+							expanded
+							expandedState={ props.expandedState }
+							expand={ props.expand }
+						/>
+					</MenuGroup>
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								removeBlocks( [ clientId ], false );
+								onClose();
+							} }
+						>
+							{ removeLabel }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js
deleted file mode 100644
index b4aaf976111a7..0000000000000
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/loader.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function NavigationMenuLoader() {
-	return (
-		<>
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-			<div className="edit-site-sidebar-navigation-screen-navigation-menus__placeholder" />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
index 2981c57c19fd1..b205e77a65d73 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
+import { Popover, VisuallyHidden } from '@wordpress/components';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useCallback, useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
@@ -19,7 +19,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import { NavigationMenuLoader } from './loader';
+import LeafMoreMenu from './leaf-more-menu';
 
 function CustomLinkAdditionalBlockUI( { block, onClose } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -144,8 +144,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		};
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
-	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	const offCanvasOnselect = useCallback(
 		( block ) => {
 			if (
@@ -179,25 +178,24 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	// For example a navigation page list load its items has an effect on edit to load its items.
 	return (
 		<>
-			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
-				<OffCanvasEditor
+				<PrivateListView
 					blocks={
 						isSinglePageList
 							? clientIdsTree[ 0 ].innerBlocks
 							: clientIdsTree
 					}
 					onSelect={ offCanvasOnselect }
-					LeafMoreMenu={ LeafMoreMenu }
+					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
-			<div style={ { visibility: 'hidden' } }>
+			<VisuallyHidden aria-hidden="true">
 				<BlockTools>
 					<BlockList />
 				</BlockTools>
-			</div>
+			</VisuallyHidden>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
index 245f9d867bd7e..b85794feacf2a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss
@@ -2,26 +2,6 @@
 	margin: 0 0 $grid-unit-40 $grid-unit-20;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__placeholder {
-	padding: $grid-unit-10;
-	margin: $grid-unit-10;
-	background-color: $gray-100;
-	animation: loadingpulse 1s linear infinite;
-	animation-delay: 0.5s; // avoid animating for fast network responses
-}
-
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
 .edit-site-sidebar-navigation-screen-navigation-menus__content {
 	.offcanvas-editor-list-view-leaf {
 		max-width: calc(100% - #{ $grid-unit-05 });
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
new file mode 100644
index 0000000000000..5acfc98ffe52c
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import {
+	__experimentalUseNavigator as useNavigator,
+	ExternalLink,
+} from '@wordpress/components';
+import { useEntityRecord } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { pencil } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenPage() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		params: { postId },
+	} = useNavigator();
+	const { record } = useEntityRecord( 'postType', 'page', postId );
+
+	return (
+		<SidebarNavigationScreen
+			title={ record ? decodeEntities( record?.title?.rendered ) : null }
+			actions={
+				<SidebarButton
+					onClick={ () => setCanvasMode( 'edit' ) }
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
+			}
+			description={ __(
+				'Pages are static and are not listed by date. Pages do not use tags or categories.'
+			) }
+			content={
+				<>
+					{ record?.link ? (
+						<ExternalLink
+							className="edit-site-sidebar-navigation-screen__page-link"
+							href={ record.link }
+						>
+							{ record.link }
+						</ExternalLink>
+					) : null }
+					{ record
+						? decodeEntities( record?.description?.rendered )
+						: null }
+				</>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
new file mode 100644
index 0000000000000..5f4958f44d251
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { useLink } from '../routes/link';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
+
+const PageItem = ( { postId, ...props } ) => {
+	const linkInfo = useLink( {
+		postType: 'page',
+		postId,
+	} );
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
+export default function SidebarNavigationScreenPages() {
+	const { records: pages, isResolving: isLoading } = useEntityRecords(
+		'postType',
+		'page'
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Pages' ) }
+			description={ __( 'Browse and edit pages on your site.' ) }
+			content={
+				<>
+					{ isLoading && (
+						<ItemGroup>
+							<Item>{ __( 'Loading pages' ) }</Item>
+						</ItemGroup>
+					) }
+					{ ! isLoading && (
+						<>
+							<SidebarNavigationSubtitle>
+								{ __( 'Recent' ) }
+							</SidebarNavigationSubtitle>
+							<ItemGroup>
+								{ ! pages?.length && (
+									<Item>{ __( 'No page found' ) }</Item>
+								) }
+								{ pages?.map( ( page ) => (
+									<PageItem
+										postId={ page.id }
+										key={ page.id }
+										withChevron
+									>
+										{ decodeEntities(
+											page.title?.rendered
+										) ?? __( '(no title)' ) }
+									</PageItem>
+								) ) }
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-pages__see-all"
+									href="edit.php?post_type=page"
+									onClick={ () => {
+										document.location =
+											'edit.php?post_type=page';
+									} }
+								>
+									{ __( 'Manage all pages' ) }
+								</SidebarNavigationItem>
+							</ItemGroup>
+						</>
+					) }
+				</>
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss
new file mode 100644
index 0000000000000..7bbdd103b6bce
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/style.scss
@@ -0,0 +1,4 @@
+.edit-site-sidebar-navigation-screen-pages__see-all {
+	/* Overrides the margin that comes from the Item component */
+	margin-top: $grid-unit-20 !important;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
index 5a6dc4a37fa9a..8c9c563888473 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -74,7 +74,9 @@ export default function SidebarNavigationScreenTemplates() {
 		}
 	);
 	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
 
 	const browseAllLink = useLink( {
 		path: '/' + postType + '/all',
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index 6c7b6bd5a3b6f..77b9bedba3e65 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -50,7 +50,7 @@ export default function SidebarNavigationScreen( {
 					<NavigatorToParentButton
 						as={ SidebarButton }
 						icon={ isRTL() ? chevronRight : chevronLeft }
-						aria-label={ __( 'Back' ) }
+						label={ __( 'Back' ) }
 					/>
 				) : (
 					<SidebarButton
diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js
new file mode 100644
index 0000000000000..2a20f31ce7fb4
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js
@@ -0,0 +1,5 @@
+export default function SidebarNavigationSubtitle( { children } ) {
+	return (
+		<h3 className="edit-site-sidebar-navigation-subtitle">{ children }</h3>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss
new file mode 100644
index 0000000000000..735145ca1d80c
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss
@@ -0,0 +1,7 @@
+.edit-site-sidebar-navigation-subtitle {
+	color: $gray-100;
+	text-transform: uppercase;
+	font-weight: 500;
+	font-size: 11px;
+	padding: $grid-unit-20 0 0 $grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
index 91bb2637f12b1..9571d6b54b403 100644
--- a/packages/edit-site/src/components/sidebar/index.js
+++ b/packages/edit-site/src/components/sidebar/index.js
@@ -23,6 +23,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 import { unlock } from '../../private-apis';
+import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
+import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -43,6 +45,12 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>
+			<NavigatorScreen path="/page">
+				<SidebarNavigationScreenPages />
+			</NavigatorScreen>
+			<NavigatorScreen path="/page/:postId">
+				<SidebarNavigationScreenPage />
+			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template|wp_template_part)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js
index c20a6ad202f5d..eadd9bbad68b9 100644
--- a/packages/edit-site/src/components/site-hub/index.js
+++ b/packages/edit-site/src/components/site-hub/index.js
@@ -19,6 +19,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { forwardRef } from '@wordpress/element';
+import { search } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -27,30 +29,46 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
 
+const { store: commandsStore } = unlock( commandsPrivateApis );
+
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
+
 		return {
 			canvasMode: getCanvasMode(),
-			dashboardLink: getSettings().__experimentalDashboardLink,
+			dashboardLink:
+				getSettings().__experimentalDashboardLink || 'index.php',
 		};
 	}, [] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const siteIconButtonProps = {
-		label: __( 'Open Admin Sidebar' ),
-		onClick: () => {
-			if ( canvasMode === 'edit' ) {
-				clearSelectedBlock();
-				setCanvasMode( 'view' );
-			}
-		},
-	};
+	const isBackToDashboardButton = canvasMode === 'view';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink,
+				label: __( 'Go back to the Dashboard' ),
+		  }
+		: {
+				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
+				role: 'button',
+				label: __( 'Open Navigation' ),
+				onClick: ( event ) => {
+					event.preventDefault();
+					if ( canvasMode === 'edit' ) {
+						clearSelectedBlock();
+						setCanvasMode( 'view' );
+					}
+				},
+		  };
+
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -69,65 +87,78 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
-				spacing="0"
-			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+			<HStack justify="space-between" alignment="center">
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
 					>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<motion.div
+								initial={ false }
+								animate={ {
+									scale: canvasMode === 'view' ? 0.5 : 1,
+								} }
+								whileHover={ {
+									scale: canvasMode === 'view' ? 0.5 : 0.96,
+								} }
+								transition={ {
+									type: 'tween',
+									duration: disableMotion
+										? 0
+										: HUB_ANIMATION_DURATION,
+									ease: 'easeOut',
+								} }
+							>
+								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							</motion.div>
+						</Button>
+					</motion.div>
+
+					<AnimatePresence>
 						<motion.div
-							initial={ false }
+							layout={ canvasMode === 'edit' }
 							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
+								opacity: canvasMode === 'view' ? 1 : 0,
 							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							exit={ {
+								opacity: 0,
 							} }
+							className="edit-site-site-hub__site-title"
 							transition={ {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
+								duration: disableMotion ? 0 : 0.2,
 								ease: 'easeOut',
+								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							{ decodeEntities( siteTitle ) }
 						</motion.div>
-					</Button>
-				</motion.div>
-
-				<AnimatePresence>
-					<motion.div
-						layout={ canvasMode === 'edit' }
-						animate={ {
-							opacity: canvasMode === 'view' ? 1 : 0,
-						} }
-						exit={ {
-							opacity: 0,
-						} }
-						className="edit-site-site-hub__site-title"
-						transition={ {
-							type: 'tween',
-							duration: disableMotion ? 0 : 0.2,
-							ease: 'easeOut',
-							delay: canvasMode === 'view' ? 0.1 : 0,
-						} }
-					>
-						{ decodeEntities( siteTitle ) }
-					</motion.div>
-				</AnimatePresence>
+					</AnimatePresence>
+				</HStack>
+				{ window?.__experimentalEnableCommandCenter &&
+					canvasMode === 'view' && (
+						<Button
+							className="edit-site-site-hub_toggle-command-center"
+							icon={ search }
+							onClick={ () => openCommandCenter() }
+							label={ __( 'Open command center' ) }
+						/>
+					) }
 			</HStack>
 		</motion.div>
 	);
diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss
index 885c24e38b788..90a9c37011cf5 100644
--- a/packages/edit-site/src/components/site-hub/style.scss
+++ b/packages/edit-site/src/components/site-hub/style.scss
@@ -30,3 +30,11 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 }
+
+.edit-site-site-hub_toggle-command-center {
+	color: $white;
+
+	&:hover {
+		color: $white;
+	}
+}
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
index 47aeff3652aa9..04cdef425716f 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
@@ -20,6 +20,7 @@ export function getPathFromURL( urlParams ) {
 		switch ( urlParams.postType ) {
 			case 'wp_template':
 			case 'wp_template_part':
+			case 'page':
 				path = `/${ encodeURIComponent(
 					urlParams.postType
 				) }/${ encodeURIComponent( urlParams.postId ) }`;
@@ -76,6 +77,15 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if (
+			navigatorLocation.path.startsWith( '/page/' ) &&
+			navigatorParams?.postId
+		) {
+			updateUrlParams( {
+				postType: 'page',
+				postId: navigatorParams?.postId,
+				path: undefined,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index 264288b5ec627..e696a441bb10d 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -105,3 +105,4 @@ export function reinitializeEditor() {
 export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
+export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 30abf4057b80e..679d13a08277a 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -5,6 +5,7 @@
 @import "./components/canvas-spinner/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
+@import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
@@ -25,8 +26,10 @@
 @import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
+@import "./components/sidebar-navigation-screen-pages/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";
+@import "./components/sidebar-navigation-subtitle/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
@@ -85,7 +88,7 @@ body.site-editor-php {
 	}
 
 	.interface-interface-skeleton__content {
-		background-color: $gray-800;
+		background-color: $gray-900;
 	}
 }
 
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index 89a3bccbed0b6..e1cc45f4b2bc3 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index ab89de70cdd2a..6540c1f7d9b93 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "5.9.0",
+	"version": "5.10.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js
index 8e8580674d173..8bd1e226aeda6 100644
--- a/packages/edit-widgets/src/components/header/index.js
+++ b/packages/edit-widgets/src/components/header/index.js
@@ -7,6 +7,7 @@ import { Button, ToolbarItem, VisuallyHidden } from '@wordpress/components';
 import {
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 import { listView, plus } from '@wordpress/icons';
@@ -22,6 +23,7 @@ import RedoButton from './undo-redo/redo';
 import MoreMenu from '../more-menu';
 import useLastSelectedWidgetArea from '../../hooks/use-last-selected-widget-area';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 function Header() {
 	const isMediumViewport = useViewportMatch( 'medium' );
@@ -70,6 +72,19 @@ function Header() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	return (
 		<>
 			<div className="edit-widgets-header">
@@ -90,6 +105,9 @@ function Header() {
 					<NavigableToolbar
 						className="edit-widgets-header-toolbar"
 						aria-label={ __( 'Document tools' ) }
+						shouldUseKeyboardFocusShortcut={
+							! blockToolbarCanBeFocused
+						}
 					>
 						<ToolbarItem
 							ref={ inserterButton }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 279182e48a624..06ea6bf19d777 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -5,6 +5,7 @@
 	height: $header-height;
 	padding: 0 $grid-unit-20;
 	overflow: auto;
+	background: #fff;
 
 	@include break-small {
 		overflow: visible;
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index 1aed3d3eefc86..fe1edbae23295 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -22,3 +22,15 @@
 		height: 100%;
 	}
 }
+
+.blocks-widgets-container {
+	// making the header be lower than the content
+	// so the fixed toolbar can be positioned on top of it
+	// but only on desktop
+	@include break-medium() {
+		.interface-interface-skeleton__header:not(:focus-within) {
+			z-index: 19;
+		}
+	}
+
+}
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index ee88c3088da11..6e828533ddb6a 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -6,7 +6,6 @@ import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
-	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -32,13 +31,9 @@ export default function ListViewSidebar() {
 		}
 	}
 
-	const instanceId = useInstanceId( ListViewSidebar );
-	const labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;
-
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
-			aria-labelledby={ labelId }
 			className="edit-widgets-editor__list-view-panel"
 			onKeyDown={ closeOnEscape }
 		>
@@ -46,10 +41,10 @@ export default function ListViewSidebar() {
 				className="edit-widgets-editor__list-view-panel-header"
 				ref={ headerFocusReturnRef }
 			>
-				<strong id={ labelId }>{ __( 'List View' ) }</strong>
+				<strong>{ __( 'List View' ) }</strong>
 				<Button
 					icon={ closeSmall }
-					label={ __( 'Close List View Sidebar' ) }
+					label={ __( 'Close' ) }
 					onClick={ () => setIsListViewOpened( false ) }
 				/>
 			</div>
diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js
index a4268df794462..087f781f69a5b 100644
--- a/packages/edit-widgets/src/components/sidebar/index.js
+++ b/packages/edit-widgets/src/components/sidebar/index.js
@@ -165,7 +165,7 @@ export default function Sidebar() {
 			headerClassName="edit-widgets-sidebar__panel-tabs"
 			/* translators: button label text should, if possible, be under 16 characters. */
 			title={ __( 'Settings' ) }
-			closeLabel={ __( 'Close settings' ) }
+			closeLabel={ __( 'Close Settings' ) }
 			scope="core/edit-widgets"
 			identifier={ currentArea }
 			icon={ cog }
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index cefee1c7b0aa7..61660ee9dcdfe 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 13.10.0 (2023-05-10)
+
 ## 13.9.0 (2023-04-26)
 
 ## 13.8.0 (2023-04-12)
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 078a6587b35b2..3a383c3773d63 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.9.0",
+	"version": "13.10.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
index b46e77ea6a572..9304115b0b7f1 100644
--- a/packages/editor/src/components/post-featured-image/index.js
+++ b/packages/editor/src/components/post-featured-image/index.js
@@ -10,9 +10,10 @@ import {
 	ResponsiveWrapper,
 	withNotices,
 	withFilters,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { useSelect, withDispatch, withSelect } from '@wordpress/data';
 import {
@@ -33,7 +34,6 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 // Used when labels from post type were not yet loaded or when they are not present.
 const DEFAULT_FEATURE_IMAGE_LABEL = __( 'Featured image' );
 const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
-const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove image' );
 
 const instructions = (
 	<p>
@@ -96,6 +96,7 @@ function PostFeaturedImage( {
 	noticeUI,
 	noticeOperations,
 } ) {
+	const toggleRef = useRef();
 	const [ isLoading, setIsLoading ] = useState( false );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -163,6 +164,7 @@ function PostFeaturedImage( {
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
 								<Button
+									ref={ toggleRef }
 									className={
 										! featuredImageId
 											? 'editor-post-featured-image__toggle'
@@ -172,7 +174,7 @@ function PostFeaturedImage( {
 									aria-label={
 										! featuredImageId
 											? null
-											: __( 'Edit or update the image' )
+											: __( 'Edit or replace the image' )
 									}
 									aria-describedby={
 										! featuredImageId
@@ -199,44 +201,33 @@ function PostFeaturedImage( {
 											?.set_featured_image ||
 											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
 								</Button>
+								{ !! featuredImageId && (
+									<HStack className="editor-post-featured-image__actions">
+										<Button
+											className="editor-post-featured-image__action"
+											onClick={ open }
+											// Prefer that screen readers use the .editor-post-featured-image__preview button.
+											aria-hidden="true"
+										>
+											{ __( 'Replace' ) }
+										</Button>
+										<Button
+											className="editor-post-featured-image__action"
+											onClick={ () => {
+												onRemoveImage();
+												toggleRef.current.focus();
+											} }
+										>
+											{ __( 'Remove' ) }
+										</Button>
+									</HStack>
+								) }
 								<DropZone onFilesDrop={ onDropFiles } />
 							</div>
 						) }
 						value={ featuredImageId }
 					/>
 				</MediaUploadCheck>
-				{ !! featuredImageId && (
-					<MediaUploadCheck>
-						{ media && (
-							<MediaUpload
-								title={
-									postType?.labels?.featured_image ||
-									DEFAULT_FEATURE_IMAGE_LABEL
-								}
-								onSelect={ onUpdateImage }
-								unstableFeaturedImageFlow
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								modalClass="editor-post-featured-image__media-modal"
-								render={ ( { open } ) => (
-									<Button
-										onClick={ open }
-										variant="secondary"
-									>
-										{ __( 'Replace Image' ) }
-									</Button>
-								) }
-							/>
-						) }
-						<Button
-							onClick={ onRemoveImage }
-							variant="link"
-							isDestructive
-						>
-							{ postType?.labels?.remove_featured_image ||
-								DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-						</Button>
-					</MediaUploadCheck>
-				) }
 			</div>
 		</PostFeaturedImageCheck>
 	);
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index 965780179e6ef..3b14662bf1d42 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -1,10 +1,6 @@
 .editor-post-featured-image {
 	padding: 0;
 
-	&__container {
-		margin-bottom: 1em;
-		position: relative;
-	}
 
 	.components-spinner {
 		position: absolute;
@@ -14,12 +10,6 @@
 		margin-left: -9px;
 	}
 
-	// Stack consecutive buttons.
-	.components-button + .components-button {
-		display: block;
-		margin-top: 1em;
-	}
-
 	// This keeps images at their intrinsic size (eg. a 50px
 	// image will never be wider than 50px).
 	.components-responsive-wrapper__content {
@@ -28,22 +18,40 @@
 	}
 }
 
+.editor-post-featured-image__container {
+	position: relative;
+
+	&:hover,
+	&:focus,
+	&:focus-within {
+		.editor-post-featured-image__actions {
+			opacity: 1;
+		}
+	}
+}
+
 .editor-post-featured-image__toggle,
 .editor-post-featured-image__preview {
-	display: block;
 	width: 100%;
 	padding: 0;
 	transition: all 0.1s ease-out;
 	@include reduce-motion("transition");
 	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
+	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+
+	// Apply a max-height.
+	display: flex;
+	justify-content: center;
+	max-height: 150px;
 }
 
 .editor-post-featured-image__preview {
 	height: auto;
-}
 
-.editor-post-featured-image__preview:not(:disabled):not([aria-disabled="true"]):focus {
-	box-shadow: 0 0 0 4px var(--wp-admin-theme-color);
+	.components-responsive-wrapper {
+		width: 100%;
+		background: $gray-100;
+	}
 }
 
 .editor-post-featured-image__toggle {
@@ -59,3 +67,19 @@
 		color: $gray-900;
 	}
 }
+
+.editor-post-featured-image__actions {
+	@include reduce-motion("transition");
+	bottom: 0;
+	opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
+	padding: $grid-unit-10;
+	position: absolute;
+	transition: opacity 50ms ease-out;
+}
+
+.editor-post-featured-image__action {
+	backdrop-filter: blur(16px) saturate(180%);
+	background: rgba(255, 255, 255, 0.75);
+	flex-grow: 1;
+	justify-content: center;
+}
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 50bd6c2bd9bd8..c5aad5aa3be9b 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -593,7 +593,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   display: inline-block;
   margin: 5px 11px 0;
   position: relative;
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   overflow: visible;
   opacity: 1;
   background-color: transparent;
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index 5aab675896597..3e064eeffea48 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)
diff --git a/packages/element/package.json b/packages/element/package.json
index 4d74601047801..ea8fd874d2b0e 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "5.9.0",
+	"version": "5.10.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index 767b382e1e096..a3c57368359f5 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,25 +2,30 @@
 
 ## Unreleased
 
+## 7.0.0 (2023-05-10)
+
 ### Breaking Change
 
--   Docker containers now run as the host user. This should resolve problems with permissions arising from different owners
-between the host, web container, and cli container. If you still encounter permissions issues, try running `npx wp-env destroy` so that the environment can be recreated with the correct permissions.
+-   Docker containers now run as the host user. This should resolve problems with permissions arising from different owners between the host, web container, and cli container. If you still encounter permissions issues, try running `npx wp-env destroy` so that the environment can be recreated with the correct permissions.
+-   Remove the `composer` and `phpunit` Docker containers. If you are currently using the `run composer` or `run phpunit` command you can migrate to `run cli composer` or `run tests-cli phpunit` respectively. Note that with `composer`, you will need to use the `--env-cwd` option to navigate to your plugin's directory as it is no longer the default working directory.
 
 ### New feature
 
--   Create an `afterSetup` option in `.wp-env.json` files for setting arbitrary commands to run after setting up WordPress when using `wp-env start` and `wp-env clean`.
+-   Create an `afterSetup` option in `.wp-env.json` files for setting arbitrary commands to run after setting up WordPress when using `npx wp-env start` and `npx wp-env clean`.
 -   Add a `WP_ENV_AFTER_SETUP` environment variable to override the `afterSetup` option.
--   Execute the `afterSetup` command on `wp-env start` after the environment is set up. This can happen when your config changes, WordPress updates, or you pass the `--update` flag.
--   Execute the `afterSetup` command on `wp-env clean`.
+-   Execute the `afterSetup` command on `npx wp-env start` after the environment is set up. This can happen when your config changes, WordPress updates, or you pass the `--update` flag.
+-   Execute the `afterSetup` command on `npx wp-env clean`.
+-   Globally install `composer` and the correct version of `phpunit` in all of the Docker containers.
 
 ### Bug fix
 
 -   Ensure `wordpress`, `tests-wordpress`, `cli`, and `tests-cli` always build the correct Docker image.
+-   Fix Xdebug while using PHP 7.2x.
 
 ### Enhancement
 
 -   `wp-env run ...` now uses docker-compose exec instead of docker-compose run. As a result, it is much faster, since commands are executed against existing services, rather than creating them from scratch each time.
+-   Increase the maximum upload size to 1GB.
 
 ## 6.0.0 (2023-04-26)
 
diff --git a/packages/env/README.md b/packages/env/README.md
index 3c0da339e879c..3493c08bf6495 100644
--- a/packages/env/README.md
+++ b/packages/env/README.md
@@ -183,6 +183,26 @@ Out of the box `wp-env` includes the [WordPress' PHPUnit test files](https://dev
 
 While we do provide a default `wp-tests-config.php` file within the environment, there may be cases where you want to use your own. WordPress provides a `WP_TESTS_CONFIG_FILE_PATH` constant that you can use to change the `wp-config.php` file used for testing. Set this to a desired path in your `bootstrap.php` file and the file you've chosen will be used instead of the one included in the environment.
 
+## Using `composer`, `phpunit`, and `wp-cli` tools.
+
+For ease of use, Composer, PHPUnit, and wp-cli are available for in the environment. To run these executables, use `wp-env run <env> <tool> <command>`. For example, `wp-env run cli composer install`, or `wp-env run tests-cli phpunit`. You can also access various shells like `wp-env run cli bash` or `wp-env run cli wp shell`.
+
+For the `env` part, `cli` and `wordpress` share a database and mapped volumes, but more tools are available in the cli environment. You should use the `tests-cli` / `tests-wordpress` environments for a separate testing database.
+
+By default, the cwd of the run command is the root of the WordPress install. If you're working on a plugin, you likely need to pass `--env-cwd` to make sure composer/phpunit commands are executed relative to the plugin you're working on. For example, `wp-env run cli --env-cwd=wp-content/plugins/gutenberg composer install`.
+
+To make this easier, it's often helpful to add scripts in your `package.json` file:
+
+```json
+{
+	"scripts": {
+		"composer": "wp-env run cli --env-cwd=wp-content/plugins/gutenberg composer"
+	}
+}
+```
+
+Then, `npm run composer install` would run composer install in the environment. You could also do this for phpunit, wp-cli, etc.
+
 ## Using Xdebug
 
 Xdebug is installed in the wp-env environment, but it is turned off by default. To enable Xdebug, you can use the `--xdebug` flag with the `wp-env start` command. Here is a reference to how the flag works:
@@ -310,9 +330,10 @@ back to using quotation marks; <code>wp-env</code> considers everything inside t
 quotation marks to be command argument.
 
 For example, to ask <code>WP-CLI</code> for its help text:
+
 <pre>sh
 <code class="language-sh">wp-env run cli "wp --help"</code></pre>
-	
+
 Without the quotation marks, <code>wp-env</code> will print its own help text instead of
 passing it to the container. If you experience any problems where the command
 is not being passed correctly, fall back to using quotation marks.
@@ -396,6 +417,7 @@ Success: Installed 1 of 1 plugins.
 ```
 
 #### Changing the permalink structure
+
 You might want to do this to enable access to the REST API (`wp-env/wp/v2/`) endpoint in your wp-env environment. The endpoint is not available with plain permalinks.
 
 **Examples**
@@ -540,14 +562,14 @@ Additionally, the values referencing a URL include the specified port for the gi
 ## Lifecycle Hooks
 
 These hooks are executed at certain points during the lifecycle of a command's execution. Keep in mind that these will be executed on both fresh and existing
-environments, so, ensure any commands you build won't break on subsequent executions. 
+environments, so, ensure any commands you build won't break on subsequent executions.
 
 ### After Setup
 
 Using the `afterSetup` option in `.wp-env.json` files will allow you to configure an arbitrary command to execute after the environment's setup is complete:
 
-- `wp-env start`: Runs when the config changes, WordPress updates, or you pass the `--update` flag.
-- `wp-env clean`: Runs after the selected environments have been cleaned.
+-   `wp-env start`: Runs when the config changes, WordPress updates, or you pass the `--update` flag.
+-   `wp-env clean`: Runs after the selected environments have been cleaned.
 
 You can override the `afterSetup` option using the `WP_ENV_AFTER_SETUP` environment variable.
 
@@ -689,6 +711,29 @@ This is useful for performing some actions after setting up the environment, suc
 }
 ```
 
+### Advanced PHP settings
+
+You can set PHP settings by mapping an `.htaccess` file. This maps an `.htaccess` file to the WordPress root (`/var/www/html`) from the directory in which you run `wp-env`.
+
+```json
+{
+	"mappings": {
+		".htaccess": ".htaccess"
+	}
+}
+```
+
+Then, your .htaccess file can contain various settings like this:
+
+```
+# Note: the default upload value is 1G.
+php_value post_max_size 2G
+php_value upload_max_filesize 2G
+php_value memory_limit 2G
+```
+
+This is useful if there are options you'd like to add to `php.ini`, which is difficult to access in this environment.
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
diff --git a/packages/env/lib/build-docker-compose-config.js b/packages/env/lib/build-docker-compose-config.js
index 6a53166a34efa..5336f8690cca8 100644
--- a/packages/env/lib/build-docker-compose-config.js
+++ b/packages/env/lib/build-docker-compose-config.js
@@ -168,33 +168,6 @@ module.exports = function buildDockerComposeConfig( config ) {
 	const developmentPorts = `\${WP_ENV_PORT:-${ config.env.development.port }}:80`;
 	const testsPorts = `\${WP_ENV_TESTS_PORT:-${ config.env.tests.port }}:80`;
 
-	// Defaults are to use the most recent version of PHPUnit that provides
-	// support for the specified version of PHP.
-	// PHP Unit is assumed to be for Tests so use the testsPhpVersion.
-	let phpunitTag = 'latest';
-	const phpunitPhpVersion = '-php-' + config.env.tests.phpVersion + '-fpm';
-	if ( config.env.tests.phpVersion === '5.6' ) {
-		phpunitTag = '5' + phpunitPhpVersion;
-	} else if ( config.env.tests.phpVersion === '7.0' ) {
-		phpunitTag = '6' + phpunitPhpVersion;
-	} else if ( config.env.tests.phpVersion === '7.1' ) {
-		phpunitTag = '7' + phpunitPhpVersion;
-	} else if ( config.env.tests.phpVersion === '7.2' ) {
-		phpunitTag = '8' + phpunitPhpVersion;
-	} else if (
-		[ '7.3', '7.4', '8.0', '8.1', '8.2' ].indexOf(
-			config.env.tests.phpVersion
-		) >= 0
-	) {
-		phpunitTag = '9' + phpunitPhpVersion;
-	}
-	const phpunitImage = `wordpressdevelop/phpunit:${ phpunitTag }`;
-
-	// If the user mounted their own uploads folder, we should not override it in the phpunit service.
-	const isMappingTestUploads = testsMounts.some( ( mount ) =>
-		mount.endsWith( ':/var/www/html/wp-content/uploads' )
-	);
-
 	return {
 		version: '3.7',
 		services: {
@@ -236,6 +209,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
 				volumes: developmentMounts,
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			'tests-wordpress': {
 				depends_on: [ 'tests-mysql' ],
@@ -253,6 +227,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
 				volumes: testsMounts,
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			cli: {
 				depends_on: [ 'wordpress' ],
@@ -268,6 +243,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 					...dbEnv.development,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 			'tests-cli': {
 				depends_on: [ 'tests-wordpress' ],
@@ -283,26 +259,7 @@ module.exports = function buildDockerComposeConfig( config ) {
 					...dbEnv.tests,
 					WP_TESTS_DIR: '/wordpress-phpunit',
 				},
-			},
-			composer: {
-				image: 'composer',
-				volumes: [ `${ config.configDirectoryPath }:/app` ],
-			},
-			phpunit: {
-				image: phpunitImage,
-				depends_on: [ 'tests-wordpress' ],
-				volumes: [
-					...testsMounts,
-					...( ! isMappingTestUploads
-						? [ 'phpunit-uploads:/var/www/html/wp-content/uploads' ]
-						: [] ),
-				],
-				environment: {
-					LOCAL_DIR: 'html',
-					WP_TESTS_DIR: '/wordpress-phpunit',
-					...dbEnv.credentials,
-					...dbEnv.tests,
-				},
+				extra_hosts: [ 'host.docker.internal:host-gateway' ],
 			},
 		},
 		volumes: {
@@ -310,7 +267,6 @@ module.exports = function buildDockerComposeConfig( config ) {
 			...( ! config.env.tests.coreSource && { 'tests-wordpress': {} } ),
 			mysql: {},
 			'mysql-test': {},
-			'phpunit-uploads': {},
 			'user-home': {},
 			'tests-user-home': {},
 		},
diff --git a/packages/env/lib/commands/destroy.js b/packages/env/lib/commands/destroy.js
index 509f1e89c075a..4d8a7e4ee6d6b 100644
--- a/packages/env/lib/commands/destroy.js
+++ b/packages/env/lib/commands/destroy.js
@@ -12,7 +12,6 @@ const inquirer = require( 'inquirer' );
  * Promisified dependencies
  */
 const rimraf = util.promisify( require( 'rimraf' ) );
-const exec = util.promisify( require( 'child_process' ).exec );
 
 /**
  * Internal dependencies
@@ -58,48 +57,20 @@ module.exports = async function destroy( { spinner, debug } ) {
 		return;
 	}
 
-	spinner.text = 'Removing WordPress docker containers.';
+	spinner.text = 'Removing docker images, volumes, and networks.';
 
-	await dockerCompose.rm( {
+	await dockerCompose.down( {
 		config: dockerComposeConfigPath,
-		commandOptions: [ '--stop', '-v' ],
+		commandOptions: [ '--volumes', '--remove-orphans', '--rmi', 'all' ],
 		log: debug,
 	} );
 
-	const directoryHash = path.basename( workDirectoryPath );
-
-	spinner.text = 'Removing docker volumes.';
-	await removeDockerItems( 'volume', 'name', directoryHash );
-
-	spinner.text = 'Removing docker networks.';
-	await removeDockerItems( 'network', 'name', directoryHash );
-
-	spinner.text = 'Removing docker images.';
-	await removeDockerItems( 'image', 'reference', directoryHash + '*' );
-
 	spinner.text = 'Removing local files.';
-
+	// Note: there is a race condition where docker compose actually hasn't finished
+	// by this point, which causes rimraf to fail. We need to wait at least 2.5-5s,
+	// but using 10s in case it's dependant on the machine.
+	await new Promise( ( resolve ) => setTimeout( resolve, 10000 ) );
 	await rimraf( workDirectoryPath );
 
 	spinner.text = 'Removed WordPress environment.';
 };
-
-/**
- * Removes docker items, like networks or volumes, matching the given name.
- *
- * @param {string} itemType    The item type, like "volume", or "network".
- * @param {string} filter      The filtering to search using.
- * @param {string} filterValue The filtering value that we're looking for.
- */
-async function removeDockerItems( itemType, filter, filterValue ) {
-	const { stdout: items } = await exec(
-		`docker ${ itemType } ls -q --filter ${ filter }='${ filterValue }'`
-	);
-	if ( items ) {
-		await exec(
-			`docker ${ itemType } rm ${ items
-				.split( '\n' ) // TODO: use os.EOL?
-				.join( ' ' ) }`
-		);
-	}
-}
diff --git a/packages/env/lib/commands/run.js b/packages/env/lib/commands/run.js
index 1e13f7a797c38..c85d141cbe67e 100644
--- a/packages/env/lib/commands/run.js
+++ b/packages/env/lib/commands/run.js
@@ -10,6 +10,7 @@ const path = require( 'path' );
  */
 const initConfig = require( '../init-config' );
 const getHostUser = require( '../get-host-user' );
+const { ValidationError } = require( '../config' );
 
 /**
  * @typedef {import('../config').WPConfig} WPConfig
@@ -32,6 +33,8 @@ module.exports = async function run( {
 	spinner,
 	debug,
 } ) {
+	validateContainerExistence( container );
+
 	const config = await initConfig( { spinner, debug } );
 
 	command = command.join( ' ' );
@@ -44,6 +47,42 @@ module.exports = async function run( {
 	spinner.text = `Ran \`${ command }\` in '${ container }'.`;
 };
 
+/**
+ * Validates the container option and throws if it is invalid.
+ *
+ * @param {string} container The Docker container to run the command on.
+ */
+function validateContainerExistence( container ) {
+	// Give better errors for containers that we have removed.
+	if ( container === 'phpunit' ) {
+		throw new ValidationError(
+			"The 'phpunit' container has been removed. Please use 'wp-env run tests-cli --env-cwd=wp-content/path/to/plugin phpunit' instead."
+		);
+	}
+	if ( container === 'composer' ) {
+		throw new ValidationError(
+			"The 'composer' container has been removed. Please use 'wp-env run cli --env-cwd=wp-content/path/to/plugin composer' instead."
+		);
+	}
+
+	// Provide better error output than Docker's "service does not exist" messaging.
+	const validContainers = [
+		'mysql',
+		'tests-mysql',
+		'wordpress',
+		'tests-wordpress',
+		'cli',
+		'tests-cli',
+	];
+	if ( ! validContainers.includes( container ) ) {
+		throw new ValidationError(
+			`The '${ container }' container does not exist. Valid selections are: ${ validContainers.join(
+				', '
+			) }`
+		);
+	}
+}
+
 /**
  * Runs an arbitrary command on the given Docker container.
  *
@@ -61,14 +100,20 @@ function spawnCommandDirectly( config, container, command, envCwd, spinner ) {
 	const hostUser = getHostUser();
 
 	// We need to pass absolute paths to the container.
-	envCwd = path.resolve( '/var/www/html', envCwd );
+	envCwd = path.resolve(
+		// Not all containers have the same starting working directory.
+		container === 'mysql' || container === 'tests-mysql'
+			? '/'
+			: '/var/www/html',
+		envCwd
+	);
 
 	const isTTY = process.stdout.isTTY;
 	const composeCommand = [
 		'-f',
 		config.dockerComposeConfigPath,
 		'exec',
-		! isTTY ? '--no-TTY' : '',
+		! isTTY ? '-T' : '',
 		'-w',
 		envCwd,
 		'--user',
diff --git a/packages/env/lib/config/add-or-replace-port.js b/packages/env/lib/config/add-or-replace-port.js
index 605ede43644a1..d1b7ff149b10d 100644
--- a/packages/env/lib/config/add-or-replace-port.js
+++ b/packages/env/lib/config/add-or-replace-port.js
@@ -7,9 +7,10 @@ const { ValidationError } = require( './validate-config' );
 /**
  * Adds or replaces the port to the given domain or URI.
  *
- * @param {string}  input     The domain or URI to operate on.
- * @param {string}  port      The port to append.
- * @param {boolean} [replace] Indicates whether or not the port should be replaced if one is already present. Defaults to true.
+ * @param {string}        input     The domain or URI to operate on.
+ * @param {number|string} port      The port to append.
+ * @param {boolean}       [replace] Indicates whether or not the port should be replaced if one is already present. Defaults to true.
+ *
  * @return {string} The string with the port added or replaced.
  */
 module.exports = function addOrReplacePort( input, port, replace = true ) {
@@ -28,6 +29,13 @@ module.exports = function addOrReplacePort( input, port, replace = true ) {
 		return input;
 	}
 
+	// There's never a reason to add the default ports.
+	// We use == to catch both string and number ports.
+	// eslint-disable-next-line eqeqeq
+	if ( port == 80 || port == 443 ) {
+		return input;
+	}
+
 	// Place the port in the correct location in the input.
 	return matches[ 1 ] + ':' + port + matches[ 3 ];
 };
diff --git a/packages/env/lib/config/test/add-or-replace-port.js b/packages/env/lib/config/test/add-or-replace-port.js
index 1c9794f0d0125..e04722e22435a 100644
--- a/packages/env/lib/config/test/add-or-replace-port.js
+++ b/packages/env/lib/config/test/add-or-replace-port.js
@@ -40,6 +40,33 @@ describe( 'addOrReplacePort', () => {
 		}
 	} );
 
+	it( 'should support number ports', () => {
+		const testMap = [ { in: 'test', expect: 'test:104' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 104, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should not add default HTTP port', () => {
+		const testMap = [ { in: 'test', expect: 'test' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 80, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
+	it( 'should not add default HTTPS port', () => {
+		const testMap = [ { in: 'test', expect: 'test' } ];
+
+		for ( const test of testMap ) {
+			const result = addOrReplacePort( test.in, 443, false );
+			expect( result ).toEqual( test.expect );
+		}
+	} );
+
 	it( 'should do nothing if port is present but replacement is not requested', () => {
 		const testMap = [
 			{ in: 'test', expect: 'test:103' },
diff --git a/packages/env/lib/config/validate-config.js b/packages/env/lib/config/validate-config.js
index 02a673eea3cb8..f5c5d61f297c6 100644
--- a/packages/env/lib/config/validate-config.js
+++ b/packages/env/lib/config/validate-config.js
@@ -39,8 +39,6 @@ function checkPort( configFile, configKey, port ) {
 		);
 	}
 
-	port = parseInt( port );
-
 	if ( port < 0 || port > 65535 ) {
 		throw new ValidationError(
 			`Invalid ${ configFile }: "${ configKey }" must be a valid port.`
diff --git a/packages/env/lib/init-config.js b/packages/env/lib/init-config.js
index 659278eed2160..4a573c97aae7e 100644
--- a/packages/env/lib/init-config.js
+++ b/packages/env/lib/init-config.js
@@ -6,12 +6,11 @@ const path = require( 'path' );
 const { writeFile, mkdir } = require( 'fs' ).promises;
 const { existsSync } = require( 'fs' );
 const yaml = require( 'js-yaml' );
-const os = require( 'os' );
 
 /**
  * Internal dependencies
  */
-const { loadConfig } = require( './config' );
+const { loadConfig, ValidationError } = require( './config' );
 const buildDockerComposeConfig = require( './build-docker-compose-config' );
 
 /**
@@ -81,38 +80,23 @@ module.exports = async function initConfig( {
 			yaml.dump( dockerComposeConfig )
 		);
 
-		await writeFile(
-			path.resolve( config.workDirectoryPath, 'WordPress.Dockerfile' ),
-			wordpressDockerFileContents(
-				getBaseDockerImage( config.env.development.phpVersion, false ),
-				config
-			)
-		);
-		await writeFile(
-			path.resolve(
-				config.workDirectoryPath,
-				'Tests-WordPress.Dockerfile'
-			),
-			wordpressDockerFileContents(
-				getBaseDockerImage( config.env.tests.phpVersion, false ),
-				config
-			)
-		);
-
-		await writeFile(
-			path.resolve( config.workDirectoryPath, 'CLI.Dockerfile' ),
-			cliDockerFileContents(
-				getBaseDockerImage( config.env.development.phpVersion, true ),
-				config
-			)
-		);
-		await writeFile(
-			path.resolve( config.workDirectoryPath, 'Tests-CLI.Dockerfile' ),
-			cliDockerFileContents(
-				getBaseDockerImage( config.env.tests.phpVersion, true ),
-				config
-			)
-		);
+		// Write four Dockerfiles for each service we provided.
+		// (WordPress and CLI services, then a development and test environment for each.)
+		for ( const imageType of [ 'WordPress', 'CLI' ] ) {
+			for ( const envType of [ 'development', 'tests' ] ) {
+				await writeFile(
+					path.resolve(
+						config.workDirectoryPath,
+						`${
+							envType === 'tests' ? 'Tests-' : ''
+						}${ imageType }.Dockerfile`
+					),
+					imageType === 'WordPress'
+						? wordpressDockerFileContents( envType, config )
+						: cliDockerFileContents( envType, config )
+				);
+			}
+		}
 	} else if ( ! existsSync( config.workDirectoryPath ) ) {
 		spinner.fail(
 			'wp-env has not yet been initialized. Please run `wp-env start` to install the WordPress instance before using any other commands. This is only necessary to set up the environment for the first time; it is typically not necessary for the instance to be running after that in order to use other commands.'
@@ -123,85 +107,19 @@ module.exports = async function initConfig( {
 	return config;
 };
 
-/**
- * Gets the base docker image to use based on our input.
- *
- * @param {string}  phpVersion The version of PHP to get an image for.
- * @param {boolean} isCLI      Indicates whether or not the image is for a CLI.
- * @return {string} The Docker image to use.
- */
-function getBaseDockerImage( phpVersion, isCLI ) {
-	// We can rely on a consistent format for PHP versions.
-	if ( phpVersion ) {
-		phpVersion = ( isCLI ? '-' : ':' ) + 'php' + phpVersion;
-	} else {
-		phpVersion = '';
-	}
-
-	let wordpressImage = 'wordpress';
-	if ( isCLI ) {
-		wordpressImage += ':cli';
-	}
-
-	return wordpressImage + phpVersion;
-}
-
-/**
- * Checks the configured PHP version
- * against the minimum version supported by Xdebug
- *
- * @param {WPConfig} config
- * @return {boolean} Whether the PHP version is supported by Xdebug
- */
-function checkXdebugPhpCompatibility( config ) {
-	// By default, an undefined phpVersion uses the version on the docker image,
-	// which is supported by Xdebug 3.
-	const phpCompatibility = true;
-
-	// If PHP version is defined
-	// ensure it meets the Xdebug minimum compatibility requirment.
-	if ( config.env.development.phpVersion ) {
-		const versionTokens = config.env.development.phpVersion.split( '.' );
-		const majorVer = parseInt( versionTokens[ 0 ] );
-		const minorVer = parseInt( versionTokens[ 1 ] );
-
-		if ( isNaN( majorVer ) || isNaN( minorVer ) ) {
-			throw new Error(
-				'Something went wrong when parsing the PHP version.'
-			);
-		}
-
-		// Xdebug 3 supports 7.2 and higher
-		// Ensure user has specified a compatible PHP version.
-		if ( majorVer < 7 || ( majorVer === 7 && minorVer < 2 ) ) {
-			throw new Error( 'Cannot use XDebug 3 on PHP < 7.2.' );
-		}
-	}
-
-	return phpCompatibility;
-}
-
 /**
  * Generates the Dockerfile used by wp-env's `wordpress` and `tests-wordpress` instances.
  *
- * @param {string}   image  The base docker image to use.
+ * @param {string}   env    The environment we're installing -- development or tests.
  * @param {WPConfig} config The configuration object.
- *
  * @return {string} The dockerfile contents.
  */
-function wordpressDockerFileContents( image, config ) {
-	// Don't install XDebug unless it is explicitly required.
-	let shouldInstallXdebug = false;
+function wordpressDockerFileContents( env, config ) {
+	const phpVersion = config.env[ env ].phpVersion
+		? ':php' + config.env[ env ].phpVersion
+		: '';
 
-	if ( config.xdebug !== 'off' ) {
-		const usingCompatiblePhp = checkXdebugPhpCompatibility( config );
-
-		if ( usingCompatiblePhp ) {
-			shouldInstallXdebug = true;
-		}
-	}
-
-	return `FROM ${ image }
+	return `FROM wordpress${ phpVersion }
 
 # Update apt sources for archived versions of Debian.
 
@@ -210,10 +128,6 @@ RUN sed -i 's|deb.debian.org/debian stretch|archive.debian.org/debian stretch|g'
 RUN sed -i 's|security.debian.org/debian-security stretch|archive.debian.org/debian-security stretch|g' /etc/apt/sources.list
 RUN sed -i '/stretch-updates/d' /etc/apt/sources.list
 
-# Prepare dependencies
-RUN apt-get -qy install $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
-${ shouldInstallXdebug ? installXdebug( config.xdebug ) : '' }
-
 # Create the host's user so that we can match ownership in the container.
 ARG HOST_USERNAME
 ARG HOST_UID
@@ -222,43 +136,27 @@ ARG HOST_GID
 RUN groupadd -g $HOST_GID $HOST_USERNAME || true
 RUN useradd -m -u $HOST_UID -g $HOST_GID $HOST_USERNAME || true
 
-# Set up sudo so they can have root access when using 'run' commands.
-RUN apt-get update -qy
-RUN apt-get -qy install sudo
-RUN echo "$HOST_USERNAME ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
-`;
-}
-
-function installXdebug( enableXdebug ) {
-	const isLinux = os.type() === 'Linux';
-	// Discover client host does not appear to work on macOS with Docker.
-	const clientDetectSettings = isLinux
-		? 'xdebug.discover_client_host=true'
-		: 'xdebug.client_host="host.docker.internal"';
-
-	return `
-# Install Xdebug:
-RUN if [ -z "$(pecl list | grep xdebug)" ] ; then pecl install xdebug ; fi
-RUN docker-php-ext-enable xdebug
-RUN echo 'xdebug.start_with_request=yes' >> /usr/local/etc/php/php.ini
-RUN echo 'xdebug.mode=${ enableXdebug }' >> /usr/local/etc/php/php.ini
-RUN echo '${ clientDetectSettings }' >> /usr/local/etc/php/php.ini
-	`;
+# Install any dependencies we need in the container.
+${ installDependencies( 'wordpress', env, config ) }`;
 }
 
 /**
  * Generates the Dockerfile used by wp-env's `cli` and `tests-cli` instances.
  *
- * @param {string} image The base docker image to use.
- *
+ * @param {string}   env    The environment we're installing -- development or tests.
+ * @param {WPConfig} config The configuration object.
  * @return {string} The dockerfile contents.
  */
-function cliDockerFileContents( image ) {
-	return `FROM ${ image }
+function cliDockerFileContents( env, config ) {
+	const phpVersion = config.env[ env ].phpVersion
+		? '-php' + config.env[ env ].phpVersion
+		: '';
+
+	return `FROM wordpress:cli${ phpVersion }
 
 # Switch to root so we can create users.
 USER root
-	
+
 # Create the host's user so that we can match ownership in the container.
 ARG HOST_USERNAME
 ARG HOST_UID
@@ -267,10 +165,132 @@ ARG HOST_GID
 RUN addgroup -g $HOST_GID $HOST_USERNAME || true
 RUN adduser -h /home/$HOST_USERNAME -G $( getent group $HOST_GID | cut -d: -f1 ) -u $HOST_UID $HOST_USERNAME || true
 
-# Switch back now that we're done.
+# Install any dependencies we need in the container.
+${ installDependencies( 'cli', env, config ) }
+	
+# Switch back to the original user now that we're done.
 USER www-data
 
 # Have the container sleep infinitely to keep it alive for us to run commands on it.
 CMD [ "/bin/sh", "-c", "while true; do sleep 2073600; done" ]
 `;
 }
+
+/**
+ * Generates content for the Dockerfile to install dependencies.
+ *
+ * @param {string}   service The kind of service that we're installing dependencies on ('wordpress' or 'cli').
+ * @param {string}   env     The environment we're installing dependencies for ('development' or 'tests').
+ * @param {WPConfig} config  The configuration object.
+ * @return {string} The Dockerfile content for installing dependencies.
+ */
+function installDependencies( service, env, config ) {
+	let dockerFileContent = '';
+
+	// At times we may need to evaluate the environment. This is because the
+	// WordPress image uses Ubuntu while the CLI image uses Alpine.
+
+	// Start with some environment-specific dependency installations.
+	switch ( service ) {
+		case 'wordpress': {
+			dockerFileContent += `
+# Make sure we're working with the latest packages.
+RUN apt-get -qy update
+
+# Install some basic PHP dependencies.
+RUN apt-get -qy install $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
+
+# Set up sudo so they can have root access.
+RUN apt-get -qy install sudo
+RUN echo "$HOST_USERNAME ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers`;
+			break;
+		}
+		case 'cli': {
+			dockerFileContent += `
+RUN apk update
+RUN apk --no-cache add $PHPIZE_DEPS && touch /usr/local/etc/php/php.ini
+RUN apk --no-cache add sudo linux-headers
+RUN echo "$HOST_USERNAME ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers`;
+			break;
+		}
+		default: {
+			throw new Error( `Invalid service "${ service }" given` );
+		}
+	}
+
+	dockerFileContent += getXdebugConfig(
+		config.xdebug,
+		config.env[ env ].phpVersion
+	);
+
+	// Add better PHP settings.
+	dockerFileContent += `
+RUN echo 'upload_max_filesize = 1G' >> /usr/local/etc/php/php.ini
+RUN echo 'post_max_size = 1G' >> /usr/local/etc/php/php.ini`;
+
+	// Make sure Composer is available for use in all services.
+	dockerFileContent += `
+RUN curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php
+RUN export COMPOSER_HASH=\`curl -sS https://composer.github.io/installer.sig\` && php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === '$COMPOSER_HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('/tmp/composer-setup.php'); } echo PHP_EOL;"
+RUN php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer
+RUN rm /tmp/composer-setup.php`;
+
+	// Install any Composer packages we might need globally.
+	// Make sure to do this as the user and ensure the binaries are available in the $PATH.
+	dockerFileContent += `
+USER $HOST_USERNAME
+ENV PATH="\${PATH}:/home/$HOST_USERNAME/.composer/vendor/bin"
+RUN composer global require --dev yoast/phpunit-polyfills:"^1.0"
+USER root`;
+
+	return dockerFileContent;
+}
+
+/**
+ * Gets the Xdebug config based on the options in the config object.
+ *
+ * @param {string} xdebugMode The Xdebug mode set in the config.
+ * @param {string} phpVersion The php version set in the environment.
+ * @return {string} The Xdebug config -- can be an empty string when it's not used.
+ */
+function getXdebugConfig( xdebugMode = 'off', phpVersion ) {
+	if ( xdebugMode === 'off' ) {
+		return '';
+	}
+
+	let xdebugVersion = 'xdebug';
+
+	if ( phpVersion ) {
+		const versionTokens = phpVersion.split( '.' );
+		const majorVer = parseInt( versionTokens[ 0 ] );
+		const minorVer = parseInt( versionTokens[ 1 ] );
+
+		if ( isNaN( majorVer ) || isNaN( minorVer ) ) {
+			throw new ValidationError(
+				'Something went wrong when parsing the PHP version.'
+			);
+		}
+
+		// Throw an error if someone tries to use Xdebug with an unsupported PHP version.
+		// Xdebug 3 only supports 7.2 and higher.
+		if ( majorVer < 7 || ( majorVer === 7 && minorVer < 2 ) ) {
+			throw new ValidationError(
+				`Cannot use XDebug 3 with PHP < 7.2. Your PHP version is ${ phpVersion }.`
+			);
+		}
+
+		// For now, we support PHP 7 by installing the final version of Xdebug to
+		// support PHP 7 when the environment uses that version. By default, use the
+		// latest version.
+		if ( majorVer === 7 ) {
+			xdebugVersion = 'xdebug-3.1.6';
+		}
+	}
+
+	return `
+RUN if [ -z "$(pecl list | grep ${ xdebugVersion })" ] ; then pecl install ${ xdebugVersion } ; fi
+RUN docker-php-ext-enable xdebug
+RUN echo 'xdebug.start_with_request=yes' >> /usr/local/etc/php/php.ini
+RUN echo 'xdebug.mode=${ xdebugMode }' >> /usr/local/etc/php/php.ini
+RUN echo 'xdebug.client_host="host.docker.internal"' >> /usr/local/etc/php/php.ini`;
+}
diff --git a/packages/env/lib/test/build-docker-compose-config.js b/packages/env/lib/test/build-docker-compose-config.js
index 50f5b2e42d0fa..95cf6419d5db4 100644
--- a/packages/env/lib/test/build-docker-compose-config.js
+++ b/packages/env/lib/test/build-docker-compose-config.js
@@ -99,54 +99,6 @@ describe( 'buildDockerComposeConfig', () => {
 		);
 	} );
 
-	it( 'should not map the default phpunit uploads directory if the user has specified their own directory', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/uploads': {
-					path: '/path/to/wp-uploads',
-				},
-			},
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: envConfig },
-		} );
-		const expectedVolumes = [
-			'tests-wordpress:/var/www/html',
-			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'tests-user-home:/home/test',
-			'/path/to/wp-uploads:/var/www/html/wp-content/uploads',
-		];
-		expect( dockerConfig.services.phpunit.volumes ).toEqual(
-			expectedVolumes
-		);
-	} );
-
-	it( 'should map the default phpunit uploads directory even if the user has specified their own directory only for the development instance', () => {
-		const envConfig = {
-			...CONFIG,
-			mappings: {
-				'wp-content/uploads': {
-					path: '/path/to/wp-uploads',
-				},
-			},
-		};
-		const dockerConfig = buildDockerComposeConfig( {
-			workDirectoryPath: '/path',
-			env: { development: envConfig, tests: CONFIG },
-		} );
-		const expectedVolumes = [
-			'tests-wordpress:/var/www/html',
-			'/path/tests-WordPress-PHPUnit/tests/phpunit:/wordpress-phpunit',
-			'tests-user-home:/home/test',
-			'phpunit-uploads:/var/www/html/wp-content/uploads',
-		];
-		expect( dockerConfig.services.phpunit.volumes ).toEqual(
-			expectedVolumes
-		);
-	} );
-
 	it( 'should create "wordpress" and "tests-wordpress" volumes if they are needed by containers', () => {
 		// CONFIG has no coreSource entry, so there are no core sources on the
 		// local filesystem, so a volume should be created to contain core
diff --git a/packages/env/package.json b/packages/env/package.json
index d982a7b21ef50..92acb4d4fc1c1 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "6.0.0",
+	"version": "7.0.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index d668640da8438..5fca160ad1530 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.33.0 (2023-05-10)
+
 ## 2.32.0 (2023-04-26)
 
 ## 2.31.0 (2023-04-12)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 30a0ce8792f40..801d07e97b317 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "2.32.0",
+	"version": "2.33.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 6aa8d272f2c4d..866eb2c8ecedb 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.6.0 (2023-05-10)
+
 ### Enhancement
 
 -   Validate dependencies in `useSelect` and `useSuspenseSelect` hooks. ([#49900](https://github.com/WordPress/gutenberg/pull/49900)).
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index aeea23ffcdf38..ab4bb2218f828 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "14.5.0",
+	"version": "14.6.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index af5fd3c1f6ce4..881b89d224ba4 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index d83e4fa214759..6541114867fbf 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js
index 791cabb1f118e..c94c347156ff0 100644
--- a/packages/format-library/src/default-formats.js
+++ b/packages/format-library/src/default-formats.js
@@ -13,6 +13,7 @@ import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
 import { unknown } from './unknown';
+import { language } from './language';
 
 export default [
 	bold,
@@ -27,4 +28,5 @@ export default [
 	superscript,
 	keyboard,
 	unknown,
+	language,
 ];
diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
new file mode 100644
index 0000000000000..60f35c98a4aae
--- /dev/null
+++ b/packages/format-library/src/language/index.js
@@ -0,0 +1,124 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * WordPress dependencies
+ */
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import {
+	TextControl,
+	SelectControl,
+	Button,
+	Popover,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
+import { language as languageIcon } from '@wordpress/icons';
+
+const name = 'core/language';
+const title = __( 'Language' );
+
+export const language = {
+	name,
+	tagName: 'span',
+	className: 'has-language',
+	edit: Edit,
+	title,
+};
+
+function Edit( props ) {
+	const { contentRef, isActive, onChange, value } = props;
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings: language,
+	} );
+
+	const [ lang, setLang ] = useState( '' );
+	const [ dir, setDir ] = useState( 'ltr' );
+
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+	const togglePopover = () => {
+		setIsPopoverVisible( ( state ) => ! state );
+		setLang( '' );
+		setDir( 'ltr' );
+	};
+
+	return (
+		<>
+			<RichTextToolbarButton
+				icon={ languageIcon }
+				label={ title }
+				title={ title }
+				onClick={ () => {
+					if ( isActive ) {
+						onChange( removeFormat( value, name ) );
+					} else {
+						togglePopover();
+					}
+				} }
+				isActive={ isActive }
+				role="menuitemcheckbox"
+			/>
+
+			{ isPopoverVisible && (
+				<Popover
+					className="block-editor-format-toolbar__language-popover"
+					anchor={ popoverAnchor }
+					placement="bottom"
+					onClose={ togglePopover }
+				>
+					<form
+						className="block-editor-format-toolbar__language-container-content"
+						onSubmit={ ( event ) => {
+							onChange(
+								applyFormat( value, {
+									type: name,
+									attributes: {
+										lang,
+										dir,
+									},
+								} )
+							);
+							togglePopover();
+							event.preventDefault();
+						} }
+					>
+						<TextControl
+							label={ title }
+							value={ lang }
+							onChange={ ( val ) => setLang( val ) }
+							help={ __(
+								'A valid language attribute, like "en" or "fr".'
+							) }
+						/>
+						<SelectControl
+							label={ __( 'Text direction' ) }
+							value={ dir }
+							options={ [
+								{
+									label: __( 'Left to right' ),
+									value: 'ltr',
+								},
+								{
+									label: __( 'Right to left' ),
+									value: 'rtl',
+								},
+							] }
+							onChange={ ( val ) => setDir( val ) }
+						/>
+						<HStack alignment="right">
+							<Button
+								variant="primary"
+								type="submit"
+								text={ __( 'Apply' ) }
+							/>
+						</HStack>
+					</form>
+				</Popover>
+			) }
+		</>
+	);
+}
diff --git a/packages/format-library/src/language/style.scss b/packages/format-library/src/language/style.scss
new file mode 100644
index 0000000000000..17a77e1090799
--- /dev/null
+++ b/packages/format-library/src/language/style.scss
@@ -0,0 +1,6 @@
+.block-editor-format-toolbar__language-popover {
+	.components-popover__content {
+		width: auto;
+		padding: 1rem;
+	}
+}
diff --git a/packages/format-library/src/style.scss b/packages/format-library/src/style.scss
index 9aae705658e94..e388258b4d5a0 100644
--- a/packages/format-library/src/style.scss
+++ b/packages/format-library/src/style.scss
@@ -1,3 +1,4 @@
 @import "./image/style.scss";
 @import "./link/style.scss";
 @import "./text-color/style.scss";
+@import "./language/style.scss";
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index 088c2fe2d358c..61074d7c6d3c6 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index c9ebbde194bfd..6b3b3a0b12435 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index c8b771b0ed2b3..5327634792472 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 4a062c7b74dc2..0bf98c7c341ea 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index 16af37e7972bd..00fdbc6550882 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 32745db909402..6c11f0104c3da 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 8b53a4b01f267..f1519a41cc40c 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.24.0 (2023-05-10)
+
 ## 9.23.0 (2023-04-26)
 
 ## 9.22.0 (2023-04-12)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 4831a40bbfa1b..a32590c870e2b 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "9.23.0",
+	"version": "9.24.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index c3f0380728e55..c127d6efb45ef 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -119,6 +119,7 @@ export { default as justifyStretch } from './library/justify-stretch';
 export { default as key } from './library/key';
 export { default as keyboardClose } from './library/keyboard-close';
 export { default as keyboardReturn } from './library/keyboard-return';
+export { default as language } from './library/language';
 export { default as layout } from './library/layout';
 export { default as levelUp } from './library/level-up';
 export { default as lifesaver } from './library/lifesaver';
diff --git a/packages/icons/src/library/details.js b/packages/icons/src/library/details.js
index 11fa97eb8cb33..11d5835620648 100644
--- a/packages/icons/src/library/details.js
+++ b/packages/icons/src/library/details.js
@@ -4,17 +4,13 @@
 import { SVG, Path } from '@wordpress/primitives';
 
 const details = (
-	<SVG
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		xmlns="http://www.w3.org/2000/svg"
-	>
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 		<Path
-			d="M4 10L8 8L4 6V10ZM12 17V15.5H4V17H12ZM4 11.5H20V13H4V11.5ZM20 7.25L10 7.25V8.75L20 8.75V7.25Z"
+			d="M4 16h10v1.5H4V16Zm0-4.5h16V13H4v-1.5ZM10 7h10v1.5H10V7Z"
 			fillRule="evenodd"
 			clipRule="evenodd"
 		/>
+		<Path d="m4 5.25 4 2.5-4 2.5v-5Z" />
 	</SVG>
 );
 
diff --git a/packages/icons/src/library/language.js b/packages/icons/src/library/language.js
new file mode 100644
index 0000000000000..c1a6b929fb5de
--- /dev/null
+++ b/packages/icons/src/library/language.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const language = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M17.5 10h-1.7l-3.7 10.5h1.7l.9-2.6h3.9l.9 2.6h1.7L17.5 10zm-2.2 6.3 1.4-4 1.4 4h-2.8zm-4.8-3.8c1.6-1.8 2.9-3.6 3.7-5.7H16V5.2h-5.8V3H8.8v2.2H3v1.5h9.6c-.7 1.6-1.8 3.1-3.1 4.6C8.6 10.2 7.8 9 7.2 8H5.6c.6 1.4 1.7 2.9 2.9 4.4l-2.4 2.4c-.3.4-.7.8-1.1 1.2l1 1 1.2-1.2c.8-.8 1.6-1.5 2.3-2.3.8.9 1.7 1.7 2.5 2.5l.6-1.5c-.7-.6-1.4-1.3-2.1-2z" />
+	</SVG>
+);
+
+export default language;
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 31dd5d6a0573b..bd9323d4a2560 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index f60c0ea24cdc7..5862add447d48 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "5.9.0",
+	"version": "5.10.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 2d6f4b663e989..6a4b4c01289d3 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 75a3f5711f415..d379a9b9f5d3b 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 8c71b08ee1de9..eaef84f915cb8 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.4.0 (2023-05-10)
+
 ## 7.3.0 (2023-04-26)
 
 ## 7.2.0 (2023-04-12)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 1361f74d196b9..368ccfa5aee04 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "7.3.0",
+	"version": "7.4.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index ba5b316c40421..7626e6edc142c 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 11.4.0 (2023-05-10)
+
 ## 11.3.0 (2023-04-26)
 
 ## 11.2.0 (2023-04-12)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index de774f16c2593..9c7c72448bc84 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "11.3.0",
+	"version": "11.4.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 60d4f5e4da102..e65502226c9d7 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.4.0 (2023-05-10)
+
 ## 6.3.0 (2023-04-26)
 
 ## 6.2.0 (2023-04-12)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index 52a7fa1f9930b..e76e362a6fa47 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "6.3.0",
+	"version": "6.4.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index a68d2710fde67..c6b21c5a84cc7 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index 0a1e7665c85cf..3508e851f6087 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index f0ef931ab9595..6be8a13a49c22 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 04441024d0e98..3a48bf9d0490c 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index f6872b473a0ce..9d84db69e65ed 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.20.0 (2023-05-10)
+
 ## 1.19.0 (2023-04-26)
 
 ## 1.18.0 (2023-04-12)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 4af7eb698fa07..997d05ddc3d94 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "1.19.0",
+	"version": "1.20.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 8fb64ef76a00e..5fc3a91e8c6ba 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 57fb38ae6cc2a..e197740144178 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 4001a0e4777b4..44f2675d3cf5d 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.24.0 (2023-05-10)
+
 ## 4.23.0 (2023-04-26)
 
 ## 4.22.0 (2023-04-12)
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index ee7374e637991..a81d50728d00d 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "4.23.0",
+	"version": "4.24.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index 2c3c8c7c70c64..8c5562268684e 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.1.0 (2023-05-10)
+
 ## 4.0.0 (2023-04-26)
 
 ### Breaking Change
diff --git a/packages/notices/package.json b/packages/notices/package.json
index 317bb51d052b0..6e3208f7894cb 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 38e065603c559..ad62aafadc2c9 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.18.0 (2023-05-10)
+
 ## 4.17.0 (2023-04-26)
 
 ## 4.16.0 (2023-04-12)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index a2e315f499ba7..22af67d20149f 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "4.17.0",
+	"version": "4.18.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index 79dd780df539d..99705a203d4f1 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.1.0 (2023-05-10)
+
 ## 6.0.0 (2023-04-26)
 
 ### Breaking Changes
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index d043ade611b59..2e6a7940af4a0 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "6.0.0",
+	"version": "6.1.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index 8269d9df765d9..5d638509e4ab3 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.17.0 (2023-05-10)
+
 ## 4.16.0 (2023-04-26)
 
 ## 4.15.0 (2023-04-12)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index e9dcb105019cc..f57ea501412ba 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "4.16.0",
+	"version": "4.17.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index da5bd6add779e..2de57b28a89d5 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.16.0 (2023-05-10)
+
 ## 5.15.0 (2023-04-26)
 
 ## 5.14.0 (2023-04-12)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 9380d08978ad1..a6df04a4867c0 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "5.15.0",
+	"version": "5.16.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index 65d112c0c60e1..a3a4d67322deb 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.25.0 (2023-05-10)
+
 ## 1.24.0 (2023-04-26)
 
 ## 1.23.0 (2023-04-12)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index 0ec05c895c149..0163cf5b10af6 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "1.24.0",
+	"version": "1.25.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index fa92b48844098..cb3f40da123a9 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.10.0 (2023-05-10)
+
 ## 3.9.0 (2023-04-26)
 
 ## 3.8.0 (2023-04-12)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index ec1c59f8d0f68..c1ba155f46b1d 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "3.9.0",
+	"version": "3.10.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index d1f84cfba0147..7a764cce0cae5 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.16.0 (2023-05-10)
+
 ## 2.15.0 (2023-04-26)
 
 ## 2.14.0 (2023-04-12)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index c9bb0b2ad0dd7..4e74dbd402788 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "2.15.0",
+	"version": "2.16.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index 5d4b306ea3169..7999f83111331 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.31.0 (2023-05-10)
+
 ## 3.30.0 (2023-04-26)
 
 ## 3.29.0 (2023-04-12)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index dc9e2a548d26f..4013b1677bcd8 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "3.30.0",
+	"version": "3.31.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index 6842b2f1dd6be..f7c4a2395ae18 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.33.0 (2023-05-10)
+
 ## 2.32.0 (2023-04-26)
 
 ## 2.31.0 (2023-04-12)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index b15ac27023069..9c85725f2fd51 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "2.32.0",
+	"version": "2.33.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index e4f40911a0b58..89930db296115 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.15.0 (2023-05-10)
+
 ## 0.14.0 (2023-04-26)
 
 ## 0.13.0 (2023-04-12)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index b0870aba0a3e0..4b406a8e4d0de 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index 4a4c4087b31b9..79c97cc09e44c 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.32.0 (2023-05-10)
+
 ## 1.31.0 (2023-04-26)
 
 ## 1.30.0 (2023-04-12)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 2ab62ceb3db10..d292ee44f755c 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "1.31.0",
+	"version": "1.32.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index f7b5dd3bfa98a..411d47ab0b938 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.31.0 (2023-05-10)
+
 ## 3.30.0 (2023-04-26)
 
 ## 3.29.0 (2023-04-12)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index 3302621e409a8..4161b313a6a94 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "3.30.0",
+	"version": "3.31.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
index c4d5efc749611..7d31a2d03bd6c 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/AndroidManifest.xml
@@ -20,6 +20,9 @@
         <activity
             android:name=".GutenbergWebViewActivity"
             android:theme="@style/Base.GutenbergWebView" />
+        <activity
+            android:name=".GutenbergEmbedWebViewActivity"
+            android:theme="@style/Base.GutenbergWebView" />
     </application>
 
 </manifest>
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
index 8991486676a70..f5c0d325990b4 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -146,6 +146,8 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
                                                      String blockName,
                                                      String blockTitle);
 
+    void requestEmbedFullscreenPreview(String content, String title);
+
     void gutenbergDidSendButtonPressedAction(String buttonType);
 
     void onShowUserSuggestions(Consumer<String> onResult);
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java
new file mode 100644
index 0000000000000..30125a853ad0f
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergEmbedWebViewActivity.java
@@ -0,0 +1,163 @@
+package org.wordpress.mobile.ReactNativeGutenbergBridge;
+
+import android.annotation.SuppressLint;
+import android.graphics.Bitmap;
+import android.os.Bundle;
+import android.os.Handler;
+import android.view.Menu;
+import android.view.MenuInflater;
+import android.view.MenuItem;
+import android.view.View;
+import android.webkit.CookieManager;
+import android.webkit.WebChromeClient;
+import android.webkit.WebSettings;
+import android.webkit.WebView;
+import android.webkit.WebViewClient;
+import android.widget.ProgressBar;
+
+import androidx.annotation.Nullable;
+import androidx.appcompat.app.ActionBar;
+import androidx.appcompat.app.AppCompatActivity;
+import androidx.appcompat.widget.Toolbar;
+
+import java.util.concurrent.atomic.AtomicBoolean;
+
+public class GutenbergEmbedWebViewActivity extends AppCompatActivity {
+    public static final String ARG_CONTENT = "content";
+    public static final String ARG_TITLE = "title";
+    private static final String JAVA_SCRIPT_INTERFACE_NAME = "wpwebkit";
+
+    protected WebView mWebView;
+
+    private ProgressBar mProgressBar;
+    private AtomicBoolean mIsWebPageLoaded = new AtomicBoolean(false);
+    private final Handler mWebPageLoadedHandler = new Handler();
+    private final Runnable mWebPageLoadedRunnable = new Runnable() {
+        @Override public void run() {
+            if (!mIsWebPageLoaded.getAndSet(true)) {
+                mProgressBar.setVisibility(View.GONE);
+            }
+        }
+    };
+
+    @SuppressLint("SetJavaScriptEnabled")
+    protected void onCreate(@Nullable Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        setContentView(R.layout.activity_gutenberg_embed_web_view);
+
+        setupToolbar();
+
+        mWebView = findViewById(R.id.embed_web_view);
+
+        mProgressBar = findViewById(R.id.progress_bar);
+
+        // Set settings
+        WebSettings settings = mWebView.getSettings();
+        settings.setJavaScriptEnabled(true);
+
+        // Setup WebView client
+        setupWebViewClient();
+
+        // Setup Web Chrome client
+        mWebView.setWebChromeClient(new WebChromeClient() {
+            @Override
+            public void onProgressChanged(WebView view, int progress) {
+                if (progress == 100) {
+                    mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable);
+                    mWebPageLoadedHandler.postDelayed(mWebPageLoadedRunnable, 1500);
+                } else {
+                    mIsWebPageLoaded.compareAndSet(true, false);
+                    if (mProgressBar.getVisibility() == View.GONE) {
+                        mProgressBar.setVisibility(View.VISIBLE);
+                    }
+                    mProgressBar.setProgress(progress);
+                }
+            }
+        });
+
+        load();
+    }
+
+    protected void load() {
+        String content = getIntent().getExtras().getString(ARG_CONTENT);
+        mWebView.loadData(content, "text/html", "UTF-8");
+    }
+
+    private void setupToolbar() {
+        setTitle("");
+
+        Toolbar toolbar = findViewById(R.id.toolbar);
+        if (toolbar != null) {
+            setSupportActionBar(toolbar);
+
+            ActionBar actionBar = getSupportActionBar();
+            if (actionBar != null) {
+                actionBar.setDisplayShowTitleEnabled(true);
+                actionBar.setDisplayHomeAsUpEnabled(true);
+                actionBar.setHomeAsUpIndicator(R.drawable.ic_close_24px);
+                actionBar.setSubtitle("");
+                actionBar.setTitle(getToolbarTitle());
+            }
+        }
+    }
+
+    protected String getToolbarTitle() {
+        return getIntent().getExtras().getString(ARG_TITLE);
+    }
+
+    @Override
+    public boolean onOptionsItemSelected(final MenuItem item) {
+        if (mWebView == null) {
+            return false;
+        }
+
+        int itemID = item.getItemId();
+
+        if (itemID == android.R.id.home) {
+            finish();
+        }
+
+        return super.onOptionsItemSelected(item);
+    }
+
+    private void setupWebViewClient() {
+        mWebView.setWebViewClient(new WebViewClient() {
+            @Override
+            public void onPageStarted(WebView view, String url, Bitmap favicon) {
+                // Center the embed with a black background;
+                String css = "body{margin:0;background:#000;display:flex;align-items:center;}";
+                String js = String.format("(()=>{const c='%s';const s=document.createElement('style');s.textContent=c;document.head.append(s);})()", css);
+                view.evaluateJavascript(js, null);
+                super.onPageStarted(view, url, favicon);
+            }
+        });
+    }
+
+    @Override
+    public void onBackPressed() {
+        if (mWebView.canGoBack()) {
+            mWebView.goBack();
+        } else {
+            super.onBackPressed();
+        }
+    }
+
+    @Override
+    public void finish() {
+        runOnUiThread(() -> {
+            mWebView.removeJavascriptInterface(JAVA_SCRIPT_INTERFACE_NAME);
+            mWebView.clearHistory();
+            mWebView.clearFormData();
+            mWebView.clearCache(true);
+            mWebView.clearSslPreferences();
+        });
+
+        super.finish();
+    }
+
+    @Override
+    protected void onDestroy() {
+        mWebPageLoadedHandler.removeCallbacks(mWebPageLoadedRunnable);
+        super.onDestroy();
+    }
+}
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
index e779f15007ba3..14a0a0a8e8277 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -367,6 +367,11 @@ public void requestUnsupportedBlockFallback(String content, String blockId, Stri
                 replaceBlock(savedContent, savedBlockId), content, blockId, blockName, blockTitle);
     }
 
+    @ReactMethod
+    public void requestEmbedFullscreenPreview(String content, String title) {
+        mGutenbergBridgeJS2Parent.requestEmbedFullscreenPreview(content,title);
+    }
+
     @ReactMethod
     public void actionButtonPressed(String buttonType) {
         mGutenbergBridgeJS2Parent.gutenbergDidSendButtonPressedAction(buttonType);
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
index 10e07b40ea6ee..e270f91dbcae1 100644
--- a/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -100,6 +100,7 @@ public class WPAndroidGlueCode {
     private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener;
     private OnMediaEditorListener mOnMediaEditorListener;
     private OnGutenbergDidRequestUnsupportedBlockFallbackListener mOnGutenbergDidRequestUnsupportedBlockFallbackListener;
+    private OnGutenbergDidRequestEmbedFullscreenPreviewListener mOnGutenbergDidRequestEmbedFullscreenPreviewListener;
     private OnGutenbergDidSendButtonPressedActionListener mOnGutenbergDidSendButtonPressedActionListener;
     private ReplaceUnsupportedBlockCallback mReplaceUnsupportedBlockCallback;
     private OnMediaFilesCollectionBasedBlockEditorListener mOnMediaFilesCollectionBasedBlockEditorListener;
@@ -210,6 +211,10 @@ public interface OnGutenbergDidRequestUnsupportedBlockFallbackListener {
         void gutenbergDidRequestUnsupportedBlockFallback(UnsupportedBlock unsupportedBlock);
     }
 
+    public interface OnGutenbergDidRequestEmbedFullscreenPreviewListener {
+        void gutenbergDidRequestEmbedFullscreenPreview(String html, String title);
+    }
+
     public interface OnGutenbergDidSendButtonPressedActionListener {
         void gutenbergDidSendButtonPressedAction(String buttonType);
     }
@@ -462,6 +467,11 @@ public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockC
                         gutenbergDidRequestUnsupportedBlockFallback(new UnsupportedBlock(blockId, blockName, blockTitle, content));
             }
 
+            public void requestEmbedFullscreenPreview(String html, String title) {
+                mOnGutenbergDidRequestEmbedFullscreenPreviewListener.
+                        gutenbergDidRequestEmbedFullscreenPreview(html, title);
+            }
+
             @Override
             public void gutenbergDidSendButtonPressedAction(String buttonType) {
                 mOnGutenbergDidSendButtonPressedActionListener.gutenbergDidSendButtonPressedAction(buttonType);
@@ -647,6 +657,7 @@ public void attachToContainer(ViewGroup viewGroup,
                                   OnImageFullscreenPreviewListener onImageFullscreenPreviewListener,
                                   OnMediaEditorListener onMediaEditorListener,
                                   OnGutenbergDidRequestUnsupportedBlockFallbackListener onGutenbergDidRequestUnsupportedBlockFallbackListener,
+                                  OnGutenbergDidRequestEmbedFullscreenPreviewListener onGutenbergDidRequestEmbedFullscreenPreviewListener,
                                   OnGutenbergDidSendButtonPressedActionListener onGutenbergDidSendButtonPressedActionListener,
                                   ShowSuggestionsUtil showSuggestionsUtil,
                                   OnMediaFilesCollectionBasedBlockEditorListener onMediaFilesCollectionBasedBlockEditorListener,
@@ -669,6 +680,7 @@ public void attachToContainer(ViewGroup viewGroup,
         mOnImageFullscreenPreviewListener = onImageFullscreenPreviewListener;
         mOnMediaEditorListener = onMediaEditorListener;
         mOnGutenbergDidRequestUnsupportedBlockFallbackListener = onGutenbergDidRequestUnsupportedBlockFallbackListener;
+        mOnGutenbergDidRequestEmbedFullscreenPreviewListener = onGutenbergDidRequestEmbedFullscreenPreviewListener;
         mOnGutenbergDidSendButtonPressedActionListener = onGutenbergDidSendButtonPressedActionListener;
         mShowSuggestionsUtil = showSuggestionsUtil;
         mOnMediaFilesCollectionBasedBlockEditorListener = onMediaFilesCollectionBasedBlockEditorListener;
diff --git a/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml
new file mode 100644
index 0000000000000..fbbecba7d29ea
--- /dev/null
+++ b/packages/react-native-bridge/android/react-native-bridge/src/main/res/layout/activity_gutenberg_embed_web_view.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent">
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/appbar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignParentTop="true">
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@color/status_bar_color"
+            app:titleTextColor="@android:color/white"
+            app:contentInsetEnd="@dimen/toolbar_content_offset_end"
+            app:contentInsetLeft="@dimen/toolbar_content_offset"
+            app:contentInsetRight="@dimen/toolbar_content_offset_end"
+            app:contentInsetStart="@dimen/toolbar_content_offset" />
+
+    </com.google.android.material.appbar.AppBarLayout>
+
+    <WebView
+        android:id="@+id/embed_web_view"
+        android:layout_below="@+id/appbar"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:visibility="visible"/>
+
+    <ProgressBar
+        android:id="@+id/progress_bar"
+        style="@android:style/Widget.ProgressBar.Horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/progress_bar_height"
+        android:layout_alignTop="@+id/embed_web_view"
+        android:indeterminate="false"
+        android:progressDrawable="@drawable/progressbar_horizontal"/>
+
+</RelativeLayout>
diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
index 0129327903db1..d432f0de9e238 100644
--- a/packages/react-native-bridge/index.js
+++ b/packages/react-native-bridge/index.js
@@ -197,7 +197,7 @@ export function requestMediaPicker( source, filter, multiple, callback ) {
 }
 
 /**
- * Request to render an unsuported block.
+ * Request to render an unsupported block.
  *
  * A way to show unsupported blocks to the user is to render it on a web view.
  *
@@ -290,6 +290,18 @@ export function requestImageFullscreenPreview(
 	);
 }
 
+export function requestEmbedFullscreenPreview( content, title ) {
+	if ( isIOS ) {
+		/* eslint-disable-next-line no-console */
+		console.warn( 'requestEmbedFullscreenPreview is not supported on iOS' );
+		return;
+	}
+	return RNReactNativeGutenbergBridge.requestEmbedFullscreenPreview(
+		content,
+		title
+	);
+}
+
 export function requestMediaEditor( mediaUrl, callback ) {
 	return RNReactNativeGutenbergBridge.requestMediaEditor(
 		mediaUrl,
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
index 25cc3af320b24..4b13e4e6a15a9 100644
--- a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
+++ b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -1,3 +1,5 @@
+import React
+
 public struct MediaInfo: Encodable {
     public let id: Int32?
     public let url: String?
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
index 9b5908a8b7bc7..bfc3507732138 100644
--- a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
+++ b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -1,3 +1,5 @@
+import React
+
 struct GutenbergEvent {
     let name: String
     let body: Any?
diff --git a/packages/react-native-bridge/ios/SourceFile.swift b/packages/react-native-bridge/ios/SourceFile.swift
index b32a65c0b0f2c..a6deceed3549f 100644
--- a/packages/react-native-bridge/ios/SourceFile.swift
+++ b/packages/react-native-bridge/ios/SourceFile.swift
@@ -1,4 +1,4 @@
-import Foundation
+import WebKit
 
 public struct SourceFile {
     enum SourceFileError: Error {
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 3178c2ce522b5..d8715f7601b57 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,9 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Fix crash when trying to convert to regular blocks an undefined/deleted reusable block [#50475]
+-   [**] Tapping on a nested block now gets focus directly instead of having to tap multiple times depeding on the nesting levels. [#50108]
+-   [*] Use host app namespace in reusable block message [#50478]
 
 ## 1.94.0
 -   [*] Split pasted content between title and body. [#37169]
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
index 5d7cce975e373..a13e6047f1712 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-drag-and-drop.test.js
@@ -4,7 +4,6 @@
 import { blockNames } from './pages/editor-page';
 import {
 	clearClipboard,
-	clickElementOutsideOfTextInput,
 	dragAndDropAfterElement,
 	isAndroid,
 	setClipboard,
@@ -33,8 +32,10 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 		const spacerBlock = await editorPage.getBlockAtPosition(
 			blockNames.spacer
 		);
-		const paragraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 2 );
+		const paragraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
 
 		// Drag & drop the Spacer block after the Paragraph block
 		await dragAndDropAfterElement(
@@ -122,7 +123,7 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 		}
 	);
 
-	it( 'should be able to drag & drop a text-based block when the textinput is not focused', async () => {
+	it( 'should be able to drag & drop a text-based block when another textinput is focused', async () => {
 		// Initialize the editor with two Paragraph blocks
 		await editorPage.setHtmlContent(
 			[
@@ -131,16 +132,15 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 			].join( '\n\n' )
 		);
 
-		// Get elements for both blocks
-		const firstParagraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 1 );
-		const secondParagraphBlock =
-			await editorPage.getParagraphBlockWrapperAtPosition( 2 );
+		// Tap on the second block
+		const secondParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph,
+			2
+		);
+		await secondParagraphBlock.click();
 
-		// Tap on the first Paragraph block outside of the textinput
-		await clickElementOutsideOfTextInput(
-			editorPage.driver,
-			firstParagraphBlock
+		const firstParagraphBlock = await editorPage.getBlockAtPosition(
+			blockNames.paragraph
 		);
 
 		// Drag & drop the first Paragraph block after the second Paragraph block
@@ -156,8 +156,5 @@ describe( 'Gutenberg Editor Drag & Drop blocks tests', () => {
 
 		// Expect the second Paragraph block to have the expected content
 		expect( secondBlockText ).toMatch( testData.shortText );
-
-		// Remove the block
-		await editorPage.removeBlock();
 	} );
 } );
diff --git a/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
index 1a12e32b99e90..78215dcecc68c 100644
--- a/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
+++ b/packages/react-native-editor/__device-tests__/gutenberg-editor-media-blocks-@canary.test.js
@@ -131,6 +131,11 @@ onlyOniOS( 'Gutenberg Editor Cover Block test', () => {
 
 		await coverBlock.click();
 		expect( coverBlock ).toBeTruthy();
+
+		// Navigate upwards to select parent block
+		const navigateUpElement =
+			await editorPage.waitForElementToBeDisplayedById( 'Navigate Up' );
+		await navigateUpElement.click();
 		await editorPage.removeBlockAtPosition( blockNames.cover );
 	} );
 
@@ -144,6 +149,10 @@ onlyOniOS( 'Gutenberg Editor Cover Block test', () => {
 			blockNames.cover
 		);
 		await coverBlock.click();
+		// Navigate upwards to select parent block
+		const navigateUpElement =
+			await editorPage.waitForElementToBeDisplayedById( 'Navigate Up' );
+		await navigateUpElement.click();
 
 		await editorPage.openBlockSettings();
 		await editorPage.clickAddMediaFromCoverBlock();
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 6cad729d26ecb..433c3cd706c9c 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -91,7 +91,7 @@ class EditorPage {
 		}
 
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "${ blockName } Block. Row ${ position }.")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "${ blockName } Block. Row ${ position }.")]//android.widget.EditText`
 			: `//XCUIElementTypeButton[contains(@name, "${ blockName } Block. Row ${ position }.")]//XCUIElementTypeTextView`;
 
 		return await waitForVisible( this.driver, blockLocator );
@@ -109,19 +109,9 @@ class EditorPage {
 		position = 1,
 		options = { autoscroll: false }
 	) {
-		let elementType;
-		switch ( blockName ) {
-			case blockNames.cover:
-				elementType = 'XCUIElementTypeButton';
-				break;
-			default:
-				elementType = 'XCUIElementTypeOther';
-				break;
-		}
-
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`
-			: `(//${ elementType }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")])[1]`;
+			? `//android.widget.Button[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")]`
+			: `(//XCUIElementTypeOther[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockName } Block. Row ${ position }")])[2]`;
 
 		await waitForVisible( this.driver, blockLocator );
 
@@ -352,8 +342,10 @@ class EditorPage {
 	}
 
 	async openBlockSettings() {
-		const settingsButtonElement = 'Open Settings';
-		const settingsButton = await this.waitForElementToBeDisplayedById(
+		const settingsButtonElement = isAndroid()
+			? '//android.widget.Button[@content-desc="Open Settings"]/android.view.ViewGroup'
+			: '//XCUIElementTypeButton[@name="Open Settings"]';
+		const settingsButton = await this.waitForElementToBeDisplayedByXPath(
 			settingsButtonElement
 		);
 
@@ -362,9 +354,9 @@ class EditorPage {
 
 	async removeBlock() {
 		const blockActionsButtonElement = isAndroid()
-			? 'Open Block Actions Menu, Double tap to open Bottom Sheet with available options'
-			: 'Open Block Actions Menu';
-		const blockActionsMenu = await this.waitForElementToBeDisplayedById(
+			? '//android.widget.Button[contains(@content-desc, "Open Block Actions Menu")]'
+			: '//XCUIElementTypeButton[@name="Open Block Actions Menu"]';
+		const blockActionsMenu = await this.waitForElementToBeDisplayedByXPath(
 			blockActionsButtonElement
 		);
 		await blockActionsMenu.click();
@@ -609,15 +601,6 @@ class EditorPage {
 	// Paragraph Block functions
 	// =========================
 
-	async getParagraphBlockWrapperAtPosition( position = 1 ) {
-		// iOS needs a click to get the text element
-		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row ${ position }")]`
-			: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row ${ position }")])`;
-
-		return await waitForVisible( this.driver, blockLocator );
-	}
-
 	async sendTextToParagraphBlock( position, text, clear ) {
 		const paragraphs = text.split( '\n' );
 		for ( let i = 0; i < paragraphs.length; i++ ) {
@@ -648,7 +631,7 @@ class EditorPage {
 
 	async getNumberOfParagraphBlocks() {
 		const paragraphBlockLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "Paragraph Block. Row")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "Paragraph Block. Row")]//android.widget.EditText`
 			: `(//XCUIElementTypeButton[contains(@name, "Paragraph Block. Row")])`;
 
 		const locator = await this.driver.elementsByXPath(
@@ -702,7 +685,7 @@ class EditorPage {
 			: `//XCUIElementTypeButton[contains(@name, "List")]//XCUIElementTypeTextView`;
 
 		const listBlockTextLocator = isAndroid()
-			? `//android.view.ViewGroup[contains(@content-desc, "List Block. Row ${ position }")]//android.widget.EditText`
+			? `//android.widget.Button[contains(@content-desc, "List Block. Row ${ position }")]//android.widget.EditText`
 			: listBlockTextLocatorIOS;
 
 		return await waitForVisible( this.driver, listBlockTextLocator );
@@ -907,7 +890,7 @@ class EditorPage {
 		}
 
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[@content-desc="Shortcode Block. Row ${ position }"]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
+			? `//android.widget.Button[@content-desc="Shortcode Block. Row ${ position }"]//android.widget.EditText`
 			: `//XCUIElementTypeButton[contains(@name, "Shortcode Block. Row ${ position }")]//XCUIElementTypeTextView`;
 
 		return await waitForVisible( this.driver, blockLocator );
@@ -919,7 +902,7 @@ class EditorPage {
 
 	async getButtonBlockTextInputAtPosition( position = 1 ) {
 		const blockLocator = isAndroid()
-			? `//android.view.ViewGroup[@content-desc="Button Block. Row ${ position }"]/android.view.ViewGroup[2]/android.view.ViewGroup/android.view.ViewGroup/android.widget.EditText`
+			? `//android.widget.Button[@content-desc="Button Block. Row ${ position }"]//android.widget.EditText`
 			: `//XCUIElementTypeButton[contains(@name, "Button Block. Row ${ position }")]//XCUIElementTypeTextView`;
 
 		return await this.waitForElementToBeDisplayedByXPath( blockLocator );
diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
index b8565d216f6b3..b781357bee369 100644
--- a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
+++ b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -167,6 +167,11 @@ public void requestImageFullscreenPreview(String mediaUrl) {
 
             }
 
+            @Override
+            public void requestEmbedFullscreenPreview(String content, String title) {
+
+            }
+
             @Override
             public void requestMediaEditor(MediaSelectedCallback mediaSelectedCallback, String mediaUrl) {
 
diff --git a/packages/react-native-editor/src/api-fetch-setup.js b/packages/react-native-editor/src/api-fetch-setup.js
index 661bff038aff3..9885f2c55c90f 100644
--- a/packages/react-native-editor/src/api-fetch-setup.js
+++ b/packages/react-native-editor/src/api-fetch-setup.js
@@ -84,8 +84,14 @@ export const isPathSupported = ( path, method ) => {
 	);
 };
 
-export const shouldEnableCaching = ( path ) =>
-	! DISABLED_CACHING_ENDPOINTS.some( ( pattern ) => pattern.test( path ) );
+export const shouldEnableCaching = ( path ) => {
+	const disabledEndpoints = applyFilters(
+		'native.disabled_caching_endpoints',
+		DISABLED_CACHING_ENDPOINTS
+	);
+
+	return ! disabledEndpoints.some( ( pattern ) => pattern.test( path ) );
+};
 
 export default () => {
 	apiFetch.setFetchHandler( ( options ) => fetchHandler( options ) );
diff --git a/packages/react-native-editor/src/test/api-fetch-setup.test.js b/packages/react-native-editor/src/test/api-fetch-setup.test.js
index 3c42d511853e8..efa31751ff742 100644
--- a/packages/react-native-editor/src/test/api-fetch-setup.test.js
+++ b/packages/react-native-editor/src/test/api-fetch-setup.test.js
@@ -93,4 +93,17 @@ describe( 'shouldEnableCaching', () => {
 			expect( shouldEnableCaching( path ) ).toBe( false );
 		} );
 	} );
+
+	it( 'does not enable caching for endpoints provided to filter', () => {
+		addFilter(
+			'native.disabled_caching_endpoints',
+			'gutenberg-mobile',
+			( endpoints ) => {
+				return [ ...endpoints, /wp\/v2\/categories/i ];
+			}
+		);
+
+		// Filter was used to stop caching an endpoint from `enabledCachingPaths` array.
+		expect( shouldEnableCaching( 'wp/v2/categories' ) ).toBe( false );
+	} );
 } );
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index cf2ea13f33efe..21d744e24e2c4 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.16.0 (2023-05-10)
+
 ## 2.15.0 (2023-04-26)
 
 ## 2.14.0 (2023-04-12)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index be105f83f5575..e7f0e7c6a15d5 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "2.15.0",
+	"version": "2.16.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index e15e4ff1e447e..5f6ea7965043d 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.33.0 (2023-05-10)
+
 ## 4.32.0 (2023-04-26)
 
 ## 4.31.0 (2023-04-12)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 73674c8ef3858..f9ebd02170bad 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "4.32.0",
+	"version": "4.33.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 116b9acb67ffe..b477cd7952cb6 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index d2b8dfadaec2e..e33b64f2fc357 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index 715525f2a2b93..24cf54b4e6f42 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.10.0 (2023-05-10)
+
 ## 6.9.0 (2023-04-26)
 
 ## 6.8.0 (2023-04-12)
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index f5bf3cd170dd4..a25b8ee52cf2b 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "6.9.0",
+	"version": "6.10.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index e04ce921cdfdc..6b397538b7438 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,4 +2,6 @@
 
 ## Unreleased
 
+## 0.2.0 (2023-05-10)
+
 Initial release.
diff --git a/packages/router/package.json b/packages/router/package.json
index bf3ec89c35d50..6113ab723d4f5 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index ed21971a61248..4fc185c83ffbb 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 26.4.0 (2023-05-10)
+
 ## 26.3.0 (2023-04-26)
 
 ### Enhancements
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index f8bf10b60768c..425cfc3821026 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "26.3.0",
+	"version": "26.4.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index 790328339c9b3..3c8e38b49da2a 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.10.0 (2023-05-10)
+
 ## 4.9.0 (2023-04-26)
 
 ## 4.8.0 (2023-04-12)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index ae58fe7980b95..ae41b6223ac0c 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "4.9.0",
+	"version": "4.10.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index 575e6d98df137..80740eaaf7be4 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index cd2c84e45c502..25acdf8784dc1 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index 8d9a5e3b2d5d5..e4806f13effb7 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.16.0 (2023-05-10)
+
 ## 1.15.0 (2023-04-26)
 
 ## 1.14.0 (2023-04-12)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 731ba69c7c526..63dc6a5e69821 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "1.15.0",
+	"version": "1.16.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 720ac63a7f295..e6bbdb4ceb2e3 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 21.16.0 (2023-05-10)
+
 ## 21.15.0 (2023-04-26)
 
 ## 21.14.0 (2023-04-12)
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 66619c2103df0..aa8145774fae0 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "21.15.0",
+	"version": "21.16.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index b3f5f4b8bcf44..6529fb927d2c1 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.33.0 (2023-05-10)
+
 ## 2.32.0 (2023-04-26)
 
 ## 2.31.0 (2023-04-12)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index df401bf261cab..40ca9cdccff15 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "2.32.0",
+	"version": "2.33.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index 4994c8914db64..ca48abadecbbd 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.34.0 (2023-05-10)
+
 ## 3.33.0 (2023-04-26)
 
 ## 3.32.0 (2023-04-12)
diff --git a/packages/url/package.json b/packages/url/package.json
index 399e36545556c..3bbc9c68f4c24 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "3.33.0",
+	"version": "3.34.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index cb33ec3b9b01e..71620df85c934 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.10.0 (2023-05-10)
+
 ## 5.9.0 (2023-04-26)
 
 ## 5.8.0 (2023-04-12)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index a53493fd02aca..8efa31fc8f893 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "5.9.0",
+	"version": "5.10.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index f0a31e2ca0cec..5a10ea381a8aa 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.33.0 (2023-05-10)
+
 ## 2.32.0 (2023-04-26)
 
 ## 2.31.0 (2023-04-12)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index a6197cee2bb71..1c285526d8271 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "2.32.0",
+	"version": "2.33.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index a94fa58cb6c5a..4bef59c6da409 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.10.0 (2023-05-10)
+
 ## 3.9.0 (2023-04-26)
 
 ## 3.8.0 (2023-04-12)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 0ef47d99473b2..f8742b62570a4 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "3.9.0",
+	"version": "3.10.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 4cd9045caff0a..23ae842a1c2f1 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.33.0 (2023-05-10)
+
 ## 3.32.0 (2023-04-26)
 
 ## 3.31.0 (2023-04-12)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index bb8ea3825215c..cfb03505d8cea 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "3.32.0",
+	"version": "3.33.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 99376bf23adfc..6fd81bcbeca6c 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -655,7 +655,7 @@ public function data_generate_block_supports_font_size_fixtures() {
 			'returns clamp value using custom fluid config' => array(
 				'font_size_value' => '17px',
 				'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
-				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px);',
+				'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
 			),
 			'returns value when font size <= custom min font size bound' => array(
 				'font_size_value' => '15px',
diff --git a/phpunit/class-override-script-test.php b/phpunit/class-override-script-test.php
index b3af1acd80f44..0bc3bc5853ae1 100644
--- a/phpunit/class-override-script-test.php
+++ b/phpunit/class-override-script-test.php
@@ -40,7 +40,7 @@ public function test_localizes_script() {
 		);
 
 		$script = $wp_scripts->query( 'gutenberg-dummy-script', 'registered' );
-		$this->assertEquals( array( 'dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'dependency' ), $script->deps );
 	}
 
 	/**
@@ -60,7 +60,7 @@ public function test_replaces_registered_properties() {
 
 		$script = $wp_scripts->query( 'gutenberg-dummy-script', 'registered' );
 		$this->assertEquals( 'https://example.com/updated', $script->src );
-		$this->assertEquals( array( 'updated-dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'updated-dependency' ), $script->deps );
 		$this->assertEquals( 'updated-version', $script->ver );
 		$this->assertSame( 1, $script->args );
 	}
@@ -82,7 +82,7 @@ public function test_registers_new_script() {
 
 		$script = $wp_scripts->query( 'gutenberg-second-dummy-script', 'registered' );
 		$this->assertEquals( 'https://example.com/', $script->src );
-		$this->assertEquals( array( 'dependency', 'wp-i18n' ), $script->deps );
+		$this->assertEquals( array( 'dependency' ), $script->deps );
 		$this->assertEquals( 'version', $script->ver );
 		$this->assertSame( 1, $script->args );
 	}
diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php
index d7a28e2d6e238..7d63f62a2c1f0 100644
--- a/phpunit/class-wp-theme-json-test.php
+++ b/phpunit/class-wp-theme-json-test.php
@@ -2071,4 +2071,69 @@ public function data_process_blocks_custom_css() {
 			),
 		);
 	}
+
+	public function test_internal_syntax_is_converted_to_css_variables() {
+		$result = new WP_Theme_JSON_Gutenberg(
+			array(
+				'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+				'styles'  => array(
+					'color'    => array(
+						'background' => 'var:preset|color|primary',
+						'text'       => 'var(--wp--preset--color--secondary)',
+					),
+					'elements' => array(
+						'link' => array(
+							'color' => array(
+								'background' => 'var:preset|color|pri',
+								'text'       => 'var(--wp--preset--color--sec)',
+							),
+						),
+					),
+					'blocks'   => array(
+						'core/post-terms' => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--small)' ),
+							'color'      => array( 'background' => 'var:preset|color|secondary' ),
+						),
+						'core/navigation' => array(
+							'elements' => array(
+								'link' => array(
+									'color' => array(
+										'background' => 'var:preset|color|p',
+										'text'       => 'var(--wp--preset--color--s)',
+									),
+								),
+							),
+						),
+						'core/quote'      => array(
+							'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--d)' ),
+							'color'      => array( 'background' => 'var:preset|color|d' ),
+							'variations' => array(
+								'plain' => array(
+									'typography' => array( 'fontSize' => 'var(--wp--preset--font-size--s)' ),
+									'color'      => array( 'background' => 'var:preset|color|s' ),
+								),
+							),
+						),
+					),
+				),
+			)
+		);
+		$styles = $result->get_raw_data()['styles'];
+
+		$this->assertEquals( 'var(--wp--preset--color--primary)', $styles['color']['background'], 'Top level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['color']['text'], 'Top level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--color--pri)', $styles['elements']['link']['color']['background'], 'Element top level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--sec)', $styles['elements']['link']['color']['text'], 'Element top level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--font-size--small)', $styles['blocks']['core/post-terms']['typography']['fontSize'], 'Top block level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--secondary)', $styles['blocks']['core/post-terms']['color']['background'], 'Top block level: Assert the internal variables are convert to CSS custom variables.' );
+
+		$this->assertEquals( 'var(--wp--preset--color--p)', $styles['blocks']['core/navigation']['elements']['link']['color']['background'], 'Elements block level: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/navigation']['elements']['link']['color']['text'], 'Elements block level: Assert the originally correct values are still correct.' );
+
+		$this->assertEquals( 'var(--wp--preset--font-size--s)', $styles['blocks']['core/quote']['variations']['plain']['typography']['fontSize'], 'Style variations: Assert the originally correct values are still correct.' );
+		$this->assertEquals( 'var(--wp--preset--color--s)', $styles['blocks']['core/quote']['variations']['plain']['color']['background'], 'Style variations: Assert the internal variables are convert to CSS custom variables.' );
+
+	}
 }
diff --git a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
index d0ec32d9caac0..73864f2920039 100644
--- a/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
+++ b/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
@@ -2,6 +2,9 @@
 	"version": 2,
 	"settings": {
 		"appearanceTools": true,
+		"layout": {
+			"wideSize": "1000px"
+		},
 		"typography": {
 			"fluid": {
 				"minFontSize": "16px"
diff --git a/phpunit/fonts-api/bc-layer/bc-layer-tests-dataset.php b/phpunit/fonts-api/bc-layer/bc-layer-tests-dataset.php
new file mode 100644
index 0000000000000..6366aaec7df73
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/bc-layer-tests-dataset.php
@@ -0,0 +1,483 @@
+<?php
+/**
+ * Fonts API BC Layer datasets for unit and integration tests.
+ *
+ * @package    WordPress
+ * @subpackage Fonts API
+ */
+
+/**
+ * Trait for reusing datasets within the Fonts API's BC Layer tests.
+ */
+trait BC_Layer_Tests_Datasets {
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_deprecated_structure() {
+		return array(
+			'1 font'                           => array(
+				'fonts'    => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected' => array(
+					'migration'            => array(
+						'Merriweather' => array(
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Merriweather',
+								'font-style'   => 'normal',
+								'font-weight'  => '200 900',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+							),
+						),
+					),
+					'wp_register_webfonts' => array( 'merriweather' ),
+					'get_registered'       => array( 'merriweather', 'merriweather-200-900-normal' ),
+				),
+			),
+			'2 font in same font family'       => array(
+				'fonts'    => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'migration'            => array(
+						'Source Serif Pro' => array(
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Source Serif Pro',
+								'font-style'   => 'normal',
+								'font-weight'  => '300',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+								'font-display' => 'fallback',
+							),
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Source Serif Pro',
+								'font-style'   => 'italic',
+								'font-weight'  => '900',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+								'font-display' => 'fallback',
+							),
+						),
+					),
+					'wp_register_webfonts' => array( 'source-serif-pro' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+					),
+				),
+			),
+			'Fonts in different font families' => array(
+				'fonts'    => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected' => array(
+					'migration'            => array(
+						'Source Serif Pro' => array(
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Source Serif Pro',
+								'font-style'   => 'normal',
+								'font-weight'  => '300',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+								'font-display' => 'fallback',
+							),
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Source Serif Pro',
+								'font-style'   => 'italic',
+								'font-weight'  => '900',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+								'font-display' => 'fallback',
+							),
+						),
+						'Merriweather'     => array(
+							array(
+								'provider'     => 'local',
+								'font-family'  => 'Merriweather',
+								'font-style'   => 'normal',
+								'font-weight'  => '200 900',
+								'font-display' => 'fallback',
+								'font-stretch' => 'normal',
+								'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+							),
+						),
+					),
+					'wp_register_webfonts' => array( 'source-serif-pro', 'merriweather' ),
+					'get_registered'       => array(
+						'source-serif-pro',
+						'source-serif-pro-300-normal',
+						'source-serif-pro-900-italic',
+						'merriweather',
+						'merriweather-200-900-normal',
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_not_deprecated_structure() {
+		return array(
+			'1 font'                           => array(
+				array(
+					'Merriweather' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Merriweather',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+			),
+			'2 font in same font family'       => array(
+				array(
+					'Source Serif Pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+				),
+			),
+			'Fonts in different font families' => array(
+				array(
+					'source-serif-pro' => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '300',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+							'font-display' => 'fallback',
+						),
+					),
+					'merriweather'     => array(
+						array(
+							'provider'     => 'local',
+							'font-family'  => 'Merriweather',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_deprecated_structure_with_invalid_font_family() {
+		return array(
+			'non-string'                                  => array(
+				'fonts'            => array(
+					array(
+						'provider'     => 'local',
+						'font-family'  => null,
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected_message' => 'Font family not defined in the variation.',
+			),
+			'empty string in deprecated structure'        => array(
+				'fonts'            => array(
+					'0' => array(
+						'provider'     => 'local',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+			'incorrect parameter in deprecated structure' => array(
+				'fonts'            => array(
+					array(
+						'provider'     => 'local',
+						'FontFamily'   => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '300',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+					array(
+						'provider'     => 'local',
+						'font_family'  => 'Merriweather',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					array(
+						'provider'     => 'local',
+						'font family'  => 'Source Serif Pro',
+						'font-style'   => 'italic',
+						'font-weight'  => '900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						'font-display' => 'fallback',
+					),
+				),
+				'expected_message' => 'Font family not found.',
+			),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_return_registered_webfonts() {
+		return array(
+			'Single variation'       => array(
+				'fonts'    => array(
+					'Merriweather' => array(
+						array(
+							'font-family' => 'Merriweather',
+							'font-style'  => 'normal',
+							'font-weight' => '400',
+							'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+				'expected' => array(
+					'merriweather' => array(
+						'merriweather-400-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Merriweather',
+							'font-style'   => 'normal',
+							'font-weight'  => '400',
+							'font-display' => 'fallback',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+				),
+			),
+			'2 variations'           => array(
+				'fonts'    => array(
+					'Source Serif Pro' => array(
+						'source-serif-pro-200-900-normal' => array(
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						),
+						'source-serif-pro-200-900-italic' => array(
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						),
+					),
+				),
+				'expected' => array(
+					'source-serif-pro' => array(
+						'source-serif-pro-200-900-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						),
+						'source-serif-pro-200-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						),
+					),
+				),
+			),
+			'Multiple font families' => array(
+				'fonts'    => array(
+					'Merriweather'     => array(
+						array(
+							'font-family' => 'Merriweather',
+							'font-style'  => 'normal',
+							'font-weight' => '400',
+							'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+					'Source Serif Pro' => array(
+						'source-serif-pro-200-900-normal' => array(
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						),
+						'source-serif-pro-200-900-italic' => array(
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						),
+					),
+				),
+				'expected' => array(
+					'merriweather'     => array(
+						'merriweather-400-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Merriweather',
+							'font-style'   => 'normal',
+							'font-weight'  => '400',
+							'font-display' => 'fallback',
+							'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+						),
+					),
+					'source-serif-pro' => array(
+						'source-serif-pro-200-900-normal' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'normal',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+						),
+						'source-serif-pro-200-900-italic' => array(
+							'provider'     => 'local',
+							'font-family'  => 'Source Serif Pro',
+							'font-style'   => 'italic',
+							'font-weight'  => '200 900',
+							'font-display' => 'fallback',
+							'font-stretch' => 'normal',
+							'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+						),
+					),
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php b/phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php
new file mode 100644
index 0000000000000..6c5e3bad800b8
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Test case for the Fonts API's BC Layer tests.
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once __DIR__ . '/bc-layer-tests-dataset.php';
+
+/**
+ * Abstracts the common tasks for the Font API's BC Layer tests.
+ */
+abstract class Fonts_BcLayer_TestCase extends WP_Fonts_TestCase {
+	use BC_Layer_Tests_Datasets;
+
+	/**
+	 * Original WP_Webfonts instance, before the tests.
+	 *
+	 * @var WP_Fonts
+	 */
+	private $old_wp_webfonts;
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->old_wp_webfonts  = isset( $GLOBALS['wp_webfonts'] ) ? $GLOBALS['wp_webfonts'] : null;
+		$GLOBALS['wp_webfonts'] = null;
+	}
+
+	public function tear_down() {
+		$GLOBALS['wp_webfonts'] = $this->old_wp_webfonts;
+
+		parent::tear_down();
+	}
+
+	protected function set_up_webfonts_mock( $method ) {
+		$mock = $this->setup_object_mock( $method, WP_Webfonts::class );
+
+		// Set the global.
+		$GLOBALS['wp_webfonts'] = $mock;
+
+		return $mock;
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php b/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php
new file mode 100644
index 0000000000000..e623ecf19f7d1
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Integration tests for Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers Gutenberg_Fonts_API_BC_Layer::is_deprecated_structure
+ */
+class Tests_Fonts_GutenbergFontsApiBcLayer_IsDeprecatedStructure extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @param array $fonts Fonts to test.
+	 */
+	public function test_should_detect_deprecated_structure( array $fonts ) {
+		$this->assertTrue( Gutenberg_Fonts_API_BC_Layer::is_deprecated_structure( $fonts ) );
+	}
+
+	/**
+	 * @dataProvider data_not_deprecated_structure
+	 *
+	 * @param array $fonts Fonts to test.
+	 */
+	public function test_should_not_detect_deprecated_structure( array $fonts ) {
+		$this->assertFalse( Gutenberg_Fonts_API_BC_Layer::is_deprecated_structure( $fonts ) );
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php b/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php
new file mode 100644
index 0000000000000..c0e2c77d9ca1c
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php
@@ -0,0 +1,38 @@
+<?php
+/**
+ * Integration tests for Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure
+ */
+class Tests_Fonts_GutenbergFontsApiBcLayer_MigrateDeprecatedStructure extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @expectedDeprecated Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure
+	 *
+	 * @param array $fonts    Fonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_migrate_dprecated_structure_and_throw_deprecation( array $fonts, array $expected ) {
+		$this->assertSameSets( $expected['migration'], Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure( $fonts ) );
+	}
+
+	/**
+	 * @dataProvider data_not_deprecated_structure
+	 *
+	 * @param array $fonts Fonts to test.
+	 */
+	public function test_should_return_fonts_and_not_throw_deprecation( array $fonts ) {
+		$this->assertSameSets( $fonts, Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure( $fonts ) );
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php b/phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php
new file mode 100644
index 0000000000000..4a64068fee8c8
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php
@@ -0,0 +1,62 @@
+<?php
+/**
+ * Integration tests for wp_register_webfonts().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers ::wp_register_webfonts
+ */
+class Tests_Fonts_WpRegisterWebfonts extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @expectedDeprecated Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure
+	 * @expectedDeprecated wp_register_webfonts
+	 *
+	 * @param array $fonts Fonts to test.
+	 */
+	public function test_should_throw_deprecations( array $fonts ) {
+		wp_register_webfonts( $fonts );
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure
+	 *
+	 * @expectedDeprecated Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure
+	 * @expectedDeprecated wp_register_webfonts
+	 *
+	 * @param array $fonts    Fonts to test.
+	 * @param array $expected Expected results.
+	 */
+	public function test_should_register_with_deprecated_structure( array $fonts, array $expected ) {
+		$actual = wp_register_webfonts( $fonts );
+		$this->assertSame( $expected['wp_register_webfonts'], $actual, 'Font family handle(s) should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Fonts should match registered queue' );
+	}
+
+	/**
+	 * @dataProvider data_deprecated_structure_with_invalid_font_family
+	 *
+	 * @expectedDeprecated Gutenberg_Fonts_API_BC_Layer::migrate_deprecated_structure
+	 * @expectedDeprecated wp_register_webfonts
+	 *
+	 * @param array  $fonts            Fonts to test.
+	 * @param string $expected_message Expected notice message.
+	 */
+	public function test_should_not_register_with_undefined_font_family( array $fonts, $expected_message ) {
+		$this->expectNotice();
+		$this->expectNoticeMessage( $expected_message );
+
+		$actual = wp_register_webfonts( $fonts );
+		$this->assertSame( array(), $actual, 'Return value should be an empty array' );
+		$this->assertEmpty( $this->get_registered_handles(), 'No fonts should have registered' );
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php b/phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php
new file mode 100644
index 0000000000000..d6c1e10b691e4
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Integration tests for WP_Webfonts::get_all_webfonts().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../../wp-fonts-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers WP_Webfonts::get_all_webfonts
+ */
+class Tests_Fonts_WpWebfonts_GetAllWebfonts extends Fonts_BcLayer_TestCase {
+	use BC_Layer_Tests_Datasets;
+
+	/**
+	 * @dataProvider data_should_return_registered_webfonts
+	 *
+	 * @expectedDeprecated wp_webfonts
+	 * @expectedDeprecated WP_Webfonts::get_all_webfonts
+	 *
+	 * @param array $fonts    Fonts to register.
+	 * @param array $expected Expected result.
+	 */
+	public function test_should_return_registered_webfonts( array $fonts, array $expected ) {
+		wp_register_fonts( $fonts );
+
+		$this->assertSame( $expected, wp_webfonts()->get_all_webfonts() );
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php b/phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php
new file mode 100644
index 0000000000000..df17cb69b621c
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php
@@ -0,0 +1,134 @@
+<?php
+/**
+ * Integration tests for WP_Webfonts::get_font_slug().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers WP_Webfonts::get_font_slug
+ */
+class Tests_Fonts_WpWebfonts_GetFontSlug extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @dataProvider data_should_get_font_slug
+	 *
+	 * @expectedDeprecated WP_Webfonts::get_font_slug
+	 *
+	 * @param array|string $to_convert Value to test.
+	 * @param string       $expected   Expected result.
+	 */
+	public function test_should_get_font_slug( $to_convert, $expected ) {
+		$this->assertSame( $expected, WP_Webfonts::get_font_slug( $to_convert ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_get_font_slug() {
+		return array(
+			'font family: single word'                    => array(
+				'to_convert' => 'Merriweather',
+				'expected'   => 'merriweather',
+			),
+			'variation: single word font-family'          => array(
+				'to_convert' => array(
+					'font-family' => 'Merriweather',
+					'font-style'  => 'normal',
+					'font-weight' => '400',
+				),
+				'expected'   => 'merriweather',
+			),
+			'font family: multiword'                      => array(
+				'to_convert' => 'Source Sans Pro',
+				'expected'   => 'source-sans-pro',
+			),
+			'variation: multiword font-family'            => array(
+				'to_convert' => array(
+					'font-family' => 'Source Serif Pro',
+					'font-style'  => 'normal',
+					'font-weight' => '200 900',
+				),
+				'expected'   => 'source-serif-pro',
+			),
+			'font family: delimited by hyphens'           => array(
+				'to_convert' => 'source-serif-pro',
+				'expected'   => 'source-serif-pro',
+			),
+			'variation: font-family delimited by hyphens' => array(
+				'to_convert' => array(
+					'font-family' => 'source-serif-pro',
+					'font-style'  => 'normal',
+					'font-weight' => '200 900',
+				),
+				'expected'   => 'source-serif-pro',
+			),
+			'font family: delimited by underscore'        => array(
+				'to_convert' => 'source_serif_pro',
+				'expected'   => 'source_serif_pro',
+			),
+			'variation: font family delimited by underscore' => array(
+				'to_convert' => array(
+					'font-style'  => 'normal',
+					'font-weight' => '200 900',
+					'font-family' => 'Source_Serif_Pro',
+				),
+				'expected'   => 'source_serif_pro',
+			),
+			'font family: delimited by hyphens and underscore' => array(
+				'to_convert' => 'my-custom_font_family',
+				'expected'   => 'my-custom_font_family',
+			),
+			'variation: font family delimited by hyphens and underscore' => array(
+				'to_convert' => array(
+					'font-weight' => '700',
+					'font-family' => 'my-custom_font_family',
+					'font-style'  => 'italic',
+				),
+				'expected'   => 'my-custom_font_family',
+			),
+			'font family: delimited mixture'              => array(
+				'to_convert' => 'My custom_font-family',
+				'expected'   => 'my-custom_font-family',
+			),
+			'variation: font family delimited mixture'    => array(
+				'to_convert' => array(
+					'font-style'  => 'italic',
+					'font-family' => 'My custom_font-family',
+					'font-weight' => '700',
+				),
+				'expected'   => 'my-custom_font-family',
+			),
+		);
+	}
+
+	/**
+	 * @dataProvider data_should_not_get_font_slug
+	 *
+	 * @expectedDeprecated WP_Webfonts::get_font_slug
+	 *
+	 * @param array|string $to_convert Value to test.
+	 */
+	public function test_should_not_get_font_slug( $to_convert ) {
+		$this->assertFalse( WP_Webfonts::get_font_slug( $to_convert ) );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_not_get_font_slug() {
+		return array(
+			'Empty string' => array( '' ),
+			'Empty array'  => array( array() ),
+		);
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php b/phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php
new file mode 100644
index 0000000000000..3b41d9d37b414
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Integration tests for WP_Webfonts::get_registered_webfonts().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers WP_Webfonts::get_registered_webfonts
+ */
+class Tests_Fonts_WpWebfonts_GetRegisteredWebfonts extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @dataProvider       data_should_return_registered_webfonts
+	 *
+	 * @expectedDeprecated wp_webfonts
+	 * @expectedDeprecated WP_Webfonts::get_registered_webfonts
+	 *
+	 * @param array $fonts    Fonts to register.
+	 * @param array $expected Expected result.
+	 */
+	public function test_should_return_registered_webfonts( array $fonts, array $expected ) {
+		wp_register_fonts( $fonts );
+
+		$this->assertSame( $expected, wp_webfonts()->get_registered_webfonts() );
+	}
+}
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php b/phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php
new file mode 100644
index 0000000000000..faaaf0e7ef6b7
--- /dev/null
+++ b/phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php
@@ -0,0 +1,113 @@
+<?php
+/**
+ * Integration tests for WP_Webfonts::register_webfont().
+ *
+ * @package    Gutenberg
+ * @subpackage Fonts API
+ */
+
+require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+
+/**
+ * @group  fontsapi
+ * @group  fontsapi-bclayer
+ * @covers WP_Webfonts::register_webfont
+ */
+class Tests_Fonts_WpWebfonts_RegisterWebfont extends Fonts_BcLayer_TestCase {
+
+	/**
+	 * @expectedDeprecated wp_webfonts
+	 * @expectedDeprecated WP_Webfonts::register_webfont
+	 */
+	public function test_should_bail_out() {
+		$webfont = array();
+		$this->assertFalse( wp_webfonts()->register_webfont( $webfont ) );
+	}
+
+	/**
+	 * @dataProvider data_should_register_webfont
+	 *
+	 * @expectedDeprecated wp_webfonts
+	 * @expectedDeprecated WP_Webfonts::register_webfont
+	 *
+	 * @param array        $input    Font to register.
+	 * @param string|false $expected Expected result.
+	 */
+	public function test_should_register_webfont( array $input, $expected ) {
+		$this->assertSame( $expected['register_webfont'], wp_webfonts()->register_webfont( ...$input ), 'Font-family handle should be returned' );
+		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Font should be registered' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_register_webfont() {
+		return array(
+			'No font family or variation handles'   => array(
+				'input'    => array(
+					array(
+						'font-family' => 'Merriweather',
+						'font-style'  => 'italic',
+						'font-weight' => '400',
+						'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+				),
+				'expected' => array(
+					'register_webfont' => 'merriweather',
+					'get_registered'   => array( 'merriweather', 'merriweather-400-italic' ),
+				),
+			),
+			'Has font family handle but no variation handles' => array(
+				'input'    => array(
+					array(
+						'font-family'  => 'Source Serif Pro',
+						'font-style'   => 'normal',
+						'font-weight'  => '200 900',
+						'font-display' => 'fallback',
+						'font-stretch' => 'normal',
+						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
+					),
+					'source-serif-pro',
+				),
+				'expected' => array(
+					'register_webfont' => 'source-serif-pro',
+					'get_registered'   => array( 'source-serif-pro', 'source-serif-pro-200-900-normal' ),
+				),
+			),
+			'No font family handle but has variation handle' => array(
+				'input'    => array(
+					array(
+						'font-family' => 'Merriweather',
+						'font-style'  => 'italic',
+						'font-weight' => '400',
+						'src'         => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
+					),
+					'',
+					'merriweather-italic-400',
+				),
+				'expected' => array(
+					'register_webfont' => 'merriweather',
+					'get_registered'   => array( 'merriweather', 'merriweather-italic-400' ),
+				),
+			),
+			'Has font family and variation handles' => array(
+				'input'    => array(
+					array(
+						'font-family' => 'Source Serif Pro',
+						'font-style'  => 'italic',
+						'font-weight' => '200 900',
+						'src'         => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
+					),
+					'source-serif-pro',
+					'source-serif-pro-variable-italic',
+				),
+				'expected' => array(
+					'register_webfont' => 'source-serif-pro',
+					'get_registered'   => array( 'source-serif-pro', 'source-serif-pro-variable-italic' ),
+				),
+			),
+		);
+	}
+}
diff --git a/phpunit/fonts-api/wpPrintFonts-test.php b/phpunit/fonts-api/wpPrintFonts-test.php
index d0108eec14faf..cb500aaa0430f 100644
--- a/phpunit/fonts-api/wpPrintFonts-test.php
+++ b/phpunit/fonts-api/wpPrintFonts-test.php
@@ -123,4 +123,70 @@ private function setup_integrated_deps( array $setup, $wp_fonts, $enqueue = true
 			$wp_fonts->enqueue( $setup['enqueued'] );
 		}
 	}
+
+	/**
+	 * @dataProvider data_should_print_all_registered_fonts_for_iframed_editor
+	 *
+	 * @param string $fonts    Fonts to register.
+	 * @param array  $expected Expected results.
+	 */
+	public function test_should_print_all_registered_fonts_for_iframed_editor( $fonts, $expected ) {
+		wp_register_fonts( $fonts );
+
+		$this->expectOutputString( $expected['output'] );
+		$actual_done = wp_print_fonts( true );
+		$this->assertSameSets( $expected['done'], $actual_done, 'All registered font-family handles should be returned' );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_should_print_all_registered_fonts_for_iframed_editor() {
+		$local_fonts = $this->get_registered_local_fonts();
+		$font_faces  = $this->get_registered_fonts_css();
+
+		return array(
+			'Merriweather with 1 variation'      => array(
+				'fonts'    => array( 'merriweather' => $local_fonts['merriweather'] ),
+				'expected' => array(
+					'done'   => array( 'merriweather', 'merriweather-200-900-normal' ),
+					'output' => sprintf(
+						"<style id='wp-fonts-local' type='text/css'>\n%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal']
+					),
+				),
+			),
+			'Source Serif Pro with 2 variations' => array(
+				'fonts'    => array( 'Source Serif Pro' => $local_fonts['Source Serif Pro'] ),
+				'expected' => array(
+					'done'   => array( 'source-serif-pro', 'Source Serif Pro-300-normal', 'Source Serif Pro-900-italic' ),
+					'output' => sprintf(
+						"<style id='wp-fonts-local' type='text/css'>\n%s%s\n</style>\n",
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					),
+				),
+			),
+			'all fonts'                          => array(
+				'fonts'    => $local_fonts,
+				'expected' => array(
+					'done'   => array(
+						'merriweather',
+						'merriweather-200-900-normal',
+						'source-serif-pro',
+						'Source Serif Pro-300-normal',
+						'Source Serif Pro-900-italic',
+					),
+					'output' => sprintf(
+						"<style id='wp-fonts-local' type='text/css'>\n%s%s%s\n</style>\n",
+						$font_faces['merriweather-200-900-normal'],
+						$font_faces['Source Serif Pro-300-normal'],
+						$font_faces['Source Serif Pro-900-italic']
+					),
+				),
+			),
+		);
+	}
 }
diff --git a/phpunit/fonts-api/wpRegisterFonts-test.php b/phpunit/fonts-api/wpRegisterFonts-test.php
index 30ab64f3fa437..da54fd6438f97 100644
--- a/phpunit/fonts-api/wpRegisterFonts-test.php
+++ b/phpunit/fonts-api/wpRegisterFonts-test.php
@@ -101,220 +101,4 @@ public function data_fonts() {
 			),
 		);
 	}
-
-	/**
-	 * @dataProvider data_deprecated_structure
-	 *
-	 * @expectedDeprecated WP_Webfonts::migrate_deprecated_structure
-	 *
-	 * @param array $fonts Fonts to test.
-	 */
-	public function test_should_throw_deprecation_with_deprecated_structure( array $fonts ) {
-		wp_register_fonts( $fonts );
-	}
-
-	/**
-	 * @dataProvider data_deprecated_structure
-	 *
-	 * @expectedDeprecated WP_Webfonts::migrate_deprecated_structure
-	 *
-	 * @param array $fonts    Fonts to test.
-	 * @param array $expected Expected results.
-	 */
-	public function test_should_register_with_deprecated_structure( array $fonts, array $expected ) {
-		$actual = wp_register_fonts( $fonts );
-		$this->assertSame( $expected['wp_register_fonts'], $actual, 'Font family handle(s) should be returned' );
-		$this->assertSame( $expected['get_registered'], $this->get_registered_handles(), 'Fonts should match registered queue' );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array
-	 */
-	public function data_deprecated_structure() {
-		return array(
-			'1 font'                           => array(
-				'fonts'    => array(
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Merriweather',
-						'font-style'   => 'normal',
-						'font-weight'  => '200 900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
-					),
-				),
-				'expected' => array(
-					'wp_register_fonts' => array( 'merriweather' ),
-					'get_registered'    => array( 'merriweather', 'merriweather-200-900-normal' ),
-				),
-			),
-			'2 font in same font family'       => array(
-				'fonts'    => array(
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'normal',
-						'font-weight'  => '300',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'italic',
-						'font-weight'  => '900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-				),
-				'expected' => array(
-					'wp_register_fonts' => array( 'source-serif-pro' ),
-					'get_registered'    => array(
-						'source-serif-pro',
-						'source-serif-pro-300-normal',
-						'source-serif-pro-900-italic',
-					),
-				),
-			),
-			'Fonts in different font families' => array(
-				'fonts'    => array(
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'normal',
-						'font-weight'  => '300',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Merriweather',
-						'font-style'   => 'normal',
-						'font-weight'  => '200 900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
-					),
-					array(
-						'provider'     => 'local',
-						'font-family'  => 'Source Serif Pro',
-						'font-style'   => 'italic',
-						'font-weight'  => '900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-				),
-				'expected' => array(
-					'wp_register_fonts' => array( 'source-serif-pro', 'merriweather' ),
-					'get_registered'    => array(
-						'source-serif-pro',
-						'source-serif-pro-300-normal',
-						'source-serif-pro-900-italic',
-						'merriweather',
-						'merriweather-200-900-normal',
-					),
-				),
-			),
-		);
-	}
-
-	/**
-	 * @dataProvider data_invalid_font_family
-	 *
-	 * @expectedDeprecated WP_Webfonts::migrate_deprecated_structure
-	 *
-	 * @param array  $fonts            Fonts to test.
-	 * @param string $expected_message Expected notice message.
-	 */
-	public function test_should_not_register_with_undefined_font_family( array $fonts, $expected_message ) {
-		$this->expectNotice();
-		$this->expectNoticeMessage( $expected_message );
-
-		$actual = wp_register_fonts( $fonts );
-		$this->assertSame( array(), $actual, 'Return value should be an empty array' );
-		$this->assertEmpty( $this->get_registered_handles(), 'No fonts should have registered' );
-	}
-
-	/**
-	 * Data provider.
-	 *
-	 * @return array
-	 */
-	public function data_invalid_font_family() {
-		return array(
-			'non-string'                                  => array(
-				'fonts'            => array(
-					array(
-						'provider'     => 'local',
-						'font-family'  => null,
-						'font-style'   => 'normal',
-						'font-weight'  => '200 900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
-					),
-				),
-				'expected_message' => 'Font family not defined in the variation.',
-			),
-			'empty string in deprecated structure'        => array(
-				'fonts'            => array(
-					'0' => array(
-						'provider'     => 'local',
-						'font-style'   => 'normal',
-						'font-weight'  => '300',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-				),
-				'expected_message' => 'Font family not found.',
-			),
-			'incorrect parameter in deprecated structure' => array(
-				'fonts'            => array(
-					array(
-						'provider'     => 'local',
-						'FontFamily'   => 'Source Serif Pro',
-						'font-style'   => 'normal',
-						'font-weight'  => '300',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-					array(
-						'provider'     => 'local',
-						'font_family'  => 'Merriweather',
-						'font-style'   => 'normal',
-						'font-weight'  => '200 900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/merriweather.ttf.woff2',
-					),
-					array(
-						'provider'     => 'local',
-						'font family'  => 'Source Serif Pro',
-						'font-style'   => 'italic',
-						'font-weight'  => '900',
-						'font-display' => 'fallback',
-						'font-stretch' => 'normal',
-						'src'          => 'https://example.com/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2',
-						'font-display' => 'fallback',
-					),
-				),
-				'expected_message' => 'Font family not found.',
-			),
-		);
-	}
 }
diff --git a/readme.txt b/readme.txt
index ef8e6420a3c89..09a9d2b49e6f2 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,6 +1,6 @@
 === Gutenberg ===
 Contributors: matveb, joen, karmatosed
-Tested up to: 6.1
+Tested up to: 6.2
 Stable tag: V.V.V
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 4417daff97cd0..5f9fd13c04157 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -266,7 +266,7 @@
 							"type": "string"
 						},
 						"wideSize": {
-							"description": "Sets the max-width of wide (`.alignwide`) content.",
+							"description": "Sets the max-width of wide (`.alignwide`) content. Also used as the maximum viewport when calculating fluid font sizes",
 							"type": "string"
 						}
 					},
@@ -708,11 +708,11 @@
 							"type": "object",
 							"properties": {
 								"border": {
-									"description": "Settings related to borders.\nGutenberg plugin required.",
+									"description": "Settings related to borders.",
 									"type": "object",
 									"properties": {
 										"radius": {
-											"description": "Allow users to set custom border radius.\nGutenberg plugin required.",
+											"description": "Allow users to set custom border radius.",
 											"type": "boolean",
 											"default": false
 										}
diff --git a/storybook/decorators/with-theme.js b/storybook/decorators/with-theme.js
index 9f11dc63dbaed..083d929a5865a 100644
--- a/storybook/decorators/with-theme.js
+++ b/storybook/decorators/with-theme.js
@@ -19,8 +19,8 @@ const themes = {
 		accent: '#3858e9',
 		background: '#f0f0f0',
 	},
-	modern: {
-		accent: '#3858e9',
+	classic: {
+		accent: '#007cba',
 	},
 };
 
diff --git a/storybook/main.js b/storybook/main.js
index a0f5c333bb0d8..fa59c739ea3d5 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -4,6 +4,7 @@ const stories = [
 	'../packages/components/src/**/stories/*.@(js|tsx|mdx)',
 	'../packages/icons/src/**/stories/*.@(js|tsx|mdx)',
 	'../packages/edit-site/src/**/stories/*.@(js|tsx|mdx)',
+	'../packages/components/README.mdx',
 ].filter( Boolean );
 
 module.exports = {
@@ -14,7 +15,7 @@ module.exports = {
 	addons: [
 		{
 			name: '@storybook/addon-docs',
-			options: { configureJSX: true },
+			options: { configureJSX: true, transcludeMarkdown: true },
 		},
 		'@storybook/addon-controls',
 		'@storybook/addon-viewport',
diff --git a/storybook/preview.js b/storybook/preview.js
index 9b4e1e334b739..ff73a95fa4131 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -6,7 +6,6 @@ import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithMaxWidthWrapper } from './decorators/with-max-width-wrapper';
 import { WithRTL } from './decorators/with-rtl';
 import { WithTheme } from './decorators/with-theme';
-import './style.scss';
 
 export const globalTypes = {
 	direction: {
@@ -31,7 +30,7 @@ export const globalTypes = {
 				{ value: 'default', title: 'Default' },
 				{ value: 'darkBg', title: 'Dark (background)' },
 				{ value: 'lightGrayBg', title: 'Light gray (background)' },
-				{ value: 'modern', title: 'Modern (accent)' },
+				{ value: 'classic', title: 'Classic (accent)' },
 			],
 		},
 	},
diff --git a/storybook/stories/docs/components/contributing.story.mdx b/storybook/stories/docs/components/contributing.story.mdx
new file mode 100644
index 0000000000000..1ffd0c49d4020
--- /dev/null
+++ b/storybook/stories/docs/components/contributing.story.mdx
@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import Contributing from '@wordpress/components/CONTRIBUTING.md';
+
+<Meta title="Components/Contributing Guidelines" />
+
+<Contributing />
diff --git a/storybook/stories/docs/components/readme.story.mdx b/storybook/stories/docs/components/readme.story.mdx
new file mode 100644
index 0000000000000..7996188ffb50b
--- /dev/null
+++ b/storybook/stories/docs/components/readme.story.mdx
@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/addon-docs';
+import Readme from '@wordpress/components/README.md';
+
+<Meta title="Components/Introduction" />
+
+<Readme />
diff --git a/storybook/stories/docs/introduction.story.mdx b/storybook/stories/docs/introduction.story.mdx
index f353cf7c7e0ab..46079eafe47b4 100644
--- a/storybook/stories/docs/introduction.story.mdx
+++ b/storybook/stories/docs/introduction.story.mdx
@@ -7,7 +7,7 @@ import { InlineIcon } from './inline-icon';
 
 ## Welcome!
 
-The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in the WordPress package [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components).
+The WordPress Gutenberg project uses Storybook to view and work with the UI components developed in WordPress packages, especially [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components).
 
 On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.
 
diff --git a/storybook/style.scss b/storybook/style.scss
deleted file mode 100644
index 172fc48710b80..0000000000000
--- a/storybook/style.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use "sass:math";
-
-// Loading @wordpress/base-styles as they have mixins and other dependencies
-// used within @wordpress/*/src/*.scss
-@import "~@wordpress/base-styles/animations";
-@import "~@wordpress/base-styles/breakpoints";
-@import "~@wordpress/base-styles/colors";
-@import "~@wordpress/base-styles/mixins";
-@import "~@wordpress/base-styles/default-custom-properties";
-@import "~@wordpress/base-styles/variables";
-@import "~@wordpress/base-styles/z-index";
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
index 9d86e206f0219..13d5759ee7db9 100644
--- a/test/e2e/specs/editor/blocks/buttons.spec.js
+++ b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -182,11 +182,11 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
 		);
 		await page.click( 'role=button[name="Color: Cyan bluish gray"i]' );
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=button[name="Color: Vivid red"i]' );
 
@@ -211,13 +211,13 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Text styles"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
 
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=button[name="Custom color picker."i]' );
 		await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
@@ -246,7 +246,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click( 'role=button[name="Gradient: Purple to yellow"i]' );
@@ -275,7 +275,7 @@ test.describe( 'Buttons', () => {
 			`role=region[name="Editor settings"i] >> role=tab[name="Styles"i]`
 		);
 		await page.click(
-			'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
+			'role=region[name="Editor settings"i] >> role=button[name="Color Background styles"i]'
 		);
 		await page.click( 'role=tab[name="Gradient"i]' );
 		await page.click(
diff --git a/test/e2e/specs/editor/blocks/classic.spec.js b/test/e2e/specs/editor/blocks/classic.spec.js
index 559fbc93a1054..cba1472caf916 100644
--- a/test/e2e/specs/editor/blocks/classic.spec.js
+++ b/test/e2e/specs/editor/blocks/classic.spec.js
@@ -84,10 +84,6 @@ test.describe( 'Classic', () => {
 		);
 		await expect( galleryBlock ).toBeVisible();
 
-		// Focus on the editor so that keyboard shortcuts work.
-		// See: https://github.com/WordPress/gutenberg/issues/46844
-		await galleryBlock.focus();
-
 		// Check that you can undo back to a Classic block gallery in one step.
 		await pageUtils.pressKeys( 'primary+z' );
 		await expect(
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 3684980affb29..eb5d9e2780b44 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -538,6 +538,188 @@ test.describe( 'Image', () => {
 <figure class="wp-block-image"><img alt=""/></figure>
 <!-- /wp:image -->` );
 	} );
+
+	test( 'can be replaced by dragging-and-dropping images from the inserter', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = page.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		async function openMediaTab() {
+			await page
+				.getByRole( 'button', { name: 'Toggle block inserter' } )
+				.click();
+
+			await blockLibrary.getByRole( 'tab', { name: 'Media' } ).click();
+
+			await blockLibrary
+				.getByRole( 'tabpanel', { name: 'Media' } )
+				.getByRole( 'button', { name: 'Openverse' } )
+				.click();
+		}
+
+		await openMediaTab();
+
+		// Drag the first image from the media library into the image block.
+		await blockLibrary
+			.getByRole( 'listbox', { name: 'Media List' } )
+			.getByRole( 'option' )
+			.first()
+			.dragTo( imageBlock );
+
+		await expect( async () => {
+			const blocks = await editor.getBlocks();
+			expect( blocks ).toHaveLength( 1 );
+
+			const [
+				{
+					attributes: { url },
+				},
+			] = blocks;
+			expect(
+				await imageBlock.getByRole( 'img' ).getAttribute( 'src' )
+			).toBe( url );
+			expect(
+				new URL( url ).host,
+				'should be updated to the media library'
+			).toBe( new URL( page.url() ).host );
+		}, 'should update the image from the media inserter' ).toPass();
+		const [
+			{
+				attributes: { url: firstUrl },
+			},
+		] = await editor.getBlocks();
+
+		await openMediaTab();
+
+		// Drag the second image from the media library into the image block.
+		await blockLibrary
+			.getByRole( 'listbox', { name: 'Media List' } )
+			.getByRole( 'option' )
+			.nth( 1 )
+			.dragTo( imageBlock );
+
+		await expect( async () => {
+			const blocks = await editor.getBlocks();
+			expect( blocks ).toHaveLength( 1 );
+
+			const [
+				{
+					attributes: { url },
+				},
+			] = blocks;
+			expect( url ).not.toBe( firstUrl );
+			expect(
+				await imageBlock.getByRole( 'img' ).getAttribute( 'src' )
+			).toBe( url );
+			expect(
+				new URL( url ).host,
+				'should be updated to the media library'
+			).toBe( new URL( page.url() ).host );
+		}, 'should replace the original image with the second image' ).toPass();
+	} );
+
+	test( 'should allow dragging and dropping HTML to media placeholder', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = page.getByRole( 'document', {
+			name: 'Block: Image',
+		} );
+
+		const html = `
+			<figure>
+				<img src="https://live.staticflickr.com/3894/14962688165_04759a8b03_b.jpg" alt="Cat">
+				<figcaption>"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.</figcaption>
+			</figure>
+		`;
+
+		await page.evaluate( ( _html ) => {
+			const dummy = document.createElement( 'div' );
+			dummy.style.width = '10px';
+			dummy.style.height = '10px';
+			dummy.style.zIndex = 99999;
+			dummy.style.position = 'fixed';
+			dummy.style.top = 0;
+			dummy.style.left = 0;
+			dummy.draggable = 'true';
+			dummy.addEventListener( 'dragstart', ( event ) => {
+				event.dataTransfer.setData( 'text/html', _html );
+				setTimeout( () => {
+					dummy.remove();
+				}, 0 );
+			} );
+			document.body.appendChild( dummy );
+		}, html );
+
+		await page.mouse.move( 0, 0 );
+		await page.mouse.down();
+		await imageBlock.hover();
+		await page.mouse.up();
+
+		const host = new URL( page.url() ).host;
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/image',
+				attributes: {
+					link: expect.stringContaining( host ),
+					url: expect.stringContaining( host ),
+					id: expect.any( Number ),
+					alt: 'Cat',
+					caption: `"Cat" by tomhouslay is licensed under <a href="https://creativecommons.org/licenses/by-nc/2.0/?ref=openverse">CC BY-NC 2.0</a>.`,
+				},
+			},
+		] );
+		const url = ( await editor.getBlocks() )[ 0 ].attributes.url;
+		await expect( imageBlock.getByRole( 'img' ) ).toHaveAttribute(
+			'src',
+			url
+		);
+	} );
+
+	test( 'should appear in the frontend published post content', async ( {
+		editor,
+		imageBlockUtils,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/image' } );
+		const imageBlock = page.locator(
+			'role=document[name="Block: Image"i]'
+		);
+		await expect( imageBlock ).toBeVisible();
+
+		const filename = await imageBlockUtils.upload(
+			imageBlock.locator( 'data-testid=form-file-upload-input' )
+		);
+
+		const imageInEditor = imageBlock.locator( 'role=img' );
+		await expect( imageInEditor ).toBeVisible();
+		await expect( imageInEditor ).toHaveAttribute(
+			'src',
+			new RegExp( filename )
+		);
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		const figureDom = page.getByRole( 'figure' );
+		await expect( figureDom ).toBeVisible();
+
+		const imageDom = figureDom.locator( 'img' );
+		await expect( imageDom ).toBeVisible();
+		await expect( imageDom ).toHaveAttribute(
+			'src',
+			new RegExp( filename )
+		);
+	} );
 } );
 
 class ImageBlockUtils {
diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js
index 81bdf0d27e308..dc30314195731 100644
--- a/test/e2e/specs/editor/blocks/navigation.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation.spec.js
@@ -678,7 +678,7 @@ test.describe( 'Navigation block', () => {
 						name: 'Settings',
 					} )
 					.getByRole( 'heading', {
-						name: 'Link Settings',
+						name: 'Settings',
 					} )
 			).toBeVisible();
 
@@ -802,6 +802,529 @@ test.describe( 'Navigation block', () => {
 	} );
 } );
 
+test.describe( 'Navigation block - Frontend interactivity', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.deleteAllPages();
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.deleteAllPages();
+		await requestUtils.deleteAllMenus();
+	} );
+
+	test.describe( 'Overlay menu', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+			} );
+			await editor.canvas.click( 'body' );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-link {"label":"Item 1","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					<!-- wp:navigation-link {"label":"Item 2","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'always' },
+			} );
+			await editor.saveSiteEditorEntities();
+		} );
+
+		test( 'overlay menu opens on click on open menu button', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+		} );
+
+		test( 'overlay menu closes on click on close menu button', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+			const closeMenuButton = page.getByRole( 'button', {
+				name: 'Close menu',
+			} );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await closeMenuButton.click();
+			await expect( overlayMenuFirstElement ).toBeHidden();
+		} );
+
+		test( 'overlay menu closes on ESC key', async ( { page } ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await page.keyboard.press( 'Escape' );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await expect( openMenuButton ).toBeFocused();
+		} );
+
+		test( 'overlay menu focuses on first element after opening', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await expect( overlayMenuFirstElement ).toBeFocused();
+		} );
+
+		test( 'overlay menu traps focus', async ( { page } ) => {
+			await page.goto( '/' );
+			const overlayMenuFirstElement = page.getByRole( 'link', {
+				name: 'Item 1',
+			} );
+			const openMenuButton = page.getByRole( 'button', {
+				name: 'Open menu',
+			} );
+			const closeMenuButton = page.getByRole( 'button', {
+				name: 'Close menu',
+			} );
+			await expect( overlayMenuFirstElement ).toBeHidden();
+			await openMenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( overlayMenuFirstElement ).toBeVisible();
+			await expect( overlayMenuFirstElement ).toBeFocused();
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Tab' );
+			await expect( closeMenuButton ).toBeFocused();
+			await page.keyboard.press( 'Shift+Tab' );
+			await page.keyboard.press( 'Shift+Tab' );
+			await expect( overlayMenuFirstElement ).toBeFocused();
+		} );
+	} );
+
+	test.describe( 'Submenus (Open on click)', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+			} );
+			await editor.canvas.click( 'body' );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-link {"label":"Link 1","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					<!-- wp:navigation-submenu {"label":"Simple Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Simple Submenu Link 1","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					<!-- /wp:navigation-submenu -->
+					<!-- wp:navigation-submenu {"label":"Complex Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Complex Submenu Link 1","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+						<!-- wp:navigation-submenu {"label":"Nested Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+							<!-- wp:navigation-link {"label":"Nested Submenu Link 1","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+						<!-- /wp:navigation-submenu -->
+						<!-- wp:navigation-link {"label":"Complex Submenu Link 2","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					<!-- /wp:navigation-submenu -->
+					<!-- wp:navigation-link {"label":"Link 2","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off', openSubmenusOnClick: true },
+			} );
+			await editor.saveSiteEditorEntities();
+		} );
+
+		test( 'submenu opens on click', async ( { page } ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.click();
+			await expect( innerElement ).toBeVisible();
+		} );
+
+		test( 'nested submenu opens on click', async ( { page } ) => {
+			await page.goto( '/' );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+			await complexSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+		} );
+
+		test( 'submenu closes on click outside', async ( { page } ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.click();
+			await expect( innerElement ).toBeVisible();
+			await page.click( 'body' );
+			await expect( innerElement ).toBeHidden();
+		} );
+
+		test( 'submenu closes on ESC key', async ( { page } ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( innerElement ).toBeVisible();
+			await page.keyboard.press( 'Escape' );
+			await expect( innerElement ).toBeHidden();
+			await expect( simpleSubmenuButton ).toBeFocused();
+		} );
+
+		test( 'submenu closes on tab outside submenu', async ( { page } ) => {
+			await page.goto( '/' );
+			const simpleSubmenuButton = page.getByRole( 'button', {
+				name: 'Simple Submenu',
+			} );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Simple Submenu Link 1',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await simpleSubmenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( innerElement ).toBeVisible();
+			// Tab to first element.
+			await page.keyboard.press( 'Tab' );
+			// Tab outside the submenu.
+			await page.keyboard.press( 'Tab' );
+			await expect( innerElement ).toBeHidden();
+			await expect( complexSubmenuButton ).toBeFocused();
+		} );
+
+		test( 'nested submenu closes on click outside', async ( { page } ) => {
+			await page.goto( '/' );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+			await complexSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			await page.click( 'body' );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+		} );
+
+		test( 'nested submenu closes on ESC key', async ( { page } ) => {
+			await page.goto( '/' );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+			await complexSubmenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			await page.keyboard.press( 'Escape' );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+			await expect( complexSubmenuButton ).toBeFocused();
+		} );
+
+		test( 'only nested submenu closes on tab outside', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const complexSubmenuButton = page.getByRole( 'button', {
+				name: 'Complex Submenu',
+			} );
+			const nestedSubmenuButton = page.getByRole( 'button', {
+				name: 'Nested Submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Complex Submenu Link 1',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Submenu Link 1',
+			} );
+			await complexSubmenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+
+			await nestedSubmenuButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+
+			// Tab to nested submenu first element.
+			await page.keyboard.press( 'Tab' );
+			// Tab outside the nested submenu.
+			await page.keyboard.press( 'Tab' );
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+			// Tab outside the complex submenu.
+			await page.keyboard.press( 'Tab' );
+			await expect( firstLevelElement ).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'Submenus (Arrow setting)', () => {
+		test.beforeEach( async ( { admin, editor, requestUtils } ) => {
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+			} );
+			await editor.canvas.click( 'body' );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:navigation-submenu {"label":"Submenu","type":"internal","url":"#heading","kind":"custom"} -->
+						<!-- wp:navigation-link {"label":"Submenu Link","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+						<!-- wp:navigation-submenu {"label":"Nested Menu","type":"internal","url":"#heading","kind":"custom"} -->
+							<!-- wp:navigation-link {"label":"Nested Menu Link","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+						<!-- /wp:navigation-submenu -->
+					<!-- /wp:navigation-submenu -->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off' },
+			} );
+			await editor.saveSiteEditorEntities();
+		} );
+
+		test( 'submenu opens on click in the arrow', async ( { page } ) => {
+			await page.goto( '/' );
+			const arrowButton = page.getByRole( 'button', {
+				name: 'Submenu submenu',
+			} );
+			const nestedSubmenuArrowButton = page.getByRole( 'button', {
+				name: 'Nested Menu submenu',
+			} );
+			const firstLevelElement = page.getByRole( 'link', {
+				name: 'Submenu Link',
+			} );
+			const secondLevelElement = page.getByRole( 'link', {
+				name: 'Nested Menu Link',
+			} );
+
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+			await arrowButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeHidden();
+			await nestedSubmenuArrowButton.click();
+			await expect( firstLevelElement ).toBeVisible();
+			await expect( secondLevelElement ).toBeVisible();
+			await page.click( 'body' );
+			await expect( firstLevelElement ).toBeHidden();
+			await expect( secondLevelElement ).toBeHidden();
+		} );
+	} );
+
+	test.describe( 'Page list block', () => {
+		test.beforeEach( async ( { admin, editor, page, requestUtils } ) => {
+			// Create parent page.
+			await admin.createNewPost( {
+				postType: 'page',
+				title: 'Parent Page',
+			} );
+			await editor.publishPost();
+
+			// Create subpage.
+			await admin.createNewPost( {
+				postType: 'page',
+				title: 'Subpage',
+			} );
+			await editor.openDocumentSettingsSidebar();
+			const parentPageList = page.getByLabel( 'Parent page:' );
+			if ( await parentPageList.isHidden() ) {
+				await page
+					.getByRole( 'button', {
+						name: 'Page Attributes',
+					} )
+					.click();
+			}
+			await parentPageList.click();
+			await page
+				.getByRole( 'option', {
+					name: 'Parent Page',
+				} )
+				.click();
+			await editor.publishPost();
+
+			await admin.visitSiteEditor( {
+				postId: 'emptytheme//header',
+				postType: 'wp_template_part',
+			} );
+			await editor.canvas.click( 'body' );
+			await requestUtils.createNavigationMenu( {
+				title: 'Hidden menu',
+				content: `
+					<!-- wp:page-list /-->
+					<!-- wp:navigation-link {"label":"Link","type":"custom","url":"http://www.wordpress.org/","isTopLevelLink":true} /-->
+					`,
+			} );
+			await editor.insertBlock( {
+				name: 'core/navigation',
+				attributes: { overlayMenu: 'off', openSubmenusOnClick: true },
+			} );
+			await editor.saveSiteEditorEntities();
+		} );
+
+		test( 'page-list submenu opens on click', async ( { page } ) => {
+			await page.goto( '/' );
+			const submenuButton = page.getByRole( 'button', {
+				name: 'Parent Page',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Subpage',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await submenuButton.click();
+			await expect( innerElement ).toBeVisible();
+		} );
+
+		test( 'page-list submenu closes on click outside', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const submenuButton = page.getByRole( 'button', {
+				name: 'Parent Page',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Subpage',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await submenuButton.click();
+			await expect( innerElement ).toBeVisible();
+			await page.click( 'body' );
+			await expect( innerElement ).toBeHidden();
+		} );
+
+		test( 'page-list submenu closes on ESC key', async ( { page } ) => {
+			await page.goto( '/' );
+			const submenuButton = page.getByRole( 'button', {
+				name: 'Parent Page',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Subpage',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await submenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( innerElement ).toBeVisible();
+			await page.keyboard.press( 'Escape' );
+			await expect( innerElement ).toBeHidden();
+			await expect( submenuButton ).toBeFocused();
+		} );
+
+		test( 'page-list submenu closes on tab outside submenu', async ( {
+			page,
+		} ) => {
+			await page.goto( '/' );
+			const submenuButton = page.getByRole( 'button', {
+				name: 'Parent Page',
+			} );
+			const innerElement = page.getByRole( 'link', {
+				name: 'Subpage',
+			} );
+			await expect( innerElement ).toBeHidden();
+			await submenuButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( innerElement ).toBeVisible();
+			// Tab to first element.
+			await page.keyboard.press( 'Tab' );
+			// Tab outside the submenu.
+			await page.keyboard.press( 'Tab' );
+			await expect( innerElement ).toBeHidden();
+		} );
+	} );
+} );
+
 class LinkControl {
 	constructor( { page } ) {
 		this.page = page;
diff --git a/test/e2e/specs/editor/plugins/custom-post-types.spec.js b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
index f0448face2671..07d3275563282 100644
--- a/test/e2e/specs/editor/plugins/custom-post-types.spec.js
+++ b/test/e2e/specs/editor/plugins/custom-post-types.spec.js
@@ -35,7 +35,15 @@ test.describe( 'Test Custom Post Types', () => {
 			.click();
 
 		// Open the Document -> Page Attributes panel.
-		await page.getByRole( 'button', { name: 'Page Attributes' } ).click();
+		const pageAttributes = page.getByRole( 'button', {
+			name: 'Page Attributes',
+		} );
+		const isClosed =
+			( await pageAttributes.getAttribute( 'aria-expanded' ) ) ===
+			'false';
+		if ( isClosed ) {
+			await pageAttributes.click();
+		}
 
 		const parentPageLocator = page.getByRole( 'combobox', {
 			name: 'Parent Page',
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
index 2c07a15bcca90..e4857f84d46c3 100644
--- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -15,7 +15,7 @@ test.describe( 'Keep styles on block transforms', () => {
 		await page.click( 'role=button[name="Add default block"i]' );
 		await page.keyboard.type( '## Heading' );
 		await editor.openDocumentSettingsSidebar();
-		await page.click( 'role=button[name="Text"i]' );
+		await page.click( 'role=button[name="Color Text styles"i]' );
 		await page.click( 'role=button[name="Color: Luminous vivid orange"i]' );
 
 		await page.click( 'role=button[name="Heading"i]' );
diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
index f9a7aa8970d3e..c7aed497dc25c 100644
--- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
+++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js
@@ -102,6 +102,32 @@ test.describe( 'Post Editor Template mode', () => {
 		).toBeVisible();
 	} );
 
+	test( 'Allow editing the title of a new custom template', async ( {
+		page,
+		postEditorTemplateMode,
+	} ) => {
+		async function editTemplateTitle( newTitle ) {
+			await page
+				.getByRole( 'button', { name: 'Template Options' } )
+				.click();
+
+			await page
+				.getByRole( 'textbox', { name: 'Title' } )
+				.fill( newTitle );
+
+			const editorContent = page.getByLabel( 'Editor Content' );
+			await editorContent.click();
+		}
+
+		await postEditorTemplateMode.createPostAndSaveDraft();
+		await postEditorTemplateMode.createNewTemplate( 'Foobar' );
+		await editTemplateTitle( 'Barfoo' );
+
+		await expect(
+			page.getByRole( 'button', { name: 'Template Options' } )
+		).toHaveText( 'Barfoo' );
+	} );
+
 	test.describe( 'Delete Post Template Confirmation Dialog', () => {
 		test.beforeAll( async ( { requestUtils } ) => {
 			await requestUtils.activateTheme( 'twentytwentyone' );
diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index 06c634a1f5498..4f51cbd88aad6 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -35,7 +35,6 @@ test.describe( 'Push to Global Styles button', () => {
 		await page
 			.getByRole( 'button', { name: 'Heading block styles' } )
 			.click();
-		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
 
 		// Headings should not have uppercase
 		await expect(
@@ -82,12 +81,13 @@ test.describe( 'Push to Global Styles button', () => {
 		).toBeDisabled();
 
 		// Navigate again to Styles -> Blocks -> Heading -> Typography
-		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Styles', exact: true } )
+			.click();
 		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
 		await page
 			.getByRole( 'button', { name: 'Heading block styles' } )
 			.click();
-		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
 
 		// Headings should now have uppercase
 		await expect(
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 56d0ca0cf20f1..5cdf1c2a0e59e 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -27,7 +27,7 @@ test.describe( 'Style Book', () => {
 		).toBeVisible();
 	} );
 
-	test( 'should disable toolbar butons when open', async ( { page } ) => {
+	test( 'should disable toolbar buttons when open', async ( { page } ) => {
 		await expect(
 			page.locator( 'role=button[name="Toggle block inserter"i]' )
 		).not.toBeVisible();
@@ -111,7 +111,6 @@ test.describe( 'Style Book', () => {
 	} ) => {
 		await page.click( 'role=button[name="Blocks styles"]' );
 		await page.click( 'role=button[name="Heading block styles"]' );
-		await page.click( 'role=button[name="Typography styles"]' );
 
 		await page
 			.frameLocator( '[name="style-book-canvas"]' )
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index 84a5eefb1cda7..f24f0691b42a4 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -86,13 +86,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Background"i] >> .component-color-indicator'
+				'role=button[name="Color Background styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Text"i] >> .component-color-indicator'
+				'role=button[name="Color Text styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
 
@@ -127,13 +127,13 @@ test.describe( 'Global styles variations', () => {
 
 		await expect(
 			page.locator(
-				'role=button[name="Background"i] >> .component-color-indicator'
+				'role=button[name="Color Background styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
 
 		await expect(
 			page.locator(
-				'role=button[name="Text"i] >> .component-color-indicator'
+				'role=button[name="Color Text styles"i] >> .component-color-indicator'
 			)
 		).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
 
diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js
index fada3fbe41e1e..585b75c1507be 100644
--- a/test/e2e/specs/site-editor/title.spec.js
+++ b/test/e2e/specs/site-editor/title.spec.js
@@ -61,7 +61,7 @@ test.describe( 'Site editor title', () => {
 			'role=treegrid[name="Block navigation structure"i]'
 		);
 		await listView.locator( 'role=gridcell >> text="header"' ).click();
-		await page.click( 'role=button[name="Close List View Sidebar"i]' );
+		await page.click( 'role=button[name="Close"i]' );
 
 		// Evaluate the document settings secondary title.
 		const secondaryTitle = page.locator(
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
new file mode 100644
index 0000000000000..8459d148c7f00
--- /dev/null
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page } ) );
+	},
+	userGlobalStylesRevisions: async ( { page, requestUtils }, use ) => {
+		await use( new UserGlobalStylesRevisions( { page, requestUtils } ) );
+	},
+} );
+
+test.describe( 'Global styles revisions', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.visitSiteEditor( {
+			canvas: 'edit',
+		} );
+	} );
+
+	test( 'should display revisions UI when there is more than 1 revision', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		const currentRevisions =
+			await userGlobalStylesRevisions.getGlobalStylesRevisions();
+		await userGlobalStylesRevisions.openStylesPanel();
+
+		// Change a style and save it.
+		await page.getByRole( 'button', { name: 'Colors styles' } ).click();
+
+		await page
+			.getByRole( 'button', { name: 'Color Background styles' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Color: Black' } )
+			.click( { force: true } );
+
+		await editor.saveSiteEditorEntities();
+
+		/*
+		 * Change a style and save it again.
+		 * We need more than 2 revisions to show the UI.
+		 */
+		await page
+			.getByRole( 'button', { name: 'Color Background styles' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Color: Cyan bluish gray' } )
+			.click( { force: true } );
+
+		await editor.saveSiteEditorEntities();
+
+		// Now there should be enough revisions to show the revisions UI.
+		await userGlobalStylesRevisions.openRevisions();
+
+		const revisionButtons = page.getByRole( 'button', {
+			name: /^Changes saved by /,
+		} );
+
+		await expect( revisionButtons ).toHaveCount(
+			currentRevisions.length + 2
+		);
+	} );
+
+	test( 'should warn of unsaved changes before loading reset revision', async ( {
+		page,
+		editor,
+		userGlobalStylesRevisions,
+	} ) => {
+		await userGlobalStylesRevisions.openStylesPanel();
+		await page.getByRole( 'button', { name: 'Colors styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Color Background styles' } )
+			.click();
+		await page
+			.getByRole( 'button', { name: 'Color: Luminous vivid amber' } )
+			.click( { force: true } );
+
+		await userGlobalStylesRevisions.openRevisions();
+
+		const unSavedButton = page.getByRole( 'button', {
+			name: /^Unsaved changes/,
+		} );
+
+		await expect( unSavedButton ).toBeVisible();
+
+		await page
+			.getByRole( 'button', { name: /^Changes saved by / } )
+			.last()
+			.click();
+
+		await page.getByRole( 'button', { name: 'Apply' } ).click();
+
+		const confirm = page.getByRole( 'dialog' );
+		await expect( confirm ).toBeVisible();
+		await expect( confirm ).toHaveText(
+			/^Loading this revision will discard all unsaved changes/
+		);
+
+		// This is to make sure there are no lingering unsaved changes.
+		await page
+			.getByRole( 'dialog' )
+			.getByRole( 'button', { name: 'Cancel' } )
+			.click();
+		await editor.saveSiteEditorEntities();
+	} );
+} );
+
+class UserGlobalStylesRevisions {
+	constructor( { page, requestUtils } ) {
+		this.page = page;
+		this.requestUtils = requestUtils;
+	}
+
+	async disableWelcomeGuide() {
+		// Turn off the welcome guide.
+		await this.page.evaluate( () => {
+			window.wp.data
+				.dispatch( 'core/preferences' )
+				.set( 'core/edit-site', 'welcomeGuideStyles', false );
+		} );
+	}
+
+	async getGlobalStylesRevisions() {
+		const stylesPostId =
+			await this.requestUtils.getCurrentThemeGlobalStylesPostId();
+		if ( stylesPostId ) {
+			return await this.requestUtils.getThemeGlobalStylesRevisions(
+				stylesPostId
+			);
+		}
+		return [];
+	}
+
+	async openRevisions() {
+		await this.page
+			.getByRole( 'button', { name: 'Styles actions' } )
+			.click();
+		await this.page.getByRole( 'menuitem', { name: 'Revisions' } ).click();
+	}
+
+	async openStylesPanel() {
+		await this.disableWelcomeGuide();
+		await this.page
+			.getByRole( 'region', { name: 'Editor top bar' } )
+			.getByRole( 'button', { name: 'Styles' } )
+			.click();
+	}
+}
diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index 7fd1637e07ba7..5b7087778e04c 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -178,4 +178,10 @@ module.exports = {
 	mediaAreaPadding: {
 		width: 12,
 	},
+	defaultAppender: {
+		marginLeft: 16,
+	},
+	'components-picker__button-title': {
+		color: 'white',
+	},
 };
diff --git a/test/native/integration-test-helpers/README.md b/test/native/integration-test-helpers/README.md
index 900f8f2fb896d..49b63794ed8ff 100644
--- a/test/native/integration-test-helpers/README.md
+++ b/test/native/integration-test-helpers/README.md
@@ -54,6 +54,10 @@ Changes the text of a RichText component.
 
 Paste content into a RichText component.
 
+### [`setupApiFetch`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-api-fetch.js)
+
+Sets up the `apiFetch` library for testing by mocking request responses.
+
 ### [`setupCoreBlocks`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-core-blocks.js)
 
 Registers all core blocks or a specific list of blocks before running tests, once the tests are run, all registered blocks are unregistered.
@@ -66,6 +70,10 @@ Sets up Media Picker mock functions.
 
 Sets up the media upload mock functions for testing.
 
+### [`setupPicker`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/setup-picker.js)
+
+Sets up the Picker component for testing.
+
 ### [`changeTextOfTextInput`](https://github.com/WordPress/gutenberg/blob/HEAD/test/native/integration-test-helpers/text-input-change-text.js)
 
 Changes the text of a TextInput component.
diff --git a/test/native/integration-test-helpers/add-block.js b/test/native/integration-test-helpers/add-block.js
index ec52453bebe34..197968be3edbf 100644
--- a/test/native/integration-test-helpers/add-block.js
+++ b/test/native/integration-test-helpers/add-block.js
@@ -1,12 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
 /**
  * External dependencies
  */
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent } from '@testing-library/react-native';
+import { AccessibilityInfo } from 'react-native';
 
 /**
  * Internal dependencies
  */
 import { waitFor } from './wait-for';
+import { withFakeTimers } from './with-fake-timers';
 
 /**
  * Adds a block via the block picker.
@@ -38,4 +45,13 @@ export const addBlock = async (
 	} );
 
 	fireEvent.press( await waitFor( () => getByText( blockName ) ) );
+
+	// On iOS the action for inserting a block is delayed (https://bit.ly/3AVALqH).
+	// Hence, we need to wait for the different steps until the the block is inserted.
+	if ( Platform.isIOS ) {
+		await withFakeTimers( async () => {
+			await AccessibilityInfo.isScreenReaderEnabled();
+			act( () => jest.runOnlyPendingTimers() );
+		} );
+	}
 };
diff --git a/test/native/integration-test-helpers/index.js b/test/native/integration-test-helpers/index.js
index 39f441f4fae93..13e74a69c4a66 100644
--- a/test/native/integration-test-helpers/index.js
+++ b/test/native/integration-test-helpers/index.js
@@ -14,9 +14,11 @@ export { openBlockSettings } from './open-block-settings';
 export { selectRangeInRichText } from './rich-text-select-range';
 export { typeInRichText } from './rich-text-type';
 export { pasteIntoRichText } from './rich-text-paste';
+export { setupApiFetch } from './setup-api-fetch';
 export { setupCoreBlocks } from './setup-core-blocks';
 export { setupMediaPicker } from './setup-media-picker';
 export { setupMediaUpload } from './setup-media-upload';
+export { setupPicker } from './setup-picker';
 export { changeTextOfTextInput } from './text-input-change-text';
 export { transformBlock } from './transform-block';
 export { triggerBlockListLayout } from './trigger-block-list-layout';
diff --git a/test/native/integration-test-helpers/setup-api-fetch.js b/test/native/integration-test-helpers/setup-api-fetch.js
new file mode 100644
index 0000000000000..e8b20e261630b
--- /dev/null
+++ b/test/native/integration-test-helpers/setup-api-fetch.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Sets up the `apiFetch` library for testing by mocking request responses.
+ *
+ * Example:
+ *
+ * const responses = [
+ *     {
+ *         request: {
+ *             path: `/wp/v2/media/1?context=edit`,
+ *         },
+ *         response: {
+ *             source_url: 'https://image-1.jpg',
+ *             id: 1,
+ *         },
+ *     },
+ *     {
+ *         request: {
+ *             path: `/wp/v2/media/2?context=edit`,
+ *         },
+ *         response: {
+ *             source_url: 'https://image-2.jpg',
+ *             id: 2,
+ *         },
+ *     },
+ * ];
+ * setupApiFetch( responses );
+ * ...
+ * expect( apiFetch ).toHaveBeenCalledWith( responses[1].request );
+ *
+ * @param {object[]} responses Array with the potential responses to return upon requests.
+ *
+ */
+export function setupApiFetch( responses ) {
+	apiFetch.mockImplementation( async ( options ) => {
+		const matchedResponse = responses.find(
+			( { request: { path, method } } ) => {
+				return (
+					path === options.path &&
+					( ! options.method || method === options.method )
+				);
+			}
+		);
+		return matchedResponse?.response;
+	} );
+}
diff --git a/test/native/integration-test-helpers/setup-media-picker.js b/test/native/integration-test-helpers/setup-media-picker.js
index 72646f0138e08..e99f918974750 100644
--- a/test/native/integration-test-helpers/setup-media-picker.js
+++ b/test/native/integration-test-helpers/setup-media-picker.js
@@ -20,9 +20,11 @@ import { requestMediaPicker } from '@wordpress/react-native-bridge';
  */
 export const setupMediaPicker = () => {
 	let mediaPickerCallback;
+	let multipleItems;
 	requestMediaPicker.mockImplementation(
 		( source, filter, multiple, callback ) => {
 			mediaPickerCallback = callback;
+			multipleItems = multiple;
 		}
 	);
 	return {
@@ -34,16 +36,25 @@ export const setupMediaPicker = () => {
 				mediaPickerCallback
 			),
 		mediaPickerCallback: async ( ...mediaItems ) =>
-			act( async () =>
+			act( async () => {
+				const items = mediaItems.map(
+					( {
+						localId,
+						localUrl,
+						type = 'image',
+						url,
+						id,
+						metadata,
+					} ) => ( {
+						type,
+						url: url ?? localUrl,
+						id: id ?? localId,
+						metadata,
+					} )
+				);
 				mediaPickerCallback(
-					mediaItems.map(
-						( { localId, localUrl, type = 'image' } ) => ( {
-							type,
-							url: localUrl,
-							id: localId,
-						} )
-					)
-				)
-			),
+					items.length === 1 && ! multipleItems ? items[ 0 ] : items
+				);
+			} ),
 	};
 };
diff --git a/test/native/integration-test-helpers/setup-media-upload.js b/test/native/integration-test-helpers/setup-media-upload.js
index 1adf10bc0e240..5ce2d19c3e971 100644
--- a/test/native/integration-test-helpers/setup-media-upload.js
+++ b/test/native/integration-test-helpers/setup-media-upload.js
@@ -50,6 +50,7 @@ export const setupMediaUpload = () => {
 					mediaId: mediaItem.localId,
 					mediaUrl: mediaItem.serverUrl,
 					mediaServerId: mediaItem.serverId,
+					metadata: mediaItem.metadata,
 				} );
 			} ),
 		notifyFailedState: async ( mediaItem ) =>
diff --git a/test/native/integration-test-helpers/setup-picker.js b/test/native/integration-test-helpers/setup-picker.js
new file mode 100644
index 0000000000000..a762070631b4a
--- /dev/null
+++ b/test/native/integration-test-helpers/setup-picker.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import { fireEvent } from '@testing-library/react-native';
+import { ActionSheetIOS } from 'react-native';
+
+/**
+ * Sets up the Picker component for testing.
+ *
+ * @typedef {Object} PickerMockFunctions
+ * @property {Function}                                          selectOption Selects one of the options of the picker.
+ *
+ * @param    {import('@testing-library/react-native').RenderAPI} screen       A Testing Library screen.
+ * @param    {string[]}                                          options      Array with the options of the picker.
+ *
+ * @return {PickerMockFunctions} Picker functions.
+ */
+export function setupPicker( screen, options ) {
+	let selectOption = ( option ) => {
+		fireEvent.press( screen.getByText( option ) );
+	};
+	if ( Platform.isIOS ) {
+		let onOptionSelected;
+		ActionSheetIOS.showActionSheetWithOptions.mockImplementation(
+			( _, callback ) => {
+				onOptionSelected = callback;
+			}
+		);
+		// The index passed is incremented by one as the first
+		// option of the picker is `Cancel`.
+		selectOption = ( option ) =>
+			onOptionSelected( options.indexOf( option ) + 1 );
+	}
+	return { selectOption };
+}
diff --git a/test/native/integration-test-helpers/wait-for-store-resolvers.js b/test/native/integration-test-helpers/wait-for-store-resolvers.js
index ce4fa664e1a2c..ebf2c9cd1a1e7 100644
--- a/test/native/integration-test-helpers/wait-for-store-resolvers.js
+++ b/test/native/integration-test-helpers/wait-for-store-resolvers.js
@@ -25,7 +25,7 @@ export async function waitForStoreResolvers( fn ) {
 		const result = fn();
 
 		// Advance all timers allowing store resolvers to resolve.
-		act( () => jest.runAllTimers() );
+		act( () => jest.runOnlyPendingTimers() );
 
 		// The store resolvers perform several API fetches during editor
 		// initialization. The most straightforward approach to ensure all of them
diff --git a/test/native/setup.js b/test/native/setup.js
index e9eeca07b2779..be643a1fb9017 100644
--- a/test/native/setup.js
+++ b/test/native/setup.js
@@ -228,6 +228,9 @@ jest.mock(
 		},
 	} )
 );
+jest.mock( 'react-native/Libraries/ActionSheetIOS/ActionSheetIOS', () => ( {
+	showActionSheetWithOptions: jest.fn(),
+} ) );
 
 // The mock provided by the package itself does not appear to work correctly.
 // Specifically, the mock provides a named export, where the module itself uses
diff --git a/tools/webpack/blocks.js b/tools/webpack/blocks.js
index f2c30984141fb..d8bcf0559fdbd 100644
--- a/tools/webpack/blocks.js
+++ b/tools/webpack/blocks.js
@@ -74,134 +74,210 @@ const createEntrypoints = () => {
 	}, {} );
 };
 
-module.exports = {
-	...baseConfig,
-	name: 'blocks',
-	entry: createEntrypoints(),
-	output: {
-		devtoolNamespace: 'wp',
-		filename: './build/block-library/blocks/[name].min.js',
-		path: join( __dirname, '..', '..' ),
-	},
-	plugins: [
-		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
-		new CopyWebpackPlugin( {
-			patterns: [].concat(
-				[
-					'style',
-					'style-rtl',
-					'editor',
-					'editor-rtl',
-					'theme',
-					'theme-rtl',
-				].map( ( filename ) => ( {
-					from: `./packages/block-library/build-style/*/${ filename }.css`,
-					to( { absoluteFilename } ) {
-						const [ , dirname ] = absoluteFilename.match(
-							new RegExp(
-								`([\\w-]+)${ escapeRegExp(
-									sep
-								) }${ filename }\\.css$`
-							)
-						);
-
-						return join(
-							'build/block-library/blocks',
-							dirname,
-							filename + '.css'
-						);
-					},
-					transform: stylesTransform,
-				} ) ),
-				Object.entries( {
-					'./packages/block-library/src/':
-						'build/block-library/blocks/',
-					'./packages/edit-widgets/src/blocks/':
-						'build/edit-widgets/blocks/',
-					'./packages/widgets/src/blocks/': 'build/widgets/blocks/',
-				} ).flatMap( ( [ from, to ] ) => [
-					{
-						from: `${ from }/**/index.php`,
+module.exports = [
+	{
+		...baseConfig,
+		name: 'blocks',
+		entry: createEntrypoints(),
+		output: {
+			devtoolNamespace: 'wp',
+			filename: './build/block-library/blocks/[name].min.js',
+			path: join( __dirname, '..', '..' ),
+		},
+		plugins: [
+			...plugins,
+			new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
+			new CopyWebpackPlugin( {
+				patterns: [].concat(
+					[
+						'style',
+						'style-rtl',
+						'editor',
+						'editor-rtl',
+						'theme',
+						'theme-rtl',
+					].map( ( filename ) => ( {
+						from: `./packages/block-library/build-style/*/${ filename }.css`,
 						to( { absoluteFilename } ) {
 							const [ , dirname ] = absoluteFilename.match(
 								new RegExp(
 									`([\\w-]+)${ escapeRegExp(
 										sep
-									) }index\\.php$`
+									) }${ filename }\\.css$`
 								)
 							);
 
-							return join( to, `${ dirname }.php` );
+							return join(
+								'build/block-library/blocks',
+								dirname,
+								filename + '.css'
+							);
 						},
-						transform: ( content ) => {
-							const prefix = 'gutenberg_';
-							content = content.toString();
+						transform: stylesTransform,
+					} ) ),
+					Object.entries( {
+						'./packages/block-library/src/':
+							'build/block-library/blocks/',
+						'./packages/edit-widgets/src/blocks/':
+							'build/edit-widgets/blocks/',
+						'./packages/widgets/src/blocks/':
+							'build/widgets/blocks/',
+					} ).flatMap( ( [ from, to ] ) => [
+						{
+							from: `${ from }/**/index.php`,
+							to( { absoluteFilename } ) {
+								const [ , dirname ] = absoluteFilename.match(
+									new RegExp(
+										`([\\w-]+)${ escapeRegExp(
+											sep
+										) }index\\.php$`
+									)
+								);
 
-							// Within content, search and prefix any function calls from
-							// `prefixFunctions` list. This is needed because some functions
-							// are called inside block files, but have been declared elsewhere.
-							// So with the rename we can call Gutenberg override functions, but the
-							// block will still call the core function when updates are back ported.
-							content = content.replace(
-								new RegExp( prefixFunctions.join( '|' ), 'g' ),
-								( match ) =>
-									`${ prefix }${ match.replace(
-										/^wp_/,
-										''
-									) }`
-							);
+								return join( to, `${ dirname }.php` );
+							},
+							transform: ( content ) => {
+								const prefix = 'gutenberg_';
+								content = content.toString();
 
-							// Within content, search for any function definitions. For
-							// each, replace every other reference to it in the file.
-							return (
-								Array.from(
-									content.matchAll(
-										/^\s*function ([^\(]+)/gm
-									)
-								)
-									.reduce( ( result, [ , functionName ] ) => {
-										// Prepend the Gutenberg prefix, substituting any
-										// other core prefix (e.g. "wp_").
-										return result.replace(
-											new RegExp( functionName, 'g' ),
-											( match ) =>
-												prefix +
-												match.replace( /^wp_/, '' )
-										);
-									}, content )
-									// The core blocks override procedure takes place in
-									// the init action default priority to ensure that core
-									// blocks would have been registered already. Since the
-									// blocks implementations occur at the default priority
-									// and due to WordPress hooks behavior not considering
-									// mutations to the same priority during another's
-									// callback, the Gutenberg build blocks are modified
-									// to occur at a later priority.
-									.replace(
-										/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
-										'$1, 20'
+								// Within content, search and prefix any function calls from
+								// `prefixFunctions` list. This is needed because some functions
+								// are called inside block files, but have been declared elsewhere.
+								// So with the rename we can call Gutenberg override functions, but the
+								// block will still call the core function when updates are back ported.
+								content = content.replace(
+									new RegExp(
+										prefixFunctions.join( '|' ),
+										'g'
+									),
+									( match ) =>
+										`${ prefix }${ match.replace(
+											/^wp_/,
+											''
+										) }`
+								);
+
+								// Within content, search for any function definitions. For
+								// each, replace every other reference to it in the file.
+								return (
+									Array.from(
+										content.matchAll(
+											/^\s*function ([^\(]+)/gm
+										)
 									)
-							);
+										.reduce(
+											( result, [ , functionName ] ) => {
+												// Prepend the Gutenberg prefix, substituting any
+												// other core prefix (e.g. "wp_").
+												return result.replace(
+													new RegExp(
+														functionName,
+														'g'
+													),
+													( match ) =>
+														prefix +
+														match.replace(
+															/^wp_/,
+															''
+														)
+												);
+											},
+											content
+										)
+										// The core blocks override procedure takes place in
+										// the init action default priority to ensure that core
+										// blocks would have been registered already. Since the
+										// blocks implementations occur at the default priority
+										// and due to WordPress hooks behavior not considering
+										// mutations to the same priority during another's
+										// callback, the Gutenberg build blocks are modified
+										// to occur at a later priority.
+										.replace(
+											/(add_action\(\s*'init',\s*'gutenberg_register_block_[^']+'(?!,))/,
+											'$1, 20'
+										)
+								);
+							},
+							noErrorOnMissing: true,
 						},
-						noErrorOnMissing: true,
-					},
-					{
-						from: `${ from }/*/block.json`,
-						to( { absoluteFilename } ) {
-							const [ , dirname ] = absoluteFilename.match(
-								new RegExp(
-									`([\\w-]+)${ escapeRegExp(
-										sep
-									) }block\\.json$`
-								)
-							);
+						{
+							from: `${ from }/*/block.json`,
+							to( { absoluteFilename } ) {
+								const [ , dirname ] = absoluteFilename.match(
+									new RegExp(
+										`([\\w-]+)${ escapeRegExp(
+											sep
+										) }block\\.json$`
+									)
+								);
 
-							return join( to, dirname, 'block.json' );
+								return join( to, dirname, 'block.json' );
+							},
 						},
+					] )
+				),
+			} ),
+		].filter( Boolean ),
+	},
+	{
+		entry: {
+			navigation:
+				'./packages/block-library/src/navigation/interactivity.js',
+		},
+		output: {
+			devtoolNamespace: 'wp',
+			filename: './build/block-library/interactive-blocks/[name].min.js',
+			path: join( __dirname, '..', '..' ),
+		},
+		optimization: {
+			runtimeChunk: {
+				name: 'vendors',
+			},
+			splitChunks: {
+				cacheGroups: {
+					vendors: {
+						name: 'vendors',
+						test: /[\\/]node_modules[\\/]/,
+						minSize: 0,
+						chunks: 'all',
 					},
-				] )
-			),
-		} ),
-	].filter( Boolean ),
-};
+					interactivity: {
+						name: 'interactivity',
+						test: /[\\/]utils\/interactivity[\\/]/,
+						chunks: 'all',
+						minSize: 0,
+						priority: -10,
+					},
+				},
+			},
+		},
+		module: {
+			rules: [
+				{
+					test: /\.(j|t)sx?$/,
+					exclude: /node_modules/,
+					use: [
+						{
+							loader: require.resolve( 'babel-loader' ),
+							options: {
+								cacheDirectory:
+									process.env.BABEL_CACHE_DIRECTORY || true,
+								babelrc: false,
+								configFile: false,
+								presets: [
+									[
+										'@babel/preset-react',
+										{
+											runtime: 'automatic',
+											importSource: 'preact',
+										},
+									],
+								],
+							},
+						},
+					],
+				},
+			],
+		},
+	},
+];
diff --git a/webpack.config.js b/webpack.config.js
index 9a29ed7782268..f1c5ce803adc1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,4 +5,4 @@ const blocksConfig = require( './tools/webpack/blocks' );
 const developmentConfigs = require( './tools/webpack/development' );
 const packagesConfig = require( './tools/webpack/packages' );
 
-module.exports = [ blocksConfig, packagesConfig, ...developmentConfigs ];
+module.exports = [ ...blocksConfig, packagesConfig, ...developmentConfigs ];