diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index a324657fad6f7..22404fc7c96eb 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,5 +1,6 @@
 # Documentation
 /docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy @ndiego
+/packages/interactivity/docs                    @juanmaguitar
 
 # Schemas
 /schemas/json                                   @ajlende
diff --git a/changelog.txt b/changelog.txt
index 0149b4c2b7bf5..32f3469b9d6d3 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,6 +1,6 @@
 == Changelog ==
 
-= 16.5.0-rc.1 =
+= 16.5.0 =
 
 
 
@@ -13,166 +13,139 @@
 
 ### Enhancements
 
-#### Post Editor
-- Command Palette:
-  - Add new block commands. ([52509](https://github.com/WordPress/gutenberg/pull/52509))
-  - Add support for registering commands without icons. ([53647](https://github.com/WordPress/gutenberg/pull/53647))
-  - Update the `Preview in a new tab` command to reuse the preview target tab when available. ([53242](https://github.com/WordPress/gutenberg/pull/53242))
-  - Update command palette styling. ([53117](https://github.com/WordPress/gutenberg/pull/53117))
-  - Improve command palette rendering on smaller viewports. ([53661](https://github.com/WordPress/gutenberg/pull/53661))
-- Replace `withPluginContext` in `PluginPostPublishPanel` ([53302](https://github.com/WordPress/gutenberg/pull/53302)) and `PluginPrePublishPanel` ([53304](https://github.com/WordPress/gutenberg/pull/53304)).
-- Replace HoCs with hooks in:
-  - `PluginDocumentSettingPanel` ([53290](https://github.com/WordPress/gutenberg/pull/53290))
-  - `PostPendingStatusCheck` ([53389](https://github.com/WordPress/gutenberg/pull/53389))
-  - `PostPendingStatus` ([53387](https://github.com/WordPress/gutenberg/pull/53387))
-- Top-align Publish row in the post panel. ([53573](https://github.com/WordPress/gutenberg/pull/53573))
-- Dependencies: Bump `remove-accents` to 0.5.0. ([53420](https://github.com/WordPress/gutenberg/pull/53420))
+#### Commands
+- Add block-related commands. ([52509](https://github.com/WordPress/gutenberg/pull/52509))
+- Add support for registering commands without icons. ([53647](https://github.com/WordPress/gutenberg/pull/53647))
+- Update the "Preview in a new tab" command to reuse the preview target tab when available. ([53242](https://github.com/WordPress/gutenberg/pull/53242))
+- Update command palette styling. ([53117](https://github.com/WordPress/gutenberg/pull/53117))
+- Improve command palette rendering on smaller viewports. ([53661](https://github.com/WordPress/gutenberg/pull/53661))
+- Tweak existing commands to establish consistency with command language. ([53496](https://github.com/WordPress/gutenberg/pull/53496))
+- End the command palette description with a period in the keyboard shortcut modal. ([53635](https://github.com/WordPress/gutenberg/pull/53635))
 
 #### Components
 - Button: Remove default border from the destructive button. ([53607](https://github.com/WordPress/gutenberg/pull/53607))
 - LineHeightControl: Allow for more granular control of decimal places. ([52902](https://github.com/WordPress/gutenberg/pull/52902))
 - Snackbar: Design and motion improvements. ([53248](https://github.com/WordPress/gutenberg/pull/53248))
 - Modal: 
-  - Add `headerActions` prop to render buttons in the header. ([53328](https://github.com/WordPress/gutenberg/pull/53328))
-  - Nuance outside interactions. ([52994](https://github.com/WordPress/gutenberg/pull/52994))
-- ProgressBar: 
-  - Use gray 300 for track color. ([53349](https://github.com/WordPress/gutenberg/pull/53349))
-  - Use the theme system accent for indicator color. ([53347](https://github.com/WordPress/gutenberg/pull/53347))
-  - Use theme accent color variable. ([53632](https://github.com/WordPress/gutenberg/pull/53632))
-- Expose `Theme` via private APIs. ([53262](https://github.com/WordPress/gutenberg/pull/53262))
-- Move accent colors to theme context. ([53631](https://github.com/WordPress/gutenberg/pull/53631))
+  - Add `headerActions` prop to enable buttons or other elements to be injected in the header. ([53328](https://github.com/WordPress/gutenberg/pull/53328))
+  - Enhance overlay interactions, enabling outside interactions without dismissal. ([52994](https://github.com/WordPress/gutenberg/pull/52994))
+- ProgressBar: Update colors, including gray 300 for track color ([53349](https://github.com/WordPress/gutenberg/pull/53349)), theme system accent for indicator color ([53347](https://github.com/WordPress/gutenberg/pull/53347)), and the theme accent color variable. ([53632](https://github.com/WordPress/gutenberg/pull/53632)).
 
 #### Block Library
-- Details block: Add accordion and toggle keywords. ([53501](https://github.com/WordPress/gutenberg/pull/53501))
 - Column block:
-  - Add stretch alignment. ([53325](https://github.com/WordPress/gutenberg/pull/53325))
-  - Exit on enter. ([53311](https://github.com/WordPress/gutenberg/pull/53311))
+  - Add a `stretch` option to block's vertical alignment options. ([53325](https://github.com/WordPress/gutenberg/pull/53325))
+  - Exit upon pressing enter in an empty paragraph at the end of the block. ([53311](https://github.com/WordPress/gutenberg/pull/53311))
 - Classic block: Increase dimensions of modal and allow toggling fullscreen. ([53449](https://github.com/WordPress/gutenberg/pull/53449))
-- File block: Add spacing support. ([45107](https://github.com/WordPress/gutenberg/pull/45107))
-- Footnotes block: Add typography, dimensions, and border block supports. ([53044](https://github.com/WordPress/gutenberg/pull/53044))
+- Details block: 
+  - Add `accordion` and `toggle` keywords to improve block's discoverability. ([53501](https://github.com/WordPress/gutenberg/pull/53501))
+  - Add layout and block spacing options. ([53282](https://github.com/WordPress/gutenberg/pull/53282))
+- File block: Add block spacing options. ([45107](https://github.com/WordPress/gutenberg/pull/45107))
 - Image block: Add aspect ratio support to lightbox. ([52765](https://github.com/WordPress/gutenberg/pull/52765))
+- Post Content block: Add color controls. ([51326](https://github.com/WordPress/gutenberg/pull/51326))
 - Remove "post" from block titles. ([53492](https://github.com/WordPress/gutenberg/pull/53492))
 
 #### Patterns
-- Open detail view when duplicating pattern. ([53214](https://github.com/WordPress/gutenberg/pull/53214))
-- Prevent convert modal closing block options menu. ([53707](https://github.com/WordPress/gutenberg/pull/53707))
-- Skip migration logs in the Patterns screen. ([53626](https://github.com/WordPress/gutenberg/pull/53626))
+- Open detail view when duplicating a pattern. ([53214](https://github.com/WordPress/gutenberg/pull/53214))
+- Prevent the "create pattern" modal from closing the block options menu when it is closed. ([53707](https://github.com/WordPress/gutenberg/pull/53707))
+- Skip migration logs in the patterns screen. ([53626](https://github.com/WordPress/gutenberg/pull/53626))
+- Add missing full stop to string. ([53544](https://github.com/WordPress/gutenberg/pull/53544))
 
 #### Global Styles
-- Global styles revisions: Add a reset to default revision. ([52965](https://github.com/WordPress/gutenberg/pull/52965))
-- Global styles revisions: Reduce visibility check from 2 to 1 revision. ([53281](https://github.com/WordPress/gutenberg/pull/53281))
-- Post Content: Add color controls. ([51326](https://github.com/WordPress/gutenberg/pull/51326))
+- Add a reset to default global styles revision ([52965](https://github.com/WordPress/gutenberg/pull/52965)) and reduce visibility check from two to one revision ([53281](https://github.com/WordPress/gutenberg/pull/53281)).
 
 #### Media
 - Adjust size of image previews in list view. ([53649](https://github.com/WordPress/gutenberg/pull/53649))
-- List View: Add media previews to list view for gallery and image blocks. ([53381](https://github.com/WordPress/gutenberg/pull/53381))
+- Add media previews to list view for gallery and image blocks. ([53381](https://github.com/WordPress/gutenberg/pull/53381))
 
 #### Site Editor
-- Command Palette: Order template results in Site Editor. ([53286](https://github.com/WordPress/gutenberg/pull/53286))
-- Edit Site: Use progress bar for loading screen. ([53032](https://github.com/WordPress/gutenberg/pull/53032))
-
-#### Data Layer
-- Data: Warn if the 'useSelect' hook returns different values when called with the same state and parameters. ([53666](https://github.com/WordPress/gutenberg/pull/53666))
+- Expose `Theme` via private APIs ([53262](https://github.com/WordPress/gutenberg/pull/53262)), which was necessary to use the progress bar component for the site editor loading screen ([53032](https://github.com/WordPress/gutenberg/pull/53032)).
 
 #### Block Editor
 - Add `Opens in new Tab` control into Link Preview. ([53566](https://github.com/WordPress/gutenberg/pull/53566))
-
-#### Interactivity API
-- Update deepsignal version. ([53549](https://github.com/WordPress/gutenberg/pull/53549))
-
-#### Code Editor
-- Tweak, and add, more consistent commands. ([53496](https://github.com/WordPress/gutenberg/pull/53496))
-
-#### Themes
+- Dependencies: Bump `remove-accents` to 0.5.0. ([53420](https://github.com/WordPress/gutenberg/pull/53420))
+- Top-align Publish row in the post panel. ([53573](https://github.com/WordPress/gutenberg/pull/53573))
 - Allow layout controls to be disabled per block from theme.json. ([53378](https://github.com/WordPress/gutenberg/pull/53378))
-
-#### Plugins API
-- Plugins: Introduce the 'usePluginContext' hook. ([53291](https://github.com/WordPress/gutenberg/pull/53291))
-
-#### Layout
-- Add layout and block spacing to details block. ([53282](https://github.com/WordPress/gutenberg/pull/53282))
-
-#### Typography
 - Fluid typography: Add min and max viewport width configurable options. ([53081](https://github.com/WordPress/gutenberg/pull/53081))
 
 
 ### New APIs
 
 #### Extensibility
-- Make useBlockEditingMode() public. ([52094](https://github.com/WordPress/gutenberg/pull/52094))
+- Make `useBlockEditingMode()` public. ([52094](https://github.com/WordPress/gutenberg/pull/52094))
 
 
 ### Bug Fixes
 
-- Command palette: Fix metrics for resting and no results view. ([53497](https://github.com/WordPress/gutenberg/pull/53497))
-- Fix top toolbar in the post editor with custom fields in Safari. ([53688](https://github.com/WordPress/gutenberg/pull/53688))
-- Improve metrics on post publish view buttons. ([53245](https://github.com/WordPress/gutenberg/pull/53245))
-- Set top toolbar size dynamically. ([53526](https://github.com/WordPress/gutenberg/pull/53526))
-- Support container queries in editor CSS. ([49915](https://github.com/WordPress/gutenberg/pull/49915))
+#### Commands 
+- Style tweaks to fix metrics for resting and no results view in command palette. ([53497](https://github.com/WordPress/gutenberg/pull/53497))
+- Order template results in Site Editor, to fix some templates not displaying. ([53286](https://github.com/WordPress/gutenberg/pull/53286))
+- Don't allow access to Styles-related pages via the command palette in the hybrid theme. ([53123](https://github.com/WordPress/gutenberg/pull/53123))
 
 #### Block Library
-- Button block: Memoize link value passed to the LinkControl. ([53507](https://github.com/WordPress/gutenberg/pull/53507))
-- Cover block: Fix flickering when inserted in templates and also fix isDark calculation bugs. ([53253](https://github.com/WordPress/gutenberg/pull/53253))
-- Footnotes: 
-  - Autosave is not slashing JSON. ([53664](https://github.com/WordPress/gutenberg/pull/53664))
+- Button block: Avoid losing user changes when the `ButtonEdit` component re-renders. ([53507](https://github.com/WordPress/gutenberg/pull/53507))
+- Cover block: Fix flickering when inserted in templates and also fix `isDark` calculation bugs. ([53253](https://github.com/WordPress/gutenberg/pull/53253))
+- Footnotes block: 
+  - Ensure autosave works and escapes quotes as expected. ([53664](https://github.com/WordPress/gutenberg/pull/53664))
   - Fix accidental override. ([53663](https://github.com/WordPress/gutenberg/pull/53663))
   - Fix recursion into updating attributes when attributes is not an object. ([53257](https://github.com/WordPress/gutenberg/pull/53257))
+  - Remove Footnotes when interactive formatting is disabled. ([53474](https://github.com/WordPress/gutenberg/pull/53474))
 - Image block: 
   - Fix image stretching with only height. ([53443](https://github.com/WordPress/gutenberg/pull/53443))
   - Don't render `DimensionsTool` if it is not resizable. ([53181](https://github.com/WordPress/gutenberg/pull/53181))
   - Fix stretched images constrained by max-width. ([53274](https://github.com/WordPress/gutenberg/pull/53274))
   - Clear aspect ratio when wide aligned. ([53439](https://github.com/WordPress/gutenberg/pull/53439))
-  - Dimensions Tool: Change the conditions underwhich we display the scale control. ([53334](https://github.com/WordPress/gutenberg/pull/53334))
-  - Aspect Ratio: Reset height when selecting the original aspect ratio. ([53339](https://github.com/WordPress/gutenberg/pull/53339))
-- Latest Posts block: Make latest-posts ssr categories handling more defensive. ([53659](https://github.com/WordPress/gutenberg/pull/53659))
+  - Change the conditions under which we display the scale control. ([53334](https://github.com/WordPress/gutenberg/pull/53334))
+  - Reset height when selecting the original aspect ratio. ([53339](https://github.com/WordPress/gutenberg/pull/53339))
+- Latest Posts block: Make categories handling more defensive to prevent multisite error. ([53659](https://github.com/WordPress/gutenberg/pull/53659))
+- Media & Text block: Fix deprecation with `isStackOnMobile` default value changed. ([49538](https://github.com/WordPress/gutenberg/pull/49538))
 - Inject theme stylesheet value as template part theme attribute. ([53423](https://github.com/WordPress/gutenberg/pull/53423))
-- Patterns: Add `delete_posts` to the wp_block (patterns) capabilities. ([53405](https://github.com/WordPress/gutenberg/pull/53405))
 - Block serialization: Correctly compare default attribute values. ([53521](https://github.com/WordPress/gutenberg/pull/53521))
 
 #### Block Editor
-- Fix Synced Patterns' color in quick inserter. ([53327](https://github.com/WordPress/gutenberg/pull/53327))
-- Hide pattern previews on hover in inserter. ([53331](https://github.com/WordPress/gutenberg/pull/53331))
 - LinkControl: Prevent overflow when the title is a URL. ([53356](https://github.com/WordPress/gutenberg/pull/53356))
-- Safari: Fix ArrowUp on empty paragraph. ([53341](https://github.com/WordPress/gutenberg/pull/53341))
-- Safari: Fix Shift+Click multi select. ([53440](https://github.com/WordPress/gutenberg/pull/53440))
-- Selection: Restore focus after dragging out of the block repeatedly. ([53429](https://github.com/WordPress/gutenberg/pull/53429))
-- Writing flow: Avoid merging paragraph into Columns. ([53508](https://github.com/WordPress/gutenberg/pull/53508))
-- Writing flow: Fix vertical arrow keys not moving. ([53454](https://github.com/WordPress/gutenberg/pull/53454))
+- Fix broken flows on Safari, including `ArrowUp` functionality in an empty paragraph ([53341](https://github.com/WordPress/gutenberg/pull/53341)) and multi-selection upon shift plus click ([53440](https://github.com/WordPress/gutenberg/pull/53440)).
+- Restore focus after dragging out of the block repeatedly. ([53429](https://github.com/WordPress/gutenberg/pull/53429))
+- Avoid merging paragraph into a Columns block. ([53508](https://github.com/WordPress/gutenberg/pull/53508))
+- Prevent vertical arrow keys getting stuck in view. ([53454](https://github.com/WordPress/gutenberg/pull/53454))
+- Set top toolbar size dynamically. ([53526](https://github.com/WordPress/gutenberg/pull/53526))
+- Support container queries in editor CSS. ([49915](https://github.com/WordPress/gutenberg/pull/49915))
+- Copy tag name on internal paste. ([48254](https://github.com/WordPress/gutenberg/pull/48254))
 
 #### Site Editor
 - Add missing i18n in `HomeTemplateDetails`. ([53543](https://github.com/WordPress/gutenberg/pull/53543))
-- Adds site editor mobile block settings and styles. ([53412](https://github.com/WordPress/gutenberg/pull/53412))
-- Edit Site: Fix site editor canvas edit mode button. ([53730](https://github.com/WordPress/gutenberg/pull/53730))
+- Add buttons for block settings and styles in smaller viewport. ([53412](https://github.com/WordPress/gutenberg/pull/53412))
+- Ensure canvas edit mode button occupies the entire frame canvas. ([53730](https://github.com/WordPress/gutenberg/pull/53730))
 - Fix document actions label helper method. ([52974](https://github.com/WordPress/gutenberg/pull/52974))
 - Fix document title alignment in command palette button. ([53224](https://github.com/WordPress/gutenberg/pull/53224))
 
 #### Post Editor
-- Fix crash by moving editor style logic into a hook with useMemo. ([53596](https://github.com/WordPress/gutenberg/pull/53596))
+- Address crash by moving editor style logic into a hook with `useMemo`. ([53596](https://github.com/WordPress/gutenberg/pull/53596))
 - Fix support of sticky position in non-iframed post editor. ([53540](https://github.com/WordPress/gutenberg/pull/53540))
-- Fix the typo when setting the preview device type to 'Desktop'. ([53409](https://github.com/WordPress/gutenberg/pull/53409))
-- getInsertionPoint: Avoid returning a different object on every call. ([53722](https://github.com/WordPress/gutenberg/pull/53722))
+- Correct typo when setting the preview device type to 'Desktop'. ([53409](https://github.com/WordPress/gutenberg/pull/53409))
+- Avoid returning a different object on every call to `getInsertionPoint`. ([53722](https://github.com/WordPress/gutenberg/pull/53722))
+- Fix top toolbar in the post editor with custom fields in Safari. ([53688](https://github.com/WordPress/gutenberg/pull/53688))
+- Improve metrics on post publish view buttons. ([53245](https://github.com/WordPress/gutenberg/pull/53245))
 
 #### Page Content Focus
 - Fix missing Replace button in content-locked Image blocks. ([53410](https://github.com/WordPress/gutenberg/pull/53410))
-- Site Editor: Fix BlockPreview in Template panel when editing a page. ([53550](https://github.com/WordPress/gutenberg/pull/53550))
-- Use template.blocks in BlockPreview if it exists. ([53611](https://github.com/WordPress/gutenberg/pull/53611))
+- Fix BlockPreview in Template panel when editing a page in the site editor. ([53550](https://github.com/WordPress/gutenberg/pull/53550))
+- Use `template.blocks` in BlockPreview if it exists. ([53611](https://github.com/WordPress/gutenberg/pull/53611))
 
 #### Navigation Menus
-- Fix: #52886 Make all the 'Loading' strings consistent. ([52901](https://github.com/WordPress/gutenberg/pull/52901))
-- Fix: Title is not copied correctly when duplicating navigation. ([53610](https://github.com/WordPress/gutenberg/pull/53610))
-- Revert Fix entity cache misses for single posts due to string as recordKey. ([53419](https://github.com/WordPress/gutenberg/pull/53419))
+- Make all the 'Loading' strings consistent. ([52901](https://github.com/WordPress/gutenberg/pull/52901))
+- Fix title not being copied correctly when duplicating navigation. ([53610](https://github.com/WordPress/gutenberg/pull/53610))
+- Remove "go to" for terms and posts. ([53408](https://github.com/WordPress/gutenberg/pull/53408))
 
 #### Typography
 - Fallback to default max viewport if layout wide size is fluid. ([53551](https://github.com/WordPress/gutenberg/pull/53551))
 - Fix typo and add tests for fonts install endpoint. ([53644](https://github.com/WordPress/gutenberg/pull/53644))
 
 #### Patterns
+- Fix Synced Patterns' color in quick inserter. ([53327](https://github.com/WordPress/gutenberg/pull/53327))
+- Hide pattern previews on hover in inserter. ([53331](https://github.com/WordPress/gutenberg/pull/53331))
+- Ensure it's possible to delete draft patterns. ([53405](https://github.com/WordPress/gutenberg/pull/53405))
 - Fix pattern creation button in list view dropdown menu. ([53562](https://github.com/WordPress/gutenberg/pull/53562))
-- Fix: Sync status overlaps for some languages in Patterns post type page. ([53243](https://github.com/WordPress/gutenberg/pull/53243))
-
-#### Rich Text
-- Copy tag name on internal paste. ([48254](https://github.com/WordPress/gutenberg/pull/48254))
-- RichText: Remove 'Footnotes' when interactive formatting is disabled. ([53474](https://github.com/WordPress/gutenberg/pull/53474))
+- Prevent sync status overlapping for some languages in patterns. ([53243](https://github.com/WordPress/gutenberg/pull/53243))
 
 #### Global Styles
 - Fix push-to-global-styles clearing of attributes, border fallbacks, link hover colors, and behaviors. ([51621](https://github.com/WordPress/gutenberg/pull/51621))
@@ -183,33 +156,18 @@
 - Include namespace in layout classname for non-core blocks. ([53404](https://github.com/WordPress/gutenberg/pull/53404))
 
 #### Interactivity API
-- Add short-cirtuit to `useSignalEffect`. ([53358](https://github.com/WordPress/gutenberg/pull/53358))
+- Add short-circuit to `useSignalEffect`. ([53358](https://github.com/WordPress/gutenberg/pull/53358))
 - Add support for underscores and leading dashes in the suffix part of the directive. ([53337](https://github.com/WordPress/gutenberg/pull/53337))
+- Update deepsignal version. ([53549](https://github.com/WordPress/gutenberg/pull/53549))
 
 #### Components
-- Button: add `:Disabled` selector to reset hover color for disabled buttons. ([53411](https://github.com/WordPress/gutenberg/pull/53411))
-
-#### Template Editor
-- Remove "go to" for terms and posts. ([53408](https://github.com/WordPress/gutenberg/pull/53408))
-
-#### Custom Fields
-- Insert path and query args to form before submitting. ([53324](https://github.com/WordPress/gutenberg/pull/53324))
-
-#### Themes
-- Don't allow access to Styles-related pages via the command palette in the hybrid theme. ([53123](https://github.com/WordPress/gutenberg/pull/53123))
-
-#### Block Validation/Deprecation
-- Media & Text Block: Fix deprecation with `isStackOnMobile` default value changed. ([49538](https://github.com/WordPress/gutenberg/pull/49538))
-
-#### npm Packages
-- Add some missing package dependencies. ([41486](https://github.com/WordPress/gutenberg/pull/41486))
+- Button: Add `:Disabled` selector to reset hover color for disabled buttons. ([53411](https://github.com/WordPress/gutenberg/pull/53411))
+- Preferences Modal: Insert path and query args to form before submitting. ([53324](https://github.com/WordPress/gutenberg/pull/53324))
 
 
 ### Accessibility
 
 - Type labels GH Action: Fix accessibility issues in error message. ([53371](https://github.com/WordPress/gutenberg/pull/53371))
-
-#### Block Library
 - Add accessible description of current Navigation block state. ([53469](https://github.com/WordPress/gutenberg/pull/53469))
 - Implement accessible version of Navigation overlay preview toggle control. ([53462](https://github.com/WordPress/gutenberg/pull/53462))
 - Search Block: Fix unintended wrapping of button text in "Button only" style. ([53373](https://github.com/WordPress/gutenberg/pull/53373))
@@ -219,156 +177,145 @@
 
 - Compute presets from `theme.json`: Skip those without classes or variables. ([53574](https://github.com/WordPress/gutenberg/pull/53574))
 - Switch performance tests to Playwright. ([52022](https://github.com/WordPress/gutenberg/pull/52022))
-
-#### Block Editor
 - Fix memory leaks in `<Iframe>`. ([53406](https://github.com/WordPress/gutenberg/pull/53406))
-
-#### Layout
 - `get_root_layout_rules`: Remove unnecessary call to `sanitize_title`. ([53568](https://github.com/WordPress/gutenberg/pull/53568))
 
 
 ### Experiments
 
-- Font Library: Backend. ([52704](https://github.com/WordPress/gutenberg/pull/52704))
-
-#### Block API
-- /add custom connections inspector control. ([53241](https://github.com/WordPress/gutenberg/pull/53241))
+- Fonts Library: Backend. ([52704](https://github.com/WordPress/gutenberg/pull/52704))
+- Add custom connections inspector control. ([53241](https://github.com/WordPress/gutenberg/pull/53241))
 - Allow contents of Paragraph to be "connected" to a meta custom field. ([53247](https://github.com/WordPress/gutenberg/pull/53247))
-
-#### Collaborative Editing
 - Bootstrap a minimal sync package. ([52681](https://github.com/WordPress/gutenberg/pull/52681))
 
 
 ### Documentation
 
-- Add keyboard shortcut selecting text across multiple blocks on Windows. ([53625](https://github.com/WordPress/gutenberg/pull/53625))
-- Fix outdated specification in the "Anatomy of a Block". ([53581](https://github.com/WordPress/gutenberg/pull/53581))
-- Add README for `BlockCaption` component. ([52535](https://github.com/WordPress/gutenberg/pull/52535))
-- Add README to the useSetting component. ([53162](https://github.com/WordPress/gutenberg/pull/53162))
-- Add code requirements to Interactivity API documentation. ([53342](https://github.com/WordPress/gutenberg/pull/53342))
+#### Project Docs
+- Updating `lib/PHP` README.md. ([53614](https://github.com/WordPress/gutenberg/pull/53614))
 - Add documentation for keyboard shortcut selecting text across multiple blocks. ([43164](https://github.com/WordPress/gutenberg/pull/43164))
-- Add the auto-generated commands store documentation. ([52562](https://github.com/WordPress/gutenberg/pull/52562))
-- Adds import for internationalization. ([53504](https://github.com/WordPress/gutenberg/pull/53504))
-- Adds package.json configuration instructions to tutorial. ([53689](https://github.com/WordPress/gutenberg/pull/53689))
-- Consolidate and update the Building a block editor guide. ([53159](https://github.com/WordPress/gutenberg/pull/53159))
+- Add keyboard shortcut selecting text across multiple blocks on Windows. ([53625](https://github.com/WordPress/gutenberg/pull/53625))
 - Docs/Gutenberg release process - Better table of contents. ([53394](https://github.com/WordPress/gutenberg/pull/53394))
-- Docs/Interactivity API - Revamp of README to include API Reference among other indications. ([53385](https://github.com/WordPress/gutenberg/pull/53385))
-- Docs/Interactivity API: Added missing section in TOC and minor improvements to Getting Started Guide page. ([53362](https://github.com/WordPress/gutenberg/pull/53362))
-- Docs: Complimentary > complementary. ([53413](https://github.com/WordPress/gutenberg/pull/53413))
-- Edit Post: Update 'PluginDocumentSettingPanel' documentation. ([53393](https://github.com/WordPress/gutenberg/pull/53393))
-- MenuGroup: Add Storybook stories. ([53090](https://github.com/WordPress/gutenberg/pull/53090))
-- Style engine: Update documentation for css_var. ([53710](https://github.com/WordPress/gutenberg/pull/53710))
-- Update Card component document. ([53172](https://github.com/WordPress/gutenberg/pull/53172))
-- Update Interactivity API package README with clear references to documentation. ([53388](https://github.com/WordPress/gutenberg/pull/53388))
-- Update SelectControl JSDoc. ([53379](https://github.com/WordPress/gutenberg/pull/53379))
-- Update curating the editor to include starter patterns for templates. ([53398](https://github.com/WordPress/gutenberg/pull/53398))
-- Update npx commands in create-block README.md. ([47150](https://github.com/WordPress/gutenberg/pull/47150))
-- Update: Developer documentation to refer to Node 16 instead of 14. ([53523](https://github.com/WordPress/gutenberg/pull/53523))
-- Updating lib/PHP README.md. ([53614](https://github.com/WordPress/gutenberg/pull/53614))
-- fix: Typo in finishing.md. ([53609](https://github.com/WordPress/gutenberg/pull/53609))
+- Add the auto-generated commands store documentation. ([52562](https://github.com/WordPress/gutenberg/pull/52562))
+
+#### Getting Started
+- Developer Environment: Refer to Node 16 instead of 14. ([53523](https://github.com/WordPress/gutenberg/pull/53523))
+- Create Block:
+  - Fix typo in finishing.md. ([53609](https://github.com/WordPress/gutenberg/pull/53609))
+  - Fix outdated specification in the "Anatomy of a Block". ([53581](https://github.com/WordPress/gutenberg/pull/53581))
+
+#### How To Guides
+- Block Tutorial: 
+  - Adds import from `@wordpress/i18n` in code example. ([53504](https://github.com/WordPress/gutenberg/pull/53504))
+  - Adds package.json configuration instructions to tutorial. ([53689](https://github.com/WordPress/gutenberg/pull/53689))
+- Building a Custom Block Editor: Consolidate and update the guide. ([53159](https://github.com/WordPress/gutenberg/pull/53159))
+- Curating the Editor Experience: Include starter patterns for templates. ([53398](https://github.com/WordPress/gutenberg/pull/53398))
 
 #### Components
 - Popover: Fix iframe story and add test. ([53182](https://github.com/WordPress/gutenberg/pull/53182))
+- BlockCaption: Add README for component. ([52535](https://github.com/WordPress/gutenberg/pull/52535))
+- useSetting: Add README for component. ([53162](https://github.com/WordPress/gutenberg/pull/53162))
+- SelectControl: Update JSDoc. ([53379](https://github.com/WordPress/gutenberg/pull/53379))
+- Card: Update Card component document. ([53172](https://github.com/WordPress/gutenberg/pull/53172))
+- MenuGroup: Add Storybook stories. ([53090](https://github.com/WordPress/gutenberg/pull/53090))
+- Edit Post: Update "PluginDocumentSettingPanel" documentation. ([53393](https://github.com/WordPress/gutenberg/pull/53393))
+- Interface: Fix "complimentary" typo with "complementary". ([53413](https://github.com/WordPress/gutenberg/pull/53413))
+
+#### Interactivity API 
+- Revamp of README to include API Reference among other indications. ([53385](https://github.com/WordPress/gutenberg/pull/53385))
+- Add missing section in ToC and minor improvements to Getting Started Guide. ([53362](https://github.com/WordPress/gutenberg/pull/53362))
+- Update Interactivity API package README with clear references to documentation. ([53388](https://github.com/WordPress/gutenberg/pull/53388))
+- Add code requirements to Interactivity API documentation. ([53342](https://github.com/WordPress/gutenberg/pull/53342))
+- Add JSDoc comments to the public API. ([52469](https://github.com/WordPress/gutenberg/pull/52469))
+
+#### Packages
+- Create Block: Update npx commands in README.md. ([47150](https://github.com/WordPress/gutenberg/pull/47150))
+- Data: Add changelog entry for the latest `useSelect` enhancement. ([53685](https://github.com/WordPress/gutenberg/pull/53685))
+- Style Engine: Update documentation for css_var. ([53710](https://github.com/WordPress/gutenberg/pull/53710))
 
 
 ### Code Quality
 
-- Auto-inserting blocks: Minor fixes to address feedback. ([53183](https://github.com/WordPress/gutenberg/pull/53183))
-- Block previews: Memoize example blocks. ([53640](https://github.com/WordPress/gutenberg/pull/53640))
-- Github Workflow: Update update plugin version to also update nested version in package-lock.json. ([53503](https://github.com/WordPress/gutenberg/pull/53503))
-- Interface: Fix ESLint warnings. ([53456](https://github.com/WordPress/gutenberg/pull/53456))
-- LinkControl/LinkUI: Remove unused `className` prop. ([53348](https://github.com/WordPress/gutenberg/pull/53348))
-- Multi-select: Restore pre-Playwright migration test for failed selection attempt. ([53418](https://github.com/WordPress/gutenberg/pull/53418))
 - Remove @types/classnames deprecated package. ([53478](https://github.com/WordPress/gutenberg/pull/53478))
 - Remove `gutenberg_initialize_editor`. ([53527](https://github.com/WordPress/gutenberg/pull/53527))
-- Rich text: Small perf improvement for selection syncing. ([53583](https://github.com/WordPress/gutenberg/pull/53583))
 - Update package-lock.json to match 16.4.0 version number. ([53499](https://github.com/WordPress/gutenberg/pull/53499))
 
 #### Block Library
-- Button: Replace the 'isSmall' deprecated prop in the 'WidthPanel'. ([53472](https://github.com/WordPress/gutenberg/pull/53472))
-- Footnotes: Add some test coverage for footnotes logic in useEntityBlockEditor. ([53376](https://github.com/WordPress/gutenberg/pull/53376))
-- Footnotes: Checking type before using count(). ([53660](https://github.com/WordPress/gutenberg/pull/53660))
+- Button block: Replace the `isSmall` deprecated prop in the `WidthPanel`. ([53472](https://github.com/WordPress/gutenberg/pull/53472))
+- Details block: Remove unnecessary comment attributes. ([51610](https://github.com/WordPress/gutenberg/pull/51610))
+- Footnotes block: 
+  - Add some test coverage for footnotes logic in useEntityBlockEditor. ([53376](https://github.com/WordPress/gutenberg/pull/53376))
+  - Checking type before using count(). ([53660](https://github.com/WordPress/gutenberg/pull/53660))
+- LinkControl/LinkUI: Remove unused `className` prop. ([53348](https://github.com/WordPress/gutenberg/pull/53348))
 - Remove unneeded block.json name-only imports. ([53677](https://github.com/WordPress/gutenberg/pull/53677))
-- Template Parts: Return a stable reference for the defined 'area'. ([53675](https://github.com/WordPress/gutenberg/pull/53675))
+- Template parts: Return a stable reference for the defined 'area'. ([53675](https://github.com/WordPress/gutenberg/pull/53675))
 
 #### Components
 - ESLint: Fix all `storybook/prefer-pascal-case` warnings. ([53683](https://github.com/WordPress/gutenberg/pull/53683))
 - Remove unused components from `/ui`. ([52953](https://github.com/WordPress/gutenberg/pull/52953))
-- `MenuItem`: Refactor to TypeScript. ([53132](https://github.com/WordPress/gutenberg/pull/53132))
+- MenuItem: Refactor to TypeScript. ([53132](https://github.com/WordPress/gutenberg/pull/53132))
+- Move accent colors to theme context. ([53631](https://github.com/WordPress/gutenberg/pull/53631))
+- Interface: Fix ESLint warnings. ([53456](https://github.com/WordPress/gutenberg/pull/53456))
+- Plugins: Introduce the `usePluginContext` hook. ([53291](https://github.com/WordPress/gutenberg/pull/53291))
+- Remove effect dep in Link Control. ([53421](https://github.com/WordPress/gutenberg/pull/53421))
+
+#### Data Layer
+- Data: Warn if the `useSelect` hook returns different values when called with the same state and parameters. ([53666](https://github.com/WordPress/gutenberg/pull/53666))
 
 #### Site Editor
-- Quality: Remove unnecessary `as` prop from `SiteHub` component. ([53372](https://github.com/WordPress/gutenberg/pull/53372))
-- Remove empty usages of BlockPreviewPanel. ([53681](https://github.com/WordPress/gutenberg/pull/53681))
+- Remove unnecessary `as` prop from `SiteHub` component. ([53372](https://github.com/WordPress/gutenberg/pull/53372))
+- Create patterns package and share the create pattern modal between post editor and site editor. ([53161](https://github.com/WordPress/gutenberg/pull/53161))
 
 #### Post Editor
 - Migrate PostTypeSupportCheck usages from withSelect to hooks. ([53330](https://github.com/WordPress/gutenberg/pull/53330))
 - UnsavedChangesWarning: Don't return a function from 'mapSelect'. ([53672](https://github.com/WordPress/gutenberg/pull/53672))
+- Replace HoCs with hooks in:
+  - `PluginDocumentSettingPanel` ([53290](https://github.com/WordPress/gutenberg/pull/53290))
+  - `PostPendingStatusCheck` ([53389](https://github.com/WordPress/gutenberg/pull/53389))
+  - `PostPendingStatus` ([53387](https://github.com/WordPress/gutenberg/pull/53387))
+- Replace `withPluginContext` in `PluginPostPublishPanel` ([53302](https://github.com/WordPress/gutenberg/pull/53302)) and `PluginPrePublishPanel` ([53304](https://github.com/WordPress/gutenberg/pull/53304)).
+- Block previews: Memoize example blocks. ([53640](https://github.com/WordPress/gutenberg/pull/53640))
 
 #### Global Styles
-- Try: Bundle WP_REST_Global_Styles_Controller class instead of inheriting per WordPress version. ([53618](https://github.com/WordPress/gutenberg/pull/53618))
+- Try: Bundle `WP_REST_Global_Styles_Controller` class instead of inheriting per WordPress version. ([53618](https://github.com/WordPress/gutenberg/pull/53618))
+- Remove empty usages of `BlockPreviewPanel`. ([53681](https://github.com/WordPress/gutenberg/pull/53681))
 
 #### Block Editor
-- Remove effect dep in Link Control. ([53421](https://github.com/WordPress/gutenberg/pull/53421))
-
-#### Patterns
-- Create patterns package and share the create pattern modal between post editor and site editor. ([53161](https://github.com/WordPress/gutenberg/pull/53161))
-
-#### Rich Text
 - Remove Firefox work-around to type Space in RichText components inside button/summary. ([53014](https://github.com/WordPress/gutenberg/pull/53014))
-
-#### Interactivity API
-- Add JSDoc comments to the public API. ([52469](https://github.com/WordPress/gutenberg/pull/52469))
-
-#### Block Validation/Deprecation
-- Details Block: Rmove unnecessary comment attributes. ([51610](https://github.com/WordPress/gutenberg/pull/51610))
+- Rich text: Small perf improvement for selection syncing. ([53583](https://github.com/WordPress/gutenberg/pull/53583))
+- Auto-inserting blocks: Minor fixes to address feedback. ([53183](https://github.com/WordPress/gutenberg/pull/53183))
 
 
 ### Tools
 
-- ESLint Plugin: Bring JSDoc plugin to the latest version. ([53629](https://github.com/WordPress/gutenberg/pull/53629))
-- Fix wp-scripts watch mode failing when `block.json` contains malformed JSON. ([51971](https://github.com/WordPress/gutenberg/pull/51971))
-- Project management: Remove automation that checks-in ANY issue without activity in 180 days. ([53390](https://github.com/WordPress/gutenberg/pull/53390))
-- Scripts: Remove deprecated `stable` deep dependency. ([53630](https://github.com/WordPress/gutenberg/pull/53630))
-- Scripts: Update `npm-package-json-lint` to v6. ([53636](https://github.com/WordPress/gutenberg/pull/53636))
+#### Project Management
+- Remove automation that checks-in ANY issue without activity in 180 days. ([53390](https://github.com/WordPress/gutenberg/pull/53390))
 
 #### Build Tooling
+- Update minimal node version to 16 and npm to 8. ([53426](https://github.com/WordPress/gutenberg/pull/53426))
+- Update to TypeScript 5.1. ([52621](https://github.com/WordPress/gutenberg/pull/52621))
+- Update Lerna to 7.1.4. ([53515](https://github.com/WordPress/gutenberg/pull/53515))
+- Update Storybook to v7. ([53520](https://github.com/WordPress/gutenberg/pull/53520))
+- Update `npm-package-json-lint` to v6. ([53636](https://github.com/WordPress/gutenberg/pull/53636))
+- Update `mkdirp` dependency. ([53529](https://github.com/WordPress/gutenberg/pull/53529))
+- ESLint Plugin: Bring JSDoc plugin to the latest version. ([53629](https://github.com/WordPress/gutenberg/pull/53629))
+- Add Storybook TypesSript plugin for compatibility with TypeScript 5. ([53445](https://github.com/WordPress/gutenberg/pull/53445))
+- Update the "update plugin version" workflow step so that it also updates the nested package version for Gutenberg. ([53503](https://github.com/WordPress/gutenberg/pull/53503))
+- Fix wp-scripts watch mode failing when `block.json` contains malformed JSON. ([51971](https://github.com/WordPress/gutenberg/pull/51971))
+- Remove deprecated `stable` deep dependency. ([53630](https://github.com/WordPress/gutenberg/pull/53630))
 - Add some missing internal peer dependencies. ([53275](https://github.com/WordPress/gutenberg/pull/53275))
-- Add storybook typescript plugin for compatibility with Typescript 5. ([53445](https://github.com/WordPress/gutenberg/pull/53445))
-- Minimal node and npm upgrade. ([53426](https://github.com/WordPress/gutenberg/pull/53426))
-- Update mkdirp dependency. ([53529](https://github.com/WordPress/gutenberg/pull/53529))
-- Update to Typescript 5.1. ([52621](https://github.com/WordPress/gutenberg/pull/52621))
-- Upgrade Lerna to the latest version. ([53515](https://github.com/WordPress/gutenberg/pull/53515))
-- Upgrade Storybook to V7. ([53520](https://github.com/WordPress/gutenberg/pull/53520))
+- Add some missing package dependencies. ([41486](https://github.com/WordPress/gutenberg/pull/41486))
 
 #### Testing
 - Migrate 'Block variations' end-to-end tests to Playwright. ([53266](https://github.com/WordPress/gutenberg/pull/53266))
-
-
-### Various
-
-- Bump plugin version to 16.4.0. ([53489](https://github.com/WordPress/gutenberg/pull/53489))
-- Dependencies: Update @testing-library/react to v14. ([53682](https://github.com/WordPress/gutenberg/pull/53682))
-- Keyboard Shortcut: End the command palette description with a period. ([53635](https://github.com/WordPress/gutenberg/pull/53635))
-- end-to-end Storybook: Fix for Storybook v7. ([53658](https://github.com/WordPress/gutenberg/pull/53658))
-
-#### Block Editor
-- Webkit e2e: Attempt to fix shift+click test. ([53564](https://github.com/WordPress/gutenberg/pull/53564))
-- Writing flow: Add end-to-end tests for webkit and firefox. ([53458](https://github.com/WordPress/gutenberg/pull/53458))
-
-#### Data Layer
-- Data: Add changelog entry for the latest 'useSelect' enhancement. ([53685](https://github.com/WordPress/gutenberg/pull/53685))
-
-#### Typography
-- Add tests for fluid layout + typography. ([53554](https://github.com/WordPress/gutenberg/pull/53554))
-
-#### Patterns
-- Add missing full stop to string. ([53544](https://github.com/WordPress/gutenberg/pull/53544))
-
-#### Block Library
+- Interactivity API: Add missing tests for `body`, `init` and `on` directives. ([52952](https://github.com/WordPress/gutenberg/pull/52952))
 - Cover block: Add integration tests to check isDark settings. ([53256](https://github.com/WordPress/gutenberg/pull/53256))
-
-#### Interactivity API
-- Add missing tests for `body`, `init` and `on` directives. ([52952](https://github.com/WordPress/gutenberg/pull/52952))
+- Writing flow: Add end-to-end tests for webkit and firefox. ([53458](https://github.com/WordPress/gutenberg/pull/53458))
+- Add tests for fluid layout and typography. ([53554](https://github.com/WordPress/gutenberg/pull/53554))
+- Block editor: Webkit e2e: Attempt to fix shift+click test. ([53564](https://github.com/WordPress/gutenberg/pull/53564))
+- end-to-end Storybook: Fix for Storybook v7. ([53658](https://github.com/WordPress/gutenberg/pull/53658))
+- Dependencies: Update `@testing-library/react` to v14. ([53682](https://github.com/WordPress/gutenberg/pull/53682))
+- Multi-select: Restore pre-Playwright migration test for failed selection attempt. ([53418](https://github.com/WordPress/gutenberg/pull/53418))
 
 
 ## First time contributors
@@ -389,6 +336,8 @@ The following contributors merged PRs in this release:
 @aaronrobertshaw @ajlende @alexstine @Aljullu @andrewserong @annezazu @anomiex @artemiomorales @atachibana @bangank36 @behoney @bengreeley @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @derekblank @doughamlin @draganescu @dsas @ducksblock @ellatrix @fabiankaegy @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @ingeniumed @jameskoster @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @Mamaduka @matiasbenedetto @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @oandregal @ockham @pbking @priethor @ramonjd @richtabor @rtro92 @scruffian @SiobhyB @stokesman @swissspidy @t-hamano @tellthemachines @tjcafferkey @tomjn @tyxla @WunderBart @youknowriad
 
 
+
+
 = 16.4.0 =
 
 ## Changelog
diff --git a/docs/contributors/code/getting-started-with-code-contribution.md b/docs/contributors/code/getting-started-with-code-contribution.md
index ab691fbcd68af..3de83d50268d8 100644
--- a/docs/contributors/code/getting-started-with-code-contribution.md
+++ b/docs/contributors/code/getting-started-with-code-contribution.md
@@ -5,7 +5,7 @@ The following guide is for setting up your local environment to contribute to th
 ## Prerequisites
 
 -   Node.js
-    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v14, and npm v6. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
+    Gutenberg is a JavaScript project and requires [Node.js](https://nodejs.org/). The project is built using Node.js v16, and npm v8. See the [LTS release schedule](https://github.com/nodejs/Release#release-schedule) for details.
 
 We recommend using the [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) since it is the easiest way to install and manage node for macOS, Linux, and Windows 10 using WSL2. See [our Development Tools guide](/docs/getting-started/devenv/README.md#development-tools) or the Nodejs site for additional installation instructions.
 
diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md
index 1794bafb87ac7..8a2f6079b2419 100644
--- a/docs/contributors/code/testing-overview.md
+++ b/docs/contributors/code/testing-overview.md
@@ -257,11 +257,10 @@ test( 'fires onChange when a new value is typed', () => {
 **Good**: using `user-event` to simulate user events.
 
 ```javascript
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-test('fires onChange when a new value is typed', async () => {
+test( 'fires onChange when a new value is typed', async () => {
 	const user = userEvent.setup();
 
 	const spyOnChange = jest.fn();
@@ -287,7 +286,7 @@ test('fires onChange when a new value is typed', async () => {
 	await user.selectOptions( select, [ 'optionValue' ] );
 
 	// ...
-})
+} );
 ```
 
 ### Integration testing for block UI
@@ -301,9 +300,7 @@ The advantage of this approach is that the bulk of a block editor's functionalit
 To set up a jest file for integration tests:
 
 ```js
-import {
-	initializeEditor
-} from 'test/integration/helpers/integration-test-editor';
+import { initializeEditor } from 'test/integration/helpers/integration-test-editor';
 
 async function setup( attributes ) {
 	const testBlock = { name: 'core/cover', attributes };
@@ -470,9 +467,7 @@ Similarly, the `toMatchStyleDiffSnapshot` function allows to snapshot only the d
 test( 'should render margin', () => {
 	const { container: spacer } = render( <Spacer /> );
 	const { container: spacerWithMargin } = render( <Spacer margin={ 5 } /> );
-	expect( spacerWithMargin ).toMatchStyleDiffSnapshot(
-		spacer
-	);
+	expect( spacerWithMargin ).toMatchStyleDiffSnapshot( spacer );
 } );
 ```
 
@@ -516,7 +511,7 @@ There is an ongoing effort to add integration tests to the native mobile project
 
 Most existing End-to-end tests currently use [Puppeteer](https://github.com/puppeteer/puppeteer) as a headless Chromium driver to run the tests in `packages/e2e-tests`, and are otherwise still run by a [Jest](https://jestjs.io/) test runner.
 
-There's an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. **It's recommended to write new e2e tests in Playwright whenever possible**. The sections below mostly apply to the old Jest + Puppeteer framework. See the dedicated [guide](/docs/contributors/code/e2e/README.md) if you're writing tests with Playwright.**
+There's an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate them from Puppeteer to Playwright. **It's recommended to write new e2e tests in Playwright whenever possible**. The sections below mostly apply to the old Jest + Puppeteer framework. See the dedicated [guide](/docs/contributors/code/e2e/README.md) if you're writing tests with Playwright.
 
 ### Using wp-env
 
@@ -598,7 +593,7 @@ Every core block is required to have at least one set of fixture files for its m
 
 ### Flaky Tests
 
-A test is considered to be **flaky** when it can pass and fail across multiple retry attempts without any code changes. We auto retry failed tests at most **twice** on CI to detect and report them to GitHub issues automatically under the [`[Type] Flaky Test`](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22%5BType%5D+Flaky+Test%22) label via [`report-flaky-tests`](https://github.com/WordPress/gutenberg/blob/trunk/.github/report-flaky-tests/index.js) GitHub action. Note that a test that failed three times in a row is not counted as a flaky test and will not be reported to an issue.
+A test is considered to be **flaky** when it can pass and fail across multiple retry attempts without any code changes. We auto retry failed tests at most **twice** on CI to detect and report them to GitHub issues automatically under the [`[Type] Flaky Test`](https://github.com/WordPress/gutenberg/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22%5BType%5D+Flaky+Test%22) label via [`report-flaky-tests`](https://github.com/WordPress/gutenberg/tree/trunk/packages/report-flaky-tests) GitHub action. Note that a test that failed three times in a row is not counted as a flaky test and will not be reported to an issue.
 
 ## PHP Testing
 
diff --git a/docs/explanations/faq.md b/docs/explanations/faq.md
index 92f5e9aa5fffc..af7ed4f2e084b 100644
--- a/docs/explanations/faq.md
+++ b/docs/explanations/faq.md
@@ -367,19 +367,6 @@ The main extension point we want to emphasize is creating new blocks. Blocks are
 
 Indeed. There are multiple ways in which custom post types can leverage Gutenberg. The plan is to allow them to specify the blocks they support, as well as defining a default block for the post type. It's not currently the case, but if a post type disables the content field, the “advanced” section at the bottom would fill the page.
 
-## Does Gutenberg support columns?
-
-Yes, a columns block is available in Gutenberg.
-
-## Does Gutenberg support nested blocks?
-
-Yes, it is supported. You can have multiple levels of nesting – blocks within blocks within blocks. See the [Nested Block Tutorial](/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md) for more information.
-
-## Does drag and drop work for rearranging blocks?
-
-Yes, you can drag and drop blocks to rearrange their order.
-
-
 ## Can themes _style_ blocks?
 
 Yes. Blocks can provide their own styles, which themes can add to or override, or they can provide no styles at all and rely fully on what the theme provides.
@@ -417,7 +404,7 @@ Gutenberg works in modern browsers.
 
 The [list of supported browsers can be found in the Make WordPress handbook](https://make.wordpress.org/core/handbook/best-practices/browser-support/). The term “modern browsers” generally refers to the _current and previous two versions_ of each major browser.
 
-Since WordPress 5.8, Gutenberg no longer supports any version of Internet Explorer. 
+Since WordPress 5.8, Gutenberg no longer supports any version of Internet Explorer.
 
 ## Should I be concerned that Gutenberg will make my plugin obsolete?
 
diff --git a/docs/getting-started/devenv/README.md b/docs/getting-started/devenv/README.md
index 2238cbb0c0dba..7c55bcb6393f1 100644
--- a/docs/getting-started/devenv/README.md
+++ b/docs/getting-started/devenv/README.md
@@ -165,7 +165,7 @@ If you see the error: `Host is already in use by another container`
 
 Docker is just one method to run a local WordPress environment. Block development and extending WordPress is done using normal plugins, so any WordPress environment can be used. Here are some alternatives that you can consider which do not require installing Docker.
 
--   [Local](https://localwp.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`
+-   [Local](https://localwp.com/) - Local is a single application you download and install. You will need to know where the plugin directory is located after install. If you create a site called `mywp` typically the plugin directory is installed at `~\Local Sites\mywp\app\public\wp-content\plugins`. When working with gutenberg it is recommended to place your install in your own gutenberg folder. This avoids potential issue with the build processes.
 
 -   [WampServer](http://www.wampserver.com/en/) or [MAMP](https://www.mamp.info/) environments, both are quite similar to Local, combining a web server, PHP, and database. However these tools are not WordPress specific, so if you are not already using them, Local might be an easier option.
 
diff --git a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
index 4143b9cb07b6d..8ab024a5c32e5 100644
--- a/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
+++ b/docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md
@@ -155,13 +155,20 @@ add_action( 'init', function() {
 } );
 ```
 
-## Child InnerBlocks: Parent and Ancestors
+## Using Parent and Ancestor Relationships in Blocks
 
-A common pattern for using InnerBlocks is to create a custom block that will be included only in the InnerBlocks.
+A common pattern for using InnerBlocks is to create a custom block that will be only be available if its parent block is inserted. This allows builders to establish a relationship between blocks, while limiting a nested block's discoverability. Currently, there are two relationships builders can use: `parent` and `ancestor`. The differences are: 
 
-An example of this is the Columns block, that creates a single parent block called `columns` and then creates an child block called `column`. The parent block is defined to only allow the child blocks. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column).
+- If you assign a `parent` then you’re stating that the nested block can only be used and inserted as a __direct descendant of the parent__.
+- If you assign an `ancestor` then you’re stating that the nested block can only be used and inserted as a __descendent of the parent__.
 
-When defining a child block, use the `parent` block setting to define which block is the parent. This prevents the block showing in the inserter outside of the InnerBlock it is defined for.
+The key difference between `parent` and `ancestor` is `parent` has finer specificity, while an `ancestor` has greater flexibility in its nested hierarchy.
+
+### Defining Parent Block Relationship
+
+An example of this is the Column block, which is assigned the `parent` block setting. This allows the Column block to only be available as a nested direct descendant in its parent Columns block. Otherwise, the Column block will not be available as an option within the block inserter. See [Column code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/column).
+
+When defining a direct descendent block, use the `parent` block setting to define which block is the parent. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
 
 ```json
 {
@@ -172,7 +179,13 @@ When defining a child block, use the `parent` block setting to define which bloc
 }
 ```
 
-Another example is using the `ancestors` block setting to define a block that must be present as an ancestor, but it doesn't need to be the direct parent (like with `parent`). This prevents the block from showing in the inserter if the ancestor is not in the tree, but other blocks can be added in between, like a Columns or Group block. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name).
+### Defining Ancestor Block Relationship
+
+An example of this is the Comment Author Name block, which is assigned the `ancestor` block setting. This allows the Comment Author Name block to only be available as a nested descendant in its ancestral Comment Template block. Otherwise, the Comment Author Name block will not be available as an option within the block inserter. See [Comment Author Name code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/comment-author-name).
+
+The `ancestor` relationship allows the Comment Author Name block to be anywhere in the hierarchical tree, and not _just_ a direct child of the parent Comment Template block, while still limiting its availability within the block inserter to only be visible an an option to insert if the Comment Template block is available.
+
+When defining a descendent block, use the `ancestor` block setting. This prevents the nested block from showing in the inserter outside of the InnerBlock it is defined for.
 
 ```json
 {
@@ -183,7 +196,7 @@ Another example is using the `ancestors` block setting to define a block that mu
 }
 ```
 
-## Using a react hook
+## Using a React Hook
 
 You can use a react hook called `useInnerBlocksProps` instead of the `InnerBlocks` component. This hook allows you to take more control over the markup of inner blocks areas.
 
diff --git a/docs/how-to-guides/enqueueing-assets-in-the-editor.md b/docs/how-to-guides/enqueueing-assets-in-the-editor.md
new file mode 100644
index 0000000000000..1cc8b6de9ab5e
--- /dev/null
+++ b/docs/how-to-guides/enqueueing-assets-in-the-editor.md
@@ -0,0 +1,118 @@
+# Enqueueing assets in the Editor
+
+This guide is designed to be the definitive reference for enqueueing assets (scripts and styles) in the Editor. The approaches outlined here represent the recommended practices but keep in mind that this resource will evolve as WordPress does. Updates are encouraged. 
+
+As of WordPress 6.3, the Post Editor is iframed if all registered blocks have a [`Block API version 3`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) or higher and no traditional metaboxes are registered. The Site Editor has always been iframed. This guide assumes you are looking to enqueue assets for the iframed Editor, but refer to the backward compatibility section below for additional considerations. 
+
+For more information about why the Editor is iframed, please revisit the post [Blocks in an iframed (template) editor](https://make.wordpress.org/core/2021/06/29/blocks-in-an-iframed-template-editor/).
+
+## The Editor versus Editor content
+Before enqueueing assets in the Editor, you must first identify what you are trying to target. 
+
+Do you want to add styling or JavaScript to the user-generated content (blocks) in the Editor? Or do you want to modify the Editor user interface (UI) components or interact with Editor APIs? This could include everything from creating custom block controls to registering block variations. 
+
+There are different hooks to use depending on the answers to these questions, and if you are building a block or a theme, there are additional approaches to consider. Refer to the designated sections below. 
+
+## Scenarios for enqueing assets
+### Editor scripts and styles
+
+Whenever you need to enqueue assets for the Editor itself (i.e. not the user-generated content), you should use the [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/) hook coupled with the standard [`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/) and [`wp_enqueue_style`](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) functions. 
+
+Examples might be adding custom inspector or toolbar controls, registering block styles and variations in Javascript, registering Editor plugins, etc. 
+
+```php
+/**
+ * Enqueue Editor assets.
+ */
+function example_enqueue_editor_assets() {
+    wp_enqueue_script( 
+        'example-editor-scripts', 
+        plugins_url( 'editor-scripts.css', __FILE__ ) );
+    }
+    wp_enqueue_style( 
+        'example-editor-styles', 
+        plugins_url( 'editor-styles.css', __FILE__ ) );
+    }
+}
+add_action( 'enqueue_block_editor_assets, 'example_enqueue_editor_assets' );
+```
+
+While not the recommended approach, it's important to note that `enqueue_block_editor_assets` can be used to style Editor content for backward compatibility. See below for more details.
+
+### Editor content scripts and styles
+
+As of WordPress 6.3, all assets added through the [`enqueue_block_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_assets/) PHP action will also be enqueued in the iframed Editor. See [#48286](https://github.com/WordPress/gutenberg/pull/48286) for more details. 
+
+This is the primary method you should use to enqueue assets for user-generated content (blocks), and this hook fires both in the Editor and on the front end of your site. It should not be used to add assets intended for the Editor UI or to interact with Editor APIs. See below for a note on backward compatibility.
+
+There are instances where you may only want to add assets in the Editor and not on the front end. You can achieve this by using an [`is_admin()`](https://developer.wordpress.org/reference/functions/is_admin/) check.
+
+```php
+/**
+ * Enqueue content assets but only in the Editor.
+ */
+function example_enqueue_editor_content_assets() {
+    if ( is_admin() ) {
+        wp_enqueue_script( 
+            'example-editor-content-scripts', 
+            plugins_url( 'constent-scripts.css', __FILE__ ) );
+        }
+        wp_enqueue_style( 
+            'example-editor-content-styles', 
+            plugins_url( 'constent-styles.css', __FILE__ ) );
+        }
+    }
+}
+add_action( 'enqueue_block_assets, 'example_enqueue_editor_content_assets' );
+```
+
+You can also use the hook [`block_editor_settings_all`](https://developer.wordpress.org/reference/hooks/block_editor_settings_all/) to modify Editor settings directly. This method is a bit more complicated to implement but provides greater flexibility. It should only be used if `enqueue_block_assets` does not meet your needs. 
+
+The following example sets the default text color for all paragraphs to `green`.
+
+```php
+/**
+ * Modify the Editor settings by adding custom styles.
+ *
+ * @param array  $editor_settings An array containing the current Editor settings.
+ * @param string $editor_context  The context of the editor.
+ * 
+ * @return array Modified editor settings with the added custom CSS style.
+ */
+function example_modify_editor_settings( $editor_settings, $editor_context ) {
+    $editor_settings["styles"][] = array(
+        "css" => 'p { color: green }'
+    );
+    
+    return $editor_settings;
+}
+add_filter( 'block_editor_settings_all', 'example_modify_editor_settings', 10,2 );
+```
+
+These styles are inlined in the `body` of the iframed Editor and prefixed by `.editor-styles-wrapper`. The resulting markup will look like this:
+
+```css
+<style>.editor-styles-wrapper p { color: green; }</style>
+```
+
+Beginning in WordPress 6.3, you can also use this method of modifying Editor settings to change styles dynamically with JavaScript. See [#52767](https://github.com/WordPress/gutenberg/pull/52767#top) for more details.
+
+### Block scripts and styles
+
+When building a block, `block.json` is the recommended way to enqueue all scripts and styles that are specifically required for the block itself. You are able to enqueue assets for the Editor, the front end, or both. See the [Block Metadata](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) article for more details. 
+
+### Theme scripts and styles
+
+If you need to enqueue Editor JavaScript in a theme, you can use either `enqueue_block_assets` or `enqueue_block_editor_assets` as outlined above. Editor-specific stylesheets should almost always be added with [`add_editor_style()`](https://developer.wordpress.org/reference/functions/add_editor_style/) or [`wp_enqueue_block_style()`](https://developer.wordpress.org/reference/functions/wp_enqueue_block_style/). 
+
+The `wp_enqueue_block_style()` function allows you to load per-block stylesheets in the Editor and on the front end. Coupled with `theme.json`, this is one of the best methods of styling blocks. See the WordPress Developer Blog article [Leveraging theme.json and per-block styles for more performant themes](https://developer.wordpress.org/news/2022/12/leveraging-theme-json-and-per-block-styles-for-more-performant-themes/) for more details.
+
+## Backward compatibility and known issues
+
+Suppose you are building a plugin or theme that requires backward compatibility to 6.2 or lower while maintaining compatibility with WordPress 6.3. In that case, you will not be able to use `enqueue_block_assets` since this hook does not enqueue assets in the content of the iframed Editor prior to 6.3.
+
+As an alternative, you can use `enqueue_block_editor_assets` so long as the enqueued stylesheet contains at least one of the following selectors: `.editor-styles-wrapper`, `.wp-block`, or `.wp-block-*`. A warning message will be logged in the console, but the hook will apply the styles to the content of the Editor.
+
+It’s also important to note that as of WordPress 6.3, assets enqueued by `enqueue_block_assets` are loaded both inside and outside Editor's iframe for backward compatibility. Depending on the script libraries that you are trying to enqueue, this might cause problems. An ongoing discussion about this approach is happening in the Gutenberg [GitHub repository](https://github.com/WordPress/gutenberg/issues/53590). 
+
+If you experience issues using any of the methods outlined in this guide that have not been previously reported, please [submit an issue](https://github.com/WordPress/gutenberg/issues/new/choose) on GitHub.
\ No newline at end of file
diff --git a/docs/how-to-guides/platform/custom-block-editor.md b/docs/how-to-guides/platform/custom-block-editor.md
index bb119977e6986..242eccf460563 100644
--- a/docs/how-to-guides/platform/custom-block-editor.md
+++ b/docs/how-to-guides/platform/custom-block-editor.md
@@ -278,17 +278,14 @@ With these components available, you can define the `<Editor>` component.
 
 function Editor( { settings } ) {
 	return (
-		<SlotFillProvider>
-			<DropZoneProvider>
-				<div className="getdavesbe-block-editor-layout">
-					<Notices />
-					<Header />
-					<Sidebar />
-					<BlockEditor settings={ settings } />
-				</div>
-				<Popover.Slot />
-			</DropZoneProvider>
-		</SlotFillProvider>
+		<DropZoneProvider>
+			<div className="getdavesbe-block-editor-layout">
+				<Notices />
+				<Header />
+				<Sidebar />
+				<BlockEditor settings={ settings } />
+			</div>
+		</DropZoneProvider>
 	);
 }
 ```
@@ -297,14 +294,10 @@ In this process, the core of the editor's layout is being scaffolded, along with
 
 Let's examine these in more detail:
 
--   `<SlotFillProvider>` – Enables the use of the ["Slot/Fill"
-    pattern](/docs/reference-guides/slotfills/README.md) through the component tree
 -   `<DropZoneProvider>` – Enables the use of [dropzones for drag and drop functionality](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/components/src/drop-zone)
 -   `<Notices>` – Provides a "snack bar" Notice that will be rendered if any messages are dispatched to the `core/notices` store
 -   `<Header>` – Renders the static title "Standalone Block Editor" at the top of the editor UI
 -   `<BlockEditor>` – The custom block editor component
--   `<Popover.Slot />` – Renders a slot into which `<Popover>`s can be rendered
-    using the Slot/Fill mechanic
 
 ### Keyboard navigation
 
@@ -342,9 +335,7 @@ return (
 			<div className="editor-styles-wrapper">
 				<BlockEditorKeyboardShortcuts />
 				<WritingFlow>
-					<ObserveTyping>
-						<BlockList className="getdavesbe-block-editor__block-list" />
-					</ObserveTyping>
+					<BlockList className="getdavesbe-block-editor__block-list" />
 				</WritingFlow>
 			</div>
 		</BlockEditorProvider>
@@ -439,10 +430,7 @@ Jumping back to your custom `<BlockEditor>` component, it is also worth noting t
 	<BlockEditorKeyboardShortcuts /> /* 1. */
 	<WritingFlow>
 		/* 2. */
-		<ObserveTyping>
-			/* 3. */
-			<BlockList className="getdavesbe-block-editor__block-list" />
-		</ObserveTyping>
+		<BlockList className="getdavesbe-block-editor__block-list" />
 	</WritingFlow>
 </div>
 ```
@@ -451,7 +439,6 @@ These provide other important elements of functionality for the editor instance.
 
 1. [`<BlockEditorKeyboardShortcuts />`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/keyboard-shortcuts/index.js) – Enables and usage of keyboard shortcuts within the editor
 2. [`<WritingFlow>`](https://github.com/WordPress/gutenberg/blob/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/writing-flow/index.js) – Handles selection, focus management, and navigation across blocks
-3. [`<ObserveTyping>`](https://github.com/WordPress/gutenberg/tree/e38dbe958c04d8089695eb686d4f5caff2707505/packages/block-editor/src/components/observe-typing)- Used to manage the editor's internal `isTyping` flag
 
 ## Reviewing the sidebar
 
diff --git a/docs/manifest.json b/docs/manifest.json
index 27e4d6cb24cc9..0da0e4f89a443 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -215,6 +215,12 @@
 		"markdown_source": "../docs/how-to-guides/curating-the-editor-experience.md",
 		"parent": "how-to-guides"
 	},
+	{
+		"title": "Enqueueing assets in the Editor",
+		"slug": "enqueueing-assets-in-the-editor",
+		"markdown_source": "../docs/how-to-guides/enqueueing-assets-in-the-editor.md",
+		"parent": "how-to-guides"
+	},
 	{
 		"title": "Feature Flags",
 		"slug": "feature-flags",
diff --git a/docs/toc.json b/docs/toc.json
index b523fcedea416..d30b85ec36c1b 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -104,6 +104,7 @@
 				]
 			},
 			{ "docs/how-to-guides/curating-the-editor-experience.md": [] },
+			{ "docs/how-to-guides/enqueueing-assets-in-the-editor.md": [] },
 			{ "docs/how-to-guides/feature-flags.md": [] },
 			{ "docs/how-to-guides/format-api.md": [] },
 			{
diff --git a/gutenberg.php b/gutenberg.php
index 585e53409c014..bc848f9b628dd 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: 7.0
- * Version: 16.5.0-rc.1
+ * Version: 16.5.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/compat/wordpress-6.3/rest-api.php b/lib/compat/wordpress-6.3/rest-api.php
index d7fa31cd33fe6..130da6ed774d8 100644
--- a/lib/compat/wordpress-6.3/rest-api.php
+++ b/lib/compat/wordpress-6.3/rest-api.php
@@ -106,3 +106,32 @@ function gutenberg_register_rest_navigation_fallbacks() {
 	$editor_settings->register_routes();
 }
 add_action( 'rest_api_init', 'gutenberg_register_rest_navigation_fallbacks' );
+
+/**
+ * Add extra collection params to themes requests.
+ *
+ * @param array $query_params JSON Schema-formatted collection parameters.
+ * @return array Updated parameters.
+ */
+function gutenberg_themes_collection_params_6_3( $query_params ) {
+	$query_params['is_block_theme'] = array(
+		'description' => __( 'Whether the theme is a block-based theme.' ),
+		'type'        => 'boolean',
+		'readonly'    => true,
+	);
+	return $query_params;
+}
+add_filter( 'rest_themes_collection_params', 'gutenberg_themes_collection_params_6_3' );
+
+/**
+ * Updates REST API response for the themes and adds the `is_block_theme` flag.
+ *
+ * @param WP_REST_Response $response The response object.
+ * @param WP_Theme         $theme    Theme object used to create response.
+ * @return WP_REST_Response $response Updated response object.
+ */
+function gutenberg_modify_rest_themes_response( $response, $theme ) {
+	$response->data['is_block_theme'] = $theme->is_block_theme();
+	return $response;
+}
+add_filter( 'rest_prepare_theme', 'gutenberg_modify_rest_themes_response', 10, 2 );
diff --git a/lib/experimental/fonts/font-face/class-wp-font-face-resolver.php b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php
similarity index 95%
rename from lib/experimental/fonts/font-face/class-wp-font-face-resolver.php
rename to lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php
index 16e74d6051aa7..84375b6c52f5d 100644
--- a/lib/experimental/fonts/font-face/class-wp-font-face-resolver.php
+++ b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php
@@ -4,7 +4,7 @@
  *
  * @package    WordPress
  * @subpackage Fonts
- * @since      X.X.X
+ * @since      6.4.0
  */
 
 if ( class_exists( 'WP_Font_Face_Resolver' ) ) {
@@ -25,12 +25,12 @@ class WP_Font_Face_Resolver {
 	/**
 	 * Gets fonts defined in theme.json.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @return array Returns the font-families, each with their font-face variations.
 	 */
 	public static function get_fonts_from_theme_json() {
-		$settings = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_settings();
+		$settings = gutenberg_get_global_settings();
 
 		// Bail out early if there are no font settings.
 		if ( empty( $settings['typography'] ) || empty( $settings['typography']['fontFamilies'] ) ) {
@@ -43,7 +43,7 @@ public static function get_fonts_from_theme_json() {
 	/**
 	 * Parse theme.json settings to extract font definitions with variations grouped by font-family.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $settings Font settings to parse.
 	 * @return array Returns an array of fonts, grouped by font-family.
@@ -81,7 +81,7 @@ private static function parse_settings( array $settings ) {
 	/**
 	 * Converts font-face properties from theme.json format.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array  $font_face_definition The font-face definitions to convert.
 	 * @param string $font_family_property The value to store in the font-face font-family property.
@@ -115,7 +115,7 @@ private static function convert_font_face_properties( array $font_face_definitio
 	 * replaced with the URI to the font file's location in the theme. When a "src"
 	 * beings with this placeholder, it is replaced, converting the src into a URI.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $src An array of font file sources to process.
 	 * @return array An array of font file src URI(s).
@@ -139,7 +139,7 @@ private static function to_theme_file_uri( array $src ) {
 	/**
 	 * Converts all first dimension keys into kebab-case.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $data The array to process.
 	 * @return array Data with first dimension keys converted into kebab-case.
diff --git a/lib/experimental/fonts/font-face/class-wp-font-face.php b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php
similarity index 96%
rename from lib/experimental/fonts/font-face/class-wp-font-face.php
rename to lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php
index 482bf4d42396d..0489fe4f4fbd5 100644
--- a/lib/experimental/fonts/font-face/class-wp-font-face.php
+++ b/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php
@@ -4,7 +4,7 @@
  *
  * @package    WordPress
  * @subpackage Fonts
- * @since      X.X.X
+ * @since      6.4.0
  */
 
 if ( class_exists( 'WP_Font_Face' ) ) {
@@ -14,14 +14,14 @@
 /**
  * Font Face generates and prints `@font-face` styles for given fonts.
  *
- * @since X.X.X
+ * @since 6.4.0
  */
 class WP_Font_Face {
 
 	/**
 	 * The font-face property defaults.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @var string[]
 	 */
@@ -35,7 +35,7 @@ class WP_Font_Face {
 	/**
 	 * Valid font-face property names.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @var string[]
 	 */
@@ -59,7 +59,7 @@ class WP_Font_Face {
 	/**
 	 * Valid font-display values.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @var string[]
 	 */
@@ -70,7 +70,7 @@ class WP_Font_Face {
 	 * where the key is the attribute name and the
 	 * value is its value.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @var string[]
 	 */
@@ -79,13 +79,13 @@ class WP_Font_Face {
 	/**
 	 * Creates and initializes an instance of WP_Font_Face.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 */
 	public function __construct() {
 		/**
 		 * Filters the font-face property defaults.
 		 *
-		 * @since X.X.X
+		 * @since 6.4.0
 		 *
 		 * @param array $defaults {
 		 *     An array of required font-face properties and defaults.
@@ -111,7 +111,7 @@ function_exists( 'current_theme_supports' ) && ! current_theme_supports( 'html5'
 	/**
 	 * Generates and prints the `@font-face` styles for the given fonts.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $fonts The fonts to generate and print @font-face styles.
 	 */
@@ -132,7 +132,7 @@ public function generate_and_print( array $fonts ) {
 	/**
 	 * Validates each of the font-face properties.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $fonts The fonts to valid.
 	 * @return array Prepared font-faces organized by provider and font-family.
@@ -158,7 +158,7 @@ private function validate_fonts( array $fonts ) {
 	/**
 	 * Validates each font-face property.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $font_face Font face properties to validate.
 	 * @return false|array Validated font-face on success. Else, false.
@@ -212,7 +212,7 @@ private function validate_font_face_properties( array $font_face ) {
 	/**
 	 * Gets the `<style>` element for wrapping the `@font-face` CSS.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @return string The style element.
 	 */
@@ -225,7 +225,7 @@ private function get_style_element() {
 	/**
 	 * Gets the defined <style> element's attributes.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @return string A string of attribute=value when defined, else, empty string.
 	 */
@@ -244,7 +244,7 @@ private function generate_style_element_attributes() {
 	 *    1. Orchestrates an optimized `src` (with format) for browser support.
 	 *    2. Generates the `@font-face` for all its fonts.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $font_faces The font-faces to generate @font-face CSS styles.
 	 * @return string The `@font-face` CSS styles.
@@ -267,7 +267,7 @@ private function get_css( $font_faces ) {
 	/**
 	 * Orders `src` items to optimize for browser support.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $font_face Font face to process.
 	 * @return array Font-face with ordered src items.
@@ -340,7 +340,7 @@ private function order_src( array $font_face ) {
 	/**
 	 * Builds the font-family's CSS.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $font_face Font face to process.
 	 * @return string This font-family's CSS.
@@ -380,7 +380,7 @@ private function build_font_face_css( array $font_face ) {
 	/**
 	 * Compiles the `src` into valid CSS.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $value Value to process.
 	 * @return string The CSS.
@@ -401,7 +401,7 @@ private function compile_src( array $value ) {
 	/**
 	 * Compiles the font variation settings.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $font_variation_settings Array of font variation settings.
 	 * @return string The CSS.
diff --git a/lib/experimental/fonts/font-face/fonts.php b/lib/compat/wordpress-6.4/fonts/fonts.php
similarity index 51%
rename from lib/experimental/fonts/font-face/fonts.php
rename to lib/compat/wordpress-6.4/fonts/fonts.php
index 59e78d6059165..57ac36d11f754 100644
--- a/lib/experimental/fonts/font-face/fonts.php
+++ b/lib/compat/wordpress-6.4/fonts/fonts.php
@@ -4,17 +4,19 @@
  *
  * @package    WordPress
  * @subpackage Fonts
- * @since      X.X.X
+ * @since      6.4.0
  */
 
-add_action( 'wp_head', 'wp_print_font_faces', 50 );
-add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
-
 if ( ! function_exists( 'wp_print_font_faces' ) ) {
+	// @core-merge: will merge into Core's `wp-includes/default-filters.php` file.
+	add_action( 'wp_head', 'wp_print_font_faces', 50 );
+	// @core-merge: will merge into Core's `wp-admin/includes/admin-filters.php.` file.
+	add_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
+
 	/**
 	 * Generates and prints font-face styles for given fonts or theme.json fonts.
 	 *
-	 * @since X.X.X
+	 * @since 6.4.0
 	 *
 	 * @param array $fonts Optional. The fonts to generate and print @font-face styles.
 	 *                     Default empty array.
@@ -41,18 +43,20 @@ function wp_print_font_faces( $fonts = array() ) {
 
 		$wp_font_face->generate_and_print( $fonts );
 	}
-}
 
-add_filter(
-	'block_editor_settings_all',
-	static function( $settings ) {
-		ob_start();
-		wp_print_font_faces();
-		$styles = ob_get_clean();
-
-		// Add the font-face styles to iframed editor assets.
-		$settings['__unstableResolvedAssets']['styles'] .= $styles;
-		return $settings;
-	},
-	11
-);
+	// @core-merge: do not merge this code into Core.
+	add_filter(
+		'block_editor_settings_all',
+		static function( $settings ) {
+			ob_start();
+			// @core-merge: add only this line into Core's `_wp_get_iframed_editor_assets()` function after `wp_print_styles()`.
+			wp_print_font_faces();
+			$styles = ob_get_clean();
+
+			// Add the font-face styles to iframed editor assets.
+			$settings['__unstableResolvedAssets']['styles'] .= $styles;
+			return $settings;
+		},
+		11
+	);
+}
diff --git a/lib/compat/wordpress-6.4/script-loader.php b/lib/compat/wordpress-6.4/script-loader.php
new file mode 100644
index 0000000000000..ac1b01700511f
--- /dev/null
+++ b/lib/compat/wordpress-6.4/script-loader.php
@@ -0,0 +1,98 @@
+<?php
+/**
+ * Updates the script-loader.php file
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Updates the registered inline script `wp-date` required for moment.js localization.
+ * Changes to the inline script output should be synced with Core in the file
+ * src/wp-includes/script-loader.php in `wp_default_packages_inline_scripts()`.
+ *
+ * @since 6.4.0
+ *
+ * @global WP_Locale $wp_locale WordPress date and time locale object.
+ *
+ * @param WP_Scripts $scripts WP_Scripts object.
+ */
+function gutenberg_update_wp_date_settings( $scripts ) {
+	if ( $scripts->query( 'wp-date', 'registered' ) ) {
+		global $wp_locale;
+		// Calculate the timezone abbr (EDT, PST) if possible.
+		$timezone_string = get_option( 'timezone_string', 'UTC' );
+		$timezone_abbr   = '';
+
+		if ( ! empty( $timezone_string ) ) {
+			$timezone_date = new DateTime( 'now', new DateTimeZone( $timezone_string ) );
+			$timezone_abbr = $timezone_date->format( 'T' );
+		}
+		$scripts->registered['wp-date']->extra['after'] = array(
+			false,
+			sprintf(
+				'wp.date.setSettings( %s );',
+				wp_json_encode(
+					array(
+						'l10n'     => array(
+							'locale'        => get_user_locale(),
+							'months'        => array_values( $wp_locale->month ),
+							'monthsShort'   => array_values( $wp_locale->month_abbrev ),
+							'weekdays'      => array_values( $wp_locale->weekday ),
+							'weekdaysShort' => array_values( $wp_locale->weekday_abbrev ),
+							'meridiem'      => (object) $wp_locale->meridiem,
+							'relative'      => array(
+								/* translators: %s: Duration. */
+								'future' => __( '%s from now', 'default' ),
+								/* translators: %s: Duration. */
+								'past'   => __( '%s ago', 'default' ),
+								/* translators: One second from or to a particular datetime, e.g., "a second ago" or "a second from now". */
+								's'      => __( 'a second', 'default' ),
+								/* translators: %s: Duration in seconds from or to a particular datetime, e.g., "4 seconds ago" or "4 seconds from now". */
+								'ss'     => __( '%d seconds', 'default' ),
+								/* translators: One minute from or to a particular datetime, e.g., "a minute ago" or "a minute from now". */
+								'm'      => __( 'a minute', 'default' ),
+								/* translators: %s: Duration in minutes from or to a particular datetime, e.g., "4 minutes ago" or "4 minutes from now". */
+								'mm'     => __( '%d minutes', 'default' ),
+								/* translators: %s: One hour from or to a particular datetime, e.g., "an hour ago" or "an hour from now". */
+								'h'      => __( 'an hour', 'default' ),
+								/* translators: %s: Duration in hours from or to a particular datetime, e.g., "4 hours ago" or "4 hours from now". */
+								'hh'     => __( '%d hours', 'default' ),
+								/* translators: %s: One day from or to a particular datetime, e.g., "a day ago" or "a day from now". */
+								'd'      => __( 'a day', 'default' ),
+								/* translators: %s: Duration in days from or to a particular datetime, e.g., "4 days ago" or "4 days from now". */
+								'dd'     => __( '%d days', 'default' ),
+								/* translators: %s: One month from or to a particular datetime, e.g., "a month ago" or "a month from now". */
+								'M'      => __( 'a month', 'default' ),
+								/* translators: %s: Duration in months from or to a particular datetime, e.g., "4 months ago" or "4 months from now". */
+								'MM'     => __( '%d months', 'default' ),
+								/* translators: %s: One year from or to a particular datetime, e.g., "a year ago" or "a year from now". */
+								'y'      => __( 'a year', 'default' ),
+								/* translators: %s: Duration in years from or to a particular datetime, e.g., "4 years ago" or "4 years from now". */
+								'yy'     => __( '%d years', 'default' ),
+							),
+							'startOfWeek'   => (int) get_option( 'start_of_week', 0 ),
+						),
+						'formats'  => array(
+							/* translators: Time format, see https://www.php.net/manual/datetime.format.php */
+							'time'                => get_option( 'time_format', __( 'g:i a', 'gutenberg' ) ),
+							/* translators: Date format, see https://www.php.net/manual/datetime.format.php */
+							'date'                => get_option( 'date_format', __( 'F j, Y', 'gutenberg' ) ),
+							/* translators: Date/Time format, see https://www.php.net/manual/datetime.format.php */
+							'datetime'            => __( 'F j, Y g:i a', 'default' ),
+							/* translators: Abbreviated date/time format, see https://www.php.net/manual/datetime.format.php */
+							'datetimeAbbreviated' => __( 'M j, Y g:i a', 'default' ),
+						),
+						'timezone' => array(
+							'offset' => (float) get_option( 'gmt_offset', 0 ),
+							'string' => $timezone_string,
+							'abbr'   => $timezone_abbr,
+						),
+					)
+				)
+			),
+		);
+	}
+}
+
+add_action( 'wp_default_scripts', 'gutenberg_update_wp_date_settings' );
+
diff --git a/lib/load.php b/lib/load.php
index cfd5c4f38d0c5..6560ef566d444 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -122,6 +122,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 // WordPress 6.4 compat.
 require __DIR__ . '/compat/wordpress-6.4/blocks.php';
 require __DIR__ . '/compat/wordpress-6.4/block-patterns.php';
+require __DIR__ . '/compat/wordpress-6.4/script-loader.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';
@@ -170,26 +171,33 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/experimental/fonts/font-library/class-wp-rest-font-library-controller.php';
 	require __DIR__ . '/experimental/fonts/font-library/font-library.php';
 
-	if ( ! class_exists( 'WP_Font_Face' ) ) {
-		require __DIR__ . '/experimental/fonts/font-face/class-wp-font-face.php';
-		require __DIR__ . '/experimental/fonts/font-face/class-wp-font-face-resolver.php';
-		require __DIR__ . '/experimental/fonts/font-face/fonts.php';
-
-		// Load the BC Layer. Do no backport to WP Core.
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-utils.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider-local.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-resolver.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/webfonts-deprecations.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-utils.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider-local.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts.php';
-		require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-web-fonts.php';
-	}
+	// Load the Font Face.
+	require __DIR__ . '/compat/wordpress-6.4/fonts/font-face/class-wp-font-face.php';
+	require __DIR__ . '/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php';
+
+	// A general purpose file for all fonts PHP functions and hooks.
+	require __DIR__ . '/compat/wordpress-6.4/fonts/fonts.php';
+
+	// Load the BC Layer to avoid fatal errors of extenders using the Fonts API.
+	// @core-merge: do not merge the BC layer files into WordPress Core.
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-utils.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider-local.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-resolver.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/webfonts-deprecations.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-utils.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider-local.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts.php';
+	require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-web-fonts.php';
 } elseif ( ! class_exists( 'WP_Fonts' ) ) {
+	// Turns off Font Face hooks in Core.
+	// @since 6.4.0.
+	remove_action( 'wp_head', 'wp_print_font_faces', 50 );
+	remove_action( 'admin_print_styles', 'wp_print_font_faces', 50 );
+
 	// Fonts API files.
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts-provider.php';
 	require __DIR__ . '/experimental/fonts-api/class-wp-fonts-utils.php';
diff --git a/package-lock.json b/package-lock.json
index 066327b9caaab..98b0e5ebc2aea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "16.5.0-rc.1",
+	"version": "16.5.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "16.5.0-rc.1",
+			"version": "16.5.0",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
diff --git a/package.json b/package.json
index e574fe1c0e1ed..915268be93236 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "16.5.0-rc.1",
+	"version": "16.5.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 4c7a5b32a9206..c74c20d6f21ae 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+- Embed the `ObserveTyping` behavior within the `BlockList` component making to simplify instanciations of third-party block editors.
+
 ## 12.8.0 (2023-08-16)
 
 ## 12.7.0 (2023-08-10)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 067bcfe0979f3..add11b1b9b2a5 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -20,9 +20,7 @@ import {
 	BlockList,
 	BlockTools,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
-import { SlotFillProvider, Popover } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 function MyEditorComponent() {
@@ -34,16 +32,11 @@ function MyEditorComponent() {
 			onInput={ ( blocks ) => updateBlocks( blocks ) }
 			onChange={ ( blocks ) => updateBlocks( blocks ) }
 		>
-			<SlotFillProvider>
-				<BlockTools>
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
-					</WritingFlow>
-				</BlockTools>
-				<Popover.Slot />
-			</SlotFillProvider>
+			<BlockTools>
+				<WritingFlow>
+					<BlockList />
+				</WritingFlow>
+			</BlockTools>
 		</BlockEditorProvider>
 	);
 }
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 04b767d9568b7..6b20789fa919e 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -31,7 +31,6 @@ import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
 import { useInBetweenInserter } from './use-in-between-inserter';
 import { store as blockEditorStore } from '../../store';
-import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
 import { LayoutProvider, defaultLayout } from './layout';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useInnerBlocksProps } from '../inner-blocks';
@@ -39,6 +38,7 @@ import {
 	BlockEditContextProvider,
 	DEFAULT_BLOCK_EDIT_CONTEXT,
 } from '../block-edit/context';
+import { useTypingObserver } from '../observe-typing';
 
 const elementContext = createContext();
 
@@ -105,6 +105,7 @@ function Root( { className, ...settings } ) {
 				useBlockSelectionClearer(),
 				useInBetweenInserter(),
 				setElement,
+				useTypingObserver(),
 			] ),
 			className: classnames( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
@@ -124,7 +125,6 @@ function Root( { className, ...settings } ) {
 }
 
 export default function BlockList( settings ) {
-	usePreParsePatterns();
 	return (
 		<BlockEditContextProvider value={ DEFAULT_BLOCK_EDIT_CONTEXT }>
 			<Root { ...settings } />
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
index 6a215363c3901..cadd49632b2e8 100644
--- a/packages/block-editor/src/components/block-popover/inbetween.js
+++ b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -215,7 +215,8 @@ function BlockPopoverInbetween( {
 			focusOnMount={ false }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			// Forces a remount of the popover when its position changes
 			// This makes sure the popover doesn't animate from its previous position.
 			key={ nextClientId + '--' + rootClientId }
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
index 5382949684abd..26042e8c6d6e9 100644
--- a/packages/block-editor/src/components/block-popover/index.js
+++ b/packages/block-editor/src/components/block-popover/index.js
@@ -163,7 +163,8 @@ function BlockPopover(
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
+			__unstableSlotName={ __unstablePopoverSlot }
+			inline={ ! __unstablePopoverSlot }
 			placement="top-start"
 			resize={ false }
 			flip={ false }
diff --git a/packages/block-editor/src/components/button-block-appender/content.scss b/packages/block-editor/src/components/button-block-appender/content.scss
index 43fc189f9d3bd..941ccb7dd1ad3 100644
--- a/packages/block-editor/src/components/button-block-appender/content.scss
+++ b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -35,6 +35,7 @@
 
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .block-list-appender:only-child {
+	// One level of nesting
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// Legacy groups have an inner container so need to be targeted separately
@@ -69,6 +70,13 @@
 		}
 	}
 
+	// Hide the dashed outline in 2-level nested cases, so for example the dashed
+	// empty column is only shown when the columns block is selected.
+	.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > &::after {
+		border: none;
+	}
+
+	// Drop zone.
 	&.is-drag-over .block-editor-button-block-appender {
 		background-color: var(--wp-admin-theme-color);
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
index 1da84507f17a2..97f3ab7c3ce4f 100644
--- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
+++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js
@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,18 +13,22 @@ import { store as blockEditorStore } from '../../store';
 import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { items } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
 
 			return {
-				items: filterInserterItems( allItems, { onlyReusable: true } ),
+				inserterItems: allItems,
 			};
 		},
 		[ rootClientId ]
 	);
 
+	const items = useMemo( () => {
+		return filterInserterItems( inserterItems, { onlyReusable: true } );
+	}, [ inserterItems ] );
+
 	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
 
 	return (
diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js
index bc951dac1de02..93bdaa96b5175 100644
--- a/packages/block-editor/src/components/inserter/search-results.native.js
+++ b/packages/block-editor/src/components/inserter/search-results.native.js
@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,21 +22,24 @@ function InserterSearchResults( {
 	rootClientId,
 	isFullScreen,
 } ) {
-	const { blockTypes } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
-			const allItems =
+			const items =
 				select( blockEditorStore ).getInserterItems( rootClientId );
 
-			const availableItems = filterInserterItems( allItems, {
-				allowReusable: true,
-			} );
-			const filteredItems = searchItems( availableItems, filterValue );
-
-			return { blockTypes: filteredItems };
+			return { inserterItems: items };
 		},
-		[ rootClientId, filterValue ]
+		[ rootClientId ]
 	);
 
+	const blockTypes = useMemo( () => {
+		const availableItems = filterInserterItems( inserterItems, {
+			allowReusable: true,
+		} );
+
+		return searchItems( availableItems, filterValue );
+	}, [ inserterItems, filterValue ] );
+
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );
 
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 e558b951f5459..faf9d299bd935 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
@@ -246,7 +246,7 @@ function ListViewBlockSelectButton(
 							{ images.map( ( image, index ) => (
 								<span
 									className="block-editor-list-view-block-select-button__image"
-									key={ `img-${ image.url }` }
+									key={ image.clientId }
 									style={ {
 										backgroundImage: `url(${ image.url })`,
 										zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
index 8a60c875a8303..917ebd883aa8d 100644
--- a/packages/block-editor/src/components/list-view/index.js
+++ b/packages/block-editor/src/components/list-view/index.js
@@ -159,19 +159,6 @@ function ListViewComponent(
 		isMounted.current = true;
 	}, [] );
 
-	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	const [ fixedListWindow ] = useFixedWindowList(
-		elementRef,
-		BLOCK_LIST_ITEM_HEIGHT,
-		visibleBlockCount,
-		{
-			useWindowing: true,
-			windowOverscan: 40,
-		}
-	);
-
 	const expand = useCallback(
 		( clientId ) => {
 			if ( ! clientId ) {
@@ -242,6 +229,25 @@ function ListViewComponent(
 		]
 	);
 
+	// List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+	const [ fixedListWindow ] = useFixedWindowList(
+		elementRef,
+		BLOCK_LIST_ITEM_HEIGHT,
+		visibleBlockCount,
+		{
+			// Ensure that the windowing logic is recalculated when the expanded state changes.
+			// This is necessary because expanding a collapsed block in a short list view can
+			// switch the list view to a tall list view with a scrollbar, and vice versa.
+			// When this happens, the windowing logic needs to be recalculated to ensure that
+			// the correct number of blocks are rendered, by rechecking for a scroll container.
+			expandedState,
+			useWindowing: true,
+			windowOverscan: 40,
+		}
+	);
+
 	// If there are no blocks to show and we're not showing the appender, do not render the list view.
 	if ( ! clientIdsTree.length && ! showAppender ) {
 		return null;
diff --git a/packages/block-editor/src/components/list-view/use-list-view-images.js b/packages/block-editor/src/components/list-view/use-list-view-images.js
index 85dea4292f360..97633349b6b02 100644
--- a/packages/block-editor/src/components/list-view/use-list-view-images.js
+++ b/packages/block-editor/src/components/list-view/use-list-view-images.js
@@ -12,13 +12,17 @@ import { store as blockEditorStore } from '../../store';
 // Maximum number of images to display in a list view row.
 const MAX_IMAGES = 3;
 
-function getImageUrl( block ) {
+function getImage( block ) {
 	if ( block.name !== 'core/image' ) {
 		return;
 	}
 
 	if ( block.attributes?.url ) {
-		return { url: block.attributes.url, alt: block.attributes.alt };
+		return {
+			url: block.attributes.url,
+			alt: block.attributes.alt,
+			clientId: block.clientId,
+		};
 	}
 }
 
@@ -30,7 +34,7 @@ function getImagesFromGallery( block ) {
 	const images = [];
 
 	for ( const innerBlock of block.innerBlocks ) {
-		const img = getImageUrl( innerBlock );
+		const img = getImage( innerBlock );
 		if ( img ) {
 			images.push( img );
 		}
@@ -43,7 +47,7 @@ function getImagesFromGallery( block ) {
 }
 
 function getImagesFromBlock( block, isExpanded ) {
-	const img = getImageUrl( block );
+	const img = getImage( block );
 	if ( img ) {
 		return [ img ];
 	}
diff --git a/packages/block-editor/src/components/observe-typing/README.md b/packages/block-editor/src/components/observe-typing/README.md
index c589c6903416d..e44c612a14415 100644
--- a/packages/block-editor/src/components/observe-typing/README.md
+++ b/packages/block-editor/src/components/observe-typing/README.md
@@ -1,6 +1,6 @@
 # Observe Typing
 
-`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content — typically the top-level block list — it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
+`<ObserveTyping />` is a component used in managing the editor's internal typing flag. When used to wrap content, it observes keyboard and mouse events to set and unset the typing flag. The typing flag is used in considering whether the block border and controls should be visible. While typing, these elements are hidden for a distraction-free experience.
 
 ## Usage
 
@@ -10,7 +10,7 @@ Wrap the component where blocks are to be rendered with `<ObserveTyping />`:
 function VisualEditor() {
 	return (
 		<ObserveTyping>
-			<BlockList />
+			<MyInput />
 		</ObserveTyping>
 	);
 }
diff --git a/packages/block-editor/src/components/provider/index.js b/packages/block-editor/src/components/provider/index.js
index 13d25aafd8c83..0fa3f042053d0 100644
--- a/packages/block-editor/src/components/provider/index.js
+++ b/packages/block-editor/src/components/provider/index.js
@@ -3,6 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
+import KeyboardShortcuts from '../keyboard-shortcuts';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
@@ -42,7 +44,12 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );
 
-		return <BlockRefsProvider>{ children }</BlockRefsProvider>;
+		return (
+			<SlotFillProvider>
+				<KeyboardShortcuts.Register />
+				<BlockRefsProvider>{ children }</BlockRefsProvider>
+			</SlotFillProvider>
+		);
 	}
 );
 
diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
deleted file mode 100644
index c7ecbc209a241..0000000000000
--- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,133 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`URLPopover matches the snapshot in its default state 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-        style="max-height: 0px; overflow: auto;"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-            <button
-              aria-expanded="false"
-              aria-label="Link settings"
-              class="components-button block-editor-url-popover__settings-toggle has-icon"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-        style="max-height: 0px; overflow: auto;"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-            <button
-              aria-expanded="true"
-              aria-label="Link settings"
-              class="components-button block-editor-url-popover__settings-toggle has-icon"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
-                />
-              </svg>
-            </button>
-          </div>
-          <div
-            class="block-editor-url-popover__row block-editor-url-popover__settings"
-          >
-            <div>
-              Settings
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
-
-exports[`URLPopover matches the snapshot when there are no settings 1`] = `
-<div>
-  <span>
-    <div
-      class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: none;"
-      tabindex="-1"
-    >
-      <div
-        class="components-popover__content"
-        style="max-height: 0px; overflow: auto;"
-      >
-        <div
-          class="block-editor-url-popover__input-container"
-        >
-          <div
-            class="block-editor-url-popover__row"
-          >
-            <div>
-              Editor
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </span>
-</div>
-`;
diff --git a/packages/block-editor/src/components/url-popover/test/index.js b/packages/block-editor/src/components/url-popover/test/index.js
deleted file mode 100644
index 1a60d846b2e90..0000000000000
--- a/packages/block-editor/src/components/url-popover/test/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import URLPopover from '../';
-
-/**
- * Returns the first found popover element up the DOM tree.
- *
- * @param {HTMLElement} element Element to start with.
- * @return {HTMLElement|null} Popover element, or `null` if not found.
- */
-function getWrappingPopoverElement( element ) {
-	return element.closest( '.components-popover' );
-}
-
-describe( 'URLPopover', () => {
-	it( 'matches the snapshot in its default state', async () => {
-		const { container } = render(
-			<URLPopover
-				animate={ false }
-				renderSettings={ () => <div>Settings</div> }
-			>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
-			).toBePositionedPopover()
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'matches the snapshot when the settings are toggled open', async () => {
-		const user = userEvent.setup();
-		const { container } = render(
-			<URLPopover
-				animate={ false }
-				renderSettings={ () => <div>Settings</div> }
-			>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Link settings' } )
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'matches the snapshot when there are no settings', async () => {
-		const { container } = render(
-			<URLPopover animate={ false }>
-				<div>Editor</div>
-			</URLPopover>
-		);
-
-		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( screen.getByText( 'Editor' ) )
-			).toBePositionedPopover()
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );
diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js
index bb7b7d97c3190..cb325438deca7 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -229,39 +229,54 @@ const useActionsCommands = () => {
 		return { isLoading: false, commands: [] };
 	}
 
-	const icons = {
-		ungroup,
-		group,
-		move,
-		add,
-		remove,
-		duplicate: copy,
-	};
-
 	const commands = [
-		onUngroup,
-		onGroup,
-		onMoveTo,
-		onAddAfter,
-		onAddBefore,
-		onRemove,
-		onDuplicate,
-	].map( ( callback ) => {
-		const action = callback.name
-			.replace( 'on', '' )
-			.replace( /([a-z])([A-Z])/g, '$1 $2' );
-
+		{
+			name: 'ungroup',
+			label: __( 'Ungroup' ),
+			callback: onUngroup,
+			icon: ungroup,
+		},
+		{
+			name: 'Group',
+			label: __( 'Group' ),
+			callback: onGroup,
+			icon: group,
+		},
+		{
+			name: 'move-to',
+			label: __( 'Move to' ),
+			callback: onMoveTo,
+			icon: move,
+		},
+		{
+			name: 'add-after',
+			label: __( 'Add after' ),
+			callback: onAddAfter,
+			icon: add,
+		},
+		{
+			name: 'add-before',
+			label: __( 'Add before' ),
+			callback: onAddBefore,
+			icon: add,
+		},
+		{
+			name: 'remove',
+			label: __( 'Remove' ),
+			callback: onRemove,
+			icon: remove,
+		},
+		{
+			name: 'duplicate',
+			label: __( 'Duplicate' ),
+			callback: onDuplicate,
+			icon: copy,
+		},
+	].map( ( { name, label, callback, icon } ) => {
 		return {
-			name: 'core/block-editor/action-' + callback.name,
-			// translators: %s: type of the command.
-			label: action,
-			icon: icons[
-				callback.name
-					.replace( 'on', '' )
-					.match( /[A-Z]{1}[a-z]*/ )
-					.toString()
-					.toLowerCase()
-			],
+			name: 'core/block-editor/action-' + name,
+			label,
+			icon,
 			callback: ( { close } ) => {
 				callback();
 				close();
diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js
index 4891c0a90df98..914f04e4fc80e 100644
--- a/packages/block-editor/src/components/warning/index.js
+++ b/packages/block-editor/src/components/warning/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { Children } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { moreHorizontal } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
@@ -34,7 +34,7 @@ function Warning( { className, actions, children, secondaryActions } ) {
 							{ secondaryActions && (
 								<DropdownMenu
 									className="block-editor-warning__secondary"
-									icon={ moreHorizontal }
+									icon={ moreVertical }
 									label={ __( 'More options' ) }
 									popoverProps={ {
 										position: 'bottom left',
diff --git a/packages/block-editor/src/utils/pre-parse-patterns.js b/packages/block-editor/src/utils/pre-parse-patterns.js
deleted file mode 100644
index c18215ee8e63f..0000000000000
--- a/packages/block-editor/src/utils/pre-parse-patterns.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, select } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-
-const requestIdleCallback = ( () => {
-	if ( typeof window === 'undefined' ) {
-		return ( callback ) => {
-			setTimeout( () => callback( Date.now() ), 0 );
-		};
-	}
-
-	return window.requestIdleCallback || window.requestAnimationFrame;
-} )();
-
-const cancelIdleCallback = ( () => {
-	if ( typeof window === 'undefined' ) {
-		return clearTimeout;
-	}
-
-	return window.cancelIdleCallback || window.cancelAnimationFrame;
-} )();
-
-export function usePreParsePatterns() {
-	const { patterns, isPreviewMode } = useSelect( ( _select ) => {
-		const { __experimentalBlockPatterns, __unstableIsPreviewMode } =
-			_select( blockEditorStore ).getSettings();
-		return {
-			patterns: __experimentalBlockPatterns,
-			isPreviewMode: __unstableIsPreviewMode,
-		};
-	}, [] );
-
-	useEffect( () => {
-		if ( isPreviewMode ) {
-			return;
-		}
-		if ( ! patterns?.length ) {
-			return;
-		}
-
-		let handle;
-		let index = -1;
-
-		const callback = () => {
-			index++;
-			if ( index >= patterns.length ) {
-				return;
-			}
-
-			select( blockEditorStore ).__experimentalGetParsedPattern(
-				patterns[ index ].name
-			);
-
-			handle = requestIdleCallback( callback );
-		};
-
-		handle = requestIdleCallback( callback );
-		return () => cancelIdleCallback( handle );
-	}, [ patterns, isPreviewMode ] );
-
-	return null;
-}
diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
index dca3f782efc67..e37c7fa107102 100644
--- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -133,7 +133,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -143,59 +143,73 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={14}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="Add caption"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={14}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="Add caption"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>
@@ -359,7 +373,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -369,59 +383,73 @@ exports[`Audio block renders audio file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={14}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="Add caption"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={14}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="Add caption"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 8409d33a2e1ca..932281b1ab6f1 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -151,8 +151,10 @@ function CoverEdit( {
 	const setMedia = attributesFromMedia( setAttributes, dimRatio );
 
 	const onSelectMedia = async ( newMedia ) => {
+		// Only pass the url to getCoverIsDark if the media is an image as video is not handled.
+		const newUrl = newMedia?.type === 'image' ? newMedia.url : undefined;
 		const isDarkSetting = await getCoverIsDark(
-			newMedia.url,
+			newUrl,
 			dimRatio,
 			overlayColor.color
 		);
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 1b9fdc0e56680..72a42c0d5c70b 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -167,26 +167,31 @@ export async function getCoverIsDark( url, dimRatio = 50, overlayColor ) {
 		.toRgb();
 
 	if ( url ) {
-		const imgCrossOrigin = applyFilters(
-			'media.crossOrigin',
-			undefined,
-			url
-		);
-		const {
-			value: [ r, g, b, a ],
-		} = await retrieveFastAverageColor().getColorAsync( url, {
-			// Previously the default color was white, but that changed
-			// in v6.0.0 so it has to be manually set now.
-			defaultColor: [ 255, 255, 255, 255 ],
-			// Errors that come up don't reject the promise, so error
-			// logging has to be silenced with this option.
-			silent: process.env.NODE_ENV === 'production',
-			crossOrigin: imgCrossOrigin,
-		} );
-		// FAC uses 0-255 for alpha, but colord expects 0-1.
-		const media = { r, g, b, a: a / 255 };
-		const composite = compositeSourceOver( overlay, media );
-		return colord( composite ).isDark();
+		try {
+			const imgCrossOrigin = applyFilters(
+				'media.crossOrigin',
+				undefined,
+				url
+			);
+			const {
+				value: [ r, g, b, a ],
+			} = await retrieveFastAverageColor().getColorAsync( url, {
+				// Previously the default color was white, but that changed
+				// in v6.0.0 so it has to be manually set now.
+				defaultColor: [ 255, 255, 255, 255 ],
+				// Errors that come up don't reject the promise, so error
+				// logging has to be silenced with this option.
+				silent: process.env.NODE_ENV === 'production',
+				crossOrigin: imgCrossOrigin,
+			} );
+			// FAC uses 0-255 for alpha, but colord expects 0-1.
+			const media = { r, g, b, a: a / 255 };
+			const composite = compositeSourceOver( overlay, media );
+			return colord( composite ).isDark();
+		} catch ( error ) {
+			// If there's an error, just assume the image is dark.
+			return true;
+		}
 	}
 
 	// Assume a white background because it isn't easy to get the actual
diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
index 5ce876137ade0..a14a1de7b76bc 100644
--- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -64,7 +64,7 @@ exports[`File block renders file error state without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -74,59 +74,73 @@ exports[`File block renders file error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={16}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="File name"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "<p>File name</p>",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={16}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="File name"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="left"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "<p>File name</p>",
+              }
+            }
+            textAlign="left"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
       <View>
         <Svg
@@ -179,7 +193,7 @@ exports[`File block renders file error state without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -189,62 +203,76 @@ exports[`File block renders file error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          color="white"
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={16}
-          isMultiline={false}
-          maxImagesWidth={200}
-          minWidth={40}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder=""
-          placeholderTextColor="white"
-          selectionColor="white"
-          style={
-            {
-              "backgroundColor": undefined,
-              "color": "white",
-              "maxWidth": 80,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "<p>Download</p>",
+            color="white"
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={16}
+            isMultiline={false}
+            maxImagesWidth={200}
+            minWidth={40}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder=""
+            placeholderTextColor="white"
+            selectionColor="white"
+            style={
+              {
+                "backgroundColor": undefined,
+                "color": "white",
+                "maxWidth": 80,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "<p>Download</p>",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>
@@ -315,7 +343,7 @@ exports[`File block renders file without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -325,59 +353,73 @@ exports[`File block renders file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={16}
-          isMultiline={false}
-          maxImagesWidth={200}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder="File name"
-          placeholderTextColor="gray"
-          selectionColor="black"
-          style={
-            {
-              "backgroundColor": undefined,
-              "maxWidth": undefined,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "<p>File name</p>",
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={16}
+            isMultiline={false}
+            maxImagesWidth={200}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder="File name"
+            placeholderTextColor="gray"
+            selectionColor="black"
+            style={
+              {
+                "backgroundColor": undefined,
+                "maxWidth": undefined,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="left"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "<p>File name</p>",
+              }
+            }
+            textAlign="left"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
     <View
@@ -404,7 +446,7 @@ exports[`File block renders file without crashing 1`] = `
           ]
         }
       >
-        <RCTAztecView
+        <View
           accessibilityState={
             {
               "busy": undefined,
@@ -414,62 +456,76 @@ exports[`File block renders file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessible={true}
-          activeFormats={[]}
-          blockType={
+          accessibilityValue={
             {
-              "tag": "p",
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
             }
           }
-          color="white"
-          deleteEnter={true}
-          disableEditingMenu={false}
+          accessible={false}
+          collapsable={false}
           focusable={true}
-          fontFamily="serif"
-          fontSize={16}
-          isMultiline={false}
-          maxImagesWidth={200}
-          minWidth={40}
-          onBackspace={[Function]}
           onBlur={[Function]}
-          onChange={[Function]}
           onClick={[Function]}
-          onContentSizeChange={[Function]}
-          onEnter={[Function]}
           onFocus={[Function]}
-          onHTMLContentWithCursor={[Function]}
-          onKeyDown={[Function]}
-          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
-          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-          placeholder=""
-          placeholderTextColor="white"
-          selectionColor="white"
-          style={
-            {
-              "backgroundColor": undefined,
-              "color": "white",
-              "maxWidth": 80,
-              "minHeight": 0,
+        >
+          <RCTAztecView
+            activeFormats={[]}
+            blockType={
+              {
+                "tag": "p",
+              }
             }
-          }
-          text={
-            {
-              "eventCount": undefined,
-              "linkTextColor": undefined,
-              "selection": null,
-              "tag": "p",
-              "text": "<p>Download</p>",
+            color="white"
+            deleteEnter={true}
+            disableEditingMenu={false}
+            fontFamily="serif"
+            fontSize={16}
+            isMultiline={false}
+            maxImagesWidth={200}
+            minWidth={40}
+            onBackspace={[Function]}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onContentSizeChange={[Function]}
+            onEnter={[Function]}
+            onFocus={[Function]}
+            onHTMLContentWithCursor={[Function]}
+            onKeyDown={[Function]}
+            onPaste={[Function]}
+            onSelectionChange={[Function]}
+            placeholder=""
+            placeholderTextColor="white"
+            selectionColor="white"
+            style={
+              {
+                "backgroundColor": undefined,
+                "color": "white",
+                "maxWidth": 80,
+                "minHeight": 0,
+              }
             }
-          }
-          textAlign="center"
-          triggerKeyCodes={[]}
-        />
+            text={
+              {
+                "eventCount": undefined,
+                "linkTextColor": undefined,
+                "selection": null,
+                "tag": "p",
+                "text": "<p>Download</p>",
+              }
+            }
+            textAlign="center"
+            triggerKeyCodes={[]}
+          />
+        </View>
       </View>
     </View>
   </View>
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index b9bcf461dcf60..0a9f8f60ca107 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -54,6 +54,11 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$should_load_view_script = true;
 	}
 
+	// If at least one block in the page has the lightbox, mark the block type as interactive.
+	if ( $should_load_view_script ) {
+		$block->block_type->supports['interactivity'] = true;
+	}
+
 	$view_js_file = 'wp-block-image-view';
 	if ( ! wp_script_is( $view_js_file ) ) {
 		$script_handles = $block->block_type->view_script_handles;
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index 193c524dfe200..794c8eaa2fc86 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -103,7 +103,7 @@ function Placeholder( { layoutClassNames } ) {
 		<div { ...blockProps }>
 			<p>
 				{ __(
-					'This is the Post Content block, it will display all the blocks in any single post or page.'
+					'This is the Content block, it will display all the blocks in any single post or page.'
 				) }
 			</p>
 			<p>
@@ -113,7 +113,7 @@ function Placeholder( { layoutClassNames } ) {
 			</p>
 			<p>
 				{ __(
-					'If there are any Custom Post Types registered at your site, the Post Content block can display the contents of those entries as well.'
+					'If there are any Custom Post Types registered at your site, the Content block can display the contents of those entries as well.'
 				) }
 			</p>
 		</div>
diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
index e40797aea5775..dd0c7aa1694f4 100644
--- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
@@ -19,7 +19,7 @@ exports[`Search Block renders block with button inside option 1`] = `
         ]
       }
     >
-      <RCTAztecView
+      <View
         accessibilityState={
           {
             "busy": undefined,
@@ -29,57 +29,71 @@ exports[`Search Block renders block with button inside option 1`] = `
             "selected": undefined,
           }
         }
-        accessible={true}
-        activeFormats={[]}
-        blockType={
+        accessibilityValue={
           {
-            "tag": "p",
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
-        disableEditingMenu={false}
+        accessible={false}
+        collapsable={false}
         focusable={true}
-        fontFamily="serif"
-        fontSize={16}
-        isMultiline={false}
-        maxImagesWidth={200}
-        onBackspace={[Function]}
         onBlur={[Function]}
-        onChange={[Function]}
         onClick={[Function]}
-        onContentSizeChange={[Function]}
-        onEnter={[Function]}
         onFocus={[Function]}
-        onHTMLContentWithCursor={[Function]}
-        onKeyDown={[Function]}
-        onPaste={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
-        onSelectionChange={[Function]}
         onStartShouldSetResponder={[Function]}
-        placeholder="Add label…"
-        placeholderTextColor="gray"
-        selectionColor="black"
-        style={
-          {
-            "backgroundColor": undefined,
-            "maxWidth": undefined,
-            "minHeight": 0,
+      >
+        <RCTAztecView
+          activeFormats={[]}
+          blockType={
+            {
+              "tag": "p",
+            }
           }
-        }
-        text={
-          {
-            "eventCount": undefined,
-            "linkTextColor": undefined,
-            "selection": null,
-            "tag": "p",
-            "text": "<p>Search</p>",
+          disableEditingMenu={false}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
+          onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
+          onSelectionChange={[Function]}
+          placeholder="Add label…"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
+            }
           }
-        }
-        triggerKeyCodes={[]}
-      />
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Search</p>",
+            }
+          }
+          triggerKeyCodes={[]}
+        />
+      </View>
     </View>
   </View>
   <View
@@ -144,7 +158,7 @@ exports[`Search Block renders block with button inside option 1`] = `
             ]
           }
         >
-          <RCTAztecView
+          <View
             accessibilityState={
               {
                 "busy": undefined,
@@ -154,59 +168,73 @@ exports[`Search Block renders block with button inside option 1`] = `
                 "selected": undefined,
               }
             }
-            accessible={true}
-            activeFormats={[]}
-            blockType={
+            accessibilityValue={
               {
-                "tag": "p",
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-            disableEditingMenu={false}
+            accessible={false}
+            collapsable={false}
             focusable={true}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            minWidth={75}
-            onBackspace={[Function]}
             onBlur={[Function]}
-            onChange={[Function]}
             onClick={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
             onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}
             onResponderRelease={[Function]}
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
-            onSelectionChange={[Function]}
             onStartShouldSetResponder={[Function]}
-            placeholder=""
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": NaN,
-                "minHeight": 0,
+          >
+            <RCTAztecView
+              activeFormats={[]}
+              blockType={
+                {
+                  "tag": "p",
+                }
               }
-            }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>Search Button</p>",
+              disableEditingMenu={false}
+              fontFamily="serif"
+              fontSize={16}
+              isMultiline={false}
+              maxImagesWidth={200}
+              minWidth={75}
+              onBackspace={[Function]}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onContentSizeChange={[Function]}
+              onEnter={[Function]}
+              onFocus={[Function]}
+              onHTMLContentWithCursor={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelectionChange={[Function]}
+              placeholder=""
+              placeholderTextColor="gray"
+              selectionColor="black"
+              style={
+                {
+                  "backgroundColor": undefined,
+                  "maxWidth": NaN,
+                  "minHeight": 0,
+                }
               }
-            }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
+              text={
+                {
+                  "eventCount": undefined,
+                  "linkTextColor": undefined,
+                  "selection": null,
+                  "tag": "p",
+                  "text": "<p>Search Button</p>",
+                }
+              }
+              textAlign="center"
+              triggerKeyCodes={[]}
+            />
+          </View>
         </View>
       </View>
     </View>
@@ -233,7 +261,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         ]
       }
     >
-      <RCTAztecView
+      <View
         accessibilityState={
           {
             "busy": undefined,
@@ -243,57 +271,71 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             "selected": undefined,
           }
         }
-        accessible={true}
-        activeFormats={[]}
-        blockType={
+        accessibilityValue={
           {
-            "tag": "p",
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
-        disableEditingMenu={false}
+        accessible={false}
+        collapsable={false}
         focusable={true}
-        fontFamily="serif"
-        fontSize={16}
-        isMultiline={false}
-        maxImagesWidth={200}
-        onBackspace={[Function]}
         onBlur={[Function]}
-        onChange={[Function]}
         onClick={[Function]}
-        onContentSizeChange={[Function]}
-        onEnter={[Function]}
         onFocus={[Function]}
-        onHTMLContentWithCursor={[Function]}
-        onKeyDown={[Function]}
-        onPaste={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
-        onSelectionChange={[Function]}
         onStartShouldSetResponder={[Function]}
-        placeholder="Add label…"
-        placeholderTextColor="gray"
-        selectionColor="black"
-        style={
-          {
-            "backgroundColor": undefined,
-            "maxWidth": undefined,
-            "minHeight": 0,
+      >
+        <RCTAztecView
+          activeFormats={[]}
+          blockType={
+            {
+              "tag": "p",
+            }
           }
-        }
-        text={
-          {
-            "eventCount": undefined,
-            "linkTextColor": undefined,
-            "selection": null,
-            "tag": "p",
-            "text": "<p>Search</p>",
+          disableEditingMenu={false}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
+          onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
+          onSelectionChange={[Function]}
+          placeholder="Add label…"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
+            }
           }
-        }
-        triggerKeyCodes={[]}
-      />
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Search</p>",
+            }
+          }
+          triggerKeyCodes={[]}
+        />
+      </View>
     </View>
   </View>
   <View
@@ -428,7 +470,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             ]
           }
         >
-          <RCTAztecView
+          <View
             accessibilityState={
               {
                 "busy": undefined,
@@ -438,59 +480,73 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
                 "selected": undefined,
               }
             }
-            accessible={true}
-            activeFormats={[]}
-            blockType={
+            accessibilityValue={
               {
-                "tag": "p",
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-            disableEditingMenu={false}
+            accessible={false}
+            collapsable={false}
             focusable={true}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            minWidth={75}
-            onBackspace={[Function]}
             onBlur={[Function]}
-            onChange={[Function]}
             onClick={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
             onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}
             onResponderRelease={[Function]}
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
-            onSelectionChange={[Function]}
             onStartShouldSetResponder={[Function]}
-            placeholder=""
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": NaN,
-                "minHeight": 0,
+          >
+            <RCTAztecView
+              activeFormats={[]}
+              blockType={
+                {
+                  "tag": "p",
+                }
               }
-            }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>Search Button</p>",
+              disableEditingMenu={false}
+              fontFamily="serif"
+              fontSize={16}
+              isMultiline={false}
+              maxImagesWidth={200}
+              minWidth={75}
+              onBackspace={[Function]}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onContentSizeChange={[Function]}
+              onEnter={[Function]}
+              onFocus={[Function]}
+              onHTMLContentWithCursor={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelectionChange={[Function]}
+              placeholder=""
+              placeholderTextColor="gray"
+              selectionColor="black"
+              style={
+                {
+                  "backgroundColor": undefined,
+                  "maxWidth": NaN,
+                  "minHeight": 0,
+                }
               }
-            }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
+              text={
+                {
+                  "eventCount": undefined,
+                  "linkTextColor": undefined,
+                  "selection": null,
+                  "tag": "p",
+                  "text": "<p>Search Button</p>",
+                }
+              }
+              textAlign="center"
+              triggerKeyCodes={[]}
+            />
+          </View>
         </View>
       </View>
     </View>
@@ -517,7 +573,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         ]
       }
     >
-      <RCTAztecView
+      <View
         accessibilityState={
           {
             "busy": undefined,
@@ -527,57 +583,71 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             "selected": undefined,
           }
         }
-        accessible={true}
-        activeFormats={[]}
-        blockType={
+        accessibilityValue={
           {
-            "tag": "p",
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
-        disableEditingMenu={false}
+        accessible={false}
+        collapsable={false}
         focusable={true}
-        fontFamily="serif"
-        fontSize={16}
-        isMultiline={false}
-        maxImagesWidth={200}
-        onBackspace={[Function]}
         onBlur={[Function]}
-        onChange={[Function]}
         onClick={[Function]}
-        onContentSizeChange={[Function]}
-        onEnter={[Function]}
         onFocus={[Function]}
-        onHTMLContentWithCursor={[Function]}
-        onKeyDown={[Function]}
-        onPaste={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
-        onSelectionChange={[Function]}
         onStartShouldSetResponder={[Function]}
-        placeholder="Add label…"
-        placeholderTextColor="gray"
-        selectionColor="black"
-        style={
-          {
-            "backgroundColor": undefined,
-            "maxWidth": undefined,
-            "minHeight": 0,
+      >
+        <RCTAztecView
+          activeFormats={[]}
+          blockType={
+            {
+              "tag": "p",
+            }
           }
-        }
-        text={
-          {
-            "eventCount": undefined,
-            "linkTextColor": undefined,
-            "selection": null,
-            "tag": "p",
-            "text": "<p>Search</p>",
+          disableEditingMenu={false}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
+          onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
+          onSelectionChange={[Function]}
+          placeholder="Add label…"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
+            }
           }
-        }
-        triggerKeyCodes={[]}
-      />
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Search</p>",
+            }
+          }
+          triggerKeyCodes={[]}
+        />
+      </View>
     </View>
   </View>
   <View
@@ -642,7 +712,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             ]
           }
         >
-          <RCTAztecView
+          <View
             accessibilityState={
               {
                 "busy": undefined,
@@ -652,59 +722,73 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
                 "selected": undefined,
               }
             }
-            accessible={true}
-            activeFormats={[]}
-            blockType={
+            accessibilityValue={
               {
-                "tag": "p",
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-            disableEditingMenu={false}
+            accessible={false}
+            collapsable={false}
             focusable={true}
-            fontFamily="serif"
-            fontSize={16}
-            isMultiline={false}
-            maxImagesWidth={200}
-            minWidth={75}
-            onBackspace={[Function]}
             onBlur={[Function]}
-            onChange={[Function]}
             onClick={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
             onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
             onResponderGrant={[Function]}
             onResponderMove={[Function]}
             onResponderRelease={[Function]}
             onResponderTerminate={[Function]}
             onResponderTerminationRequest={[Function]}
-            onSelectionChange={[Function]}
             onStartShouldSetResponder={[Function]}
-            placeholder=""
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": NaN,
-                "minHeight": 0,
+          >
+            <RCTAztecView
+              activeFormats={[]}
+              blockType={
+                {
+                  "tag": "p",
+                }
               }
-            }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "<p>Search Button</p>",
+              disableEditingMenu={false}
+              fontFamily="serif"
+              fontSize={16}
+              isMultiline={false}
+              maxImagesWidth={200}
+              minWidth={75}
+              onBackspace={[Function]}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onContentSizeChange={[Function]}
+              onEnter={[Function]}
+              onFocus={[Function]}
+              onHTMLContentWithCursor={[Function]}
+              onKeyDown={[Function]}
+              onPaste={[Function]}
+              onSelectionChange={[Function]}
+              placeholder=""
+              placeholderTextColor="gray"
+              selectionColor="black"
+              style={
+                {
+                  "backgroundColor": undefined,
+                  "maxWidth": NaN,
+                  "minHeight": 0,
+                }
               }
-            }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
+              text={
+                {
+                  "eventCount": undefined,
+                  "linkTextColor": undefined,
+                  "selection": null,
+                  "tag": "p",
+                  "text": "<p>Search Button</p>",
+                }
+              }
+              textAlign="center"
+              triggerKeyCodes={[]}
+            />
+          </View>
         </View>
       </View>
     </View>
@@ -731,7 +815,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
         ]
       }
     >
-      <RCTAztecView
+      <View
         accessibilityState={
           {
             "busy": undefined,
@@ -741,57 +825,71 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
             "selected": undefined,
           }
         }
-        accessible={true}
-        activeFormats={[]}
-        blockType={
+        accessibilityValue={
           {
-            "tag": "p",
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
           }
         }
-        disableEditingMenu={false}
+        accessible={false}
+        collapsable={false}
         focusable={true}
-        fontFamily="serif"
-        fontSize={16}
-        isMultiline={false}
-        maxImagesWidth={200}
-        onBackspace={[Function]}
         onBlur={[Function]}
-        onChange={[Function]}
         onClick={[Function]}
-        onContentSizeChange={[Function]}
-        onEnter={[Function]}
         onFocus={[Function]}
-        onHTMLContentWithCursor={[Function]}
-        onKeyDown={[Function]}
-        onPaste={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
-        onSelectionChange={[Function]}
         onStartShouldSetResponder={[Function]}
-        placeholder="Add label…"
-        placeholderTextColor="gray"
-        selectionColor="black"
-        style={
-          {
-            "backgroundColor": undefined,
-            "maxWidth": undefined,
-            "minHeight": 0,
+      >
+        <RCTAztecView
+          activeFormats={[]}
+          blockType={
+            {
+              "tag": "p",
+            }
           }
-        }
-        text={
-          {
-            "eventCount": undefined,
-            "linkTextColor": undefined,
-            "selection": null,
-            "tag": "p",
-            "text": "<p>Search</p>",
+          disableEditingMenu={false}
+          fontFamily="serif"
+          fontSize={16}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
+          onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
+          onSelectionChange={[Function]}
+          placeholder="Add label…"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
+            }
           }
-        }
-        triggerKeyCodes={[]}
-      />
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "<p>Search</p>",
+            }
+          }
+          triggerKeyCodes={[]}
+        />
+      </View>
     </View>
   </View>
   <View
diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss
index 2fae735f369b5..ca9c92539b676 100644
--- a/packages/block-library/src/site-logo/style.scss
+++ b/packages/block-library/src/site-logo/style.scss
@@ -5,6 +5,7 @@
 
 	a {
 		display: inline-block;
+		line-height: 0;
 	}
 
 	// Provide a sane starting point for the size.
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 4df947ea72270..c9f5002b2219a 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -106,15 +106,7 @@ export const getSupportedStyles = createSelector(
 
 		// Check for blockGap support.
 		// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
-		// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
-		if (
-			blockType?.supports?.spacing?.blockGap &&
-			blockType?.supports?.spacing?.__experimentalSkipSerialization !==
-				true &&
-			! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
-				( spacingType ) => spacingType === 'blockGap'
-			)
-		) {
+		if ( blockType?.supports?.spacing?.blockGap ) {
 			supportKeys.push( 'blockGap' );
 		}
 
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 3b9682c4adf4c..4017491e46de6 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,10 +2,21 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   Make the `Popover.Slot` optional and render popovers at the bottom of the document's body by default. ([#53889](https://github.com/WordPress/gutenberg/pull/53889)).
+-   `ProgressBar`: Add transition to determinate indicator ([#53877](https://github.com/WordPress/gutenberg/pull/53877)).
+-   Prevent nested `SlotFillProvider` from rendering ([#53940](https://github.com/WordPress/gutenberg/pull/53940)).
+
 ### Bug Fix
 
 -   `SandBox`: Fix the cleanup method in useEffect ([#53796](https://github.com/WordPress/gutenberg/pull/53796)).
 
+### Internal
+
+-   `Shortcut`: Add Storybook stories ([#53627](https://github.com/WordPress/gutenberg/pull/53627)).
+-   `SlotFill`: Do not render children when using `<Slot bubblesVirtually />`. ([#53272](https://github.com/WordPress/gutenberg/pull/53272))
+
 ## 25.6.0 (2023-08-16)
 
 ### Enhancements
@@ -29,6 +40,7 @@
 
 -   `ControlGroup`, `FormGroup`, `ControlLabel`, `Spinner`: Remove unused `ui/` components from the codebase ([#52953](https://github.com/WordPress/gutenberg/pull/52953)).
 -   `MenuItem`: Convert to TypeScript ([#53132](https://github.com/WordPress/gutenberg/pull/53132)).
+-   `MenuItem`: Add Storybook stories ([#53613](https://github.com/WordPress/gutenberg/pull/53613)).
 -   `MenuGroup`: Add Storybook stories ([#53090](https://github.com/WordPress/gutenberg/pull/53090)).
 -   Components: Remove unnecessary utils ([#53679](https://github.com/WordPress/gutenberg/pull/53679)).
 
@@ -42,7 +54,6 @@
 
 -   `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)).
 -   `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)).
--   `TabPanel`: Introduce a new version of `TabPanel` with updated internals and improved adherence to ARIA guidance on `tabpanel` focus behavior while maintaining the same functionality and API surface.([#52133](https://github.com/WordPress/gutenberg/pull/52133)).
 
 ### Bug Fix
 
diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index aa3dee7ecff55..5a94194fa6358 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -619,7 +619,7 @@ Given a component folder (e.g. `packages/components/src/unit-control`):
 	3. Rewrite the `meta` story object, and export it as default. In particular, make sure you add the following settings under the `parameters` key:
 
 		```tsx
-		const meta: ComponentMeta< typeof MyComponent > = {
+		const meta: Meta< typeof MyComponent > = {
 			parameters: {
 				controls: { expanded: true },
 				docs: { canvas: { sourceState: 'shown' } },
diff --git a/packages/components/README.md b/packages/components/README.md
index 9274139f85121..f324cb48c66d7 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -33,14 +33,9 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it
 
 _If you're using [`Popover`](/packages/components/src/popover/README.md) or [`Tooltip`](/packages/components/src/tooltip/README.md) components outside of the editor, make sure they are rendered within a `SlotFillProvider` and with a `Popover.Slot` somewhere up the element tree._
 
-By default, the `Popover` component will render inline i.e. within its
-parent to which it should anchor. Depending upon the context in which the
-`Popover` is being consumed, this might lead to incorrect positioning. For
-example, when being nested within another popover.
-
-This issue can be solved by rendering popovers to a specific location in the DOM via the
-`Popover.Slot`. For this to work, you will need your use of the `Popover`
-component and its `Slot` to be wrapped in a [`SlotFill`](/packages/components/src/slot-fill/README.md) provider.
+By default, the `Popover` component will render within an extra element appended to the body of the document.
+
+If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
 
 A `Popover` is also used as the underlying mechanism to display `Tooltip` components.
 So the same considerations should be applied to them.
diff --git a/packages/components/src/alignment-matrix-control/stories/index.story.tsx b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
index 1ed93cb647d73..24b496d1f2432 100644
--- a/packages/components/src/alignment-matrix-control/stories/index.story.tsx
+++ b/packages/components/src/alignment-matrix-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,13 @@ import AlignmentMatrixControl from '..';
 import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
-const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
+const meta: Meta< typeof AlignmentMatrixControl > = {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
 	argTypes: {
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -30,7 +34,7 @@ const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof AlignmentMatrixControl > = ( {
+const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	defaultValue,
 	onChange,
 	...props
diff --git a/packages/components/src/angle-picker-control/stories/index.story.tsx b/packages/components/src/angle-picker-control/stories/index.story.tsx
index 1550e158b6c8a..d10403a436bfc 100644
--- a/packages/components/src/angle-picker-control/stories/index.story.tsx
+++ b/packages/components/src/angle-picker-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { AnglePickerControl } from '..';
 
-const meta: ComponentMeta< typeof AnglePickerControl > = {
+const meta: Meta< typeof AnglePickerControl > = {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof AnglePickerControl > = {
 
 export default meta;
 
-const AnglePickerWithState: ComponentStory< typeof AnglePickerControl > = ( {
+const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
 	onChange,
 	...args
 } ) => {
diff --git a/packages/components/src/animate/stories/index.story.tsx b/packages/components/src/animate/stories/index.story.tsx
index 267f34ed7b15f..be076b4e6976c 100644
--- a/packages/components/src/animate/stories/index.story.tsx
+++ b/packages/components/src/animate/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, Story } from '@storybook/react';
 import { Animate } from '..';
 import Notice from '../../notice';
 
-const meta: ComponentMeta< typeof Animate > = {
+const meta: Meta< typeof Animate > = {
 	title: 'Components/Animate',
 	component: Animate,
 	parameters: {
@@ -19,9 +19,11 @@ const meta: ComponentMeta< typeof Animate > = {
 };
 export default meta;
 
-const Template: Story< typeof Animate > = ( props ) => <Animate { ...props } />;
+const Template: StoryFn< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
 
-export const Default: Story< typeof Animate > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
@@ -30,7 +32,7 @@ Default.args = {
 	),
 };
 
-export const AppearTopLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopLeft = Template.bind( {} );
 AppearTopLeft.args = {
 	type: 'appear',
 	options: { origin: 'top left' },
@@ -40,7 +42,7 @@ AppearTopLeft.args = {
 		</Notice>
 	),
 };
-export const AppearTopRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopRight = Template.bind( {} );
 AppearTopRight.args = {
 	type: 'appear',
 	options: { origin: 'top right' },
@@ -50,7 +52,7 @@ AppearTopRight.args = {
 		</Notice>
 	),
 };
-export const AppearBottomLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomLeft = Template.bind( {} );
 AppearBottomLeft.args = {
 	type: 'appear',
 	options: { origin: 'bottom left' },
@@ -60,7 +62,7 @@ AppearBottomLeft.args = {
 		</Notice>
 	),
 };
-export const AppearBottomRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomRight = Template.bind( {} );
 AppearBottomRight.args = {
 	type: 'appear',
 	options: { origin: 'bottom right' },
@@ -71,7 +73,7 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading: Story< typeof Animate > = Template.bind( {} );
+export const Loading = Template.bind( {} );
 Loading.args = {
 	type: 'loading',
 	children: ( { className } ) => (
@@ -81,7 +83,7 @@ Loading.args = {
 	),
 };
 
-export const SlideIn: Story< typeof Animate > = Template.bind( {} );
+export const SlideIn = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',
 	options: { origin: 'left' },
diff --git a/packages/components/src/base-control/stories/index.story.tsx b/packages/components/src/base-control/stories/index.story.tsx
index f3ad5bf8d6722..3b6e228bd4fc8 100644
--- a/packages/components/src/base-control/stories/index.story.tsx
+++ b/packages/components/src/base-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof BaseControl > = {
+const meta: Meta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	argTypes: {
@@ -24,9 +24,7 @@ const meta: ComponentMeta< typeof BaseControl > = {
 };
 export default meta;
 
-const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
@@ -36,7 +34,7 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
 	);
 };
 
-export const Default: ComponentStory< typeof BaseControl > =
+export const Default: StoryFn< typeof BaseControl > =
 	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -56,9 +54,7 @@ WithHelpText.args = {
  * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
  * otherwise use if the `label` prop was passed.
  */
-export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
 	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 
diff --git a/packages/components/src/border-box-control/stories/index.story.tsx b/packages/components/src/border-box-control/stories/index.story.tsx
index b76a86e455700..5b5d7f311208c 100644
--- a/packages/components/src/border-box-control/stories/index.story.tsx
+++ b/packages/components/src/border-box-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import Popover from '../../popover';
 import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof BorderBoxControl > = {
+const meta: Meta< typeof BorderBoxControl > = {
 	title: 'Components (Experimental)/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
@@ -41,7 +39,7 @@ const colors = [
 	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
-const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
 	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
@@ -53,7 +51,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	};
 
 	return (
-		<SlotFillProvider>
+		<>
 			<BorderBoxControl
 				{ ...otherProps }
 				onChange={ onChangeMerged }
@@ -78,9 +76,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 			>
 				Reset
 			</Button>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		</>
 	);
 };
 export const Default = Template.bind( {} );
diff --git a/packages/components/src/border-control/stories/index.story.tsx b/packages/components/src/border-control/stories/index.story.tsx
index 6dbee9f98299c..9a5349d302c27 100644
--- a/packages/components/src/border-control/stories/index.story.tsx
+++ b/packages/components/src/border-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { BorderControl } from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
 import type { Border } from '../types';
 
-const meta: ComponentMeta< typeof BorderControl > = {
+const meta: Meta< typeof BorderControl > = {
 	title: 'Components (Experimental)/BorderControl',
 	component: BorderControl,
 	argTypes: {
@@ -70,7 +68,7 @@ const multipleOriginColors = [
 	},
 ];
 
-const Template: ComponentStory< typeof BorderControl > = ( {
+const Template: StoryFn< typeof BorderControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -83,15 +81,11 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 	};
 
 	return (
-		<SlotFillProvider>
-			<BorderControl
-				onChange={ onChangeMerged }
-				value={ border }
-				{ ...props }
-			/>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<BorderControl
+			onChange={ onChangeMerged }
+			value={ border }
+			{ ...props }
+		/>
 	);
 };
 
diff --git a/packages/components/src/button-group/stories/index.story.tsx b/packages/components/src/button-group/stories/index.story.tsx
index 3ad0a34582545..958a0d137763e 100644
--- a/packages/components/src/button-group/stories/index.story.tsx
+++ b/packages/components/src/button-group/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import ButtonGroup from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof ButtonGroup > = {
+const meta: Meta< typeof ButtonGroup > = {
 	title: 'Components/ButtonGroup',
 	component: ButtonGroup,
 	argTypes: {
@@ -22,7 +22,7 @@ const meta: ComponentMeta< typeof ButtonGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
+const Template: StoryFn< typeof ButtonGroup > = ( args ) => {
 	const style = { margin: '0 4px' };
 	return (
 		<ButtonGroup { ...args }>
@@ -36,6 +36,4 @@ const Template: ComponentStory< typeof ButtonGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ButtonGroup > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ButtonGroup > = Template.bind( {} );
diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx
index 24418fb12e5eb..c2ec8e237d3b2 100644
--- a/packages/components/src/button/stories/e2e/index.story.tsx
+++ b/packages/components/src/button/stories/e2e/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Story, Meta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-export const VariantStates: Story< typeof Button > = (
+export const VariantStates: StoryFn< typeof Button > = (
 	props: ButtonAsButtonProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
@@ -57,7 +57,7 @@ Icon.args = {
 	icon: wordpress,
 };
 
-export const Dashicons: Story< typeof Button > = ( props ) => {
+export const Dashicons: StoryFn< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
 			<Button { ...props } />
diff --git a/packages/components/src/button/stories/index.story.tsx b/packages/components/src/button/stories/index.story.tsx
index 5752d97ba8a17..a1dadab081d8a 100644
--- a/packages/components/src/button/stories/index.story.tsx
+++ b/packages/components/src/button/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -44,52 +44,52 @@ const meta: Meta< typeof Button > = {
 };
 export default meta;
 
-const Template: Story< typeof Button > = ( props ) => {
+const Template: StoryFn< typeof Button > = ( props ) => {
 	return <Button { ...props }></Button>;
 };
 
-export const Default: Story< typeof Button > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary: Story< typeof Button > = Template.bind( {} );
+export const Primary = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary: Story< typeof Button > = Template.bind( {} );
+export const Secondary = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary: Story< typeof Button > = Template.bind( {} );
+export const Tertiary = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link: Story< typeof Button > = Template.bind( {} );
+export const Link = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive: Story< typeof Button > = Template.bind( {} );
+export const IsDestructive = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon: Story< typeof Button > = Template.bind( {} );
+export const Icon = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const GroupedIcons: Story< typeof Button > = () => {
+export const GroupedIcons = () => {
 	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);
diff --git a/packages/components/src/card/stories/index.story.tsx b/packages/components/src/card/stories/index.story.tsx
index 43f00143eccbe..8a20d82b318e3 100644
--- a/packages/components/src/card/stories/index.story.tsx
+++ b/packages/components/src/card/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -18,8 +18,10 @@ import { Text } from '../../text';
 import { Heading } from '../../heading';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof Card > = {
+const meta: Meta< typeof Card > = {
 	component: Card,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	title: 'Components/Card',
 	argTypes: {
 		as: {
@@ -39,9 +41,7 @@ const meta: ComponentMeta< typeof Card > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof Card > = ( args ) => (
-	<Card { ...args } />
-);
+const Template: StoryFn< typeof Card > = ( args ) => <Card { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
diff --git a/packages/components/src/checkbox-control/stories/index.story.tsx b/packages/components/src/checkbox-control/stories/index.story.tsx
index 2afcb967c67b4..ce55cfb655a17 100644
--- a/packages/components/src/checkbox-control/stories/index.story.tsx
+++ b/packages/components/src/checkbox-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CheckboxControl from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof CheckboxControl > = {
+const meta: Meta< typeof CheckboxControl > = {
 	component: CheckboxControl,
 	title: 'Components/CheckboxControl',
 	argTypes: {
@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof CheckboxControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
+const DefaultTemplate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -54,14 +54,15 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof CheckboxControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof CheckboxControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',
 };
 
-export const Indeterminate: ComponentStory< typeof CheckboxControl > = ( {
+export const Indeterminate: StoryFn< typeof CheckboxControl > = ( {
 	onChange,
 	...args
 } ) => {
diff --git a/packages/components/src/circular-option-picker/stories/index.story.tsx b/packages/components/src/circular-option-picker/stories/index.story.tsx
index 69f13f17cb560..4ad346b93cf5c 100644
--- a/packages/components/src/circular-option-picker/stories/index.story.tsx
+++ b/packages/components/src/circular-option-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -9,16 +9,28 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { default as CircularOptionPicker } from '..';
+import {
+	ButtonAction,
+	default as CircularOptionPicker,
+	DropdownLinkAction,
+} from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
 	setCurrentColor?: ( v: string | undefined ) => void;
 } >( {} );
 
-const meta: ComponentMeta< typeof CircularOptionPicker > = {
+const meta: Meta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.Option': Option,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.ButtonAction': ButtonAction,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
+	},
 	argTypes: {
 		actions: { control: { type: null } },
 		options: { control: { type: null } },
@@ -95,7 +107,7 @@ const DefaultActions = () => {
 	);
 };
 
-const Template: ComponentStory< typeof CircularOptionPicker > = ( props ) => (
+const Template: StoryFn< typeof CircularOptionPicker > = ( props ) => (
 	<CircularOptionPicker { ...props } />
 );
 
diff --git a/packages/components/src/color-indicator/stories/index.story.tsx b/packages/components/src/color-indicator/stories/index.story.tsx
index f6af185f71206..8a2557f30659e 100644
--- a/packages/components/src/color-indicator/stories/index.story.tsx
+++ b/packages/components/src/color-indicator/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ColorIndicator from '..';
 
-const meta: ComponentMeta< typeof ColorIndicator > = {
+const meta: Meta< typeof ColorIndicator > = {
 	component: ColorIndicator,
 	title: 'Components/ColorIndicator',
 	argTypes: {
@@ -25,13 +25,11 @@ const meta: ComponentMeta< typeof ColorIndicator > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+const Template: StoryFn< typeof ColorIndicator > = ( { ...args } ) => (
 	<ColorIndicator { ...args } />
 );
 
-export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ColorIndicator > = Template.bind( {} );
 Default.args = {
 	colorValue: '#0073aa',
 };
diff --git a/packages/components/src/color-palette/stories/index.story.tsx b/packages/components/src/color-palette/stories/index.story.tsx
index 4f57ffabdea68..9ef253dea4fa3 100644
--- a/packages/components/src/color-palette/stories/index.story.tsx
+++ b/packages/components/src/color-palette/stories/index.story.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,10 +13,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import ColorPalette from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ColorPalette > = {
+const meta: Meta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
@@ -31,25 +29,18 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorPalette > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof ColorPalette > = ( { onChange, ...args } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
-		<SlotFillProvider>
-			<ColorPalette
-				{ ...args }
-				value={ color }
-				onChange={ ( newColor ) => {
-					setColor( newColor );
-					onChange?.( newColor );
-				} }
-			/>
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<ColorPalette
+			{ ...args }
+			value={ color }
+			onChange={ ( newColor ) => {
+				setColor( newColor );
+				onChange?.( newColor );
+			} }
+		/>
 	);
 };
 
@@ -84,7 +75,7 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
+export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
 			style={
diff --git a/packages/components/src/color-picker/stories/index.story.tsx b/packages/components/src/color-picker/stories/index.story.tsx
index 0cc0181b8f5de..81500c1558822 100644
--- a/packages/components/src/color-picker/stories/index.story.tsx
+++ b/packages/components/src/color-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { ColorPicker } from '../component';
 
-const meta: ComponentMeta< typeof ColorPicker > = {
+const meta: Meta< typeof ColorPicker > = {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
 	argTypes: {
@@ -30,7 +30,7 @@ const meta: ComponentMeta< typeof ColorPicker > = {
 };
 export default meta;
 
-const Template: Story< typeof ColorPicker > = ( { onChange, ...props } ) => {
+const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (
diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index 5b88624209531..9c0e5455ebc06 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -22,7 +22,7 @@ const countries = [
 	{ name: 'American Samoa', code: 'AS' },
 ];
 
-const meta: ComponentMeta< typeof ComboboxControl > = {
+const meta: Meta< typeof ComboboxControl > = {
 	title: 'Components/ComboboxControl',
 	component: ComboboxControl,
 	argTypes: {
@@ -43,7 +43,7 @@ const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-const Template: ComponentStory< typeof ComboboxControl > = ( {
+const Template: StoryFn< typeof ComboboxControl > = ( {
 	onChange,
 	...args
 } ) => {
diff --git a/packages/components/src/custom-gradient-picker/stories/index.story.tsx b/packages/components/src/custom-gradient-picker/stories/index.story.tsx
index f902d34c0bd92..6d19157238d28 100644
--- a/packages/components/src/custom-gradient-picker/stories/index.story.tsx
+++ b/packages/components/src/custom-gradient-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import CustomGradientPicker from '../';
 
-const meta: ComponentMeta< typeof CustomGradientPicker > = {
+const meta: Meta< typeof CustomGradientPicker > = {
 	title: 'Components/CustomGradientPicker',
 	component: CustomGradientPicker,
 	parameters: {
@@ -23,7 +23,7 @@ const meta: ComponentMeta< typeof CustomGradientPicker > = {
 };
 export default meta;
 
-const CustomGradientPickerWithState: ComponentStory<
+const CustomGradientPickerWithState: StoryFn<
 	typeof CustomGradientPicker
 > = ( { onChange, ...props } ) => {
 	const [ gradient, setGradient ] = useState< string >();
diff --git a/packages/components/src/date-time/stories/date-time.story.tsx b/packages/components/src/date-time/stories/date-time.story.tsx
index 600a419e9d6a1..86a627bbec35e 100644
--- a/packages/components/src/date-time/stories/date-time.story.tsx
+++ b/packages/components/src/date-time/stories/date-time.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState, useEffect } from '@wordpress/element';
 import DateTimePicker from '../date-time';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DateTimePicker > = {
+const meta: Meta< typeof DateTimePicker > = {
 	title: 'Components/DateTimePicker',
 	component: DateTimePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DateTimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DateTimePicker > = ( {
+const Template: StoryFn< typeof DateTimePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,12 +49,9 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithEvents: StoryFn< typeof DateTimePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -65,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DateTimePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,
diff --git a/packages/components/src/date-time/stories/date.story.tsx b/packages/components/src/date-time/stories/date.story.tsx
index 8bde0bda4859c..8d1513d014c8c 100644
--- a/packages/components/src/date-time/stories/date.story.tsx
+++ b/packages/components/src/date-time/stories/date.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState, useEffect } from '@wordpress/element';
 import DatePicker from '../date';
 import { daysFromNow, isWeekend } from './utils';
 
-const meta: ComponentMeta< typeof DatePicker > = {
+const meta: Meta< typeof DatePicker > = {
 	title: 'Components/DatePicker',
 	component: DatePicker,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof DatePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DatePicker > = ( {
+const Template: StoryFn< typeof DatePicker > = ( {
 	currentDate,
 	onChange,
 	...args
@@ -49,11 +49,9 @@ const Template: ComponentStory< typeof DatePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof DatePicker > = Template.bind( {} );
 
-export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
-	{}
-);
+export const WithEvents: StoryFn< typeof DatePicker > = Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -64,8 +62,9 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory< typeof DatePicker > =
-	Template.bind( {} );
+export const WithInvalidDates: StoryFn< typeof DatePicker > = Template.bind(
+	{}
+);
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,
diff --git a/packages/components/src/date-time/stories/time.story.tsx b/packages/components/src/date-time/stories/time.story.tsx
index 4ad40626b73af..c48b8fb1d1592 100644
--- a/packages/components/src/date-time/stories/time.story.tsx
+++ b/packages/components/src/date-time/stories/time.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import TimePicker from '../time';
 
-const meta: ComponentMeta< typeof TimePicker > = {
+const meta: Meta< typeof TimePicker > = {
 	title: 'Components/TimePicker',
 	component: TimePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof TimePicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TimePicker > = ( {
+const Template: StoryFn< typeof TimePicker > = ( {
 	currentTime,
 	onChange,
 	...args
@@ -48,4 +48,4 @@ const Template: ComponentStory< typeof TimePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );
+export const Default: StoryFn< typeof TimePicker > = Template.bind( {} );
diff --git a/packages/components/src/dimension-control/stories/index.story.tsx b/packages/components/src/dimension-control/stories/index.story.tsx
index 0abb5b815429d..0698125c446ca 100644
--- a/packages/components/src/dimension-control/stories/index.story.tsx
+++ b/packages/components/src/dimension-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -34,9 +34,9 @@ export default {
 			docs: { canvas: { sourceState: 'shown' } },
 		},
 	},
-} as ComponentMeta< typeof DimensionControl >;
+} as Meta< typeof DimensionControl >;
 
-const Template: ComponentStory< typeof DimensionControl > = ( args ) => (
+const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />
 );
 
diff --git a/packages/components/src/disabled/stories/index.story.tsx b/packages/components/src/disabled/stories/index.story.tsx
index 40260fe106643..b5da6ccedddc0 100644
--- a/packages/components/src/disabled/stories/index.story.tsx
+++ b/packages/components/src/disabled/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
 import { VStack } from '../../v-stack/';
 
-const meta: ComponentMeta< typeof Disabled > = {
+const meta: Meta< typeof Disabled > = {
 	title: 'Components/Disabled',
 	component: Disabled,
 	argTypes: {
@@ -66,7 +66,7 @@ const Form = () => {
 	);
 };
 
-export const Default: ComponentStory< typeof Disabled > = ( args ) => {
+export const Default: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<Form />
@@ -77,7 +77,7 @@ Default.args = {
 	isDisabled: true,
 };
 
-export const ContentEditable: ComponentStory< typeof Disabled > = ( args ) => {
+export const ContentEditable: StoryFn< typeof Disabled > = ( args ) => {
 	return (
 		<Disabled { ...args }>
 			<div contentEditable tabIndex={ 0 }>
diff --git a/packages/components/src/divider/stories/index.story.tsx b/packages/components/src/divider/stories/index.story.tsx
index b1776e1f67fc2..d60a43164506b 100644
--- a/packages/components/src/divider/stories/index.story.tsx
+++ b/packages/components/src/divider/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { Text } from '../../text';
 import { Divider } from '..';
 import { Flex } from '../../flex';
 
-const meta: ComponentMeta< typeof Divider > = {
+const meta: Meta< typeof Divider > = {
 	component: Divider,
 	title: 'Components (Experimental)/Divider',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Divider > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Divider > = ( args ) => (
+const Template: StoryFn< typeof Divider > = ( args ) => (
 	<div>
 		<Text>Some text before the divider</Text>
 		<Divider { ...args } />
@@ -39,19 +39,19 @@ const Template: ComponentStory< typeof Divider > = ( args ) => (
 	</div>
 );
 
-export const Horizontal: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Horizontal: StoryFn< typeof Divider > = Template.bind( {} );
 Horizontal.args = {
 	margin: '2',
 };
 
-export const Vertical: ComponentStory< typeof Divider > = Template.bind( {} );
+export const Vertical: StoryFn< typeof Divider > = Template.bind( {} );
 Vertical.args = {
 	...Horizontal.args,
 	orientation: 'vertical',
 };
 
 // Inside a `flex` container, the divider will need to be `stretch` aligned in order to be visible.
-export const InFlexContainer: ComponentStory< typeof Divider > = ( args ) => {
+export const InFlexContainer: StoryFn< typeof Divider > = ( args ) => {
 	return (
 		<Flex align="stretch">
 			<Text>
diff --git a/packages/components/src/draggable/stories/index.story.tsx b/packages/components/src/draggable/stories/index.story.tsx
index ad94802feb93a..fc48618b1083a 100644
--- a/packages/components/src/draggable/stories/index.story.tsx
+++ b/packages/components/src/draggable/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { DragEvent } from 'react';
 
 /**
@@ -16,7 +16,7 @@ import { Icon, more } from '@wordpress/icons';
  */
 import Draggable from '..';
 
-const meta: ComponentMeta< typeof Draggable > = {
+const meta: Meta< typeof Draggable > = {
 	component: Draggable,
 	title: 'Components/Draggable',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof Draggable > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
+const DefaultTemplate: StoryFn< typeof Draggable > = ( args ) => {
 	const [ isDragging, setDragging ] = useState( false );
 	const instanceId = useInstanceId( DefaultTemplate );
 
@@ -100,9 +100,7 @@ const DefaultTemplate: ComponentStory< typeof Draggable > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Draggable > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Draggable > = DefaultTemplate.bind( {} );
 Default.args = {};
 
 /**
@@ -112,7 +110,7 @@ Default.args = {};
  * For example, when the element's parent sets a `z-index` value that would cause the dragged
  * element to be rendered behind other elements.
  */
-export const AppendElementToOwnerDocument: ComponentStory< typeof Draggable > =
+export const AppendElementToOwnerDocument: StoryFn< typeof Draggable > =
 	DefaultTemplate.bind( {} );
 AppendElementToOwnerDocument.args = {
 	appendToOwnerDocument: true,
diff --git a/packages/components/src/drop-zone/stories/index.story.tsx b/packages/components/src/drop-zone/stories/index.story.tsx
index 6470b77e41c9f..1ee9af5b851eb 100644
--- a/packages/components/src/drop-zone/stories/index.story.tsx
+++ b/packages/components/src/drop-zone/stories/index.story.tsx
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import DropZone from '..';
 
-const meta: ComponentMeta< typeof DropZone > = {
+const meta: Meta< typeof DropZone > = {
 	component: DropZone,
 	title: 'Components/DropZone',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof DropZone > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DropZone > = ( props ) => {
+const Template: StoryFn< typeof DropZone > = ( props ) => {
 	return (
 		<div style={ { background: 'lightgray', padding: 16 } }>
 			Drop something here
diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
index 4182285d60054..78aee12bf1f93 100644
--- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 
 /**
@@ -21,8 +21,6 @@ import {
 	DropdownSubMenuTrigger,
 } from '..';
 import Button from '../../button';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -39,6 +37,26 @@ import { ContextSystemProvider } from '../../ui/context';
 const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
 	component: DropdownMenu,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownSubMenu,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownSubMenuTrigger,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuSeparator,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuCheckboxItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuLabel,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuRadioGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		DropdownMenuRadioItem,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
@@ -122,12 +140,8 @@ const RadioItemsGroup = () => {
 	);
 };
 
-const Template: Story< typeof DropdownMenu > = ( props ) => (
-	<SlotFillProvider>
-		<DropdownMenu { ...props } />
-		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
-		<Popover.Slot />
-	</SlotFillProvider>
+const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
+	<DropdownMenu { ...props } />
 );
 export const Default = Template.bind( {} );
 Default.args = {
@@ -197,7 +211,7 @@ const toolbarVariantContextValue = {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: Story< typeof DropdownMenu > = ( props ) => (
+export const ToolbarVariant: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenu { ...props } />
 	</ContextSystemProvider>
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index 5b9bb9bcfa0c8..0490636cfa206 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -21,7 +21,7 @@ import {
 	trash,
 } from '@wordpress/icons';
 
-const meta: ComponentMeta< typeof DropdownMenu > = {
+const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	parameters: {
@@ -38,7 +38,7 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const Template: Story< typeof DropdownMenu > = ( props ) => (
+const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
 	<div style={ { height: 150 } }>
 		<DropdownMenu { ...props } />
 	</div>
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index 3ef9465d606bc..0b29da916b8d8 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,11 @@ import Dropdown from '..';
 import Button from '../../button';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
-const meta: ComponentMeta< typeof Dropdown > = {
+const meta: Meta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { DropdownContentWrapper },
 	argTypes: {
 		focusOnMount: {
 			options: [ 'firstElement', true, false ],
@@ -32,7 +34,7 @@ const meta: ComponentMeta< typeof Dropdown > = {
 };
 export default meta;
 
-const Template: Story< typeof Dropdown > = ( args ) => {
+const Template: StoryFn< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -40,7 +42,7 @@ const Template: Story< typeof Dropdown > = ( args ) => {
 	);
 };
 
-export const Default: Story< typeof Dropdown > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	renderToggle: ( { isOpen, onToggle } ) => (
 		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
@@ -54,7 +56,7 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding: Story< typeof Dropdown > = Template.bind( {} );
+export const WithMorePadding = Template.bind( {} );
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -69,7 +71,7 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding: Story< typeof Dropdown > = Template.bind( {} );
+export const WithNoPadding = Template.bind( {} );
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (
diff --git a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
index 862edae9ee946..f06d0ee40a6ce 100644
--- a/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
+++ b/packages/components/src/duotone-picker/stories/duotone-picker.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import { DuotonePicker } from '..';
 import type { DuotonePickerProps } from '../types';
 
-const meta: ComponentMeta< typeof DuotonePicker > = {
+const meta: Meta< typeof DuotonePicker > = {
 	title: 'Components/DuotonePicker',
 	component: DuotonePicker,
 	argTypes: {
@@ -48,10 +48,7 @@ const COLOR_PALETTE = [
 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
 ];
 
-const Template: ComponentStory< typeof DuotonePicker > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof DuotonePicker > = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState< DuotonePickerProps[ 'value' ] >();
 
 	return (
diff --git a/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
index 7f37b60360376..edcca5114d026 100644
--- a/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
+++ b/packages/components/src/duotone-picker/stories/duotone-swatch.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { DuotoneSwatch } from '..';
 
-const meta: ComponentMeta< typeof DuotoneSwatch > = {
+const meta: Meta< typeof DuotoneSwatch > = {
 	title: 'Components/DuotoneSwatch',
 	component: DuotoneSwatch,
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof DuotoneSwatch > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof DuotoneSwatch > = ( args ) => {
+const Template: StoryFn< typeof DuotoneSwatch > = ( args ) => {
 	return <DuotoneSwatch { ...args } />;
 };
 
diff --git a/packages/components/src/elevation/stories/index.story.tsx b/packages/components/src/elevation/stories/index.story.tsx
index f5b79a90dfa8c..912268f534114 100644
--- a/packages/components/src/elevation/stories/index.story.tsx
+++ b/packages/components/src/elevation/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Elevation } from '..';
 
-const meta: ComponentMeta< typeof Elevation > = {
+const meta: Meta< typeof Elevation > = {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof Elevation > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Elevation > = ( args ) => {
+const Template: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -38,7 +38,7 @@ const Template: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
+const InteractiveTemplate: StoryFn< typeof Elevation > = ( args ) => {
 	return (
 		<button
 			style={ {
@@ -55,7 +55,7 @@ const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Elevation > = Template.bind( {} );
+export const Default: StoryFn< typeof Elevation > = Template.bind( {} );
 Default.args = {
 	value: 5,
 };
@@ -64,7 +64,7 @@ Default.args = {
  * Enable the `isInteractive` prop to automatically generate values
  * for the hover/active/focus states.
  */
-export const WithInteractive: ComponentStory< typeof Elevation > =
+export const WithInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithInteractive.args = {
 	...Default.args,
@@ -75,7 +75,7 @@ WithInteractive.args = {
  * You can also provide custom values for the hover/active/focus states
  * instead of using the `isInteractive` prop.
  */
-export const WithCustomInteractive: ComponentStory< typeof Elevation > =
+export const WithCustomInteractive: StoryFn< typeof Elevation > =
 	InteractiveTemplate.bind( {} );
 WithCustomInteractive.args = {
 	...Default.args,
diff --git a/packages/components/src/external-link/stories/index.story.tsx b/packages/components/src/external-link/stories/index.story.tsx
index 2c4aa7943b046..91131e0c88aab 100644
--- a/packages/components/src/external-link/stories/index.story.tsx
+++ b/packages/components/src/external-link/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ExternalLink from '..';
 
-const meta: ComponentMeta< typeof ExternalLink > = {
+const meta: Meta< typeof ExternalLink > = {
 	component: ExternalLink,
 	title: 'Components/ExternalLink',
 	argTypes: {
@@ -23,13 +23,11 @@ const meta: ComponentMeta< typeof ExternalLink > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ExternalLink > = ( { ...args } ) => {
+const Template: StoryFn< typeof ExternalLink > = ( { ...args } ) => {
 	return <ExternalLink { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ExternalLink > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ExternalLink > = Template.bind( {} );
 Default.args = {
 	children: 'WordPress',
 	href: 'https://wordpress.org',
diff --git a/packages/components/src/flex/stories/index.story.tsx b/packages/components/src/flex/stories/index.story.tsx
index f0f83be3b9fb8..142f279665721 100644
--- a/packages/components/src/flex/stories/index.story.tsx
+++ b/packages/components/src/flex/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,9 +9,11 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Flex, FlexItem, FlexBlock } from '../';
 import { View } from '../../view';
 
-const meta: ComponentMeta< typeof Flex > = {
+const meta: Meta< typeof Flex > = {
 	component: Flex,
 	title: 'Components/Flex',
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { FlexBlock, FlexItem },
 	argTypes: {
 		align: { control: { type: 'text' } },
 		as: { control: { type: 'text' } },
@@ -38,7 +40,7 @@ const GrayBox = ( { children }: { children: string } ) => (
 	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
 );
 
-export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+export const Default: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>
@@ -55,9 +57,7 @@ export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
 };
 Default.args = {};
 
-export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
-	...args
-} ) => {
+export const ResponsiveDirection: StoryFn< typeof Flex > = ( { ...args } ) => {
 	return (
 		<Flex { ...args }>
 			<FlexItem>
diff --git a/packages/components/src/focal-point-picker/stories/index.story.tsx b/packages/components/src/focal-point-picker/stories/index.story.tsx
index 3e4f67870449d..ce93d3557060c 100644
--- a/packages/components/src/focal-point-picker/stories/index.story.tsx
+++ b/packages/components/src/focal-point-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import FocalPointPicker from '..';
 
-const meta: ComponentMeta< typeof FocalPointPicker > = {
+const meta: Meta< typeof FocalPointPicker > = {
 	title: 'Components/FocalPointPicker',
 	component: FocalPointPicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FocalPointPicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FocalPointPicker > = ( {
+const Template: StoryFn< typeof FocalPointPicker > = ( {
 	onChange,
 	...props
 } ) => {
diff --git a/packages/components/src/font-size-picker/stories/e2e/index.story.tsx b/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
index c2a038e656b55..cee44efcac8b3 100644
--- a/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
+++ b/packages/components/src/font-size-picker/stories/e2e/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ export default {
 	component: FontSizePicker,
 };
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	...props
 } ) => {
@@ -32,7 +32,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	fontSizes: [
diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
index 25c8eda5d7bd1..69043278389c7 100644
--- a/packages/components/src/font-size-picker/stories/index.story.tsx
+++ b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FontSizePicker from '../';
 
-const meta: ComponentMeta< typeof FontSizePicker > = {
+const meta: Meta< typeof FontSizePicker > = {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta< typeof FontSizePicker > = {
 };
 export default meta;
 
-const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
+const FontSizePickerWithState: StoryFn< typeof FontSizePicker > = ( {
 	value,
 	onChange,
 	...props
@@ -45,7 +45,7 @@ const FontSizePickerWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
+const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 	fontSizes,
 	...props
 } ) => {
@@ -63,7 +63,7 @@ const TwoFontSizePickersWithState: ComponentStory< typeof FontSizePicker > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FontSizePicker > =
+export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -90,7 +90,7 @@ Default.args = {
 	withSlider: false,
 };
 
-export const WithSlider: ComponentStory< typeof FontSizePicker > =
+export const WithSlider: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithSlider.args = {
 	...Default.args,
@@ -103,7 +103,7 @@ WithSlider.args = {
  * With custom font sizes disabled via the `disableCustomFontSizes` prop, the user will
  * only be able to pick one of the predefined sizes passed in `fontSizes`.
  */
-export const WithCustomSizesDisabled: ComponentStory< typeof FontSizePicker > =
+export const WithCustomSizesDisabled: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithCustomSizesDisabled.args = {
 	...Default.args,
@@ -113,7 +113,7 @@ WithCustomSizesDisabled.args = {
 /**
  * When there are more than 5 font size options, the UI is no longer a toggle group.
  */
-export const WithMoreFontSizes: ComponentStory< typeof FontSizePicker > =
+export const WithMoreFontSizes: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 WithMoreFontSizes.args = {
 	...Default.args,
@@ -155,7 +155,7 @@ WithMoreFontSizes.args = {
 /**
  * When units like `px` are specified explicitly, it will be shown as a label hint.
  */
-export const WithUnits: ComponentStory< typeof FontSizePicker > =
+export const WithUnits: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithUnits.args = {
 	...WithMoreFontSizes.args,
@@ -170,7 +170,7 @@ WithUnits.args = {
  * The label hint will not be shown if it is a complex CSS value. Some examples of complex CSS values
  * in this context are CSS functions like `calc()`, `clamp()`, and `var()`.
  */
-export const WithComplexCSSValues: ComponentStory< typeof FontSizePicker > =
+export const WithComplexCSSValues: StoryFn< typeof FontSizePicker > =
 	TwoFontSizePickersWithState.bind( {} );
 WithComplexCSSValues.args = {
 	...Default.args,
diff --git a/packages/components/src/form-file-upload/stories/index.story.tsx b/packages/components/src/form-file-upload/stories/index.story.tsx
index c45bc2bddca5d..a4cf3298da6b1 100644
--- a/packages/components/src/form-file-upload/stories/index.story.tsx
+++ b/packages/components/src/form-file-upload/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { upload as uploadIcon } from '@wordpress/icons';
  */
 import FormFileUpload from '..';
 
-const meta: ComponentMeta< typeof FormFileUpload > = {
+const meta: Meta< typeof FormFileUpload > = {
 	title: 'Components/FormFileUpload',
 	component: FormFileUpload,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof FormFileUpload > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormFileUpload > = ( props ) => {
+const Template: StoryFn< typeof FormFileUpload > = ( props ) => {
 	return <FormFileUpload { ...props } />;
 };
 
diff --git a/packages/components/src/form-toggle/stories/index.story.tsx b/packages/components/src/form-toggle/stories/index.story.tsx
index 9f120593313fa..0958b94c342c4 100644
--- a/packages/components/src/form-toggle/stories/index.story.tsx
+++ b/packages/components/src/form-toggle/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { FormToggle } from '..';
 
-const meta: ComponentMeta< typeof FormToggle > = {
+const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,
 	title: 'Components/FormToggle',
 	argTypes: {
@@ -30,10 +30,7 @@ const meta: ComponentMeta< typeof FormToggle > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof FormToggle > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof FormToggle > = ( { onChange, ...args } ) => {
 	const [ isChecked, setChecked ] = useState( true );
 
 	return (
@@ -48,5 +45,5 @@ const Template: ComponentStory< typeof FormToggle > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+export const Default: StoryFn< typeof FormToggle > = Template.bind( {} );
 Default.args = {};
diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx
index 1c2fc3b65f2db..da61a0b313bfe 100644
--- a/packages/components/src/form-token-field/stories/index.story.tsx
+++ b/packages/components/src/form-token-field/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
-const meta: ComponentMeta< typeof FormTokenField > = {
+const meta: Meta< typeof FormTokenField > = {
 	component: FormTokenField,
 	title: 'Components/FormTokenField',
 	argTypes: {
@@ -42,9 +42,7 @@ const continents = [
 	'Oceania',
 ];
 
-const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
-	...args
-} ) => {
+const DefaultTemplate: StoryFn< typeof FormTokenField > = ( { ...args } ) => {
 	const [ selectedContinents, setSelectedContinents ] = useState<
 		ComponentProps< typeof FormTokenField >[ 'value' ]
 	>( [] );
@@ -58,14 +56,15 @@ const DefaultTemplate: ComponentStory< typeof FormTokenField > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof FormTokenField > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof FormTokenField > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
 
-export const Async: ComponentStory< typeof FormTokenField > = ( {
+export const Async: StoryFn< typeof FormTokenField > = ( {
 	suggestions,
 	...args
 } ) => {
@@ -102,7 +101,7 @@ Async.args = {
 	suggestions: continents,
 };
 
-export const DropdownSelector: ComponentStory< typeof FormTokenField > =
+export const DropdownSelector: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 DropdownSelector.args = {
 	...Default.args,
@@ -115,7 +114,7 @@ DropdownSelector.args = {
  * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
  * and is subject to change.)
  */
-export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+export const WithCustomRenderItem: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithCustomRenderItem.args = {
 	...Default.args,
@@ -129,7 +128,7 @@ WithCustomRenderItem.args = {
  * `true` will be tokenized. (This is still an experimental feature and is
  * subject to change.)
  */
-export const WithValidatedInput: ComponentStory< typeof FormTokenField > =
+export const WithValidatedInput: StoryFn< typeof FormTokenField > =
 	DefaultTemplate.bind( {} );
 WithValidatedInput.args = {
 	...Default.args,
diff --git a/packages/components/src/gradient-picker/stories/index.story.tsx b/packages/components/src/gradient-picker/stories/index.story.tsx
index 5510ccfc9883f..039a2f0da1729 100644
--- a/packages/components/src/gradient-picker/stories/index.story.tsx
+++ b/packages/components/src/gradient-picker/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
  */
 import GradientPicker from '..';
 
-const meta: ComponentMeta< typeof GradientPicker > = {
+const meta: Meta< typeof GradientPicker > = {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
@@ -65,7 +65,7 @@ const GRADIENTS = [
 	},
 ];
 
-const Template: ComponentStory< typeof GradientPicker > = ( {
+const Template: StoryFn< typeof GradientPicker > = ( {
 	onChange,
 	...props
 } ) => {
diff --git a/packages/components/src/grid/stories/index.story.tsx b/packages/components/src/grid/stories/index.story.tsx
index 89272a9134cac..171b324e033c0 100644
--- a/packages/components/src/grid/stories/index.story.tsx
+++ b/packages/components/src/grid/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { View } from '../../view';
 import { Grid } from '..';
 
-const meta: ComponentMeta< typeof Grid > = {
+const meta: Meta< typeof Grid > = {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	argTypes: {
@@ -51,7 +51,7 @@ const Item = ( props: { children: string } ) => (
 	/>
 );
 
-const Template: ComponentStory< typeof Grid > = ( props ) => (
+const Template: StoryFn< typeof Grid > = ( props ) => (
 	<Grid { ...props }>
 		<Item>One</Item>
 		<Item>Two</Item>
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Grid > = ( props ) => (
 	</Grid>
 );
 
-export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+export const Default: StoryFn< typeof Grid > = Template.bind( {} );
 Default.args = {
 	alignment: 'bottom',
 	columns: 4,
diff --git a/packages/components/src/guide/stories/index.story.tsx b/packages/components/src/guide/stories/index.story.tsx
index d07fa02100e62..d9154a02097e7 100644
--- a/packages/components/src/guide/stories/index.story.tsx
+++ b/packages/components/src/guide/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import Guide from '..';
 
-const meta: ComponentMeta< typeof Guide > = {
+const meta: Meta< typeof Guide > = {
 	title: 'Components/Guide',
 	component: Guide,
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Guide > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Guide > = ( { onFinish, ...props } ) => {
+const Template: StoryFn< typeof Guide > = ( { onFinish, ...props } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 
 	const openGuide = () => setOpen( true );
diff --git a/packages/components/src/h-stack/stories/e2e/index.story.tsx b/packages/components/src/h-stack/stories/e2e/index.story.tsx
index 38bbf7174e471..db965b5ac1898 100644
--- a/packages/components/src/h-stack/stories/e2e/index.story.tsx
+++ b/packages/components/src/h-stack/stories/e2e/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { HStack } from '../..';
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( props ) => {
+const Template: StoryFn< typeof HStack > = ( props ) => {
 	return (
 		<HStack
 			style={ { background: '#eee', minHeight: '3rem' } }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof HStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };
diff --git a/packages/components/src/h-stack/stories/index.story.tsx b/packages/components/src/h-stack/stories/index.story.tsx
index d60cf3d4430bc..88aebb7682e47 100644
--- a/packages/components/src/h-stack/stories/index.story.tsx
+++ b/packages/components/src/h-stack/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 /**
  * Internal dependencies
  */
@@ -40,7 +40,7 @@ const JUSTIFICATIONS = {
 	start: 'start',
 };
 
-const meta: ComponentMeta< typeof HStack > = {
+const meta: Meta< typeof HStack > = {
 	component: HStack,
 	title: 'Components (Experimental)/HStack',
 	argTypes: {
@@ -76,7 +76,7 @@ const meta: ComponentMeta< typeof HStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof HStack > = ( args ) => (
+const Template: StoryFn< typeof HStack > = ( args ) => (
 	<HStack { ...args } style={ { background: '#eee', minHeight: '3rem' } }>
 		{ [ 'One', 'Two', 'Three', 'Four', 'Five' ].map( ( text ) => (
 			<View key={ text } style={ { background: '#b9f9ff' } }>
@@ -86,7 +86,7 @@ const Template: ComponentStory< typeof HStack > = ( args ) => (
 	</HStack>
 );
 
-export const Default: ComponentStory< typeof HStack > = Template.bind( {} );
+export const Default: StoryFn< typeof HStack > = Template.bind( {} );
 Default.args = {
 	spacing: '3',
 };
diff --git a/packages/components/src/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx
index 380e93c1dcab0..e774fd5331273 100644
--- a/packages/components/src/heading/stories/index.story.tsx
+++ b/packages/components/src/heading/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Heading } from '..';
 
-const meta: ComponentMeta< typeof Heading > = {
+const meta: Meta< typeof Heading > = {
 	component: Heading,
 	title: 'Components (Experimental)/Heading',
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof Heading > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof Heading > = ( props ) => (
+export const Default: StoryFn< typeof Heading > = ( props ) => (
 	<Heading { ...props } />
 );
 Default.args = {
diff --git a/packages/components/src/icon/stories/index.story.tsx b/packages/components/src/icon/stories/index.story.tsx
index 1f1002991497c..7d61be8df7f3c 100644
--- a/packages/components/src/icon/stories/index.story.tsx
+++ b/packages/components/src/icon/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { wordpress } from '@wordpress/icons';
 import Icon from '..';
 import { VStack } from '../../v-stack';
 
-const meta: ComponentMeta< typeof Icon > = {
+const meta: Meta< typeof Icon > = {
 	title: 'Components/Icon',
 	component: Icon,
 	parameters: {
@@ -25,14 +25,14 @@ const meta: ComponentMeta< typeof Icon > = {
 };
 export default meta;
 
-const Template: Story< typeof Icon > = ( args ) => <Icon { ...args } />;
+const Template: StoryFn< typeof Icon > = ( args ) => <Icon { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	icon: wordpress,
 };
 
-export const FillColor: Story< typeof Icon > = ( args ) => {
+export const FillColor: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<div
 			style={ {
@@ -84,7 +84,7 @@ WithAnSVG.args = {
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */
-export const WithADashicon: Story< typeof Icon > = ( args ) => {
+export const WithADashicon: StoryFn< typeof Icon > = ( args ) => {
 	return (
 		<VStack>
 			<Icon { ...args } />
diff --git a/packages/components/src/input-control/stories/index.story.tsx b/packages/components/src/input-control/stories/index.story.tsx
index 72878013add7e..edfb43950d3a8 100644
--- a/packages/components/src/input-control/stories/index.story.tsx
+++ b/packages/components/src/input-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,11 @@ import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
-const meta: ComponentMeta< typeof InputControl > = {
+const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -29,7 +31,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
+const Template: StoryFn< typeof InputControl > = ( args ) => (
 	<InputControl { ...args } />
 );
 
diff --git a/packages/components/src/item-group/item-group/component.tsx b/packages/components/src/item-group/item-group/component.tsx
index 127359febd90d..34f73c38e2b57 100644
--- a/packages/components/src/item-group/item-group/component.tsx
+++ b/packages/components/src/item-group/item-group/component.tsx
@@ -44,7 +44,6 @@ function UnconnectedItemGroup(
 /**
  * `ItemGroup` displays a list of `Item`s grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,
diff --git a/packages/components/src/item-group/item/component.tsx b/packages/components/src/item-group/item/component.tsx
index ed30c9b56e0f2..9104f5340377b 100644
--- a/packages/components/src/item-group/item/component.tsx
+++ b/packages/components/src/item-group/item/component.tsx
@@ -29,7 +29,6 @@ function UnconnectedItem(
  * `Item` is used in combination with `ItemGroup` to display a list of items
  * grouped and styled together.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalItemGroup as ItemGroup,
diff --git a/packages/components/src/item-group/stories/index.story.tsx b/packages/components/src/item-group/stories/index.story.tsx
index d720791fade2a..473cdfedbf4f1 100644
--- a/packages/components/src/item-group/stories/index.story.tsx
+++ b/packages/components/src/item-group/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,8 +11,10 @@ import { Item } from '../item/component';
 
 type ItemProps = React.ComponentPropsWithoutRef< typeof Item >;
 
-const meta: ComponentMeta< typeof ItemGroup > = {
+const meta: Meta< typeof ItemGroup > = {
 	component: ItemGroup,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Item },
 	title: 'Components (Experimental)/ItemGroup',
 	argTypes: {
 		as: { control: { type: null } },
@@ -29,11 +31,11 @@ const mapPropsToItem = ( props: ItemProps, index: number ) => (
 	<Item { ...props } key={ index } />
 );
 
-const Template: ComponentStory< typeof ItemGroup > = ( props ) => (
+const Template: StoryFn< typeof ItemGroup > = ( props ) => (
 	<ItemGroup { ...props } />
 );
 
-export const Default: ComponentStory< typeof ItemGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof ItemGroup > = Template.bind( {} );
 Default.args = {
 	children: (
 		[
@@ -61,8 +63,9 @@ Default.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const NonClickableItems: ComponentStory< typeof ItemGroup > =
-	Template.bind( {} );
+export const NonClickableItems: StoryFn< typeof ItemGroup > = Template.bind(
+	{}
+);
 NonClickableItems.args = {
 	children: (
 		[
@@ -78,9 +81,7 @@ NonClickableItems.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const CustomItemSize: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const CustomItemSize: StoryFn< typeof ItemGroup > = Template.bind( {} );
 CustomItemSize.args = {
 	children: (
 		[
@@ -97,9 +98,7 @@ CustomItemSize.args = {
 	 ).map( mapPropsToItem ),
 };
 
-export const WithBorder: ComponentStory< typeof ItemGroup > = Template.bind(
-	{}
-);
+export const WithBorder: StoryFn< typeof ItemGroup > = Template.bind( {} );
 WithBorder.args = {
 	...Default.args,
 	isBordered: true,
diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
index fe801e7c8607a..d181be737353c 100644
--- a/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
+++ b/packages/components/src/keyboard-shortcuts/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import KeyboardShortcuts from '..';
 
-const meta: ComponentMeta< typeof KeyboardShortcuts > = {
+const meta: Meta< typeof KeyboardShortcuts > = {
 	component: KeyboardShortcuts,
 	title: 'Components/KeyboardShortcuts',
 	parameters: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta< typeof KeyboardShortcuts > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof KeyboardShortcuts > = ( props ) => (
+const Template: StoryFn< typeof KeyboardShortcuts > = ( props ) => (
 	<KeyboardShortcuts { ...props } />
 );
 
diff --git a/packages/components/src/menu-group/stories/index.story.tsx b/packages/components/src/menu-group/stories/index.story.tsx
index f00cec2cc386f..80cdae3dab600 100644
--- a/packages/components/src/menu-group/stories/index.story.tsx
+++ b/packages/components/src/menu-group/stories/index.story.tsx
@@ -13,9 +13,9 @@ import MenuItemsChoice from '../../menu-items-choice';
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
-const meta: ComponentMeta< typeof MenuGroup > = {
+const meta: Meta< typeof MenuGroup > = {
 	title: 'Components/MenuGroup',
 	component: MenuGroup,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof MenuGroup > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
+const Template: StoryFn< typeof MenuGroup > = ( args ) => {
 	return (
 		<MenuGroup { ...args }>
 			<MenuItem>Menu Item 1</MenuItem>
@@ -37,9 +37,9 @@ const Template: ComponentStory< typeof MenuGroup > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuGroup > = Template.bind( {} );
+export const Default: StoryFn< typeof MenuGroup > = Template.bind( {} );
 
-const MultiGroupsTemplate: ComponentStory< typeof MenuGroup > = ( args ) => {
+const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 	const [ mode, setMode ] = useState( 'visual' );
 	const choices = [
 		{
diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md
index 8532e54d4132d..a13d8dbd5eabe 100644
--- a/packages/components/src/menu-item/README.md
+++ b/packages/components/src/menu-item/README.md
@@ -70,7 +70,7 @@ Determines where to display the provided `icon`.
 -   Type: `boolean`
 -   Required: No
 
-Whether or not the menu item is currently selected.
+Whether or not the menu item is currently selected. `isSelected` is only taken into account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 
 ### `shortcut`
 
diff --git a/packages/components/src/menu-item/index.tsx b/packages/components/src/menu-item/index.tsx
index eb77c57e22b80..2904763cc6c58 100644
--- a/packages/components/src/menu-item/index.tsx
+++ b/packages/components/src/menu-item/index.tsx
@@ -18,7 +18,7 @@ import Icon from '../icon';
 import type { WordPressComponentProps } from '../ui/context';
 import type { MenuItemProps } from './types';
 
-export function MenuItem(
+function UnforwardedMenuItem(
 	props: WordPressComponentProps< MenuItemProps, 'button', false >,
 	ref: ForwardedRef< HTMLButtonElement >
 ) {
@@ -97,6 +97,7 @@ export function MenuItem(
  * 		<MenuItem
  * 			icon={ isActive ? 'yes' : 'no' }
  * 			isSelected={ isActive }
+ * 			role="menuitemcheckbox"
  * 			onClick={ () => setIsActive( ( state ) => ! state ) }
  * 		>
  * 			Toggle
@@ -105,4 +106,6 @@ export function MenuItem(
  * };
  * ```
  */
-export default forwardRef( MenuItem );
+export const MenuItem = forwardRef( UnforwardedMenuItem );
+
+export default MenuItem;
diff --git a/packages/components/src/menu-item/stories/index.story.tsx b/packages/components/src/menu-item/stories/index.story.tsx
new file mode 100644
index 0000000000000..763ee6e96be92
--- /dev/null
+++ b/packages/components/src/menu-item/stories/index.story.tsx
@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { link, more, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import MenuGroup from '../../menu-group';
+import MenuItem from '..';
+import Shortcut from '../../shortcut';
+
+const meta: Meta< typeof MenuItem > = {
+	component: MenuItem,
+	title: 'Components/MenuItem',
+	argTypes: {
+		children: { control: { type: null } },
+		icon: {
+			control: { type: 'select' },
+			options: [ 'check', 'link', 'more' ],
+			mapping: {
+				check,
+				link,
+				more,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof MenuItem > = ( props ) => {
+	return (
+		<MenuGroup>
+			<MenuItem { ...props }>Menu Item 1</MenuItem>
+		</MenuGroup>
+	);
+};
+
+export const Default: StoryFn< typeof MenuItem > = Template.bind( {} );
+
+/**
+ * When the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`, the
+ * `isSelected` prop should be used so screen readers can tell which item is currently selected.
+ */
+export const IsSelected = Template.bind( {} );
+IsSelected.args = {
+	...Default.args,
+	isSelected: true,
+	role: 'menuitemcheckbox',
+};
+
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	icon: link,
+	iconPosition: 'left',
+};
+
+export const WithInfo = Template.bind( {} );
+WithInfo.args = {
+	...Default.args,
+	info: 'Menu Item description',
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <Shortcut shortcut="Ctrl+M"></Shortcut>,
+};
diff --git a/packages/components/src/menu-item/types.ts b/packages/components/src/menu-item/types.ts
index a9249ffa200e1..d213af6153acc 100644
--- a/packages/components/src/menu-item/types.ts
+++ b/packages/components/src/menu-item/types.ts
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  */
 import type { ButtonAsButtonProps } from '../button/types';
 
-export type MenuItemProps = ButtonAsButtonProps & {
+export type MenuItemProps = Pick< ButtonAsButtonProps, 'isDestructive' > & {
 	/**
 	 * A CSS `class` to give to the container element.
 	 */
@@ -33,7 +33,8 @@ export type MenuItemProps = ButtonAsButtonProps & {
 	 */
 	iconPosition?: ButtonAsButtonProps[ 'iconPosition' ];
 	/**
-	 * Whether or not the menu item is currently selected.
+	 * Whether or not the menu item is currently selected, `isSelected` is only taken into
+	 * account when the `role` prop is either `"menuitemcheckbox"` or `"menuitemradio"`.
 	 */
 	isSelected?: boolean;
 	/**
diff --git a/packages/components/src/menu-items-choice/stories/index.story.tsx b/packages/components/src/menu-items-choice/stories/index.story.tsx
index 9e1f3d1cf3d48..02e76158981e8 100644
--- a/packages/components/src/menu-items-choice/stories/index.story.tsx
+++ b/packages/components/src/menu-items-choice/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
 
-const meta: ComponentMeta< typeof MenuItemsChoice > = {
+const meta: Meta< typeof MenuItemsChoice > = {
 	component: MenuItemsChoice,
 	title: 'Components/MenuItemsChoice',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof MenuItemsChoice > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof MenuItemsChoice > = ( {
+const Template: StoryFn< typeof MenuItemsChoice > = ( {
 	onHover,
 	onSelect,
 	choices,
@@ -53,9 +53,7 @@ const Template: ComponentStory< typeof MenuItemsChoice > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof MenuItemsChoice > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof MenuItemsChoice > = Template.bind( {} );
 
 Default.args = {
 	choices: [
diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx
index 96fae4ec9abee..8405a6eb0113e 100644
--- a/packages/components/src/modal/stories/index.story.tsx
+++ b/packages/components/src/modal/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
 
-const meta: ComponentMeta< typeof Modal > = {
+const meta: Meta< typeof Modal > = {
 	component: Modal,
 	title: 'Components/Modal',
 	argTypes: {
@@ -46,10 +46,7 @@ const meta: ComponentMeta< typeof Modal > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Modal > = ( {
-	onRequestClose,
-	...args
-} ) => {
+const Template: StoryFn< typeof Modal > = ( { onRequestClose, ...args } ) => {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal: ModalProps[ 'onRequestClose' ] = ( event ) => {
@@ -91,7 +88,7 @@ const Template: ComponentStory< typeof Modal > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof Modal > = Template.bind( {} );
+export const Default: StoryFn< typeof Modal > = Template.bind( {} );
 Default.args = {
 	title: 'Title',
 };
@@ -114,9 +111,7 @@ const LikeButton = () => {
 	);
 };
 
-export const WithHeaderActions: ComponentStory< typeof Modal > = Template.bind(
-	{}
-);
+export const WithHeaderActions: StoryFn< typeof Modal > = Template.bind( {} );
 WithHeaderActions.args = {
 	...Default.args,
 	headerActions: <LikeButton />,
diff --git a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
index 1c4fa6b184c52..9e5f3eedff528 100644
--- a/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
+++ b/packages/components/src/navigable-container/stories/navigable-menu.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { NavigableMenu } from '..';
 
-const meta: ComponentMeta< typeof NavigableMenu > = {
+const meta: Meta< typeof NavigableMenu > = {
 	title: 'Components/NavigableMenu',
 	component: NavigableMenu,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof NavigableMenu > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof NavigableMenu > = ( args ) => {
+export const Default: StoryFn< typeof NavigableMenu > = ( args ) => {
 	return (
 		<>
 			<button>Before navigable menu</button>
diff --git a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
index 95b97340bdf8d..3dd090f0b0585 100644
--- a/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
+++ b/packages/components/src/navigable-container/stories/tabbable-container.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { TabbableContainer } from '..';
 
-const meta: ComponentMeta< typeof TabbableContainer > = {
+const meta: Meta< typeof TabbableContainer > = {
 	title: 'Components/TabbableContainer',
 	component: TabbableContainer,
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof TabbableContainer > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof TabbableContainer > = ( args ) => {
+export const Default: StoryFn< typeof TabbableContainer > = ( args ) => {
 	return (
 		<>
 			<button>Before tabbable container</button>
diff --git a/packages/components/src/navigation/index.tsx b/packages/components/src/navigation/index.tsx
index e3d309783e1ee..dfc1b26cb33ad 100644
--- a/packages/components/src/navigation/index.tsx
+++ b/packages/components/src/navigation/index.tsx
@@ -28,7 +28,6 @@ const noop = () => {};
 /**
  * Render a navigation list with optional groupings and hierarchy.
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalNavigation as Navigation,
diff --git a/packages/components/src/navigation/stories/index.story.tsx b/packages/components/src/navigation/stories/index.story.tsx
index d335ec1ef6b8a..e0a3f1e139757 100644
--- a/packages/components/src/navigation/stories/index.story.tsx
+++ b/packages/components/src/navigation/stories/index.story.tsx
@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Navigation } from '..';
+import { NavigationBackButton } from '../back-button';
+import { NavigationGroup } from '../group';
+import { NavigationItem } from '../item';
+import { NavigationMenu } from '../menu';
 import { DefaultStory } from './utils/default';
 import { GroupStory } from './utils/group';
 import { ControlledStateStory } from './utils/controlled-state';
@@ -15,9 +19,19 @@ import { MoreExamplesStory } from './utils/more-examples';
 import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
-const meta: ComponentMeta< typeof Navigation > = {
+const meta: Meta< typeof Navigation > = {
 	title: 'Components (Experimental)/Navigation',
 	component: Navigation,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationBackButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		NavigationMenu,
+	},
 	argTypes: {
 		activeItem: { control: { type: null } },
 		activeMenu: { control: { type: null } },
diff --git a/packages/components/src/navigation/stories/utils/controlled-state.tsx b/packages/components/src/navigation/stories/utils/controlled-state.tsx
index fa9687c981f2e..b5d842b67e78c 100644
--- a/packages/components/src/navigation/stories/utils/controlled-state.tsx
+++ b/packages/components/src/navigation/stories/utils/controlled-state.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const ControlledStateStory: ComponentStory< typeof Navigation > = ( {
+export const ControlledStateStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigation/stories/utils/default.tsx b/packages/components/src/navigation/stories/utils/default.tsx
index 78188802861d3..d2948494adfb6 100644
--- a/packages/components/src/navigation/stories/utils/default.tsx
+++ b/packages/components/src/navigation/stories/utils/default.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,7 +15,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const DefaultStory: ComponentStory< typeof Navigation > = ( {
+export const DefaultStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigation/stories/utils/group.tsx b/packages/components/src/navigation/stories/utils/group.tsx
index 007a71e3f40d1..bdf4f7011a171 100644
--- a/packages/components/src/navigation/stories/utils/group.tsx
+++ b/packages/components/src/navigation/stories/utils/group.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 import { NavigationGroup } from '../../group';
 
-export const GroupStory: ComponentStory< typeof Navigation > = ( {
+export const GroupStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigation/stories/utils/hide-if-empty.tsx b/packages/components/src/navigation/stories/utils/hide-if-empty.tsx
index 2595aba6b26a7..9b1414db861c0 100644
--- a/packages/components/src/navigation/stories/utils/hide-if-empty.tsx
+++ b/packages/components/src/navigation/stories/utils/hide-if-empty.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { Navigation } from '../..';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const HideIfEmptyStory: ComponentStory< typeof Navigation > = ( {
+export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigation/stories/utils/more-examples.tsx b/packages/components/src/navigation/stories/utils/more-examples.tsx
index c2a181dce58f6..e0ce566a5ab66 100644
--- a/packages/components/src/navigation/stories/utils/more-examples.tsx
+++ b/packages/components/src/navigation/stories/utils/more-examples.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import { NavigationGroup } from '../../group';
 import { NavigationItem } from '../../item';
 import { NavigationMenu } from '../../menu';
 
-export const MoreExamplesStory: ComponentStory< typeof Navigation > = ( {
+export const MoreExamplesStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigation/stories/utils/search.tsx b/packages/components/src/navigation/stories/utils/search.tsx
index 74f1457adf0b7..44fb352bbdbf1 100644
--- a/packages/components/src/navigation/stories/utils/search.tsx
+++ b/packages/components/src/navigation/stories/utils/search.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -29,7 +29,7 @@ const searchItems = [
 	{ item: 'waldo', title: 'Waldo' },
 ];
 
-export const SearchStory: ComponentStory< typeof Navigation > = ( {
+export const SearchStory: StoryFn< typeof Navigation > = ( {
 	className,
 	...props
 } ) => {
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index c86067f7f72ce..2d27605eab15a 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -268,7 +268,6 @@ function UnconnectedNavigatorProvider(
  * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
  * `useNavigator` hook).
  *
- * @example
  * ```jsx
  * import {
  *   __experimentalNavigatorProvider as NavigatorProvider,
diff --git a/packages/components/src/navigator/stories/index.story.tsx b/packages/components/src/navigator/stories/index.story.tsx
index 1cd6d8be9eabb..5adeadcf7ac1d 100644
--- a/packages/components/src/navigator/stories/index.story.tsx
+++ b/packages/components/src/navigator/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -19,8 +19,10 @@ import {
 	useNavigator,
 } from '..';
 
-const meta: ComponentMeta< typeof NavigatorProvider > = {
+const meta: Meta< typeof NavigatorProvider > = {
 	component: NavigatorProvider,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { NavigatorScreen, NavigatorButton, NavigatorBackButton },
 	title: 'Components (Experimental)/Navigator',
 	argTypes: {
 		as: { control: { type: null } },
@@ -34,7 +36,7 @@ const meta: ComponentMeta< typeof NavigatorProvider > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof NavigatorProvider > = ( {
+const Template: StoryFn< typeof NavigatorProvider > = ( {
 	style,
 	...props
 } ) => (
@@ -178,8 +180,7 @@ const Template: ComponentStory< typeof NavigatorProvider > = ( {
 	</NavigatorProvider>
 );
 
-export const Default: ComponentStory< typeof NavigatorProvider > =
-	Template.bind( {} );
+export const Default: StoryFn< typeof NavigatorProvider > = Template.bind( {} );
 Default.args = {
 	initialPath: '/',
 };
@@ -233,7 +234,7 @@ function ProductDetails() {
 	);
 }
 
-const NestedNavigatorTemplate: ComponentStory< typeof NavigatorProvider > = ( {
+const NestedNavigatorTemplate: StoryFn< typeof NavigatorProvider > = ( {
 	style,
 	...props
 } ) => (
@@ -292,7 +293,7 @@ const NestedNavigatorTemplate: ComponentStory< typeof NavigatorProvider > = ( {
 	</NavigatorProvider>
 );
 
-export const NestedNavigator: ComponentStory< typeof NavigatorProvider > =
+export const NestedNavigator: StoryFn< typeof NavigatorProvider > =
 	NestedNavigatorTemplate.bind( {} );
 NestedNavigator.args = {
 	initialPath: '/child2/grandchild',
@@ -316,9 +317,7 @@ const NavigatorButtonWithSkipFocus = ( {
 	);
 };
 
-export const SkipFocus: ComponentStory< typeof NavigatorProvider > = (
-	args
-) => {
+export const SkipFocus: StoryFn< typeof NavigatorProvider > = ( args ) => {
 	return <NavigatorProvider { ...args } />;
 };
 SkipFocus.args = {
diff --git a/packages/components/src/notice/stories/index.story.tsx b/packages/components/src/notice/stories/index.story.tsx
index 957d3cca3ef93..16a68ab293f55 100644
--- a/packages/components/src/notice/stories/index.story.tsx
+++ b/packages/components/src/notice/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,11 @@ import Button from '../../button';
 import NoticeList from '../list';
 import type { NoticeListProps } from '../types';
 
-const meta: ComponentMeta< typeof Notice > = {
+const meta: Meta< typeof Notice > = {
 	title: 'Components/Notice',
 	component: Notice,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { NoticeList },
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
@@ -27,7 +29,7 @@ const meta: ComponentMeta< typeof Notice > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Notice > = ( props ) => {
+const Template: StoryFn< typeof Notice > = ( props ) => {
 	return <Notice { ...props } />;
 };
 
@@ -81,9 +83,7 @@ WithActions.args = {
 	],
 };
 
-export const NoticeListSubcomponent: ComponentStory<
-	typeof NoticeList
-> = () => {
+export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 	const exampleNotices = [
 		{
 			id: 'second-notice',
diff --git a/packages/components/src/number-control/stories/index.story.tsx b/packages/components/src/number-control/stories/index.story.tsx
index fedbbb41e0dd4..3588063f0f4bb 100644
--- a/packages/components/src/number-control/stories/index.story.tsx
+++ b/packages/components/src/number-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import NumberControl from '..';
 
-const meta: ComponentMeta< typeof NumberControl > = {
+const meta: Meta< typeof NumberControl > = {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
 	argTypes: {
@@ -32,7 +32,7 @@ const meta: ComponentMeta< typeof NumberControl > = {
 
 export default meta;
 
-const Template: ComponentStory< typeof NumberControl > = ( {
+const Template: StoryFn< typeof NumberControl > = ( {
 	onChange,
 	...props
 } ) => {
diff --git a/packages/components/src/palette-edit/stories/index.story.tsx b/packages/components/src/palette-edit/stories/index.story.tsx
index 45500cf41e072..dd2ab92978c92 100644
--- a/packages/components/src/palette-edit/stories/index.story.tsx
+++ b/packages/components/src/palette-edit/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import PaletteEdit from '..';
 import type { Color, Gradient } from '../types';
 
-const meta: ComponentMeta< typeof PaletteEdit > = {
+const meta: Meta< typeof PaletteEdit > = {
 	title: 'Components/PaletteEdit',
 	component: PaletteEdit,
 	parameters: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof PaletteEdit > = {
 };
 export default meta;
 
-const Template: Story< typeof PaletteEdit > = ( args ) => {
+const Template: StoryFn< typeof PaletteEdit > = ( args ) => {
 	const { colors, gradients, onChange, ...props } = args;
 	const [ value, setValue ] = useState( gradients || colors );
 
diff --git a/packages/components/src/panel/stories/index.story.tsx b/packages/components/src/panel/stories/index.story.tsx
index af3bdbee46b88..7f69f766603eb 100644
--- a/packages/components/src/panel/stories/index.story.tsx
+++ b/packages/components/src/panel/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -16,9 +16,11 @@ import InputControl from '../../input-control';
  */
 import { wordpress } from '@wordpress/icons';
 
-const meta: ComponentMeta< typeof Panel > = {
+const meta: Meta< typeof Panel > = {
 	title: 'Components/Panel',
 	component: Panel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { PanelRow, PanelBody },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -29,11 +31,9 @@ const meta: ComponentMeta< typeof Panel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Panel > = ( props ) => (
-	<Panel { ...props } />
-);
+const Template: StoryFn< typeof Panel > = ( props ) => <Panel { ...props } />;
 
-export const Default: ComponentStory< typeof Panel > = Template.bind( {} );
+export const Default: StoryFn< typeof Panel > = Template.bind( {} );
 Default.args = {
 	header: 'My panel',
 	children: (
@@ -68,7 +68,7 @@ Default.args = {
  * `PanelRow` is a generic container for rows within a `PanelBody`.
  * It is a flex container with a top margin for spacing.
  */
-export const _PanelRow: ComponentStory< typeof Panel > = Template.bind( {} );
+export const _PanelRow: StoryFn< typeof Panel > = Template.bind( {} );
 _PanelRow.args = {
 	children: (
 		<PanelBody title="My Profile">
@@ -85,9 +85,7 @@ _PanelRow.args = {
 	),
 };
 
-export const DisabledSection: ComponentStory< typeof Panel > = Template.bind(
-	{}
-);
+export const DisabledSection: StoryFn< typeof Panel > = Template.bind( {} );
 DisabledSection.args = {
 	...Default.args,
 	children: (
@@ -99,7 +97,7 @@ DisabledSection.args = {
 	),
 };
 
-export const WithIcon: ComponentStory< typeof Panel > = Template.bind( {} );
+export const WithIcon: StoryFn< typeof Panel > = Template.bind( {} );
 WithIcon.args = {
 	...Default.args,
 	children: (
diff --git a/packages/components/src/placeholder/stories/index.story.tsx b/packages/components/src/placeholder/stories/index.story.tsx
index 7c414e4a1cca3..541eeceedc27d 100644
--- a/packages/components/src/placeholder/stories/index.story.tsx
+++ b/packages/components/src/placeholder/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,7 @@ import TextControl from '../../text-control';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof Placeholder > = {
+const meta: Meta< typeof Placeholder > = {
 	component: Placeholder,
 	title: 'Components/Placeholder',
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof Placeholder > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Placeholder > = ( args ) => {
+const Template: StoryFn< typeof Placeholder > = ( args ) => {
 	const [ value, setValue ] = useState( '' );
 
 	return (
@@ -55,9 +55,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Placeholder > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof Placeholder > = Template.bind( {} );
 Default.args = {
 	icon: 'wordpress',
 	label: 'My Placeholder Label',
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index ad04de226e90d..709254672be8b 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -6,7 +6,7 @@ The behavior of the popover when it exceeds the viewport's edges can be controll
 
 ## Usage
 
-Render a Popover within the parent to which it should anchor.
+Render a Popover adjacent to its container.
 
 If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
@@ -60,7 +60,7 @@ const MyPopover = () => {
 };
 ```
 
-If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
+By default Popovers render at the end of the body of your document. If you want Popover elements to render to a specific location on the page, you must render a `Popover.Slot` further up the element tree:
 
 ```jsx
 import { render } from '@wordpress/element';
diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
index 593d51f27e828..c9cec1a5a565e 100644
--- a/packages/components/src/popover/index.tsx
+++ b/packages/components/src/popover/index.tsx
@@ -30,6 +30,7 @@ import {
 	useMemo,
 	useState,
 	useCallback,
+	createPortal,
 } from '@wordpress/element';
 import {
 	useViewportMatch,
@@ -139,6 +140,20 @@ const AnimatedWrapper = forwardRef(
 
 const slotNameContext = createContext< string | undefined >( undefined );
 
+const fallbackContainerClassname = 'components-popover__fallback-container';
+const getPopoverFallbackContainer = () => {
+	let container = document.body.querySelector(
+		'.' + fallbackContainerClassname
+	);
+	if ( ! container ) {
+		container = document.createElement( 'div' );
+		container.className = fallbackContainerClassname;
+		document.body.append( container );
+	}
+
+	return container;
+};
+
 const UnforwardedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
@@ -167,6 +182,7 @@ const UnforwardedPopover = (
 		flip = true,
 		resize = true,
 		shift = false,
+		inline = false,
 		variant,
 
 		// Deprecated props
@@ -548,15 +564,22 @@ const UnforwardedPopover = (
 		</AnimatedWrapper>
 	);
 
-	if ( slot.ref ) {
+	const shouldRenderWithinSlot = slot.ref && ! inline;
+	const hasAnchor = anchorRef || anchorRect || anchor;
+
+	if ( shouldRenderWithinSlot ) {
 		content = <Fill name={ slotName }>{ content }</Fill>;
 	}
 
-	if ( anchorRef || anchorRect || anchor ) {
+	if ( ! hasAnchor ) {
+		content = <span ref={ anchorRefFallback }>{ content }</span>;
+	}
+
+	if ( shouldRenderWithinSlot || inline ) {
 		return content;
 	}
 
-	return <span ref={ anchorRefFallback }>{ content }</span>;
+	return createPortal( content, getPopoverFallbackContainer() );
 };
 
 /**
diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx
index c5636941037c1..7f06045ac9b05 100644
--- a/packages/components/src/popover/stories/index.story.tsx
+++ b/packages/components/src/popover/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,7 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
 	'overlay',
 ];
 
-const meta: ComponentMeta< typeof Popover > = {
+const meta: Meta< typeof Popover > = {
 	title: 'Components/Popover',
 	component: Popover,
 	argTypes: {
@@ -81,7 +81,7 @@ const PopoverWithAnchor = ( args: PopoverProps ) => {
 	);
 };
 
-const Template: ComponentStory< typeof Popover > = ( args ) => {
+const Template: StoryFn< typeof Popover > = ( args ) => {
 	const [ isVisible, setIsVisible ] = useState( false );
 	const toggleVisible = () => {
 		setIsVisible( ( state ) => ! state );
@@ -116,7 +116,7 @@ const Template: ComponentStory< typeof Popover > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Popover > = Template.bind( {} );
+export const Default: StoryFn< typeof Popover > = Template.bind( {} );
 Default.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -128,7 +128,7 @@ Default.args = {
 	),
 };
 
-export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} );
+export const Unstyled: StoryFn< typeof Popover > = Template.bind( {} );
 Unstyled.args = {
 	children: (
 		<div style={ { width: '280px', whiteSpace: 'normal' } }>
@@ -141,7 +141,7 @@ Unstyled.args = {
 	variant: 'unstyled',
 };
 
-export const AllPlacements: ComponentStory< typeof Popover > = ( {
+export const AllPlacements: StoryFn< typeof Popover > = ( {
 	children,
 	...args
 } ) => (
@@ -194,7 +194,7 @@ AllPlacements.args = {
 	flip: false,
 };
 
-export const DynamicHeight: ComponentStory< typeof Popover > = ( {
+export const DynamicHeight: StoryFn< typeof Popover > = ( {
 	children,
 	...args
 } ) => {
@@ -246,9 +246,7 @@ DynamicHeight.args = {
 	children: 'Content with dynamic height',
 };
 
-export const WithSlotOutsideIframe: ComponentStory< typeof Popover > = (
-	args
-) => {
+export const WithSlotOutsideIframe: StoryFn< typeof Popover > = ( args ) => {
 	return <PopoverInsideIframeRenderedInExternalSlot { ...args } />;
 };
 WithSlotOutsideIframe.args = {
diff --git a/packages/components/src/popover/test/index.tsx b/packages/components/src/popover/test/index.tsx
index f98c4e27d3700..fa96c74cffbf3 100644
--- a/packages/components/src/popover/test/index.tsx
+++ b/packages/components/src/popover/test/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, getByText } from '@testing-library/react';
 import type { CSSProperties } from 'react';
 
 /**
@@ -112,6 +112,20 @@ describe( 'Popover', () => {
 					expect( screen.getByRole( 'tooltip' ) ).toBeVisible()
 				);
 			} );
+
+			it( 'should render inline regardless of slot name', async () => {
+				const { container } = render(
+					<Popover inline __unstableSlotName="Popover">
+						Hello
+					</Popover>
+				);
+
+				await waitFor( () =>
+					// We want to explicitly check if it's within the container.
+					// eslint-disable-next-line testing-library/prefer-screen-queries
+					expect( getByText( container, 'Hello' ) ).toBeVisible()
+				);
+			} );
 		} );
 
 		describe( 'anchor', () => {
diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
index 6dc3a4ae7d53f..350801e3a5b8c 100644
--- a/packages/components/src/popover/types.ts
+++ b/packages/components/src/popover/types.ts
@@ -150,6 +150,12 @@ export type PopoverProps = {
 	 * @default undefined
 	 */
 	variant?: 'unstyled' | 'toolbar';
+	/**
+	 * Whether to render the popover inline or within the slot.
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
 	// Deprecated props
 	/**
 	 * Prevent the popover from flipping and resizing when meeting the viewport
diff --git a/packages/components/src/progress-bar/stories/index.story.tsx b/packages/components/src/progress-bar/stories/index.story.tsx
index a9cce7c2fe272..e3d217ffd3f41 100644
--- a/packages/components/src/progress-bar/stories/index.story.tsx
+++ b/packages/components/src/progress-bar/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { ProgressBar } from '..';
 
-const meta: ComponentMeta< typeof ProgressBar > = {
+const meta: Meta< typeof ProgressBar > = {
 	component: ProgressBar,
 	title: 'Components (Experimental)/ProgressBar',
 	argTypes: {
@@ -23,11 +23,9 @@ const meta: ComponentMeta< typeof ProgressBar > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ProgressBar > = ( { ...args } ) => {
+const Template: StoryFn< typeof ProgressBar > = ( { ...args } ) => {
 	return <ProgressBar { ...args } />;
 };
 
-export const Default: ComponentStory< typeof ProgressBar > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof ProgressBar > = Template.bind( {} );
 Default.args = {};
diff --git a/packages/components/src/progress-bar/styles.ts b/packages/components/src/progress-bar/styles.ts
index 293fb5e14c073..e983797d3d92b 100644
--- a/packages/components/src/progress-bar/styles.ts
+++ b/packages/components/src/progress-bar/styles.ts
@@ -54,7 +54,10 @@ export const Indicator = styled.div< {
 					animationName: animateProgressBar,
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
-			: css( { width: `${ value }%` } ) };
+			: css( {
+					width: `${ value }%`,
+					transition: 'width 0.4s ease-in-out',
+			  } ) };
 `;
 
 export const ProgressElement = styled.progress`
diff --git a/packages/components/src/query-controls/stories/index.story.tsx b/packages/components/src/query-controls/stories/index.story.tsx
index 293da6c500b45..04fe185a59eac 100644
--- a/packages/components/src/query-controls/stories/index.story.tsx
+++ b/packages/components/src/query-controls/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ import type {
 	QueryControlsWithMultipleCategorySelectionProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof QueryControls > = {
+const meta: Meta< typeof QueryControls > = {
 	title: 'Components/QueryControls',
 	component: QueryControls,
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof QueryControls > = {
 };
 export default meta;
 
-export const Default: Story< typeof QueryControls > = ( args ) => {
+export const Default: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -146,7 +146,7 @@ Default.args = {
 	selectedAuthorId: 1,
 };
 
-const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
+const SingleCategoryTemplate: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -184,8 +184,7 @@ const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
 		/>
 	);
 };
-export const SelectSingleCategory: Story< typeof QueryControls > =
-	SingleCategoryTemplate.bind( {} );
+export const SelectSingleCategory = SingleCategoryTemplate.bind( {} );
 SelectSingleCategory.args = {
 	categoriesList: [
 		{
diff --git a/packages/components/src/radio-control/stories/index.story.tsx b/packages/components/src/radio-control/stories/index.story.tsx
index c6729804bb595..7be398e77e17c 100644
--- a/packages/components/src/radio-control/stories/index.story.tsx
+++ b/packages/components/src/radio-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import RadioControl from '..';
 
-const meta: ComponentMeta< typeof RadioControl > = {
+const meta: Meta< typeof RadioControl > = {
 	component: RadioControl,
 	title: 'Components/RadioControl',
 	argTypes: {
@@ -39,7 +39,7 @@ const meta: ComponentMeta< typeof RadioControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RadioControl > = ( {
+const Template: StoryFn< typeof RadioControl > = ( {
 	onChange,
 	options,
 	...args
@@ -59,9 +59,7 @@ const Template: ComponentStory< typeof RadioControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RadioControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RadioControl > = Template.bind( {} );
 Default.args = {
 	label: 'Post visibility',
 	options: [
diff --git a/packages/components/src/radio-group/stories/index.story.js b/packages/components/src/radio-group/stories/index.story.js
index 2099c88d866af..58125bf808be2 100644
--- a/packages/components/src/radio-group/stories/index.story.js
+++ b/packages/components/src/radio-group/stories/index.story.js
@@ -12,6 +12,7 @@ import RadioGroup from '../';
 export default {
 	title: 'Components (Deprecated)/RadioGroup',
 	component: RadioGroup,
+	subcomponents: { Radio },
 	parameters: {
 		docs: {
 			description: {
diff --git a/packages/components/src/range-control/stories/index.story.tsx b/packages/components/src/range-control/stories/index.story.tsx
index 3c07d85b8088a..4e0c1f19e078b 100644
--- a/packages/components/src/range-control/stories/index.story.tsx
+++ b/packages/components/src/range-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import RangeControl from '..';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof RangeControl > = {
+const meta: Meta< typeof RangeControl > = {
 	component: RangeControl,
 	title: 'Components/RangeControl',
 	argTypes: {
@@ -53,10 +53,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RangeControl > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState< number >();
 
 	return (
@@ -71,9 +68,7 @@ const Template: ComponentStory< typeof RangeControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RangeControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
@@ -87,7 +82,7 @@ Default.args = {
  * values. This also overrides both `withInputField` and `showTooltip` props to
  * `false`.
  */
-export const WithAnyStep: ComponentStory< typeof RangeControl > = ( {
+export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -113,7 +108,7 @@ WithAnyStep.args = {
 	step: 'any',
 };
 
-const MarkTemplate: ComponentStory< typeof RangeControl > = ( {
+const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 	label,
 	onChange,
 	...args
@@ -168,7 +163,7 @@ const marksWithNegatives = [
  * automatically generated or custom mark indicators can be provided by an
  * `Array`.
  */
-export const WithIntegerStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
@@ -184,7 +179,7 @@ WithIntegerStepAndMarks.args = {
  * `step` ticks. Marks may be automatically generated or custom mark indicators
  * can be provided by an `Array`.
  */
-export const WithDecimalStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
@@ -203,9 +198,8 @@ WithDecimalStepAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeMinimumAndMarks: ComponentStory<
-	typeof RangeControl
-> = MarkTemplate.bind( {} );
+export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
 	marks: marksWithNegatives,
@@ -219,7 +213,7 @@ WithNegativeMinimumAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeRangeAndMarks: ComponentStory< typeof RangeControl > =
+export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
@@ -234,7 +228,7 @@ WithNegativeRangeAndMarks.args = {
  * non-integer values. This may still be used in conjunction with `marks`
  * rendering a visual representation of `step` ticks.
  */
-export const WithAnyStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {
diff --git a/packages/components/src/resizable-box/stories/index.story.tsx b/packages/components/src/resizable-box/stories/index.story.tsx
index 2e05877853b51..81852f9cb4ea4 100644
--- a/packages/components/src/resizable-box/stories/index.story.tsx
+++ b/packages/components/src/resizable-box/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import ResizableBox from '..';
  */
 import { useState } from '@wordpress/element';
 
-const meta: ComponentMeta< typeof ResizableBox > = {
+const meta: Meta< typeof ResizableBox > = {
 	title: 'Components/ResizableBox',
 	component: ResizableBox,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof ResizableBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResizableBox > = ( {
+const Template: StoryFn< typeof ResizableBox > = ( {
 	onResizeStop,
 	...props
 } ) => {
diff --git a/packages/components/src/responsive-wrapper/stories/index.story.tsx b/packages/components/src/responsive-wrapper/stories/index.story.tsx
index 409a266e81da2..cf676c3bcec80 100644
--- a/packages/components/src/responsive-wrapper/stories/index.story.tsx
+++ b/packages/components/src/responsive-wrapper/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import ResponsiveWrapper from '..';
 
-const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+const meta: Meta< typeof ResponsiveWrapper > = {
 	component: ResponsiveWrapper,
 	title: 'Components/ResponsiveWrapper',
 	argTypes: {
@@ -21,7 +21,7 @@ const meta: ComponentMeta< typeof ResponsiveWrapper > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+const Template: StoryFn< typeof ResponsiveWrapper > = ( args ) => (
 	<ResponsiveWrapper { ...args } />
 );
 
@@ -46,8 +46,7 @@ Default.args = {
  * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
  * its container, unless the `height` and `width` attributes are specified.
  */
-export const WithSVG: ComponentStory< typeof ResponsiveWrapper > =
-	Template.bind( {} );
+export const WithSVG: StoryFn< typeof ResponsiveWrapper > = Template.bind( {} );
 WithSVG.args = {
 	children: (
 		<svg
diff --git a/packages/components/src/sandbox/stories/index.story.tsx b/packages/components/src/sandbox/stories/index.story.tsx
index 1d1ea23347cd8..efa8db621a4a6 100644
--- a/packages/components/src/sandbox/stories/index.story.tsx
+++ b/packages/components/src/sandbox/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import SandBox from '..';
 
-const meta: ComponentMeta< typeof SandBox > = {
+const meta: Meta< typeof SandBox > = {
 	component: SandBox,
 	title: 'Components/SandBox',
 	argTypes: {
@@ -22,9 +22,7 @@ const meta: ComponentMeta< typeof SandBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof SandBox > = ( args ) => (
-	<SandBox { ...args } />
-);
+const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
diff --git a/packages/components/src/scroll-lock/stories/index.story.tsx b/packages/components/src/scroll-lock/stories/index.story.tsx
index 113a7d0c7f7bc..8518c0c520a48 100644
--- a/packages/components/src/scroll-lock/stories/index.story.tsx
+++ b/packages/components/src/scroll-lock/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -15,7 +15,7 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import ScrollLock from '..';
 
-const meta: ComponentMeta< typeof ScrollLock > = {
+const meta: Meta< typeof ScrollLock > = {
 	component: ScrollLock,
 	title: 'Components/ScrollLock',
 	parameters: {
@@ -59,7 +59,7 @@ function ToggleContainer( props: { children: ReactNode } ) {
 	);
 }
 
-export const Default: ComponentStory< typeof ScrollLock > = () => {
+export const Default: StoryFn< typeof ScrollLock > = () => {
 	const [ isScrollLocked, setScrollLocked ] = useState( false );
 	const toggleLock = () => setScrollLocked( ! isScrollLocked );
 
diff --git a/packages/components/src/scrollable/stories/index.story.tsx b/packages/components/src/scrollable/stories/index.story.tsx
index 0048beb400501..53d4919de3aab 100644
--- a/packages/components/src/scrollable/stories/index.story.tsx
+++ b/packages/components/src/scrollable/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useRef } from '@wordpress/element';
 import { View } from '../../view';
 import { Scrollable } from '..';
 
-const meta: ComponentMeta< typeof Scrollable > = {
+const meta: Meta< typeof Scrollable > = {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
 	argTypes: {
@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Scrollable > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
+const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 	const targetRef = useRef< HTMLInputElement >( null );
 
 	const onButtonClick = () => {
@@ -76,7 +76,7 @@ const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Scrollable > = Template.bind( {} );
+export const Default: StoryFn< typeof Scrollable > = Template.bind( {} );
 Default.args = {
 	smoothScroll: false,
 	scrollDirection: 'y',
diff --git a/packages/components/src/search-control/index.native.js b/packages/components/src/search-control/index.native.js
index 6f640f9960a3a..6cdabf966899f 100644
--- a/packages/components/src/search-control/index.native.js
+++ b/packages/components/src/search-control/index.native.js
@@ -14,7 +14,13 @@ import {
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useMemo, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useMemo,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, Gridicons } from '@wordpress/components';
 import {
@@ -120,23 +126,44 @@ function SearchControl( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isActive, isDark ] );
 
+	const clearInput = useCallback( () => {
+		onChange( '' );
+	}, [ onChange ] );
+
+	const onPress = useCallback( () => {
+		setIsActive( true );
+		inputRef.current?.focus();
+	}, [] );
+
+	const onFocus = useCallback( () => {
+		setIsActive( true );
+	}, [] );
+
+	const onCancel = useCallback( () => {
+		clearTimeout( onCancelTimer.current );
+		onCancelTimer.current = setTimeout( () => {
+			inputRef.current?.blur();
+			clearInput();
+			setIsActive( false );
+		}, 0 );
+	}, [ clearInput ] );
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( ! isIOS ) {
+			onCancel();
+		}
+	}, [ isIOS, onCancel ] );
+
 	useEffect( () => {
 		const keyboardHideSubscription = Keyboard.addListener(
 			'keyboardDidHide',
-			() => {
-				if ( ! isIOS ) {
-					onCancel();
-				}
-			}
+			onKeyboardDidHide
 		);
 		return () => {
 			clearTimeout( onCancelTimer.current );
 			keyboardHideSubscription.remove();
 		};
-		// Disable reason: deferring this refactor to the native team.
-		// see https://github.com/WordPress/gutenberg/pull/41166
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
+	}, [ onKeyboardDidHide ] );
 
 	const {
 		'search-control__container': containerStyle,
@@ -153,18 +180,6 @@ function SearchControl( {
 		'search-control__right-icon': rightIconStyle,
 	} = currentStyles;
 
-	function clearInput() {
-		onChange( '' );
-	}
-
-	function onCancel() {
-		onCancelTimer.current = setTimeout( () => {
-			inputRef.current.blur();
-			clearInput();
-			setIsActive( false );
-		}, 0 );
-	}
-
 	function renderLeftButton() {
 		const button =
 			! isIOS && isActive ? (
@@ -234,10 +249,7 @@ function SearchControl( {
 	return (
 		<TouchableOpacity
 			style={ containerStyle }
-			onPress={ () => {
-				setIsActive( true );
-				inputRef.current.focus();
-			} }
+			onPress={ onPress }
 			activeOpacity={ 1 }
 		>
 			<View style={ innerContainerStyle }>
@@ -248,7 +260,7 @@ function SearchControl( {
 						style={ formInputStyle }
 						placeholderTextColor={ placeholderStyle?.color }
 						onChangeText={ onChange }
-						onFocus={ () => setIsActive( true ) }
+						onFocus={ onFocus }
 						value={ value }
 						placeholder={ placeholder }
 					/>
diff --git a/packages/components/src/search-control/stories/index.story.tsx b/packages/components/src/search-control/stories/index.story.tsx
index b6235b4bad63e..1a6e58724ccb2 100644
--- a/packages/components/src/search-control/stories/index.story.tsx
+++ b/packages/components/src/search-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SearchControl from '..';
 
-const meta: ComponentMeta< typeof SearchControl > = {
+const meta: Meta< typeof SearchControl > = {
 	title: 'Components/SearchControl',
 	component: SearchControl,
 	argTypes: {
@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof SearchControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof SearchControl > = ( {
+const Template: StoryFn< typeof SearchControl > = ( {
 	onChange,
 	...props
 } ) => {
diff --git a/packages/components/src/select-control/stories/index.story.tsx b/packages/components/src/select-control/stories/index.story.tsx
index eea1561cf2c2b..42966ef4f05f4 100644
--- a/packages/components/src/select-control/stories/index.story.tsx
+++ b/packages/components/src/select-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ const meta: Meta< typeof SelectControl > = {
 };
 export default meta;
 
-const SelectControlWithState: Story< typeof SelectControl > = ( props ) => {
+const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 	const [ selection, setSelection ] = useState< string[] >();
 
 	if ( props.multiple ) {
@@ -82,7 +82,7 @@ WithLabelAndHelpText.args = {
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
  * passed in as `children` for more customizeability.
  */
-export const WithCustomChildren: Story< typeof SelectControl > = ( args ) => {
+export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
 	return (
 		<SelectControlWithState { ...args }>
 			<option value="option-1">Option 1</option>
diff --git a/packages/components/src/shortcut/index.tsx b/packages/components/src/shortcut/index.tsx
index dbdaa955384f5..5ba7c7efdfff0 100644
--- a/packages/components/src/shortcut/index.tsx
+++ b/packages/components/src/shortcut/index.tsx
@@ -3,6 +3,19 @@
  */
 import type { ShortcutProps } from './types';
 
+/**
+ * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
+ *
+ * ```jsx
+ * import { Shortcut } from '@wordpress/components';
+ *
+ * const MyShortcut = () => {
+ * 	return (
+ * 		<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
+ * 	);
+ * };
+ * ```
+ */
 function Shortcut( props: ShortcutProps ) {
 	const { shortcut, className } = props;
 
diff --git a/packages/components/src/shortcut/stories/index.story.tsx b/packages/components/src/shortcut/stories/index.story.tsx
new file mode 100644
index 0000000000000..27e96e3f6d198
--- /dev/null
+++ b/packages/components/src/shortcut/stories/index.story.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from '../';
+
+const meta: Meta< typeof Shortcut > = {
+	component: Shortcut,
+	title: 'Components/Shortcut',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Shortcut > = ( props ) => {
+	return <Shortcut shortcut="Ctrl + S" { ...props } />;
+};
+
+export const Default: StoryFn< typeof Shortcut > = Template.bind( {} );
+
+export const WithAriaLabel = Template.bind( {} );
+WithAriaLabel.args = {
+	...Default.args,
+	shortcut: { display: 'Ctrl + L', ariaLabel: 'Load' },
+};
diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md
index ccd4675588c23..a04416bdee50d 100644
--- a/packages/components/src/slot-fill/README.md
+++ b/packages/components/src/slot-fill/README.md
@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
+`Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -103,14 +103,14 @@ const ToolbarItem = () => (
 	</Fill>
 );
 
-const Toolbar = () => 
-	const hideToolbar() => {
+const Toolbar = () => {
+	const hideToolbar = () => {
 		console.log( 'Hide toolbar' );
-	}
+	};
 	return (
 		<div className="toolbar">
 			<Slot fillProps={ { hideToolbar } } />
 		</div>
 	);
-);
+};
 ```
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
index cd1576fd19c3a..e3c6652f22e94 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
@@ -22,6 +22,9 @@ const SlotFillContext = createContext( {
 	unregisterSlot: () => {},
 	registerFill: () => {},
 	unregisterFill: () => {},
+
+	// This helps the provider know if it's using the default context value or not.
+	isDefault: true,
 } );
 
 export default SlotFillContext;
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js
index ef7ad56cc68ba..be6fde0c8e6b7 100644
--- a/packages/components/src/slot-fill/bubbles-virtually/slot.js
+++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js
@@ -13,12 +13,20 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { View } from '../../view';
 import SlotFillContext from './slot-fill-context';
 
-function Slot(
-	{ name, fillProps = {}, as: Component = 'div', ...props },
-	forwardedRef
-) {
+function Slot( props, forwardedRef ) {
+	const {
+		name,
+		fillProps = {},
+		as,
+		// `children` is not allowed. However, if it is passed,
+		// it will be displayed as is, so remove `children`.
+		children,
+		...restProps
+	} = props;
+
 	const { registerSlot, unregisterSlot, ...registry } =
 		useContext( SlotFillContext );
 	const ref = useRef();
@@ -41,7 +49,11 @@ function Slot(
 	} );
 
 	return (
-		<Component ref={ useMergeRefs( [ forwardedRef, ref ] ) } { ...props } />
+		<View
+			as={ as }
+			ref={ useMergeRefs( [ forwardedRef, ref ] ) }
+			{ ...restProps }
+		/>
 	);
 }
 
diff --git a/packages/components/src/slot-fill/index.js b/packages/components/src/slot-fill/index.js
index 8deaa180492a7..34216fd347c05 100644
--- a/packages/components/src/slot-fill/index.js
+++ b/packages/components/src/slot-fill/index.js
@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +13,7 @@ import BubblesVirtuallyFill from './bubbles-virtually/fill';
 import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
+import SlotFillContext from './bubbles-virtually/slot-fill-context';
 export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
@@ -35,6 +36,10 @@ export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
 } );
 
 export function Provider( { children, ...props } ) {
+	const parent = useContext( SlotFillContext );
+	if ( ! parent.isDefault ) {
+		return children;
+	}
 	return (
 		<SlotFillProvider { ...props }>
 			<BubblesVirtuallySlotFillProvider>
diff --git a/packages/components/src/slot-fill/stories/index.story.js b/packages/components/src/slot-fill/stories/index.story.js
index 09de9dd67573c..c1ab26162497e 100644
--- a/packages/components/src/slot-fill/stories/index.story.js
+++ b/packages/components/src/slot-fill/stories/index.story.js
@@ -11,6 +11,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 export default {
 	title: 'Components/SlotFill',
 	component: Slot,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Fill, SlotFillProvider },
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
diff --git a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
index d57954b0444f9..b9379eda7171a 100644
--- a/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
+++ b/packages/components/src/slot-fill/test/__snapshots__/slot.js.snap
@@ -42,12 +42,16 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="first"
   >
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -62,7 +66,9 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -187,7 +193,9 @@ exports[`Slot should render in expected order when fills unmounted 1`] = `
 exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
 </div>
 `;
diff --git a/packages/components/src/snackbar/stories/index.story.tsx b/packages/components/src/snackbar/stories/index.story.tsx
index 1ac577e222035..953b33d273b3f 100644
--- a/packages/components/src/snackbar/stories/index.story.tsx
+++ b/packages/components/src/snackbar/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import Snackbar from '..';
 
-const meta: ComponentMeta< typeof Snackbar > = {
+const meta: Meta< typeof Snackbar > = {
 	title: 'Components/Snackbar',
 	component: Snackbar,
 	argTypes: {
@@ -34,23 +34,22 @@ const meta: ComponentMeta< typeof Snackbar > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Snackbar > = ( {
+const DefaultTemplate: StoryFn< typeof Snackbar > = ( {
 	children,
 	...props
 } ) => {
 	return <Snackbar { ...props }>{ children }</Snackbar>;
 };
 
-export const Default: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 Default.args = {
 	children:
 		'Use Snackbars to communicate low priority, non-interruptive messages to the user.',
 };
 
-export const WithActions: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
+export const WithActions: StoryFn< typeof Snackbar > = DefaultTemplate.bind(
+	{}
+);
 WithActions.args = {
 	actions: [
 		{
@@ -61,9 +60,7 @@ WithActions.args = {
 	children: 'Use Snackbars with an action link to an external page.',
 };
 
-export const WithIcon: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {
 	children: 'Add an icon to make your snackbar stand out',
 	icon: (
@@ -73,7 +70,7 @@ WithIcon.args = {
 	),
 };
 
-export const WithExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithExplicitDismiss.args = {
 	children:
@@ -81,7 +78,7 @@ WithExplicitDismiss.args = {
 	explicitDismiss: true,
 };
 
-export const WithActionAndExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithActionAndExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithActionAndExplicitDismiss.args = {
 	actions: [
diff --git a/packages/components/src/snackbar/stories/list.story.tsx b/packages/components/src/snackbar/stories/list.story.tsx
index f30e01aa48ec3..5a759ddc661bf 100644
--- a/packages/components/src/snackbar/stories/list.story.tsx
+++ b/packages/components/src/snackbar/stories/list.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SnackbarList from '../list';
 
-const meta: ComponentMeta< typeof SnackbarList > = {
+const meta: Meta< typeof SnackbarList > = {
 	title: 'Components/SnackbarList',
 	component: SnackbarList,
 	argTypes: {
@@ -32,7 +32,7 @@ const meta: ComponentMeta< typeof SnackbarList > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof SnackbarList > = ( {
+export const Default: StoryFn< typeof SnackbarList > = ( {
 	children,
 	notices: noticesProp,
 	...props
diff --git a/packages/components/src/spacer/stories/index.story.tsx b/packages/components/src/spacer/stories/index.story.tsx
index c73f2e1ee5e02..586658ac0f01f 100644
--- a/packages/components/src/spacer/stories/index.story.tsx
+++ b/packages/components/src/spacer/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ const controls = [
 	{}
 );
 
-const meta: ComponentMeta< typeof Spacer > = {
+const meta: Meta< typeof Spacer > = {
 	component: Spacer,
 	title: 'Components (Experimental)/Spacer',
 	argTypes: {
@@ -54,7 +54,7 @@ const BlackBox = () => (
 	/>
 );
 
-const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+const Template: StoryFn< typeof Spacer > = ( { onChange, ...args } ) => {
 	return (
 		<>
 			<BlackBox />
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
 Default.args = {
 	children: 'This is the spacer',
 };
diff --git a/packages/components/src/spinner/index.tsx b/packages/components/src/spinner/index.tsx
index 8fa34b9b230d3..9eee9dde18ef2 100644
--- a/packages/components/src/spinner/index.tsx
+++ b/packages/components/src/spinner/index.tsx
@@ -50,7 +50,6 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * @example
  * ```js
  *   import { Spinner } from '@wordpress/components';
  *
diff --git a/packages/components/src/spinner/stories/index.story.tsx b/packages/components/src/spinner/stories/index.story.tsx
index 63b38548bc582..dfd6fb26f25ae 100644
--- a/packages/components/src/spinner/stories/index.story.tsx
+++ b/packages/components/src/spinner/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import Spinner from '../';
 import { space } from '../../ui/utils/space';
 
-const meta: ComponentMeta< typeof Spinner > = {
+const meta: Meta< typeof Spinner > = {
 	title: 'Components/Spinner',
 	component: Spinner,
 	parameters: {
@@ -21,12 +21,12 @@ const meta: ComponentMeta< typeof Spinner > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Spinner > = ( args ) => {
+const Template: StoryFn< typeof Spinner > = ( args ) => {
 	return <Spinner { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const Default: StoryFn< typeof Spinner > = Template.bind( {} );
 
 // The Spinner can be resized to any size, but the stroke width will remain unchanged.
-export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const CustomSize: StoryFn< typeof Spinner > = Template.bind( {} );
 CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };
diff --git a/packages/components/src/surface/stories/index.story.tsx b/packages/components/src/surface/stories/index.story.tsx
index 7689f66eabdc5..7f6790d09c848 100644
--- a/packages/components/src/surface/stories/index.story.tsx
+++ b/packages/components/src/surface/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Surface } from '..';
 import { Text } from '../../text';
 
-const meta: ComponentMeta< typeof Surface > = {
+const meta: Meta< typeof Surface > = {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Surface > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Surface > = ( args ) => {
+const Template: StoryFn< typeof Surface > = ( args ) => {
 	return (
 		<Surface
 			{ ...args }
@@ -36,5 +36,5 @@ const Template: ComponentStory< typeof Surface > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
+export const Default: StoryFn< typeof Surface > = Template.bind( {} );
 Default.args = {};
diff --git a/packages/components/src/tab-panel/stories/index.story.tsx b/packages/components/src/tab-panel/stories/index.story.tsx
index e5f68932cd497..e2f146d55865c 100644
--- a/packages/components/src/tab-panel/stories/index.story.tsx
+++ b/packages/components/src/tab-panel/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -12,10 +12,8 @@ import { link, more, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof TabPanel > = {
+const meta: Meta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
@@ -26,7 +24,7 @@ const meta: ComponentMeta< typeof TabPanel > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TabPanel > = ( props ) => {
+const Template: StoryFn< typeof TabPanel > = ( props ) => {
 	return <TabPanel { ...props } />;
 };
 
@@ -65,14 +63,8 @@ DisabledTab.args = {
 	],
 };
 
-const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
-	return (
-		<SlotFillProvider>
-			<TabPanel { ...props } />
-			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
+const SlotFillTemplate: StoryFn< typeof TabPanel > = ( props ) => {
+	return <TabPanel { ...props } />;
 };
 
 export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
diff --git a/packages/components/src/tab-panel/test/index.tsx b/packages/components/src/tab-panel/test/index.tsx
index c3102fe26833b..723ed4d17ff2d 100644
--- a/packages/components/src/tab-panel/test/index.tsx
+++ b/packages/components/src/tab-panel/test/index.tsx
@@ -13,8 +13,6 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
-import Popover from '../../popover';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const TABS = [
 	{
@@ -107,17 +105,10 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+				/>
 			);
 
 			const allTabs = screen.getAllByRole( 'tab' );
@@ -152,18 +143,11 @@ describe.each( [
 			];
 
 			render(
-				// In order for the tooltip to display properly, there needs to be
-				// `Popover.Slot` in which the `Popover` renders outside of the
-				// `TabPanel` component, otherwise the tooltip renders inline.
-				<SlotFillProvider>
-					<Component
-						tabs={ TABS_WITH_ICON }
-						children={ panelRenderFunction }
-						onSelect={ mockOnSelect }
-					/>
-					{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
-					<Popover.Slot />
-				</SlotFillProvider>
+				<Component
+					tabs={ TABS_WITH_ICON }
+					children={ panelRenderFunction }
+					onSelect={ mockOnSelect }
+				/>
 			);
 
 			expect( await getSelectedTab() ).not.toHaveTextContent( 'Alpha' );
diff --git a/packages/components/src/text-control/stories/index.story.tsx b/packages/components/src/text-control/stories/index.story.tsx
index b5be8f88dc64f..ddc8af7a9f2b3 100644
--- a/packages/components/src/text-control/stories/index.story.tsx
+++ b/packages/components/src/text-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextControl from '..';
 
-const meta: ComponentMeta< typeof TextControl > = {
+const meta: Meta< typeof TextControl > = {
 	component: TextControl,
 	title: 'Components/TextControl',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
+const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,11 +49,12 @@ const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {};
 
-export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
+export const WithLabelAndHelpText: StoryFn< typeof TextControl > =
 	DefaultTemplate.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
diff --git a/packages/components/src/text-highlight/stories/index.story.tsx b/packages/components/src/text-highlight/stories/index.story.tsx
index bf86311414b1a..d54149d8e19d3 100644
--- a/packages/components/src/text-highlight/stories/index.story.tsx
+++ b/packages/components/src/text-highlight/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import TextHighlight from '..';
 
-const meta: ComponentMeta< typeof TextHighlight > = {
+const meta: Meta< typeof TextHighlight > = {
 	component: TextHighlight,
 	title: 'Components/TextHighlight',
 	parameters: {
@@ -20,13 +20,11 @@ const meta: ComponentMeta< typeof TextHighlight > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextHighlight > = ( args ) => {
+const Template: StoryFn< typeof TextHighlight > = ( args ) => {
 	return <TextHighlight { ...args } />;
 };
 
-export const Default: ComponentStory< typeof TextHighlight > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextHighlight > = Template.bind( {} );
 Default.args = {
 	text: 'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.',
 	highlight: 'Gutenberg',
diff --git a/packages/components/src/textarea-control/stories/index.story.tsx b/packages/components/src/textarea-control/stories/index.story.tsx
index f227a0c0c31cb..e227519a06938 100644
--- a/packages/components/src/textarea-control/stories/index.story.tsx
+++ b/packages/components/src/textarea-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TextareaControl from '..';
 
-const meta: ComponentMeta< typeof TextareaControl > = {
+const meta: Meta< typeof TextareaControl > = {
 	component: TextareaControl,
 	title: 'Components/TextareaControl',
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof TextareaControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof TextareaControl > = ( {
+const Template: StoryFn< typeof TextareaControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -49,9 +49,7 @@ const Template: ComponentStory< typeof TextareaControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof TextareaControl > = Template.bind( {} );
 Default.args = {
 	label: 'Text',
 	help: 'Enter some text',
diff --git a/packages/components/src/theme/index.tsx b/packages/components/src/theme/index.tsx
index 984ec32a07ce3..ce1e11246e0d3 100644
--- a/packages/components/src/theme/index.tsx
+++ b/packages/components/src/theme/index.tsx
@@ -18,7 +18,6 @@ import { useCx } from '../utils';
  * Multiple `Theme` components can be nested in order to override specific theme variables.
  *
  *
- * @example
  * ```jsx
  * const Example = () => {
  *   return (
diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx
index 235c9fe2c8d54..3d52dea7fba57 100644
--- a/packages/components/src/theme/stories/index.story.tsx
+++ b/packages/components/src/theme/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import Button from '../../button';
 import { generateThemeVariables, checkContrasts } from '../color-algorithms';
 import { HStack } from '../../h-stack';
 
-const meta: ComponentMeta< typeof Theme > = {
+const meta: Meta< typeof Theme > = {
 	component: Theme,
 	title: 'Components (Experimental)/Theme',
 	argTypes: {
@@ -25,7 +25,7 @@ const meta: ComponentMeta< typeof Theme > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Theme > = ( args ) => (
+const Template: StoryFn< typeof Theme > = ( args ) => (
 	<Theme { ...args }>
 		<Button variant="primary">Hello</Button>
 	</Theme>
@@ -34,7 +34,7 @@ const Template: ComponentStory< typeof Theme > = ( args ) => (
 export const Default = Template.bind( {} );
 Default.args = {};
 
-export const Nested: ComponentStory< typeof Theme > = ( args ) => (
+export const Nested: StoryFn< typeof Theme > = ( args ) => (
 	<Theme accent="tomato">
 		<Button variant="primary">Outer theme (hardcoded)</Button>
 
@@ -52,7 +52,7 @@ Nested.args = {
 /**
  * The rest of the required colors are generated based on the given accent and background colors.
  */
-export const ColorScheme: ComponentStory< typeof Theme > = ( {
+export const ColorScheme: StoryFn< typeof Theme > = ( {
 	accent,
 	background,
 } ) => {
diff --git a/packages/components/src/tip/stories/index.story.tsx b/packages/components/src/tip/stories/index.story.tsx
index dcdee273147a0..3999c6b9be45f 100644
--- a/packages/components/src/tip/stories/index.story.tsx
+++ b/packages/components/src/tip/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import Tip from '..';
 
-const meta: ComponentMeta< typeof Tip > = {
+const meta: Meta< typeof Tip > = {
 	component: Tip,
 	title: 'Components/Tip',
 	argTypes: {
@@ -23,11 +23,11 @@ const meta: ComponentMeta< typeof Tip > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Tip > = ( args ) => {
+const Template: StoryFn< typeof Tip > = ( args ) => {
 	return <Tip { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Tip > = Template.bind( {} );
+export const Default: StoryFn< typeof Tip > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };
diff --git a/packages/components/src/toggle-control/stories/index.story.tsx b/packages/components/src/toggle-control/stories/index.story.tsx
index 1279801ac7164..b8043b8f48e52 100644
--- a/packages/components/src/toggle-control/stories/index.story.tsx
+++ b/packages/components/src/toggle-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import ToggleControl from '..';
 
-const meta: ComponentMeta< typeof ToggleControl > = {
+const meta: Meta< typeof ToggleControl > = {
 	title: 'Components/ToggleControl',
 	component: ToggleControl,
 	argTypes: {
@@ -29,7 +29,7 @@ const meta: ComponentMeta< typeof ToggleControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ToggleControl > = ( {
+const Template: StoryFn< typeof ToggleControl > = ( {
 	onChange,
 	...props
 } ) => {
diff --git a/packages/components/src/toggle-group-control/stories/index.story.tsx b/packages/components/src/toggle-group-control/stories/index.story.tsx
index d818859083e97..92f1e6076248b 100644
--- a/packages/components/src/toggle-group-control/stories/index.story.tsx
+++ b/packages/components/src/toggle-group-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -23,8 +23,10 @@ import type {
 	ToggleGroupControlProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof ToggleGroupControl > = {
+const meta: Meta< typeof ToggleGroupControl > = {
 	component: ToggleGroupControl,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
 	title: 'Components (Experimental)/ToggleGroupControl',
 	argTypes: {
 		help: { control: { type: 'text' } },
@@ -38,7 +40,7 @@ const meta: ComponentMeta< typeof ToggleGroupControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ToggleGroupControl > = ( {
+const Template: StoryFn< typeof ToggleGroupControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -72,8 +74,9 @@ const mapPropsToOptionIconComponent = ( {
 	<ToggleGroupControlOptionIcon value={ value } key={ value } { ...props } />
 );
 
-export const Default: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Default: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Default.args = {
 	children: [
 		{ value: 'left', label: 'Left' },
@@ -90,8 +93,9 @@ Default.args = {
  * The `aria-label` will be used in the tooltip if provided. Otherwise, the
  * `label` will be used.
  */
-export const WithTooltip: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithTooltip: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithTooltip.args = {
 	...Default.args,
 	children: [
@@ -114,8 +118,9 @@ WithTooltip.args = {
  * The `ToggleGroupControlOptionIcon` component can be used for icon options. A `label` is required
  * on each option for accessibility, which will be shown in a tooltip.
  */
-export const WithIcons: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const WithIcons: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 WithIcons.args = {
 	...Default.args,
 	children: [
@@ -128,8 +133,9 @@ WithIcons.args = {
 /**
  * When the `isDeselectable` prop is true, the option can be deselected by clicking on it again.
  */
-export const Deselectable: ComponentStory< typeof ToggleGroupControl > =
-	Template.bind( {} );
+export const Deselectable: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
 Deselectable.args = {
 	...WithIcons.args,
 	isDeselectable: true,
diff --git a/packages/components/src/toolbar/stories/index.story.tsx b/packages/components/src/toolbar/stories/index.story.tsx
index e596abadc2318..643c32b6909e0 100644
--- a/packages/components/src/toolbar/stories/index.story.tsx
+++ b/packages/components/src/toolbar/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -37,9 +37,19 @@ import {
 } from '..';
 import DropdownMenu from '../../dropdown-menu';
 
-const meta: ComponentMeta< typeof Toolbar > = {
+const meta: Meta< typeof Toolbar > = {
 	title: 'Components/Toolbar',
 	component: Toolbar,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarButton,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarItem,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		ToolbarDropdownMenu,
+	},
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -59,7 +69,7 @@ function InlineImageIcon() {
 	);
 }
 
-const Template: ComponentStory< typeof Toolbar > = ( props ) => (
+const Template: StoryFn< typeof Toolbar > = ( props ) => (
 	<div style={ { height: 280 } }>
 		<Toolbar { ...props } />
 	</div>
diff --git a/packages/components/src/tools-panel/stories/index.story.tsx b/packages/components/src/tools-panel/stories/index.story.tsx
index df4a09a79283e..62b8a22ee447e 100644
--- a/packages/components/src/tools-panel/stories/index.story.tsx
+++ b/packages/components/src/tools-panel/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 
 /**
@@ -25,9 +25,11 @@ import Panel from '../../panel';
 import UnitControl from '../../unit-control';
 import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof ToolsPanel > = {
+const meta: Meta< typeof ToolsPanel > = {
 	title: 'Components (Experimental)/ToolsPanel',
 	component: ToolsPanel,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { ToolsPanelItem },
 	argTypes: {
 		as: { control: { type: null } },
 		children: { control: { type: null } },
@@ -44,7 +46,7 @@ const meta: ComponentMeta< typeof ToolsPanel > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof ToolsPanel > = ( {
+export const Default: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -136,7 +138,7 @@ Default.args = {
 	label: 'Tools Panel (default example)',
 };
 
-export const WithNonToolsPanelItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	...props
 } ) => {
@@ -191,9 +193,10 @@ WithNonToolsPanelItems.args = {
 	label: 'ToolsPanel (with non-menu items)',
 };
 
-export const WithOptionalItemsPlusIcon: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, ...props } ) => {
+export const WithOptionalItemsPlusIcon: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	...props
+} ) => {
 	const [
 		isFirstToolsPanelItemShownByDefault,
 		setIsFirstToolsPanelItemShownByDefault,
@@ -294,7 +297,7 @@ WithOptionalItemsPlusIcon.args = {
 
 const { Fill: ToolsPanelItems, Slot } = createSlotFill( 'ToolsPanelSlot' );
 
-export const WithSlotFillItems: ComponentStory< typeof ToolsPanel > = ( {
+export const WithSlotFillItems: StoryFn< typeof ToolsPanel > = ( {
 	resetAll: resetAllProp,
 	panelId,
 	...props
@@ -392,9 +395,11 @@ WithSlotFillItems.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionalDefaultControl: ComponentStory<
-	typeof ToolsPanel
-> = ( { resetAll: resetAllProp, panelId, ...props } ) => {
+export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
+	resetAll: resetAllProp,
+	panelId,
+	...props
+} ) => {
 	const [ attributes, setAttributes ] = useState< {
 		height?: string;
 		scale?: React.ReactText;
@@ -488,7 +493,7 @@ WithConditionalDefaultControl.args = {
 	panelId: 'unique-tools-panel-id',
 };
 
-export const WithConditionallyRenderedControl: ComponentStory<
+export const WithConditionallyRenderedControl: StoryFn<
 	typeof ToolsPanel
 > = ( { resetAll: resetAllProp, panelId, ...props } ) => {
 	const [ attributes, setAttributes ] = useState< {
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index b7c9f736566d0..35f27983c1813 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -214,6 +214,9 @@ const ToolsPanelHeader = (
 							<MenuGroup>
 								<MenuItem
 									aria-disabled={ ! canResetAll }
+									// @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem,
+									// we should rename it and explicitly allow it as an official API. All the other Button variants
+									// don't make sense in a MenuItem context, and should be disallowed.
 									variant={ 'tertiary' }
 									onClick={ () => {
 										if ( canResetAll ) {
diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx
index 223a9f0ba27f8..42028b48f862b 100644
--- a/packages/components/src/tools-panel/tools-panel/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel/component.tsx
@@ -48,7 +48,6 @@ const UnconnectedToolsPanel = (
  * by a header. The header includes a dropdown menu which is automatically
  * generated from the panel's inner `ToolsPanelItems`.
  *
- * @example
  * ```jsx
  * import { __ } from '@wordpress/i18n';
  * import {
diff --git a/packages/components/src/tree-grid/stories/index.story.tsx b/packages/components/src/tree-grid/stories/index.story.tsx
index 1467ffe5660c8..44af154c685b2 100644
--- a/packages/components/src/tree-grid/stories/index.story.tsx
+++ b/packages/components/src/tree-grid/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -15,9 +15,11 @@ import TreeGrid, { TreeGridRow, TreeGridCell } from '..';
 import { Button } from '../../button';
 import InputControl from '../../input-control';
 
-const meta: ComponentMeta< typeof TreeGrid > = {
+const meta: Meta< typeof TreeGrid > = {
 	title: 'Components (Experimental)/TreeGrid',
 	component: TreeGrid,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { TreeGridRow, TreeGridCell },
 	argTypes: {
 		children: { control: { type: null } },
 	},
@@ -133,7 +135,7 @@ const Rows = ( {
 	);
 };
 
-const Template: ComponentStory< typeof TreeGrid > = ( args ) => (
+const Template: StoryFn< typeof TreeGrid > = ( args ) => (
 	<TreeGrid { ...args } />
 );
 
diff --git a/packages/components/src/tree-select/index.tsx b/packages/components/src/tree-select/index.tsx
index 0c247901f432f..dbb8686df4d29 100644
--- a/packages/components/src/tree-select/index.tsx
+++ b/packages/components/src/tree-select/index.tsx
@@ -27,7 +27,6 @@ function getSelectOptions(
 /**
  * TreeSelect component is used to generate select input fields.
  *
- * @example
  * ```jsx
  * import { TreeSelect } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
diff --git a/packages/components/src/tree-select/stories/index.story.tsx b/packages/components/src/tree-select/stories/index.story.tsx
index be16f7d00be6d..0a4212dc79122 100644
--- a/packages/components/src/tree-select/stories/index.story.tsx
+++ b/packages/components/src/tree-select/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import TreeSelect from '../';
 
-const meta: ComponentMeta< typeof TreeSelect > = {
+const meta: Meta< typeof TreeSelect > = {
 	title: 'Components/TreeSelect',
 	component: TreeSelect,
 	argTypes: {
@@ -33,7 +33,7 @@ const meta: ComponentMeta< typeof TreeSelect > = {
 
 export default meta;
 
-const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
+const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 	const [ selection, setSelection ] =
 		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
 
diff --git a/packages/components/src/truncate/stories/index.story.tsx b/packages/components/src/truncate/stories/index.story.tsx
index 701513d953f49..84eaf59edbb3e 100644
--- a/packages/components/src/truncate/stories/index.story.tsx
+++ b/packages/components/src/truncate/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { Truncate } from '..';
 
-const meta: ComponentMeta< typeof Truncate > = {
+const meta: Meta< typeof Truncate > = {
 	component: Truncate,
 	title: 'Components (Experimental)/Truncate',
 	argTypes: {
@@ -27,19 +27,17 @@ export default meta;
 const defaultText =
 	'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. Duis semper dui id augue malesuada, ut feugiat nisi aliquam. Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat risus. Vivamus iaculis dui aliquet ante ultricies feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus nec pretium velit, sit amet consectetur ante. Praesent porttitor ex eget fermentum mattis.';
 
-const Template: ComponentStory< typeof Truncate > = ( args ) => {
+const Template: StoryFn< typeof Truncate > = ( args ) => {
 	return <Truncate { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Truncate > = Template.bind( {} );
+export const Default: StoryFn< typeof Truncate > = Template.bind( {} );
 Default.args = {
 	numberOfLines: 2,
 	children: defaultText,
 };
 
-export const CharacterCount: ComponentStory< typeof Truncate > = Template.bind(
-	{}
-);
+export const CharacterCount: StoryFn< typeof Truncate > = Template.bind( {} );
 CharacterCount.args = {
 	limit: 23,
 	children: defaultText,
diff --git a/packages/components/src/unit-control/index.tsx b/packages/components/src/unit-control/index.tsx
index 073801df17c15..cd5bf4e478768 100644
--- a/packages/components/src/unit-control/index.tsx
+++ b/packages/components/src/unit-control/index.tsx
@@ -223,7 +223,6 @@ function UnforwardedUnitControl(
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
- * @example
  * ```jsx
  * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
diff --git a/packages/components/src/unit-control/stories/index.story.tsx b/packages/components/src/unit-control/stories/index.story.tsx
index 477b6a2251a57..5134d4902144d 100644
--- a/packages/components/src/unit-control/stories/index.story.tsx
+++ b/packages/components/src/unit-control/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import { UnitControl } from '../';
 import { CSS_UNITS } from '../utils';
 
-const meta: ComponentMeta< typeof UnitControl > = {
+const meta: Meta< typeof UnitControl > = {
 	component: UnitControl,
 	title: 'Components (Experimental)/UnitControl',
 	argTypes: {
@@ -35,7 +35,7 @@ const meta: ComponentMeta< typeof UnitControl > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
+const DefaultTemplate: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -53,8 +53,9 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof UnitControl > =
-	DefaultTemplate.bind( {} );
+export const Default: StoryFn< typeof UnitControl > = DefaultTemplate.bind(
+	{}
+);
 Default.args = {
 	label: 'Label',
 };
@@ -64,7 +65,7 @@ Default.args = {
  * will not fire while a new value is typed in the input field (you can verify this
  * behavior by inspecting the console's output).
  */
-export const PressEnterToChange: ComponentStory< typeof UnitControl > =
+export const PressEnterToChange: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 PressEnterToChange.args = {
 	...Default.args,
@@ -75,7 +76,7 @@ PressEnterToChange.args = {
  * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
  * affect its numeric input field.
  */
-export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
+export const TweakingTheNumberInput: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 TweakingTheNumberInput.args = {
 	...Default.args,
@@ -88,7 +89,7 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory< typeof UnitControl > =
+export const WithSingleUnit: StoryFn< typeof UnitControl > =
 	DefaultTemplate.bind( {} );
 WithSingleUnit.args = {
 	...Default.args,
@@ -100,7 +101,7 @@ WithSingleUnit.args = {
  * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
  * reset to the new unit's default value.
  */
-export const WithCustomUnits: ComponentStory< typeof UnitControl > = ( {
+export const WithCustomUnits: StoryFn< typeof UnitControl > = ( {
 	onChange,
 	...args
 } ) => {
diff --git a/packages/components/src/utils/hooks/use-cx.ts b/packages/components/src/utils/hooks/use-cx.ts
index f12b2a3a5a6c5..409352c26a6e1 100644
--- a/packages/components/src/utils/hooks/use-cx.ts
+++ b/packages/components/src/utils/hooks/use-cx.ts
@@ -25,7 +25,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  * `cx` normally knows how to handle. It also hooks into the Emotion
  * Cache, allowing `css` calls to work inside iframes.
  *
- * @example
+ * ```jsx
  * import { css } from '@emotion/react';
  *
  * const styles = css`
@@ -39,6 +39,7 @@ const isSerializedStyles = ( o: any ): o is SerializedStyles =>
  *
  * 	return <span className={classes} {...props} />;
  * }
+ * ```
  */
 export const useCx = () => {
 	const cache = useEmotionCache();
diff --git a/packages/components/src/v-stack/stories/e2e/index.story.tsx b/packages/components/src/v-stack/stories/e2e/index.story.tsx
index 5445655175792..c83402e66a7b4 100644
--- a/packages/components/src/v-stack/stories/e2e/index.story.tsx
+++ b/packages/components/src/v-stack/stories/e2e/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import { View } from '../../../view';
 import { VStack } from '../..';
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }
@@ -30,7 +30,7 @@ const Template: ComponentStory< typeof VStack > = ( props ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof VStack > = Template.bind( {} );
+export const Default: StoryFn< typeof VStack > = Template.bind( {} );
 Default.args = {
 	spacing: 3,
 };
diff --git a/packages/components/src/v-stack/stories/index.story.tsx b/packages/components/src/v-stack/stories/index.story.tsx
index 87d66d4487ff8..781c1bce6676c 100644
--- a/packages/components/src/v-stack/stories/index.story.tsx
+++ b/packages/components/src/v-stack/stories/index.story.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -23,7 +23,7 @@ const ALIGNMENTS = {
 	stretch: 'stretch',
 };
 
-const meta: ComponentMeta< typeof VStack > = {
+const meta: Meta< typeof VStack > = {
 	component: VStack,
 	title: 'Components (Experimental)/VStack',
 	argTypes: {
@@ -44,7 +44,7 @@ const meta: ComponentMeta< typeof VStack > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof VStack > = ( props ) => {
+const Template: StoryFn< typeof VStack > = ( props ) => {
 	return (
 		<VStack
 			{ ...props }
diff --git a/packages/components/src/view/component.tsx b/packages/components/src/view/component.tsx
index e8b4f440e528b..da7efc69e3859 100644
--- a/packages/components/src/view/component.tsx
+++ b/packages/components/src/view/component.tsx
@@ -14,7 +14,6 @@ import type { ViewProps } from './types';
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
  *
- * @example
  * ```jsx
  * import { View } from `@wordpress/components`;
  *
diff --git a/packages/components/src/view/stories/index.story.tsx b/packages/components/src/view/stories/index.story.tsx
index 021f1ffcad885..324825059deb2 100644
--- a/packages/components/src/view/stories/index.story.tsx
+++ b/packages/components/src/view/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { View } from '..';
 
-const meta: ComponentMeta< typeof View > = {
+const meta: Meta< typeof View > = {
 	component: View,
 	title: 'Components (Experimental)/View',
 	argTypes: {
@@ -22,11 +22,11 @@ const meta: ComponentMeta< typeof View > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof View > = ( args ) => {
+const Template: StoryFn< typeof View > = ( args ) => {
 	return <View { ...args } />;
 };
 
-export const Default: ComponentStory< typeof View > = Template.bind( {} );
+export const Default: StoryFn< typeof View > = Template.bind( {} );
 Default.args = {
 	children: 'An example tip',
 };
diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx
index bc2d4b51e9504..149b2da6b5c89 100644
--- a/packages/components/src/visually-hidden/stories/index.story.tsx
+++ b/packages/components/src/visually-hidden/stories/index.story.tsx
@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '..';
 
-const meta: ComponentMeta< typeof VisuallyHidden > = {
+const meta: Meta< typeof VisuallyHidden > = {
 	component: VisuallyHidden,
 	title: 'Components/VisuallyHidden',
 	argTypes: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta< typeof VisuallyHidden > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
+export const Default: StoryFn< typeof VisuallyHidden > = ( args ) => (
 	<>
 		<VisuallyHidden as="span" { ...args }>
 			This should not show.
@@ -39,7 +39,7 @@ export const Default: ComponentStory< typeof VisuallyHidden > = ( args ) => (
 	</>
 );
 
-export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
+export const WithForwardedProps: StoryFn< typeof VisuallyHidden > = (
 	args
 ) => (
 	<>
@@ -52,9 +52,9 @@ export const WithForwardedProps: ComponentStory< typeof VisuallyHidden > = (
 	</>
 );
 
-export const WithAdditionalClassNames: ComponentStory<
-	typeof VisuallyHidden
-> = ( args ) => (
+export const WithAdditionalClassNames: StoryFn< typeof VisuallyHidden > = (
+	args
+) => (
 	<>
 		Additional class names passed to VisuallyHidden extend the component
 		class name.{ ' ' }
diff --git a/packages/components/src/z-stack/stories/index.story.tsx b/packages/components/src/z-stack/stories/index.story.tsx
index 74ebdcb0dd3d1..46a364bc520f3 100644
--- a/packages/components/src/z-stack/stories/index.story.tsx
+++ b/packages/components/src/z-stack/stories/index.story.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import { Elevation } from '../../elevation';
 import { View } from '../../view';
 import { ZStack } from '..';
 
-const meta: ComponentMeta< typeof ZStack > = {
+const meta: Meta< typeof ZStack > = {
 	component: ZStack,
 	title: 'Components (Experimental)/ZStack',
 	argTypes: {
@@ -52,7 +52,7 @@ const Avatar = ( {
 	);
 };
 
-const Template: ComponentStory< typeof ZStack > = ( args ) => {
+const Template: StoryFn< typeof ZStack > = ( args ) => {
 	return (
 		<ZStack { ...args }>
 			<Avatar backgroundColor="#444" />
@@ -63,7 +63,7 @@ const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof ZStack > = Template.bind( {} );
+export const Default: StoryFn< typeof ZStack > = Template.bind( {} );
 Default.args = {
 	offset: 20,
 };
diff --git a/packages/compose/src/hooks/use-fixed-window-list/index.js b/packages/compose/src/hooks/use-fixed-window-list/index.js
index 598a131e33fe1..3ea72c539e2cd 100644
--- a/packages/compose/src/hooks/use-fixed-window-list/index.js
+++ b/packages/compose/src/hooks/use-fixed-window-list/index.js
@@ -27,6 +27,7 @@ const DEFAULT_INIT_WINDOW_SIZE = 30;
  * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.
  * @property {boolean} [useWindowing]   When false avoids calculating the window size
  * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.
+ * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.
  */
 
 /**
@@ -125,7 +126,14 @@ export default function useFixedWindowList(
 				debounceMeasureList
 			);
 		};
-	}, [ itemHeight, elementRef, totalItems ] );
+	}, [
+		itemHeight,
+		elementRef,
+		totalItems,
+		options?.expandedState,
+		options?.windowOverscan,
+		useWindowing,
+	] );
 
 	useLayoutEffect( () => {
 		if ( ! useWindowing ) {
@@ -168,7 +176,14 @@ export default function useFixedWindowList(
 				handleKeyDown
 			);
 		};
-	}, [ totalItems, itemHeight, elementRef, fixedListWindow.visibleItems ] );
+	}, [
+		totalItems,
+		itemHeight,
+		elementRef,
+		fixedListWindow.visibleItems,
+		useWindowing,
+		options?.expandedState,
+	] );
 
 	return [ fixedListWindow, setFixedListWindow ];
 }
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
index f8208b725e773..9571d728c8eca 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -37,28 +37,22 @@ const icons = {
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const history = useHistory();
-		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
-			postType
-		);
+		const isBlockBasedTheme = useIsBlockBasedTheme();
 		const { records, isLoading } = useSelect(
 			( select ) => {
 				const { getEntityRecords } = select( coreStore );
-				const query = supportsSearch
-					? {
-							search: !! search ? search : undefined,
-							per_page: 10,
-							orderby: search ? 'relevance' : 'date',
-							status: [
-								'publish',
-								'future',
-								'draft',
-								'pending',
-								'private',
-							],
-					  }
-					: {
-							per_page: -1,
-					  };
+				const query = {
+					search: !! search ? search : undefined,
+					per_page: 10,
+					orderby: search ? 'relevance' : 'date',
+					status: [
+						'publish',
+						'future',
+						'draft',
+						'pending',
+						'private',
+					],
+				};
 				return {
 					records: getEntityRecords( 'postType', postType, query ),
 					isLoading: ! select( coreStore ).hasFinishedResolution(
@@ -67,23 +61,111 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					),
 				};
 			},
-			[ supportsSearch, search ]
+			[ search ]
 		);
 
+		const commands = useMemo( () => {
+			return ( records ?? [] ).map( ( record ) => {
+				const command = {
+					name: postType + '-' + record.id,
+					searchLabel: record.title?.rendered + ' ' + record.id,
+					label: record.title?.rendered
+						? record.title?.rendered
+						: __( '(no title)' ),
+					icon: icons[ postType ],
+				};
+
+				if (
+					postType === 'post' ||
+					( postType === 'page' && ! isBlockBasedTheme )
+				) {
+					return {
+						...command,
+						callback: ( { close } ) => {
+							const args = {
+								post: record.id,
+								action: 'edit',
+							};
+							const targetUrl = addQueryArgs( 'post.php', args );
+							document.location = targetUrl;
+							close();
+						},
+					};
+				}
+
+				const isSiteEditor = getPath( window.location.href )?.includes(
+					'site-editor.php'
+				);
+				const extraArgs = isSiteEditor
+					? {
+							canvas: getQueryArg(
+								window.location.href,
+								'canvas'
+							),
+					  }
+					: {};
+
+				return {
+					...command,
+					callback: ( { close } ) => {
+						const args = {
+							postType,
+							postId: record.id,
+							...extraArgs,
+						};
+						const targetUrl = addQueryArgs(
+							'site-editor.php',
+							args
+						);
+						if ( isSiteEditor ) {
+							history.push( args );
+						} else {
+							document.location = targetUrl;
+						}
+						close();
+					},
+				};
+			} );
+		}, [ records, isBlockBasedTheme, history ] );
+
+		return {
+			commands,
+			isLoading,
+		};
+	};
+
+const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
+	function useNavigationCommandLoader( { search } ) {
+		const history = useHistory();
+		const isBlockBasedTheme = useIsBlockBasedTheme();
+		const { records, isLoading } = useSelect( ( select ) => {
+			const { getEntityRecords } = select( coreStore );
+			const query = { per_page: -1 };
+			return {
+				records: getEntityRecords( 'postType', templateType, query ),
+				isLoading: ! select( coreStore ).hasFinishedResolution(
+					'getEntityRecords',
+					[ 'postType', templateType, query ]
+				),
+			};
+		}, [] );
+
 		/*
 		 * wp_template and wp_template_part endpoints do not support per_page or orderby parameters.
 		 * We need to sort the results based on the search query to avoid removing relevant
 		 * records below using .slice().
 		 */
 		const orderedRecords = useMemo( () => {
-			if ( supportsSearch ) {
-				return records ?? [];
-			}
-
 			return orderEntityRecordsBySearch( records, search ).slice( 0, 10 );
-		}, [ supportsSearch, records, search ] );
+		}, [ records, search ] );
 
 		const commands = useMemo( () => {
+			if (
+				! isBlockBasedTheme &&
+				! templateType === 'wp_template_part'
+			) {
+				return [];
+			}
 			return orderedRecords.map( ( record ) => {
 				const isSiteEditor = getPath( window.location.href )?.includes(
 					'site-editor.php'
@@ -91,16 +173,17 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 				const extraArgs = isSiteEditor
 					? { canvas: getQueryArg( window.location.href, 'canvas' ) }
 					: {};
+
 				return {
-					name: postType + '-' + record.id,
+					name: templateType + '-' + record.id,
 					searchLabel: record.title?.rendered + ' ' + record.id,
 					label: record.title?.rendered
 						? record.title?.rendered
 						: __( '(no title)' ),
-					icon: icons[ postType ],
+					icon: icons[ templateType ],
 					callback: ( { close } ) => {
 						const args = {
-							postType,
+							postType: templateType,
 							postId: record.id,
 							...extraArgs,
 						};
@@ -117,7 +200,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					},
 				};
 			} );
-		}, [ orderedRecords, history ] );
+		}, [ isBlockBasedTheme, orderedRecords, history ] );
 
 		return {
 			commands,
@@ -130,9 +213,9 @@ const usePageNavigationCommandLoader =
 const usePostNavigationCommandLoader =
 	getNavigationCommandLoaderPerPostType( 'post' );
 const useTemplateNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'wp_template' );
+	getNavigationCommandLoaderPerTemplate( 'wp_template' );
 const useTemplatePartNavigationCommandLoader =
-	getNavigationCommandLoaderPerPostType( 'wp_template_part' );
+	getNavigationCommandLoaderPerTemplate( 'wp_template_part' );
 
 function useSiteEditorBasicNavigationCommands() {
 	const history = useHistory();
diff --git a/packages/create-block/lib/templates/block/view.js.mustache b/packages/create-block/lib/templates/block/view.js.mustache
index baff12a165cd9..e8ea96c89216e 100644
--- a/packages/create-block/lib/templates/block/view.js.mustache
+++ b/packages/create-block/lib/templates/block/view.js.mustache
@@ -1,3 +1,21 @@
+/**
+ * Use this file for JavaScript code that you want to run in the front-end 
+ * on posts/pages that contain this block.
+ *
+ * When this file is defined as the value of the `viewScript` property
+ * in `block.json` it will be enqueued on the front end of the site.
+ *
+ * Example:
+ *
+ * ```js
+ * {
+ *   "viewScript": "file:./view.js"
+ * }
+ * ```
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
+ */
+ 
 /* eslint-disable no-console */
 console.log("Hello World! (from {{namespace}}-{{slug}} block)");
 /* eslint-enable no-console */
diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
index 6a5a734bef9db..116c8684c8980 100644
--- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js
+++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -10,9 +10,7 @@ import {
 	BlockSelectionClearer,
 	BlockInspector,
 	CopyHandler,
-	ObserveTyping,
 	WritingFlow,
-	BlockEditorKeyboardShortcuts,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
@@ -95,7 +93,6 @@ export default function SidebarBlockEditor( {
 
 	return (
 		<>
-			<BlockEditorKeyboardShortcuts.Register />
 			<KeyboardShortcuts.Register />
 
 			<SidebarEditorProvider sidebar={ sidebar } settings={ settings }>
@@ -118,11 +115,7 @@ export default function SidebarBlockEditor( {
 						<EditorStyles styles={ settings.defaultEditorStyles } />
 						<BlockSelectionClearer>
 							<WritingFlow className="editor-styles-wrapper">
-								<ObserveTyping>
-									<BlockList
-										renderAppender={ BlockAppender }
-									/>
-								</ObserveTyping>
+								<BlockList renderAppender={ BlockAppender } />
 							</WritingFlow>
 						</BlockSelectionClearer>
 					</BlockTools>
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
index 690eb15beb88f..327aa5877b2cd 100644
--- a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
+++ b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
@@ -63,9 +63,9 @@ export async function visitSiteEditor(
 		.first()
 		.waitFor();
 
-	// TODO: Ideally the content underneath the spinner should be marked inert until it's ready.
+	// TODO: Ideally the content underneath the canvas loader should be marked inert until it's ready.
 	await this.page
-		.locator( '.edit-site-canvas-spinner' )
+		.locator( '.edit-site-canvas-loader' )
 		// Bigger timeout is needed for larger entities, for example the large
 		// post html fixture that we load for performance tests, which often
 		// doesn't make it under the default 10 seconds.
diff --git a/packages/e2e-test-utils/src/site-editor.js b/packages/e2e-test-utils/src/site-editor.js
index b4e5f2373e098..02c3d05f74cc1 100644
--- a/packages/e2e-test-utils/src/site-editor.js
+++ b/packages/e2e-test-utils/src/site-editor.js
@@ -10,7 +10,7 @@ import { addQueryArgs } from '@wordpress/url';
 
 const SELECTORS = {
 	visualEditor: '.edit-site-visual-editor iframe',
-	loadingSpinner: '.edit-site-canvas-spinner',
+	canvasLoader: '.edit-site-canvas-loader',
 };
 
 /**
@@ -84,7 +84,9 @@ 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 } );
+	await page.waitForSelector( SELECTORS.canvasLoader, {
+		hidden: true,
+	} );
 
 	if ( skipWelcomeGuide ) {
 		await disableSiteEditorWelcomeGuide();
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 bcb8180427291..840067e9fb9b3 100644
--- a/packages/edit-post/src/components/header/header-toolbar/index.js
+++ b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -107,6 +107,7 @@ function HeaderToolbar() {
 				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }
 				variant={ showIconLabels ? 'tertiary' : undefined }
+				aria-expanded={ isListViewOpen }
 			/>
 		</>
 	);
@@ -148,6 +149,7 @@ function HeaderToolbar() {
 					icon={ plus }
 					label={ showIconLabels ? shortLabel : longLabel }
 					showTooltip={ ! showIconLabels }
+					aria-expanded={ isInserterOpened }
 				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 35969ca1eb47d..c0018d40d6ef8 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -23,7 +23,7 @@ import {
 	BlockBreadcrumb,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { Button, ScrollLock, Popover } from '@wordpress/components';
+import { Button, ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { PluginArea } from '@wordpress/plugins';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -357,7 +357,6 @@ function Layout() {
 			<WelcomeGuide />
 			<PostSyncStatusModal />
 			<StartPageOptions />
-			<Popover.Slot />
 			<PluginArea onError={ onPluginAreaError } />
 		</>
 	);
diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js
index e1a475bc59aa3..8eafa5487b718 100644
--- a/packages/edit-post/src/components/start-page-options/index.js
+++ b/packages/edit-post/src/components/start-page-options/index.js
@@ -19,7 +19,7 @@ import { store as editPostStore } from '../../store';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
-	// and it has no postTypes declares and the current post type is page or if
+	// and it has no postTypes declared and the current post type is page or if
 	// the current post type is part of the postTypes declared.
 	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
 		( select ) => {
@@ -47,8 +47,7 @@ function useStartPatterns() {
 	}, [ postType, blockPatternsWithPostContentBlockType ] );
 }
 
-function PatternSelection( { onChoosePattern } ) {
-	const blockPatterns = useStartPatterns();
+function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	const shownBlockPatterns = useAsyncList( blockPatterns );
 	const { resetEditorBlocks } = useDispatch( editorStore );
 	return (
@@ -63,70 +62,55 @@ function PatternSelection( { onChoosePattern } ) {
 	);
 }
 
-const START_PAGE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	PATTERN: 'PATTERN',
-	CLOSED: 'CLOSED',
-};
-
-export default function StartPageOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_PAGE_MODAL_STATES.INITIAL
-	);
-	const blockPatterns = useStartPatterns();
-	const hasStartPattern = blockPatterns.length > 0;
-	const shouldOpenModel = useSelect(
-		( select ) => {
-			if (
-				! hasStartPattern ||
-				modalState !== START_PAGE_MODAL_STATES.INITIAL
-			) {
-				return false;
-			}
-			const { getEditedPostContent, isEditedPostSaveable } =
-				select( editorStore );
-			const { isEditingTemplate, isFeatureActive } =
-				select( editPostStore );
-			return (
-				! isEditedPostSaveable() &&
-				'' === getEditedPostContent() &&
-				! isEditingTemplate() &&
-				! isFeatureActive( 'welcomeGuide' )
-			);
-		},
-		[ modalState, hasStartPattern ]
-	);
+function StartPageOptionsModal() {
+	const [ modalState, setModalState ] = useState( 'initial' );
+	const startPatterns = useStartPatterns();
+	const hasStartPattern = startPatterns.length > 0;
+	const shouldOpenModal = hasStartPattern && modalState === 'initial';
 
 	useEffect( () => {
-		if ( shouldOpenModel ) {
-			setModalState( START_PAGE_MODAL_STATES.PATTERN );
+		if ( shouldOpenModal ) {
+			setModalState( 'open' );
 		}
-	}, [ shouldOpenModel ] );
+	}, [ shouldOpenModal ] );
 
-	if (
-		modalState === START_PAGE_MODAL_STATES.INITIAL ||
-		modalState === START_PAGE_MODAL_STATES.CLOSED
-	) {
+	if ( modalState !== 'open' ) {
 		return null;
 	}
+
 	return (
 		<Modal
 			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
-			isFullScreen={ true }
-			onRequestClose={ () => {
-				setModalState( START_PAGE_MODAL_STATES.CLOSED );
-			} }
+			isFullScreen
+			onRequestClose={ () => setModalState( 'closed' ) }
 		>
 			<div className="edit-post-start-page-options__modal-content">
-				{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
-					<PatternSelection
-						onChoosePattern={ () => {
-							setModalState( START_PAGE_MODAL_STATES.CLOSED );
-						} }
-					/>
-				) }
+				<PatternSelection
+					blockPatterns={ startPatterns }
+					onChoosePattern={ () => setModalState( 'closed' ) }
+				/>
 			</div>
 		</Modal>
 	);
 }
+
+export default function StartPageOptions() {
+	const shouldEnableModal = useSelect( ( select ) => {
+		const { getEditedPostContent, isEditedPostSaveable } =
+			select( editorStore );
+		const { isEditingTemplate, isFeatureActive } = select( editPostStore );
+		return (
+			! isEditedPostSaveable() &&
+			'' === getEditedPostContent() &&
+			! isEditingTemplate() &&
+			! isFeatureActive( 'welcomeGuide' )
+		);
+	}, [] );
+
+	if ( ! shouldEnableModal ) {
+		return null;
+	}
+
+	return <StartPageOptionsModal />;
+}
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index f888630afeca1..88fc233e0f74d 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -217,7 +217,6 @@ export default function VisualEditor( { styles } ) {
 		ref,
 		useClipboardHandler(),
 		useTypewriter(),
-		useTypingObserver(),
 		useBlockSelectionClearer(),
 	] );
 
@@ -305,6 +304,7 @@ export default function VisualEditor( { styles } ) {
 		? postContentLayout
 		: fallbackLayout;
 
+	const observeTypingRef = useTypingObserver();
 	const titleRef = useRef();
 	useEffect( () => {
 		if ( isWelcomeGuideVisible || ! isCleanNewPost() ) {
@@ -400,6 +400,7 @@ export default function VisualEditor( { styles } ) {
 									}
 								) }
 								contentEditable={ false }
+								ref={ observeTypingRef }
 							>
 								<PostTitle ref={ titleRef } />
 							</div>
diff --git a/packages/edit-post/src/plugins/copy-content-menu-item/index.js b/packages/edit-post/src/plugins/copy-content-menu-item/index.js
index 3cbaf8697cd36..60bbbf9c83d6e 100644
--- a/packages/edit-post/src/plugins/copy-content-menu-item/index.js
+++ b/packages/edit-post/src/plugins/copy-content-menu-item/index.js
@@ -10,11 +10,11 @@ import { store as editorStore } from '@wordpress/editor';
 
 export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
-	const getText = useSelect(
-		( select ) => () =>
-			select( editorStore ).getEditedPostAttribute( 'content' ),
-		[]
-	);
+	const { getEditedPostAttribute } = useSelect( editorStore );
+
+	function getText() {
+		return getEditedPostAttribute( 'content' );
+	}
 
 	function onSuccess() {
 		createNotice( 'info', __( 'All content copied.' ), {
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
index f2b2e6ebb7e56..ca1893c3c1775 100644
--- a/packages/edit-site/src/components/app/index.js
+++ b/packages/edit-site/src/components/app/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider, Popover } from '@wordpress/components';
+import { SlotFillProvider } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
@@ -38,7 +38,6 @@ export default function App() {
 		<ShortcutProvider style={ { height: '100%' } }>
 			<SlotFillProvider>
 				<GlobalStylesProvider>
-					<Popover.Slot />
 					<UnsavedChangesWarning />
 					<RouterProvider>
 						<Layout />
diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
index 692b7fd5eadc1..6693a1380ac83 100644
--- a/packages/edit-site/src/components/block-editor/site-editor-canvas.js
+++ b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -11,8 +11,6 @@ import {
 	BlockList,
 	BlockTools,
 	__unstableUseClipboardHandler as useClipboardHandler,
-	__unstableUseTypingObserver as useTypingObserver,
-	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -78,11 +76,7 @@ export default function SiteEditorCanvas() {
 		! isMobileViewport;
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [
-		contentRef,
-		useClipboardHandler(),
-		useTypingObserver(),
-	] );
+	const mergedRefs = useMergeRefs( [ contentRef, useClipboardHandler() ] );
 
 	const isTemplateTypeNavigation = templateType === 'wp_navigation';
 
@@ -121,7 +115,6 @@ export default function SiteEditorCanvas() {
 								}
 							} }
 						>
-							<BlockEditorKeyboardShortcuts.Register />
 							<BackButton />
 							<ResizableEditor
 								enableResizing={ enableResizing }
diff --git a/packages/edit-site/src/components/canvas-spinner/index.js b/packages/edit-site/src/components/canvas-loader/index.js
similarity index 90%
rename from packages/edit-site/src/components/canvas-spinner/index.js
rename to packages/edit-site/src/components/canvas-loader/index.js
index e395121d10a02..fad8d59bbc344 100644
--- a/packages/edit-site/src/components/canvas-spinner/index.js
+++ b/packages/edit-site/src/components/canvas-loader/index.js
@@ -13,7 +13,7 @@ import { useStylesPreviewColors } from '../global-styles/hooks';
 const { ProgressBar, Theme } = unlock( componentsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-export default function CanvasSpinner( { id } ) {
+export default function CanvasLoader( { id } ) {
 	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { highlightedColors } = useStylesPreviewColors();
@@ -21,7 +21,7 @@ export default function CanvasSpinner( { id } ) {
 		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
 
 	return (
-		<div className="edit-site-canvas-spinner">
+		<div className="edit-site-canvas-loader">
 			<Theme accent={ indicatorColor } background={ backgroundColor }>
 				<ProgressBar id={ id } />
 			</Theme>
diff --git a/packages/edit-site/src/components/canvas-spinner/style.scss b/packages/edit-site/src/components/canvas-loader/style.scss
similarity index 66%
rename from packages/edit-site/src/components/canvas-spinner/style.scss
rename to packages/edit-site/src/components/canvas-loader/style.scss
index e6926cb8149f5..7bef5868e8707 100644
--- a/packages/edit-site/src/components/canvas-spinner/style.scss
+++ b/packages/edit-site/src/components/canvas-loader/style.scss
@@ -1,4 +1,4 @@
-.edit-site-canvas-spinner {
+.edit-site-canvas-loader {
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -9,7 +9,7 @@
 	align-items: center;
 	justify-content: center;
 
-	animation: 0.5s ease 1s edit-site-canvas-spinner__fade-in-animation;
+	animation: 0.5s ease 1s edit-site-canvas-loader__fade-in-animation;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 
@@ -18,7 +18,7 @@
 	}
 }
 
-@keyframes edit-site-canvas-spinner__fade-in-animation {
+@keyframes edit-site-canvas-loader__fade-in-animation {
 	from {
 		opacity: 0;
 	}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index adbc964fc89f1..4bdd98b5d170e 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -40,7 +40,7 @@ import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
-import CanvasSpinner from '../canvas-spinner';
+import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
@@ -180,7 +180,7 @@ export default function Editor( { isLoading } ) {
 	useTitle( hasLoadedPost && title );
 
 	const loadingProgressId = useInstanceId(
-		CanvasSpinner,
+		CanvasLoader,
 		'edit-site-editor__loading-progress'
 	);
 
@@ -193,7 +193,7 @@ export default function Editor( { isLoading } ) {
 
 	return (
 		<>
-			{ isLoading ? <CanvasSpinner id={ loadingProgressId } /> : null }
+			{ isLoading ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
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 ea3b5b89d116f..87dae3c8f2f36 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -98,6 +98,20 @@ function ScreenBlock( { name, variation } ) {
 	const { behavior } = useGlobalBehaviors( name, 'user' );
 
 	const blockType = getBlockType( name );
+
+	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	if (
+		settings?.spacing?.blockGap &&
+		blockType?.supports?.spacing?.blockGap &&
+		( blockType?.supports?.spacing?.__experimentalSkipSerialization ===
+			true ||
+			blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+				( spacingType ) => spacingType === 'blockGap'
+			) )
+	) {
+		settings.spacing.blockGap = false;
+	}
+
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
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 6cff62b94c51e..23b7adc1bc757 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -216,6 +216,7 @@ export default function HeaderEditMode() {
 									showIconLabels ? shortLabel : longLabel
 								}
 								showTooltip={ ! showIconLabels }
+								aria-expanded={ isInserterOpen }
 							/>
 						) }
 						{ isLargeViewport && (
@@ -265,6 +266,7 @@ export default function HeaderEditMode() {
 												? 'tertiary'
 												: undefined
 										}
+										aria-expanded={ isListViewOpen }
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js b/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
index 87bef35a36cd6..887817692239c 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
+++ b/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js
@@ -16,28 +16,27 @@ import { store as editSiteStore } from '../../../store';
 
 export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
-	const getText = useSelect( ( select ) => {
-		return () => {
-			const { getEditedPostId, getEditedPostType } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const record = getEditedEntityRecord(
-				'postType',
-				getEditedPostType(),
-				getEditedPostId()
-			);
-			if ( record ) {
-				if ( typeof record.content === 'function' ) {
-					return record.content( record );
-				} else if ( record.blocks ) {
-					return __unstableSerializeAndClean( record.blocks );
-				} else if ( record.content ) {
-					return record.content;
-				}
-			}
+	const { getEditedPostId, getEditedPostType } = useSelect( editSiteStore );
+	const { getEditedEntityRecord } = useSelect( coreStore );
+
+	function getText() {
+		const record = getEditedEntityRecord(
+			'postType',
+			getEditedPostType(),
+			getEditedPostId()
+		);
+		if ( ! record ) {
 			return '';
-		};
-	}, [] );
+		}
+
+		if ( typeof record.content === 'function' ) {
+			return record.content( record );
+		} else if ( record.blocks ) {
+			return __unstableSerializeAndClean( record.blocks );
+		} else if ( record.content ) {
+			return record.content;
+		}
+	}
 
 	function onSuccess() {
 		createNotice( 'info', __( 'All content copied.' ), {
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index df5c5b80677b9..f8a2337bf4329 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -27,7 +27,7 @@ import {
 	footer,
 	symbolFilled as uncategorized,
 	symbol,
-	moreHorizontal,
+	moreVertical,
 	lockSmall,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -220,13 +220,12 @@ function GridItem( { categoryId, item, ...props } ) {
 					</Flex>
 				</HStack>
 				<DropdownMenu
-					icon={ moreHorizontal }
+					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					className="edit-site-patterns__dropdown"
 					popoverProps={ { placement: 'bottom-end' } }
 					toggleProps={ {
 						className: 'edit-site-patterns__button',
-						isSmall: true,
 						describedBy: sprintf(
 							/* translators: %s: pattern name */
 							__( 'Action menu for %s pattern' ),
@@ -254,6 +253,7 @@ function GridItem( { categoryId, item, ...props } ) {
 							/>
 							{ isCustomPattern && (
 								<MenuItem
+									isDestructive={ ! hasThemeFile }
 									onClick={ () =>
 										setIsDeleteDialogOpen( true )
 									}
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 0312803323863..f425e08c57878 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -163,6 +163,10 @@
 			color: $gray-600;
 		}
 
+		.edit-site-patterns__dropdown {
+			flex-shrink: 0;
+		}
+
 		&.is-placeholder .edit-site-patterns__preview {
 			min-height: $grid-unit-80;
 			color: $gray-600;
@@ -179,7 +183,7 @@
 
 	.edit-site-patterns__preview {
 		flex: 0 1 auto;
-		margin-bottom: $grid-unit-20;
+		margin-bottom: $grid-unit-15;
 	}
 }
 
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
index ed41f8c2baa87..f80ed4d3fe820 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js
@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	BaseControl,
 	ToggleControl,
 	Dropdown,
 	__experimentalText as Text,
@@ -11,6 +10,7 @@ import {
 	__experimentalVStack as VStack,
 	TextControl,
 	RadioControl,
+	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
@@ -18,6 +18,8 @@ import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -85,6 +87,7 @@ export default function PageStatus( {
 	date,
 } ) {
 	const [ showPassword, setShowPassword ] = useState( !! password );
+	const instanceId = useInstanceId( PageStatus );
 
 	const { editEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -193,10 +196,17 @@ export default function PageStatus( {
 									selected={ status }
 								/>
 								{ status !== 'private' && (
-									<BaseControl
-										id={ `edit-site-change-status__password` }
-										label={ __( 'Password' ) }
-									>
+									<fieldset className="edit-site-change-status__password-fieldset">
+										<Text
+											as="legend"
+											className="edit-site-change-status__password-legend"
+											size="11"
+											lineHeight={ 1.4 }
+											weight={ 500 }
+											upperCase={ true }
+										>
+											{ __( 'Password' ) }
+										</Text>
 										<ToggleControl
 											label={ __(
 												'Hide this page behind a password'
@@ -205,20 +215,29 @@ export default function PageStatus( {
 											onChange={ handleTogglePassword }
 										/>
 										{ showPassword && (
-											<TextControl
-												onChange={ ( value ) =>
-													saveStatus( {
-														password: value,
-													} )
-												}
-												value={ password }
-												placeholder={ __(
-													'Use a secure password'
-												) }
-												type="text"
-											/>
+											<div className="edit-site-change-status__password-input">
+												<VisuallyHidden
+													as="label"
+													htmlFor={ `edit-site-change-status__password-input-${ instanceId }` }
+												>
+													{ __( 'Create password' ) }
+												</VisuallyHidden>
+												<TextControl
+													onChange={ ( value ) =>
+														saveStatus( {
+															password: value,
+														} )
+													}
+													value={ password }
+													placeholder={ __(
+														'Use a secure password'
+													) }
+													type="text"
+													id={ `edit-site-change-status__password-input-${ instanceId }` }
+												/>
+											</div>
 										) }
-									</BaseControl>
+									</fieldset>
 								) }
 							</VStack>
 						</form>
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
index 0a618d9ff53d3..8c10b32085612 100644
--- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
+++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss
@@ -14,10 +14,12 @@
 		min-width: 320px;
 		padding: $grid-unit-20;
 	}
+
 	.edit-site-change-status__options {
 		.components-base-control__field > .components-v-stack {
 			gap: $grid-unit-10;
 		}
+
 		label {
 			.components-text {
 				display: block;
@@ -25,15 +27,22 @@
 			}
 		}
 	}
+
+	.edit-site-change-status__password-legend {
+		padding: 0;
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-summary-field {
 	.components-dropdown {
 		flex-grow: 1;
 	}
+
 	.edit-site-summary-field__trigger {
 		width: 100%;
 	}
+
 	.edit-site-summary-field__label {
 		width: 30%;
 	}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
index 4de10b8377da9..2d386d67bb7a7 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js
@@ -57,9 +57,8 @@ export default function ScreenNavigationMoreMenu( props ) {
 							>
 								{ __( 'Duplicate' ) }
 							</MenuItem>
-						</MenuGroup>
-						<MenuGroup>
 							<MenuItem
+								isDestructive
 								onClick={ () => {
 									openDeleteModal();
 
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 1053aa6267bd7..accb42997f5ef 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -2,7 +2,7 @@
 
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
-@import "./components/canvas-spinner/style.scss";
+@import "./components/canvas-loader/style.scss";
 @import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js
index 3a73bcda1a266..54338d10fb850 100644
--- a/packages/edit-widgets/src/components/layout/index.js
+++ b/packages/edit-widgets/src/components/layout/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Popover } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
@@ -39,7 +38,6 @@ function Layout( { blockEditorSettings } ) {
 			>
 				<Interface blockEditorSettings={ blockEditorSettings } />
 				<Sidebar />
-				<Popover.Slot />
 				<PluginArea onError={ onPluginAreaError } />
 				<UnsavedChangesWarning />
 				<WelcomeGuide />
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
index 386d4730e4dab..f12774e36cf23 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -6,7 +6,6 @@ import {
 	BlockTools,
 	BlockSelectionClearer,
 	WritingFlow,
-	ObserveTyping,
 	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -43,9 +42,7 @@ export default function WidgetAreasBlockEditorContent( {
 				<EditorStyles styles={ styles } />
 				<BlockSelectionClearer>
 					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
+						<BlockList className="edit-widgets-main-block-list" />
 					</WritingFlow>
 				</BlockSelectionClearer>
 			</BlockTools>
diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
index 90b7537bf48ab..899cc02766480 100644
--- a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
+++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -11,7 +11,6 @@ import {
 } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 import {
-	BlockEditorKeyboardShortcuts,
 	CopyHandler,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -100,7 +99,6 @@ export default function WidgetAreasBlockEditorProvider( {
 
 	return (
 		<ShortcutProvider>
-			<BlockEditorKeyboardShortcuts.Register />
 			<KeyboardShortcuts.Register />
 			<SlotFillProvider>
 				<ExperimentalBlockEditorProvider
diff --git a/packages/format-library/src/language/index.js b/packages/format-library/src/language/index.js
index 77e6334016f73..d37d8d6dbd0cd 100644
--- a/packages/format-library/src/language/index.js
+++ b/packages/format-library/src/language/index.js
@@ -76,7 +76,6 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
 		<Popover
 			className="block-editor-format-toolbar__language-popover"
 			anchor={ popoverAnchor }
-			placement="bottom"
 			onClose={ onClose }
 		>
 			<form
diff --git a/packages/format-library/src/link/index.js b/packages/format-library/src/link/index.js
index c203017feda0f..03e25a37b9b8e 100644
--- a/packages/format-library/src/link/index.js
+++ b/packages/format-library/src/link/index.js
@@ -89,6 +89,8 @@ function Edit( {
 					isActive={ isActive }
 					shortcutType="primaryShift"
 					shortcutCharacter="k"
+					aria-haspopup="true"
+					aria-expanded={ addingLink || isActive }
 				/>
 			) }
 			{ ! isActive && (
@@ -100,6 +102,8 @@ function Edit( {
 					isActive={ isActive }
 					shortcutType="primary"
 					shortcutCharacter="k"
+					aria-haspopup="true"
+					aria-expanded={ addingLink || isActive }
 				/>
 			) }
 			{ ( addingLink || isActive ) && (
diff --git a/packages/interactivity/docs/2-api-reference.md b/packages/interactivity/docs/2-api-reference.md
index 920b27f4727d5..64a4adf19b3dc 100644
--- a/packages/interactivity/docs/2-api-reference.md
+++ b/packages/interactivity/docs/2-api-reference.md
@@ -508,7 +508,7 @@ Defines data available to the HTML nodes of the page. It is important to differe
 store( {
   state: {
     someText: "Hello Universe!"
-  }
+  },
   actions: {
     someAction: ({ state, context }) => {
       state.someText // Access or modify global state - "Hello Universe!"
diff --git a/packages/primitives/src/horizontal-rule/index.native.js b/packages/primitives/src/horizontal-rule/index.native.js
index 8841c8e694188..67906b692935e 100644
--- a/packages/primitives/src/horizontal-rule/index.native.js
+++ b/packages/primitives/src/horizontal-rule/index.native.js
@@ -18,6 +18,7 @@ const HR = ( {
 	lineStyle,
 	marginLeft,
 	marginRight,
+	style,
 	textStyle,
 	text,
 	...props
@@ -25,12 +26,15 @@ const HR = ( {
 	const renderLine = ( key ) => (
 		<View
 			key={ key }
-			style={ getStylesFromColorScheme( styles.line, styles.lineDark ) }
+			style={ [
+				getStylesFromColorScheme( styles.line, styles.lineDark ),
+				lineStyle,
+			] }
 		/>
 	);
 
 	const renderText = ( key ) => (
-		<View key={ key }>
+		<View key={ key } style={ styles.textContainer }>
 			<Text style={ [ styles.text, textStyle ] }>{ text }</Text>
 		</View>
 	);
@@ -44,11 +48,7 @@ const HR = ( {
 
 	return (
 		<View
-			style={ [
-				styles.container,
-				{ marginLeft, marginRight },
-				props.style,
-			] }
+			style={ [ styles.container, { marginLeft, marginRight }, style ] }
 			{ ...props }
 		>
 			{ renderInner() }
diff --git a/packages/primitives/src/horizontal-rule/styles.native.scss b/packages/primitives/src/horizontal-rule/styles.native.scss
index 20959ab73042e..3e58d40e04b1e 100644
--- a/packages/primitives/src/horizontal-rule/styles.native.scss
+++ b/packages/primitives/src/horizontal-rule/styles.native.scss
@@ -7,7 +7,7 @@
 
 .line {
 	background-color: $gray-lighten-20;
-	flex: 1;
+	flex: 1 0 10px;
 	height: 2;
 }
 
@@ -15,9 +15,12 @@
 	background-color: $gray-50;
 }
 
-.text {
-	flex: 1;
+.textContainer {
+	flex: 0 1 auto;
 	margin-left: 15px;
 	margin-right: 15px;
+}
+
+.text {
 	text-align: center;
 }
diff --git a/packages/react-native-aztec/src/AztecView.js b/packages/react-native-aztec/src/AztecView.js
index 5fb2d4f5fd91b..3e3a5b6e62620 100644
--- a/packages/react-native-aztec/src/AztecView.js
+++ b/packages/react-native-aztec/src/AztecView.js
@@ -4,7 +4,7 @@
 import {
 	requireNativeComponent,
 	UIManager,
-	TouchableWithoutFeedback,
+	Pressable,
 	Platform,
 } from 'react-native';
 
@@ -305,7 +305,7 @@ class AztecView extends Component {
 		}
 
 		return (
-			<TouchableWithoutFeedback onPress={ this._onPress }>
+			<Pressable accessible={ false } onPress={ this._onPress }>
 				<RCTAztecView
 					{ ...otherProps }
 					style={ style }
@@ -322,7 +322,7 @@ class AztecView extends Component {
 					onBlur={ this._onBlur }
 					ref={ this.aztecViewRef }
 				/>
-			</TouchableWithoutFeedback>
+			</Pressable>
 		);
 	}
 }
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index d040c10d14a7c..40793756cb2ce 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -11,12 +11,18 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [**] Replace third-party dependency react-native-hsv-color-picker with first-party code [#53329]
+-   [*] Search Control - Prevent calling TextInput's methods when undefined [#53745]
+-   [*] Improve horizontal rule styles to avoid invisible lines [#53883]
+-   [*] Fix horizontal rule style extensions [#53917]
 
 ## 1.102.0
 -   [*] Display custom color value in mobile Cover Block color picker [#51414]
 -   [**] Display outline around selected Social Link block [#51414]
 -   [**] Fixes font customization not getting updated on iOS [#53391]
 
+## 1.101.2
+-  [**] Fix Voice Over and assistive keyboards [#53895]
+
 ## 1.101.1
 -   [**] Fix the dynamic height when opening/closing navigation screens within the bottom sheet. [https://github.com/WordPress/gutenberg/pull/53608]
 
diff --git a/patches/react-native+0.71.11.patch b/patches/react-native+0.71.11.patch
new file mode 100644
index 0000000000000..d624881009466
--- /dev/null
+++ b/patches/react-native+0.71.11.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+index 0758df6..18c5687 100644
+--- a/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
++++ b/node_modules/react-native/Libraries/Components/TextInput/TextInput.js
+@@ -1410,7 +1410,6 @@ function InternalTextInput(props: Props): React.Node {
+         {...props}
+         {...eventHandlers}
+         accessible={accessible}
+-        accessibilityState={_accessibilityState}
+         submitBehavior={submitBehavior}
+         caretHidden={caretHidden}
+         dataDetectorTypes={props.dataDetectorTypes}
diff --git a/phpunit.xml.dist b/phpunit.xml.dist
index 8e8a0fb2f0921..4a4c9bf656935 100644
--- a/phpunit.xml.dist
+++ b/phpunit.xml.dist
@@ -14,6 +14,7 @@
 	<testsuites>
 		<testsuite name="default">
 			<directory suffix="-test.php">./phpunit/</directory>
+			<directory suffix=".php">./phpunit/tests/</directory>
 		</testsuite>
 	</testsuites>
 	<groups>
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index f64e6fa5c7ef1..7084df68443ba 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -21,6 +21,8 @@
 if ( ! defined( 'LOCAL_WP_ENVIRONMENT_TYPE' ) ) {
 	define( 'LOCAL_WP_ENVIRONMENT_TYPE', 'local' );
 }
+define( 'GUTENBERG_DIR_TESTDATA', __DIR__ . '/data/' );
+define( 'GUTENBERG_DIR_TESTFIXTURES', __DIR__ . '/fixtures/' );
 
 // Pretend that these are Core unit tests. This is needed so that
 // wp_theme_has_theme_json() does not cache its return value between each test.
diff --git a/phpunit/multisite.xml b/phpunit/multisite.xml
index 03b0b5314bc50..ac18402abb0c8 100644
--- a/phpunit/multisite.xml
+++ b/phpunit/multisite.xml
@@ -15,6 +15,7 @@
 	<testsuites>
 		<testsuite name="default">
 			<directory suffix="-test.php">./</directory>
+			<directory suffix=".php">./tests/</directory>
 		</testsuite>
 	</testsuites>
 	<groups>
diff --git a/phpunit/fonts-api/wp-fonts-testcase.php b/phpunit/tests/fonts-api/base.php
similarity index 99%
rename from phpunit/fonts-api/wp-fonts-testcase.php
rename to phpunit/tests/fonts-api/base.php
index b7bff9234b9ed..11ae3b624ea8c 100644
--- a/phpunit/fonts-api/wp-fonts-testcase.php
+++ b/phpunit/tests/fonts-api/base.php
@@ -70,7 +70,7 @@ public static function set_up_before_class() {
 		parent::set_up_before_class();
 
 		if ( self::$requires_switch_theme_fixtures ) {
-			self::$theme_root = realpath( __DIR__ . '/../data/themedir1' );
+			self::$theme_root = realpath( GUTENBERG_DIR_TESTDATA . '/themedir1' );
 		}
 	}
 
diff --git a/phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php b/phpunit/tests/fonts-api/bc-layer/base.php
similarity index 94%
rename from phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php
rename to phpunit/tests/fonts-api/bc-layer/base.php
index 6c5e3bad800b8..27a4d43f7188a 100644
--- a/phpunit/fonts-api/bc-layer/fonts-bc-layer-testcase.php
+++ b/phpunit/tests/fonts-api/bc-layer/base.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 require_once __DIR__ . '/bc-layer-tests-dataset.php';
 
 /**
diff --git a/phpunit/fonts-api/bc-layer/bc-layer-tests-dataset.php b/phpunit/tests/fonts-api/bc-layer/bc-layer-tests-dataset.php
similarity index 100%
rename from phpunit/fonts-api/bc-layer/bc-layer-tests-dataset.php
rename to phpunit/tests/fonts-api/bc-layer/bc-layer-tests-dataset.php
diff --git a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php b/phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure.php
similarity index 94%
rename from phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php
rename to phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure.php
index e623ecf19f7d1..d76de3f205005 100644
--- a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/isDeprecatedStructure.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php b/phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure.php
similarity index 95%
rename from phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php
rename to phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure.php
index c0e2c77d9ca1c..b98481dfbf942 100644
--- a/phpunit/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/gutenbergFontsApiBcLayer/migrateDeprecatedStructure.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php b/phpunit/tests/fonts-api/bc-layer/wpRegisterWebfonts.php
similarity index 97%
rename from phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php
rename to phpunit/tests/fonts-api/bc-layer/wpRegisterWebfonts.php
index 4a64068fee8c8..59e0a9d314a13 100644
--- a/phpunit/fonts-api/bc-layer/wpRegisterWebfonts-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/wpRegisterWebfonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/fonts-bc-layer-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getAllWebfonts.php
similarity index 93%
rename from phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php
rename to phpunit/tests/fonts-api/bc-layer/wpWebfonts/getAllWebfonts.php
index d6c1e10b691e4..7a217a343c535 100644
--- a/phpunit/fonts-api/bc-layer/wpWebfonts/getAllWebfonts-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getAllWebfonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getFontSlug.php
similarity index 98%
rename from phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php
rename to phpunit/tests/fonts-api/bc-layer/wpWebfonts/getFontSlug.php
index df17cb69b621c..7c05f24b03752 100644
--- a/phpunit/fonts-api/bc-layer/wpWebfonts/getFontSlug-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getFontSlug.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts.php
similarity index 93%
rename from phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php
rename to phpunit/tests/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts.php
index 3b41d9d37b414..7a8c97a4d8647 100644
--- a/phpunit/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/getRegisteredWebfonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/registerWebfont.php
similarity index 98%
rename from phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php
rename to phpunit/tests/fonts-api/bc-layer/wpWebfonts/registerWebfont.php
index faaaf0e7ef6b7..ccc4249ad4fcc 100644
--- a/phpunit/fonts-api/bc-layer/wpWebfonts/registerWebfont-test.php
+++ b/phpunit/tests/fonts-api/bc-layer/wpWebfonts/registerWebfont.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../fonts-bc-layer-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wp-fonts-tests-dataset.php b/phpunit/tests/fonts-api/wp-fonts-tests-dataset.php
similarity index 100%
rename from phpunit/fonts-api/wp-fonts-tests-dataset.php
rename to phpunit/tests/fonts-api/wp-fonts-tests-dataset.php
diff --git a/phpunit/fonts-api/wpDeregisterFontFamily-test.php b/phpunit/tests/fonts-api/wpDeregisterFontFamily.php
similarity index 98%
rename from phpunit/fonts-api/wpDeregisterFontFamily-test.php
rename to phpunit/tests/fonts-api/wpDeregisterFontFamily.php
index 6ef73879f2032..59db2e2abc826 100644
--- a/phpunit/fonts-api/wpDeregisterFontFamily-test.php
+++ b/phpunit/tests/fonts-api/wpDeregisterFontFamily.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpDeregisterFontVariation-test.php b/phpunit/tests/fonts-api/wpDeregisterFontVariation.php
similarity index 99%
rename from phpunit/fonts-api/wpDeregisterFontVariation-test.php
rename to phpunit/tests/fonts-api/wpDeregisterFontVariation.php
index 5cf20301c1270..78b4bf51f758a 100644
--- a/phpunit/fonts-api/wpDeregisterFontVariation-test.php
+++ b/phpunit/tests/fonts-api/wpDeregisterFontVariation.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpEnqueueFontVariations-test.php b/phpunit/tests/fonts-api/wpEnqueueFontVariations.php
similarity index 98%
rename from phpunit/fonts-api/wpEnqueueFontVariations-test.php
rename to phpunit/tests/fonts-api/wpEnqueueFontVariations.php
index 46aa4fd1499d1..6e026d99f5889 100644
--- a/phpunit/fonts-api/wpEnqueueFontVariations-test.php
+++ b/phpunit/tests/fonts-api/wpEnqueueFontVariations.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpEnqueueFonts-test.php b/phpunit/tests/fonts-api/wpEnqueueFonts.php
similarity index 98%
rename from phpunit/fonts-api/wpEnqueueFonts-test.php
rename to phpunit/tests/fonts-api/wpEnqueueFonts.php
index 43c1fd63a7610..c00fb0f2dfdae 100644
--- a/phpunit/fonts-api/wpEnqueueFonts-test.php
+++ b/phpunit/tests/fonts-api/wpEnqueueFonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts-test.php b/phpunit/tests/fonts-api/wpFonts.php
similarity index 94%
rename from phpunit/fonts-api/wpFonts-test.php
rename to phpunit/tests/fonts-api/wpFonts.php
index 9a50dcb0fafc3..3b33e58edf299 100644
--- a/phpunit/fonts-api/wpFonts-test.php
+++ b/phpunit/tests/fonts-api/wpFonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/add-test.php b/phpunit/tests/fonts-api/wpFonts/add.php
similarity index 95%
rename from phpunit/fonts-api/wpFonts/add-test.php
rename to phpunit/tests/fonts-api/wpFonts/add.php
index 8d88b6834d0cf..f9449b87c53b5 100644
--- a/phpunit/fonts-api/wpFonts/add-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/add.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/addFontFamily-test.php b/phpunit/tests/fonts-api/wpFonts/addFontFamily.php
similarity index 97%
rename from phpunit/fonts-api/wpFonts/addFontFamily-test.php
rename to phpunit/tests/fonts-api/wpFonts/addFontFamily.php
index 85676b47c35e5..f227c2c4025a4 100644
--- a/phpunit/fonts-api/wpFonts/addFontFamily-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/addFontFamily.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/addVariation-test.php b/phpunit/tests/fonts-api/wpFonts/addVariation.php
similarity index 99%
rename from phpunit/fonts-api/wpFonts/addVariation-test.php
rename to phpunit/tests/fonts-api/wpFonts/addVariation.php
index 0f86c07ab0eaa..5b6d93bcc99fe 100644
--- a/phpunit/fonts-api/wpFonts/addVariation-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/addVariation.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/dequeue-test.php b/phpunit/tests/fonts-api/wpFonts/dequeue.php
similarity index 97%
rename from phpunit/fonts-api/wpFonts/dequeue-test.php
rename to phpunit/tests/fonts-api/wpFonts/dequeue.php
index e6ea2223657ba..6cd11dc55b937 100644
--- a/phpunit/fonts-api/wpFonts/dequeue-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/dequeue.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/doItem-test.php b/phpunit/tests/fonts-api/wpFonts/doItem.php
similarity index 99%
rename from phpunit/fonts-api/wpFonts/doItem-test.php
rename to phpunit/tests/fonts-api/wpFonts/doItem.php
index 602c8d74e1bae..af46f376b3bc5 100644
--- a/phpunit/fonts-api/wpFonts/doItem-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/doItem.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/doItems-test.php b/phpunit/tests/fonts-api/wpFonts/doItems.php
similarity index 98%
rename from phpunit/fonts-api/wpFonts/doItems-test.php
rename to phpunit/tests/fonts-api/wpFonts/doItems.php
index 20314f957014d..23307366101cb 100644
--- a/phpunit/fonts-api/wpFonts/doItems-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/doItems.php
@@ -6,8 +6,8 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
-require_once __DIR__ . '/../../fixtures/mock-provider.php';
+require_once dirname( __DIR__ ) . '/base.php';
+require_once GUTENBERG_DIR_TESTFIXTURES . '/mock-provider.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/enqueue-test.php b/phpunit/tests/fonts-api/wpFonts/enqueue.php
similarity index 97%
rename from phpunit/fonts-api/wpFonts/enqueue-test.php
rename to phpunit/tests/fonts-api/wpFonts/enqueue.php
index 34380febfef5d..09c14676c7ae0 100644
--- a/phpunit/fonts-api/wpFonts/enqueue-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/enqueue.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/getEnqueued-test.php b/phpunit/tests/fonts-api/wpFonts/getEnqueued.php
similarity index 96%
rename from phpunit/fonts-api/wpFonts/getEnqueued-test.php
rename to phpunit/tests/fonts-api/wpFonts/getEnqueued.php
index 68a509f3c35cc..bacb8a31aa650 100644
--- a/phpunit/fonts-api/wpFonts/getEnqueued-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/getEnqueued.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/getProviders-test.php b/phpunit/tests/fonts-api/wpFonts/getProviders.php
similarity index 93%
rename from phpunit/fonts-api/wpFonts/getProviders-test.php
rename to phpunit/tests/fonts-api/wpFonts/getProviders.php
index ed73921a31aea..410adaace286a 100644
--- a/phpunit/fonts-api/wpFonts/getProviders-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/getProviders.php
@@ -6,8 +6,8 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
-require_once __DIR__ . '/../../fixtures/mock-provider.php';
+require_once dirname( __DIR__ ) . '/base.php';
+require_once GUTENBERG_DIR_TESTFIXTURES . '/mock-provider.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/getRegistered-test.php b/phpunit/tests/fonts-api/wpFonts/getRegistered.php
similarity index 97%
rename from phpunit/fonts-api/wpFonts/getRegistered-test.php
rename to phpunit/tests/fonts-api/wpFonts/getRegistered.php
index 365a97733f3cf..7dc116f587539 100644
--- a/phpunit/fonts-api/wpFonts/getRegistered-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/getRegistered.php
@@ -7,7 +7,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/query-test.php b/phpunit/tests/fonts-api/wpFonts/query.php
similarity index 98%
rename from phpunit/fonts-api/wpFonts/query-test.php
rename to phpunit/tests/fonts-api/wpFonts/query.php
index c64d88cf9fa86..0e56b515e7ebf 100644
--- a/phpunit/fonts-api/wpFonts/query-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/query.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/registerProvider-test.php b/phpunit/tests/fonts-api/wpFonts/registerProvider.php
similarity index 96%
rename from phpunit/fonts-api/wpFonts/registerProvider-test.php
rename to phpunit/tests/fonts-api/wpFonts/registerProvider.php
index 03dc6fd6049b1..09d3d7f389172 100644
--- a/phpunit/fonts-api/wpFonts/registerProvider-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/registerProvider.php
@@ -6,8 +6,8 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
-require_once __DIR__ . '/../../fixtures/mock-provider.php';
+require_once dirname( __DIR__ ) . '/base.php';
+require_once GUTENBERG_DIR_TESTFIXTURES . '/mock-provider.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/remove-test.php b/phpunit/tests/fonts-api/wpFonts/remove.php
similarity index 97%
rename from phpunit/fonts-api/wpFonts/remove-test.php
rename to phpunit/tests/fonts-api/wpFonts/remove.php
index 6da419a988e85..208bd58c3d2c3 100644
--- a/phpunit/fonts-api/wpFonts/remove-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/remove.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFonts/removeFontFamily-test.php b/phpunit/tests/fonts-api/wpFonts/removeFontFamily.php
similarity index 98%
rename from phpunit/fonts-api/wpFonts/removeFontFamily-test.php
rename to phpunit/tests/fonts-api/wpFonts/removeFontFamily.php
index b04882e04acdd..6e762307d0520 100644
--- a/phpunit/fonts-api/wpFonts/removeFontFamily-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/removeFontFamily.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpFonts/removeVariation-test.php b/phpunit/tests/fonts-api/wpFonts/removeVariation.php
similarity index 99%
rename from phpunit/fonts-api/wpFonts/removeVariation-test.php
rename to phpunit/tests/fonts-api/wpFonts/removeVariation.php
index fb8f78e4122fb..508c8ce264d8f 100644
--- a/phpunit/fonts-api/wpFonts/removeVariation-test.php
+++ b/phpunit/tests/fonts-api/wpFonts/removeVariation.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFontsProviderLocal-test.php b/phpunit/tests/fonts-api/wpFontsProviderLocal.php
similarity index 97%
rename from phpunit/fonts-api/wpFontsProviderLocal-test.php
rename to phpunit/tests/fonts-api/wpFontsProviderLocal.php
index 1bd28e4a6aba7..f9319390c3b6b 100644
--- a/phpunit/fonts-api/wpFontsProviderLocal-test.php
+++ b/phpunit/tests/fonts-api/wpFontsProviderLocal.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group fontsapi
@@ -155,7 +155,7 @@ public function data_get_css_print_styles() {
 	 * `wp-content/themes/` directory to ensure consistency when running tests.
 	 */
 	private function set_up_theme() {
-		$this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
+		$this->theme_root                = realpath( GUTENBERG_DIR_TESTDATA . '/themedir1' );
 		$this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
 		$GLOBALS['wp_theme_directories'] = array( $this->theme_root );
 
diff --git a/phpunit/fonts-api/wpFontsResolver/addMissingFontsToThemeJson-test.php b/phpunit/tests/fonts-api/wpFontsResolver/addMissingFontsToThemeJson.php
similarity index 99%
rename from phpunit/fonts-api/wpFontsResolver/addMissingFontsToThemeJson-test.php
rename to phpunit/tests/fonts-api/wpFontsResolver/addMissingFontsToThemeJson.php
index 31bb4b1d409cc..d6e45561e5e33 100644
--- a/phpunit/fonts-api/wpFontsResolver/addMissingFontsToThemeJson-test.php
+++ b/phpunit/tests/fonts-api/wpFontsResolver/addMissingFontsToThemeJson.php
@@ -1,6 +1,6 @@
 <?php
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * Test WP_Fonts_Resolver::add_missing_fonts_to_theme_json().
diff --git a/phpunit/fonts-api/wpFontsResolver/enqueueUserSelectedFonts-test.php b/phpunit/tests/fonts-api/wpFontsResolver/enqueueUserSelectedFonts.php
similarity index 98%
rename from phpunit/fonts-api/wpFontsResolver/enqueueUserSelectedFonts-test.php
rename to phpunit/tests/fonts-api/wpFontsResolver/enqueueUserSelectedFonts.php
index c3ba0fd1f72ac..9ff01f1c3166c 100644
--- a/phpunit/fonts-api/wpFontsResolver/enqueueUserSelectedFonts-test.php
+++ b/phpunit/tests/fonts-api/wpFontsResolver/enqueueUserSelectedFonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpFontsResolver/registerFontsFromThemeJson-test.php b/phpunit/tests/fonts-api/wpFontsResolver/registerFontsFromThemeJson.php
similarity index 99%
rename from phpunit/fonts-api/wpFontsResolver/registerFontsFromThemeJson-test.php
rename to phpunit/tests/fonts-api/wpFontsResolver/registerFontsFromThemeJson.php
index c3bedd9e63e9e..c812b98d3d156 100644
--- a/phpunit/fonts-api/wpFontsResolver/registerFontsFromThemeJson-test.php
+++ b/phpunit/tests/fonts-api/wpFontsResolver/registerFontsFromThemeJson.php
@@ -1,6 +1,6 @@
 <?php
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * Test WP_Fonts_Resolver::register_fonts_from_theme_json().
diff --git a/phpunit/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle-test.php b/phpunit/tests/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle.php
similarity index 97%
rename from phpunit/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle-test.php
rename to phpunit/tests/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle.php
index 288a0d11715e2..19b2f15c826ed 100644
--- a/phpunit/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle-test.php
+++ b/phpunit/tests/fonts-api/wpFontsUtils/convertFontFamilyIntoHandle.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpFontsUtils/convertVariationIntoHandle-test.php b/phpunit/tests/fonts-api/wpFontsUtils/convertVariationIntoHandle.php
similarity index 98%
rename from phpunit/fonts-api/wpFontsUtils/convertVariationIntoHandle-test.php
rename to phpunit/tests/fonts-api/wpFontsUtils/convertVariationIntoHandle.php
index 6be7f585c5a35..9268aac8ce372 100644
--- a/phpunit/fonts-api/wpFontsUtils/convertVariationIntoHandle-test.php
+++ b/phpunit/tests/fonts-api/wpFontsUtils/convertVariationIntoHandle.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpFontsUtils/getFontFamilyFromVariation-test.php b/phpunit/tests/fonts-api/wpFontsUtils/getFontFamilyFromVariation.php
similarity index 98%
rename from phpunit/fonts-api/wpFontsUtils/getFontFamilyFromVariation-test.php
rename to phpunit/tests/fonts-api/wpFontsUtils/getFontFamilyFromVariation.php
index 21f1c4d5c6a59..2b3e3689c4317 100644
--- a/phpunit/fonts-api/wpFontsUtils/getFontFamilyFromVariation-test.php
+++ b/phpunit/tests/fonts-api/wpFontsUtils/getFontFamilyFromVariation.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpFontsUtils/isDefined-test.php b/phpunit/tests/fonts-api/wpFontsUtils/isDefined.php
similarity index 96%
rename from phpunit/fonts-api/wpFontsUtils/isDefined-test.php
rename to phpunit/tests/fonts-api/wpFontsUtils/isDefined.php
index e770559b33a0e..3ae48ad52671a 100644
--- a/phpunit/fonts-api/wpFontsUtils/isDefined-test.php
+++ b/phpunit/tests/fonts-api/wpFontsUtils/isDefined.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/../wp-fonts-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * @group fontsapi
diff --git a/phpunit/fonts-api/wpPrintFonts-test.php b/phpunit/tests/fonts-api/wpPrintFonts.php
similarity index 98%
rename from phpunit/fonts-api/wpPrintFonts-test.php
rename to phpunit/tests/fonts-api/wpPrintFonts.php
index 4f50cf6a8cd5e..40b416aa56421 100644
--- a/phpunit/fonts-api/wpPrintFonts-test.php
+++ b/phpunit/tests/fonts-api/wpPrintFonts.php
@@ -6,8 +6,8 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
-require_once __DIR__ . '/../fixtures/mock-provider.php';
+require_once __DIR__ . '/base.php';
+require_once GUTENBERG_DIR_TESTFIXTURES . '/mock-provider.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpRegisterFontProvider-test.php b/phpunit/tests/fonts-api/wpRegisterFontProvider.php
similarity index 95%
rename from phpunit/fonts-api/wpRegisterFontProvider-test.php
rename to phpunit/tests/fonts-api/wpRegisterFontProvider.php
index 157ab7f4d0a66..9288ee3850672 100644
--- a/phpunit/fonts-api/wpRegisterFontProvider-test.php
+++ b/phpunit/tests/fonts-api/wpRegisterFontProvider.php
@@ -6,8 +6,8 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
-require_once __DIR__ . '/../fixtures/mock-provider.php';
+require_once __DIR__ . '/base.php';
+require_once GUTENBERG_DIR_TESTFIXTURES . '/mock-provider.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts-api/wpRegisterFonts-test.php b/phpunit/tests/fonts-api/wpRegisterFonts.php
similarity index 98%
rename from phpunit/fonts-api/wpRegisterFonts-test.php
rename to phpunit/tests/fonts-api/wpRegisterFonts.php
index da54fd6438f97..c57c1406a6cac 100644
--- a/phpunit/fonts-api/wpRegisterFonts-test.php
+++ b/phpunit/tests/fonts-api/wpRegisterFonts.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts API
  */
 
-require_once __DIR__ . '/wp-fonts-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * @group  fontsapi
diff --git a/phpunit/fonts/font-face/wp-font-face-testcase.php b/phpunit/tests/fonts/font-face/base.php
similarity index 98%
rename from phpunit/fonts/font-face/wp-font-face-testcase.php
rename to phpunit/tests/fonts/font-face/base.php
index f36b00833e69c..4d8d487cb47c9 100644
--- a/phpunit/fonts/font-face/wp-font-face-testcase.php
+++ b/phpunit/tests/fonts/font-face/base.php
@@ -62,7 +62,7 @@ public static function set_up_before_class() {
 		parent::set_up_before_class();
 
 		if ( self::$requires_switch_theme_fixtures ) {
-			self::$theme_root = realpath( __DIR__ . '/../../data/themedir1' );
+			self::$theme_root = realpath( GUTENBERG_DIR_TESTDATA . '/themedir1' );
 		}
 	}
 
diff --git a/phpunit/fonts/font-face/wp-font-face-tests-dataset.php b/phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php
similarity index 100%
rename from phpunit/fonts/font-face/wp-font-face-tests-dataset.php
rename to phpunit/tests/fonts/font-face/wp-font-face-tests-dataset.php
diff --git a/phpunit/fonts/font-face/wpFontFace/generateAndPrint-test.php b/phpunit/tests/fonts/font-face/wpFontFace/generateAndPrint.php
similarity index 94%
rename from phpunit/fonts/font-face/wpFontFace/generateAndPrint-test.php
rename to phpunit/tests/fonts/font-face/wpFontFace/generateAndPrint.php
index 2b31b38769481..ac68c006ff4d4 100644
--- a/phpunit/fonts/font-face/wpFontFace/generateAndPrint-test.php
+++ b/phpunit/tests/fonts/font-face/wpFontFace/generateAndPrint.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts
  */
 
-require_once __DIR__ . '/../wp-font-face-tests-dataset.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * Test WP_Font_Face::generate_and_print().
diff --git a/phpunit/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson-test.php b/phpunit/tests/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson.php
similarity index 98%
rename from phpunit/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson-test.php
rename to phpunit/tests/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson.php
index 3a5626ef6eaa1..51342b19cafb1 100644
--- a/phpunit/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson-test.php
+++ b/phpunit/tests/fonts/font-face/wpFontFaceResolver/getFontsFromThemeJson.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts
  */
 
-require_once __DIR__ . '/../wp-font-face-testcase.php';
+require_once dirname( __DIR__ ) . '/base.php';
 
 /**
  * Tests WP_Font_Face_Resolver::get_fonts_from_theme_json().
diff --git a/phpunit/fonts/font-face/wpPrintFontFaces-test.php b/phpunit/tests/fonts/font-face/wpPrintFontFaces.php
similarity index 96%
rename from phpunit/fonts/font-face/wpPrintFontFaces-test.php
rename to phpunit/tests/fonts/font-face/wpPrintFontFaces.php
index c6d4203fd5053..cb3ff2471cc64 100644
--- a/phpunit/fonts/font-face/wpPrintFontFaces-test.php
+++ b/phpunit/tests/fonts/font-face/wpPrintFontFaces.php
@@ -6,7 +6,7 @@
  * @subpackage Fonts
  */
 
-require_once __DIR__ . '/wp-font-face-testcase.php';
+require_once __DIR__ . '/base.php';
 
 /**
  * Test wp_print_font_faces().
diff --git a/phpunit/fonts/font-library/class-wp-rest-font-library-controller-test.php b/phpunit/tests/fonts/font-library/class-wp-rest-font-library-controller.php
similarity index 100%
rename from phpunit/fonts/font-library/class-wp-rest-font-library-controller-test.php
rename to phpunit/tests/fonts/font-library/class-wp-rest-font-library-controller.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/__construct-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/__construct.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/__construct-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/__construct.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/base.php b/phpunit/tests/fonts/font-library/wpFontFamily/base.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/base.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/base.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/getData-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/getData.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/getData-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/getData.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/getDataAsJson-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/getDataAsJson.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/getDataAsJson-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/getDataAsJson.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/getFontPost-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/getFontPost.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/getFontPost-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/getFontPost.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/hasFontFaces-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/hasFontFaces.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/hasFontFaces-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/hasFontFaces.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/install-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/install.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/install-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/install.php
diff --git a/phpunit/fonts/font-library/wpFontFamily/uninstall-test.php b/phpunit/tests/fonts/font-library/wpFontFamily/uninstall.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamily/uninstall-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamily/uninstall.php
diff --git a/phpunit/fonts/font-library/wpFontFamilyUtils/getFilenameFromFontFace-test.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/getFilenameFromFontFace.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamilyUtils/getFilenameFromFontFace-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamilyUtils/getFilenameFromFontFace.php
diff --git a/phpunit/fonts/font-library/wpFontFamilyUtils/hasFontMimeType-test.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/hasFontMimeType.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamilyUtils/hasFontMimeType-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamilyUtils/hasFontMimeType.php
diff --git a/phpunit/fonts/font-library/wpFontFamilyUtils/mergeFontsData-test.php b/phpunit/tests/fonts/font-library/wpFontFamilyUtils/mergeFontsData.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontFamilyUtils/mergeFontsData-test.php
rename to phpunit/tests/fonts/font-library/wpFontFamilyUtils/mergeFontsData.php
diff --git a/phpunit/fonts/font-library/wpFontLibrary/getFontsDir-test.php b/phpunit/tests/fonts/font-library/wpFontLibrary/getFontsDir.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontLibrary/getFontsDir-test.php
rename to phpunit/tests/fonts/font-library/wpFontLibrary/getFontsDir.php
diff --git a/phpunit/fonts/font-library/wpFontLibrary/setUploadDir-test.php b/phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
similarity index 100%
rename from phpunit/fonts/font-library/wpFontLibrary/setUploadDir-test.php
rename to phpunit/tests/fonts/font-library/wpFontLibrary/setUploadDir.php
diff --git a/storybook/preview.js b/storybook/preview.js
index ff73a95fa4131..61bdef8aae5f3 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -1,3 +1,15 @@
+/**
+ * External dependencies
+ */
+import {
+	ArgsTable,
+	Description,
+	Primary,
+	Stories,
+	Subtitle,
+	Title,
+} from '@storybook/blocks';
+
 /**
  * Internal dependencies
  */
@@ -90,6 +102,21 @@ export const parameters = {
 	controls: {
 		sort: 'requiredFirst',
 	},
+	docs: {
+		// Flips the order of the description and the primary component story
+		// so the component is always visible before the fold.
+		page: () => (
+			<>
+				<Title />
+				<Subtitle />
+				<Primary />
+				<Description />
+				{ /* `story="^"` enables Controls for the primary props table */ }
+				<ArgsTable story="^" />
+				<Stories includePrimary={ false } />
+			</>
+		),
+	},
 	options: {
 		storySort: {
 			order: [
diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js
index 92ccd78ae58b7..380a95f4b79a9 100644
--- a/storybook/stories/playground/index.story.js
+++ b/storybook/stories/playground/index.story.js
@@ -3,15 +3,12 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 import {
-	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockList,
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
-import { Popover, SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import '@wordpress/format-library';
@@ -39,30 +36,24 @@ function App() {
 	return (
 		<div className="playground">
 			<ShortcutProvider>
-				<SlotFillProvider>
-					<BlockEditorProvider
-						value={ blocks }
-						onInput={ updateBlocks }
-						onChange={ updateBlocks }
-					>
-						<div className="playground__sidebar">
-							<BlockInspector />
-						</div>
-						<div className="playground__content">
-							<BlockTools>
-								<div className="editor-styles-wrapper">
-									<BlockEditorKeyboardShortcuts.Register />
-									<WritingFlow>
-										<ObserveTyping>
-											<BlockList />
-										</ObserveTyping>
-									</WritingFlow>
-								</div>
-							</BlockTools>
-						</div>
-						<Popover.Slot />
-					</BlockEditorProvider>
-				</SlotFillProvider>
+				<BlockEditorProvider
+					value={ blocks }
+					onInput={ updateBlocks }
+					onChange={ updateBlocks }
+				>
+					<div className="playground__sidebar">
+						<BlockInspector />
+					</div>
+					<div className="playground__content">
+						<BlockTools>
+							<div className="editor-styles-wrapper">
+								<WritingFlow>
+									<BlockList />
+								</WritingFlow>
+							</div>
+						</BlockTools>
+					</div>
+				</BlockEditorProvider>
 			</ShortcutProvider>
 		</div>
 	);
diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts
index e1724a61d6126..2e117b9745840 100644
--- a/test/e2e/playwright.config.ts
+++ b/test/e2e/playwright.config.ts
@@ -17,7 +17,7 @@ const config = defineConfig( {
 	forbidOnly: !! process.env.CI,
 	workers: 1,
 	retries: process.env.CI ? 2 : 0,
-	timeout: parseInt( process.env.TIMEOUT || '', 10 ) || 100_000, // Defaults to 100 seconds.
+	timeout: parseInt( process.env.TIMEOUT || '', 10 ) || 200_000, // Defaults to 200 seconds.
 	// Don't report slow test "files", as we will be running our tests in serial.
 	reportSlowTests: null,
 	testDir: fileURLToPath( new URL( './specs', 'file:' + __filename ).href ),
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index 0c4b6057e18d4..1c0cb8c4b6968 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -93,7 +93,7 @@ test.describe( 'Pages', () => {
 				name: 'Block: Content',
 			} )
 		).toContainText(
-			'This is the Post Content block, it will display all the blocks in any single post or page.'
+			'This is the Content block, it will display all the blocks in any single post or page.'
 		);
 		await expect(
 			page.locator(
diff --git a/test/integration/helpers/integration-test-editor.js b/test/integration/helpers/integration-test-editor.js
index 6b954a895a51a..7c2fba15060b4 100644
--- a/test/integration/helpers/integration-test-editor.js
+++ b/test/integration/helpers/integration-test-editor.js
@@ -9,15 +9,12 @@ import userEvent from '@testing-library/user-event';
  */
 import { useState, useEffect } from '@wordpress/element';
 import {
-	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockList,
 	BlockTools,
 	BlockInspector,
 	WritingFlow,
-	ObserveTyping,
 } from '@wordpress/block-editor';
-import { Popover, SlotFillProvider } from '@wordpress/components';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import '@wordpress/format-library';
@@ -70,26 +67,19 @@ export function Editor( { testBlocks, settings = {} } ) {
 
 	return (
 		<ShortcutProvider>
-			<SlotFillProvider>
-				<BlockEditorProvider
-					value={ currentBlocks }
-					onInput={ updateBlocks }
-					onChange={ updateBlocks }
-					settings={ settings }
-				>
-					<BlockInspector />
-					<BlockTools>
-						<BlockEditorKeyboardShortcuts.Register />
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</BlockTools>
-
-					<Popover.Slot />
-				</BlockEditorProvider>
-			</SlotFillProvider>
+			<BlockEditorProvider
+				value={ currentBlocks }
+				onInput={ updateBlocks }
+				onChange={ updateBlocks }
+				settings={ settings }
+			>
+				<BlockInspector />
+				<BlockTools>
+					<WritingFlow>
+						<BlockList />
+					</WritingFlow>
+				</BlockTools>
+			</BlockEditorProvider>
 		</ShortcutProvider>
 	);
 }
diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
index c1289ab82a019..2a96cf3089223 100644
--- a/test/performance/specs/site-editor.spec.js
+++ b/test/performance/specs/site-editor.spec.js
@@ -111,7 +111,7 @@ test.describe( 'Site Editor Performance', () => {
 
 			// Wait for the canvas to appear.
 			await testPage
-				.locator( '.edit-site-canvas-spinner' )
+				.locator( '.edit-site-canvas-loader' )
 				.waitFor( { state: 'hidden', timeout: 60_000 } );
 
 			// Wait for the first block.