diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml
index 603d6123df1ea..ce830c04f651d 100644
--- a/.github/workflows/build-plugin-zip.yml
+++ b/.github/workflows/build-plugin-zip.yml
@@ -3,7 +3,10 @@ name: Build Gutenberg Plugin Zip
 on:
     pull_request:
     push:
-        branches: [trunk]
+        branches:
+            - trunk
+            - 'release/**'
+            - 'wp/**'
     workflow_dispatch:
         inputs:
             version:
diff --git a/.github/workflows/enforce-pr-labels.yml b/.github/workflows/enforce-pr-labels.yml
index 093eb9a325e36..7493459a6ff35 100644
--- a/.github/workflows/enforce-pr-labels.yml
+++ b/.github/workflows/enforce-pr-labels.yml
@@ -12,7 +12,7 @@ jobs:
               with:
                   mode: exactly
                   count: 1
-                  labels: '[Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core'
+                  labels: '[Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin'
                   add_comment: true
                   message: "**Warning: Type of PR label mismatch**\n\n To merge this PR, it requires {{ errorString }} {{ count }} label indicating the type of PR. Other labels are optional and not being checked here. \n- **Type-related labels to choose from**: {{ provided }}.\n- **Labels found**: {{ applied }}.\n\nRead more about [Type labels in Gutenberg](https://github.com/WordPress/gutenberg/labels?q=type). Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task."
                   exit_type: failure
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index c0f70070908c1..b80804b824e3c 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -135,7 +135,9 @@ jobs:
               uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4.3.3
               with:
                   name: build-assets
-                  path: ./build/
+                  path: |
+                      ./build/
+                      ./build-module/
 
     test-php:
         name: PHP ${{ matrix.php }}${{ matrix.multisite && ' multisite' || '' }}${{ matrix.wordpress != '' && format( ' (WP {0}) ', matrix.wordpress ) || '' }} on ubuntu-latest
@@ -212,7 +214,6 @@ jobs:
               uses: actions/download-artifact@fa0a91b85d4f404e444e00e005971372dc801d16 # v4.1.8
               with:
                   name: build-assets
-                  path: ./build
 
             - name: Docker debug information
               run: |
diff --git a/backport-changelog/6.7/7139.md b/backport-changelog/6.7/7139.md
index 9023695102a91..b5b0090fbaa56 100644
--- a/backport-changelog/6.7/7139.md
+++ b/backport-changelog/6.7/7139.md
@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7139
 
 * https://github.com/WordPress/gutenberg/pull/64504
+* https://github.com/WordPress/gutenberg/pull/65280
diff --git a/backport-changelog/6.7/7298.md b/backport-changelog/6.7/7298.md
new file mode 100644
index 0000000000000..4c01ef5d4f46e
--- /dev/null
+++ b/backport-changelog/6.7/7298.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7298
+
+* https://github.com/WordPress/gutenberg/pull/65099
\ No newline at end of file
diff --git a/backport-changelog/6.7/7336.md b/backport-changelog/6.7/7336.md
new file mode 100644
index 0000000000000..7cb2e26d7eeb9
--- /dev/null
+++ b/backport-changelog/6.7/7336.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7336
+
+* https://github.com/WordPress/gutenberg/pull/65071
diff --git a/backport-changelog/6.7/7360.md b/backport-changelog/6.7/7360.md
new file mode 100644
index 0000000000000..b2fb8efd624b9
--- /dev/null
+++ b/backport-changelog/6.7/7360.md
@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7360
+
+* https://github.com/WordPress/gutenberg/pull/65460
diff --git a/bin/packages/get-babel-config.js b/bin/packages/get-babel-config.js
index 91fe4b07d325e..9427549cafaba 100644
--- a/bin/packages/get-babel-config.js
+++ b/bin/packages/get-babel-config.js
@@ -11,6 +11,8 @@ module.exports = ( environment = '', file ) => {
 			name: `WP_BUILD_${ environment.toUpperCase() }`,
 		},
 	};
+	// Add `/* wp:polyfill */` magic comment where needed.
+	callerOpts.caller.addPolyfillComments = true;
 	switch ( environment ) {
 		case 'main':
 			// To be merged as a presetEnv option.
diff --git a/changelog.txt b/changelog.txt
index b0e6c8e907582..b802a88a14202 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,280 @@
 == Changelog ==
 
+= 19.3.0 =
+
+## Changelog
+
+### Features
+
+#### Zoom Out
+- Remove experimental flag. ([65404](https://github.com/WordPress/gutenberg/pull/65404))
+
+### Enhancements
+
+- Create Block: Update the minimum required PHP version to 7.2. ([65166](https://github.com/WordPress/gutenberg/pull/65166))
+- DataViews: remove unused `.dataviews-view-table__cell-content-wrapper:Empty` style rule. ([65084](https://github.com/WordPress/gutenberg/pull/65084))
+- Media Utils: Add TypeScript support and export more utils. ([64784](https://github.com/WordPress/gutenberg/pull/64784))
+- Media placeholders: Add "drag" to the text. ([65149](https://github.com/WordPress/gutenberg/pull/65149))
+- Restore: Move to trash button in Document settings. ([65087](https://github.com/WordPress/gutenberg/pull/65087))
+- Inspector Controls: Use custom block name in inspector controls when available. ([65398](https://github.com/WordPress/gutenberg/pull/65398))
+- Icons: Adds bell and bell-unread icons. ([65324](https://github.com/WordPress/gutenberg/pull/65324))
+- Editor topbar: Reorder the actions on the right. ([65163](https://github.com/WordPress/gutenberg/pull/65163))
+- Patterns: Add opt out preference to the 'Choose a Pattern' modal when adding a page. ([65026](https://github.com/WordPress/gutenberg/pull/65026))
+- Locked Templates: Blocks with contentOnly locking should not be transformable. ([64917](https://github.com/WordPress/gutenberg/pull/64917))
+- Block Locking: Add border to Replace item in content only image toolbar. ([64849](https://github.com/WordPress/gutenberg/pull/64849))
+- DataViews: Improve UX of bundled views for Pages. ([65295](https://github.com/WordPress/gutenberg/pull/65295))
+
+#### Components
+- Styling: Apply elevation scale in components package. ([65159](https://github.com/WordPress/gutenberg/pull/65159))
+- Tabs: Improve Tabs indicator animation and related utils. ([64926](https://github.com/WordPress/gutenberg/pull/64926))
+- Modal
+  - Add exit animation. ([65203](https://github.com/WordPress/gutenberg/pull/65203))
+  - Decrease close button size. ([65131](https://github.com/WordPress/gutenberg/pull/65131))
+- Navigator Screen: Warn if path doesn't follow a URL-like scheme. ([65231](https://github.com/WordPress/gutenberg/pull/65231))
+- Card: Update Card radius. ([65053](https://github.com/WordPress/gutenberg/pull/65053))
+- Combobox Control: Add placeholder attribute. ([65254](https://github.com/WordPress/gutenberg/pull/65254))
+
+#### Block Library
+- Allow dropping multiple images to the image block. ([65030](https://github.com/WordPress/gutenberg/pull/65030))
+- Categories List block: Add dropdown for taxonomies. ([65272](https://github.com/WordPress/gutenberg/pull/65272))
+- Image: Adds the block controls for uploading image. ([64320](https://github.com/WordPress/gutenberg/pull/64320))
+- Remove colons from control labels. ([65205](https://github.com/WordPress/gutenberg/pull/65205))
+- Terms List block: Add Categories-specific variation. ([65434](https://github.com/WordPress/gutenberg/pull/65434))
+
+#### Zoom Out
+- Add Zoom Out toggle to editor header when experiment enabled. ([65183](https://github.com/WordPress/gutenberg/pull/65183))
+- Add prompt for drag and drop in Patterns tab in Zoom Out mode. ([65115](https://github.com/WordPress/gutenberg/pull/65115))
+- Close inserter on exiting Zoom Out to edit. ([65194](https://github.com/WordPress/gutenberg/pull/65194))
+- Show top level sections in List View. ([65202](https://github.com/WordPress/gutenberg/pull/65202))
+- Try vertical displacement when dragging a pattern between existing patterns/sections. ([63896](https://github.com/WordPress/gutenberg/pull/63896))
+
+#### Block Editor
+- Link Editing: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- Drag and Drop: When dragging a mix of video, audio, and image blocks, create individual blocks as appropriate. ([65144](https://github.com/WordPress/gutenberg/pull/65144))
+- URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+- Normalize block inspector controls spacing. ([64526](https://github.com/WordPress/gutenberg/pull/64526))
+
+#### Post Editor
+- Add new Media section to preferences modal. ([64846](https://github.com/WordPress/gutenberg/pull/64846))
+- DocumentBar: Replace icon with post type label. ([65170](https://github.com/WordPress/gutenberg/pull/65170))
+- Page editor: Double-click to edit template part. ([65024](https://github.com/WordPress/gutenberg/pull/65024))
+- Post publish upload media dialog: Handle more block types. ([65122](https://github.com/WordPress/gutenberg/pull/65122))
+
+#### Block bindings
+- Populate block context with inherited post type from template slug. ([65062](https://github.com/WordPress/gutenberg/pull/65062))
+- Try gap 0 on attribute items. ([65277](https://github.com/WordPress/gutenberg/pull/65277))
+- Use post meta label from `register_meta` in block bindings workflows. ([65099](https://github.com/WordPress/gutenberg/pull/65099))
+
+#### Global Styles
+- Refactor site background controls and move site global styles into Background group. ([65304](https://github.com/WordPress/gutenberg/pull/65304))
+- Spacing control: Replace sides dropdwon with link button. ([65193](https://github.com/WordPress/gutenberg/pull/65193))
+
+#### Interactivity API
+- Refactor context proxies. ([64713](https://github.com/WordPress/gutenberg/pull/64713))
+- Update: Rephrase "Force page reload" and move to Advanced. ([65081](https://github.com/WordPress/gutenberg/pull/65081))
+
+#### REST API
+- Global Styles: Allow read access to users with `edit_posts` capabilities. ([65071](https://github.com/WordPress/gutenberg/pull/65071))
+- Query loop / Post template: Enable post format filter. ([64167](https://github.com/WordPress/gutenberg/pull/64167))
+
+### New APIs
+- Add @wordpress/fields package.
+  - Introduce the package. ([65230](https://github.com/WordPress/gutenberg/pull/65230))
+  - Make the package private. ([65269](https://github.com/WordPress/gutenberg/pull/65269))
+- Interactivity API: Add `getServerState()` and `getServerContext()`. ([65151](https://github.com/WordPress/gutenberg/pull/65151))
+
+### Bug Fixes
+
+- Align popover alt variant styling with block toolbar. ([65263](https://github.com/WordPress/gutenberg/pull/65263))
+- Compose: Correctly call timer cleanup in 'useFocusOnMount'. ([65184](https://github.com/WordPress/gutenberg/pull/65184))
+- Fix some docblock types related to the Template Registration API. ([65187](https://github.com/WordPress/gutenberg/pull/65187))
+- Fix the issue where block spacing control not shown. ([65371](https://github.com/WordPress/gutenberg/pull/65371))
+- Fix unintentional block toolbar shadow. ([65182](https://github.com/WordPress/gutenberg/pull/65182))
+- Fix: Moving a page to the trash on the site editor does not goes back to the pages list. ([65119](https://github.com/WordPress/gutenberg/pull/65119))
+- Fix: Moving the last page item to the the trash causes a crash. ([65236](https://github.com/WordPress/gutenberg/pull/65236))
+- Preferences: Fix back button on mobile. ([65141](https://github.com/WordPress/gutenberg/pull/65141))
+- Post Summary Panel: Restore `height:Auto` for toggle buttons. ([65362](https://github.com/WordPress/gutenberg/pull/65362))
+- Fix Tabs styling in Font Library modal. ([65330](https://github.com/WordPress/gutenberg/pull/65330))
+- E2E: Change deprecated social icons for standard in end-to-end. ([65312](https://github.com/WordPress/gutenberg/pull/65312))
+- Typography: Make title blocks apply typographic styles consistently. ([65307](https://github.com/WordPress/gutenberg/pull/65307))
+- Target Hints REST API: Add missing param sanitization. ([65280](https://github.com/WordPress/gutenberg/pull/65280))
+- Interactivity API: Update iterable signals when `deepMerge()` adds new properties. ([65135](https://github.com/WordPress/gutenberg/pull/65135))
+- Navigation Menus: Typography styling support to the navigation submenu block. ([65060](https://github.com/WordPress/gutenberg/pull/65060))
+- Grid: In RTL languages, the resize handles point in the opposite direction. ([64995](https://github.com/WordPress/gutenberg/pull/64995))
+- Block Locking: Fix Content Only Toolbar icon focus style. ([64940](https://github.com/WordPress/gutenberg/pull/64940))
+- Image: Fix resizing to max width in classic themes. ([64819](https://github.com/WordPress/gutenberg/pull/64819))
+- Meta Boxes: Try split content view. ([64351](https://github.com/WordPress/gutenberg/pull/64351))
+- Distraction Free: Fix blurry edge along editor header. ([64277](https://github.com/WordPress/gutenberg/pull/64277))
+
+#### Block Library
+- Comments Pagination: Fix warning returned by comments pagination blocks. ([65435](https://github.com/WordPress/gutenberg/pull/65435))
+- Cover: Explicitly set isUserOverlayColor to false when media is updated. ([65105](https://github.com/WordPress/gutenberg/pull/65105))
+- Disallow setting grid block rows/columns to zero. ([65217](https://github.com/WordPress/gutenberg/pull/65217))
+- Fix image block crash. ([65222](https://github.com/WordPress/gutenberg/pull/65222))
+- Fix: Buttons block: Block spacing value does not apply to both vertical and horizontal alignment. ([64971](https://github.com/WordPress/gutenberg/pull/64971))
+- Fix: Embed blocks: Figcaption inserted via toolbar not nested within figure element - #64960. ([64970](https://github.com/WordPress/gutenberg/pull/64970))
+- Image cropping: Skip making an API request if there are no changes to apply. ([65384](https://github.com/WordPress/gutenberg/pull/65384))
+- Comments Pagination: Pass the comments query `paged` arg to functions  `get_next_comments_link` and `get_previous_comments_link`. ([63698](https://github.com/WordPress/gutenberg/pull/63698))
+- Query Loop
+  - Default to querying posts when on singular content. ([65067](https://github.com/WordPress/gutenberg/pull/65067))
+  - Remove is_singular() check and fix test. ([65483](https://github.com/WordPress/gutenberg/pull/65483))
+  - Format controls: Fix JavaScript error. ([65551](https://github.com/WordPress/gutenberg/pull/65551))
+
+#### Block Editor
+- Inserter: Fix loading indicator for reusable blocks. ([64839](https://github.com/WordPress/gutenberg/pull/64839))
+- Normalize spacing in Layout hook controls. ([65132](https://github.com/WordPress/gutenberg/pull/65132))
+- Pattern Inserter: Fix pattern list overflow. ([65192](https://github.com/WordPress/gutenberg/pull/65192))
+- Remove reset styles RTL from the iframe. ([65150](https://github.com/WordPress/gutenberg/pull/65150))
+- Revert "Block Insertion: Clear the insertion point when selecting a different block or clearing block selection (https://github.com/WordPress/gutenberg/pull/64048)" ([65208](https://github.com/WordPress/gutenberg/pull/65208))
+
+#### Components
+- BoxControl: Unify input filed width whether linked or not. ([65348](https://github.com/WordPress/gutenberg/pull/65348))
+- ComboboxControl: Add more unit tests. ([65255](https://github.com/WordPress/gutenberg/pull/65255))
+- Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- Tabs: Fix vertical indicator. ([65385](https://github.com/WordPress/gutenberg/pull/65385))
+
+#### Block bindings
+- Fix empty strings placeholders in post meta bindings. ([65089](https://github.com/WordPress/gutenberg/pull/65089))
+- Remove key fallback in bindings get values and rely on source label. ([65517](https://github.com/WordPress/gutenberg/pull/65517))
+- Fix passing bindings context to `canUserEditValue`. ([65599](https://github.com/WordPress/gutenberg/pull/65599))
+- Prioritize existing placeholder over bindingsPlaceholder. ([65220](https://github.com/WordPress/gutenberg/pull/65220))
+- Only use `canUserEditValue` when `setValues` is defined. ([65565](https://github.com/WordPress/gutenberg/pull/65566))
+
+#### Zoom Out
+- Force device type to Desktop whenever zoom out is invoked. ([64476](https://github.com/WordPress/gutenberg/pull/64476))
+- Hide toolbar icon on smaller viewports. ([65437](https://github.com/WordPress/gutenberg/pull/65437))
+- Remove zoom out toggle when editor is not iframed. ([65452](https://github.com/WordPress/gutenberg/pull/65452))
+
+### Accessibility
+
+- A11y: Add script-module. ([65101](https://github.com/WordPress/gutenberg/pull/65101))
+- Interactivity API: Use a11y Script Module in Gutenberg. ([65123](https://github.com/WordPress/gutenberg/pull/65123))
+- Script Modules API: Print script module live regions HTML in page HTML. ([65380](https://github.com/WordPress/gutenberg/pull/65380))
+- DatePicker: Better hover/focus styles. ([65117](https://github.com/WordPress/gutenberg/pull/65117))
+- Form Input: Don't use `flex-direction: Row-reverse` for checkbox field. ([64232](https://github.com/WordPress/gutenberg/pull/64232))
+- Navigation Menus: Remove Warning and add notice for Navigation. ([63921](https://github.com/WordPress/gutenberg/pull/63921))
+- Global Styles: Fix the shadows Range control accessibility and usability. ([63908](https://github.com/WordPress/gutenberg/pull/63908))
+- Block Editor: Fix accessibility of the hooked blocks toggles. ([63133](https://github.com/WordPress/gutenberg/pull/63133))
+
+
+#### Post Editor
+- Support keyboard resizing of meta boxes pane. ([65325](https://github.com/WordPress/gutenberg/pull/65325))
+- Swap position of the Pre-publish checks buttons. ([65317](https://github.com/WordPress/gutenberg/pull/65317))
+
+
+### Performance
+
+- Core Data: Batch remaining actions in resolvers. ([65176](https://github.com/WordPress/gutenberg/pull/65176))
+- Block Editor: Use static access for selector in 'useZoomOutModeExit'. ([65337](https://github.com/WordPress/gutenberg/pull/65337))
+- Editor: Optimize global styles permission check. ([65177](https://github.com/WordPress/gutenberg/pull/65177))
+
+
+### Experiments
+
+- Block bindings REST API: Bring bindings UI in Site Editor. ([64072](https://github.com/WordPress/gutenberg/pull/64072))
+
+
+### Documentation
+
+- Add JSDoc block for getSectionRootClientId in block editor package. ([65219](https://github.com/WordPress/gutenberg/pull/65219))
+- ButtonGroup: Fix story to show what the component does. ([65336](https://github.com/WordPress/gutenberg/pull/65336))
+- DataViews storybook
+  - Better styles for combined fields story. ([65078](https://github.com/WordPress/gutenberg/pull/65078))
+  - Enable all layouts for combined fields storybook. ([65082](https://github.com/WordPress/gutenberg/pull/65082))
+- Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- Docs: Update the content of the API version 3 section in the Block API Reference. ([65375](https://github.com/WordPress/gutenberg/pull/65375))
+- Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+
+
+### Code Quality
+
+- Components: Transition to the new 40px default size.
+  - Button:
+    - Add __next40pxDefaultSize for files in editor 3. ([65139](https://github.com/WordPress/gutenberg/pull/65139))
+    - Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+    - Add props for buttons in editor 1. ([65068](https://github.com/WordPress/gutenberg/pull/65068))
+    - Add props for buttons in editor 2. ([65083](https://github.com/WordPress/gutenberg/pull/65083))
+    - Fix: Replace remaining 40px default size violations [Block Editor 4]. ([65257](https://github.com/WordPress/gutenberg/pull/65257))
+    - Fix: Replace remaining 40px default size violation [Block library 3]. ([65110](https://github.com/WordPress/gutenberg/pull/65110))
+    - Fix: Replace remaining 40px default size violation [Block library 4]. ([65143](https://github.com/WordPress/gutenberg/pull/65143))
+    - Fix: Replace remaining 40px default size violation [Block library]. ([65075](https://github.com/WordPress/gutenberg/pull/65075))
+    - Fix: Replace remaining 40px default size violation [Edit Site 2]. ([65258](https://github.com/WordPress/gutenberg/pull/65258))
+    - Fix: Replace remaining 40px default size violations [Block library 1]. ([65033](https://github.com/WordPress/gutenberg/pull/65033))
+    - Fix: Replace remaining 40px default size violations [Block Editor 1]. ([65034](https://github.com/WordPress/gutenberg/pull/65034))
+  - BoxControl
+    - Add lint rule for 40px size prop usage. ([65341](https://github.com/WordPress/gutenberg/pull/65341))
+   - DimensionsPanel: Apply 40px default size to UI when no spacing preset is available. ([65300](https://github.com/WordPress/gutenberg/pull/65300))
+- Add `useEvent` and revamped `useResizeObserver` to `@wordpress/compose`. ([64943](https://github.com/WordPress/gutenberg/pull/64943))
+- DataViews: Use Dropdown for views configuration dialog. ([65314](https://github.com/WordPress/gutenberg/pull/65314))
+- Platform docs: Upgrade dependencies. ([65445](https://github.com/WordPress/gutenberg/pull/65445))
+- Rename edit-post__fade-in-animation and unify keyframe definitions. ([65377](https://github.com/WordPress/gutenberg/pull/65377))
+- Update minimum required version in PHP. ([65301](https://github.com/WordPress/gutenberg/pull/65301))
+- Editor: Use hooks instead of HoC in `BlockManager`. ([65349](https://github.com/WordPress/gutenberg/pull/65349))
+- Data Views Fields: Migrate store and actions from editor package to fields package. ([65261](https://github.com/WordPress/gutenberg/pull/65261))
+- Plugin: Remove 'function_exists' checks for methods with 'gutenberg' prefix. ([65260](https://github.com/WordPress/gutenberg/pull/65260))
+- Global Styles: Update REST controller override method and backport changes from Core. ([65259](https://github.com/WordPress/gutenberg/pull/65259))
+- Patterns: Remove unused method returned from 'mapSelect'. ([65073](https://github.com/WordPress/gutenberg/pull/65073))
+- Embed: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+
+#### Components
+- BoxControl: Fix critical error when null value is passed. ([65287](https://github.com/WordPress/gutenberg/pull/65287))
+- Composite:
+  - Deprecate legacy, unstable version. ([63572](https://github.com/WordPress/gutenberg/pull/63572))
+  - Remove store prop and useCompositeStore hook. ([64723](https://github.com/WordPress/gutenberg/pull/64723))
+  - Stabilize APIs. ([63569](https://github.com/WordPress/gutenberg/pull/63569))
+- `@wordpress/components`: Add local copy of `use-lilius`. ([65097](https://github.com/WordPress/gutenberg/pull/65097))
+
+#### Block bindings
+- Always prioritize using context in post meta source logic. ([65449](https://github.com/WordPress/gutenberg/pull/65449))
+- Improve getRegisteredPostMeta resolver. ([65450](https://github.com/WordPress/gutenberg/pull/65450))
+- Remove extra filtering of empty sources. ([65447](https://github.com/WordPress/gutenberg/pull/65447))
+
+#### Block Editor
+- Remove the 'PrivateInserter' component. ([65111](https://github.com/WordPress/gutenberg/pull/65111))
+- Use the tooltip from a button in 'ButtonBlockAppender'. ([65113](https://github.com/WordPress/gutenberg/pull/65113))
+- Remove unused css selectors. ([65276](https://github.com/WordPress/gutenberg/pull/65276))
+
+### Tools
+
+- Scripts: Update stylelint dependency and the default configuration. ([64828](https://github.com/WordPress/gutenberg/pull/64828))
+- Styleling config: Fix stylelint configuration missing files for npm. ([65313](https://github.com/WordPress/gutenberg/pull/65313))
+
+#### Build Tooling
+- Build Plugin: Simplify and improve zip contents. ([65232](https://github.com/WordPress/gutenberg/pull/65232))
+- Build zip artifact on release and wp production branches. ([65471](https://github.com/WordPress/gutenberg/pull/65471))
+- Build: Include Core blocks' `render` and `variations` files. ([63311](https://github.com/WordPress/gutenberg/pull/63311))
+- Script Modules
+  - Prepare build for more script modules. ([65064](https://github.com/WordPress/gutenberg/pull/65064))
+  - Remove babel from script-modules build. ([65279](https://github.com/WordPress/gutenberg/pull/65279))
+  - Remove es-module shims and importmap-polyfill. ([65210](https://github.com/WordPress/gutenberg/pull/65210))
+- Correctly generate PHP files for server-side rendering of blocks on Windows OS. ([65248](https://github.com/WordPress/gutenberg/pull/65248))
+- Packages: Only add polyfills where needed. ([65292](https://github.com/WordPress/gutenberg/pull/65292))
+- Switch from UglifyJS to Terser to build the polyfill script. ([65278](https://github.com/WordPress/gutenberg/pull/65278))
+
+#### Testing
+- Unit tests: Mock matchMedia to enforce prefers-reduce-motion. ([65438](https://github.com/WordPress/gutenberg/pull/65438))
+- Upgrade Playwright to v1.47. ([65156](https://github.com/WordPress/gutenberg/pull/65156))
+
+## First-time contributors
+
+The following PRs were merged by first-time contributors:
+
+- @AKSHAT2802: Add __next40pxDefaultSize for files in editor 4. ([65140](https://github.com/WordPress/gutenberg/pull/65140))
+- @devansh016: Automatically add tel to phone number when linking URL. ([64865](https://github.com/WordPress/gutenberg/pull/64865))
+- @dhruvang21: Fix: Button Replace remaining 40px default size violations [Edit widgets]. ([65367](https://github.com/WordPress/gutenberg/pull/65367))
+- @farid-hadi: Docs: Fix minor typos in Build your first block tutorial. ([64961](https://github.com/WordPress/gutenberg/pull/64961))
+- @greenworld: Fix typo in Slot Fills documentation. ([65275](https://github.com/WordPress/gutenberg/pull/65275))
+- @louwie17: Convert EmbedPreview component to functional component. ([51325](https://github.com/WordPress/gutenberg/pull/51325))
+- @rahulharpal1603: URLInput: Replace input with InputControl. ([65158](https://github.com/WordPress/gutenberg/pull/65158))
+
+
+## Contributors
+
+The following contributors merged PRs in this release:
+
+@aaronrobertshaw @afercia @AKSHAT2802 @Aljullu @andrewserong @carolinan @cbravobernal @ciampo @colorful-tones @creativecoder @DaniGuardiola @DAreRodz @devansh016 @dhruvang21 @ellatrix @farid-hadi @getdave @gigitux @greenworld @gziolo @hbhalodia @jameskoster @jasmussen @javierarce @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @louwie17 @madhusudhand @MaggieCabrera @Mamaduka @mikeybinns @mirka @ntsekouras @oandregal @ockham @peterwilsoncc @rahulharpal1603 @ramonjd @richtabor @rohitmathur-7 @SantosGuillamot @scruffian @sgomes @sirreal @stokesman @swissspidy @t-hamano @talldan @vipul0425 @zaguiini
+
+
 = 19.2.0 =
 
 ## Changelog
diff --git a/docs/getting-started/tutorial.md b/docs/getting-started/tutorial.md
index aac507d4c573f..4e43241f63fb1 100644
--- a/docs/getting-started/tutorial.md
+++ b/docs/getting-started/tutorial.md
@@ -25,7 +25,7 @@ To complete this tutorial, you will need:
 If you don't have one or more of these items, the [Block Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/) documentation will help you get started. Come back here once you are all set up.
 
 <div class="callout callout-info">
-	This tutorial uses <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> to create a local WordPress development environment. However, feel free to use alternate local development tools if you already have one that you prefer.
+	This tutorial uses <a href="https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/"><code>wp-env</code></a> to create a local WordPress development environment. However, feel free to use any development environment that meets the abovementioned prerequisites.
 </div>
 
 ## Scaffolding the block
@@ -250,7 +250,7 @@ At this point, the block's icon and description are correct, and block supports
 
 ### Updating edit.js
 
-The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message " Copyright Date Block – hello from the editor!". Let's change that.
+The [`edit.js`](https://developer.wordpress.org/block-editor/getting-started/fundamentals/file-structure-of-a-block/#edit-js) file controls how the block functions and appears in the Editor. Right now, the user sees the message "Copyright Date Block – hello from the editor!". Let's change that.
 
 Open the file and see that the `Edit()` function returns a paragraph tag with the default message.
 
@@ -647,10 +647,10 @@ While the Editor looks great, the starting year functionality has yet to be adde
 
 Start by adding a variable called `$display_date` and replicate what you did in the `Edit()` function above.
 
-This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` is the `showStartingYear` attribute is `false`.
+This variable should display the value of the `startingYear` attribute and the `$current_year` variable separated by an em dash, or just the `$current_year` if the `showStartingYear` attribute is `false`.
 
 <div class="callout callout-tip">
-	<p>Three variables are exposed in the <code>render.php</code>, which you can use to customize the block's output:</p>
+	<p>Three variables are exposed in <code>render.php</code>, which you can use to customize the block's output:</p>
 	<ul>
 		<li><code>$attributes</code> (array): The block attributes.</li>
 		<li><code>$content</code> (string): The block default content.</li>
diff --git a/docs/manifest.json b/docs/manifest.json
index e4eba19d99fa2..d76717fbdedfc 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -521,6 +521,12 @@
 		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md",
 		"parent": "core-concepts"
 	},
+	{
+		"title": "Using TypeScript",
+		"slug": "using-typescript",
+		"markdown_source": "../docs/reference-guides/interactivity-api/core-concepts/using-typescript.md",
+		"parent": "core-concepts"
+	},
 	{
 		"title": "Quick start guide",
 		"slug": "iapi-quick-start-guide",
@@ -1697,6 +1703,12 @@
 		"markdown_source": "../packages/eslint-plugin/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/fields",
+		"slug": "packages-fields",
+		"markdown_source": "../packages/fields/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/format-library",
 		"slug": "packages-format-library",
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0e0de9d4f8a50..66f713b3aa40f 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -72,14 +72,14 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
 -	**Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight)
 -	**Attributes:** month, year
 
-## Categories List
+## Terms List
 
-Display a list of all categories. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
+Display a list of all terms of a given taxonomy. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/categories))
 
 -	**Name:** core/categories
 -	**Category:** widgets
 -	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts
+-	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
 
 ## Code
 
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
index c6552ef431cef..4b3ca78f74d29 100644
--- a/docs/reference-guides/data/data-core-block-editor.md
+++ b/docs/reference-guides/data/data-core-block-editor.md
@@ -857,15 +857,9 @@ _Returns_
 
 ### hasBlockMovingClientId
 
-Returns whether block moving mode is enabled.
-
-_Parameters_
-
--   _state_ `Object`: Editor state.
-
-_Returns_
+> **Deprecated**
 
--   `string`: Client Id of moving block.
+Returns whether block moving mode is enabled.
 
 ### hasDraggedInnerBlock
 
@@ -1661,11 +1655,13 @@ _Returns_
 
 ### setBlockMovingClientId
 
-Action that enables or disables the block moving mode.
+> **Deprecated**
 
-_Parameters_
+Set the block moving client ID.
 
--   _hasBlockMovingClientId_ `string|null`: Enable/Disable block moving mode.
+_Returns_
+
+-   `Object`: Action object.
 
 ### setBlockVisibility
 
diff --git a/docs/reference-guides/interactivity-api/core-concepts/README.md b/docs/reference-guides/interactivity-api/core-concepts/README.md
index f4e6891c4ff16..695a4d622f6c5 100644
--- a/docs/reference-guides/interactivity-api/core-concepts/README.md
+++ b/docs/reference-guides/interactivity-api/core-concepts/README.md
@@ -7,3 +7,5 @@ This section provides some guides on important concepts and mental models relate
 2. **[Understanding global state, local context and derived state](/docs/reference-guides/interactivity-api/core-concepts/undestanding-global-state-local-context-and-derived-state.md):** The guide explains how to effectively use global state, local context, and derived state within the Interactivity API emphasizing the importance of choosing the appropriate state management technique based on the scope and requirements of your data.
 
 3. **[Server-side rendering: Processing directives on the server](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md):** The Interactivity API allows WordPress to use server-side rendering to create interactive and state-aware HTML, smoothly connected with client-side features while maintaining performance and SEO benefits.
+
+4. **[Using TypeScript](/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md):** This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
diff --git a/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
new file mode 100644
index 0000000000000..ed0bdd88211d1
--- /dev/null
+++ b/docs/reference-guides/interactivity-api/core-concepts/using-typescript.md
@@ -0,0 +1,746 @@
+# Using TypeScript
+
+The Interactivity API provides robust support for TypeScript, enabling developers to build type-safe stores to enhance the development experience with static type checking, improved code completion, and simplified refactoring. This guide will walk you through the process of using TypeScript with Interactivity API stores, covering everything from basic type definitions to advanced techniques for handling complex store structures.
+
+These are the core principles of TypeScript's interaction with the Interactivity API:
+
+-   **Inferred client types**: When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the types for you.
+-   **Explicit server types**: When dealing with data defined on the server, like local context or the initial values of the global state, you can explicitly define its types to ensure that everything is correctly typed.
+-   **Mutiple store parts**: Even if your store is split into multiple parts, you can define or infer the types of each part of the store and then merge them into a single type that represents the entire store.
+-   **Typed external stores**: You can import typed stores from external namespaces, allowing you to use other plugins' functionality with type safety.
+
+## Installing `@wordpress/interactivity` locally
+
+If you haven't done so already, you need to install the package `@wordpress/interactivity` locally so TypeScript can use its types in your IDE. You can do this using the following command:
+
+`npm install @wordpress/interactivity`
+
+It is also a good practice to keep that package updated.
+
+## Scaffolding a new typed interactive block
+
+If you want to explore an example of an interactive block using TypeScript in your local environment, you can use the `@wordpress/create-block-interactive-template`.
+
+Start by ensuring you have Node.js and `npm` installed on your computer. Review the [Node.js development environment](https://developer.wordpress.org/block-editor/getting-started/devenv/nodejs-development-environment/) guide if not.
+
+Next, use the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package and the [`@wordpress/create-block-interactive-template`](https://www.npmjs.com/package/@wordpress/create-block-interactive-template) template to scaffold the block.
+
+Choose the folder where you want to create the plugin, execute the following command in the terminal from within that folder, and choose the `typescript` variant when asked.
+
+```
+npx @wordpress/create-block@latest --template @wordpress/create-block-interactive-template
+```
+
+**Important**: Do not provide a slug in the terminal. Otherwise, `create-block` will not ask you which variant you want to choose and it will select the default non-TypeScript variant by default.
+
+Finally, you can keep following the instructions in the [Getting Started Guide](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/iapi-quick-start-guide/) as the rest of the instructions remain the same.
+
+## Typing the store
+
+Depending on the structure of your store and your preference, there are three options you can choose from to generate your store's types:
+
+1.  Infer the types from your client store definition.
+2.  Manually type the server state, but infer the rest from your client store definition.
+3.  Manually write all the types.
+
+### 1. Infer the types from your client store definition
+
+When you create a store using the `store` function, TypeScript automatically infers the types of the store's properties (`state`, `actions`, `callbacks`, etc.). This means that you can often get away with just writing plain JavaScript objects, and TypeScript will figure out the correct types for you.
+
+Let's start with a basic example of a counter block. We will define the store in the `view.ts` file of the block, which contains the initial global state, an action and a callback.
+
+```ts
+// view.ts
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			myStore.state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ myStore.state.counter }` );
+		},
+	},
+} );
+```
+
+If you inspect the types of `myStore` using TypeScript, you will see that TypeScript has been able to infer the types correctly.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+};
+```
+
+You can also destructure the `state`, `actions` and `callbacks` properties, and the types will still work correctly.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+In conclusion, inferring the types is useful when you have a simple store defined in a single call to the `store` function and you do not need to type any state that has been initialized on the server.
+
+### 2. Manually type the server state, but infer the rest from your client store definition
+
+The global state that is initialized on the server with the `wp_interactivity_state` function doesn't exist on your client store definition and, therefore, needs to be manually typed. But if you don't want to define all the types of your store, you can infer the types of your client store definition and merge them with the types of your server initialized state.
+
+_Please, visit [the Server-side Rendering guide](/docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md) to learn more about `wp_interactivity_state` and how directives are processed on the server._
+
+Following our previous example, let's move our `counter` state initialization to the server.
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+));
+```
+
+Now, let's define the server state types and merge it with the types inferred from the client store definition.
+
+```ts
+// Types the server state.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// Defines the store in a variable to be able to extract its type later.
+const storeDef = {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+Alternatively, if you don't mind typing the entire state including both the values defined on the server and the values defined on the client, you can cast the `state` property and let TypeScript infer the rest of the store.
+
+Let's imagine you have an additional property in the client global state called `product`.
+
+```ts
+type State = {
+	counter: number; // The server state.
+	product: number; // The client state.
+};
+
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		product: 2,
+	} as State, // Casts the entire state manually.
+	actions: {
+		increment() {
+			state.counter * state.product;
+		},
+	},
+} );
+```
+
+That's it. Now, TypeScript will infer the types of the `actions` and `callbacks` properties from the store definition, but it will use the type `State` for the `state` property so it contains the correct types from both the client and server definitions.
+
+In conclusion, this approach is useful when you have a server state that needs to be manually typed, but you still want to infer the types of the rest of the store.
+
+### 3. Manually write all the types
+
+If you prefer to define all the types of the store manually instead of letting TypeScript infer them from your client store definition, you can do that too. You simply need to pass them to the `store` function.
+
+```ts
+// Defines the store types.
+interface Store {
+	state: {
+		counter: number; // Initial server state
+	};
+	actions: {
+		increment(): void;
+	};
+	callbacks: {
+		log(): void;
+	};
+}
+
+// Pass the types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+	callbacks: {
+		log() {
+			console.log( `counter: ${ state.counter }` );
+		},
+	},
+} );
+```
+
+That's it! In conclusion, this approach is useful when you want to control all the types of your store and you don't mind writing them by hand.
+
+## Typing the local context
+
+The initial local context is defined on the server using the `data-wp-context` directive.
+
+```html
+<div data-wp-context='{ "counter": 0 }'>...</div>
+```
+
+For that reason, you need to define its type manually and pass it to the `getContext` function to ensure the returned properties are correctly typed.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Passes it to the getContext function.
+			const context = getContext< MyContext >();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+To avoid having to pass the context types over and over, you can also define a typed function and use that function instead of `getContext`.
+
+```ts
+// Defines the types of your context.
+type MyContext = {
+	counter: number;
+};
+
+// Defines a typed function. You only have to do this once.
+const getMyContext = getContext< MyContext >;
+
+store( 'myCounterPlugin', {
+	actions: {
+		increment() {
+			// Use your typed function.
+			const context = getMyContext();
+			// Now `context` is properly typed.
+			context.counter += 1;
+		},
+	},
+} );
+```
+
+That's it! Now you can access the context properties with the correct types.
+
+## Typing the derived state
+
+The derived state is data that is calculated based on the global state or local context. In the client store definition, it is defined using a getter in the `state` object.
+
+_Please, visit the [Understanding global state, local context and derived state](./undestanding-global-state-local-context-and-derived-state.md) guide to learn more about how derived state works in the Interactivity API._
+
+Following our previous example, let's create a derived state that is the double of our counter.
+
+```ts
+type MyContext = {
+	counter: number;
+};
+
+const myStore = store( 'myCounterPlugin', {
+	state: {
+		get double() {
+			const { counter } = getContext< MyContext >();
+			return counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is number.
+		},
+	},
+} );
+```
+
+Normally, when the derived state depends on the local context, TypeScript will be able to infer the correct types:
+
+```ts
+const myStore: {
+	state: {
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+But when the return value of the derived state depends directly on some part of the global state, TypeScript will not be able to infer the types because it will claim that it has a circular reference.
+
+For example, in this case, TypeScript cannot infer the type of `state.double` because it depends on `state.counter`, and the type of `state` is not completed until the type of `state.double` is defined, creating a circular reference.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double() {
+			// TypeScript can't infer this return type because it depends on `state`.
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // This type is now unknown.
+		},
+	},
+} );
+```
+
+In this case, depending on your TypeScript configuration, TypeScript will either warn you about a circular reference or simply add the `any` type to the `state` property.
+
+However, solving this problem is easy; we simply need to manually provide TypeScript with the return type of that getter. Once we do that, the circular reference disappears, and TypeScript can once again infer all the `state` types.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 1,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1; // Correctly inferred!
+		},
+	},
+} );
+```
+
+These are now the correct inferred types for the previous store.
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+	};
+};
+```
+
+When using `wp_interactivity_state` in the server, remember that you also need to define the initial value of your derived state, like this:
+
+```php
+wp_interactivity_state( 'myCounterPlugin', array(
+	'counter' => 1,
+	'double'  => 2,
+));
+```
+
+But if you are inferring the types, you don't need to manually define the type of the derived state because it already exists in your client's store definition.
+
+```ts
+// You don't need to type `state.double` here.
+type ServerState = {
+	state: {
+		counter: number;
+	};
+};
+
+// The `state.double` type is inferred from here.
+const storeDef = {
+	state: {
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+	},
+};
+
+// Merges the types of the server state and the client store definition.
+type Store = ServerState & typeof storeDef;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< Store >( 'myCounterPlugin', storeDef );
+```
+
+That's it! Now you can access the derived state properties with the correct types.
+
+## Typing asynchronous actions
+
+Another thing to keep in mind when using TypeScript with the Interactivity API is that asynchronous actions must be defined with generators instead of async functions.
+
+The reason for using generators in the Interactivity API's asynchronous actions is to be able to restore the scope from the initially triggered action once the asynchronous action continues its execution after yielding. But this is a syntax change only, otherwise, **these functions operate just like regular async functions**, and the inferred types from the `store` function reflect this.
+
+Following our previous example, let's add an asynchronous action to the store.
+
+```ts
+const { state } = store( 'myCounterPlugin', {
+	state: {
+		counter: 0,
+		get double(): number {
+			return state.counter * 2;
+		},
+	},
+	actions: {
+		increment() {
+			state.counter += 1;
+		},
+		*delayedIncrement() {
+			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+			state.counter += 1;
+		},
+	},
+} );
+```
+
+The inferred types for this store are:
+
+```ts
+const myStore: {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		// This behaves like a regular async function.
+		delayedIncrement(): Promise< void >;
+	};
+};
+```
+
+This also means that you can use your async actions in external functions, and TypeScript will correctly use the async function types.
+
+```ts
+const someAsyncFunction = async () => {
+	// This works fine and it's correctly typed.
+	await actions.delayedIncrement( 2000 );
+};
+```
+
+When you are not inferring types but manually writing the types for your entire store, you can use async function types for your async actions.
+
+```ts
+type Store = {
+	state: {
+		counter: number;
+		readonly double: number;
+	};
+	actions: {
+		increment(): void;
+		delayedIncrement(): Promise< void >; // You can use async functions here.
+	};
+};
+```
+
+There's something to keep in mind when when using asynchronous actions. Just like with the derived state, if the asynchronous action needs to return a value and this value directly depends on some part of the global state, TypeScript will not be able to infer the type due to a circular reference.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn() {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // TypeScript can't infer this return type.
+    		},
+    	},
+    } );
+    ```
+
+    In this case, just as we did with the derived state, we must manually type the return value of the generator.
+
+    ```ts
+    const { state, actions } = store( 'myCounterPlugin', {
+    	state: {
+    		counter: 0,
+    	},
+    	actions: {
+    		*delayedReturn(): Generator< uknown, number, uknown > {
+    			yield new Promise( ( r ) => setTimeout( r, 1000 ) );
+    			return state.counter; // Now this is correctly inferred.
+    		},
+    	},
+    } );
+    ```
+
+    That's it! Remember that the return type of a Generator is the second generic argument: `Generator< unknown, ReturnType, unknown >`.
+
+## Typing stores that are divided into multiple parts
+
+Sometimes, stores can be divided into different files. This can happen when different blocks share the same namespace, with each block loading the part of the store it needs.
+
+Let's look at an example of two blocks:
+
+-   `todo-list`: A block that displays a list of todos.
+-   `add-post-to-todo`: A block that shows a button to add a new todo item to the list with the text "Read {$post_title}".
+
+First, let's initialize the global and derived state of the `todo-list` block on the server.
+
+```php
+<?php
+// todo-list-block/render.php
+$todos = array( 'Buy milk', 'Walk the dog' );
+wp_interactivity_state( 'myTodoPlugin', array(
+  'todos'         => $todos,
+  'filter'        => 'all',
+  'filteredTodos' => $todos,
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type the server state and add the client store definition. Remember, `filteredTodos` is derived state, so you don't need to type it manually.
+
+```ts
+// todo-list-block/view.ts
+type ServerState = {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+	};
+};
+
+const todoList = {
+	state: {
+		get filteredTodos(): string[] {
+			return state.filter === 'completed'
+				? state.todos.filter( ( todo ) => todo.includes( '✅' ) )
+				: state.todos;
+		},
+	},
+	actions: {
+		addTodo( todo: string ) {
+			state.todos.push( todo );
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+export type TodoList = ServerState & typeof todoList;
+
+// Injects the final types when calling the `store` function.
+const { state } = store< TodoList >( 'myTodoPlugin', todoList );
+```
+
+So far, so good. Now let's create our `add-post-to-todo` block.
+
+First, let's add the current post title to the server state.
+
+```php
+<?php
+// add-post-to-todo-block/render.php
+wp_interactivity_state( 'myTodoPlugin', array(
+  'postTitle' => get_the_title(),
+));
+?>
+
+<!-- HTML markup... -->
+```
+
+Now, let's type that server state and add the client store definition.
+
+```ts
+// add-post-to-todo-block/view.ts
+type ServerState = {
+	state: {
+		postTitle: string;
+	};
+};
+
+const addPostToTodo = {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! state.todos.includes( todo ) ) {
+				actions.addTodo( todo );
+			}
+		},
+	},
+};
+
+// Merges the inferred types with the server state types.
+type Store = ServerState & typeof addPostToTodo;
+
+// Injects the final types when calling the `store` function.
+const { state, actions } = store< Store >( 'myTodoPlugin', addPostToTodo );
+```
+
+This works fine in the browser, but TypeScript will complain that, in this block, `state` and `actions` do not include `state.todos` and `actions.addtodo`.
+
+To fix this, we need to import the `TodoList` type from the `todo-list` block and merge it with the other types.
+
+```ts
+import type { TodoList } from '../todo-list-block/view';
+
+// ...
+
+// Merges the inferred types inferred the server state types.
+type Store = TodoList & ServerState & typeof addPostToTodo;
+```
+
+That's it! Now TypeScript will know that `state.todos` and `actions.addTodo` are available in the `add-post-to-todo` block.
+
+This approach allows the `add-post-to-todo` block to interact with the existing todo list while maintaining type safety and adding its own functionality to the shared store.
+
+If you need to use the `add-post-to-todo` types in the `todo-list` block, you simply have to export its types and import them in the other `view.ts` file.
+
+Finally, if you prefer to define all types manually instead of inferring them, you can define them in a separate file and import that definition into each of your store parts. Here's how you could do that for our todo list example:
+
+```ts
+// types.ts
+interface Store {
+	state: {
+		todos: string[];
+		filter: 'all' | 'completed';
+		filtered: string[];
+		postTitle: string;
+	};
+	actions: {
+		addTodo( todo: string ): void;
+		addPostToTodo(): void;
+	};
+}
+
+export default Store;
+```
+
+```ts
+// todo-list-block/view.ts
+import type Store from '../types';
+
+const { state } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+```ts
+// add-post-to-todo-block/view.ts
+import type Store from '../types';
+
+const { state, actions } = store< Store >( 'myTodoPlugin', {
+	// Everything is correctly typed here
+} );
+```
+
+This approach allows you to have full control over your types and ensures consistency across all parts of your store. It's particularly useful when you have a complex store structure or when you want to enforce a specific interface across multiple blocks or components.
+
+## Importing and exporting typed stores
+
+In the Interactivity API, stores from other namespaces can be accessed using the `store` function.
+
+Let's go back to our `todo-list` block example, but this time, let's imagine that the `add-post-to-todo` block belongs to a different plugin and therefore will use a different namespace.
+
+```ts
+// Import the store of the `todo-list` block.
+const myTodoPlugin = store( 'myTodoPlugin' );
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! myTodoPlugin.state.todos.includes( todo ) ) {
+				myTodoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+This works fine in the browser, but TypeScript will complain that `myTodoPlugin.state` and `myTodoPlugin.actions` are not typed.
+
+To fix that, the `myTodoPlugin` plugin can export the result of calling the `store` function with the correct types, and make that available using a script module.
+
+```ts
+// Export the already typed state and actions.
+export const { state, actions } = store< TodoList >( 'myTodoPlugin', {
+	// ...
+} );
+```
+
+Now, the `add-post-to-todo` block can import the typed store from the `myTodoPlugin` script module, and it not only ensures that the store will be loaded, but that it also contains the correct types.
+
+```ts
+import { store } from '@wordpress/interactivity';
+import {
+	state as todoState,
+	actions as todoActions,
+} from 'my-todo-plugin-module';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		addPostToTodo() {
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoState.todos.includes( todo ) ) {
+				todoActions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+Remember that you will need to declare the `my-todo-plugin-module` script module as a dependency.
+
+If the other store is optional and you don't want to load it eagerly, a dynamic import can be used instead of a static import.
+
+```ts
+import { store } from '@wordpress/interactivity';
+
+store( 'myAddPostToTodoPlugin', {
+	actions: {
+		*addPostToTodo() {
+			const todoPlugin = yield import( 'my-todo-plugin-module' );
+			const todo = `Read: ${ state.postTitle }`.trim();
+			if ( ! todoPlugin.state.todos.includes( todo ) ) {
+				todoPlugin.actions.addTodo( todo );
+			}
+		},
+	},
+} );
+```
+
+## Conclusion
+
+In this guide, we explored different approaches to typing the Interactivity API stores, from inferring types automatically to manually defining them. We also covered how to handle server-initialized state, local context, and derived state, as well as how to type asynchronous actions.
+
+Remember that the choice between inferring types and manually defining them depends on your specific needs and the complexity of your store. Whichever approach you choose, TypeScript will help you build better and more reliable interactive blocks.
diff --git a/docs/toc.json b/docs/toc.json
index 719ffa344e374..0d4689811b26e 100644
--- a/docs/toc.json
+++ b/docs/toc.json
@@ -214,6 +214,9 @@
 							},
 							{
 								"docs/reference-guides/interactivity-api/core-concepts/server-side-rendering.md": []
+							},
+							{
+								"docs/reference-guides/interactivity-api/core-concepts/using-typescript.md": []
 							}
 						]
 					},
diff --git a/gutenberg.php b/gutenberg.php
index 342c61fb56cd1..466509dcf6b58 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.5
  * Requires PHP: 7.2
- * Version: 19.2.0
+ * Version: 19.3.0
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *
diff --git a/lib/class-wp-rest-global-styles-controller-gutenberg.php b/lib/class-wp-rest-global-styles-controller-gutenberg.php
index e33304e596e12..1f6543fa18428 100644
--- a/lib/class-wp-rest-global-styles-controller-gutenberg.php
+++ b/lib/class-wp-rest-global-styles-controller-gutenberg.php
@@ -532,27 +532,39 @@ public function get_item_schema() {
 	 * Checks if a given request has access to read a single theme global styles config.
 	 *
 	 * @since 5.9.0
+	 * @since 6.7.0 Allow users with edit post capabilities to view theme global styles.
 	 *
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
 	 */
 	public function get_theme_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		/*
+		 * Verify if the current user has edit_posts capability.
+		 */
+		if ( current_user_can( 'edit_posts' ) ) {
+			return true;
+		}
+
+		foreach ( get_post_types( array( 'show_in_rest' => true ), 'objects' ) as $post_type ) {
+			if ( current_user_can( $post_type->cap->edit_posts ) ) {
+				return true;
+			}
+		}
 
 		/*
 		 * Verify if the current user has edit_theme_options capability.
-		 * This capability is required to edit/view/delete global styles.
 		 */
-		if ( ! current_user_can( 'edit_theme_options' ) ) {
-			return new WP_Error(
-				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
+		if ( current_user_can( 'edit_theme_options' ) ) {
+			return true;
 		}
 
-		return true;
+		return new WP_Error(
+			'rest_cannot_read_global_styles',
+			__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
+			array(
+				'status' => rest_authorization_required_code(),
+			)
+		);
 	}
 
 	/**
@@ -616,23 +628,8 @@ public function get_theme_item( $request ) {
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
 	 */
-	public function get_theme_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-
-		/*
-		 * Verify if the current user has edit_theme_options capability.
-		 * This capability is required to edit/view/delete global styles.
-		 */
-		if ( ! current_user_can( 'edit_theme_options' ) ) {
-			return new WP_Error(
-				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
-				array(
-					'status' => rest_authorization_required_code(),
-				)
-			);
-		}
-
-		return true;
+	public function get_theme_items_permissions_check( $request ) {
+		return $this->get_theme_item_permissions_check( $request );
 	}
 
 	/**
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 62e874d6b06c8..2343530e5595a 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -601,6 +601,56 @@ function gutenberg_register_vendor_scripts( $scripts ) {
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_vendor_scripts' );
 
+/**
+ * Registers or re-registers Gutenberg Script Modules.
+ *
+ * Script modules that are registered by Core will be re-registered by Gutenberg.
+ *
+ * @since 19.3.0
+ */
+function gutenberg_default_script_modules() {
+	/*
+	 * Expects multidimensional array like:
+	 *
+	 *     'interactivity/index.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity/debug.min.js' => array('dependencies' => array(…), 'version' => '…'),
+	 *     'interactivity-router/index.min.js' => …
+	 */
+	$assets = include gutenberg_dir_path() . '/build-module/assets.php';
+
+	foreach ( $assets as $file_name => $script_module_data ) {
+		/*
+		 * Build the WordPress Script Module ID from the file name.
+		 * Prepend `@wordpress/` and remove extensions and `/index` if present:
+		 *   - interactivity/index.min.js  => @wordpress/interactivity
+		 *   - interactivity/debug.min.js  => @wordpress/interactivity/debug
+		 *   - block-library/query/view.js => @wordpress/block-library/query/view
+		 */
+		$script_module_id = '@wordpress/' . preg_replace( '~(?:/index)?\.min\.js$~D', '', $file_name, 1 );
+		switch ( $script_module_id ) {
+			/*
+			 * Interactivity exposes two entrypoints, "/index" and "/debug".
+			 * "/debug" should replalce "/index" in devlopment.
+			 */
+			case '@wordpress/interactivity/debug':
+				if ( ! SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				$script_module_id = '@wordpress/interactivity';
+				break;
+			case '@wordpress/interactivity':
+				if ( SCRIPT_DEBUG ) {
+					continue 2;
+				}
+				break;
+		}
+
+		$path = gutenberg_url( "build-module/{$file_name}" );
+		wp_register_script_module( $script_module_id, $path, $script_module_data['dependencies'], $script_module_data['version'] );
+	}
+}
+remove_action( 'wp_default_scripts', 'wp_default_script_modules' );
+add_action( 'wp_default_scripts', 'gutenberg_default_script_modules' );
 
 /*
  * Always remove the Core action hook while gutenberg_enqueue_stored_styles() exists to avoid styles being printed twice.
diff --git a/lib/compat/wordpress-6.7/block-bindings.php b/lib/compat/wordpress-6.7/block-bindings.php
index 9e82c1843f35a..a8f68c0f0f04e 100644
--- a/lib/compat/wordpress-6.7/block-bindings.php
+++ b/lib/compat/wordpress-6.7/block-bindings.php
@@ -53,3 +53,35 @@ function gutenberg_add_can_update_block_bindings_editor_setting( $editor_setting
 }
 
 add_filter( 'block_editor_settings_all', 'gutenberg_add_can_update_block_bindings_editor_setting', 10 );
+
+/**
+ * Add `label` to `register_meta`.
+ *
+ * @param array  $args Array of arguments for registering meta.
+ * @return array Modified arguments array including `label`.
+ */
+function gutenberg_update_meta_args_with_label( $args ) {
+	// Don't update schema when label isn't provided.
+	if ( ! isset( $args['label'] ) ) {
+		return $args;
+	}
+
+	$schema = array( 'title' => $args['label'] );
+	if ( ! is_array( $args['show_in_rest'] ) ) {
+		$args['show_in_rest'] = array(
+			'schema' => $schema,
+		);
+		return $args;
+	}
+
+	if ( ! empty( $args['show_in_rest']['schema'] ) ) {
+		$args['show_in_rest']['schema'] = array_merge( $args['show_in_rest']['schema'], $schema );
+	} else {
+		$args['show_in_rest']['schema'] = $schema;
+	}
+
+	return $args;
+}
+
+// Priority must be lower than 10 to ensure the label is not removed.
+add_filter( 'register_meta_args', 'gutenberg_update_meta_args_with_label', 5, 1 );
diff --git a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
index 8374e8dc1fa23..efdc41289dfac 100644
--- a/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
+++ b/lib/compat/wordpress-6.7/class-gutenberg-rest-server.php
@@ -95,17 +95,33 @@ public static function get_response_links( $response ) {
 					continue;
 				}
 
-				$match = $server->match_request_to_handler( $request );
-				if ( ! is_wp_error( $match ) ) {
-					$response = new WP_REST_Response();
-					$response->set_matched_route( $match[0] );
-					$response->set_matched_handler( $match[1] );
-					$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
-
-					foreach ( $headers as $name => $value ) {
-						$name                               = WP_REST_Request::canonicalize_header_name( $name );
-						$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
-					}
+				$matched = $server->match_request_to_handler( $request );
+
+				if ( is_wp_error( $matched ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->has_valid_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				if ( is_wp_error( $request->sanitize_params() ) ) {
+					$data[ $rel ][] = $attributes;
+					continue;
+				}
+
+				list( $route, $handler ) = $matched;
+
+				$response = new WP_REST_Response();
+				$response->set_matched_route( $route );
+				$response->set_matched_handler( $handler );
+				$headers = rest_send_allow_header( $response, $server, $request )->get_headers();
+
+				foreach ( $headers as $name => $value ) {
+					$name                               = WP_REST_Request::canonicalize_header_name( $name );
+					$attributes['targetHints'][ $name ] = array_map( 'trim', explode( ',', $value ) );
 				}
 
 				$data[ $rel ][] = $attributes;
diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
index c5e2927198da0..313367594caae 100644
--- a/lib/compat/wordpress-6.7/rest-api.php
+++ b/lib/compat/wordpress-6.7/rest-api.php
@@ -114,3 +114,26 @@ function gutenberg_override_default_rest_server() {
 	return 'Gutenberg_REST_Server';
 }
 add_filter( 'wp_rest_server_class', 'gutenberg_override_default_rest_server', 1 );
+
+
+/**
+ * Filters the arguments for registering a wp_global_styles post type.
+ * Note when syncing to Core: the capabilities should be updates for `wp_global_styles` in the wp-includes/post.php.
+ *
+ * @since 6.7.0
+ *
+ * @param array  $args      Array of arguments for registering a post type.
+ *                          See the register_post_type() function for accepted arguments.
+ * @param string $post_type Post type key.
+ *
+ * @return array Array of arguments for registering a post type.
+ */
+function gutenberg_register_post_type_args_for_wp_global_styles( $args, $post_type ) {
+	if ( 'wp_global_styles' === $post_type ) {
+		$args['capabilities']['read'] = 'edit_posts';
+	}
+
+	return $args;
+}
+
+add_filter( 'register_post_type_args', 'gutenberg_register_post_type_args_for_wp_global_styles', 10, 2 );
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
index 919be2e6e34a4..126382f85a513 100644
--- a/lib/experimental/editor-settings.php
+++ b/lib/experimental/editor-settings.php
@@ -34,9 +34,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = true', 'before' );
-	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );
diff --git a/lib/experimental/script-modules.php b/lib/experimental/script-modules.php
index a113df02b9d75..fe23786fc0362 100644
--- a/lib/experimental/script-modules.php
+++ b/lib/experimental/script-modules.php
@@ -202,28 +202,42 @@ function gutenberg_dequeue_module( $module_identifier ) {
 }
 
 /**
- * Registers Gutenberg Script Modules.
+ * Prints HTML for the a11y Script Module.
  *
- * @since 19.3
+ * a11y relies on some DOM elements to use as ARIA live regions.
+ * Ideally, these elements are part of the initial HTML of the page
+ * so that accessibility tools can find them and observe updates.
  */
-function gutenberg_register_script_modules() {
-	// When in production, use the plugin's version as the default asset version;
-	// else (for development or test) default to use the current time.
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
-
-	wp_deregister_script_module( '@wordpress/a11y' );
-	wp_register_script_module(
-		'@wordpress/a11y',
-		gutenberg_url( 'build-module/a11y/index.min.js' ),
-		array(),
-		$default_version
-	);
-	add_filter(
-		'script_module_data_@wordpress/a11y',
-		function ( $data ) {
-			$data['i18n'] = array( 'Notifications' => __( 'Notifications', 'default' ) );
-			return $data;
+function gutenberg_a11y_script_module_html() {
+	$a11y_module_available = false;
+
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_marked_for_enqueue->setAccessible( true );
+	$get_import_map = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+	$get_import_map->setAccessible( true );
+
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		if ( '@wordpress/a11y' === $id ) {
+			$a11y_module_available = true;
+			break;
 		}
-	);
+	}
+	if ( ! $a11y_module_available ) {
+		foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+			if ( '@wordpress/a11y' === $id ) {
+				$a11y_module_available = true;
+				break;
+			}
+		}
+	}
+	if ( ! $a11y_module_available ) {
+		return;
+	}
+	echo '<div style="position:absolute;margin:-1px;padding:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);border:0;word-wrap:normal !important;">'
+		. '<p id="a11y-speak-intro-text" class="a11y-speak-intro-text" hidden>' . esc_html__( 'Notifications', 'default' ) . '</p>'
+		. '<div id="a11y-speak-assertive" class="a11y-speak-region" aria-live="assertive" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '<div id="a11y-speak-polite" class="a11y-speak-region" aria-live="polite" aria-relevant="additions text" aria-atomic="true"></div>'
+		. '</div>';
 }
-add_action( 'init', 'gutenberg_register_script_modules' );
+add_action( 'wp_footer', 'gutenberg_a11y_script_module_html' );
+add_action( 'admin_footer', 'gutenberg_a11y_script_module_html' );
diff --git a/lib/experiments-page.php b/lib/experiments-page.php
index 5acd5f0f19236..27a54b920f4d5 100644
--- a/lib/experiments-page.php
+++ b/lib/experiments-page.php
@@ -175,17 +175,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-zoom-out-experiment',
-		__( 'Zoom out experiments', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Enable zoom out experiments; shows zoom out in the device preview and other zoom out experiments.', 'gutenberg' ),
-			'id'    => 'gutenberg-zoom-out-experiment',
-		)
-	);
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'
diff --git a/lib/interactivity-api.php b/lib/interactivity-api.php
index 90535f1ebaa42..ff68936f054a7 100644
--- a/lib/interactivity-api.php
+++ b/lib/interactivity-api.php
@@ -6,27 +6,28 @@
  */
 
 /**
- * Deregisters the Core Interactivity API Modules and replace them
- * with the ones from the Gutenberg plugin.
+ * Adds script data to the interactivity-router script module.
+ *
+ * This filter is registered conditionally anticipating a WordPress Core change to add the script module data.
+ * The filter runs on 'after_setup_theme' (when Core registers Interactivity and Script Modules hooks)
+ * to ensure that the conditional registration happens after Core and correctly determine whether
+ * the filter should be added.
+ *
+ * @see https://github.com/WordPress/wordpress-develop/pull/7304
  */
-function gutenberg_reregister_interactivity_script_modules() {
-	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
-	wp_deregister_script_module( '@wordpress/interactivity' );
-	wp_deregister_script_module( '@wordpress/interactivity-router' );
-
-	wp_register_script_module(
-		'@wordpress/interactivity',
-		gutenberg_url( '/build-module/' . ( SCRIPT_DEBUG ? 'interactivity/debug.min.js' : 'interactivity/index.min.js' ) ),
-		array(),
-		$default_version
-	);
-
-	wp_register_script_module(
-		'@wordpress/interactivity-router',
-		gutenberg_url( '/build-module/interactivity-router/index.min.js' ),
-		array( '@wordpress/interactivity' ),
-		$default_version
-	);
+function gutenberg_register_interactivity_script_module_data_hooks() {
+	if ( ! has_filter( 'script_module_data_@wordpress/interactivity-router', array( wp_interactivity(), 'filter_script_module_interactivity_router_data' ) ) ) {
+		add_filter(
+			'script_module_data_@wordpress/interactivity-router',
+			function ( $data ) {
+				if ( ! isset( $data['i18n'] ) ) {
+					$data['i18n'] = array();
+				}
+				$data['i18n']['loading'] = __( 'Loading page, please wait.', 'default' );
+				$data['i18n']['loaded']  = __( 'Page Loaded.', 'default' );
+				return $data;
+			}
+		);
+	}
 }
-
-add_action( 'init', 'gutenberg_reregister_interactivity_script_modules' );
+add_action( 'after_setup_theme', 'gutenberg_register_interactivity_script_module_data_hooks', 20 );
diff --git a/lib/rest-api.php b/lib/rest-api.php
index ac020e243ec05..7570bb1973723 100644
--- a/lib/rest-api.php
+++ b/lib/rest-api.php
@@ -13,9 +13,8 @@
 /**
  * Overrides the REST controller for the `wp_global_styles` post type.
  *
- * @param array  $args      Array of arguments for registering a post type.
+ * @param array $args Array of arguments for registering a post type.
  *                          See the register_post_type() function for accepted arguments.
- * @param string $post_type Post type key.
  *
  * @return array Array of arguments for registering a post type.
  */
diff --git a/package-lock.json b/package-lock.json
index e9c89d9dd65dc..93da356b222be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "gutenberg",
-	"version": "19.2.0",
+	"version": "19.3.0",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "gutenberg",
-			"version": "19.2.0",
+			"version": "19.3.0",
 			"hasInstallScript": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52564,7 +52564,7 @@
 		},
 		"packages/a11y": {
 			"name": "@wordpress/a11y",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52578,7 +52578,7 @@
 		},
 		"packages/annotations": {
 			"name": "@wordpress/annotations",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52606,7 +52606,7 @@
 		},
 		"packages/api-fetch": {
 			"name": "@wordpress/api-fetch",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52620,7 +52620,7 @@
 		},
 		"packages/autop": {
 			"name": "@wordpress/autop",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52632,7 +52632,7 @@
 		},
 		"packages/babel-plugin-import-jsx-pragma": {
 			"name": "@wordpress/babel-plugin-import-jsx-pragma",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52645,7 +52645,7 @@
 		},
 		"packages/babel-plugin-makepot": {
 			"name": "@wordpress/babel-plugin-makepot",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52663,7 +52663,7 @@
 		},
 		"packages/babel-preset-default": {
 			"name": "@wordpress/babel-preset-default",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -52686,7 +52686,7 @@
 		},
 		"packages/base-styles": {
 			"name": "@wordpress/base-styles",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52696,7 +52696,7 @@
 		},
 		"packages/blob": {
 			"name": "@wordpress/blob",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52708,7 +52708,7 @@
 		},
 		"packages/block-directory": {
 			"name": "@wordpress/block-directory",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52743,7 +52743,7 @@
 		},
 		"packages/block-editor": {
 			"name": "@wordpress/block-editor",
-			"version": "14.2.0",
+			"version": "14.3.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52842,7 +52842,7 @@
 		},
 		"packages/block-library": {
 			"name": "@wordpress/block-library",
-			"version": "9.7.0",
+			"version": "9.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52908,7 +52908,7 @@
 		},
 		"packages/block-serialization-default-parser": {
 			"name": "@wordpress/block-serialization-default-parser",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -52920,7 +52920,7 @@
 		},
 		"packages/block-serialization-spec-parser": {
 			"name": "@wordpress/block-serialization-spec-parser",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"pegjs": "^0.10.0",
@@ -52933,7 +52933,7 @@
 		},
 		"packages/blocks": {
 			"name": "@wordpress/blocks",
-			"version": "13.7.0",
+			"version": "13.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -52987,7 +52987,7 @@
 		},
 		"packages/browserslist-config": {
 			"name": "@wordpress/browserslist-config",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -52997,7 +52997,7 @@
 		},
 		"packages/commands": {
 			"name": "@wordpress/commands",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53170,7 +53170,7 @@
 		},
 		"packages/components": {
 			"name": "@wordpress/components",
-			"version": "28.7.0",
+			"version": "28.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.10",
@@ -53290,7 +53290,7 @@
 		},
 		"packages/compose": {
 			"name": "@wordpress/compose",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53327,7 +53327,7 @@
 		},
 		"packages/core-commands": {
 			"name": "@wordpress/core-commands",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53340,6 +53340,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -53355,7 +53356,7 @@
 		},
 		"packages/core-data": {
 			"name": "@wordpress/core-data",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53400,7 +53401,7 @@
 		},
 		"packages/create-block": {
 			"name": "@wordpress/create-block",
-			"version": "4.50.0",
+			"version": "4.51.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53428,7 +53429,7 @@
 		},
 		"packages/create-block-tutorial-template": {
 			"name": "@wordpress/create-block-tutorial-template",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -53438,7 +53439,7 @@
 		},
 		"packages/customize-widgets": {
 			"name": "@wordpress/customize-widgets",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53476,7 +53477,7 @@
 		},
 		"packages/data": {
 			"name": "@wordpress/data",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53505,7 +53506,7 @@
 		},
 		"packages/data-controls": {
 			"name": "@wordpress/data-controls",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53523,7 +53524,7 @@
 		},
 		"packages/dataviews": {
 			"name": "@wordpress/dataviews",
-			"version": "4.3.0",
+			"version": "4.4.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@ariakit/react": "^0.4.10",
@@ -53580,7 +53581,7 @@
 		},
 		"packages/date": {
 			"name": "@wordpress/date",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53595,7 +53596,7 @@
 		},
 		"packages/dependency-extraction-webpack-plugin": {
 			"name": "@wordpress/dependency-extraction-webpack-plugin",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53611,7 +53612,7 @@
 		},
 		"packages/deprecated": {
 			"name": "@wordpress/deprecated",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53624,7 +53625,7 @@
 		},
 		"packages/docgen": {
 			"name": "@wordpress/docgen",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53646,7 +53647,7 @@
 		},
 		"packages/dom": {
 			"name": "@wordpress/dom",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53659,7 +53660,7 @@
 		},
 		"packages/dom-ready": {
 			"name": "@wordpress/dom-ready",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -53671,7 +53672,7 @@
 		},
 		"packages/e2e-test-utils": {
 			"name": "@wordpress/e2e-test-utils",
-			"version": "11.7.0",
+			"version": "11.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53694,7 +53695,7 @@
 		},
 		"packages/e2e-test-utils-playwright": {
 			"name": "@wordpress/e2e-test-utils-playwright",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53722,7 +53723,7 @@
 		},
 		"packages/e2e-tests": {
 			"name": "@wordpress/e2e-tests",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -53762,7 +53763,7 @@
 		},
 		"packages/edit-post": {
 			"name": "@wordpress/edit-post",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53809,7 +53810,7 @@
 		},
 		"packages/edit-site": {
 			"name": "@wordpress/edit-site",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53871,7 +53872,7 @@
 		},
 		"packages/edit-widgets": {
 			"name": "@wordpress/edit-widgets",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53914,7 +53915,7 @@
 		},
 		"packages/editor": {
 			"name": "@wordpress/editor",
-			"version": "14.7.0",
+			"version": "14.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53976,7 +53977,7 @@
 		},
 		"packages/element": {
 			"name": "@wordpress/element",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -53995,7 +53996,7 @@
 		},
 		"packages/env": {
 			"name": "@wordpress/env",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54137,7 +54138,7 @@
 		},
 		"packages/escape-html": {
 			"name": "@wordpress/escape-html",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54149,7 +54150,7 @@
 		},
 		"packages/eslint-plugin": {
 			"name": "@wordpress/eslint-plugin",
-			"version": "21.0.0",
+			"version": "21.1.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54228,7 +54229,7 @@
 		},
 		"packages/format-library": {
 			"name": "@wordpress/format-library",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54256,7 +54257,7 @@
 		},
 		"packages/hooks": {
 			"name": "@wordpress/hooks",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54268,7 +54269,7 @@
 		},
 		"packages/html-entities": {
 			"name": "@wordpress/html-entities",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54280,7 +54281,7 @@
 		},
 		"packages/i18n": {
 			"name": "@wordpress/i18n",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54300,7 +54301,7 @@
 		},
 		"packages/icons": {
 			"name": "@wordpress/icons",
-			"version": "10.7.0",
+			"version": "10.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54314,7 +54315,7 @@
 		},
 		"packages/interactivity": {
 			"name": "@wordpress/interactivity",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@preact/signals": "^1.2.2",
@@ -54327,9 +54328,10 @@
 		},
 		"packages/interactivity-router": {
 			"name": "@wordpress/interactivity-router",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			},
 			"engines": {
@@ -54363,7 +54365,7 @@
 		},
 		"packages/interface": {
 			"name": "@wordpress/interface",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54392,7 +54394,7 @@
 		},
 		"packages/is-shallow-equal": {
 			"name": "@wordpress/is-shallow-equal",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54404,7 +54406,7 @@
 		},
 		"packages/jest-console": {
 			"name": "@wordpress/jest-console",
-			"version": "8.7.0",
+			"version": "8.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54421,7 +54423,7 @@
 		},
 		"packages/jest-preset-default": {
 			"name": "@wordpress/jest-preset-default",
-			"version": "12.7.0",
+			"version": "12.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54439,7 +54441,7 @@
 		},
 		"packages/jest-puppeteer-axe": {
 			"name": "@wordpress/jest-puppeteer-axe",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54462,7 +54464,7 @@
 		},
 		"packages/keyboard-shortcuts": {
 			"name": "@wordpress/keyboard-shortcuts",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54480,7 +54482,7 @@
 		},
 		"packages/keycodes": {
 			"name": "@wordpress/keycodes",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54493,7 +54495,7 @@
 		},
 		"packages/lazy-import": {
 			"name": "@wordpress/lazy-import",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54508,7 +54510,7 @@
 		},
 		"packages/list-reusable-blocks": {
 			"name": "@wordpress/list-reusable-blocks",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54531,7 +54533,7 @@
 		},
 		"packages/media-utils": {
 			"name": "@wordpress/media-utils",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54547,7 +54549,7 @@
 		},
 		"packages/notices": {
 			"name": "@wordpress/notices",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54564,7 +54566,7 @@
 		},
 		"packages/npm-package-json-lint-config": {
 			"name": "@wordpress/npm-package-json-lint-config",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54577,7 +54579,7 @@
 		},
 		"packages/nux": {
 			"name": "@wordpress/nux",
-			"version": "9.7.0",
+			"version": "9.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54600,7 +54602,7 @@
 		},
 		"packages/patterns": {
 			"name": "@wordpress/patterns",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54630,7 +54632,7 @@
 		},
 		"packages/plugins": {
 			"name": "@wordpress/plugins",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54653,7 +54655,7 @@
 		},
 		"packages/postcss-plugins-preset": {
 			"name": "@wordpress/postcss-plugins-preset",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54670,7 +54672,7 @@
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54683,7 +54685,7 @@
 		},
 		"packages/preferences": {
 			"name": "@wordpress/preferences",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54709,7 +54711,7 @@
 		},
 		"packages/preferences-persistence": {
 			"name": "@wordpress/preferences-persistence",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54722,7 +54724,7 @@
 		},
 		"packages/prettier-config": {
 			"name": "@wordpress/prettier-config",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54735,7 +54737,7 @@
 		},
 		"packages/primitives": {
 			"name": "@wordpress/primitives",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54752,7 +54754,7 @@
 		},
 		"packages/priority-queue": {
 			"name": "@wordpress/priority-queue",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54765,7 +54767,7 @@
 		},
 		"packages/private-apis": {
 			"name": "@wordpress/private-apis",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -54777,7 +54779,7 @@
 		},
 		"packages/project-management-automation": {
 			"name": "@wordpress/project-management-automation",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -54807,7 +54809,7 @@
 		},
 		"packages/react-i18n": {
 			"name": "@wordpress/react-i18n",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -54963,7 +54965,7 @@
 		},
 		"packages/readable-js-assets-webpack-plugin": {
 			"name": "@wordpress/readable-js-assets-webpack-plugin",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"engines": {
@@ -54976,7 +54978,7 @@
 		},
 		"packages/redux-routine": {
 			"name": "@wordpress/redux-routine",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55021,7 +55023,7 @@
 		},
 		"packages/reusable-blocks": {
 			"name": "@wordpress/reusable-blocks",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55048,7 +55050,7 @@
 		},
 		"packages/rich-text": {
 			"name": "@wordpress/rich-text",
-			"version": "7.7.0",
+			"version": "7.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55072,7 +55074,7 @@
 		},
 		"packages/router": {
 			"name": "@wordpress/router",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55091,7 +55093,7 @@
 		},
 		"packages/scripts": {
 			"name": "@wordpress/scripts",
-			"version": "29.0.0",
+			"version": "30.0.0",
 			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
@@ -55546,7 +55548,7 @@
 		},
 		"packages/server-side-render": {
 			"name": "@wordpress/server-side-render",
-			"version": "5.7.0",
+			"version": "5.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55572,7 +55574,7 @@
 		},
 		"packages/shortcode": {
 			"name": "@wordpress/shortcode",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55585,7 +55587,7 @@
 		},
 		"packages/style-engine": {
 			"name": "@wordpress/style-engine",
-			"version": "2.7.0",
+			"version": "2.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55598,7 +55600,7 @@
 		},
 		"packages/stylelint-config": {
 			"name": "@wordpress/stylelint-config",
-			"version": "22.7.0",
+			"version": "23.0.0",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -55716,7 +55718,7 @@
 		},
 		"packages/sync": {
 			"name": "@wordpress/sync",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55737,7 +55739,7 @@
 		},
 		"packages/token-list": {
 			"name": "@wordpress/token-list",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -55749,7 +55751,7 @@
 		},
 		"packages/undo-manager": {
 			"name": "@wordpress/undo-manager",
-			"version": "1.7.0",
+			"version": "1.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55762,7 +55764,7 @@
 		},
 		"packages/url": {
 			"name": "@wordpress/url",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55775,7 +55777,7 @@
 		},
 		"packages/viewport": {
 			"name": "@wordpress/viewport",
-			"version": "6.7.0",
+			"version": "6.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55793,7 +55795,7 @@
 		},
 		"packages/warning": {
 			"name": "@wordpress/warning",
-			"version": "3.7.0",
+			"version": "3.8.0",
 			"license": "GPL-2.0-or-later",
 			"engines": {
 				"node": ">=18.12.0",
@@ -55802,7 +55804,7 @@
 		},
 		"packages/widgets": {
 			"name": "@wordpress/widgets",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
@@ -55830,7 +55832,7 @@
 		},
 		"packages/wordcount": {
 			"name": "@wordpress/wordcount",
-			"version": "4.7.0",
+			"version": "4.8.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0"
@@ -68362,6 +68364,7 @@
 				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
+				"@wordpress/notices": "file:../notices",
 				"@wordpress/private-apis": "file:../private-apis",
 				"@wordpress/router": "file:../router",
 				"@wordpress/url": "file:../url"
@@ -69040,6 +69043,7 @@
 		"@wordpress/interactivity-router": {
 			"version": "file:packages/interactivity-router",
 			"requires": {
+				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/interactivity": "file:../interactivity"
 			}
 		},
diff --git a/package.json b/package.json
index 46d2b42f267ab..5ecd0ef57b351 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "gutenberg",
-	"version": "19.2.0",
+	"version": "19.3.0",
 	"private": true,
 	"description": "A new WordPress editor experience.",
 	"author": "The WordPress Contributors",
diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md
index 36973cce020f3..626488313977d 100644
--- a/packages/a11y/CHANGELOG.md
+++ b/packages/a11y/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/a11y/package.json b/packages/a11y/package.json
index 327d6b9ff0716..d3337485a1828 100644
--- a/packages/a11y/package.json
+++ b/packages/a11y/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/a11y",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Accessibility (a11y) utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index 59e93da780bd8..cdc3be1054515 100644
--- a/packages/a11y/src/index.js
+++ b/packages/a11y/src/index.js
@@ -2,18 +2,37 @@
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { makeSetupFunction } from './shared/index';
+import addContainer from './script/add-container';
+import addIntroText from './script/add-intro-text';
+
 export { speak } from './shared/index';
 
 /**
  * Create the live regions.
  */
-export const setup = makeSetupFunction( __( 'Notifications' ) );
+export function setup() {
+	const introText = document.getElementById( 'a11y-speak-intro-text' );
+	const containerAssertive = document.getElementById(
+		'a11y-speak-assertive'
+	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
+
+	if ( introText === null ) {
+		addIntroText();
+	}
+
+	if ( containerAssertive === null ) {
+		addContainer( 'assertive' );
+	}
+
+	if ( containerPolite === null ) {
+		addContainer( 'polite' );
+	}
+}
 
 /**
  * Run setup on domReady.
diff --git a/packages/a11y/src/module/index.ts b/packages/a11y/src/module/index.ts
index a2c87f397f487..a06882f068dd3 100644
--- a/packages/a11y/src/module/index.ts
+++ b/packages/a11y/src/module/index.ts
@@ -1,25 +1,11 @@
 /**
  * Internal dependencies
  */
-import { makeSetupFunction } from '../shared/index';
 export { speak } from '../shared/index';
 
-// Without an i18n Script Module, "Notifications" (the only localized text used in this module)
-// will be translated on the server and provided as script-module data.
-let notificationsText = 'Notifications';
-try {
-	const textContent = document.getElementById(
-		'wp-script-module-data-@wordpress/a11y'
-	)?.textContent;
-	if ( textContent ) {
-		const parsed = JSON.parse( textContent );
-		notificationsText = parsed?.i18n?.Notifications ?? notificationsText;
-	}
-} catch {}
-
 /**
- * Create the live regions.
+ * This no-op function is exported to provide compatibility with the `wp-a11y` Script.
+ *
+ * Filters should inject the relevant HTML on page load instead of requiring setup.
  */
-export const setup = makeSetupFunction( notificationsText );
-
-setup();
+export const setup = () => {};
diff --git a/packages/a11y/src/shared/add-container.js b/packages/a11y/src/script/add-container.js
similarity index 100%
rename from packages/a11y/src/shared/add-container.js
rename to packages/a11y/src/script/add-container.js
diff --git a/packages/a11y/src/shared/add-intro-text.ts b/packages/a11y/src/script/add-intro-text.ts
similarity index 83%
rename from packages/a11y/src/shared/add-intro-text.ts
rename to packages/a11y/src/script/add-intro-text.ts
index 6bd97c887664d..2bcf453ec44c8 100644
--- a/packages/a11y/src/shared/add-intro-text.ts
+++ b/packages/a11y/src/script/add-intro-text.ts
@@ -1,18 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Build the explanatory text to be placed before the aria live regions.
  *
  * This text is initially hidden from assistive technologies by using a `hidden`
  * HTML attribute which is then removed once a message fills the aria-live regions.
  *
- * @param {string} introTextContent The translated intro text content.
  * @return {HTMLParagraphElement} The explanatory text HTML element.
  */
-export default function addIntroText( introTextContent: string ) {
+export default function addIntroText() {
 	const introText = document.createElement( 'p' );
 
 	introText.id = 'a11y-speak-intro-text';
 	introText.className = 'a11y-speak-intro-text';
-	introText.textContent = introTextContent;
+	introText.textContent = __( 'Notifications' );
 
 	introText.setAttribute(
 		'style',
diff --git a/packages/a11y/src/shared/test/add-container.test.js b/packages/a11y/src/script/test/add-container.test.js
similarity index 100%
rename from packages/a11y/src/shared/test/add-container.test.js
rename to packages/a11y/src/script/test/add-container.test.js
diff --git a/packages/a11y/src/shared/index.js b/packages/a11y/src/shared/index.js
index a05f891f42856..2b6353720d0ad 100644
--- a/packages/a11y/src/shared/index.js
+++ b/packages/a11y/src/shared/index.js
@@ -1,37 +1,9 @@
 /**
  * Internal dependencies
  */
-import addContainer from './add-container';
-import addIntroText from './add-intro-text';
 import clear from './clear';
 import filterMessage from './filter-message';
 
-/**
- * Create the live regions.
- * @param {string} introTextContent The intro text content.
- */
-export function makeSetupFunction( introTextContent ) {
-	return function setup() {
-		const introText = document.getElementById( 'a11y-speak-intro-text' );
-		const containerAssertive = document.getElementById(
-			'a11y-speak-assertive'
-		);
-		const containerPolite = document.getElementById( 'a11y-speak-polite' );
-
-		if ( introText === null ) {
-			addIntroText( introTextContent );
-		}
-
-		if ( containerAssertive === null ) {
-			addContainer( 'assertive' );
-		}
-
-		if ( containerPolite === null ) {
-			addContainer( 'polite' );
-		}
-	};
-}
-
 /**
  * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
  * This module is inspired by the `speak` function in `wp-a11y.js`.
diff --git a/packages/annotations/CHANGELOG.md b/packages/annotations/CHANGELOG.md
index 6211cf30688e5..7ac3e50c3fd8b 100644
--- a/packages/annotations/CHANGELOG.md
+++ b/packages/annotations/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/annotations/package.json b/packages/annotations/package.json
index c189dcc11fd09..edaae0ca7617b 100644
--- a/packages/annotations/package.json
+++ b/packages/annotations/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/annotations",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Annotate content in the Gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/api-fetch/CHANGELOG.md b/packages/api-fetch/CHANGELOG.md
index 01b37d4e14a7d..7c333170b6cc1 100644
--- a/packages/api-fetch/CHANGELOG.md
+++ b/packages/api-fetch/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 76d797f4ddfa5..54fb852a75402 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/autop/CHANGELOG.md b/packages/autop/CHANGELOG.md
index ed19f1ceafbc5..4bb494dcfff5c 100644
--- a/packages/autop/CHANGELOG.md
+++ b/packages/autop/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/autop/package.json b/packages/autop/package.json
index 4e1cf577ebd09..49ddffcf79f9c 100644
--- a/packages/autop/package.json
+++ b/packages/autop/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/autop",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress's automatic paragraph functions `autop` and `removep`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
index c916b788243a0..5a68cf8eb4040 100644
--- a/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
+++ b/packages/babel-plugin-import-jsx-pragma/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/babel-plugin-import-jsx-pragma/package.json b/packages/babel-plugin-import-jsx-pragma/package.json
index 1af6bdf93cb04..d06a750eb0d91 100644
--- a/packages/babel-plugin-import-jsx-pragma/package.json
+++ b/packages/babel-plugin-import-jsx-pragma/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-import-jsx-pragma",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Babel transform plugin for automatically injecting an import to be used as the pragma for the React JSX Transform plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-plugin-makepot/CHANGELOG.md b/packages/babel-plugin-makepot/CHANGELOG.md
index e7345f314d578..d878e1fb6b020 100644
--- a/packages/babel-plugin-makepot/CHANGELOG.md
+++ b/packages/babel-plugin-makepot/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/babel-plugin-makepot/package.json b/packages/babel-plugin-makepot/package.json
index a7c18d891538d..5c9cbb1384796 100644
--- a/packages/babel-plugin-makepot/package.json
+++ b/packages/babel-plugin-makepot/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-plugin-makepot",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "WordPress Babel internationalization (i18n) plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
index 70a740f60cad3..b31be6ffd8d56 100644
--- a/packages/babel-preset-default/CHANGELOG.md
+++ b/packages/babel-preset-default/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix a bug in 8.8.1 due to missing files in the published package ([#65481](https://github.com/WordPress/gutenberg/pull/65481)).
+
+## 8.8.0 (2024-09-19)
+
+### Internal
+
+-   Added `addPolyfillComments` option. When used, it will automatically add magic comments to mark files that need `wp-polyfill` ([#65292](https://github.com/WordPress/gutenberg/pull/65292)).
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/babel-preset-default/README.md b/packages/babel-preset-default/README.md
index fb853a73ea3c8..301d2583dcf86 100644
--- a/packages/babel-preset-default/README.md
+++ b/packages/babel-preset-default/README.md
@@ -43,7 +43,7 @@ For example, if you'd like to use a new language feature proposal which has not
 
 There is a complementary `build/polyfill.js` (minified version – `build/polyfill.min.js`) file available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project ([#31279](https://github.com/WordPress/gutenberg/pull/31279)). It's a drop-in replacement for the deprecated `@babel/polyfill` package, and it's also based on [`core-js`](https://github.com/zloirock/core-js) project.
 
-This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a `<script>` before it.
+This needs to be included in some cases, if the features being used require polyfills. You can either prepend it to your compiled code or include it in a `<script>` before it.
 
 #### TC39 Proposals
 
diff --git a/packages/babel-preset-default/bin/index.js b/packages/babel-preset-default/bin/index.js
index 0e0e66b450c1d..041ab0143a5ae 100755
--- a/packages/babel-preset-default/bin/index.js
+++ b/packages/babel-preset-default/bin/index.js
@@ -7,13 +7,14 @@ const builder = require( 'core-js-builder' );
 const { minify } = require( 'terser' );
 const { writeFile } = require( 'fs' ).promises;
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( '../polyfill-exclusions' );
+
 builder( {
 	modules: [ 'es.', 'web.' ],
-	exclude: [
-		// This is an IE-only feature which we don't use, and don't want to polyfill.
-		// @see https://github.com/WordPress/gutenberg/pull/49234
-		'web.immediate',
-	],
+	exclude: exclusions,
 	summary: { console: { size: true, modules: true } },
 	targets: require( '@wordpress/browserslist-config' ),
 	filename: './build/polyfill.js',
diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
index 45ec6473be3cb..468c2cce812f6 100644
--- a/packages/babel-preset-default/index.js
+++ b/packages/babel-preset-default/index.js
@@ -3,6 +3,12 @@
  */
 const browserslist = require( 'browserslist' );
 
+/**
+ * Internal dependencies
+ */
+const exclusions = require( './polyfill-exclusions' );
+const replacePolyfills = require( './replace-polyfills' );
+
 module.exports = ( api ) => {
 	let wpBuildOpts = {};
 	const isWPBuild = ( name ) =>
@@ -27,6 +33,13 @@ module.exports = ( api ) => {
 				'proposal-nullish-coalescing-operator',
 				'proposal-logical-assignment-operators',
 			],
+			...( wpBuildOpts.addPolyfillComments
+				? {
+						useBuiltIns: 'usage',
+						exclude: exclusions,
+						corejs: require( 'core-js/package.json' ).version,
+				  }
+				: {} ),
 		};
 
 		if ( isTestEnv ) {
@@ -82,6 +95,7 @@ module.exports = ( api ) => {
 				},
 			],
 			maybeGetPluginTransformRuntime(),
+			wpBuildOpts.addPolyfillComments && replacePolyfills,
 		].filter( Boolean ),
 	};
 };
diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
index be5b3786346eb..1203586ec2029 100644
--- a/packages/babel-preset-default/package.json
+++ b/packages/babel-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/babel-preset-default",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Default Babel preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,7 +26,9 @@
 	},
 	"files": [
 		"build",
-		"index.js"
+		"index.js",
+		"polyfill-exclusions.js",
+		"replace-polyfills.js"
 	],
 	"main": "index.js",
 	"dependencies": {
diff --git a/packages/babel-preset-default/polyfill-exclusions.js b/packages/babel-preset-default/polyfill-exclusions.js
new file mode 100644
index 0000000000000..507396c930b99
--- /dev/null
+++ b/packages/babel-preset-default/polyfill-exclusions.js
@@ -0,0 +1,10 @@
+module.exports = [
+	// Ignore excessively strict polyfilling of `Array.prototype.push` to work
+	// around an obscure bug involving non-writable arrays.
+	// See https://issues.chromium.org/issues/42202623 for the details of the
+	// bug that leads to the polyfilling, and which we are choosing to ignore.
+	'es.array.push',
+	// This is an IE-only feature which we don't use, and don't want to polyfill.
+	// @see https://github.com/WordPress/gutenberg/pull/49234
+	'web.immediate',
+];
diff --git a/packages/babel-preset-default/replace-polyfills.js b/packages/babel-preset-default/replace-polyfills.js
new file mode 100644
index 0000000000000..a3a68cc5f84e9
--- /dev/null
+++ b/packages/babel-preset-default/replace-polyfills.js
@@ -0,0 +1,59 @@
+// Babel plugin that looks for `core-js` imports (or requires)
+// and replaces them with magic comments to mark the file as
+// depending on wp-polyfill.
+function replacePolyfills() {
+	return {
+		pre() {
+			this.hasAddedPolyfills = false;
+		},
+		visitor: {
+			Program: {
+				exit( path ) {
+					if ( this.hasAddedPolyfills ) {
+						// Add magic comment to top of file.
+						path.addComment( 'leading', ' wp:polyfill ' );
+					}
+				},
+			},
+			// Handle `import` syntax.
+			ImportDeclaration( path ) {
+				const source = path?.node?.source;
+				const name = source?.value || '';
+
+				// Look for imports from `core-js`.
+				if ( name.startsWith( 'core-js/' ) ) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+
+			// Handle `require` syntax.
+			CallExpression( path ) {
+				const callee = path?.node?.callee;
+				const arg = path?.node?.arguments[ 0 ];
+
+				if (
+					! callee ||
+					! arg ||
+					callee.type !== 'Identifier' ||
+					callee.name !== 'require'
+				) {
+					return;
+				}
+
+				// Look for requires for `core-js`.
+				if (
+					arg.type === 'StringLiteral' &&
+					arg.value.startsWith( 'core-js/' )
+				) {
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
+				}
+			},
+		},
+	};
+}
+
+module.exports = replacePolyfills;
diff --git a/packages/babel-preset-default/test/fixtures/polyfill.js b/packages/babel-preset-default/test/fixtures/polyfill.js
new file mode 100644
index 0000000000000..14a4fb20f14fa
--- /dev/null
+++ b/packages/babel-preset-default/test/fixtures/polyfill.js
@@ -0,0 +1,6 @@
+// Note: this fixture may need to be updated when the browserslist or the
+// core-js dependencies are updated.
+// It should always test a feature that is supported, but requires
+// a polyfill to work across all supported browsers.
+const foo = new URLSearchParams();
+window.fooSize = foo.size;
diff --git a/packages/babel-preset-default/test/index.js b/packages/babel-preset-default/test/index.js
index 0a411cd424797..4a23d13544b27 100644
--- a/packages/babel-preset-default/test/index.js
+++ b/packages/babel-preset-default/test/index.js
@@ -24,4 +24,22 @@ describe( 'Babel preset default', () => {
 
 		expect( output.code ).toMatchSnapshot();
 	} );
+
+	test( 'transpilation includes magic comment when using the addPolyfillComments option', () => {
+		const filename = path.join( __dirname, '/fixtures/polyfill.js' );
+		const input = readFileSync( filename );
+
+		const output = transform( input, {
+			filename,
+			configFile: false,
+			envName: 'production',
+			presets: [ babelPresetDefault ],
+			caller: {
+				name: 'WP_BUILD_MAIN',
+				addPolyfillComments: true,
+			},
+		} );
+
+		expect( output.code ).toContain( '/* wp:polyfill */' );
+	} );
 } );
diff --git a/packages/base-styles/CHANGELOG.md b/packages/base-styles/CHANGELOG.md
index cad2f94c98da7..ea6b765aea3f1 100644
--- a/packages/base-styles/CHANGELOG.md
+++ b/packages/base-styles/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
index ce1f935b7d4d5..b17478ed24f04 100644
--- a/packages/base-styles/_animations.scss
+++ b/packages/base-styles/_animations.scss
@@ -1,5 +1,37 @@
-@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
-	animation: edit-post__fade-in-animation $speed linear $delay;
+@mixin keyframes($name) {
+	@keyframes #{$name} {
+		@content;
+	}
+}
+
+@mixin animation__fade-in($speed: 0.08s, $delay: 0s, $easing: linear) {
+	@include keyframes(__wp-base-styles-fade-in) {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-in $speed $easing $delay;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+@mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) {
+	@include keyframes(__wp-base-styles-fade-out) {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+
+	animation: __wp-base-styles-fade-out $speed $easing $delay;
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
@@ -8,3 +40,9 @@
 	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
 	@include reduce-motion("transition");
 }
+
+// Deprecated
+@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
+	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
+	@include animation__fade-in($speed, $delay);
+}
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0f0c9e6d019ba..35092033c552b 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -55,16 +55,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
+$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
+$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
+$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
 
 /**
  * Dimensions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index cc99df6dbeaaf..77238c6f38608 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -8,7 +8,6 @@ $z-layers: (
 	".block-editor-block-switcher__arrow": 1,
 	".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
-	".block-editor-block-list__block-selection-button": 22,
 	".components-form-toggle__input": 1,
 	".editor-text-editor__toolbar": 1,
 
@@ -70,10 +69,6 @@ $z-layers: (
 	// Below the media library backdrop (.media-modal-backdrop), which has a z-index of 159900.
 	".block-editor-global-styles-background-panel__popover": 159900 - 10,
 
-	// Small screen inner blocks overlay must be displayed above drop zone,
-	// settings menu, and movers.
-	".block-editor-block-list__layout.has-overlay::after": 60,
-
 	// The toolbar, when contextual, should be above any adjacent nested block click overlays.
 	".block-editor-block-contextual-toolbar": 61,
 
diff --git a/packages/base-styles/package.json b/packages/base-styles/package.json
index 6839a8081e04a..c6ab374e1f5dd 100644
--- a/packages/base-styles/package.json
+++ b/packages/base-styles/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blob/CHANGELOG.md b/packages/blob/CHANGELOG.md
index f95598025a8b6..c13c6e6faf6ac 100644
--- a/packages/blob/CHANGELOG.md
+++ b/packages/blob/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/blob/package.json b/packages/blob/package.json
index 3dea70c977197..cbcf04ecf6488 100644
--- a/packages/blob/package.json
+++ b/packages/blob/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blob",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Blob utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-directory/CHANGELOG.md b/packages/block-directory/CHANGELOG.md
index 70914f293ca99..8c25431f1b5b5 100644
--- a/packages/block-directory/CHANGELOG.md
+++ b/packages/block-directory/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json
index 39f239edfcb44..beef057bf05f0 100644
--- a/packages/block-directory/package.json
+++ b/packages/block-directory/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-directory",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Extend editor with block directory features to search, download and install blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index da44ebc4149f5..db61ff05e3c1a 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.3.0 (2024-09-19)
+
 ## 14.2.0 (2024-09-05)
 
 ## 14.1.0 (2024-08-21)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index a474d1df7e56d..75d7e8879572d 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -1027,11 +1027,11 @@ _Parameters_
 
 ### useZoomOut
 
-A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+A hook used to set the zoomed out view, invoking the hook sets the mode.
 
 _Parameters_
 
--   _zoomOut_ `boolean`: If we should enter into zoomOut mode or not
+-   _zoomOut_ `boolean`: If we should zoom out or not.
 
 ### Warning
 
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index d3064c78dbe65..a135f126d7eb3 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.2.0",
+	"version": "14.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-editor/src/autocompleters/link.js b/packages/block-editor/src/autocompleters/link.js
index ce9af28f19d00..fb64cb151294d 100644
--- a/packages/block-editor/src/autocompleters/link.js
+++ b/packages/block-editor/src/autocompleters/link.js
@@ -6,6 +6,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Icon, page, post } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 const SHOWN_SUGGESTIONS = 10;
 
@@ -46,7 +47,7 @@ function createLinkCompleter() {
 						key="icon"
 						icon={ item.subtype === 'page' ? page : post }
 					/>
-					{ item.title }
+					{ decodeEntities( item.title ) }
 				</>
 			);
 		},
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
index 5e12165c67942..f06c8addedad5 100644
--- a/packages/block-editor/src/components/block-actions/index.js
+++ b/packages/block-editor/src/components/block-actions/index.js
@@ -29,7 +29,6 @@ export default function BlockActions( {
 				getBlockRootClientId,
 				getBlocksByClientId,
 				getDirectInsertBlock,
-				canMoveBlocks,
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 
@@ -44,7 +43,6 @@ export default function BlockActions( {
 				: null;
 
 			return {
-				canMove: canMoveBlocks( clientIds ),
 				canRemove: canRemoveBlocks( clientIds ),
 				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
 				canCopyStyles: blocks.every( ( block ) => {
@@ -67,8 +65,7 @@ export default function BlockActions( {
 	);
 	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
-	const { canMove, canRemove, canInsertBlock, canCopyStyles, canDuplicate } =
-		selected;
+	const { canRemove, canInsertBlock, canCopyStyles, canDuplicate } = selected;
 
 	const {
 		removeBlocks,
@@ -77,9 +74,6 @@ export default function BlockActions( {
 		insertAfterBlock,
 		insertBeforeBlock,
 		flashBlock,
-		setBlockMovingClientId,
-		setNavigationMode,
-		selectBlock,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -89,7 +83,6 @@ export default function BlockActions( {
 		canCopyStyles,
 		canDuplicate,
 		canInsertBlock,
-		canMove,
 		canRemove,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
@@ -103,11 +96,6 @@ export default function BlockActions( {
 		onInsertAfter() {
 			insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 		},
-		onMoveTo() {
-			setNavigationMode( true );
-			selectBlock( clientIds[ 0 ] );
-			setBlockMovingClientId( clientIds[ 0 ] );
-		},
 		onGroup() {
 			if ( ! clientIds.length ) {
 				return;
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
index 8196f7688d4b5..4d40fe07d5547 100644
--- a/packages/block-editor/src/components/block-card/index.js
+++ b/packages/block-editor/src/components/block-card/index.js
@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -22,7 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType, className } ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
 			since: '5.7',
@@ -65,7 +65,16 @@ function BlockCard( { title, icon, description, blockType, className } ) {
 			) }
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
-				<h2 className="block-editor-block-card__title">{ title }</h2>
+				<h2 className="block-editor-block-card__title">
+					{ name?.length
+						? sprintf(
+								// translators:  %1$s: Custom block name. %2$s: Block title.
+								__( '%1$s (%2$s)' ),
+								name,
+								title
+						  )
+						: title }
+				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">
 						{ description }
diff --git a/packages/block-editor/src/components/block-controls/use-has-block-controls.js b/packages/block-editor/src/components/block-controls/use-has-block-controls.js
deleted file mode 100644
index f7884cc1882ed..0000000000000
--- a/packages/block-editor/src/components/block-controls/use-has-block-controls.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
-import warning from '@wordpress/warning';
-
-/**
- * Internal dependencies
- */
-import groups from './groups';
-
-export function useHasAnyBlockControls() {
-	let hasAnyBlockControls = false;
-	for ( const group in groups ) {
-		// It is safe to violate the rules of hooks here as the `groups` object
-		// is static and will not change length between renders. Do not return
-		// early as that will cause the hook to be called a different number of
-		// times between renders.
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		if ( useHasBlockControls( group ) ) {
-			hasAnyBlockControls = true;
-		}
-	}
-	return hasAnyBlockControls;
-}
-
-export function useHasBlockControls( group = 'default' ) {
-	const Slot = groups[ group ]?.Slot;
-	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot ) {
-		warning( `Unknown BlockControls group "${ group }" provided.` );
-		return null;
-	}
-	return !! fills?.length;
-}
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index a18556f2fa5bd..475d4f6a4b8c2 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -40,83 +40,36 @@ function BlockStylesPanel( { clientId } ) {
 	);
 }
 
-function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
-	const contentClientIds = useSelect(
-		( select ) => {
-			const {
-				getClientIdsOfDescendants,
-				getBlockName,
-				getBlockEditingMode,
-			} = select( blockEditorStore );
-			return getClientIdsOfDescendants( topLevelLockedBlock ).filter(
-				( clientId ) =>
-					getBlockName( clientId ) !== 'core/list-item' &&
-					getBlockEditingMode( clientId ) === 'contentOnly'
-			);
-		},
-		[ topLevelLockedBlock ]
-	);
-	const hasBlockStyles = useSelect(
-		( select ) => {
-			const { getBlockName } = select( blockEditorStore );
-			const { getBlockStyles } = select( blocksStore );
-			return !! getBlockStyles( getBlockName( topLevelLockedBlock ) )
-				?.length;
-		},
-		[ topLevelLockedBlock ]
-	);
-	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
-	return (
-		<div className="block-editor-block-inspector">
-			<BlockCard
-				{ ...blockInformation }
-				className={ blockInformation.isSynced && 'is-synced' }
-			/>
-			<BlockInfo.Slot />
-			{ hasBlockStyles && (
-				<BlockStylesPanel clientId={ topLevelLockedBlock } />
-			) }
-			{ contentClientIds.length > 0 && (
-				<PanelBody title={ __( 'Content' ) }>
-					<BlockQuickNavigation clientIds={ contentClientIds } />
-				</PanelBody>
-			) }
-		</div>
-	);
-}
-
 const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const {
 		count,
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
-		topLevelLockedBlock,
+		isSectionBlock,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
 			getSelectedBlockCount,
 			getBlockName,
-			getContentLockingParent,
-			getTemplateLock,
+			getParentSectionBlock,
+			isSectionBlock: _isSectionBlock,
 		} = unlock( select( blockEditorStore ) );
 		const _selectedBlockClientId = getSelectedBlockClientId();
+		const renderedBlockClientId =
+			getParentSectionBlock( _selectedBlockClientId ) ||
+			getSelectedBlockClientId();
 		const _selectedBlockName =
-			_selectedBlockClientId && getBlockName( _selectedBlockClientId );
+			renderedBlockClientId && getBlockName( renderedBlockClientId );
 		const _blockType =
 			_selectedBlockName && getBlockType( _selectedBlockName );
 
 		return {
 			count: getSelectedBlockCount(),
-			selectedBlockClientId: _selectedBlockClientId,
+			selectedBlockClientId: renderedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
-				_selectedBlockName === 'core/block'
-					? _selectedBlockClientId
-					: undefined ),
+			isSectionBlock: _isSectionBlock( renderedBlockClientId ),
 		};
 	}, [] );
 
@@ -136,7 +89,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		blockName: selectedBlockName,
 	} );
 
-	if ( count > 1 ) {
+	if ( count > 1 && ! isSectionBlock ) {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
@@ -194,13 +147,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 		}
 		return null;
 	}
-	if ( topLevelLockedBlock ) {
-		return (
-			<BlockInspectorLockedBlocks
-				topLevelLockedBlock={ topLevelLockedBlock }
-			/>
-		);
-	}
 
 	return (
 		<BlockInspectorSingleBlockWrapper
@@ -219,6 +165,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<BlockInspectorSingleBlock
 				clientId={ selectedBlockClientId }
 				blockName={ blockType.name }
+				isSectionBlock={ isSectionBlock }
 			/>
 		</BlockInspectorSingleBlockWrapper>
 	);
@@ -260,9 +207,13 @@ const AnimatedContainer = ( {
 	);
 };
 
-const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
+const BlockInspectorSingleBlock = ( {
+	clientId,
+	blockName,
+	isSectionBlock,
+} ) => {
 	const availableTabs = useInspectorControlsTabs( blockName );
-	const showTabs = availableTabs?.length > 1;
+	const showTabs = ! isSectionBlock && availableTabs?.length > 1;
 
 	const hasBlockStyles = useSelect(
 		( select ) => {
@@ -274,6 +225,26 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 	);
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
+	const contentClientIds = useSelect(
+		( select ) => {
+			// Avoid unnecessary subscription.
+			if ( ! isSectionBlock ) {
+				return;
+			}
+
+			const {
+				getClientIdsOfDescendants,
+				getBlockName,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			return getClientIdsOfDescendants( clientId ).filter(
+				( current ) =>
+					getBlockName( current ) !== 'core/list-item' &&
+					getBlockEditingMode( current ) === 'contentOnly'
+			);
+		},
+		[ isSectionBlock, clientId ]
+	);
 
 	return (
 		<div className="block-editor-block-inspector">
@@ -296,35 +267,48 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 					{ hasBlockStyles && (
 						<BlockStylesPanel clientId={ clientId } />
 					) }
-					<InspectorControls.Slot />
-					<InspectorControls.Slot group="list" />
-					<InspectorControls.Slot
-						group="color"
-						label={ __( 'Color' ) }
-						className="color-block-support-panel__inner-wrapper"
-					/>
-					<InspectorControls.Slot
-						group="background"
-						label={ __( 'Background image' ) }
-					/>
-					<InspectorControls.Slot
-						group="typography"
-						label={ __( 'Typography' ) }
-					/>
-					<InspectorControls.Slot
-						group="dimensions"
-						label={ __( 'Dimensions' ) }
-					/>
-					<InspectorControls.Slot
-						group="border"
-						label={ borderPanelLabel }
-					/>
-					<InspectorControls.Slot group="styles" />
-					<PositionControls />
-					<InspectorControls.Slot group="bindings" />
-					<div>
-						<AdvancedControls />
-					</div>
+
+					{ contentClientIds && contentClientIds?.length > 0 && (
+						<PanelBody title={ __( 'Content' ) }>
+							<BlockQuickNavigation
+								clientIds={ contentClientIds }
+							/>
+						</PanelBody>
+					) }
+
+					{ ! isSectionBlock && (
+						<>
+							<InspectorControls.Slot />
+							<InspectorControls.Slot group="list" />
+							<InspectorControls.Slot
+								group="color"
+								label={ __( 'Color' ) }
+								className="color-block-support-panel__inner-wrapper"
+							/>
+							<InspectorControls.Slot
+								group="background"
+								label={ __( 'Background image' ) }
+							/>
+							<InspectorControls.Slot
+								group="typography"
+								label={ __( 'Typography' ) }
+							/>
+							<InspectorControls.Slot
+								group="dimensions"
+								label={ __( 'Dimensions' ) }
+							/>
+							<InspectorControls.Slot
+								group="border"
+								label={ borderPanelLabel }
+							/>
+							<InspectorControls.Slot group="styles" />
+							<PositionControls />
+							<InspectorControls.Slot group="bindings" />
+							<div>
+								<AdvancedControls />
+							</div>
+						</>
+					) }
 				</>
 			) }
 			<SkipToSelectedBlock key="back" />
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index deda4e3b9d089..90c39649319dc 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -549,6 +549,7 @@ function BlockListBlockProvider( props ) {
 				getBlockMode,
 				isSelectionEnabled,
 				getTemplateLock,
+				isSectionBlock: _isSectionBlock,
 				getBlockWithoutAttributes,
 				getBlockAttributes,
 				canRemoveBlock,
@@ -571,8 +572,6 @@ function BlockListBlockProvider( props ) {
 				__unstableSelectionHasUnmergeableBlock,
 				isBlockBeingDragged,
 				isDragging,
-				hasBlockMovingClientId,
-				canInsertBlockType,
 				__unstableHasActiveBlockOverlayActive,
 				__unstableGetEditorMode,
 				getSelectedBlocksInitialCaretPosition,
@@ -632,7 +631,6 @@ function BlockListBlockProvider( props ) {
 				clientId,
 				checkDeep
 			);
-			const movingClientId = hasBlockMovingClientId();
 			const blockEditingMode = getBlockEditingMode( clientId );
 
 			const multiple = hasBlockSupport( blockName, 'multiple', true );
@@ -653,7 +651,7 @@ function BlockListBlockProvider( props ) {
 				mode: getBlockMode( clientId ),
 				isSelectionEnabled: isSelectionEnabled(),
 				isLocked: !! getTemplateLock( rootClientId ),
-				templateLock: getTemplateLock( clientId ),
+				isSectionBlock: _isSectionBlock( clientId ),
 				canRemove,
 				canMove,
 				isSelected: _isSelected,
@@ -681,11 +679,9 @@ function BlockListBlockProvider( props ) {
 				hasOverlay:
 					__unstableHasActiveBlockOverlayActive( clientId ) &&
 					! isDragging(),
-				initialPosition:
-					_isSelected &&
-					( editorMode === 'edit' || editorMode === 'zoom-out' ) // Don't recalculate the initialPosition when toggling in/out of zoom-out mode
-						? getSelectedBlocksInitialCaretPosition()
-						: undefined,
+				initialPosition: _isSelected
+					? getSelectedBlocksInitialCaretPosition()
+					: undefined,
 				isHighlighted: isBlockHighlighted( clientId ),
 				isMultiSelected,
 				isPartiallySelected:
@@ -694,13 +690,6 @@ function BlockListBlockProvider( props ) {
 					! __unstableSelectionHasUnmergeableBlock(),
 				isDragging: isBlockBeingDragged( clientId ),
 				hasChildSelected: isAncestorOfSelectedBlock,
-				isBlockMovingMode: !! movingClientId,
-				canInsertMovingBlock:
-					movingClientId &&
-					canInsertBlockType(
-						getBlockName( movingClientId ),
-						rootClientId
-					),
 				isEditingDisabled: blockEditingMode === 'disabled',
 				hasEditableOutline:
 					blockEditingMode !== 'disabled' &&
@@ -745,9 +734,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		className,
@@ -792,9 +779,7 @@ function BlockListBlockProvider( props ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
-		templateLock,
+		isSectionBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 3f4b4c508aeb0..3e3865e689bea 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -80,7 +80,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
-	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	.block-editor-block-list__block:not([contenteditable="true"]):focus {
 		outline: none;
 
@@ -92,34 +91,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		}
 	}
 
-	// Moving blocks using keyboard (Ellipsis > Move).
-	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
-
-		&::after {
-			content: "";
-			position: absolute;
-			z-index: 0;
-			pointer-events: none;
-			transition:
-				border-color 0.1s linear,
-				border-style 0.1s linear,
-				box-shadow 0.1s linear;
-			right: 0;
-			left: 0;
-			top: -$default-block-margin * 0.5;
-			border-radius: $radius-small;
-			border-top: 4px solid $gray-400;
-			bottom: auto;
-			box-shadow: none;
-		}
-	}
-
-	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::after {
-			border-color: var(--wp-admin-theme-color);
-		}
-	}
-
 	// Ensure an accurate partial text selection.
 	// To do this, we disable text selection on the main container, then re-enable it only on the
 	// elements that actually get selected.
@@ -134,14 +105,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
-	// Should be invisible but not unfocusable.
-	opacity: 0;
-	font-size: 1px;
-	height: 1px;
-	padding: 0;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -223,19 +186,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 		background-color: transparent;
 	}
 
-	// Reusable blocks clickthrough overlays.
-	&.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
-		// Remove only the top click overlay.
-		&::after {
-			display: none;
-		}
-
-		// Restore it for subsequent.
-		.block-editor-block-list__layout.has-overlay::after {
-			display: block;
-		}
-	}
-
 	// Reusable blocks parent border.
 	&.is-reusable.has-child-selected::after {
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
@@ -307,7 +257,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
 	animation-name: block-editor-is-editable__animation;
 	animation-duration: 0.8s;
 	animation-timing-function: ease-out;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ea6128f153464..e2e019d4a9bf6 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -47,26 +47,17 @@ const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		isOutlineMode,
-		isFocusMode,
-		editorMode,
-		temporarilyEditingAsBlocks,
-	} = useSelect( ( select ) => {
-		const {
-			getSettings,
-			__unstableGetEditorMode,
-			getTemporarilyEditingAsBlocks,
-			isTyping,
-		} = unlock( select( blockEditorStore ) );
-		const { outlineMode, focusMode } = getSettings();
-		return {
-			isOutlineMode: outlineMode && ! isTyping(),
-			isFocusMode: focusMode,
-			editorMode: __unstableGetEditorMode(),
-			temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
-		};
-	}, [] );
+	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
+		useSelect( ( select ) => {
+			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
+				unlock( select( blockEditorStore ) );
+			const { outlineMode, focusMode } = getSettings();
+			return {
+				isOutlineMode: outlineMode && ! isTyping(),
+				isFocusMode: focusMode,
+				temporarilyEditingAsBlocks: getTemporarilyEditingAsBlocks(),
+			};
+		}, [] );
 	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
 
@@ -115,7 +106,6 @@ function Root( { className, ...settings } ) {
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
 				'is-focus-mode': isFocusMode && isLargeViewport,
-				'is-navigate-mode': editorMode === 'navigation',
 			} ),
 		},
 		settings
@@ -192,7 +182,8 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				__unstableGetEditorMode,
-			} = select( blockEditorStore );
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
 
@@ -211,15 +202,16 @@ function Items( {
 				visibleBlocks: __unstableGetVisibleBlocks(),
 				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
 				shouldRenderAppender:
+					! isSectionBlock( rootClientId ) &&
+					getBlockEditingMode( rootClientId ) !== 'disabled' &&
+					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
 					__unstableGetEditorMode() !== 'zoom-out' &&
-					( hasCustomAppender
-						? ! getTemplateLock( rootClientId ) &&
-						  getBlockEditingMode( rootClientId ) !== 'disabled'
-						: rootClientId === selectedBlockClientId ||
-						  ( ! rootClientId &&
-								! selectedBlockClientId &&
-								! _order.length ) ),
+					( hasCustomAppender ||
+						rootClientId === selectedBlockClientId ||
+						( ! rootClientId &&
+							! selectedBlockClientId &&
+							! _order.length ) ),
 			};
 		},
 		[ rootClientId, hasAppender, hasCustomAppender ]
diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index c3a279a618b5d..1cf1d4908b076 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -25,7 +25,6 @@ import {
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useNavModeExit } from './use-nav-mode-exit';
 import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
@@ -98,13 +97,11 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isReusable,
 		isDragging,
 		hasChildSelected,
-		isBlockMovingMode,
-		canInsertMovingBlock,
 		isEditingDisabled,
 		hasEditableOutline,
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
-		templateLock,
+		isSectionBlock,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
@@ -116,7 +113,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useNavModeExit( clientId ),
 		useZoomOutModeExit( { editorMode } ),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
@@ -124,7 +120,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useDisabled( { isDisabled: ! hasOverlay } ),
 		useFlashEditableBlocks( {
 			clientId,
-			isEnabled: name === 'core/block' || templateLock === 'contentOnly',
+			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
 	] );
@@ -182,8 +178,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				'is-reusable': isReusable,
 				'is-dragging': isDragging,
 				'has-child-selected': hasChildSelected,
-				'is-block-moving-mode': isBlockMovingMode,
-				'can-insert-moving-block': canInsertMovingBlock,
 				'is-editing-disabled': isEditingDisabled,
 				'has-editable-outline': hasEditableOutline,
 				'has-negative-margin': hasNegativeMargin,
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
deleted file mode 100644
index aa9c0a630c5bd..0000000000000
--- a/packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRefEffect } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
-/**
- * Allows navigation mode to be exited by clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
- */
-export function useNavModeExit( clientId ) {
-	const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
-	const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
-	return useRefEffect(
-		( node ) => {
-			function onMouseDown( event ) {
-				// Don't select a block if it's already handled by a child
-				// block.
-				if ( isNavigationMode() && ! event.defaultPrevented ) {
-					// Prevent focus from moving to the block.
-					event.preventDefault();
-
-					// When clicking on a selected block, exit navigation mode.
-					if ( isBlockSelected( clientId ) ) {
-						setNavigationMode( false );
-					} else {
-						selectBlock( clientId );
-					}
-				}
-			}
-
-			node.addEventListener( 'mousedown', onMouseDown );
-
-			return () => {
-				node.removeEventListener( 'mousedown', onMouseDown );
-			};
-		},
-		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
-	);
-}
diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
index d0001bd3b33c6..92c54bac9b806 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js
@@ -16,14 +16,17 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useZoomOutModeExit( { editorMode } ) {
-	const { getSettings } = useSelect( blockEditorStore );
-	const { __unstableSetEditorMode } = unlock(
+	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
 	return useRefEffect(
 		( node ) => {
-			if ( editorMode !== 'zoom-out' ) {
+			// In "compose" mode.
+			const composeMode = editorMode === 'zoom-out' && isZoomOut();
+
+			if ( ! composeMode ) {
 				return;
 			}
 
@@ -39,6 +42,7 @@ export function useZoomOutModeExit( { editorMode } ) {
 						__experimentalSetIsInserterOpened( false );
 					}
 					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
 				}
 			}
 
diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
index bb307816fd150..2b76804785a57 100644
--- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js
+++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js
@@ -11,6 +11,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import { InsertionPointOpenRef } from '../block-tools/insertion-point';
+import { unlock } from '../../lock-unlock';
 
 export function useInBetweenInserter() {
 	const openRef = useContext( InsertionPointOpenRef );
@@ -31,7 +32,8 @@ export function useInBetweenInserter() {
 		getBlockEditingMode,
 		getBlockName,
 		getBlockAttributes,
-	} = useSelect( blockEditorStore );
+		getParentSectionBlock,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
@@ -133,7 +135,8 @@ export function useInBetweenInserter() {
 				const clientId = element.id.slice( 'block-'.length );
 				if (
 					! clientId ||
-					__unstableIsWithinBlockOverlay( clientId )
+					__unstableIsWithinBlockOverlay( clientId ) ||
+					!! getParentSectionBlock( clientId )
 				) {
 					return;
 				}
diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 80b314eeb42e5..9090de42f8b7d 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/packages/block-editor/src/components/block-parent-selector/index.js
@@ -14,6 +14,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
 import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block parent selector component, displaying the hierarchy of the
@@ -23,24 +24,26 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const { firstParentClientId, isVisible } = useSelect( ( select ) => {
+	const { parentClientId, isVisible } = useSelect( ( select ) => {
 		const {
 			getBlockName,
 			getBlockParents,
 			getSelectedBlockClientId,
 			getBlockEditingMode,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const { hasBlockSupport } = select( blocksStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
 		const parents = getBlockParents( selectedBlockClientId );
-		const _firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( _firstParentClientId );
+		const _parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( _parentClientId );
 		const _parentBlockType = getBlockType( parentBlockName );
 		return {
-			firstParentClientId: _firstParentClientId,
+			parentClientId: _parentClientId,
 			isVisible:
-				_firstParentClientId &&
-				getBlockEditingMode( _firstParentClientId ) === 'default' &&
+				_parentClientId &&
+				getBlockEditingMode( _parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					_parentBlockType,
 					'__experimentalParentSelector',
@@ -48,7 +51,7 @@ export default function BlockParentSelector() {
 				),
 		};
 	}, [] );
-	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const blockInformation = useBlockDisplayInformation( parentClientId );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.
@@ -65,13 +68,13 @@ export default function BlockParentSelector() {
 	return (
 		<div
 			className="block-editor-block-parent-selector"
-			key={ firstParentClientId }
+			key={ parentClientId }
 			ref={ nodeRef }
 			{ ...showHoveredOrFocusedGestures }
 		>
 			<ToolbarButton
 				className="block-editor-block-parent-selector__button"
-				onClick={ () => selectBlock( firstParentClientId ) }
+				onClick={ () => selectBlock( parentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select parent block: %s' ),
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
index 39063db4f52e0..4ebce4172e9b3 100644
--- a/packages/block-editor/src/components/block-settings-menu-controls/index.js
+++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -4,12 +4,9 @@
 import {
 	createSlotFill,
 	MenuGroup,
-	MenuItem,
 	__experimentalStyleProvider as StyleProvider,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { pipe } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -96,18 +93,6 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove &&
-							! fillProps?.onlyBlock &&
-							! isContentOnly && (
-								<MenuItem
-									onClick={ pipe(
-										fillProps?.onClose,
-										fillProps?.onMoveTo
-									) }
-								>
-									{ __( 'Move to' ) }
-								</MenuItem>
-							) }
 						{ selectedClientIds.length === 1 && (
 							<ModifyContentLockMenuItem
 								clientId={ selectedClientIds[ 0 ] }
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
index 069bd2c9ff1ee..ac2b99ac2bb62 100644
--- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
+++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -58,7 +58,6 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
-		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
@@ -67,7 +66,6 @@ export function BlockSettingsDropdown( {
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
 				getPreviousBlockClientId,
@@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
 					( getActiveBlockVariation(
@@ -186,6 +183,9 @@ export function BlockSettingsDropdown( {
 		}
 	}
 
+	const shouldShowBlockParentMenuItem =
+		! parentBlockIsSelected && !! firstParentClientId;
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -195,7 +195,6 @@ export function BlockSettingsDropdown( {
 				canCopyStyles,
 				canDuplicate,
 				canInsertBlock,
-				canMove,
 				canRemove,
 				onDuplicate,
 				onInsertAfter,
@@ -203,26 +202,39 @@ export function BlockSettingsDropdown( {
 				onRemove,
 				onCopy,
 				onPasteStyles,
-				onMoveTo,
-			} ) => (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'Options' ) }
-					className="block-editor-block-settings-menu"
-					popoverProps={ POPOVER_PROPS }
-					open={ open }
-					onToggle={ onToggle }
-					noIcons
-					{ ...props }
-				>
-					{ ( { onClose } ) => (
-						<>
-							<MenuGroup>
-								<__unstableBlockSettingsMenuFirstItem.Slot
-									fillProps={ { onClose } }
-								/>
-								{ ! parentBlockIsSelected &&
-									!! firstParentClientId && (
+			} ) => {
+				// It is possible that some plugins register fills for this menu
+				// even if Core doesn't render anything in the block settings menu.
+				// in which case, we may want to render the menu anyway.
+				// That said for now, we can start more conservative.
+				const isEmpty =
+					! canRemove &&
+					! canDuplicate &&
+					! canInsertBlock &&
+					isContentOnly;
+
+				if ( isEmpty ) {
+					return null;
+				}
+
+				return (
+					<DropdownMenu
+						icon={ moreVertical }
+						label={ __( 'Options' ) }
+						className="block-editor-block-settings-menu"
+						popoverProps={ POPOVER_PROPS }
+						open={ open }
+						onToggle={ onToggle }
+						noIcons
+						{ ...props }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuGroup>
+									<__unstableBlockSettingsMenuFirstItem.Slot
+										fillProps={ { onClose } }
+									/>
+									{ shouldShowBlockParentMenuItem && (
 										<BlockParentSelectorMenuItem
 											parentClientId={
 												firstParentClientId
@@ -230,101 +242,103 @@ export function BlockSettingsDropdown( {
 											parentBlockType={ parentBlockType }
 										/>
 									) }
-								{ count === 1 && (
-									<BlockHTMLConvertButton
-										clientId={ firstBlockClientId }
-									/>
-								) }
-								{ ! isContentOnly && (
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										shortcut={ displayShortcut.primary(
-											'c'
-										) }
-									/>
-								) }
-								{ canDuplicate && (
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onDuplicate,
-											updateSelectionAfterDuplicate
-										) }
-										shortcut={ shortcuts.duplicate }
-									>
-										{ __( 'Duplicate' ) }
-									</MenuItem>
-								) }
-								{ canInsertBlock && ! isContentOnly && (
-									<>
+									{ count === 1 && (
+										<BlockHTMLConvertButton
+											clientId={ firstBlockClientId }
+										/>
+									) }
+									{ ! isContentOnly && (
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											shortcut={ displayShortcut.primary(
+												'c'
+											) }
+										/>
+									) }
+									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertBefore
+												onDuplicate,
+												updateSelectionAfterDuplicate
 											) }
-											shortcut={ shortcuts.insertBefore }
+											shortcut={ shortcuts.duplicate }
 										>
-											{ __( 'Add before' ) }
+											{ __( 'Duplicate' ) }
+										</MenuItem>
+									) }
+									{ canInsertBlock && ! isContentOnly && (
+										<>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertBefore
+												) }
+												shortcut={
+													shortcuts.insertBefore
+												}
+											>
+												{ __( 'Add before' ) }
+											</MenuItem>
+											<MenuItem
+												onClick={ pipe(
+													onClose,
+													onInsertAfter
+												) }
+												shortcut={
+													shortcuts.insertAfter
+												}
+											>
+												{ __( 'Add after' ) }
+											</MenuItem>
+										</>
+									) }
+								</MenuGroup>
+								{ canCopyStyles && ! isContentOnly && (
+									<MenuGroup>
+										<CopyMenuItem
+											clientIds={ clientIds }
+											onCopy={ onCopy }
+											label={ __( 'Copy styles' ) }
+										/>
+										<MenuItem onClick={ onPasteStyles }>
+											{ __( 'Paste styles' ) }
 										</MenuItem>
+									</MenuGroup>
+								) }
+								<BlockSettingsMenuControls.Slot
+									fillProps={ {
+										onClose,
+										count,
+										firstBlockClientId,
+									} }
+									clientIds={ clientIds }
+								/>
+								{ typeof children === 'function'
+									? children( { onClose } )
+									: Children.map( ( child ) =>
+											cloneElement( child, { onClose } )
+									  ) }
+								{ canRemove && (
+									<MenuGroup>
 										<MenuItem
 											onClick={ pipe(
 												onClose,
-												onInsertAfter
+												onRemove,
+												updateSelectionAfterRemove
 											) }
-											shortcut={ shortcuts.insertAfter }
+											shortcut={ shortcuts.remove }
 										>
-											{ __( 'Add after' ) }
+											{ __( 'Delete' ) }
 										</MenuItem>
-									</>
+									</MenuGroup>
 								) }
-							</MenuGroup>
-							{ canCopyStyles && ! isContentOnly && (
-								<MenuGroup>
-									<CopyMenuItem
-										clientIds={ clientIds }
-										onCopy={ onCopy }
-										label={ __( 'Copy styles' ) }
-									/>
-									<MenuItem onClick={ onPasteStyles }>
-										{ __( 'Paste styles' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-							<BlockSettingsMenuControls.Slot
-								fillProps={ {
-									onClose,
-									canMove,
-									onMoveTo,
-									onlyBlock,
-									count,
-									firstBlockClientId,
-								} }
-								clientIds={ clientIds }
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
-							{ canRemove && (
-								<MenuGroup>
-									<MenuItem
-										onClick={ pipe(
-											onClose,
-											onRemove,
-											updateSelectionAfterRemove
-										) }
-										shortcut={ shortcuts.remove }
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</>
-					) }
-				</DropdownMenu>
-			) }
+							</>
+						) }
+					</DropdownMenu>
+				);
+			} }
 		</BlockActions>
 	);
 }
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 98e7f7b2d2142..79f33bd30d753 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -35,36 +35,40 @@ function BlockSwitcherDropdownMenuContents( {
 	clientIds,
 	hasBlockStyles,
 	canRemove,
-	isUsingBindings,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks } = useSelect(
-		( select ) => {
-			const {
-				getBlocksByClientId,
-				getBlockRootClientId,
-				getBlockTransformItems,
-				__experimentalGetPatternTransformItems,
-			} = select( blockEditorStore );
-			const rootClientId = getBlockRootClientId(
-				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
-			);
-			const _blocks = getBlocksByClientId( clientIds );
-			return {
-				blocks: _blocks,
-				possibleBlockTransformations: getBlockTransformItems(
-					_blocks,
-					rootClientId
-				),
-				patterns: __experimentalGetPatternTransformItems(
-					_blocks,
-					rootClientId
-				),
-			};
-		},
-		[ clientIds ]
-	);
+	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockAttributes,
+					getBlocksByClientId,
+					getBlockRootClientId,
+					getBlockTransformItems,
+					__experimentalGetPatternTransformItems,
+				} = select( blockEditorStore );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+				const _blocks = getBlocksByClientId( clientIds );
+				return {
+					blocks: _blocks,
+					possibleBlockTransformations: getBlockTransformItems(
+						_blocks,
+						rootClientId
+					),
+					patterns: __experimentalGetPatternTransformItems(
+						_blocks,
+						rootClientId
+					),
+					isUsingBindings: clientIds.every(
+						( clientId ) =>
+							!! getBlockAttributes( clientId )?.metadata
+								?.bindings
+					),
+				};
+			},
+			[ clientIds ]
+		);
 	const blockVariationTransformations = useBlockVariationTransforms( {
 		clientIds,
 		blocks,
@@ -196,7 +200,7 @@ const BlockIndicator = ( { icon, showTitle, blockTitle } ) => (
 	</>
 );
 
-export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
+export const BlockSwitcher = ( { clientIds } ) => {
 	const {
 		hasContentOnlyLocking,
 		canRemove,
@@ -205,6 +209,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		invalidBlocks,
 		isReusable,
 		isTemplate,
+		isDisabled,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -212,6 +217,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				getBlocksByClientId,
 				getBlockAttributes,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -222,6 +228,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 			const [ { name: firstBlockName } ] = _blocks;
 			const _isSingleBlockSelected = _blocks.length === 1;
 			const blockType = getBlockType( firstBlockName );
+			const editingMode = getBlockEditingMode( clientIds[ 0 ] );
 
 			let _icon;
 			let _hasTemplateLock;
@@ -256,6 +263,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				isTemplate:
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
+				isDisabled: editingMode !== 'default',
 			};
 		},
 		[ clientIds ]
@@ -275,7 +283,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		: __( 'Multiple blocks selected' );
 
 	const hideDropdown =
-		disabled ||
+		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
 		hasContentOnlyLocking;
 
@@ -339,7 +347,6 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
 								canRemove={ canRemove }
-								isUsingBindings={ isUsingBindings }
 							/>
 						) }
 					</DropdownMenu>
diff --git a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
index 05ce545667d46..4d63c76317479 100644
--- a/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
+++ b/packages/block-editor/src/components/block-switcher/test/use-transformed.patterns.js
@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save() {},
diff --git a/packages/block-editor/src/components/block-switcher/test/utils.js b/packages/block-editor/src/components/block-switcher/test/utils.js
index 38009601e1646..eafe5e8a4d937 100644
--- a/packages/block-editor/src/components/block-switcher/test/utils.js
+++ b/packages/block-editor/src/components/block-switcher/test/utils.js
@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
 					},
 					content: {
 						type: 'boolean',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					level: {
 						type: 'number',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					color: {
 						type: 'string',
-						__experimentalRole: 'other',
+						role: 'other',
 					},
 				},
 				save() {},
diff --git a/packages/block-editor/src/components/block-switcher/utils.js b/packages/block-editor/src/components/block-switcher/utils.js
index ebd95fc460e33..49257a2126cbe 100644
--- a/packages/block-editor/src/components/block-switcher/utils.js
+++ b/packages/block-editor/src/components/block-switcher/utils.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 6c4789cb2924f..2ac2cbb12ff35 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Renders the block toolbar.
@@ -58,7 +59,6 @@ export function PrivateBlockToolbar( {
 	const {
 		blockClientId,
 		blockClientIds,
-		isContentOnlyEditingMode,
 		isDefaultEditingMode,
 		blockType,
 		toolbarKey,
@@ -78,12 +78,14 @@ export function PrivateBlockToolbar( {
 			getBlockAttributes,
 			getBlockParentsByBlockName,
 			getTemplateLock,
-		} = select( blockEditorStore );
+			getParentSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
 		const parents = getBlockParents( selectedBlockClientId );
-		const firstParentClientId = parents[ parents.length - 1 ];
-		const parentBlockName = getBlockName( firstParentClientId );
+		const parentSection = getParentSectionBlock( selectedBlockClientId );
+		const parentClientId = parentSection ?? parents[ parents.length - 1 ];
+		const parentBlockName = getBlockName( parentClientId );
 		const parentBlockType = getBlockType( parentBlockName );
 		const editingMode = getBlockEditingMode( selectedBlockClientId );
 		const _isDefaultEditingMode = editingMode === 'default';
@@ -112,21 +114,19 @@ export function PrivateBlockToolbar( {
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
-			isContentOnlyEditingMode: editingMode === 'contentOnly',
 			isDefaultEditingMode: _isDefaultEditingMode,
 			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
-			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
+			toolbarKey: `${ selectedBlockClientId }${ parentClientId }`,
 			showParentSelector:
 				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
+				getBlockEditingMode( parentClientId ) !== 'disabled' &&
 				hasBlockSupport(
 					parentBlockType,
 					'__experimentalParentSelector',
 					true
 				) &&
-				selectedBlockClientIds.length === 1 &&
-				_isDefaultEditingMode,
+				selectedBlockClientIds.length === 1,
 			isUsingBindings: _isUsingBindings,
 			hasParentPattern: _hasParentPattern,
 			hasContentOnlyLocking: _hasTemplateLock,
@@ -179,36 +179,26 @@ export function PrivateBlockToolbar( {
 			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ ! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
 						>
 							<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-								<BlockSwitcher
+								<BlockSwitcher clientIds={ blockClientIds } />
+								{ ! isMultiToolbar && isDefaultEditingMode && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
+								) }
+								<BlockMover
 									clientIds={ blockClientIds }
-									disabled={ ! isDefaultEditingMode }
-									isUsingBindings={ isUsingBindings }
+									hideDragHandle={ hideDragHandle }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
-								) }
 							</ToolbarGroup>
 						</div>
 					) }
@@ -242,9 +232,7 @@ export function PrivateBlockToolbar( {
 					</>
 				) }
 				<BlockEditVisuallyButton clientIds={ blockClientIds } />
-				{ isDefaultEditingMode && (
-					<BlockSettingsMenu clientIds={ blockClientIds } />
-				) }
+				<BlockSettingsMenu clientIds={ blockClientIds } />
 			</div>
 		</NavigableToolbar>
 	);
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 40d748dd0a156..ae03eeed1a817 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -37,6 +37,13 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-connected {
+		.block-editor-block-switcher .components-button::before {
+			background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+			border-radius: $radius-small;
+		}
+	}
+
 	&.is-synced,
 	&.is-connected {
 		.block-editor-block-switcher .components-button .block-editor-block-icon {
@@ -52,9 +59,18 @@
 
 	> :last-child,
 	> :last-child .components-toolbar-group,
-	> :last-child .components-toolbar {
+	> :last-child .components-toolbar,
+	// If the last toolbar group is empty,
+	// we need to remove the double border from the penultimate one.
+	&:has(> :last-child:empty) > :nth-last-child(2),
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group,
+	&:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
 		border-right: none;
 	}
+
+	.components-toolbar-group:empty {
+		display: none;
+	}
 }
 
 .block-editor-block-contextual-toolbar {
diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
index c4e228f8a3c07..80ce369114783 100644
--- a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
+++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js
@@ -7,7 +7,6 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
 /**
  * Returns true if the block toolbar should be shown.
@@ -15,40 +14,29 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
-		( select ) => {
-			const {
-				getBlockEditingMode,
-				getBlockName,
-				getBlockSelectionStart,
-			} = select( blockEditorStore );
+	const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => {
+		const { getBlockEditingMode, getBlockName, getBlockSelectionStart } =
+			select( blockEditorStore );
 
-			// we only care about the 1st selected block
-			// for the toolbar, so we use getBlockSelectionStart
-			// instead of getSelectedBlockClientIds
-			const selectedBlockClientId = getBlockSelectionStart();
+		// we only care about the 1st selected block
+		// for the toolbar, so we use getBlockSelectionStart
+		// instead of getSelectedBlockClientIds
+		const selectedBlockClientId = getBlockSelectionStart();
 
-			const blockType =
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) );
+		const blockType =
+			selectedBlockClientId &&
+			getBlockType( getBlockName( selectedBlockClientId ) );
 
-			return {
-				isToolbarEnabled:
-					blockType &&
-					hasBlockSupport( blockType, '__experimentalToolbar', true ),
-				isDefaultEditingMode:
-					getBlockEditingMode( selectedBlockClientId ) === 'default',
-			};
-		},
-		[]
-	);
+		return {
+			isToolbarEnabled:
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true ),
+			isBlockDisabled:
+				getBlockEditingMode( selectedBlockClientId ) === 'disabled',
+		};
+	}, [] );
 
-	const hasAnyBlockControls = useHasAnyBlockControls();
-
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	if ( ! isToolbarEnabled || isBlockDisabled ) {
 		return false;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
deleted file mode 100644
index 9c6c22181ef2a..0000000000000
--- a/packages/block-editor/src/components/block-tools/block-selection-button.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef, useEffect } from '@wordpress/element';
-import {
-	BACKSPACE,
-	DELETE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	TAB,
-	ESCAPE,
-	ENTER,
-	SPACE,
-} from '@wordpress/keycodes';
-import {
-	__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
-	store as blocksStore,
-} from '@wordpress/blocks';
-import { speak } from '@wordpress/a11y';
-import { focus } from '@wordpress/dom';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import BlockTitle from '../block-title';
-import BlockIcon from '../block-icon';
-import { store as blockEditorStore } from '../../store';
-import BlockDraggable from '../block-draggable';
-import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
-
-/**
- * Block selection button component, displaying the label of the block. If the block
- * descends from a root block, a button is displayed enabling the user to select
- * the root block.
- *
- * @param {string} props          Component props.
- * @param {string} props.clientId Client ID of block.
- * @param {Object} ref            Reference to the component.
- *
- * @return {Component} The component to be rendered.
- */
-function BlockSelectionButton( { clientId, rootClientId }, ref ) {
-	const selected = useSelect(
-		( select ) => {
-			const {
-				getBlock,
-				getBlockIndex,
-				hasBlockMovingClientId,
-				getBlockListSettings,
-				__unstableGetEditorMode,
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-				canMoveBlock,
-			} = select( blockEditorStore );
-			const { getActiveBlockVariation, getBlockType } =
-				select( blocksStore );
-			const index = getBlockIndex( clientId );
-			const { name, attributes } = getBlock( clientId );
-			const blockType = getBlockType( name );
-			const orientation =
-				getBlockListSettings( rootClientId )?.orientation;
-			const match = getActiveBlockVariation( name, attributes );
-
-			return {
-				blockMovingMode: hasBlockMovingClientId(),
-				editorMode: __unstableGetEditorMode(),
-				icon: match?.icon || blockType.icon,
-				label: getAccessibleBlockLabel(
-					blockType,
-					attributes,
-					index + 1,
-					orientation
-				),
-				canMove: canMoveBlock( clientId, rootClientId ),
-				getNextBlockClientId,
-				getPreviousBlockClientId,
-			};
-		},
-		[ clientId, rootClientId ]
-	);
-	const { label, icon, blockMovingMode, editorMode, canMove } = selected;
-	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-
-	// Focus the breadcrumb in navigation mode.
-	useEffect( () => {
-		if ( editorMode === 'navigation' ) {
-			ref.current.focus();
-			speak( label );
-		}
-	}, [ label, editorMode ] );
-	const blockElement = useBlockElement( clientId );
-
-	const {
-		hasBlockMovingClientId,
-		getBlockIndex,
-		getBlockRootClientId,
-		getClientIdsOfDescendants,
-		getSelectedBlockClientId,
-		getMultiSelectedBlocksEndClientId,
-		getPreviousBlockClientId,
-		getNextBlockClientId,
-	} = useSelect( blockEditorStore );
-	const {
-		selectBlock,
-		clearSelectedBlock,
-		setBlockMovingClientId,
-		moveBlockToPosition,
-	} = useDispatch( blockEditorStore );
-
-	function onKeyDown( event ) {
-		const { keyCode } = event;
-		const isUp = keyCode === UP;
-		const isDown = keyCode === DOWN;
-		const isLeft = keyCode === LEFT;
-		const isRight = keyCode === RIGHT;
-		const isTab = keyCode === TAB;
-		const isEscape = keyCode === ESCAPE;
-		const isEnter = keyCode === ENTER;
-		const isSpace = keyCode === SPACE;
-		const isShift = event.shiftKey;
-
-		if ( keyCode === BACKSPACE || keyCode === DELETE ) {
-			removeBlock( clientId );
-			event.preventDefault();
-			return;
-		}
-
-		const selectedBlockClientId = getSelectedBlockClientId();
-		const selectionEndClientId = getMultiSelectedBlocksEndClientId();
-		const selectionBeforeEndClientId = getPreviousBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-		const selectionAfterEndClientId = getNextBlockClientId(
-			selectionEndClientId || selectedBlockClientId
-		);
-
-		const navigateUp = ( isTab && isShift ) || isUp;
-		const navigateDown = ( isTab && ! isShift ) || isDown;
-		// Move out of current nesting level (no effect if at root level).
-		const navigateOut = isLeft;
-		// Move into next nesting level (no effect if the current block has no innerBlocks).
-		const navigateIn = isRight;
-
-		let focusedBlockUid;
-		if ( navigateUp ) {
-			focusedBlockUid = selectionBeforeEndClientId;
-		} else if ( navigateDown ) {
-			focusedBlockUid = selectionAfterEndClientId;
-		} else if ( navigateOut ) {
-			focusedBlockUid =
-				getBlockRootClientId( selectedBlockClientId ) ??
-				selectedBlockClientId;
-		} else if ( navigateIn ) {
-			focusedBlockUid =
-				getClientIdsOfDescendants( selectedBlockClientId )[ 0 ] ??
-				selectedBlockClientId;
-		}
-		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
-			setBlockMovingClientId( null );
-			event.preventDefault();
-		}
-		if ( ( isEnter || isSpace ) && startingBlockClientId ) {
-			const sourceRoot = getBlockRootClientId( startingBlockClientId );
-			const destRoot = getBlockRootClientId( selectedBlockClientId );
-			const sourceBlockIndex = getBlockIndex( startingBlockClientId );
-			let destinationBlockIndex = getBlockIndex( selectedBlockClientId );
-			if (
-				sourceBlockIndex < destinationBlockIndex &&
-				sourceRoot === destRoot
-			) {
-				destinationBlockIndex -= 1;
-			}
-			moveBlockToPosition(
-				startingBlockClientId,
-				sourceRoot,
-				destRoot,
-				destinationBlockIndex
-			);
-			selectBlock( startingBlockClientId );
-			setBlockMovingClientId( null );
-		}
-		// Prevent the block from being moved into itself.
-		if (
-			startingBlockClientId &&
-			selectedBlockClientId === startingBlockClientId &&
-			navigateIn
-		) {
-			return;
-		}
-		if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
-			if ( focusedBlockUid ) {
-				event.preventDefault();
-				selectBlock( focusedBlockUid );
-			} else if ( isTab && selectedBlockClientId ) {
-				let nextTabbable;
-
-				if ( navigateDown ) {
-					nextTabbable = blockElement;
-					do {
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					} while (
-						nextTabbable &&
-						blockElement.contains( nextTabbable )
-					);
-
-					if ( ! nextTabbable ) {
-						nextTabbable =
-							blockElement.ownerDocument.defaultView.frameElement;
-						nextTabbable = focus.tabbable.findNext( nextTabbable );
-					}
-				} else {
-					nextTabbable = focus.tabbable.findPrevious( blockElement );
-				}
-
-				if ( nextTabbable ) {
-					event.preventDefault();
-					nextTabbable.focus();
-					clearSelectedBlock();
-				}
-			}
-		}
-	}
-
-	const classNames = clsx(
-		'block-editor-block-list__block-selection-button',
-		{
-			'is-block-moving-mode': !! blockMovingMode,
-		}
-	);
-
-	const dragHandleLabel = __( 'Drag' );
-	const showBlockDraggable = canMove && editorMode === 'navigation';
-
-	return (
-		<div className={ classNames }>
-			<Flex
-				justify="center"
-				className="block-editor-block-list__block-selection-button__content"
-			>
-				<FlexItem>
-					<BlockIcon icon={ icon } showColors />
-				</FlexItem>
-				{ showBlockDraggable && (
-					<FlexItem>
-						<BlockDraggable clientIds={ [ clientId ] }>
-							{ ( draggableProps ) => (
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									icon={ dragHandle }
-									className="block-selection-button_drag-handle"
-									label={ dragHandleLabel }
-									// Should not be able to tab to drag handle as this
-									// button can only be used with a pointer device.
-									tabIndex="-1"
-									{ ...draggableProps }
-								/>
-							) }
-						</BlockDraggable>
-					</FlexItem>
-				) }
-				{ editorMode === 'navigation' && (
-					<FlexItem>
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							ref={ ref }
-							onClick={
-								editorMode === 'navigation'
-									? () => setNavigationMode( false )
-									: undefined
-							}
-							onKeyDown={ onKeyDown }
-							label={ label }
-							showTooltip={ false }
-							className="block-selection-button_select-button"
-						>
-							<BlockTitle
-								clientId={ clientId }
-								maximumLength={ 35 }
-							/>
-						</Button>
-					</FlexItem>
-				) }
-			</Flex>
-		</div>
-	);
-}
-
-export default forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
deleted file mode 100644
index ae03bdb4f5164..0000000000000
--- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import BlockSelectionButton from './block-selection-button';
-import { PrivateBlockPopover } from '../block-popover';
-import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
-import useSelectedBlockToolProps from './use-selected-block-tool-props';
-
-function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
-	const {
-		capturingClientId,
-		isInsertionPointVisible,
-		lastClientId,
-		rootClientId,
-	} = useSelectedBlockToolProps( clientId );
-
-	const popoverProps = useBlockToolbarPopoverProps( {
-		contentElement: __unstableContentRef?.current,
-		clientId,
-	} );
-
-	return (
-		<PrivateBlockPopover
-			clientId={ capturingClientId || clientId }
-			bottomClientId={ lastClientId }
-			className={ clsx( 'block-editor-block-list__block-popover', {
-				'is-insertion-point-visible': isInsertionPointVisible,
-			} ) }
-			resize={ false }
-			{ ...popoverProps }
-		>
-			<BlockSelectionButton
-				ref={ ref }
-				clientId={ clientId }
-				rootClientId={ rootClientId }
-			/>
-		</PrivateBlockPopover>
-	);
-}
-
-export default forwardRef( BlockToolbarBreadcrumb );
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
index 24f60dbbf970a..099323925384b 100644
--- a/packages/block-editor/src/components/block-tools/index.js
+++ b/packages/block-editor/src/components/block-tools/index.js
@@ -19,7 +19,6 @@ import {
 	default as InsertionPoint,
 } from './insertion-point';
 import BlockToolbarPopover from './block-toolbar-popover';
-import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import ZoomOutPopover from './zoom-out-popover';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
@@ -78,7 +77,6 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
-		showBreadcrumb,
 		showBlockToolbarPopover,
 		showZoomOutToolbar,
 	} = useShowBlockTools();
@@ -223,14 +221,6 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBreadcrumb && (
-					<BlockToolbarBreadcrumb
-						ref={ blockSelectionButtonRef }
-						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
-					/>
-				) }
-
 				{ showZoomOutToolbar && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
diff --git a/packages/block-editor/src/components/block-tools/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js
index 469f7e53908cb..891a32eaa5dc9 100644
--- a/packages/block-editor/src/components/block-tools/insertion-point.js
+++ b/packages/block-editor/src/components/block-tools/insertion-point.js
@@ -37,7 +37,6 @@ function InbetweenInsertionPointPopover( {
 		rootClientId,
 		isInserterShown,
 		isDistractionFree,
-		isNavigationMode,
 		isZoomOutMode,
 	} = useSelect( ( select ) => {
 		const {
@@ -48,7 +47,6 @@ function InbetweenInsertionPointPopover( {
 			getPreviousBlockClientId,
 			getNextBlockClientId,
 			getSettings,
-			isNavigationMode: _isNavigationMode,
 			__unstableGetEditorMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
@@ -78,7 +76,6 @@ function InbetweenInsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
-			isNavigationMode: _isNavigationMode(),
 			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
@@ -144,7 +141,7 @@ function InbetweenInsertionPointPopover( {
 		},
 	};
 
-	if ( isDistractionFree && ! isNavigationMode ) {
+	if ( isDistractionFree ) {
 		return null;
 	}
 
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
index 9f1325d7f95a1..a3d9153273e98 100644
--- a/packages/block-editor/src/components/block-tools/style.scss
+++ b/packages/block-editor/src/components/block-tools/style.scss
@@ -84,84 +84,6 @@
 	}
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-
-.block-editor-block-list__block-selection-button {
-	display: inline-flex;
-	padding: 0 $grid-unit-15;
-	z-index: z-index(".block-editor-block-list__block-selection-button");
-
-	// Dark block UI appearance.
-	border-radius: $radius-small;
-	background-color: $gray-900;
-
-	font-size: $default-font-size;
-	height: $block-toolbar-height;
-
-	.block-editor-block-list__block-selection-button__content {
-		margin: auto;
-		display: inline-flex;
-		align-items: center;
-
-		> .components-flex__item {
-			margin-right: $grid-unit-15 * 0.5;
-		}
-	}
-	.components-button.has-icon.block-selection-button_drag-handle {
-		cursor: grab;
-		padding: 0;
-		height: $grid-unit-30;
-		min-width: $grid-unit-30;
-		margin-left: -2px;
-
-		// Drag handle is smaller than the others.
-		svg {
-			min-width: 18px;
-			min-height: 18px;
-		}
-	}
-
-	.block-editor-block-icon {
-		font-size: $default-font-size;
-		color: $white;
-		height: $block-toolbar-height;
-	}
-
-	// The button here has a special style to appear as a toolbar.
-	.components-button {
-		min-width: $button-size;
-		color: $white;
-		height: $block-toolbar-height;
-
-		// When button is focused, it receives a box-shadow instead of the border.
-		&:focus {
-			box-shadow: none;
-			border: none;
-		}
-
-		&:active {
-			color: $white;
-		}
-
-		// Make sure the button has no hover style when it's disabled.
-		&[aria-disabled="true"]:hover {
-			color: $white;
-		}
-
-		display: flex;
-	}
-	.block-selection-button_select-button.components-button {
-		padding: 0;
-	}
-
-	.block-editor-block-mover {
-		background: unset;
-		border: none;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -178,14 +100,10 @@
 .components-popover.block-editor-block-list__block-popover {
 
 	// Position the block toolbar.
-	.block-editor-block-list__block-selection-button,
 	.block-editor-block-contextual-toolbar {
 		pointer-events: all;
 		margin-top: $grid-unit-10;
 		margin-bottom: $grid-unit-10;
-	}
-
-	.block-editor-block-contextual-toolbar {
 		border: $border-width solid $gray-900;
 		border-radius: $radius-small;
 		overflow: visible; // allow the parent selector to be visible
diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
index 07e0ebd16a64b..02a8f0583bcdd 100644
--- a/packages/block-editor/src/components/block-tools/use-show-block-tools.js
+++ b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -22,7 +22,6 @@ export function useShowBlockTools() {
 			getBlock,
 			getBlockMode,
 			getSettings,
-			hasMultiSelection,
 			__unstableGetEditorMode,
 			isTyping,
 		} = select( blockEditorStore );
@@ -42,29 +41,20 @@ export function useShowBlockTools() {
 			! isTyping() &&
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
-		const maybeShowBreadcrumb =
-			hasSelectedBlock &&
-			! hasMultiSelection() &&
-			editorMode === 'navigation';
-
 		const isZoomOut = editorMode === 'zoom-out';
 		const _showZoomOutToolbar =
 			isZoomOut &&
 			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter &&
-			! maybeShowBreadcrumb;
+			! _showEmptyBlockSideInserter;
 		const _showBlockToolbarPopover =
 			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb;
+			! isEmptyDefaultBlock;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-			showBreadcrumb:
-				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
 			showBlockToolbarPopover: _showBlockToolbarPopover,
 			showZoomOutToolbar: _showZoomOutToolbar,
 		};
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index a3c46c4b4c970..b8736de11481a 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -20,13 +15,13 @@ import BlockDraggable from '../block-draggable';
 import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
+import { unlock } from '../../lock-unlock';
 
 export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
 				getBlock,
-				hasBlockMovingClientId,
 				getNextBlockClientId,
 				getPreviousBlockClientId,
 				canRemoveBlock,
@@ -62,7 +57,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 			}
 
 			return {
-				blockMovingMode: hasBlockMovingClientId(),
 				isBlockTemplatePart,
 				isNextBlockTemplatePart,
 				isPrevBlockTemplatePart,
@@ -75,7 +69,6 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 	);
 
 	const {
-		blockMovingMode,
 		isBlockTemplatePart,
 		isNextBlockTemplatePart,
 		isPrevBlockTemplatePart,
@@ -84,18 +77,15 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 		setIsInserterOpened,
 	} = selected;
 
-	const { removeBlock, __unstableSetEditorMode } =
-		useDispatch( blockEditorStore );
-
-	const classNames = clsx( 'zoom-out-toolbar', {
-		'is-block-moving-mode': !! blockMovingMode,
-	} );
+	const { removeBlock, __unstableSetEditorMode, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	const showBlockDraggable = canMove && ! isBlockTemplatePart;
 
 	return (
 		<NavigableToolbar
-			className={ classNames }
+			className="zoom-out-toolbar"
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
@@ -144,6 +134,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 							setIsInserterOpened( false );
 						}
 						__unstableSetEditorMode( 'edit' );
+						resetZoomLevel();
 						__unstableContentRef.current?.focus();
 					} }
 				/>
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index ecdf8b23bec3f..f3687a305e84f 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -64,8 +64,7 @@ function BlockVariationPicker( {
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="link"
 						onClick={ () => onSelect() }
 					>
diff --git a/packages/block-editor/src/components/block-variation-transforms/index.js b/packages/block-editor/src/components/block-variation-transforms/index.js
index 97a3f98054184..5850fc52b37b6 100644
--- a/packages/block-editor/src/components/block-variation-transforms/index.js
+++ b/packages/block-editor/src/components/block-variation-transforms/index.js
@@ -21,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function VariationsButtons( {
 	className,
@@ -35,8 +36,8 @@ function VariationsButtons( {
 			</VisuallyHidden>
 			{ variations.map( ( variation ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
+					size="compact"
 					key={ variation.name }
 					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
@@ -140,19 +141,28 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations } = useSelect(
+	const { activeBlockVariation, variations, isContentOnly } = useSelect(
 		( select ) => {
 			const { getActiveBlockVariation, getBlockVariations } =
 				select( blocksStore );
-			const { getBlockName, getBlockAttributes } =
+
+			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
 				select( blockEditorStore );
+
 			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
 			return {
 				activeBlockVariation: getActiveBlockVariation(
 					name,
 					getBlockAttributes( blockClientId )
 				),
 				variations: name && getBlockVariations( name, 'transform' ),
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
 			};
 		},
 		[ blockClientId ]
@@ -181,8 +191,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	// Skip rendering if there are no variations
-	if ( ! variations?.length ) {
+	if ( ! variations?.length || isContentOnly ) {
 		return null;
 	}
 
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 e462278c07c10..f5486d3f6f608 100644
--- a/packages/block-editor/src/components/button-block-appender/content.scss
+++ b/packages/block-editor/src/components/button-block-appender/content.scss
@@ -8,11 +8,6 @@
 	color: $gray-900;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 
-	// Needs specificity to override button styles.
-	&.components-button.components-button {
-		padding: $grid-unit-15;
-	}
-
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
 		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index c4a6854c6d6cc..53b15e2fd2cfd 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -60,8 +60,7 @@ function ButtonBlockAppender(
 
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						ref={ mergedInserterButtonRef }
 						onFocus={ onFocus }
 						tabIndex={ tabIndex }
diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
index d3cf59a2a5e6e..71b27c06e7ccf 100644
--- a/packages/block-editor/src/components/colors-gradients/dropdown.js
+++ b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -88,11 +88,7 @@ const renderToggle =
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<LabeledColorIndicator
 					colorValue={ colorValue }
 					label={ label }
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index 87c19adedbb27..a55a7b331bd0d 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -239,11 +239,7 @@ function ColorPanelDropdown( {
 					};
 
 					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							{ ...toggleProps }
-						>
+						<Button __next40pxDefaultSize { ...toggleProps }>
 							<LabeledColorIndicators
 								indicators={ indicators }
 								label={ label }
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index ce508a5ebc89e..4c52de6a3d7d1 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
index de6e58b3334f1..581661e0c8407 100644
--- a/packages/block-editor/src/components/global-styles/filters-panel.js
+++ b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -190,8 +190,7 @@ export default function FiltersPanel( {
 							return (
 								<ItemGroup isBordered isSeparated>
 									<Button
-										// TODO: Switch to `true` (40px size) if possible
-										__next40pxDefaultSize={ false }
+										__next40pxDefaultSize
 										{ ...toggleProps }
 									>
 										<LabeledColorIndicator
diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 1ed367e3c3ad0..1cfdff0be286e 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -11,6 +11,7 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -42,8 +43,7 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 				/>
 				<div className="block-editor-global-styles__clear-shadow">
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ () => onShadowChange( undefined ) }
 					>
@@ -80,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Composite.Item
-			role="option"
-			aria-label={ label }
-			aria-selected={ isActive }
-			className={ clsx( 'block-editor-global-styles__shadow__item', {
-				'is-active': isActive,
-			} ) }
-			render={
-				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
-					className={ clsx(
-						'block-editor-global-styles__shadow-indicator',
-						{
-							unset: type === 'unset',
-						}
-					) }
-					onClick={ onSelect }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					showTooltip
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</Button>
-			}
-		/>
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
 	);
 }
 
@@ -143,11 +142,7 @@ function renderShadowToggle() {
 		};
 
 		return (
-			<Button
-				// TODO: Switch to `true` (40px size) if possible
-				__next40pxDefaultSize={ false }
-				{ ...toggleProps }
-			>
+			<Button __next40pxDefaultSize { ...toggleProps }>
 				<HStack justify="flex-start">
 					<Icon
 						className="block-editor-global-styles__toggle-icon"
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 3ba4f81d09daf..e0782fdb01b1d 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -37,10 +37,15 @@
 
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;
diff --git a/packages/block-editor/src/components/inner-blocks/content.scss b/packages/block-editor/src/components/inner-blocks/content.scss
deleted file mode 100644
index 05259ede35daa..0000000000000
--- a/packages/block-editor/src/components/inner-blocks/content.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Add clickable overlay to blocks with nesting.
-// This makes it easy to select all layers of the block.
-.block-editor-block-list__layout.has-overlay {
-	&::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
-	}
-}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 0d35b459190fe..1583031a8ea18 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -195,14 +195,11 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		( select ) => {
 			const {
 				getBlockName,
-				isBlockSelected,
-				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
 				getTemplateLock,
 				getBlockRootClientId,
 				getBlockEditingMode,
 				getBlockSettings,
-				isDragging,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
 			let _isDropZoneDisabled;
@@ -213,8 +210,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
-			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation';
 			const blockEditingMode = getBlockEditingMode( clientId );
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
@@ -236,12 +231,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					'__experimentalExposeControlsToChildren',
 					false
 				),
-				hasOverlay:
-					blockName !== 'core/template' &&
-					! isBlockSelected( clientId ) &&
-					! hasSelectedInnerBlock( clientId, true ) &&
-					enableClickThrough &&
-					! isDragging(),
 				name: blockName,
 				blockType: getBlockType( blockName ),
 				parentLock: getTemplateLock( parentClientId ),
@@ -254,7 +243,6 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 	const {
 		__experimentalCaptureToolbars,
-		hasOverlay,
 		name,
 		blockType,
 		parentLock,
@@ -299,10 +287,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		className: clsx(
 			props.className,
 			'block-editor-block-list__layout',
-			__unstableDisableLayoutClassNames ? '' : layoutClassNames,
-			{
-				'has-overlay': hasOverlay,
-			}
+			__unstableDisableLayoutClassNames ? '' : layoutClassNames
 		),
 		children: clientId ? (
 			<InnerBlocks { ...innerBlocksProps } clientId={ clientId } />
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index 69c316bdbbcce..06c266d793d2f 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -33,11 +33,7 @@ function InserterListboxItem(
 					return children( propsWithTabIndex );
 				}
 				return (
-					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
-						{ ...propsWithTabIndex }
-					>
+					<Button __next40pxDefaultSize { ...propsWithTabIndex }>
 						{ children }
 					</Button>
 				);
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
index 95de775e48eef..d258c24da10cf 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js
@@ -15,8 +15,7 @@ function PatternCategoriesList( {
 			{ patternCategories.map( ( { name, label } ) => {
 				return (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						key={ name }
 						label={ label }
 						className={ `${ baseClassName }__categories-list__item` }
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index 0db78cec24dcb..141ebf8cc8401 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -61,8 +61,7 @@ function BlockPatternsTab( {
 						{ children }
 					</CategoryTabs>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
 						variant="secondary"
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 50a8b46b46427..844d5dd341437 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -186,7 +186,7 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		if ( rootClientId && item.rootClientId === rootClientId ) {
+		if ( rootClientId && item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {
 			itemsRemaining.push( item );
diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
index 8db23267eee8f..6f11060c75c49 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -2,19 +2,23 @@
  * WordPress dependencies
  */
 import {
+	getBlockType,
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
 	parse,
 } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
-import { withRootClientIdOptionKey } from '../../../store/utils';
+import { isFiltered } from '../../../store/utils';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Retrieves the block types inserter state.
@@ -26,7 +30,7 @@ import { withRootClientIdOptionKey } from '../../../store/utils';
  */
 const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 	const options = useMemo(
-		() => ( { [ withRootClientIdOptionKey ]: ! isQuick } ),
+		() => ( { [ isFiltered ]: !! isQuick } ),
 		[ isQuick ]
 	);
 	const [ items ] = useSelect(
@@ -38,6 +42,10 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 		],
 		[ rootClientId, options ]
 	);
+	const { getClosestAllowedInsertionPoint } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [ categories, collections ] = useSelect( ( select ) => {
 		const { getCategories, getCollections } = select( blocksStore );
@@ -46,16 +54,29 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 
 	const onSelectItem = useCallback(
 		(
-			{
-				name,
-				initialAttributes,
-				innerBlocks,
-				syncStatus,
-				content,
-				rootClientId: _rootClientId,
-			},
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
 			shouldFocusBlock
 		) => {
+			const destinationClientId = getClosestAllowedInsertionPoint(
+				name,
+				rootClientId
+			);
+			if ( destinationClientId === null ) {
+				const title = getBlockType( name )?.title ?? name;
+				createErrorNotice(
+					sprintf(
+						/* translators: %s: block pattern title. */
+						__( 'Block "%s" can\'t be inserted.' ),
+						title
+					),
+					{
+						type: 'snackbar',
+						id: 'inserter-notice',
+					}
+				);
+				return;
+			}
+
 			const insertedBlock =
 				syncStatus === 'unsynced'
 					? parse( content, {
@@ -66,15 +87,14 @@ const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => {
 							initialAttributes,
 							createBlocksFromInnerBlocksTemplate( innerBlocks )
 					  );
-
 			onInsert(
 				insertedBlock,
 				undefined,
 				shouldFocusBlock,
-				_rootClientId
+				destinationClientId
 			);
 		},
-		[ onInsert ]
+		[ onInsert, getClosestAllowedInsertionPoint, rootClientId ]
 	);
 
 	return [ items, categories, collections, onSelectItem ];
diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
index 24074ec500456..0cd71bf77b983 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js
@@ -71,7 +71,11 @@ function useInsertionPoint( {
 	selectBlockOnInsert = true,
 } ) {
 	const registry = useRegistry();
-	const { getSelectedBlock } = useSelect( blockEditorStore );
+	const {
+		getSelectedBlock,
+		getClosestAllowedInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { destinationRootClientId, destinationIndex } = useSelect(
 		( select ) => {
 			const {
@@ -193,21 +197,30 @@ function useInsertionPoint( {
 
 	const onToggleInsertionPoint = useCallback(
 		( item ) => {
-			if ( item?.hasOwnProperty( 'rootClientId' ) ) {
-				showInsertionPoint(
-					item.rootClientId,
-					getIndex( {
-						destinationRootClientId,
-						destinationIndex,
-						rootClientId: item.rootClientId,
-						registry,
-					} )
-				);
+			if ( item && ! isBlockInsertionPointVisible() ) {
+				const allowedDestinationRootClientId =
+					getClosestAllowedInsertionPoint(
+						item.name,
+						destinationRootClientId
+					);
+				if ( allowedDestinationRootClientId !== null ) {
+					showInsertionPoint(
+						allowedDestinationRootClientId,
+						getIndex( {
+							destinationRootClientId,
+							destinationIndex,
+							rootClientId: allowedDestinationRootClientId,
+							registry,
+						} )
+					);
+				}
 			} else {
 				hideInsertionPoint();
 			}
 		},
 		[
+			getClosestAllowedInsertionPoint,
+			isBlockInsertionPointVisible,
 			showInsertionPoint,
 			hideInsertionPoint,
 			destinationRootClientId,
diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
index 6483dc58ae8b9..13dae7f2ed7c0 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -11,33 +11,66 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { getParsedPattern } from '../../../store/utils';
 
 /**
  * Retrieves the block patterns inserter state.
  *
  * @param {Function} onInsert         function called when inserter a list of blocks.
  * @param {string=}  rootClientId     Insertion's root client ID.
- *
  * @param {string}   selectedCategory The selected pattern category.
+ * @param {boolean}  isQuick          For the quick inserter render only allowed patterns.
+ *
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
-const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
-	const { patternCategories, patterns, userPatternCategories } = useSelect(
+const usePatternsState = (
+	onInsert,
+	rootClientId,
+	selectedCategory,
+	isQuick
+) => {
+	const { patternCategories, allPatterns, userPatternCategories } = useSelect(
 		( select ) => {
-			const { __experimentalGetAllowedPatterns, getSettings } =
-				select( blockEditorStore );
+			const {
+				getAllPatterns,
+				getSettings,
+				__experimentalGetAllowedPatterns,
+			} = unlock( select( blockEditorStore ) );
 			const {
 				__experimentalUserPatternCategories,
 				__experimentalBlockPatternCategories,
 			} = getSettings();
 			return {
-				patterns: __experimentalGetAllowedPatterns( rootClientId ),
+				allPatterns: isQuick
+					? __experimentalGetAllowedPatterns()
+					: getAllPatterns(),
 				userPatternCategories: __experimentalUserPatternCategories,
 				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
-		[ rootClientId ]
+		[ isQuick ]
+	);
+	const { getClosestAllowedInsertionPointForPattern } = unlock(
+		useSelect( blockEditorStore )
+	);
+
+	const patterns = useMemo(
+		() =>
+			isQuick
+				? allPatterns
+				: allPatterns
+						.filter( ( { inserter = true } ) => !! inserter )
+						.map( ( pattern ) => {
+							return {
+								...pattern,
+								get blocks() {
+									return getParsedPattern( pattern ).blocks;
+								},
+							};
+						} ),
+		[ isQuick, allPatterns ]
 	);
 
 	const allCategories = useMemo( () => {
@@ -58,6 +91,15 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
+			const destinationRootClientId = isQuick
+				? rootClientId
+				: getClosestAllowedInsertionPointForPattern(
+						pattern,
+						rootClientId
+				  );
+			if ( destinationRootClientId === null ) {
+				return;
+			}
 			const patternBlocks =
 				pattern.type === INSERTER_PATTERN_TYPES.user &&
 				pattern.syncStatus !== 'unsynced'
@@ -77,7 +119,9 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 					}
 					return clonedBlock;
 				} ),
-				pattern.name
+				pattern.name,
+				false,
+				destinationRootClientId
 			);
 			createSuccessNotice(
 				sprintf(
@@ -87,11 +131,18 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => {
 				),
 				{
 					type: 'snackbar',
-					id: 'block-pattern-inserted-notice',
+					id: 'inserter-notice',
 				}
 			);
 		},
-		[ createSuccessNotice, onInsert, selectedCategory ]
+		[
+			createSuccessNotice,
+			onInsert,
+			selectedCategory,
+			rootClientId,
+			getClosestAllowedInsertionPointForPattern,
+			isQuick,
+		]
 	);
 
 	return [ patterns, allCategories, onClickPattern ];
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-preview.js b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
index 4416b710302ce..a890e5fe8dc13 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-preview.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-preview.js
@@ -100,8 +100,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 			>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="tertiary"
 						onClick={ onClose }
 					>
@@ -110,8 +109,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 				</FlexItem>
 				<FlexItem>
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ onSubmit }
 					>
@@ -186,13 +184,16 @@ export function MediaPreview( { media, onClick, category } ) {
 							} );
 							createSuccessNotice(
 								__( 'Image uploaded and inserted.' ),
-								{ type: 'snackbar' }
+								{ type: 'snackbar', id: 'inserter-notice' }
 							);
 							setIsInserting( false );
 						},
 						allowedTypes: ALLOWED_MEDIA_TYPES,
 						onError( message ) {
-							createErrorNotice( message, { type: 'snackbar' } );
+							createErrorNotice( message, {
+								type: 'snackbar',
+								id: 'inserter-notice',
+							} );
 							setIsInserting( false );
 						},
 					} );
@@ -283,6 +284,7 @@ export function MediaPreview( { media, onClick, category } ) {
 						onClick( cloneBlock( block ) );
 						createSuccessNotice( __( 'Image inserted.' ), {
 							type: 'snackbar',
+							id: 'inserter-notice',
 						} );
 						setShowExternalUploadModal( false );
 					} }
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index 07fce9ee6d80b..ca901a127e5b4 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -71,8 +71,7 @@ function MediaTab( {
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							render={ ( { open } ) => (
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									onClick={ ( event ) => {
 										// Safari doesn't emit a focus event on button elements when
 										// clicked and we need to manually focus the button here.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index faf2c20514f67..4bc26196cb524 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -114,9 +114,9 @@ function InserterMenu(
 	);
 
 	const onInsertPattern = useCallback(
-		( blocks, patternName ) => {
+		( blocks, patternName, ...args ) => {
 			onToggleInsertionPoint( false );
-			onInsertBlocks( blocks, { patternName } );
+			onInsertBlocks( blocks, { patternName }, ...args );
 			onSelect();
 		},
 		[ onInsertBlocks, onSelect ]
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
index e28ae1f3896c4..f40af12feddf4 100644
--- a/packages/block-editor/src/components/inserter/quick-inserter.js
+++ b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -47,10 +47,11 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		true
 	);
-
 	const [ patterns ] = usePatternsState(
 		onInsertBlocks,
-		destinationRootClientId
+		destinationRootClientId,
+		undefined,
+		true
 	);
 
 	const { setInserterIsOpened, insertionIndex } = useSelect(
@@ -138,8 +139,7 @@ export default function QuickInserter( {
 
 			{ setInserterIsOpened && (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					className="block-editor-inserter__quick-inserter-expand"
 					onClick={ onBrowseAll }
 					aria-label={ __(
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index e772a67a13138..3ce088901bce5 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -410,7 +410,6 @@ $block-inserter-tabs-height: 44px;
 	background: $gray-900;
 	color: $white;
 	width: 100%;
-	height: ($button-size + $grid-unit-10);
 	border-radius: 0;
 
 	&:hover {
diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
deleted file mode 100644
index 925570130359a..0000000000000
--- a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from 'test/helpers';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import items from './fixtures';
-import BlockTypesTab from '../block-types-tab';
-
-jest.mock( '../hooks/use-clipboard-block' );
-jest.mock( '@wordpress/data/src/components/use-select' );
-
-const selectMock = {
-	getCategories: jest.fn().mockReturnValue( [] ),
-	getCollections: jest.fn().mockReturnValue( [] ),
-	getInserterItems: jest.fn().mockReturnValue( [] ),
-	canInsertBlockType: jest.fn(),
-	getBlockType: jest.fn(),
-	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( { impressions: {} } ) ),
-};
-
-describe( 'BlockTypesTab component', () => {
-	beforeEach( () => {
-		useSelect.mockImplementation( ( callback ) =>
-			callback( () => selectMock )
-		);
-	} );
-
-	it( 'renders without crashing', () => {
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-		expect( component ).toBeTruthy();
-	} );
-
-	it( 'shows block items', () => {
-		selectMock.getInserterItems.mockReturnValue( items );
-
-		const blockItems = items.filter(
-			( { id, category } ) =>
-				category !== 'reusable' && id !== 'core-embed/a-paragraph-embed'
-		);
-		const component = render(
-			<BlockTypesTab
-				rootClientId={ 0 }
-				onSelect={ jest.fn() }
-				listProps={ { contentContainerStyle: {} } }
-			/>
-		);
-
-		blockItems.forEach( ( item ) => {
-			expect( component.getByText( item.title ) ).toBeTruthy();
-		} );
-	} );
-} );
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 2024aca998caa..f0de14f3d6821 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -12,6 +12,7 @@ import {
 	Notice,
 	TextControl,
 	__experimentalHStack as HStack,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -383,7 +384,7 @@ function LinkControl( {
 								value={ internalControlValue?.title }
 								onChange={ setInternalTextInputValue }
 								onKeyDown={ handleSubmitWithEnter }
-								size="__unstable-large"
+								__next40pxDefaultSize
 							/>
 						) }
 						<LinkControlSearchInput
@@ -404,20 +405,23 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							hideLabelFromVision={ ! showTextControl }
+							suffix={
+								showActions ? undefined : (
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											onClick={
+												isDisabled ? noop : handleSubmit
+											}
+											label={ __( 'Submit' ) }
+											icon={ keyboardReturn }
+											className="block-editor-link-control__search-submit"
+											aria-disabled={ isDisabled }
+											size="small"
+										/>
+									</InputControlSuffixWrapper>
+								)
+							}
 						/>
-						{ ! showActions && (
-							<div className="block-editor-link-control__search-enter">
-								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
-									onClick={ isDisabled ? noop : handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									aria-disabled={ isDisabled }
-								/>
-							</div>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
index 3a5dcd4148e95..f41884092e489 100644
--- a/packages/block-editor/src/components/link-control/search-input.js
+++ b/packages/block-editor/src/components/link-control/search-input.js
@@ -43,6 +43,7 @@ const LinkControlSearchInput = forwardRef(
 			withURLSuggestion = true,
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
+			suffix,
 		},
 		ref
 	) => {
@@ -147,6 +148,7 @@ const LinkControlSearchInput = forwardRef(
 						}
 					} }
 					ref={ ref }
+					suffix={ suffix }
 				/>
 				{ children }
 			</div>
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index b0a5f6af2651b..16493e1a5aa7f 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -72,34 +72,12 @@ $block-editor-link-control-number-of-actions: 1;
 		color: $gray-900;
 	}
 
-	input[type="text"],
-	// Specificity overide of URLInput defaults.
-	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
-		@include input-control;
-		display: block;
-		border: $border-width solid $gray-600;
-		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
-		margin: 0;
-		padding: $grid-unit-10 $button-size-next-default-40px $grid-unit-10 $grid-unit-20;
-		position: relative;
-		width: 100%;
-
-		.has-actions & {
-			padding-right: $grid-unit-20;
-		}
-	}
 }
 
 .block-editor-link-control__search-error {
 	margin: -$grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20; // negative margin to bring the error a bit closer to the button
 }
 
-.block-editor-link-control__search-enter {
-	position: absolute;
-	right: 19px; // specific to place the button properly.
-	top: 3px;
-}
-
 .block-editor-link-control__search-actions {
 	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 }
diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js
index 91bfbd7eddaa0..0ed2b162b127b 100644
--- a/packages/block-editor/src/components/list-view/block-contents.js
+++ b/packages/block-editor/src/components/list-view/block-contents.js
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -14,7 +8,6 @@ import { forwardRef } from '@wordpress/element';
  */
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
-import { store as blockEditorStore } from '../../store';
 import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
@@ -34,29 +27,9 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
-			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
-				return {
-					blockMovingClientId: hasBlockMovingClientId(),
-					selectedBlockInBlockEditor: getSelectedBlockClientId(),
-				};
-			},
-			[]
-		);
-
 		const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
 			useListViewContext();
 
-		const isBlockMoveTarget =
-			blockMovingClientId && selectedBlockInBlockEditor === clientId;
-
-		const className = clsx( 'block-editor-list-view-block-contents', {
-			'is-dropping-before': isBlockMoveTarget,
-		} );
-
 		// Only include all selected blocks if the currently clicked on block
 		// is one of the selected blocks. This ensures that if a user attempts
 		// to drag a block that isn't part of the selection, they're still able
@@ -82,7 +55,7 @@ const ListViewBlockContents = forwardRef(
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }
-							className={ className }
+							className="block-editor-list-view-block-contents"
 							block={ block }
 							onClick={ onClick }
 							onToggleExpanded={ onToggleExpanded }
diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
index 3d25597d2af90..3ad6d3bd4aab5 100644
--- a/packages/block-editor/src/components/list-view/style.scss
+++ b/packages/block-editor/src/components/list-view/style.scss
@@ -217,20 +217,6 @@
 		position: relative;
 		white-space: nowrap;
 
-		&.is-dropping-before::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition:
-				border-color 0.1s linear,
-				border-style 0.1s linear,
-				box-shadow 0.1s linear;
-			top: -2px;
-			right: 0;
-			left: 0;
-			border-top: 4px solid var(--wp-admin-theme-color);
-		}
-
 		.components-modal__content & {
 			padding-left: 0;
 			padding-right: 0;
@@ -272,7 +258,7 @@
 
 	&.is-visible .block-editor-list-view-block-contents {
 		opacity: 1;
-		@include edit-post__fade-in-animation;
+		@include animation__fade-in;
 	}
 
 	.block-editor-block-icon {
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 732b8dbf2c089..46ddb2b70a113 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -125,6 +125,7 @@ export function RichTextWrapper(
 	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
 	const blockBindings = context[ blockBindingsKey ];
 	const blockContext = useContext( BlockContext );
+	const registry = useRegistry();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -164,7 +165,7 @@ export function RichTextWrapper(
 		isBlockSelected,
 	] );
 
-	const { disableBoundBlock, bindingsPlaceholder } = useSelect(
+	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
 			if (
 				! blockBindings?.[ identifier ] ||
@@ -178,30 +179,70 @@ export function RichTextWrapper(
 			const blockBindingsSource = getBlockBindingsSource(
 				relatedBinding.source
 			);
+			const blockBindingsContext = {};
+			if ( blockBindingsSource?.usesContext?.length ) {
+				for ( const key of blockBindingsSource.usesContext ) {
+					blockBindingsContext[ key ] = blockContext[ key ];
+				}
+			}
 
 			const _disableBoundBlock =
 				! blockBindingsSource?.canUserEditValue?.( {
 					select,
-					context: blockContext,
+					context: blockBindingsContext,
 					args: relatedBinding.args,
 				} );
 
+			// Don't modify placeholders if value is not empty.
+			if ( adjustedValue.length > 0 ) {
+				return {
+					disableBoundBlock: _disableBoundBlock,
+					// Null values will make them fall back to the default behavior.
+					bindingsPlaceholder: null,
+					bindingsLabel: null,
+				};
+			}
+
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+				registry,
+				context: blockBindingsContext,
+			} );
+			const bindingKey =
+				fieldsList?.[ relatedBinding?.args?.key ]?.label ??
+				blockBindingsSource?.label;
+
 			const _bindingsPlaceholder = _disableBoundBlock
+				? bindingKey
+				: sprintf(
+						/* translators: %s: connected field label or source label */
+						__( 'Add %s' ),
+						bindingKey
+				  );
+			const _bindingsLabel = _disableBoundBlock
 				? relatedBinding?.args?.key || blockBindingsSource?.label
 				: sprintf(
 						/* translators: %s: source label or key */
-						__( 'Add %s' ),
+						__( 'Empty %s; start writing to edit its value' ),
 						relatedBinding?.args?.key || blockBindingsSource?.label
 				  );
 
 			return {
 				disableBoundBlock: _disableBoundBlock,
 				bindingsPlaceholder:
-					( ! adjustedValue || adjustedValue.length === 0 ) &&
-					_bindingsPlaceholder,
+					blockAttributes?.placeholder || _bindingsPlaceholder,
+				bindingsLabel: _bindingsLabel,
 			};
 		},
-		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
+		[
+			blockBindings,
+			identifier,
+			blockName,
+			blockContext,
+			registry,
+			adjustedValue,
+		]
 	);
 
 	const shouldDisableEditing = readOnly || disableBoundBlock;
@@ -371,7 +412,6 @@ export function RichTextWrapper(
 		element.focus();
 	}
 
-	const registry = useRegistry();
 	const TagName = tagName;
 	return (
 		<>
@@ -406,7 +446,7 @@ export function RichTextWrapper(
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
 				aria-label={
-					bindingsPlaceholder || props[ 'aria-label' ] || placeholder
+					bindingsLabel || props[ 'aria-label' ] || placeholder
 				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
diff --git a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
index 22191b4e1a8de..a8440bb5be8ca 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/test/utils.js
@@ -378,41 +378,34 @@ describe( 'getInitialView', () => {
 				VIEWS.custom
 			);
 		} );
-	} );
-
-	describe( 'Single side view', () => {
-		it( 'should return single side when only single side supported', () => {
+		it( 'should return custom view even if only single side supported', () => {
 			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
+				VIEWS.custom
+			);
+			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
+				VIEWS.custom
+			);
+			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
+				VIEWS.custom
 			);
 		} );
+	} );
 
+	describe( 'Single side view', () => {
 		it( 'should return single side when only single side supported and no value defined', () => {
 			expect( getInitialView( {}, [ 'top' ] ) ).toBe( VIEWS.top );
 		} );
 
-		it( 'should return single side when only single side supported and all values defined', () => {
+		it( 'should return single side when only single side supported and has only axial sides', () => {
 			expect(
-				getInitialView(
-					{ top: '1em', right: '2em', bottom: '1em', left: '2em' },
-					[ 'top' ]
-				)
+				getInitialView( { top: '1em' }, [ 'horizontal', 'vertical' ] )
 			).toBe( VIEWS.top );
-		} );
-
-		it( 'should return single side view when only one side is supported', () => {
-			expect( getInitialView( { top: '1em' }, [ 'top' ] ) ).toBe(
-				VIEWS.top
-			);
-			expect( getInitialView( { right: '1em' }, [ 'right' ] ) ).toBe(
-				VIEWS.right
-			);
-			expect( getInitialView( { bottom: '1em' }, [ 'bottom' ] ) ).toBe(
-				VIEWS.bottom
-			);
-			expect( getInitialView( { left: '1em' }, [ 'left' ] ) ).toBe(
-				VIEWS.left
-			);
+			expect(
+				getInitialView( { left: '4em' }, [ 'horizontal', 'vertical' ] )
+			).toBe( VIEWS.left );
 		} );
 	} );
 } );
diff --git a/packages/block-editor/src/components/spacing-sizes-control/utils.js b/packages/block-editor/src/components/spacing-sizes-control/utils.js
index df2da0d93d060..046bee98761bf 100644
--- a/packages/block-editor/src/components/spacing-sizes-control/utils.js
+++ b/packages/block-editor/src/components/spacing-sizes-control/utils.js
@@ -363,11 +363,10 @@ export function getInitialView( values = {}, sides ) {
 		top === bottom && left === right && ( !! top || !! left );
 	const hasNoValuesAndBalancedSides =
 		! sideValues.length && hasBalancedSidesSupport( sides );
-
-	// Only single side supported and no value defined.
-	if ( sides?.length === 1 ) {
-		return sides[ 0 ];
-	}
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
 	if (
 		hasAxisSupport( sides ) &&
@@ -376,6 +375,24 @@ export function getInitialView( values = {}, sides ) {
 		return VIEWS.axial;
 	}
 
+	// Only axial sides are supported and single value defined.
+	// - Ensure the side returned is the first side that has a value.
+	if ( hasOnlyAxialSides && sideValues.length === 1 ) {
+		let side;
+
+		Object.entries( values ).some( ( [ key, value ] ) => {
+			side = key;
+			return value !== undefined;
+		} );
+
+		return side;
+	}
+
+	// Only single side supported and no value defined.
+	if ( sides?.length === 1 && ! sideValues.length ) {
+		return sides[ 0 ];
+	}
+
 	// Default to the Custom (separated sides) view.
 	return VIEWS.custom;
 }
diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js
index 4ec777a911cc7..53fab037ba368 100644
--- a/packages/block-editor/src/components/tool-selector/index.js
+++ b/packages/block-editor/src/components/tool-selector/index.js
@@ -18,6 +18,7 @@ import { Icon, edit as editIcon } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const selectIcon = (
 	<SVG
@@ -35,7 +36,9 @@ function ToolSelector( props, ref ) {
 		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return (
 		<Dropdown
@@ -45,7 +48,7 @@ function ToolSelector( props, ref ) {
 					__next40pxDefaultSize={ false }
 					{ ...props }
 					ref={ ref }
-					icon={ mode === 'navigation' ? selectIcon : editIcon }
+					icon={ mode === 'navigation' ? editIcon : selectIcon }
 					aria-expanded={ isOpen }
 					aria-haspopup="true"
 					onClick={ onToggle }
@@ -56,7 +59,11 @@ function ToolSelector( props, ref ) {
 			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
-					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>
+					<NavigableMenu
+						className="block-editor-tool-selector__menu"
+						role="menu"
+						aria-label={ __( 'Tools' ) }
+					>
 						<MenuItemsChoice
 							value={
 								mode === 'navigation' ? 'navigation' : 'edit'
@@ -67,19 +74,23 @@ function ToolSelector( props, ref ) {
 									value: 'edit',
 									label: (
 										<>
-											<Icon icon={ editIcon } />
-											{ __( 'Edit' ) }
+											{ selectIcon }
+											{ __( 'Design' ) }
 										</>
 									),
+									info: __(
+										'Full control over layout and styling.'
+									),
 								},
 								{
 									value: 'navigation',
 									label: (
 										<>
-											{ selectIcon }
-											{ __( 'Select' ) }
+											<Icon icon={ editIcon } />
+											{ __( 'Edit' ) }
 										</>
 									),
+									info: __( 'Focus on content.' ),
 								},
 							] }
 						/>
diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss
index 03774fe0f6b9d..07ca91d346d90 100644
--- a/packages/block-editor/src/components/tool-selector/style.scss
+++ b/packages/block-editor/src/components/tool-selector/style.scss
@@ -8,3 +8,8 @@
 	color: $gray-700;
 	min-width: 280px;
 }
+
+.block-editor-tool-selector__menu .components-menu-item__info {
+	margin-left: $grid-unit-30 + $grid-unit-15; // icon size + margin
+	text-align: left;
+}
diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
index 9a5c589a44a04..25c033e88749b 100644
--- a/packages/block-editor/src/components/url-input/index.js
+++ b/packages/block-editor/src/components/url-input/index.js
@@ -12,6 +12,7 @@ import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
 import {
 	BaseControl,
 	Button,
+	__experimentalInputControl as InputControl,
 	Spinner,
 	withSpokenMessages,
 	Popover,
@@ -234,8 +235,8 @@ class URLInput extends Component {
 		this.suggestionsRequest = request;
 	}
 
-	onChange( event ) {
-		this.props.onChange( event.target.value );
+	onChange( newValue ) {
+		this.props.onChange( newValue );
 	}
 
 	onFocus() {
@@ -448,7 +449,6 @@ class URLInput extends Component {
 			id: inputId,
 			value,
 			required: true,
-			className: 'block-editor-url-input__input',
 			type: 'text',
 			onChange: this.onChange,
 			onFocus: this.onFocus,
@@ -464,6 +464,7 @@ class URLInput extends Component {
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
 					: undefined,
 			ref: this.inputRef,
+			suffix: this.props.suffix,
 		};
 
 		if ( renderControl ) {
@@ -472,7 +473,7 @@ class URLInput extends Component {
 
 		return (
 			<BaseControl __nextHasNoMarginBottom { ...controlProps }>
-				<input { ...inputProps } />
+				<InputControl { ...inputProps } __next40pxDefaultSize />
 				{ loading && <Spinner /> }
 			</BaseControl>
 		);
diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss
index 5afb22269765e..155a594bae5f2 100644
--- a/packages/block-editor/src/components/url-input/style.scss
+++ b/packages/block-editor/src/components/url-input/style.scss
@@ -9,33 +9,14 @@ $input-size: 300px;
 	position: relative;
 	padding: 1px;
 
-	input[type="text"] {
-		width: 100%;
-		@include break-small() {
-			width: $input-size;
-		}
-		padding: $input-padding;
-		margin-left: 0;
-		margin-right: 0;
-
-		/* Fonts smaller than 16px causes mobile safari to zoom. */
-		font-size: $mobile-text-min-font-size;
-		@include break-small {
-			font-size: $default-font-size;
-		}
-
-		&::-ms-clear {
-			display: none;
-		}
+	@include break-small() {
+		min-width: $input-size;
+		width: auto;
 	}
 
 	&.is-full-width {
 		width: 100%;
 
-		.block-editor-url-input__input[type="text"] {
-			width: 100%;
-		}
-
 		&__suggestions {
 			width: 100%;
 		}
@@ -49,10 +30,6 @@ $input-size: 300px;
 	}
 }
 
-.block-editor-url-input__input[type="text"] {
-	@include input-control;
-}
-
 // Suggestions
 .block-editor-url-input__suggestions {
 	max-height: 200px;
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 8a09999ecdff3..c88ec4e537892 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -16,7 +16,6 @@ import {
 	plus as add,
 	group,
 	ungroup,
-	moveTo as move,
 } from '@wordpress/icons';
 
 /**
@@ -127,59 +126,6 @@ export const useTransformCommands = () => {
 	return { isLoading: false, commands };
 };
 
-const useActionsCommands = () => {
-	const { clientIds } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds } = select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-
-		return {
-			clientIds: selectedBlockClientIds,
-		};
-	}, [] );
-
-	const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
-		useSelect( blockEditorStore );
-
-	const { setBlockMovingClientId, setNavigationMode, selectBlock } =
-		useDispatch( blockEditorStore );
-
-	if ( ! clientIds || clientIds.length < 1 ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-
-	const canMove =
-		canMoveBlocks( clientIds ) && getBlockCount( rootClientId ) !== 1;
-
-	const commands = [];
-
-	if ( canMove ) {
-		commands.push( {
-			name: 'move-to',
-			label: __( 'Move to' ),
-			callback: () => {
-				setNavigationMode( true );
-				selectBlock( clientIds[ 0 ] );
-				setBlockMovingClientId( clientIds[ 0 ] );
-			},
-			icon: move,
-		} );
-	}
-
-	return {
-		isLoading: false,
-		commands: commands.map( ( command ) => ( {
-			...command,
-			name: 'core/block-editor/action-' + command.name,
-			callback: ( { close } ) => {
-				command.callback();
-				close();
-			},
-		} ) ),
-	};
-};
-
 const useQuickActionsCommands = () => {
 	const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
 		const {
@@ -344,10 +290,6 @@ export const useBlockCommands = () => {
 		name: 'core/block-editor/blockTransforms',
 		hook: useTransformCommands,
 	} );
-	useCommandLoader( {
-		name: 'core/block-editor/blockActions',
-		hook: useActionsCommands,
-	} );
 	useCommandLoader( {
 		name: 'core/block-editor/blockQuickActions',
 		hook: useQuickActionsCommands,
diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index b321d7c8d2995..3788c7021fd66 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { focus, isFormElement } from '@wordpress/dom';
-import { TAB, ESCAPE } from '@wordpress/keycodes';
+import { TAB } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect, useMergeRefs } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
@@ -21,19 +21,9 @@ export default function useTabNav() {
 
 	const { hasMultiSelection, getSelectedBlockClientId, getBlockCount } =
 		useSelect( blockEditorStore );
-	const { setNavigationMode, setLastFocus } = unlock(
-		useDispatch( blockEditorStore )
-	);
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
+	const { setLastFocus } = unlock( useDispatch( blockEditorStore ) );
 	const { getLastFocus } = unlock( useSelect( blockEditorStore ) );
 
-	// Don't allow tabbing to this element in Navigation mode.
-	const focusCaptureTabIndex = ! isNavigationMode ? '0' : undefined;
-
 	// Reference that holds the a flag for enabling or disabling
 	// capturing on the focus capture elements.
 	const noCaptureRef = useRef();
@@ -56,8 +46,6 @@ export default function useTabNav() {
 					.focus();
 			}
 		} else {
-			setNavigationMode( true );
-
 			const canvasElement =
 				container.current.ownerDocument === event.target.ownerDocument
 					? container.current
@@ -82,7 +70,7 @@ export default function useTabNav() {
 	const before = (
 		<div
 			ref={ focusCaptureBeforeRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -90,7 +78,7 @@ export default function useTabNav() {
 	const after = (
 		<div
 			ref={ focusCaptureAfterRef }
-			tabIndex={ focusCaptureTabIndex }
+			tabIndex="0"
 			onFocus={ onFocusCapture }
 		/>
 	);
@@ -101,12 +89,6 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
-				event.preventDefault();
-				setNavigationMode( true );
-				return;
-			}
-
 			// In Edit mode, Tab should focus the first tabbable element after
 			// the content, which is normally the sidebar (with block controls)
 			// and Shift+Tab should focus the first tabbable element before the
@@ -119,20 +101,6 @@ export default function useTabNav() {
 
 			const isShift = event.shiftKey;
 			const direction = isShift ? 'findPrevious' : 'findNext';
-
-			if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
-				// Preserve the behaviour of entering navigation mode when
-				// tabbing into the content without a block selection.
-				// `onFocusCapture` already did this previously, but we need to
-				// do it again here because after clearing block selection,
-				// focus land on the writing flow container and pressing Tab
-				// will no longer send focus through the focus capture element.
-				if ( event.target === node ) {
-					setNavigationMode( true );
-				}
-				return;
-			}
-
 			const nextTabbable = focus.tabbable[ direction ]( event.target );
 
 			// We want to constrain the tabbing to the block and its child blocks.
diff --git a/packages/block-editor/src/content.scss b/packages/block-editor/src/content.scss
index 36d428dca6b76..1ef4e118fb1bb 100644
--- a/packages/block-editor/src/content.scss
+++ b/packages/block-editor/src/content.scss
@@ -8,7 +8,6 @@
 @import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/iframe/content.scss";
-@import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";
 @import "./components/plain-text/content.scss";
 @import "./components/rich-text/content.scss";
diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
index be632cd4db3a2..ea0d4cbb7fb5b 100644
--- a/packages/block-editor/src/hooks/block-bindings.js
+++ b/packages/block-editor/src/hooks/block-bindings.js
@@ -31,6 +31,8 @@ import { store as blockEditorStore } from '../store';
 
 const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
+const EMPTY_OBJECT = {};
+
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -59,7 +61,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								{ registeredSources[ name ].label }
 							</DropdownMenuV2.GroupLabel>
 						) }
-						{ Object.entries( fields ).map( ( [ key, value ] ) => (
+						{ Object.entries( fields ).map( ( [ key, args ] ) => (
 							<DropdownMenuV2.RadioItem
 								key={ key }
 								onChange={ () =>
@@ -75,10 +77,10 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								checked={ key === currentKey }
 							>
 								<DropdownMenuV2.ItemLabel>
-									{ key }
+									{ args?.label }
 								</DropdownMenuV2.ItemLabel>
 								<DropdownMenuV2.ItemHelpText>
-									{ value }
+									{ args?.value }
 								</DropdownMenuV2.ItemHelpText>
 							</DropdownMenuV2.RadioItem>
 						) ) }
@@ -92,7 +94,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 	);
 }
 
-function BlockBindingsAttribute( { attribute, binding } ) {
+function BlockBindingsAttribute( { attribute, binding, fieldsList } ) {
 	const { source: sourceName, args } = binding || {};
 	const sourceProps =
 		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
@@ -108,14 +110,16 @@ function BlockBindingsAttribute( { attribute, binding } ) {
 				>
 					{ isSourceInvalid
 						? __( 'Invalid source' )
-						: args?.key || sourceProps?.label || sourceName }
+						: fieldsList?.[ sourceName ]?.[ args?.key ]?.label ||
+						  sourceProps?.label ||
+						  sourceName }
 				</Text>
 			) }
 		</VStack>
 	);
 }
 
-function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
+function ReadOnlyBlockBindingsPanelItems( { bindings, fieldsList } ) {
 	return (
 		<>
 			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
@@ -123,6 +127,7 @@ function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
 					<BlockBindingsAttribute
 						attribute={ attribute }
 						binding={ binding }
+						fieldsList={ fieldsList }
 					/>
 				</Item>
 			) ) }
@@ -162,6 +167,7 @@ function EditableBlockBindingsPanelItems( {
 									<BlockBindingsAttribute
 										attribute={ attribute }
 										binding={ binding }
+										fieldsList={ fieldsList }
 									/>
 								</Item>
 							}
@@ -182,11 +188,60 @@ function EditableBlockBindingsPanelItems( {
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
-	const { bindings } = metadata || {};
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	// `useSelect` is used purposely here to ensure `getFieldsList`
+	// is updated whenever there are updates in block context.
+	// `source.getFieldsList` may also call a selector via `registry.select`.
+	const _fieldsList = {};
+	const { fieldsList, canUpdateBlockBindings } = useSelect(
+		( select ) => {
+			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+				return EMPTY_OBJECT;
+			}
+			const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+			const registeredSources = getBlockBindingsSources();
+			Object.entries( registeredSources ).forEach(
+				( [ sourceName, { getFieldsList, usesContext } ] ) => {
+					if ( getFieldsList ) {
+						// Populate context.
+						const context = {};
+						if ( usesContext?.length ) {
+							for ( const key of usesContext ) {
+								context[ key ] = blockContext[ key ];
+							}
+						}
+						const sourceList = getFieldsList( {
+							registry,
+							context,
+						} );
+						// Only add source if the list is not empty.
+						if ( Object.keys( sourceList || {} ).length ) {
+							_fieldsList[ sourceName ] = { ...sourceList };
+						}
+					}
+				}
+			);
+			return {
+				fieldsList:
+					Object.values( _fieldsList ).length > 0
+						? _fieldsList
+						: EMPTY_OBJECT,
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+			};
+		},
+		[ blockContext, bindableAttributes, registry ]
+	);
+	// Return early if there are no bindable attributes.
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		return null;
+	}
+	// Filter bindings to only show bindable attributes and remove pattern overrides.
+	const { bindings } = metadata || {};
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
@@ -197,48 +252,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 		}
 	} );
 
-	const { canUpdateBlockBindings } = useSelect( ( select ) => {
-		return {
-			canUpdateBlockBindings:
-				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
-		};
-	}, [] );
-
-	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
-		return null;
-	}
-
-	const fieldsList = {};
-	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
-	const registeredSources = getBlockBindingsSources();
-	Object.entries( registeredSources ).forEach(
-		( [ sourceName, { getFieldsList, usesContext } ] ) => {
-			if ( getFieldsList ) {
-				// Populate context.
-				const context = {};
-				if ( usesContext?.length ) {
-					for ( const key of usesContext ) {
-						context[ key ] = blockContext[ key ];
-					}
-				}
-				const sourceList = getFieldsList( {
-					registry,
-					context,
-				} );
-				// Only add source if the list is not empty.
-				if ( sourceList ) {
-					fieldsList[ sourceName ] = { ...sourceList };
-				}
-			}
-		}
-	);
-	// Remove empty sources.
-	Object.entries( fieldsList ).forEach( ( [ key, value ] ) => {
-		if ( ! Object.keys( value ).length ) {
-			delete fieldsList[ key ];
-		}
-	} );
-
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly =
 		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
@@ -261,6 +274,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					{ readOnly ? (
 						<ReadOnlyBlockBindingsPanelItems
 							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
 						/>
 					) : (
 						<EditableBlockBindingsPanelItems
diff --git a/packages/block-editor/src/hooks/block-hooks.js b/packages/block-editor/src/hooks/block-hooks.js
index b1fab1b124f8d..04a2313b629ba 100644
--- a/packages/block-editor/src/hooks/block-hooks.js
+++ b/packages/block-editor/src/hooks/block-hooks.js
@@ -3,18 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment, useMemo } from '@wordpress/element';
-import {
-	__experimentalHStack as HStack,
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { BlockIcon, InspectorControls } from '../components';
+import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
@@ -204,14 +200,7 @@ function BlockHooksControlPure( {
 										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
-										label={
-											<HStack justify="flex-start">
-												<BlockIcon
-													icon={ block.icon }
-												/>
-												<span>{ block.title }</span>
-											</HStack>
-										}
+										label={ block.title }
 										onChange={ () => {
 											if ( ! checked ) {
 												// Create and insert block.
diff --git a/packages/block-editor/src/hooks/block-hooks.scss b/packages/block-editor/src/hooks/block-hooks.scss
index c8f2027483ccf..03cabd638d868 100644
--- a/packages/block-editor/src/hooks/block-hooks.scss
+++ b/packages/block-editor/src/hooks/block-hooks.scss
@@ -1,13 +1,4 @@
 .block-editor-hooks__block-hooks {
-	/**
-	 * Since we're displaying the block icon alongside the block name,
-	 * we need to right-align the toggle.
-	 */
-	.components-toggle-control .components-h-stack {
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
-		flex-direction: row-reverse;
-	}
-
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index e1ebf5fda6b8e..9f9234ad47d10 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -103,11 +103,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const { name, clientId } = props;
-		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
-		const hasPatternOverridesDefaultBinding =
-			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
-				?.source === 'core/pattern-overrides';
+		const { name, clientId, context, setAttributes } = props;
 		const blockBindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
@@ -121,6 +117,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// used purposely here to ensure `boundAttributes` is updated whenever
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
+		const updatedContext = { ...context };
 		const boundAttributes = useSelect( () => {
 			if ( ! blockBindings ) {
 				return;
@@ -139,6 +136,11 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					continue;
 				}
 
+				// Populate context.
+				for ( const key of source.usesContext || [] ) {
+					updatedContext[ key ] = blockContext[ key ];
+				}
+
 				blockBindingsBySource.set( source, {
 					...blockBindingsBySource.get( source ),
 					[ attributeName ]: {
@@ -149,27 +151,17 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 
 			if ( blockBindingsBySource.size ) {
 				for ( const [ source, bindings ] of blockBindingsBySource ) {
-					// Populate context.
-					const context = {};
-
-					if ( source.usesContext?.length ) {
-						for ( const key of source.usesContext ) {
-							context[ key ] = blockContext[ key ];
-						}
-					}
-
 					// Get values in batch if the source supports it.
 					let values = {};
 					if ( ! source.getValues ) {
 						Object.keys( bindings ).forEach( ( attr ) => {
-							// Default to the `key` or the source label when `getValues` doesn't exist
-							values[ attr ] =
-								bindings[ attr ].args?.key || source.label;
+							// Default to the the source label when `getValues` doesn't exist.
+							values[ attr ] = source.label;
 						} );
 					} else {
 						values = source.getValues( {
 							registry,
-							context,
+							context: updatedContext,
 							clientId,
 							bindings,
 						} );
@@ -191,9 +183,19 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			}
 
 			return attributes;
-		}, [ blockBindings, name, clientId, blockContext, registry, sources ] );
-
-		const { setAttributes } = props;
+		}, [
+			blockBindings,
+			name,
+			clientId,
+			updatedContext,
+			registry,
+			sources,
+		] );
+
+		const hasParentPattern = !! updatedContext[ 'pattern/overrides' ];
+		const hasPatternOverridesDefaultBinding =
+			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
+				?.source === 'core/pattern-overrides';
 
 		const _setAttributes = useCallback(
 			( nextAttributes ) => {
@@ -237,18 +239,9 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 							source,
 							bindings,
 						] of blockBindingsBySource ) {
-							// Populate context.
-							const context = {};
-
-							if ( source.usesContext?.length ) {
-								for ( const key of source.usesContext ) {
-									context[ key ] = blockContext[ key ];
-								}
-							}
-
 							source.setValues( {
 								registry,
-								context,
+								context: updatedContext,
 								clientId,
 								bindings,
 							} );
@@ -278,7 +271,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				blockBindings,
 				name,
 				clientId,
-				blockContext,
+				updatedContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
@@ -292,6 +285,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
 					setAttributes={ _setAttributes }
+					context={ updatedContext }
 				/>
 			</>
 		);
diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js
index d7e21ec1be057..2a1b43060c00a 100644
--- a/packages/block-editor/src/hooks/use-zoom-out.js
+++ b/packages/block-editor/src/hooks/use-zoom-out.js
@@ -8,46 +8,40 @@ import { useEffect, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 /**
- * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ * A hook used to set the zoomed out view, invoking the hook sets the mode.
  *
- * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ * @param {boolean} zoomOut If we should zoom out or not.
  */
 export function useZoomOut( zoomOut = true ) {
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+	const { setZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+	const { isZoomOut } = unlock( useSelect( blockEditorStore ) );
 
-	const originalEditingModeRef = useRef( null );
-	const mode = __unstableGetEditorMode();
+	const originalIsZoomOutRef = useRef( null );
 
 	useEffect( () => {
 		// Only set this on mount so we know what to return to when we unmount.
-		if ( ! originalEditingModeRef.current ) {
-			originalEditingModeRef.current = mode;
+		if ( ! originalIsZoomOutRef.current ) {
+			originalIsZoomOutRef.current = isZoomOut();
 		}
 
-		return () => {
-			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if (
-				__unstableGetEditorMode() === 'zoom-out' &&
-				__unstableGetEditorMode() !== originalEditingModeRef.current
-			) {
-				__unstableSetEditorMode( originalEditingModeRef.current );
-			}
-		};
-	}, [] );
-
-	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
-	useEffect( () => {
-		if ( zoomOut && mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
+		// The effect opens the zoom-out view if we want it open and the canvas is not currently zoomed-out.
+		if ( zoomOut && isZoomOut() === false ) {
+			setZoomLevel( 50 );
 		} else if (
 			! zoomOut &&
-			__unstableGetEditorMode() === 'zoom-out' &&
-			originalEditingModeRef.current !== mode
+			isZoomOut() &&
+			originalIsZoomOutRef.current !== isZoomOut()
 		) {
-			__unstableSetEditorMode( originalEditingModeRef.current );
+			setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
 		}
-	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
+
+		return () => {
+			if ( isZoomOut() && isZoomOut() !== originalIsZoomOutRef.current ) {
+				setZoomLevel( originalIsZoomOutRef.current ? 50 : 100 );
+			}
+		};
+	}, [ isZoomOut, setZoomLevel, zoomOut ] );
 }
diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js
index e91f997ca6783..ee11838395ec5 100644
--- a/packages/block-editor/src/store/actions.js
+++ b/packages/block-editor/src/store/actions.js
@@ -1728,23 +1728,24 @@ export const __unstableSetEditorMode =
 	};
 
 /**
- * Action that enables or disables the block moving mode.
+ * Set the block moving client ID.
  *
- * @param {string|null} hasBlockMovingClientId Enable/Disable block moving mode.
+ * @deprecated
+ *
+ * @return {Object} Action object.
  */
-export const setBlockMovingClientId =
-	( hasBlockMovingClientId = null ) =>
-	( { dispatch } ) => {
-		dispatch( { type: 'SET_BLOCK_MOVING_MODE', hasBlockMovingClientId } );
-
-		if ( hasBlockMovingClientId ) {
-			speak(
-				__(
-					'Use the Tab key and Arrow keys to choose new block location. Use Left and Right Arrow keys to move between nesting levels. Once location is selected press Enter or Space to move the block.'
-				)
-			);
+export function setBlockMovingClientId() {
+	deprecated(
+		'wp.data.dispatch( "core/block-editor" ).setBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
 		}
+	);
+	return {
+		type: 'DO_NOTHING',
 	};
+}
 
 /**
  * Action that duplicates a list of blocks.
diff --git a/packages/block-editor/src/store/private-actions.js b/packages/block-editor/src/store/private-actions.js
index dc57d61fd6b76..441a07202c42a 100644
--- a/packages/block-editor/src/store/private-actions.js
+++ b/packages/block-editor/src/store/private-actions.js
@@ -383,3 +383,26 @@ export const modifyContentLockBlock =
 			focusModeToRevert
 		);
 	};
+
+/**
+ * Sets the zoom level.
+ *
+ * @param {number} zoom the new zoom level
+ * @return {Object} Action object.
+ */
+export function setZoomLevel( zoom = 100 ) {
+	return {
+		type: 'SET_ZOOM_LEVEL',
+		zoom,
+	};
+}
+
+/**
+ * Resets the Zoom state.
+ * @return {Object} Action object.
+ */
+export function resetZoomLevel() {
+	return {
+		type: 'RESET_ZOOM_LEVEL',
+	};
+}
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
index 01ad8f69febc9..a98c5af93c86a 100644
--- a/packages/block-editor/src/store/private-selectors.js
+++ b/packages/block-editor/src/store/private-selectors.js
@@ -15,6 +15,8 @@ import {
 	getBlockName,
 	getTemplateLock,
 	getClientIdsWithDescendants,
+	isNavigationMode,
+	getBlockRootClientId,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -115,6 +117,7 @@ export const getEnabledClientIdsTree = createSelector(
 		state.settings.templateLock,
 		state.blockListSettings,
 		state.editorMode,
+		getSectionRootClientId( state ),
 	]
 );
 
@@ -479,19 +482,74 @@ export const getContentLockingParent = createSelector(
 	( state, clientId ) => {
 		let current = clientId;
 		let result;
-		while ( ( current = state.blocks.parents.get( current ) ) ) {
-			if (
-				getBlockName( state, current ) === 'core/block' ||
-				getTemplateLock( state, current ) === 'contentOnly'
-			) {
+		while (
+			! result &&
+			( current = state.blocks.parents.get( current ) )
+		) {
+			if ( getTemplateLock( state, current ) === 'contentOnly' ) {
 				result = current;
 			}
 		}
 		return result;
 	},
-	( state ) => [ state.blocks.parents, state.blockListSettings ]
+	( state ) => [
+		state.blocks.parents,
+		state.blockListSettings,
+		state.settings.templateLock,
+	]
 );
 
+/**
+ * Retrieves the client ID of the parent section block.
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getParentSectionBlock = createSelector(
+	( state, clientId ) => {
+		let current = clientId;
+		let result;
+		while (
+			! result &&
+			( current = state.blocks.parents.get( current ) )
+		) {
+			if ( isSectionBlock( state, current ) ) {
+				result = current;
+			}
+		}
+		return result;
+	},
+	( state ) => [
+		state.blocks.parents,
+		state.blocks.order,
+		state.blockListSettings,
+		state.editorMode,
+		state.settings.templateLock,
+		state.blocks.byClientId,
+		getSectionRootClientId( state ),
+	]
+);
+
+/**
+ * Retrieves the client ID is a content locking parent
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {boolean} Whether the block is a content locking parent.
+ */
+export function isSectionBlock( state, clientId ) {
+	const sectionRootClientId = getSectionRootClientId( state );
+	const sectionClientIds = getBlockOrder( state, sectionRootClientId );
+	return (
+		getBlockName( state, clientId ) === 'core/block' ||
+		getTemplateLock( state, clientId ) === 'contentOnly' ||
+		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
+	);
+}
+
 /**
  * Retrieves the client ID of the block that is content locked but is
  * currently being temporarily edited as a non-locked block.
@@ -560,3 +618,83 @@ export function isZoomOutMode( state ) {
 export function getSectionRootClientId( state ) {
 	return state.settings?.[ sectionRootClientIdKey ];
 }
+
+/**
+ * Returns the zoom out state.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} The zoom out state.
+ */
+export function getZoomLevel( state ) {
+	return state.zoomLevel;
+}
+
+/**
+ * Returns whether the editor is considered zoomed out.
+ *
+ * @param {Object} state Global application state.
+ * @return {boolean} Whether the editor is zoomed.
+ */
+export function isZoomOut( state ) {
+	return getZoomLevel( state ) < 100;
+}
+
+/**
+ * Finds the closest block where the block is allowed to be inserted.
+ *
+ * @param {Object}            state    Editor state.
+ * @param {string[] | string} name     Block name or names.
+ * @param {string}            clientId Default insertion point.
+ *
+ * @return {string} clientID of the closest container when the block name can be inserted.
+ */
+export function getClosestAllowedInsertionPoint( state, name, clientId = '' ) {
+	const blockNames = Array.isArray( name ) ? name : [ name ];
+	const areBlockNamesAllowedInClientId = ( id ) =>
+		blockNames.every( ( currentName ) =>
+			canInsertBlockType( state, currentName, id )
+		);
+
+	// If we're trying to insert at the root level and it's not allowed
+	// Try the section root instead.
+	if ( ! clientId ) {
+		if ( areBlockNamesAllowedInClientId( clientId ) ) {
+			return clientId;
+		}
+
+		const sectionRootClientId = getSectionRootClientId( state );
+		if (
+			sectionRootClientId &&
+			areBlockNamesAllowedInClientId( sectionRootClientId )
+		) {
+			return sectionRootClientId;
+		}
+		return null;
+	}
+
+	// Traverse the block tree up until we find a place where we can insert.
+	let current = clientId;
+	while ( current !== null && ! areBlockNamesAllowedInClientId( current ) ) {
+		const parentClientId = getBlockRootClientId( state, current );
+		current = parentClientId;
+	}
+
+	return current;
+}
+
+export function getClosestAllowedInsertionPointForPattern(
+	state,
+	pattern,
+	clientId
+) {
+	const { allowedBlockTypes } = getSettings( state );
+	const isAllowed = checkAllowListRecursive(
+		getGrammar( pattern ),
+		allowedBlockTypes
+	);
+	if ( ! isAllowed ) {
+		return null;
+	}
+	const names = getGrammar( pattern ).map( ( { blockName: name } ) => name );
+	return getClosestAllowedInsertionPoint( state, names, clientId );
+}
diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
index cd4569c45e580..827a2141f44c1 100644
--- a/packages/block-editor/src/store/reducer.js
+++ b/packages/block-editor/src/store/reducer.js
@@ -1795,11 +1795,6 @@ export const blockListSettings = ( state = {}, action ) => {
  * @return {string} Updated state.
  */
 export function editorMode( state = 'edit', action ) {
-	// Let inserting block in navigation mode always trigger Edit mode.
-	if ( action.type === 'INSERT_BLOCKS' && state === 'navigation' ) {
-		return 'edit';
-	}
-
 	if ( action.type === 'SET_EDITOR_MODE' ) {
 		return action.mode;
 	}
@@ -1807,26 +1802,6 @@ export function editorMode( state = 'edit', action ) {
 	return state;
 }
 
-/**
- * Reducer returning whether the block moving mode is enabled or not.
- *
- * @param {string|null} state  Current state.
- * @param {Object}      action Dispatched action.
- *
- * @return {string|null} Updated state.
- */
-export function hasBlockMovingClientId( state = null, action ) {
-	if ( action.type === 'SET_BLOCK_MOVING_MODE' ) {
-		return action.hasBlockMovingClientId;
-	}
-
-	if ( action.type === 'SET_EDITOR_MODE' ) {
-		return null;
-	}
-
-	return state;
-}
-
 /**
  * Reducer return an updated state representing the most recent block attribute
  * update. The state is structured as an object where the keys represent the
@@ -2085,6 +2060,25 @@ export function hoveredBlockClientId( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting zoom out state.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function zoomLevel( state = 100, action ) {
+	switch ( action.type ) {
+		case 'SET_ZOOM_LEVEL':
+			return action.zoom;
+		case 'RESET_ZOOM_LEVEL':
+			return 100;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2104,7 +2098,6 @@ const combinedReducers = combineReducers( {
 	lastBlockAttributesChange,
 	lastFocus,
 	editorMode,
-	hasBlockMovingClientId,
 	expandedBlock,
 	highlightedBlock,
 	lastBlockInserted,
@@ -2118,6 +2111,7 @@ const combinedReducers = combineReducers( {
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
 	hoveredBlockClientId,
+	zoomLevel,
 } );
 
 function withAutomaticChangeReset( reducer ) {
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 30fdb76bdbe78..a73785edfefd1 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -21,7 +21,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
  * Internal dependencies
  */
 import {
-	withRootClientIdOptionKey,
+	isFiltered,
 	checkAllowListRecursive,
 	checkAllowList,
 	getAllPatternsDependants,
@@ -38,6 +38,8 @@ import {
 	getTemporarilyEditingAsBlocks,
 	getTemporarilyEditingFocusModeToRevert,
 	getSectionRootClientId,
+	isSectionBlock,
+	getParentSectionBlock,
 } from './private-selectors';
 
 /**
@@ -78,7 +80,9 @@ const EMPTY_ARRAY = [];
  */
 const EMPTY_SET = new Set();
 
-const EMPTY_OBJECT = {};
+const DEFAULT_INSERTER_OPTIONS = {
+	[ isFiltered ]: true,
+};
 
 /**
  * Returns a block's name given its client ID, or null if no block exists with
@@ -1582,6 +1586,11 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
+	const _isSectionBlock = !! isSectionBlock( state, rootClientId );
+	if ( _isSectionBlock ) {
+		return false;
+	}
+
 	if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
 		return false;
 	}
@@ -1733,6 +1742,11 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
+	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+	if ( isBlockWithinSection ) {
+		return false;
+	}
+
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 
@@ -1996,7 +2010,7 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createRegistrySelector( ( select ) =>
 	createSelector(
-		( state, rootClientId = null, options = EMPTY_OBJECT ) => {
+		( state, rootClientId = null, options = DEFAULT_INSERTER_OPTIONS ) => {
 			const buildReusableBlockInserterItem = ( reusableBlock ) => {
 				const icon = ! reusableBlock.wp_pattern_sync_status
 					? {
@@ -2044,56 +2058,7 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 				)
 				.map( buildBlockTypeInserterItem );
 
-			if ( options[ withRootClientIdOptionKey ] ) {
-				blockTypeInserterItems = blockTypeInserterItems.reduce(
-					( accumulator, item ) => {
-						item.rootClientId = rootClientId ?? '';
-
-						while (
-							! canInsertBlockTypeUnmemoized(
-								state,
-								item.name,
-								item.rootClientId
-							)
-						) {
-							if ( ! item.rootClientId ) {
-								let sectionRootClientId;
-								try {
-									sectionRootClientId =
-										getSectionRootClientId( state );
-								} catch ( e ) {}
-								if (
-									sectionRootClientId &&
-									canInsertBlockTypeUnmemoized(
-										state,
-										item.name,
-										sectionRootClientId
-									)
-								) {
-									item.rootClientId = sectionRootClientId;
-								} else {
-									delete item.rootClientId;
-								}
-								break;
-							} else {
-								const parentClientId = getBlockRootClientId(
-									state,
-									item.rootClientId
-								);
-								item.rootClientId = parentClientId;
-							}
-						}
-
-						// We could also add non insertable items and gray them out.
-						if ( item.hasOwnProperty( 'rootClientId' ) ) {
-							accumulator.push( item );
-						}
-
-						return accumulator;
-					},
-					[]
-				);
-			} else {
+			if ( options[ isFiltered ] !== false ) {
 				blockTypeInserterItems = blockTypeInserterItems.filter(
 					( blockType ) =>
 						canIncludeBlockTypeInInserter(
@@ -2102,6 +2067,17 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 							rootClientId
 						)
 				);
+			} else {
+				blockTypeInserterItems = blockTypeInserterItems.map(
+					( blockType ) => ( {
+						...blockType,
+						isAllowedInCurrentRoot: canIncludeBlockTypeInInserter(
+							state,
+							blockType,
+							rootClientId
+						),
+					} )
+				);
 			}
 
 			const items = blockTypeInserterItems.reduce(
@@ -2467,7 +2443,7 @@ export const __experimentalGetPatternsByBlockTypes = createRegistrySelector(
  * Determines the items that appear in the available pattern transforms list.
  *
  * For now we only handle blocks without InnerBlocks and take into account
- * the `__experimentalRole` property of blocks' attributes for the transformation.
+ * the `role` property of blocks' attributes for the transformation.
  *
  * We return the first set of possible eligible block patterns,
  * by checking the `blockTypes` property. We still have to recurse through
@@ -2489,7 +2465,7 @@ export const __experimentalGetPatternTransformItems = createRegistrySelector(
 				}
 				/**
 				 * For now we only handle blocks without InnerBlocks and take into account
-				 * the `__experimentalRole` property of blocks' attributes for the transformation.
+				 * the `role` property of blocks' attributes for the transformation.
 				 * Note that the blocks have been retrieved through `getBlock`, which doesn't
 				 * return the inner blocks of an inner block controller, so we still need
 				 * to check for this case too.
@@ -2674,12 +2650,17 @@ export function __unstableGetEditorMode( state ) {
 /**
  * Returns whether block moving mode is enabled.
  *
- * @param {Object} state Editor state.
- *
- * @return {string} Client Id of moving block.
+ * @deprecated
  */
-export function hasBlockMovingClientId( state ) {
-	return state.hasBlockMovingClientId;
+export function hasBlockMovingClientId() {
+	deprecated(
+		'wp.data.select( "core/block-editor" ).hasBlockMovingClientId',
+		{
+			since: '6.7',
+			hint: 'Block moving mode feature has been removed',
+		}
+	);
+	return false;
 }
 
 /**
@@ -2862,11 +2843,9 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
 		'__experimentalDisableBlockOverlay',
 		false
 	);
-	const shouldEnableIfUnselected =
-		editorMode === 'navigation' ||
-		( blockSupportDisable
-			? false
-			: areInnerBlocksControlled( state, clientId ) );
+	const shouldEnableIfUnselected = blockSupportDisable
+		? false
+		: areInnerBlocksControlled( state, clientId );
 
 	return (
 		shouldEnableIfUnselected &&
@@ -2886,6 +2865,14 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
 	return false;
 }
 
+function isWithinBlock( state, clientId, parentClientId ) {
+	let parent = state.blocks.parents.get( clientId );
+	while ( !! parent && parent !== parentClientId ) {
+		parent = state.blocks.parents.get( parent );
+	}
+	return parent === parentClientId;
+}
+
 /**
  * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
  */
@@ -2926,6 +2913,7 @@ export const getBlockEditingMode = createRegistrySelector(
 			if ( clientId === null ) {
 				clientId = '';
 			}
+
 			// In zoom-out mode, override the behavior set by
 			// __unstableSetBlockEditingMode to only allow editing the top-level
 			// sections.
@@ -2943,28 +2931,76 @@ export const getBlockEditingMode = createRegistrySelector(
 					state,
 					sectionRootClientId
 				);
-				if ( ! sectionsClientIds?.includes( clientId ) ) {
+
+				// Sections are always contentOnly.
+				if ( sectionsClientIds?.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				return 'disabled';
+			}
+
+			if ( editorMode === 'navigation' ) {
+				const sectionRootClientId = getSectionRootClientId( state );
+
+				// The root section is "default mode"
+				if ( clientId === sectionRootClientId ) {
+					return 'default';
+				}
+
+				// Sections should always be contentOnly in navigation mode.
+				const sectionsClientIds = getBlockOrder(
+					state,
+					sectionRootClientId
+				);
+				if ( sectionsClientIds.includes( clientId ) ) {
+					return 'contentOnly';
+				}
+
+				// Blocks outside sections should be disabled.
+				const isWithinSectionRoot = isWithinBlock(
+					state,
+					clientId,
+					sectionRootClientId
+				);
+				if ( ! isWithinSectionRoot ) {
 					return 'disabled';
 				}
+
+				// The rest of the blocks depend on whether they are content blocks or not.
+				// This "flattens" the sections tree.
+				const name = getBlockName( state, clientId );
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
+
+				return isContent ? 'contentOnly' : 'disabled';
 			}
 
+			// In normal mode, consider that an explicitely set editing mode takes over.
 			const blockEditingMode = state.blockEditingModes.get( clientId );
 			if ( blockEditingMode ) {
 				return blockEditingMode;
 			}
+
+			// In normal mode, top level is default mode.
 			if ( ! clientId ) {
 				return 'default';
 			}
+
 			const rootClientId = getBlockRootClientId( state, clientId );
 			const templateLock = getTemplateLock( state, rootClientId );
+			// If the parent of the block is contentOnly locked, check whether it's a content block.
 			if ( templateLock === 'contentOnly' ) {
 				const name = getBlockName( state, clientId );
-				const isContent =
-					select( blocksStore ).__experimentalHasContentRoleAttribute(
-						name
-					);
+				const { hasContentRoleAttribute } = unlock(
+					select( blocksStore )
+				);
+				const isContent = hasContentRoleAttribute( name );
 				return isContent ? 'contentOnly' : 'disabled';
 			}
+			// Otherwise, check if there's an ancestor that is contentOnly
 			const parentMode = getBlockEditingMode( state, rootClientId );
 			return parentMode === 'contentOnly' ? 'default' : parentMode;
 		}
diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js
index 45432b750bb9e..cbb75daa4baaa 100644
--- a/packages/block-editor/src/store/test/private-selectors.js
+++ b/packages/block-editor/src/store/test/private-selectors.js
@@ -124,10 +124,10 @@ describe( 'private selectors', () => {
 			blockEditingModes: new Map( [] ),
 		};
 
-		const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+		const hasContentRoleAttribute = jest.fn( () => false );
 		getBlockEditingMode.registry = {
 			select: jest.fn( () => ( {
-				__experimentalHasContentRoleAttribute,
+				hasContentRoleAttribute,
 			} ) ),
 		};
 
@@ -394,6 +394,10 @@ describe( 'private selectors', () => {
 					parents: new Map( [
 						[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
 					] ),
+					order: new Map( [
+						[ '6cf70164-9097-4460-bcbf-200560546988', [] ],
+						[ '', [ '6cf70164-9097-4460-bcbf-200560546988' ] ],
+					] ),
 				},
 				blockEditingModes: new Map(),
 			};
@@ -424,6 +428,21 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 						],
 					] ),
+
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[
+								'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+								'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
@@ -461,6 +480,21 @@ describe( 'private selectors', () => {
 							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 						],
 					] ),
+					order: new Map( [
+						[
+							'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+							[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f' ],
+						],
+						[
+							'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+							[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c' ],
+						],
+						[
+							'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+							[ '4c2b7140-fffd-44b4-b2a7-820c670a6514' ],
+						],
+						[ '', [ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ] ],
+					] ),
 				},
 				blockEditingModes: new Map( [
 					[ '', 'disabled' ],
diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js
index 85006621c4701..ebf23789fec31 100644
--- a/packages/block-editor/src/store/test/selectors.js
+++ b/packages/block-editor/src/store/test/selectors.js
@@ -15,6 +15,8 @@ import { select, dispatch } from '@wordpress/data';
  */
 import * as selectors from '../selectors';
 import { store } from '../';
+import { sectionRootClientIdKey } from '../private-keys';
+import { lock } from '../../lock-unlock';
 
 const {
 	getBlockName,
@@ -2694,6 +2696,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2711,6 +2714,7 @@ describe( 'selectors', () => {
 				blocks: {
 					byClientId: new Map(),
 					attributes: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {
@@ -2728,6 +2732,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2748,6 +2753,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2772,6 +2778,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2796,6 +2803,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2822,6 +2830,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {},
@@ -2848,6 +2857,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2876,6 +2886,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2904,6 +2915,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2932,6 +2944,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					block1: {
@@ -2960,6 +2973,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2976,6 +2990,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(),
 					attributes: new Map(),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {},
 				settings: {},
@@ -2992,7 +3007,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(
 						Object.entries( {
 							block1: { name: 'core/test-block-ancestor' },
-							block2: { name: 'core/block' },
+							block2: { name: 'core/block1' },
 						} )
 					),
 					attributes: new Map(
@@ -3006,6 +3021,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3023,6 +3042,37 @@ describe( 'selectors', () => {
 			).toBe( true );
 		} );
 
+		it( 'should prevent blocks from being inserted within sections', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(
+						Object.entries( {
+							block1: { name: 'core/block' }, // reusable blocks are always sections.
+						} )
+					),
+					attributes: new Map(
+						Object.entries( {
+							block1: {},
+						} )
+					),
+					parents: new Map(
+						Object.entries( {
+							block1: '',
+						} )
+					),
+					order: new Map( [ [ '', [ 'block1' ] ] ] ),
+				},
+				blockListSettings: {
+					block1: {},
+				},
+				settings: {},
+				blockEditingModes: new Map(),
+			};
+			expect(
+				canInsertBlockType( state, 'core/test-block-a', 'block1' )
+			).toBe( false );
+		} );
+
 		it( 'should allow blocks to be inserted if both parent and ancestor restrictions are met', () => {
 			const state = {
 				blocks: {
@@ -3046,6 +3096,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3086,6 +3141,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3126,6 +3186,11 @@ describe( 'selectors', () => {
 							block3: 'block2',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+						[ 'block2', [ 'block3' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3159,11 +3224,14 @@ describe( 'selectors', () => {
 							block2: {},
 						} )
 					),
-					parents: new Map(
-						Object.entries( {
-							block2: 'block1',
-						} )
-					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
+					parents: new Map( [
+						[ 'block2', 'block1' ],
+						[ 'block1', '' ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3203,6 +3271,10 @@ describe( 'selectors', () => {
 							block2: 'block1',
 						} )
 					),
+					order: new Map( [
+						[ '', [ 'block1' ] ],
+						[ 'block1', [ 'block2' ] ],
+					] ),
 				},
 				blockListSettings: {
 					block1: {},
@@ -3240,6 +3312,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -3273,6 +3346,7 @@ describe( 'selectors', () => {
 						} )
 					),
 					parents: new Map(),
+					order: new Map(),
 				},
 				blockListSettings: {
 					1: {
@@ -4310,12 +4384,28 @@ describe( 'getBlockEditingMode', () => {
 		settings: {},
 		blocks: {
 			byClientId: new Map( [
-				[ '6cf70164-9097-4460-bcbf-200560546988', {} ], // Header
-				[ 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', {} ], // Group
-				[ 'b26fc763-417d-4f01-b81c-2ec61e14a972', {} ], // |  Post Title
-				[ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', {} ], // |  Post Content
-				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', {} ], // | |  Paragraph
-				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', {} ], // | |  Paragraph
+				[
+					'6cf70164-9097-4460-bcbf-200560546988',
+					{ name: 'core/template-part' },
+				], // Header
+				[
+					'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337',
+					{ name: 'core/group' },
+				], // Group
+				[
+					'b26fc763-417d-4f01-b81c-2ec61e14a972',
+					{ name: 'core/post-title' },
+				], // |  Post Title
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+					{ name: 'core/group' },
+				], // |  Group
+				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', { name: 'core/p' } ], // | |  Paragraph
+				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', { name: 'core/p' } ], // | |  Paragraph
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					{ name: 'core/group' },
+				], // | | Group
 			] ),
 			order: new Map( [
 				[
@@ -4339,10 +4429,12 @@ describe( 'getBlockEditingMode', () => {
 					[
 						'b3247f75-fd94-4fef-97f9-5bfd162cc416',
 						'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
+						'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
 					],
 				],
 				[ 'b3247f75-fd94-4fef-97f9-5bfd162cc416', [] ],
 				[ 'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c', [] ],
+				[ '9b9c5c3f-2e46-4f02-9e14-9fed515b958s', [] ],
 			] ),
 			parents: new Map( [
 				[ '6cf70164-9097-4460-bcbf-200560546988', '' ],
@@ -4363,6 +4455,10 @@ describe( 'getBlockEditingMode', () => {
 					'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c',
 					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
 				],
+				[
+					'9b9c5c3f-2e46-4f02-9e14-9fed515b958s',
+					'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f',
+				],
 			] ),
 		},
 		blockListSettings: {
@@ -4372,11 +4468,22 @@ describe( 'getBlockEditingMode', () => {
 		blockEditingModes: new Map( [] ),
 	};
 
-	const __experimentalHasContentRoleAttribute = jest.fn( () => false );
+	const navigationModeStateWithRootSection = {
+		...baseState,
+		editorMode: 'navigation',
+		settings: {
+			[ sectionRootClientIdKey ]: 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337', // The group is the "main" container
+		},
+	};
+
+	const hasContentRoleAttribute = jest.fn( () => false );
+
+	const fauxPrivateAPIs = {};
+
+	lock( fauxPrivateAPIs, { hasContentRoleAttribute } );
+
 	getBlockEditingMode.registry = {
-		select: jest.fn( () => ( {
-			__experimentalHasContentRoleAttribute,
-		} ) ),
+		select: jest.fn( () => fauxPrivateAPIs ),
 	};
 
 	it( 'should return default by default', () => {
@@ -4480,7 +4587,7 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( false );
+		hasContentRoleAttribute.mockReturnValueOnce( false );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'disabled' );
@@ -4496,9 +4603,69 @@ describe( 'getBlockEditingMode', () => {
 				},
 			},
 		};
-		__experimentalHasContentRoleAttribute.mockReturnValueOnce( true );
+		hasContentRoleAttribute.mockReturnValueOnce( true );
 		expect(
 			getBlockEditingMode( state, 'b3247f75-fd94-4fef-97f9-5bfd162cc416' )
 		).toBe( 'contentOnly' );
 	} );
+
+	it( 'in navigation mode, the root section container is default', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337'
+			)
+		).toBe( 'default' );
+	} );
+
+	it( 'in navigation mode, anything outside the section container is disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'6cf70164-9097-4460-bcbf-200560546988'
+			)
+		).toBe( 'disabled' );
+	} );
+
+	it( 'in navigation mode, sections are contentOnly', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b26fc763-417d-4f01-b81c-2ec61e14a972'
+			)
+		).toBe( 'contentOnly' );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fe9515b958f'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks with content attributes within sections are contentOnly', () => {
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'b3247f75-fd94-4fef-97f9-5bfd162cc416'
+			)
+		).toBe( 'contentOnly' );
+
+		hasContentRoleAttribute.mockReturnValueOnce( true );
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'e178812d-ce5e-48c7-a945-8ae4ffcbbb7c'
+			)
+		).toBe( 'contentOnly' );
+	} );
+
+	it( 'in navigation mode, blocks without content attributes within sections are disabled', () => {
+		expect(
+			getBlockEditingMode(
+				navigationModeStateWithRootSection,
+				'9b9c5c3f-2e46-4f02-9e14-9fed515b958s'
+			)
+		).toBe( 'disabled' );
+	} );
 } );
diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js
index b630912a5163d..9b83a8f74cf9a 100644
--- a/packages/block-editor/src/store/utils.js
+++ b/packages/block-editor/src/store/utils.js
@@ -10,9 +10,9 @@ import { parse as grammarParse } from '@wordpress/block-serialization-default-pa
 import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
+import { getSectionRootClientId } from './private-selectors';
 
-export const withRootClientIdOptionKey = Symbol( 'withRootClientId' );
-
+export const isFiltered = Symbol( 'isFiltered' );
 const parsedPatternCache = new WeakMap();
 const grammarMapCache = new WeakMap();
 
@@ -117,5 +117,7 @@ export function getInsertBlockTypeDependants( state, rootClientId ) {
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
 		state.blockEditingModes,
+		state.editorMode,
+		getSectionRootClientId( state ),
 	];
 }
diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index 3a68cc63c248e..efe92cea63d0f 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -293,7 +293,7 @@ describe( 'transformStyles', () => {
 
 		it( 'should ignore keyframes', () => {
 			const input = `
-			@keyframes edit-post__fade-in-animation {
+			@keyframes __wp-base-styles-fade-in {
 				from {
 					opacity: 0;
 				}
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
index 4ee3ebc7564b5..08accf8c36d9e 100644
--- a/packages/block-library/CHANGELOG.md
+++ b/packages/block-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.8.0 (2024-09-19)
+
 ## 9.7.0 (2024-09-05)
 
 ## 9.6.0 (2024-08-21)
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 1353ef24c77d8..aa9daf62dda63 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.7.0",
+	"version": "9.8.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
index bee2ff6d534a7..9b77efee23cce 100644
--- a/packages/block-library/src/audio/block.json
+++ b/packages/block-library/src/audio/block.json
@@ -10,24 +10,24 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "audio",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"autoplay": {
 			"type": "boolean",
diff --git a/packages/block-library/src/avatar/index.js b/packages/block-library/src/avatar/index.js
index d318450aec390..0b3ad9c62c4e3 100644
--- a/packages/block-library/src/avatar/index.js
+++ b/packages/block-library/src/avatar/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index d0f90b93467c9..2c1c05baa20dd 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -26,34 +26,34 @@
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a,button",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"text": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "a,button",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "target",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
 			"attribute": "rel",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"placeholder": {
 			"type": "string"
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index 460fbef92fdab..3609bdf9ab97c 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -2,11 +2,16 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/categories",
-	"title": "Categories List",
+	"title": "Terms List",
 	"category": "widgets",
-	"description": "Display a list of all categories.",
+	"description": "Display a list of all terms of a given taxonomy.",
+	"keywords": [ "categories" ],
 	"textdomain": "default",
 	"attributes": {
+		"taxonomy": {
+			"type": "string",
+			"default": "category"
+		},
 		"displayAsDropdown": {
 			"type": "boolean",
 			"default": false
@@ -29,7 +34,7 @@
 		},
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
index 48d505eeb75ae..8bd2769b0ec71 100644
--- a/packages/block-library/src/categories/edit.js
+++ b/packages/block-library/src/categories/edit.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	PanelBody,
 	Placeholder,
+	SelectControl,
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
@@ -20,7 +21,7 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
@@ -33,19 +34,33 @@ export default function CategoriesEdit( {
 		showEmpty,
 		label,
 		showLabel,
+		taxonomy: taxonomySlug,
 	},
 	setAttributes,
 	className,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
+
+	const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
+		'root',
+		'taxonomy'
+	);
+
+	const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public );
+
+	const taxonomy = taxonomies?.find( ( t ) => t.slug === taxonomySlug );
+
+	const isHierarchicalTaxonomy =
+		! isResolvingTaxonomies && taxonomy?.hierarchical;
+
 	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
-	if ( showOnlyTopLevel ) {
+	if ( isHierarchicalTaxonomy && showOnlyTopLevel ) {
 		query.parent = 0;
 	}
 
 	const { records: categories, isResolving } = useEntityRecords(
 		'taxonomy',
-		'category',
+		taxonomySlug,
 		query
 	);
 
@@ -66,7 +81,7 @@ export default function CategoriesEdit( {
 		! name ? __( '(Untitled)' ) : decodeEntities( name ).trim();
 
 	const renderCategoryList = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return categoriesList.map( ( category ) =>
 			renderCategoryListItem( category )
@@ -82,19 +97,21 @@ export default function CategoriesEdit( {
 					{ renderCategoryName( name ) }
 				</a>
 				{ showPostCounts && ` (${ count })` }
-				{ showHierarchy && !! childCategories.length && (
-					<ul className="children">
-						{ childCategories.map( ( childCategory ) =>
-							renderCategoryListItem( childCategory )
-						) }
-					</ul>
-				) }
+				{ isHierarchicalTaxonomy &&
+					showHierarchy &&
+					!! childCategories.length && (
+						<ul className="children">
+							{ childCategories.map( ( childCategory ) =>
+								renderCategoryListItem( childCategory )
+							) }
+						</ul>
+					) }
 			</li>
 		);
 	};
 
 	const renderCategoryDropdown = () => {
-		const parentId = showHierarchy ? 0 : null;
+		const parentId = isHierarchicalTaxonomy && showHierarchy ? 0 : null;
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
@@ -102,7 +119,7 @@ export default function CategoriesEdit( {
 					<RichText
 						className="wp-block-categories__label"
 						aria-label={ __( 'Label text' ) }
-						placeholder={ __( 'Categories' ) }
+						placeholder={ taxonomy.name }
 						withoutInteractiveFormatting
 						value={ label }
 						onChange={ ( html ) =>
@@ -111,11 +128,17 @@ export default function CategoriesEdit( {
 					/>
 				) : (
 					<VisuallyHidden as="label" htmlFor={ selectId }>
-						{ label ? label : __( 'Categories' ) }
+						{ label ? label : taxonomy.name }
 					</VisuallyHidden>
 				) }
 				<select id={ selectId }>
-					<option>{ __( 'Select Category' ) }</option>
+					<option>
+						{ sprintf(
+							/* translators: %s: taxonomy's singular name */
+							__( 'Select %s' ),
+							taxonomy.labels.singular_name
+						) }
+					</option>
 					{ categoriesList.map( ( category ) =>
 						renderCategoryDropdownItem( category, 0 )
 					) }
@@ -133,7 +156,8 @@ export default function CategoriesEdit( {
 				{ renderCategoryName( name ) }
 				{ showPostCounts && ` (${ count })` }
 			</option>,
-			showHierarchy &&
+			isHierarchicalTaxonomy &&
+				showHierarchy &&
 				!! childCategories.length &&
 				childCategories.map( ( childCategory ) =>
 					renderCategoryDropdownItem( childCategory, level + 1 )
@@ -161,6 +185,23 @@ export default function CategoriesEdit( {
 		<TagName { ...blockProps }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
+					{ Array.isArray( taxonomies ) && (
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ taxonomies.map( ( t ) => ( {
+								label: t.name,
+								value: t.slug,
+							} ) ) }
+							value={ taxonomySlug }
+							onChange={ ( selectedTaxonomy ) =>
+								setAttributes( {
+									taxonomy: selectedTaxonomy,
+								} )
+							}
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }
@@ -182,19 +223,21 @@ export default function CategoriesEdit( {
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					{ isHierarchicalTaxonomy && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show only top level terms' ) }
+							checked={ showOnlyTopLevel }
+							onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show only top level categories' ) }
-						checked={ showOnlyTopLevel }
-						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ __( 'Show empty categories' ) }
+						label={ __( 'Show empty terms' ) }
 						checked={ showEmpty }
 						onChange={ toggleAttribute( 'showEmpty' ) }
 					/>
-					{ ! showOnlyTopLevel && (
+					{ isHierarchicalTaxonomy && ! showOnlyTopLevel && (
 						<ToggleControl
 							__nextHasNoMarginBottom
 							label={ __( 'Show hierarchy' ) }
@@ -205,16 +248,12 @@ export default function CategoriesEdit( {
 				</PanelBody>
 			</InspectorControls>
 			{ isResolving && (
-				<Placeholder icon={ pin } label={ __( 'Categories' ) }>
+				<Placeholder icon={ pin } label={ __( 'Terms' ) }>
 					<Spinner />
 				</Placeholder>
 			) }
 			{ ! isResolving && categories?.length === 0 && (
-				<p>
-					{ __(
-						'Your site does not have any posts, so there is nothing to display here at the moment.'
-					) }
-				</p>
+				<p>{ taxonomy.labels.no_terms }</p>
 			) }
 			{ ! isResolving &&
 				categories?.length > 0 &&
diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js
index 8cdcad450862a..d30c55667d106 100644
--- a/packages/block-library/src/categories/index.js
+++ b/packages/block-library/src/categories/index.js
@@ -9,6 +9,7 @@ import { category as icon } from '@wordpress/icons';
 import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -18,6 +19,7 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
index 5c0cc63415cb7..e15f662bdfbb9 100644
--- a/packages/block-library/src/categories/index.php
+++ b/packages/block-library/src/categories/index.php
@@ -21,11 +21,14 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
+	$taxonomy = get_taxonomy( $attributes['taxonomy'] );
+
 	$args = array(
 		'echo'         => false,
 		'hierarchical' => ! empty( $attributes['showHierarchy'] ),
 		'orderby'      => 'name',
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
+		'taxonomy'     => $attributes['taxonomy'],
 		'title_li'     => '',
 		'hide_empty'   => empty( $attributes['showEmpty'] ),
 	);
@@ -36,13 +39,20 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
-		$args['show_option_none'] = __( 'Select Category' );
-		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
-		$default_label            = __( 'Categories' );
-		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
-		$items_markup             = wp_dropdown_categories( $args );
-		$type                     = 'dropdown';
+		$args['name']             = $taxonomy->query_var;
+		$args['value_field']      = 'slug';
+		$args['show_option_none'] = sprintf(
+			/* translators: %s: taxonomy's singular name */
+			__( 'Select %s' ),
+			$taxonomy->labels->singular_name
+		);
+
+		$show_label     = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label  = $taxonomy->label;
+		$label_text     = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
+		$items_markup   = wp_dropdown_categories( $args );
+		$type           = 'dropdown';
 
 		if ( ! is_admin() ) {
 			// Inject the dropdown script immediately after the select dropdown.
@@ -54,6 +64,8 @@ function render_block_core_categories( $attributes, $content, $block ) {
 			);
 		}
 	} else {
+		$args['show_option_none'] = $taxonomy->labels->no_terms;
+
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
@@ -92,8 +104,8 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	( function() {
 		var dropdown = document.getElementById( '<?php echo esc_js( $dropdown_id ); ?>' );
 		function onCatChange() {
-			if ( dropdown.options[ dropdown.selectedIndex ].value > 0 ) {
-				location.href = "<?php echo esc_url( home_url() ); ?>/?cat=" + dropdown.options[ dropdown.selectedIndex ].value;
+			if ( dropdown.options[ dropdown.selectedIndex ].value !== -1 ) {
+				location.href = "<?php echo esc_url( home_url() ); ?>/?" + dropdown.name + '=' + dropdown.options[ dropdown.selectedIndex ].value;
 			}
 		}
 		dropdown.onchange = onCatChange;
diff --git a/packages/block-library/src/categories/variations.js b/packages/block-library/src/categories/variations.js
new file mode 100644
index 0000000000000..94f3fb8efa6b9
--- /dev/null
+++ b/packages/block-library/src/categories/variations.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { category as icon } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'terms',
+		title: __( 'Terms List' ),
+		icon,
+		attributes: {
+			// We need to set an attribute here that will be set when inserting the block.
+			// We cannot leave this empty, as that would be interpreted as the default value,
+			// which is `category` -- for which we're defining a distinct variation below,
+			// for backwards compatibility reasons.
+			// The logical fallback is thus the only other built-in and public taxonomy: Tags.
+			taxonomy: 'post_tag',
+		},
+		isActive: ( blockAttributes ) =>
+			// This variation is used for any taxonomy other than `category`.
+			blockAttributes.taxonomy !== 'category',
+	},
+	{
+		name: 'categories',
+		title: __( 'Categories List' ),
+		description: __( 'Display a list of all categories.' ),
+		icon,
+		attributes: {
+			taxonomy: 'category',
+		},
+		isActive: [ 'taxonomy' ],
+		// The following is needed to prevent "Terms List" from showing up twice in the inserter
+		// (once for the block, once for the variation). Fortunately, it does not collide with
+		// `categories` being the default value of the `taxonomy` attribute.
+		isDefault: true,
+	},
+];
+
+export default variations;
diff --git a/packages/block-library/src/comment-author-name/index.js b/packages/block-library/src/comment-author-name/index.js
index 4d85bbebe047b..5bcb689656480 100644
--- a/packages/block-library/src/comment-author-name/index.js
+++ b/packages/block-library/src/comment-author-name/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-content/index.js b/packages/block-library/src/comment-content/index.js
index 130f1d3012555..aefcef75acf8a 100644
--- a/packages/block-library/src/comment-content/index.js
+++ b/packages/block-library/src/comment-content/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-date/index.js b/packages/block-library/src/comment-date/index.js
index fddae539acfa3..d95c0a958f9ed 100644
--- a/packages/block-library/src/comment-date/index.js
+++ b/packages/block-library/src/comment-date/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-edit-link/index.js b/packages/block-library/src/comment-edit-link/index.js
index 6639dda86a7a4..ffe8c98a75dfd 100644
--- a/packages/block-library/src/comment-edit-link/index.js
+++ b/packages/block-library/src/comment-edit-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comment-reply-link/index.js b/packages/block-library/src/comment-reply-link/index.js
index c04f8ce7b1bba..a8287f6b08ff3 100644
--- a/packages/block-library/src/comment-reply-link/index.js
+++ b/packages/block-library/src/comment-reply-link/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	icon,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 22e20bfa8dbf2..3f7ebe677328d 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Next Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 14a323df3a13a..0fd9519a56d30 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -37,7 +37,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 		$label .= $pagination_arrow;
 	}
 
-	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] );
+	$next_comments_link = get_next_comments_link( $label, $max_page, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 
diff --git a/packages/block-library/src/comments-pagination-numbers/index.js b/packages/block-library/src/comments-pagination-numbers/index.js
index 3fd903e2d9ef4..f769f54b4ac03 100644
--- a/packages/block-library/src/comments-pagination-numbers/index.js
+++ b/packages/block-library/src/comments-pagination-numbers/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index 0871b000c569d..eb5203af33c86 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -12,6 +12,11 @@
 			"type": "string"
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Comments Previous Page"
+		}
+	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/comments-pagination-previous/index.php b/packages/block-library/src/comments-pagination-previous/index.php
index b70a9f609da9f..ba9bef97ad34d 100644
--- a/packages/block-library/src/comments-pagination-previous/index.php
+++ b/packages/block-library/src/comments-pagination-previous/index.php
@@ -30,7 +30,7 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
 	$comment_vars           = build_comment_query_vars_from_block( $block );
-	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] );
+	$previous_comments_link = get_previous_comments_link( $label, $comment_vars['paged'] ?? null );
 
 	remove_filter( 'previous_comments_link_attributes', $filter_link_attributes );
 
diff --git a/packages/block-library/src/comments-title/index.js b/packages/block-library/src/comments-title/index.js
index 86bdab0dbccbf..69b8228eab892 100644
--- a/packages/block-library/src/comments-title/index.js
+++ b/packages/block-library/src/comments-title/index.js
@@ -18,6 +18,7 @@ export const settings = {
 	icon,
 	edit,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
index a42aafbab4b0b..5bfb63b0fa9e9 100644
--- a/packages/block-library/src/embed/block.json
+++ b/packages/block-library/src/embed/block.json
@@ -9,21 +9,21 @@
 	"attributes": {
 		"url": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"providerNameSlug": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"allowResponsive": {
 			"type": "boolean",
@@ -32,12 +32,12 @@
 		"responsive": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"previewable": {
 			"type": "boolean",
 			"default": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
index 0526120c4dfc1..bf0082c576dd1 100644
--- a/packages/block-library/src/file/block.json
+++ b/packages/block-library/src/file/block.json
@@ -13,7 +13,7 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"href": {
 			"type": "string"
diff --git a/packages/block-library/src/file/index.php b/packages/block-library/src/file/index.php
index 85cc840201da5..8ea668d56d854 100644
--- a/packages/block-library/src/file/index.php
+++ b/packages/block-library/src/file/index.php
@@ -19,18 +19,7 @@
 function render_block_core_file( $attributes, $content ) {
 	// If it's interactive, enqueue the script module and add the directives.
 	if ( ! empty( $attributes['displayPreview'] ) ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/file/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/file',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/file/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/file' );
+		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
diff --git a/packages/block-library/src/form-input/block.json b/packages/block-library/src/form-input/block.json
index 53aa0be6744cb..386c90ac207ad 100644
--- a/packages/block-library/src/form-input/block.json
+++ b/packages/block-library/src/form-input/block.json
@@ -23,7 +23,7 @@
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
 			"source": "rich-text",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"inlineLabel": {
 			"type": "boolean",
@@ -41,7 +41,7 @@
 			"selector": ".wp-block-form-input__input",
 			"source": "attribute",
 			"attribute": "placeholder",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"value": {
 			"type": "string",
diff --git a/packages/block-library/src/form-input/deprecated.js b/packages/block-library/src/form-input/deprecated.js
index 451cc704a42d5..d974cca387a18 100644
--- a/packages/block-library/src/form-input/deprecated.js
+++ b/packages/block-library/src/form-input/deprecated.js
@@ -41,7 +41,7 @@ const v2 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -59,7 +59,7 @@ const v2 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
@@ -155,7 +155,7 @@ const v1 = {
 			default: 'Label',
 			selector: '.wp-block-form-input__label-content',
 			source: 'html',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		inlineLabel: {
 			type: 'boolean',
@@ -173,7 +173,7 @@ const v1 = {
 			selector: '.wp-block-form-input__input',
 			source: 'attribute',
 			attribute: 'placeholder',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		value: {
 			type: 'string',
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 11beecbab0eb6..739a9cd0cf852 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -39,9 +39,9 @@
 	&::after {
 		content: "";
 		display: flex;
-		flex: 1 0 $grid-unit-60;
+		flex: 1 0 $button-size-next-default-40px;
 		pointer-events: none;
-		min-height: $grid-unit-60 - $border-width - $border-width;
+		min-height: $button-size-next-default-40px - $border-width - $border-width;
 		border: $border-width dashed currentColor;
 	}
 
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index 6e43a18cfba45..2276bcbbb5017 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "h1,h2,h3,h4,h5,h6",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"level": {
 			"type": "number",
diff --git a/packages/block-library/src/heading/deprecated.js b/packages/block-library/src/heading/deprecated.js
index a97415712bf07..76b175ac44fc4 100644
--- a/packages/block-library/src/heading/deprecated.js
+++ b/packages/block-library/src/heading/deprecated.js
@@ -259,7 +259,7 @@ const v5 = {
 			source: 'html',
 			selector: 'h1,h2,h3,h4,h5,h6',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		level: {
 			type: 'number',
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 6417879164a22..f441a6e893290 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -11,14 +11,14 @@
 	"attributes": {
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"url": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"alt": {
 			"type": "string",
@@ -26,13 +26,13 @@
 			"selector": "img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"lightbox": {
 			"type": "object",
@@ -45,14 +45,14 @@
 			"source": "attribute",
 			"selector": "img",
 			"attribute": "title",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"href": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -68,7 +68,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "string"
diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js
index 135463a377131..6c1db75c5e2aa 100644
--- a/packages/block-library/src/image/deprecated.js
+++ b/packages/block-library/src/image/deprecated.js
@@ -559,7 +559,7 @@ const v6 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -567,27 +567,27 @@ const v6 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -603,7 +603,7 @@ const v6 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -762,7 +762,7 @@ const v7 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -770,27 +770,27 @@ const v7 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -806,7 +806,7 @@ const v7 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'number',
@@ -962,7 +962,7 @@ const v8 = {
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'src',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		alt: {
 			type: 'string',
@@ -970,27 +970,27 @@ const v8 = {
 			selector: 'img',
 			attribute: 'alt',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		caption: {
 			type: 'string',
 			source: 'html',
 			selector: 'figcaption',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		title: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'img',
 			attribute: 'title',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		href: {
 			type: 'string',
 			source: 'attribute',
 			selector: 'figure > a',
 			attribute: 'href',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		rel: {
 			type: 'string',
@@ -1006,7 +1006,7 @@ const v8 = {
 		},
 		id: {
 			type: 'number',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		width: {
 			type: 'string',
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index abbb03c095245..5d7815a1f2f3f 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -70,19 +70,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		isset( $lightbox_settings['enabled'] ) &&
 		true === $lightbox_settings['enabled']
 	) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/image/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/image',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/image/view{$suffix}.js" ),
-			array( '@wordpress/interactivity' ),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-
-		wp_enqueue_script_module( '@wordpress/block-library/image' );
+		wp_enqueue_script_module( '@wordpress/block-library/image/view' );
 
 		/*
 		 * This render needs to happen in a filter with priority 15 to ensure that
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index a4bf2351d9750..6eb30cfe6d0af 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -16,7 +16,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "li",
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index ea07a0eb542df..4a86def8d687b 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -12,7 +12,7 @@
 		"ordered": {
 			"type": "boolean",
 			"default": false,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"values": {
 			"type": "string",
@@ -21,7 +21,7 @@
 			"multiline": "li",
 			"__unstableMultilineWrapperTags": [ "ol", "ul" ],
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"type": {
 			"type": "string"
diff --git a/packages/block-library/src/list/deprecated.js b/packages/block-library/src/list/deprecated.js
index edb04dff27c90..13804b7040ed4 100644
--- a/packages/block-library/src/list/deprecated.js
+++ b/packages/block-library/src/list/deprecated.js
@@ -14,7 +14,7 @@ const v0 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -23,7 +23,7 @@ const v0 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -74,7 +74,7 @@ const v1 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -83,7 +83,7 @@ const v1 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -144,7 +144,7 @@ const v2 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -153,7 +153,7 @@ const v2 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
@@ -225,7 +225,7 @@ const v3 = {
 		ordered: {
 			type: 'boolean',
 			default: false,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		values: {
 			type: 'string',
@@ -234,7 +234,7 @@ const v3 = {
 			multiline: 'li',
 			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		type: {
 			type: 'string',
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index 42384c0c4478e..0c2cfc4a14995 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -18,7 +18,7 @@
 			"selector": "figure img",
 			"attribute": "alt",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaPosition": {
 			"type": "string",
@@ -26,14 +26,14 @@
 		},
 		"mediaId": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaUrl": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "figure video,figure img",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaLink": {
 			"type": "string"
@@ -52,7 +52,7 @@
 			"source": "attribute",
 			"selector": "figure a",
 			"attribute": "href",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
@@ -68,7 +68,7 @@
 		},
 		"mediaType": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"mediaWidth": {
 			"type": "number",
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index 54c6f863311ff..24f239a41ed29 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -172,29 +172,29 @@ const v6Attributes = {
 		selector: 'figure img',
 		attribute: 'alt',
 		default: '',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaId: {
 		type: 'number',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaUrl: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure video,figure img',
 		attribute: 'src',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	href: {
 		type: 'string',
 		source: 'attribute',
 		selector: 'figure a',
 		attribute: 'href',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 	mediaType: {
 		type: 'string',
-		__experimentalRole: 'content',
+		role: 'content',
 	},
 };
 
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index ec72b03b6906f..10fec84ed59d9 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -622,18 +622,7 @@ private static function get_nav_element_directives( $is_interactive ) {
 	 */
 	private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build-module/block-library/navigation/view.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/navigation',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/navigation/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/navigation' );
+			wp_enqueue_script_module( '@wordpress/block-library/navigation/view' );
 		}
 	}
 
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index f16a7cf041144..7e004019cbf28 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -15,7 +15,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"dropCap": {
 			"type": "boolean",
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index ce733759846fe..5f1b295119822 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -34,6 +34,12 @@
 			"default": ""
 		}
 	},
+	"example": {
+		"attributes": {
+			"label": "Next post",
+			"arrow": "arrow"
+		}
+	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,
diff --git a/packages/block-library/src/post-navigation-link/variations.js b/packages/block-library/src/post-navigation-link/variations.js
index 945d6eb550f27..4f52b21338af1 100644
--- a/packages/block-library/src/post-navigation-link/variations.js
+++ b/packages/block-library/src/post-navigation-link/variations.js
@@ -15,6 +15,12 @@ const variations = [
 		icon: next,
 		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Next post',
+				arrow: 'arrow',
+			},
+		},
 	},
 	{
 		name: 'post-previous',
@@ -25,6 +31,12 @@ const variations = [
 		icon: previous,
 		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
+		example: {
+			attributes: {
+				label: 'Previous post',
+				arrow: 'arrow',
+			},
+		},
 	},
 ];
 
diff --git a/packages/block-library/src/post-time-to-read/index.js b/packages/block-library/src/post-time-to-read/index.js
index 95b379f55f0b3..039923161ca81 100644
--- a/packages/block-library/src/post-time-to-read/index.js
+++ b/packages/block-library/src/post-time-to-read/index.js
@@ -12,6 +12,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 5e7d3eee9dd11..ecb5053d6cd39 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -80,8 +80,5 @@
 			}
 		}
 	},
-	"style": "wp-block-post-title",
-	"selectors": {
-		"typography": ".wp-block-post-title, .wp-block-post-title > a"
-	}
+	"style": "wp-block-post-title"
 }
diff --git a/packages/block-library/src/post-title/style.scss b/packages/block-library/src/post-title/style.scss
index 5d0e3407105bd..8dfd25b1a0786 100644
--- a/packages/block-library/src/post-title/style.scss
+++ b/packages/block-library/src/post-title/style.scss
@@ -3,31 +3,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&[style*="font-weight"] :where(a) {
-		font-weight: inherit;
-	}
-	&[class*="-font-family"] :where(a),
-	&[style*="font-family"] :where(a) {
+	:where(a) {
+		display: inline-block;
 		font-family: inherit;
-	}
-	&[class*="-font-size"] :where(a),
-	&[style*="font-size"] :where(a) {
 		font-size: inherit;
-	}
-	&[style*="line-height"] :where(a) {
-		line-height: inherit;
-	}
-	&[style*="font-style"] :where(a) {
 		font-style: inherit;
-	}
-	&[style*="letter-spacing"] :where(a) {
+		font-weight: inherit;
 		letter-spacing: inherit;
-	}
-	&[style*="text-decoration"] :where(a) {
+		line-height: inherit;
 		text-decoration: inherit;
 	}
-
-	a {
-		display: inline-block;
-	}
 }
diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index a1726ee8b0d43..c25b8ce37093a 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -12,7 +12,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index 0935f9759668d..271bba74d0252 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -11,13 +11,13 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "p",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
index 6e6f49da91c6a..18e4799755078 100644
--- a/packages/block-library/src/pullquote/deprecated.js
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -75,14 +75,14 @@ const v5 = {
 			source: 'html',
 			selector: 'blockquote',
 			multiline: 'p',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json
index 8f3ba56adcc36..2f656594afa30 100644
--- a/packages/block-library/src/query-no-results/block.json
+++ b/packages/block-library/src/query-no-results/block.json
@@ -8,6 +8,16 @@
 	"parent": [ "core/query" ],
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"attributes": {
+					"content": "No posts were found."
+				}
+			}
+		]
+	},
 	"supports": {
 		"align": true,
 		"reusable": false,
diff --git a/packages/block-library/src/query-pagination/index.js b/packages/block-library/src/query-pagination/index.js
index b113a8384b043..158106c4ac185 100644
--- a/packages/block-library/src/query-pagination/index.js
+++ b/packages/block-library/src/query-pagination/index.js
@@ -20,6 +20,7 @@ export const settings = {
 	edit,
 	save,
 	deprecated,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index de3e60214685c..5d5c9113bda08 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -29,6 +29,11 @@
 			"default": true
 		}
 	},
+	"example": {
+		"attributes": {
+			"type": "search"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index 9eb8495963823..b2225192c6b21 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -5,6 +5,7 @@
 	"title": "Query Loop",
 	"category": "theme",
 	"description": "An advanced block that allows displaying post types based on different query parameters and visual configurations.",
+	"keywords": [ "posts", "list", "blog", "blogs", "custom post types" ],
 	"textdomain": "default",
 	"attributes": {
 		"queryId": {
@@ -41,6 +42,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",
diff --git a/packages/block-library/src/query/edit/inspector-controls/format-controls.js b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
index d26fd9d81ce6f..15c95f3bbba2e 100644
--- a/packages/block-library/src/query/edit/inspector-controls/format-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/format-controls.js
@@ -68,7 +68,7 @@ export default function FormatControls( { onChange, query: { format } } ) {
 		.filter( Boolean );
 
 	const suggestions = formats
-		.filter( ( item ) => ! format.includes( item.value ) )
+		.filter( ( item ) => ! normalizedFormats.includes( item.value ) )
 		.map( ( item ) => item.label );
 
 	return (
diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 6c246ab89b3b3..4085128e9aef1 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -45,7 +45,7 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout } = props;
+	const { attributes, setQuery, setDisplayLayout, isTemplate } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -103,6 +103,7 @@ export default function QueryInspectorControls( props ) {
 		if ( ! hasFormatSupport ) {
 			updateQuery.format = [];
 		}
+
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -118,20 +119,25 @@ export default function QueryInspectorControls( props ) {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
-	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+
+	const showInheritControl =
+		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		! inherit && isControlAllowed( allowedControls, 'postType' );
+		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
+		! isTemplate;
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		! inherit && isControlAllowed( allowedControls, 'order' );
+		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
+		! isTemplate;
 	const showStickyControl =
-		! inherit &&
-		showSticky &&
-		isControlAllowed( allowedControls, 'sticky' );
+		( ! inherit &&
+			showSticky &&
+			isControlAllowed( allowedControls, 'sticky' ) ) ||
+		( showSticky && ! isTemplate );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
diff --git a/packages/block-library/src/query/edit/query-content.js b/packages/block-library/src/query/edit/query-content.js
index 4624b3b96049e..8b3ff09b17934 100644
--- a/packages/block-library/src/query/edit/query-content.js
+++ b/packages/block-library/src/query/edit/query-content.js
@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -32,6 +32,7 @@ export default function QueryContent( {
 	openPatternSelectionModal,
 	name,
 	clientId,
+	context,
 } ) {
 	const {
 		queryId,
@@ -41,6 +42,7 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
+	const { postType } = context;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -48,6 +50,16 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
+	const isTemplate = useSelect(
+		( select ) => {
+			const currentTemplate =
+				select( coreStore ).__experimentalGetTemplateForLink()?.type;
+			const isInTemplate = 'wp_template' === currentTemplate;
+			const isInSingularContent = postType !== undefined;
+			return isInTemplate && ! isInSingularContent;
+		},
+		[ postType ]
+	);
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
@@ -81,6 +93,10 @@ export default function QueryContent( {
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
+	const updateQuery = useCallback(
+		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
+		[ query, setAttributes ]
+	);
 	useEffect( () => {
 		const newQuery = {};
 		// When we inherit from global query always need to set the `perPage`
@@ -90,11 +106,24 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
+		// We need to reset the `inherit` value if not in a template, as queries
+		// are not inherited when outside a template (e.g. when in singular content).
+		if ( ! isTemplate && query.inherit ) {
+			newQuery.inherit = false;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage, postsPerPage, inherit ] );
+	}, [
+		query.perPage,
+		postsPerPage,
+		inherit,
+		isTemplate,
+		query.inherit,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateQuery,
+	] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -102,9 +131,12 @@ export default function QueryContent( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { queryId: instanceId } );
 		}
-	}, [ queryId, instanceId ] );
-	const updateQuery = ( newQuery ) =>
-		setAttributes( { query: { ...query, ...newQuery } } );
+	}, [
+		queryId,
+		instanceId,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 	const updateDisplayLayout = ( newDisplayLayout ) =>
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
@@ -135,6 +167,7 @@ export default function QueryContent( {
 					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
+					isTemplate={ isTemplate }
 				/>
 			</InspectorControls>
 			<BlockControls>
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index d10db26529854..043f351e11d7f 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -24,27 +24,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 	// Enqueue the script module and add the necessary directives if the block is
 	// interactive.
 	if ( $is_interactive ) {
-		$suffix = wp_scripts_get_suffix();
-		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build-module/block-library/query/view.min.js' );
-		}
-
-		wp_register_script_module(
-			'@wordpress/block-library/query',
-			isset( $module_url ) ? $module_url : includes_url( "blocks/query/view{$suffix}.js" ),
-			array(
-				array(
-					'id'     => '@wordpress/interactivity',
-					'import' => 'static',
-				),
-				array(
-					'id'     => '@wordpress/interactivity-router',
-					'import' => 'dynamic',
-				),
-			),
-			defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-		);
-		wp_enqueue_script_module( '@wordpress/block-library/query' );
+		wp_enqueue_script_module( '@wordpress/block-library/query/view' );
 
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag() ) {
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 0f9ec97422f64..2ae37f9f36f76 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -14,13 +14,13 @@
 			"selector": "blockquote",
 			"multiline": "p",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"citation": {
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "cite",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
index 77098b6e75313..4d3efd28e3a22 100644
--- a/packages/block-library/src/quote/deprecated.js
+++ b/packages/block-library/src/quote/deprecated.js
@@ -70,14 +70,14 @@ const v4 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
@@ -138,14 +138,14 @@ const v3 = {
 			selector: 'blockquote',
 			multiline: 'p',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		citation: {
 			type: 'string',
 			source: 'html',
 			selector: 'cite',
 			default: '',
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		align: {
 			type: 'string',
diff --git a/packages/block-library/src/search/block.json b/packages/block-library/src/search/block.json
index dac4c6b488a97..c5af5a29d21be 100644
--- a/packages/block-library/src/search/block.json
+++ b/packages/block-library/src/search/block.json
@@ -10,7 +10,7 @@
 	"attributes": {
 		"label": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"showLabel": {
 			"type": "boolean",
@@ -19,7 +19,7 @@
 		"placeholder": {
 			"type": "string",
 			"default": "",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"width": {
 			"type": "number"
@@ -29,7 +29,7 @@
 		},
 		"buttonText": {
 			"type": "string",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"buttonPosition": {
 			"type": "string",
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index e2f3bb3999e42..d4ed5b7e3a405 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -424,13 +424,12 @@ export default function SearchEdit( {
 							}
 							step={ 1 }
 							onChange={ ( newWidth ) => {
-								const filteredWidth =
-									widthUnit === '%' &&
-									parseInt( newWidth, 10 ) > 100
-										? 100
-										: newWidth;
+								const parsedNewWidth =
+									newWidth === ''
+										? undefined
+										: parseInt( newWidth, 10 );
 								setAttributes( {
-									width: parseInt( filteredWidth, 10 ),
+									width: parsedNewWidth,
 								} );
 							} }
 							onUnitChange={ ( newUnit ) => {
@@ -566,7 +565,11 @@ export default function SearchEdit( {
 
 			<ResizableBox
 				size={ {
-					width: `${ width }${ widthUnit }`,
+					width:
+						width === undefined
+							? 'auto'
+							: `${ width }${ widthUnit }`,
+					height: 'auto',
 				} }
 				className={ clsx(
 					'wp-block-search__inside-wrapper',
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
index fb09cdd36406e..e4259bb0ce2c7 100644
--- a/packages/block-library/src/search/index.php
+++ b/packages/block-library/src/search/index.php
@@ -80,18 +80,7 @@ function render_block_core_search( $attributes ) {
 		// If it's interactive, enqueue the script module and add the directives.
 		$is_expandable_searchfield = 'button-only' === $button_position;
 		if ( $is_expandable_searchfield ) {
-			$suffix = wp_scripts_get_suffix();
-			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build-module/block-library/search/view.min.js' );
-			}
-
-			wp_register_script_module(
-				'@wordpress/block-library/search',
-				isset( $module_url ) ? $module_url : includes_url( "blocks/search/view{$suffix}.js" ),
-				array( '@wordpress/interactivity' ),
-				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-			);
-			wp_enqueue_script_module( '@wordpress/block-library/search' );
+			wp_enqueue_script_module( '@wordpress/block-library/search/view' );
 
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
 			$input->set_attribute( 'data-wp-bind--tabindex', 'state.tabindex' );
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
index dbb484c74a1e4..c75b1bc229beb 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -75,8 +75,5 @@
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
-	"style": "wp-block-site-title",
-	"selectors": {
-		"typography": ".wp-block-site-title > span, .wp-block-site-title > a"
-	}
+	"style": "wp-block-site-title"
 }
diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss
index 8647f3d9b2947..3b332e35c6523 100644
--- a/packages/block-library/src/site-title/style.scss
+++ b/packages/block-library/src/site-title/style.scss
@@ -2,31 +2,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&[style*="font-weight"] :where(a) {
-		font-weight: inherit;
-	}
-	&[class*="-font-family"] :where(a),
-	&[style*="font-family"] :where(a) {
+	:where(a) {
+		color: inherit;
 		font-family: inherit;
-	}
-	&[class*="-font-size"] :where(a),
-	&[style*="font-size"] :where(a) {
 		font-size: inherit;
-	}
-	&[style*="line-height"] :where(a) {
-		line-height: inherit;
-	}
-	&[style*="font-style"] :where(a) {
 		font-style: inherit;
-	}
-	&[style*="letter-spacing"] :where(a) {
+		font-weight: inherit;
 		letter-spacing: inherit;
-	}
-	&[style*="text-decoration"] :where(a) {
+		line-height: inherit;
 		text-decoration: inherit;
 	}
-
-	:where(a) {
-		color: inherit;
-	}
 }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 65d85c0400116..47af181bfe17e 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -22,6 +22,7 @@ import {
 	PanelBody,
 	PanelRow,
 	TextControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
@@ -78,15 +79,18 @@ const SocialLinkURLPopover = ( {
 							}
 							removeBlock( clientId );
 						} }
+						suffix={
+							<InputControlSuffixWrapper variant="control">
+								<Button
+									icon={ keyboardReturn }
+									label={ __( 'Apply' ) }
+									type="submit"
+									size="small"
+								/>
+							</InputControlSuffixWrapper>
+						}
 					/>
 				</div>
-				<Button
-					// TODO: Switch to `true` (40px size) if possible.
-					__next40pxDefaultSize={ false }
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
 			</form>
 		</URLPopover>
 	);
diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json
index 451d245d867b0..5eb6e729d3f03 100644
--- a/packages/block-library/src/table-of-contents/block.json
+++ b/packages/block-library/src/table-of-contents/block.json
@@ -62,6 +62,57 @@
 			}
 		}
 	},
-	"example": {},
+	"example": {
+		"innerBlocks": [
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 2,
+					"content": "Heading"
+				}
+			},
+			{
+				"name": "core/heading",
+				"attributes": {
+					"level": 3,
+					"content": "Subheading"
+				}
+			}
+		],
+		"attributes": {
+			"headings": [
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				},
+				{
+					"content": "Heading",
+					"level": 2
+				},
+				{
+					"content": "Subheading",
+					"level": 3
+				}
+			]
+		}
+	},
 	"style": "wp-block-table-of-contents"
 }
diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js
index 0ff710a91f5d5..330ca05bd174e 100644
--- a/packages/block-library/src/term-description/index.js
+++ b/packages/block-library/src/term-description/index.js
@@ -16,6 +16,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index 387ff3dfe1712..81cccd72965b1 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -13,7 +13,7 @@
 			"source": "rich-text",
 			"selector": "pre",
 			"__unstablePreserveWhiteSpace": true,
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"textAlign": {
 			"type": "string"
diff --git a/packages/block-library/src/verse/deprecated.js b/packages/block-library/src/verse/deprecated.js
index 7e3c96bc80cd9..bd4edc46738c5 100644
--- a/packages/block-library/src/verse/deprecated.js
+++ b/packages/block-library/src/verse/deprecated.js
@@ -46,7 +46,7 @@ const v2 = {
 			selector: 'pre',
 			default: '',
 			__unstablePreserveWhiteSpace: true,
-			__experimentalRole: 'content',
+			role: 'content',
 		},
 		textAlign: {
 			type: 'string',
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 1d3dc75961e8f..d2dcd95365c3b 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -18,7 +18,7 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "figcaption",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"controls": {
 			"type": "boolean",
@@ -29,7 +29,7 @@
 		},
 		"id": {
 			"type": "number",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"loop": {
 			"type": "boolean",
@@ -58,14 +58,14 @@
 		},
 		"blob": {
 			"type": "string",
-			"__experimentalRole": "local"
+			"role": "local"
 		},
 		"src": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "video",
 			"attribute": "src",
-			"__experimentalRole": "content"
+			"role": "content"
 		},
 		"playsInline": {
 			"type": "boolean",
@@ -74,7 +74,7 @@
 			"attribute": "playsinline"
 		},
 		"tracks": {
-			"__experimentalRole": "content",
+			"role": "content",
 			"type": "array",
 			"items": {
 				"type": "object"
diff --git a/packages/block-serialization-default-parser/CHANGELOG.md b/packages/block-serialization-default-parser/CHANGELOG.md
index 9dd0bd7030976..47e1db147942f 100644
--- a/packages/block-serialization-default-parser/CHANGELOG.md
+++ b/packages/block-serialization-default-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-serialization-default-parser/package.json b/packages/block-serialization-default-parser/package.json
index cac606bd7bd1e..60e638120952d 100644
--- a/packages/block-serialization-default-parser/package.json
+++ b/packages/block-serialization-default-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-default-parser",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/block-serialization-spec-parser/CHANGELOG.md b/packages/block-serialization-spec-parser/CHANGELOG.md
index b8d02b5348e1b..173ce09db51e2 100644
--- a/packages/block-serialization-spec-parser/CHANGELOG.md
+++ b/packages/block-serialization-spec-parser/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/block-serialization-spec-parser/package.json b/packages/block-serialization-spec-parser/package.json
index d48d1846e7909..ab73fa1689ad6 100644
--- a/packages/block-serialization-spec-parser/package.json
+++ b/packages/block-serialization-spec-parser/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-serialization-spec-parser",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Block serialization specification parser for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/CHANGELOG.md b/packages/blocks/CHANGELOG.md
index 0755d5170d1b3..838983c17233e 100644
--- a/packages/blocks/CHANGELOG.md
+++ b/packages/blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 13.8.0 (2024-09-19)
+
 ## 13.7.0 (2024-09-05)
 
 ## 13.6.0 (2024-08-21)
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index d724f986b0ca8..b607286f1e73c 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -102,6 +102,19 @@ _Returns_
 
 -   `Object`: All block attributes.
 
+### getBlockAttributesNamesByRole
+
+Filter block attributes by `role` and return their names.
+
+_Parameters_
+
+-   _name_ `string`: Block attribute's name.
+-   _role_ `string`: The role of a block attribute.
+
+_Returns_
+
+-   `string[]`: The attribute names that have the provided role.
+
 ### getBlockContent
 
 Given a block object, returns the Block's Inner HTML markup.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index f371ecc087af4..b2c24928b7c34 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/blocks",
-	"version": "13.7.0",
+	"version": "13.8.0",
 	"description": "Block API for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
index 803467cb2187e..e7ab69af71103 100644
--- a/packages/blocks/src/api/index.js
+++ b/packages/blocks/src/api/index.js
@@ -155,6 +155,7 @@ export {
 	getBlockLabel as __experimentalGetBlockLabel,
 	getAccessibleBlockLabel as __experimentalGetAccessibleBlockLabel,
 	__experimentalSanitizeBlockAttributes,
+	getBlockAttributesNamesByRole,
 	__experimentalGetBlockAttributesNamesByRole,
 } from './utils';
 
diff --git a/packages/blocks/src/api/serializer.js b/packages/blocks/src/api/serializer.js
index 2e7246ce9584a..f1fb28e9d9a36 100644
--- a/packages/blocks/src/api/serializer.js
+++ b/packages/blocks/src/api/serializer.js
@@ -10,6 +10,7 @@ import {
 import { hasFilter, applyFilters } from '@wordpress/hooks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { removep } from '@wordpress/autop';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -238,7 +239,17 @@ export function getCommentAttributes( blockType, attributes ) {
 			}
 
 			// Ignore all local attributes
+			if ( attributeSchema.role === 'local' ) {
+				return accumulator;
+			}
+
 			if ( attributeSchema.__experimentalRole === 'local' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockType?.name } block.`,
+				} );
 				return accumulator;
 			}
 
diff --git a/packages/blocks/src/api/test/serializer.js b/packages/blocks/src/api/test/serializer.js
index 7fed23041daaa..3c1cbd6d1e74f 100644
--- a/packages/blocks/src/api/test/serializer.js
+++ b/packages/blocks/src/api/test/serializer.js
@@ -155,7 +155,7 @@ describe( 'block serializer', () => {
 					attributes: {
 						blob: {
 							type: 'string',
-							__experimentalRole: 'local',
+							role: 'local',
 						},
 						url: {
 							type: 'string',
diff --git a/packages/blocks/src/api/test/utils.js b/packages/blocks/src/api/test/utils.js
index 9bfef69c4c142..ad76e89aafe5f 100644
--- a/packages/blocks/src/api/test/utils.js
+++ b/packages/blocks/src/api/test/utils.js
@@ -13,7 +13,7 @@ import {
 	getAccessibleBlockLabel,
 	getBlockLabel,
 	__experimentalSanitizeBlockAttributes,
-	__experimentalGetBlockAttributesNamesByRole,
+	getBlockAttributesNamesByRole,
 } from '../utils';
 
 const noop = () => {};
@@ -309,7 +309,7 @@ describe( 'sanitizeBlockAttributes', () => {
 	} );
 } );
 
-describe( '__experimentalGetBlockAttributesNamesByRole', () => {
+describe( 'getBlockAttributesNamesByRole', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block-1', {
 			attributes: {
@@ -318,15 +318,15 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save: noop,
@@ -357,42 +357,28 @@ describe( '__experimentalGetBlockAttributesNamesByRole', () => {
 		].forEach( unregisterBlockType );
 	} );
 	it( 'should return empty array if block has no attributes', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-3' )
-		).toEqual( [] );
+		expect( getBlockAttributesNamesByRole( 'core/test-block-3' ) ).toEqual(
+			[]
+		);
 	} );
 	it( 'should return all attribute names if no role is provided', () => {
-		expect(
-			__experimentalGetBlockAttributesNamesByRole( 'core/test-block-1' )
-		).toEqual(
+		expect( getBlockAttributesNamesByRole( 'core/test-block-1' ) ).toEqual(
 			expect.arrayContaining( [ 'align', 'content', 'level', 'color' ] )
 		);
 	} );
 	it( 'should return proper results with existing attributes and provided role', () => {
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'content' )
 		).toEqual( expect.arrayContaining( [ 'content', 'level' ] ) );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'other'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'other' )
 		).toEqual( [ 'color' ] );
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-1',
-				'not-exists'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-1', 'not-exists' )
 		).toEqual( [] );
 		// A block with no `role` in any attributes.
 		expect(
-			__experimentalGetBlockAttributesNamesByRole(
-				'core/test-block-2',
-				'content'
-			)
+			getBlockAttributesNamesByRole( 'core/test-block-2', 'content' )
 		).toEqual( [] );
 	} );
 } );
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index a68937586f927..20f0f6a85ed09 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -12,6 +12,7 @@ import { Component, isValidElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -332,7 +333,7 @@ export function __experimentalSanitizeBlockAttributes( name, attributes ) {
  *
  * @return {string[]} The attribute names that have the provided role.
  */
-export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
+export function getBlockAttributesNamesByRole( name, role ) {
 	const attributes = getBlockType( name )?.attributes;
 	if ( ! attributes ) {
 		return [];
@@ -341,12 +342,34 @@ export function __experimentalGetBlockAttributesNamesByRole( name, role ) {
 	if ( ! role ) {
 		return attributesNames;
 	}
-	return attributesNames.filter(
-		( attributeName ) =>
-			attributes[ attributeName ]?.__experimentalRole === role
-	);
+
+	return attributesNames.filter( ( attributeName ) => {
+		const attribute = attributes[ attributeName ];
+		if ( attribute?.role === role ) {
+			return true;
+		}
+		if ( attribute?.__experimentalRole === role ) {
+			deprecated( '__experimentalRole attribute', {
+				since: '6.7',
+				version: '6.8',
+				alternative: 'role attribute',
+				hint: `Check the block.json of the ${ name } block.`,
+			} );
+			return true;
+		}
+		return false;
+	} );
 }
 
+export const __experimentalGetBlockAttributesNamesByRole = ( ...args ) => {
+	deprecated( '__experimentalGetBlockAttributesNamesByRole', {
+		since: '6.7',
+		version: '6.8',
+		alternative: 'getBlockAttributesNamesByRole',
+	} );
+	return getBlockAttributesNamesByRole( ...args );
+};
+
 /**
  * Return a new object with the specified keys omitted.
  *
diff --git a/packages/blocks/src/store/private-selectors.js b/packages/blocks/src/store/private-selectors.js
index 4cded8268ae97..d5665323859e4 100644
--- a/packages/blocks/src/store/private-selectors.js
+++ b/packages/blocks/src/store/private-selectors.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createSelector } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -209,3 +210,36 @@ export function getAllBlockBindingsSources( state ) {
 export function getBlockBindingsSource( state, sourceName ) {
 	return state.blockBindingsSources[ sourceName ];
 }
+
+/**
+ * Determines if any of the block type's attributes have
+ * the content role attribute.
+ *
+ * @param {Object} state         Data state.
+ * @param {string} blockTypeName Block type name.
+ * @return {boolean} Whether block type has content role attribute.
+ */
+export const hasContentRoleAttribute = ( state, blockTypeName ) => {
+	const blockType = getBlockType( state, blockTypeName );
+	if ( ! blockType ) {
+		return false;
+	}
+
+	return Object.values( blockType.attributes ).some(
+		( { role, __experimentalRole } ) => {
+			if ( role === 'content' ) {
+				return true;
+			}
+			if ( __experimentalRole === 'content' ) {
+				deprecated( '__experimentalRole attribute', {
+					since: '6.7',
+					version: '6.8',
+					alternative: 'role attribute',
+					hint: `Check the block.json of the ${ blockTypeName } block.`,
+				} );
+				return true;
+			}
+			return false;
+		}
+	);
+};
diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
index fbcec7a619cf6..4aa0b922e090f 100644
--- a/packages/blocks/src/store/reducer.js
+++ b/packages/blocks/src/store/reducer.js
@@ -404,7 +404,9 @@ export function blockBindingsSources( state = {}, action ) {
 					),
 					getValues: action.getValues,
 					setValues: action.setValues,
-					canUserEditValue: action.canUserEditValue,
+					// Only set `canUserEditValue` if `setValues` is also defined.
+					canUserEditValue:
+						action.setValues && action.canUserEditValue,
 					getFieldsList: action.getFieldsList,
 				},
 			};
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index e97048e92b0c0..79e88073ba20d 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -8,11 +8,13 @@ import removeAccents from 'remove-accents';
  */
 import { createSelector } from '@wordpress/data';
 import { RichTextData } from '@wordpress/rich-text';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { getValueFromObjectPath, matchesAttributes } from './utils';
+import { hasContentRoleAttribute as privateHasContentRoleAttribute } from './private-selectors';
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */
@@ -822,23 +824,11 @@ export const hasChildBlocksWithInserterSupport = ( state, blockName ) => {
 	} );
 };
 
-/**
- * DO-NOT-USE in production.
- * This selector is created for internal/experimental only usage and may be
- * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
- */
-export const __experimentalHasContentRoleAttribute = createSelector(
-	( state, blockTypeName ) => {
-		const blockType = getBlockType( state, blockTypeName );
-		if ( ! blockType ) {
-			return false;
-		}
-
-		return Object.entries( blockType.attributes ).some(
-			( [ , { __experimentalRole } ] ) => __experimentalRole === 'content'
-		);
-	},
-	( state, blockTypeName ) => [
-		state.blockTypes[ blockTypeName ]?.attributes,
-	]
-);
+export const __experimentalHasContentRoleAttribute = ( ...args ) => {
+	deprecated( '__experimentalHasContentRoleAttribute', {
+		since: '6.7',
+		version: '6.8',
+		hint: 'This is a private selector.',
+	} );
+	return privateHasContentRoleAttribute( ...args );
+};
diff --git a/packages/browserslist-config/CHANGELOG.md b/packages/browserslist-config/CHANGELOG.md
index b8ee58633b7ef..cbe4763ea3270 100644
--- a/packages/browserslist-config/CHANGELOG.md
+++ b/packages/browserslist-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/browserslist-config/package.json b/packages/browserslist-config/package.json
index c51d7318170c4..cae627c406e81 100644
--- a/packages/browserslist-config/package.json
+++ b/packages/browserslist-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/browserslist-config",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "WordPress Browserslist shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/commands/CHANGELOG.md b/packages/commands/CHANGELOG.md
index bde7767a0f61f..b8f45c7947004 100644
--- a/packages/commands/CHANGELOG.md
+++ b/packages/commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/commands/package.json b/packages/commands/package.json
index 88b9b86f4b3ae..769931293bd2f 100644
--- a/packages/commands/package.json
+++ b/packages/commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/commands",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Handles the commands menu.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1473cf5f5df40..71aa08d693403 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,22 +4,48 @@
 
 ### Bug Fixes
 
+-   `ToolsPanel`: atomic one-step state update when (un)registering panels ([#65564](https://github.com/WordPress/gutenberg/pull/65564)).
+-   `Navigator`: fix `isInitial` logic ([#65527](https://github.com/WordPress/gutenberg/pull/65527)).
+
+### Enhancements
+
+-   `MenuGroup`: Simplify the MenuGroup styles within dropdown menus. ([#65561](https://github.com/WordPress/gutenberg/pull/65561)).
+
+## 28.8.0 (2024-09-19)
+
+### Bug Fixes
+
+-   `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)).
 -   `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
 -   `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)).
+-   `MenuItemsChoice`: Allow menu items height to adapt to its content ([#65204](https://github.com/WordPress/gutenberg/pull/65204)).
+-   `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)).
 
 ### Deprecations
 
 -   Deprecate `__unstableComposite`, `__unstableCompositeGroup`, `__unstableCompositeItem` and `__unstableUseCompositeState`. Consumers of the package should use the stable `Composite` component instead ([#63572](https://github.com/WordPress/gutenberg/pull/63572)).
+-   `__experimentalBoxControl` can now be imported as a stable `BoxControl` ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
 
 ### New Features
 
 -   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)).
 
 ### Enhancements
 
 -   `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
 -   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+-   `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Modal`: add exit animation for internally triggered events ([#65203](https://github.com/WordPress/gutenberg/pull/65203)).
 -   `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)).
+-   `BoxControl`: promote to stable ([#65469](https://github.com/WordPress/gutenberg/pull/65469)).
 
 ### Bug Fixes
 
diff --git a/packages/components/package.json b/packages/components/package.json
index 8337d6dd8857f..98eb4c5de0430 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.7.0",
+	"version": "28.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index b03b03a85466a..77176b49eeb6d 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -1,18 +1,14 @@
 # BoxControl
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
-BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like `padding` or `margin`.
+A control that lets users set values for top, right, bottom, and left. Can be used as an input control for values like `padding` or `margin`.
 
 ## Usage
 
 ```jsx
 import { useState } from 'react';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import { BoxControl } from '@wordpress/components';
 
-const Example = () => {
+function Example() {
 	const [ values, setValues ] = useState( {
 		top: '50px',
 		left: '10%',
@@ -26,23 +22,24 @@ const Example = () => {
 			onChange={ ( nextValues ) => setValues( nextValues ) }
 		/>
 	);
-};
+}
 ```
 
 ## Props
+
 ### `allowReset`: `boolean`
 
 If this property is true, a button to reset the box control is rendered.
 
-- Required: No
-- Default: `true`
+-   Required: No
+-   Default: `true`
 
 ### `splitOnAxis`: `boolean`
 
 If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `inputProps`: `object`
 
diff --git a/packages/components/src/box-control/all-input-control.tsx b/packages/components/src/box-control/all-input-control.tsx
index fb65014dfaf0f..e9166ff7f692e 100644
--- a/packages/components/src/box-control/all-input-control.tsx
+++ b/packages/components/src/box-control/all-input-control.tsx
@@ -10,7 +10,6 @@ import {
 	FlexedRangeControl,
 	StyledUnitControl,
 } from './styles/box-control-styles';
-import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
@@ -72,7 +71,7 @@ export default function AllInputControl( {
 	};
 
 	return (
-		<HStack>
+		<>
 			<StyledUnitControl
 				{ ...props }
 				__next40pxDefaultSize={ __next40pxDefaultSize }
@@ -104,6 +103,6 @@ export default function AllInputControl( {
 				value={ parsedQuantity ?? 0 }
 				withInputField={ false }
 			/>
-		</HStack>
+		</>
 	);
 }
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 9c3452d4ccb80..41e95aa88bea3 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -47,14 +47,14 @@ function useUniqueId( idProp?: string ) {
 }
 
 /**
- * BoxControl components let users set values for Top, Right, Bottom, and Left.
- * This can be used as an input control for values like `padding` or `margin`.
+ * A control that lets users set values for top, right, bottom, and left. Can be
+ * used as an input control for values like `padding` or `margin`.
  *
  * ```jsx
- * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+ * import { BoxControl } from '@wordpress/components';
  * import { useState } from '@wordpress/element';
  *
- * const Example = () => {
+ * function Example() {
  * 	const [ values, setValues ] = useState( {
  * 		top: '50px',
  * 		left: '10%',
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index 1b6604048f6d5..783f9d047b1bb 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import BoxControl from '../';
 
 const meta: Meta< typeof BoxControl > = {
-	title: 'Components (Experimental)/BoxControl',
+	title: 'Components/BoxControl',
 	component: BoxControl,
 	argTypes: {
 		values: { control: { type: null } },
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index eeb72df14bb9c..5f4071aeed88a 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -37,13 +37,13 @@ export type BoxControlProps = Pick<
 	/**
 	 * Props for the internal `UnitControl` components.
 	 *
-	 * @default `{ min: 0 }`
+	 * @default { min: 0 }
 	 */
 	inputProps?: UnitControlPassthroughProps;
 	/**
 	 * Heading label for the control.
 	 *
-	 * @default `__( 'Box Control' )`
+	 * @default __( 'Box Control' )
 	 */
 	label?: string;
 	/**
@@ -53,7 +53,7 @@ export type BoxControlProps = Pick<
 	/**
 	 * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.
 	 *
-	 * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`
+	 * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }
 	 */
 	resetValues?: BoxControlValue;
 	/**
diff --git a/packages/components/src/combobox-control/README.md b/packages/components/src/combobox-control/README.md
index 61611f82fee23..5831c5ec2832c 100644
--- a/packages/components/src/combobox-control/README.md
+++ b/packages/components/src/combobox-control/README.md
@@ -111,6 +111,13 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
+### placeholder
+
+If passed, the combobox input will show a placeholder string if no values are present.
+
+-   Type: `string`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
diff --git a/packages/components/src/combobox-control/index.tsx b/packages/components/src/combobox-control/index.tsx
index fc3ecccf0b659..5c6725a51b435 100644
--- a/packages/components/src/combobox-control/index.tsx
+++ b/packages/components/src/combobox-control/index.tsx
@@ -129,6 +129,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		},
 		__experimentalRenderItem,
 		expandOnFocus = true,
+		placeholder,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -340,6 +341,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								className="components-combobox-control__input"
 								instanceId={ instanceId }
 								ref={ inputContainer }
+								placeholder={ placeholder }
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
diff --git a/packages/components/src/combobox-control/test/index.tsx b/packages/components/src/combobox-control/test/index.tsx
index adc76590c2453..639407ac998ed 100644
--- a/packages/components/src/combobox-control/test/index.tsx
+++ b/packages/components/src/combobox-control/test/index.tsx
@@ -188,6 +188,46 @@ describe.each( [
 		expect( input ).toHaveValue( targetOption.label );
 	} );
 
+	it( 'calls onFilterValueChange whenever the textbox changes', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( onFilterValueChangeSpy ).toHaveBeenCalledWith( 'a' );
+	} );
+
+	it( 'clears the textbox value if there is no selected value on blur', async () => {
+		const user = userEvent.setup();
+		const onFilterValueChangeSpy = jest.fn();
+		render(
+			<Component
+				options={ timezones }
+				label={ defaultLabelText }
+				onFilterValueChange={ onFilterValueChangeSpy }
+			/>
+		);
+		const input = getInput( defaultLabelText );
+
+		await user.type( input, 'a' );
+		expect( input ).toHaveValue( 'a' );
+
+		// Blur and focus the input.
+		await user.tab();
+		await user.click( input );
+
+		expect( input ).toHaveValue( '' );
+		expect( onFilterValueChangeSpy ).toHaveBeenLastCalledWith( '' );
+	} );
+
 	it( 'should select the correct option from a search', async () => {
 		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];
diff --git a/packages/components/src/combobox-control/types.ts b/packages/components/src/combobox-control/types.ts
index 10adf8c0ff0ef..470b38c35e2c8 100644
--- a/packages/components/src/combobox-control/types.ts
+++ b/packages/components/src/combobox-control/types.ts
@@ -82,4 +82,8 @@ export type ComboboxControlProps = Pick<
 	 * The current value of the control.
 	 */
 	value?: string | null;
+	/**
+	 * If passed, the combobox input will show a placeholder string if no values are present.
+	 */
+	placeholder?: string;
 };
diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index c82d6eba2e1a7..2b8bdb9946b7c 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -120,6 +120,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	background-color: ${ COLORS.theme.background };
 	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
 
 	/* z-index(".components-popover") */
 	z-index: 1000000;
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 55020fbcd4135..b25613e9feb52 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -37,7 +37,7 @@ const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
diff --git a/packages/components/src/dropdown-menu/stories/index.story.tsx b/packages/components/src/dropdown-menu/stories/index.story.tsx
index b6bc11ddec9ab..dd4907bd0b96b 100644
--- a/packages/components/src/dropdown-menu/stories/index.story.tsx
+++ b/packages/components/src/dropdown-menu/stories/index.story.tsx
@@ -96,6 +96,9 @@ export const WithChildren: StoryObj< typeof DropdownMenu > = {
 		icon: more,
 		children: ( { onClose } ) => (
 			<>
+				<MenuItem icon={ arrowUp } onClick={ onClose }>
+					Standalone Item
+				</MenuItem>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx
index c6fe5014ffdc2..0f07664787cc3 100644
--- a/packages/components/src/dropdown/stories/index.story.tsx
+++ b/packages/components/src/dropdown/stories/index.story.tsx
@@ -99,6 +99,7 @@ export const WithMenuItems: StoryObj< typeof Dropdown > = {
 		...Default.args,
 		renderContent: () => (
 			<>
+				<MenuItem>Standalone Item</MenuItem>
 				<MenuGroup label="Group 1">
 					<MenuItem>Item 1</MenuItem>
 					<MenuItem>Item 2</MenuItem>
diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss
index 8a5b0e0a0a6a2..d7ae7963f7ed8 100644
--- a/packages/components/src/dropdown/style.scss
+++ b/packages/components/src/dropdown/style.scss
@@ -5,6 +5,16 @@
 .components-dropdown__content {
 	.components-popover__content {
 		padding: $grid-unit-10;
+
+		&:has(.components-menu-group) {
+			padding: 0;
+
+			.components-dropdown-menu__menu > .components-menu-item__button,
+			> .components-menu-item__button {
+				margin: $grid-unit-10;
+				width: auto;
+			}
+		}
 	}
 
 	[role="menuitem"] {
@@ -13,22 +23,9 @@
 
 	.components-menu-group {
 		padding: $grid-unit-10;
-		margin-top: 0;
-		margin-bottom: 0;
-		margin-left: -$grid-unit-10;
-		margin-right: -$grid-unit-10;
-
-		&:first-child {
-			margin-top: -$grid-unit-10;
-		}
-
-		&:last-child {
-			margin-bottom: -$grid-unit-10;
-		}
 	}
 
 	.components-menu-group + .components-menu-group {
-		margin-top: 0;
 		border-top: $border-width solid $gray-400;
 		padding: $grid-unit-10;
 	}
diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index dd7888403b34d..900874b59004b 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -60,6 +60,7 @@ $transition-duration: 0.2s;
 			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
+		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
 		border: math.div($toggle-thumb-size, 2) solid transparent;
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 32195ebc444ce..a59d258012807 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -40,7 +40,9 @@ export {
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
 export {
+	/** @deprecated Import `BoxControl` instead. */
 	default as __experimentalBoxControl,
+	default as BoxControl,
 	applyValueToSides as __experimentalApplyValueToSides,
 } from './box-control';
 export { default as Button } from './button';
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index d9412c504940b..744e3f74c5b95 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -1,5 +1,4 @@
 .components-menu-group + .components-menu-group {
-	margin-top: $grid-unit-10;
 	padding-top: $grid-unit-10;
 	border-top: $border-width solid $gray-900;
 
@@ -10,6 +9,10 @@
 	}
 }
 
+.components-menu-group:has(> div:empty) {
+	display: none;
+}
+
 .components-menu-group__label {
 	padding: 0 $grid-unit-10;
 	margin-top: $grid-unit-05;
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 5de8363be0d6e..383eb4066ba86 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,5 +1,7 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
+	height: auto;
+
 	svg {
 		margin-right: $grid-unit-15;
 	}
diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx
index 7d988a0e7240b..7d55c9a4d5d1e 100644
--- a/packages/components/src/modal/index.tsx
+++ b/packages/components/src/modal/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import type { ForwardedRef, KeyboardEvent, RefObject, UIEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -38,10 +37,11 @@ import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { Spacer } from '../spacer';
+import { useModalExitAnimation } from './use-modal-exit-animation';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 type Dismissers = Set<
-	RefObject< ModalProps[ 'onRequestClose' ] | undefined >
+	React.RefObject< ModalProps[ 'onRequestClose' ] | undefined >
 >;
 const ModalContext = createContext< Dismissers >( new Set() );
 
@@ -50,7 +50,7 @@ const bodyOpenClasses = new Map< string, number >();
 
 function UnforwardedModal(
 	props: ModalProps,
-	forwardedRef: ForwardedRef< HTMLDivElement >
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) {
 	const {
 		bodyOpenClassName = 'modal-open',
@@ -70,7 +70,7 @@ function UnforwardedModal(
 		closeButtonLabel,
 		children,
 		style,
-		overlayClassName,
+		overlayClassName: overlayClassnameProp,
 		className,
 		contentLabel,
 		onKeyDown,
@@ -184,6 +184,9 @@ function UnforwardedModal(
 		};
 	}, [ bodyOpenClassName ] );
 
+	const { closeModal, frameRef, frameStyle, overlayClassname } =
+		useModalExitAnimation();
+
 	// Calls the isContentScrollable callback when the Modal children container resizes.
 	useLayoutEffect( () => {
 		if ( ! window.ResizeObserver || ! childrenContainerRef.current ) {
@@ -200,21 +203,21 @@ function UnforwardedModal(
 		};
 	}, [ isContentScrollable, childrenContainerRef ] );
 
-	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+	function handleEscapeKeyDown(
+		event: React.KeyboardEvent< HTMLDivElement >
+	) {
 		if (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
-			if ( onRequestClose ) {
-				onRequestClose( event );
-			}
+			closeModal().then( () => onRequestClose( event ) );
 		}
 	}
 
 	const onContentContainerScroll = useCallback(
-		( e: UIEvent< HTMLDivElement > ) => {
+		( e: React.UIEvent< HTMLDivElement > ) => {
 			const scrollY = e?.currentTarget?.scrollTop ?? -1;
 
 			if ( ! hasScrolledContent && scrollY > 0 ) {
@@ -248,7 +251,7 @@ function UnforwardedModal(
 			const isSameTarget = target === pressTarget;
 			pressTarget = null;
 			if ( button === 0 && isSameTarget ) {
-				onRequestClose();
+				closeModal().then( () => onRequestClose() );
 			}
 		},
 	};
@@ -259,7 +262,8 @@ function UnforwardedModal(
 			ref={ useMergeRefs( [ ref, forwardedRef ] ) }
 			className={ clsx(
 				'components-modal__screen-overlay',
-				overlayClassName
+				overlayClassname,
+				overlayClassnameProp
 			) }
 			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
@@ -271,8 +275,12 @@ function UnforwardedModal(
 						sizeClass,
 						className
 					) }
-					style={ style }
+					style={ {
+						...frameStyle,
+						...style,
+					} }
 					ref={ useMergeRefs( [
+						frameRef,
 						constrainedTabbingRef,
 						focusReturnRef,
 						focusOnMount !== 'firstContentElement'
@@ -331,7 +339,13 @@ function UnforwardedModal(
 										/>
 										<Button
 											size="small"
-											onClick={ onRequestClose }
+											onClick={ (
+												event: React.MouseEvent< HTMLButtonElement >
+											) =>
+												closeModal().then( () =>
+													onRequestClose( event )
+												)
+											}
 											icon={ close }
 											label={
 												closeButtonLabel ||
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 8c7c8416f0190..70959f69392d1 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -8,8 +8,15 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
-	// This animates the appearance of the white background.
-	@include edit-post__fade-in-animation();
+	// This animates the appearance of the backdrop.
+	@include animation__fade-in();
+
+	&.is-animating-out {
+		// Note: it's important that the fade-out animation doesn't end after the
+		// modal frame's disappear animation, because the component will be removed
+		// from the DOM when that animation ends.
+		@include animation__fade-out($delay: 80ms);
+	}
 }
 
 // The modal window element.
@@ -25,10 +32,17 @@
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
 	// Animate the modal frame/contents appearing on the page.
-	animation: components-modal__appear-animation 0.26s cubic-bezier(0.29, 0, 0, 1);
+	animation-name: components-modal__appear-animation;
+	animation-duration: var(--modal-frame-animation-duration);
 	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
 	@include reduce-motion("animation");
 
+	.components-modal__screen-overlay.is-animating-out & {
+		animation-name: components-modal__disappear-animation;
+		animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
+	}
+
 	// Show a centered modal on bigger screens.
 	@include break-small() {
 		border-radius: $radius-large;
@@ -88,6 +102,19 @@
 	}
 }
 
+// Note: this animation is also used in the animationend JS event listener.
+// Make sure that the animation name is kept in sync across the two files.
+@keyframes components-modal__disappear-animation {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+}
+
 // Fix header to the top so it is always there to provide context to the modal
 // if the content needs to be scrolled (for example, on the keyboard shortcuts
 // modal screen).
diff --git a/packages/components/src/modal/types.ts b/packages/components/src/modal/types.ts
index 0a422718b1be1..f6f35eec85fc7 100644
--- a/packages/components/src/modal/types.ts
+++ b/packages/components/src/modal/types.ts
@@ -1,15 +1,3 @@
-/**
- * External dependencies
- */
-import type {
-	AriaRole,
-	CSSProperties,
-	ReactNode,
-	KeyboardEventHandler,
-	KeyboardEvent,
-	SyntheticEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -42,7 +30,7 @@ export type ModalProps = {
 	/**
 	 * The children elements.
 	 */
-	children: ReactNode;
+	children: React.ReactNode;
 	/**
 	 * If this property is added, it will an additional class name to the modal
 	 * content `div`.
@@ -77,7 +65,7 @@ export type ModalProps = {
 	 *
 	 * @default null
 	 */
-	headerActions?: ReactNode;
+	headerActions?: React.ReactNode;
 
 	/**
 	 * If this property is added, an icon will be added before the title.
@@ -108,12 +96,12 @@ export type ModalProps = {
 	/**
 	 *  Handle the key down on the modal frame `div`.
 	 */
-	onKeyDown?: KeyboardEventHandler< HTMLDivElement >;
+	onKeyDown?: React.KeyboardEventHandler< HTMLDivElement >;
 	/**
 	 * This function is called to indicate that the modal should be closed.
 	 */
 	onRequestClose: (
-		event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent
+		event?: React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent
 	) => void;
 	/**
 	 * If this property is added, it will an additional class name to the modal
@@ -126,7 +114,7 @@ export type ModalProps = {
 	 *
 	 * @default 'dialog'
 	 */
-	role?: AriaRole;
+	role?: React.AriaRole;
 	/**
 	 * If this property is added, it will determine whether the modal requests
 	 * to close when a mouse click occurs outside of the modal content.
@@ -144,7 +132,7 @@ export type ModalProps = {
 	/**
 	 * If this property is added, it will be added to the modal frame `div`.
 	 */
-	style?: CSSProperties;
+	style?: React.CSSProperties;
 	/**
 	 * This property is used as the modal header's title.
 	 *
diff --git a/packages/components/src/modal/use-modal-exit-animation.ts b/packages/components/src/modal/use-modal-exit-animation.ts
new file mode 100644
index 0000000000000..729b4f9ea6f86
--- /dev/null
+++ b/packages/components/src/modal/use-modal-exit-animation.ts
@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { useReducedMotion } from '@wordpress/compose';
+import { useCallback, useRef, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../utils';
+import warning from '@wordpress/warning';
+
+// Animation duration (ms) extracted to JS in order to be used on a setTimeout.
+const FRAME_ANIMATION_DURATION = CONFIG.transitionDuration;
+const FRAME_ANIMATION_DURATION_NUMBER = Number.parseInt(
+	CONFIG.transitionDuration
+);
+
+const EXIT_ANIMATION_NAME = 'components-modal__disappear-animation';
+
+export function useModalExitAnimation() {
+	const frameRef = useRef< HTMLDivElement >();
+	const [ isAnimatingOut, setIsAnimatingOut ] = useState( false );
+	const isReducedMotion = useReducedMotion();
+
+	const closeModal = useCallback(
+		() =>
+			new Promise< void >( ( closeModalResolve ) => {
+				// Grab a "stable" reference of the frame element, since
+				// the value held by the react ref might change at runtime.
+				const frameEl = frameRef.current;
+
+				if ( isReducedMotion ) {
+					closeModalResolve();
+					return;
+				}
+
+				if ( ! frameEl ) {
+					warning(
+						"wp.components.Modal: the Modal component can't be closed with an exit animation because of a missing reference to the modal frame element."
+					);
+					closeModalResolve();
+					return;
+				}
+
+				let handleAnimationEnd:
+					| undefined
+					| ( ( e: AnimationEvent ) => void );
+
+				const startAnimation = () =>
+					new Promise< void >( ( animationResolve ) => {
+						handleAnimationEnd = ( e: AnimationEvent ) => {
+							if ( e.animationName === EXIT_ANIMATION_NAME ) {
+								animationResolve();
+							}
+						};
+
+						frameEl.addEventListener(
+							'animationend',
+							handleAnimationEnd
+						);
+						setIsAnimatingOut( true );
+					} );
+				const animationTimeout = () =>
+					new Promise< void >( ( timeoutResolve ) => {
+						setTimeout(
+							() => timeoutResolve(),
+							// Allow an extra 20% of the animation duration for the
+							// animationend event to fire, in case the animation frame is
+							// slightly delayes by some other events in the event loop.
+							FRAME_ANIMATION_DURATION_NUMBER * 1.2
+						);
+					} );
+
+				Promise.race( [ startAnimation(), animationTimeout() ] ).then(
+					() => {
+						if ( handleAnimationEnd ) {
+							frameEl.removeEventListener(
+								'animationend',
+								handleAnimationEnd
+							);
+						}
+						setIsAnimatingOut( false );
+						closeModalResolve();
+					}
+				);
+			} ),
+		[ isReducedMotion ]
+	);
+
+	return {
+		overlayClassname: isAnimatingOut ? 'is-animating-out' : undefined,
+		frameRef,
+		frameStyle: {
+			'--modal-frame-animation-duration': `${ FRAME_ANIMATION_DURATION }`,
+		},
+		closeModal,
+	};
+}
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index ebcb247c57483..01254b743f87d 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -66,7 +66,7 @@ function goTo(
 	options: NavigateOptions = {}
 ) {
 	const { focusSelectors } = state;
-	const currentLocation = { ...state.currentLocation, isInitial: false };
+	const currentLocation = { ...state.currentLocation };
 
 	const {
 		// Default assignments
@@ -114,6 +114,7 @@ function goTo(
 	return {
 		currentLocation: {
 			...restOptions,
+			isInitial: false,
 			path,
 			isBack,
 			hasRestoredFocus: false,
@@ -129,7 +130,7 @@ function goToParent(
 	options: NavigateToParentOptions = {}
 ) {
 	const { screens, focusSelectors } = state;
-	const currentLocation = { ...state.currentLocation, isInitial: false };
+	const currentLocation = { ...state.currentLocation };
 	const currentPath = currentLocation.path;
 	if ( currentPath === undefined ) {
 		return { currentLocation, focusSelectors };
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index bfab8978864b3..601e9ebb7675f 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -22,7 +22,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover__content {
 	background: $white;
-	box-shadow: $shadow-popover-border-default, $elevation-x-small;
+	box-shadow: $shadow-popover-border-default, $elevation-medium;
 	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index e2b651bd317da..dae1d0de3ddb6 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -239,6 +239,7 @@ export const Thumb = styled.span< ThumbProps >`
 	position: absolute;
 	user-select: none;
 	width: 100%;
+	box-shadow: ${ CONFIG.elevationXSmall };
 
 	${ thumbColor };
 	${ thumbFocus };
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 2e709a5bbb382..3c9efd2713646 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index e7f29267d6f6d..1e76a1666411e 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -4,7 +4,7 @@
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-medium;
-	box-shadow: $elevation-x-small;
+	box-shadow: $elevation-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
index a6425f9ab31e4..c00943b180f63 100644
--- a/packages/components/src/tabs/styles.ts
+++ b/packages/components/src/tabs/styles.ts
@@ -76,7 +76,7 @@ export const TabListWrapper = styled.div`
 		top: 0;
 		left: 0;
 		width: 100%;
-		width: calc( var( --antialiasing-factor ) * 1px );
+		height: calc( var( --antialiasing-factor ) * 1px );
 		transform: translateY( calc( var( --indicator-top ) * 1px ) )
 			scaleY(
 				calc( var( --indicator-height ) / var( --antialiasing-factor ) )
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
index 86efc5224077f..020468991225c 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -70,7 +70,7 @@ export const buttonView = ( {
 	}
 
 	&:active {
-		background: ${ CONFIG.toggleGroupControlBackgroundColor };
+		background: ${ CONFIG.controlBackgroundColor };
 	}
 
 	${ isDeselectable && deselectable }
diff --git a/packages/components/src/tools-panel/tools-panel/README.md b/packages/components/src/tools-panel/tools-panel/README.md
index df41b623eefb6..1daa7537335e1 100644
--- a/packages/components/src/tools-panel/tools-panel/README.md
+++ b/packages/components/src/tools-panel/tools-panel/README.md
@@ -60,7 +60,7 @@ import styled from '@emotion/styled';
  * WordPress dependencies
  */
 import {
-	__experimentalBoxControl as BoxControl,
+	BoxControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
@@ -91,8 +91,8 @@ export function DimensionPanel() {
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			<PanelDescription>
-				Select dimensions or spacing related settings from the
-				menu for additional controls.
+				Select dimensions or spacing related settings from the menu for
+				additional controls.
 			</PanelDescription>
 			<SingleColumnItem
 				hasValue={ () => !! height }
@@ -154,8 +154,8 @@ export function DimensionPanel() {
 Flags that the items in this ToolsPanel will be contained within an inner
 wrapper element allowing the panel to lay them out accordingly.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `dropdownMenuProps`: `{}`
 
@@ -176,7 +176,7 @@ The heading level of the panel's header.
 Text to be displayed within the panel's header and as the `aria-label` for the
 panel's dropdown menu.
 
-- Required: Yes
+-   Required: Yes
 
 ### `panelId`: `string | null`
 
@@ -185,13 +185,13 @@ to restrict panel items. When a `panelId` is set, items can only register
 themselves if the `panelId` is explicitly `null` or the item's `panelId` matches
 exactly.
 
-- Required: No
+-   Required: No
 
 ### `resetAll`: `( filters?: ResetAllFilter[] ) => void`
 
 A function to call when the `Reset all` menu option is selected. As an argument, it receives an array containing the `resetAllFilter` callbacks of all the valid registered `ToolsPanelItems`.
 
-- Required: Yes
+-   Required: Yes
 
 ### `shouldRenderPlaceholderItems`: `boolean`
 
@@ -201,5 +201,5 @@ placeholder content (instead of `null`) when they are toggled off and hidden.
 Note that placeholder items won't apply the `className` that would be
 normally applied to a visible `ToolsPanelItem` via the `className` prop.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts
index 931bf2494e6e3..583a079ab2002 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.ts
+++ b/packages/components/src/tools-panel/tools-panel/hook.ts
@@ -5,8 +5,8 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useReducer,
 	useRef,
-	useState,
 } from '@wordpress/element';
 
 /**
@@ -27,14 +27,40 @@ import type {
 
 const DEFAULT_COLUMNS = 2;
 
+type PanelItemsState = {
+	panelItems: ToolsPanelItem[];
+	menuItemOrder: string[];
+	menuItems: ToolsPanelMenuItems;
+};
+
+type PanelItemsAction =
+	| { type: 'REGISTER_PANEL'; item: ToolsPanelItem }
+	| { type: 'UNREGISTER_PANEL'; label: string }
+	| {
+			type: 'UPDATE_VALUE';
+			group: ToolsPanelMenuItemKey;
+			label: string;
+			value: boolean;
+	  }
+	| { type: 'TOGGLE_VALUE'; label: string }
+	| { type: 'RESET_ALL' };
+
+function emptyMenuItems(): ToolsPanelMenuItems {
+	return { default: {}, optional: {} };
+}
+
+function emptyState(): PanelItemsState {
+	return { panelItems: [], menuItemOrder: [], menuItems: emptyMenuItems() };
+}
+
 const generateMenuItems = ( {
 	panelItems,
 	shouldReset,
 	currentMenuItems,
 	menuItemOrder,
 }: ToolsPanelMenuItemsConfig ) => {
-	const newMenuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
-	const menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };
+	const newMenuItems: ToolsPanelMenuItems = emptyMenuItems();
+	const menuItems: ToolsPanelMenuItems = emptyMenuItems();
 
 	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
 		const group = isShownByDefault ? 'default' : 'optional';
@@ -75,9 +101,149 @@ const generateMenuItems = ( {
 	return menuItems;
 };
 
+function panelItemsReducer(
+	panelItems: ToolsPanelItem[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			const newItems = [ ...panelItems ];
+			// If an item with this label has already been registered, remove it
+			// first. This can happen when an item is moved between the default
+			// and optional groups.
+			const existingIndex = newItems.findIndex(
+				( oldItem ) => oldItem.label === action.item.label
+			);
+			if ( existingIndex !== -1 ) {
+				newItems.splice( existingIndex, 1 );
+			}
+			newItems.push( action.item );
+			return newItems;
+		}
+		case 'UNREGISTER_PANEL': {
+			const index = panelItems.findIndex(
+				( item ) => item.label === action.label
+			);
+			if ( index !== -1 ) {
+				const newItems = [ ...panelItems ];
+				newItems.splice( index, 1 );
+				return newItems;
+			}
+			return panelItems;
+		}
+		default:
+			return panelItems;
+	}
+}
+
+function menuItemOrderReducer(
+	menuItemOrder: string[],
+	action: PanelItemsAction
+) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL': {
+			// Track the initial order of item registration. This is used for
+			// maintaining menu item order later.
+			if ( menuItemOrder.includes( action.item.label ) ) {
+				return menuItemOrder;
+			}
+
+			return [ ...menuItemOrder, action.item.label ];
+		}
+		default:
+			return menuItemOrder;
+	}
+}
+
+function menuItemsReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	switch ( action.type ) {
+		case 'REGISTER_PANEL':
+		case 'UNREGISTER_PANEL':
+			// generate new menu items from original `menuItems` and updated `panelItems` and `menuItemOrder`
+			return generateMenuItems( {
+				currentMenuItems: state.menuItems,
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: false,
+			} );
+		case 'RESET_ALL':
+			return generateMenuItems( {
+				panelItems: state.panelItems,
+				menuItemOrder: state.menuItemOrder,
+				shouldReset: true,
+			} );
+		case 'UPDATE_VALUE': {
+			const oldValue = state.menuItems[ action.group ][ action.label ];
+			if ( action.value === oldValue ) {
+				return state.menuItems;
+			}
+			return {
+				...state.menuItems,
+				[ action.group ]: {
+					...state.menuItems[ action.group ],
+					[ action.label ]: action.value,
+				},
+			};
+		}
+		case 'TOGGLE_VALUE': {
+			const currentItem = state.panelItems.find(
+				( item ) => item.label === action.label
+			);
+
+			if ( ! currentItem ) {
+				return state.menuItems;
+			}
+
+			const menuGroup = currentItem.isShownByDefault
+				? 'default'
+				: 'optional';
+
+			const newMenuItems = {
+				...state.menuItems,
+				[ menuGroup ]: {
+					...state.menuItems[ menuGroup ],
+					[ action.label ]:
+						! state.menuItems[ menuGroup ][ action.label ],
+				},
+			};
+			return newMenuItems;
+		}
+
+		default:
+			return state.menuItems;
+	}
+}
+
+function panelReducer( state: PanelItemsState, action: PanelItemsAction ) {
+	const panelItems = panelItemsReducer( state.panelItems, action );
+	const menuItemOrder = menuItemOrderReducer( state.menuItemOrder, action );
+	// `menuItemsReducer` is a bit unusual because it generates new state from original `menuItems`
+	// and the updated `panelItems` and `menuItemOrder`.
+	const menuItems = menuItemsReducer(
+		{ panelItems, menuItemOrder, menuItems: state.menuItems },
+		action
+	);
+
+	return { panelItems, menuItemOrder, menuItems };
+}
+
+function resetAllFiltersReducer(
+	filters: ResetAllFilter[],
+	action: { type: 'REGISTER' | 'UNREGISTER'; filter: ResetAllFilter }
+) {
+	switch ( action.type ) {
+		case 'REGISTER':
+			return [ ...filters, action.filter ];
+		case 'UNREGISTER':
+			return filters.filter( ( f ) => f !== action.filter );
+		default:
+			return filters;
+	}
+}
+
 const isMenuItemTypeEmpty = (
-	obj?: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
-) => obj && Object.keys( obj ).length === 0;
+	obj: ToolsPanelMenuItems[ ToolsPanelMenuItemKey ]
+) => Object.keys( obj ).length === 0;
 
 export function useToolsPanel(
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >
@@ -108,103 +274,43 @@ export function useToolsPanel(
 	}, [ wasResetting ] );
 
 	// Allow panel items to register themselves.
-	const [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );
-	const [ menuItemOrder, setMenuItemOrder ] = useState< string[] >( [] );
-	const [ resetAllFilters, setResetAllFilters ] = useState<
-		ResetAllFilter[]
-	>( [] );
-
-	const registerPanelItem = useCallback(
-		( item: ToolsPanelItem ) => {
-			// Add item to panel items.
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				// If an item with this label has already been registered, remove it
-				// first. This can happen when an item is moved between the default
-				// and optional groups.
-				const existingIndex = newItems.findIndex(
-					( oldItem ) => oldItem.label === item.label
-				);
-				if ( existingIndex !== -1 ) {
-					newItems.splice( existingIndex, 1 );
-				}
-				return [ ...newItems, item ];
-			} );
-
-			// Track the initial order of item registration. This is used for
-			// maintaining menu item order later.
-			setMenuItemOrder( ( items ) => {
-				if ( items.includes( item.label ) ) {
-					return items;
-				}
+	const [ { panelItems, menuItems }, panelDispatch ] = useReducer(
+		panelReducer,
+		undefined,
+		emptyState
+	);
 
-				return [ ...items, item.label ];
-			} );
-		},
-		[ setPanelItems, setMenuItemOrder ]
+	const [ resetAllFilters, dispatchResetAllFilters ] = useReducer(
+		resetAllFiltersReducer,
+		[]
 	);
 
+	const registerPanelItem = useCallback( ( item: ToolsPanelItem ) => {
+		// Add item to panel items.
+		panelDispatch( { type: 'REGISTER_PANEL', item } );
+	}, [] );
+
 	// Panels need to deregister on unmount to avoid orphans in menu state.
 	// This is an issue when panel items are being injected via SlotFills.
-	const deregisterPanelItem = useCallback(
-		( label: string ) => {
-			// When switching selections between components injecting matching
-			// controls, e.g. both panels have a "padding" control, the
-			// deregistration of the first panel doesn't occur until after the
-			// registration of the next.
-			setPanelItems( ( items ) => {
-				const newItems = [ ...items ];
-				const index = newItems.findIndex(
-					( item ) => item.label === label
-				);
-				if ( index !== -1 ) {
-					newItems.splice( index, 1 );
-				}
-				return newItems;
-			} );
-		},
-		[ setPanelItems ]
-	);
-
-	const registerResetAllFilter = useCallback(
-		( newFilter: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return [ ...filters, newFilter ];
-			} );
-		},
-		[ setResetAllFilters ]
-	);
+	const deregisterPanelItem = useCallback( ( label: string ) => {
+		// When switching selections between components injecting matching
+		// controls, e.g. both panels have a "padding" control, the
+		// deregistration of the first panel doesn't occur until after the
+		// registration of the next.
+		panelDispatch( { type: 'UNREGISTER_PANEL', label } );
+	}, [] );
+
+	const registerResetAllFilter = useCallback( ( filter: ResetAllFilter ) => {
+		dispatchResetAllFilters( { type: 'REGISTER', filter } );
+	}, [] );
 
 	const deregisterResetAllFilter = useCallback(
-		( filterToRemove: ResetAllFilter ) => {
-			setResetAllFilters( ( filters ) => {
-				return filters.filter(
-					( filter ) => filter !== filterToRemove
-				);
-			} );
+		( filter: ResetAllFilter ) => {
+			dispatchResetAllFilters( { type: 'UNREGISTER', filter } );
 		},
-		[ setResetAllFilters ]
+		[]
 	);
 
-	// Manage and share display state of menu items representing child controls.
-	const [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {
-		default: {},
-		optional: {},
-	} );
-
-	// Setup menuItems state as panel items register themselves.
-	useEffect( () => {
-		setMenuItems( ( prevState ) => {
-			const items = generateMenuItems( {
-				panelItems,
-				shouldReset: false,
-				currentMenuItems: prevState,
-				menuItemOrder,
-			} );
-			return items;
-		} );
-	}, [ panelItems, setMenuItems, menuItemOrder ] );
-
 	// Updates the status of the panel’s menu items. For default items the
 	// value represents whether it differs from the default and for optional
 	// items whether the item is shown.
@@ -214,38 +320,24 @@ export function useToolsPanel(
 			label: string,
 			group: ToolsPanelMenuItemKey = 'default'
 		) => {
-			setMenuItems( ( items ) => {
-				const newState = {
-					...items,
-					[ group ]: {
-						...items[ group ],
-						[ label ]: value,
-					},
-				};
-				return newState;
-			} );
+			panelDispatch( { type: 'UPDATE_VALUE', group, label, value } );
 		},
-		[ setMenuItems ]
+		[]
 	);
 
 	// Whether all optional menu items are hidden or not must be tracked
 	// in order to later determine if the panel display is empty and handle
 	// conditional display of a plus icon to indicate the presence of further
 	// menu items.
-	const [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =
-		useState( false );
-
-	useEffect( () => {
-		if (
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			! isMenuItemTypeEmpty( menuItems?.optional )
-		) {
-			const allControlsHidden = ! Object.entries(
-				menuItems.optional
-			).some( ( [ , isSelected ] ) => isSelected );
-			setAreAllOptionalControlsHidden( allControlsHidden );
-		}
-	}, [ menuItems, setAreAllOptionalControlsHidden ] );
+	const areAllOptionalControlsHidden = useMemo( () => {
+		return (
+			isMenuItemTypeEmpty( menuItems.default ) &&
+			! isMenuItemTypeEmpty( menuItems.optional ) &&
+			Object.values( menuItems.optional ).every(
+				( isSelected ) => ! isSelected
+			)
+		);
+	}, [ menuItems ] );
 
 	const cx = useCx();
 	const classes = useMemo( () => {
@@ -253,9 +345,7 @@ export function useToolsPanel(
 			hasInnerWrapper &&
 			styles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );
 		const emptyStyle =
-			isMenuItemTypeEmpty( menuItems?.default ) &&
-			areAllOptionalControlsHidden &&
-			styles.ToolsPanelHiddenInnerWrapper;
+			areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
 
 		return cx(
 			styles.ToolsPanel( DEFAULT_COLUMNS ),
@@ -263,42 +353,13 @@ export function useToolsPanel(
 			emptyStyle,
 			className
 		);
-	}, [
-		areAllOptionalControlsHidden,
-		className,
-		cx,
-		hasInnerWrapper,
-		menuItems,
-	] );
+	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
-	const toggleItem = useCallback(
-		( label: string ) => {
-			const currentItem = panelItems.find(
-				( item ) => item.label === label
-			);
-
-			if ( ! currentItem ) {
-				return;
-			}
-
-			const menuGroup = currentItem.isShownByDefault
-				? 'default'
-				: 'optional';
-
-			const newMenuItems = {
-				...menuItems,
-				[ menuGroup ]: {
-					...menuItems[ menuGroup ],
-					[ label ]: ! menuItems[ menuGroup ][ label ],
-				},
-			};
-
-			setMenuItems( newMenuItems );
-		},
-		[ menuItems, panelItems, setMenuItems ]
-	);
+	const toggleItem = useCallback( ( label: string ) => {
+		panelDispatch( { type: 'TOGGLE_VALUE', label } );
+	}, [] );
 
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = useCallback( () => {
@@ -308,20 +369,15 @@ export function useToolsPanel(
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = generateMenuItems( {
-			panelItems,
-			menuItemOrder,
-			shouldReset: true,
-		} );
-		setMenuItems( resetMenuItems );
-	}, [ panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder ] );
+		panelDispatch( { type: 'RESET_ALL' } );
+	}, [ resetAllFilters, resetAll ] );
 
 	// Assist ItemGroup styling when there are potentially hidden placeholder
 	// items by identifying first & last items that are toggled on for display.
 	const getFirstVisibleItemLabel = ( items: ToolsPanelItem[] ) => {
 		const optionalItems = menuItems.optional || {};
 		const firstItem = items.find(
-			( item ) => item.isShownByDefault || !! optionalItems[ item.label ]
+			( item ) => item.isShownByDefault || optionalItems[ item.label ]
 		);
 
 		return firstItem?.label;
@@ -332,6 +388,8 @@ export function useToolsPanel(
 		[ ...panelItems ].reverse()
 	);
 
+	const hasMenuItems = panelItems.length > 0;
+
 	const panelContext = useMemo(
 		() => ( {
 			areAllOptionalControlsHidden,
@@ -339,7 +397,7 @@ export function useToolsPanel(
 			deregisterResetAllFilter,
 			firstDisplayedItem,
 			flagItemCustomization,
-			hasMenuItems: !! panelItems.length,
+			hasMenuItems,
 			isResetting: isResettingRef.current,
 			lastDisplayedItem,
 			menuItems,
@@ -359,7 +417,7 @@ export function useToolsPanel(
 			lastDisplayedItem,
 			menuItems,
 			panelId,
-			panelItems,
+			hasMenuItems,
 			registerResetAllFilter,
 			registerPanelItem,
 			shouldRenderPlaceholderItems,
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index eaac8b3ad1c7f..e84946e4a9176 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -8,6 +8,7 @@
 	font-size: 12px;
 	padding: $grid-unit-05 $grid-unit-10;
 	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index 4d7ed859e89ed..1bc3945f9b3b1 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -7,18 +7,13 @@ import { COLORS } from './colors-values';
 const CONTROL_HEIGHT = '36px';
 
 const CONTROL_PROPS = {
-	controlSurfaceColor: COLORS.white,
-	controlTextActiveColor: COLORS.theme.accent,
-
 	// These values should be shared with TextControl.
 	controlPaddingX: 12,
 	controlPaddingXSmall: 8,
 	controlPaddingXLarge: 12 * 1.3334, // TODO: Deprecate
 
 	controlBackgroundColor: COLORS.white,
-	controlBoxShadow: 'transparent',
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.theme.accent }`,
-	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`,
 	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,
@@ -26,18 +21,9 @@ const CONTROL_PROPS = {
 	controlHeightXLarge: `calc( ${ CONTROL_HEIGHT } * 1.4 )`,
 };
 
-const TOGGLE_GROUP_CONTROL_PROPS = {
-	toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
-	toggleGroupControlBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBackgroundColor:
-		CONTROL_PROPS.controlSurfaceColor,
-	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
-};
-
 // Using Object.assign to avoid creating circular references when emitting
 // TypeScript type declarations.
-export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
+export default Object.assign( {}, CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
 	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
 	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
@@ -72,10 +58,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
-	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
-	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
-	elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',
diff --git a/packages/components/src/utils/element-rect.ts b/packages/components/src/utils/element-rect.ts
index 550ec35b0bc93..a96c25ecfac94 100644
--- a/packages/components/src/utils/element-rect.ts
+++ b/packages/components/src/utils/element-rect.ts
@@ -3,11 +3,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import { useEvent } from './hooks/use-event';
+import { useEvent, useResizeObserver } from '@wordpress/compose';
 
 /**
  * The position and dimensions of an element, relative to its offset parent.
diff --git a/packages/components/src/utils/hooks/use-event.ts b/packages/components/src/utils/hooks/use-event.ts
deleted file mode 100644
index eefac9478a8b4..0000000000000
--- a/packages/components/src/utils/hooks/use-event.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable jsdoc/require-param */
-/**
- * WordPress dependencies
- */
-import { useRef, useInsertionEffect, useCallback } from '@wordpress/element';
-
-/**
- * Any function.
- */
-export type AnyFunction = ( ...args: any ) => any;
-
-/**
- * Creates a stable callback function that has access to the latest state and
- * can be used within event handlers and effect callbacks. Throws when used in
- * the render phase.
- *
- * @example
- *
- * ```tsx
- * function Component(props) {
- *   const onClick = useEvent(props.onClick);
- *   React.useEffect(() => {}, [onClick]);
- * }
- * ```
- */
-export function useEvent< T extends AnyFunction >( callback?: T ) {
-	const ref = useRef< AnyFunction | undefined >( () => {
-		throw new Error( 'Cannot call an event handler while rendering.' );
-	} );
-	useInsertionEffect( () => {
-		ref.current = callback;
-	} );
-	return useCallback< AnyFunction >(
-		( ...args ) => ref.current?.( ...args ),
-		[]
-	) as T;
-}
-/* eslint-enable jsdoc/require-param */
diff --git a/packages/components/src/utils/hooks/use-on-value-update.ts b/packages/components/src/utils/hooks/use-on-value-update.ts
index 5726f3977daf0..05c7173d092fa 100644
--- a/packages/components/src/utils/hooks/use-on-value-update.ts
+++ b/packages/components/src/utils/hooks/use-on-value-update.ts
@@ -2,11 +2,8 @@
 /**
  * WordPress dependencies
  */
+import { useEvent } from '@wordpress/compose';
 import { useRef, useEffect } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useEvent } from './use-event';
 
 /**
  * Context object for the `onUpdate` callback of `useOnValueUpdate`.
diff --git a/packages/compose/CHANGELOG.md b/packages/compose/CHANGELOG.md
index cc0d7ef333f0d..28269dca692a4 100644
--- a/packages/compose/CHANGELOG.md
+++ b/packages/compose/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   `useResizeObserver`: export legacy API at top-level for React Native ([#65588](https://github.com/WordPress/gutenberg/pull/65588)).
+
+## 7.8.0 (2024-09-19)
+
 ### New Features
 
 -   `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 4b68841d1777e..f52ac9956a75c 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/compose/src/hooks/use-resize-observer/index.native.js b/packages/compose/src/hooks/use-resize-observer/index.native.js
new file mode 100644
index 0000000000000..79eb3e569e332
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/index.native.js
@@ -0,0 +1 @@
+export { default } from './legacy/index.native';
diff --git a/packages/compose/src/hooks/use-resize-observer/index.ts b/packages/compose/src/hooks/use-resize-observer/index.ts
index 2a76b2aa6ab59..1bd0f074cc49f 100644
--- a/packages/compose/src/hooks/use-resize-observer/index.ts
+++ b/packages/compose/src/hooks/use-resize-observer/index.ts
@@ -1,53 +1,14 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useEvent from '../use-event';
-import type { ObservedSize } from './_legacy';
-import _useLegacyResizeObserver from './_legacy';
+import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
+import type { ObservedSize } from './legacy';
+import _useLegacyResizeObserver from './legacy';
 /**
  * External dependencies
  */
 import type { ReactElement } from 'react';
 
-// This is the current implementation of `useResizeObserver`.
-//
-// The legacy implementation is still supported for backwards compatibility.
-// This is achieved by overloading the exported function with both signatures,
-// and detecting which API is being used at runtime.
-function _useResizeObserver< T extends HTMLElement >(
-	callback: ResizeObserverCallback,
-	resizeObserverOptions: ResizeObserverOptions = {}
-): ( element?: T | null ) => void {
-	const callbackEvent = useEvent( callback );
-
-	const observedElementRef = useRef< T | null >();
-	const resizeObserverRef = useRef< ResizeObserver >();
-	return useEvent( ( element?: T | null ) => {
-		if ( element === observedElementRef.current ) {
-			return;
-		}
-		observedElementRef.current = element;
-
-		// Set up `ResizeObserver`.
-		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
-		const { current: resizeObserver } = resizeObserverRef;
-
-		// Unobserve previous element.
-		if ( observedElementRef.current ) {
-			resizeObserver.unobserve( observedElementRef.current );
-		}
-
-		// Observe new element.
-		if ( element ) {
-			resizeObserver.observe( element, resizeObserverOptions );
-		}
-	} );
-}
-
 /**
  * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
  * for an HTML or SVG element.
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
similarity index 98%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
rename to packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
index b44bd84196416..fe76581098222 100644
--- a/packages/compose/src/hooks/use-resize-observer/_legacy/index.tsx
+++ b/packages/compose/src/hooks/use-resize-observer/legacy/index.tsx
@@ -10,7 +10,7 @@ import { useCallback, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import useResizeObserver from '../index';
+import { useResizeObserver } from '../use-resize-observer';
 
 export type ObservedSize = {
 	width: number | null;
diff --git a/packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js b/packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
similarity index 100%
rename from packages/compose/src/hooks/use-resize-observer/_legacy/test/index.native.js
rename to packages/compose/src/hooks/use-resize-observer/legacy/test/index.native.js
diff --git a/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
new file mode 100644
index 0000000000000..4c1031b9839dc
--- /dev/null
+++ b/packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import useEvent from '../use-event';
+
+// This is the current implementation of `useResizeObserver`.
+//
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+export function useResizeObserver< T extends HTMLElement >(
+	callback: ResizeObserverCallback,
+	resizeObserverOptions: ResizeObserverOptions = {}
+): ( element?: T | null ) => void {
+	const callbackEvent = useEvent( callback );
+
+	const observedElementRef = useRef< T | null >();
+	const resizeObserverRef = useRef< ResizeObserver >();
+	return useEvent( ( element?: T | null ) => {
+		if ( element === observedElementRef.current ) {
+			return;
+		}
+
+		// Set up `ResizeObserver`.
+		resizeObserverRef.current ??= new ResizeObserver( callbackEvent );
+		const { current: resizeObserver } = resizeObserverRef;
+
+		// Unobserve previous element.
+		if ( observedElementRef.current ) {
+			resizeObserver.unobserve( observedElementRef.current );
+		}
+
+		// Observe new element.
+		observedElementRef.current = element;
+		if ( element ) {
+			resizeObserver.observe( element, resizeObserverOptions );
+		}
+	} );
+}
diff --git a/packages/core-commands/CHANGELOG.md b/packages/core-commands/CHANGELOG.md
index 02871d4f31e13..2d8d93373f4c5 100644
--- a/packages/core-commands/CHANGELOG.md
+++ b/packages/core-commands/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json
index bae1e4c211cf0..a2d3c76ebe5d9 100644
--- a/packages/core-commands/package.json
+++ b/packages/core-commands/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-commands",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "WordPress core reusable commands.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,6 +37,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/notices": "file:../notices",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/router": "file:../router",
 		"@wordpress/url": "file:../url"
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index 0ffa7ba7eb628..c0d8bb084b46a 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -1,9 +1,92 @@
 /**
  * WordPress dependencies
  */
-import { useCommand } from '@wordpress/commands';
+import { useCommand, useCommandLoader } from '@wordpress/commands';
 import { __ } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
+import { getPath } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from './lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function useAddNewPageCommand() {
+	const isSiteEditor = getPath( window.location.href )?.includes(
+		'site-editor.php'
+	);
+	const history = useHistory();
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme()?.is_block_theme;
+	}, [] );
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const createPageEntity = useCallback(
+		async ( { close } ) => {
+			try {
+				const page = await saveEntityRecord(
+					'postType',
+					'page',
+					{
+						status: 'draft',
+					},
+					{
+						throwOnError: true,
+					}
+				);
+				if ( page?.id ) {
+					history.push( {
+						postId: page.id,
+						postType: 'page',
+						canvas: 'edit',
+					} );
+				}
+			} catch ( error ) {
+				const errorMessage =
+					error.message && error.code !== 'unknown_error'
+						? error.message
+						: __( 'An error occurred while creating the item.' );
+
+				createErrorNotice( errorMessage, {
+					type: 'snackbar',
+				} );
+			} finally {
+				close();
+			}
+		},
+		[ createErrorNotice, history, saveEntityRecord ]
+	);
+
+	const commands = useMemo( () => {
+		const addNewPage =
+			isSiteEditor && isBlockBasedTheme
+				? createPageEntity
+				: () =>
+						( document.location.href =
+							'post-new.php?post_type=page' );
+		return [
+			{
+				name: 'core/add-new-page',
+				label: __( 'Add new page' ),
+				icon: plus,
+				callback: addNewPage,
+			},
+		];
+	}, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
 
 export function useAdminNavigationCommands() {
 	useCommand( {
@@ -14,12 +97,9 @@ export function useAdminNavigationCommands() {
 			document.location.href = 'post-new.php';
 		},
 	} );
-	useCommand( {
+
+	useCommandLoader( {
 		name: 'core/add-new-page',
-		label: __( 'Add new page' ),
-		icon: plus,
-		callback: () => {
-			document.location.href = 'post-new.php?post_type=page';
-		},
+		hook: useAddNewPageCommand,
 	} );
 }
diff --git a/packages/core-data/CHANGELOG.md b/packages/core-data/CHANGELOG.md
index 6286a55291a54..fcedd5d110066 100644
--- a/packages/core-data/CHANGELOG.md
+++ b/packages/core-data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index ddb2d2ef09177..b0eadbcea2603 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/core-data",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Access to and manipulation of core WordPress entities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/core-data/src/index.js b/packages/core-data/src/index.js
index ad6adec0203c5..99507a914f377 100644
--- a/packages/core-data/src/index.js
+++ b/packages/core-data/src/index.js
@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
 import * as resolvers from './resolvers';
 import createLocksActions from './locks/actions';
 import {
@@ -79,6 +80,7 @@ const storeConfig = () => ( {
  */
 export const store = createReduxStore( STORE_NAME, storeConfig() );
 unlock( store ).registerPrivateSelectors( privateSelectors );
+unlock( store ).registerPrivateActions( privateActions );
 register( store ); // Register store after unlocking private selectors to allow resolvers to use them.
 
 export { default as EntityProvider } from './entity-provider';
diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js
new file mode 100644
index 0000000000000..df76d2693e54f
--- /dev/null
+++ b/packages/core-data/src/private-actions.js
@@ -0,0 +1,16 @@
+/**
+ * Returns an action object used in signalling that the registered post meta
+ * fields for a post type have been received.
+ *
+ * @param {string} postType           Post type slug.
+ * @param {Object} registeredPostMeta Registered post meta.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveRegisteredPostMeta( postType, registeredPostMeta ) {
+	return {
+		type: 'RECEIVE_REGISTERED_POST_META',
+		postType,
+		registeredPostMeta,
+	};
+}
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
index 841f4ee2ef460..b2f6fa7def985 100644
--- a/packages/core-data/src/private-selectors.ts
+++ b/packages/core-data/src/private-selectors.ts
@@ -93,3 +93,15 @@ export function getEntityRecordPermissions(
 ) {
 	return getEntityRecordsPermissions( state, kind, name, id )[ 0 ];
 }
+
+/**
+ * Returns the registered post meta fields for a given post type.
+ *
+ * @param state    Data state.
+ * @param postType Post type.
+ *
+ * @return Registered post meta fields.
+ */
+export function getRegisteredPostMeta( state: State, postType: string ) {
+	return state.registeredPostMeta?.[ postType ] ?? {};
+}
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
index 97a8cc5904153..9748355fc5caf 100644
--- a/packages/core-data/src/reducer.js
+++ b/packages/core-data/src/reducer.js
@@ -628,6 +628,25 @@ export function defaultTemplates( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning an object of registered post meta.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function registeredPostMeta( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_REGISTERED_POST_META':
+			return {
+				...state,
+				[ action.postType ]: action.registeredPostMeta,
+			};
+	}
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -649,4 +668,5 @@ export default combineReducers( {
 	userPatternCategories,
 	navigationFallbackId,
 	defaultTemplates,
+	registeredPostMeta,
 } );
diff --git a/packages/core-data/src/resolvers.js b/packages/core-data/src/resolvers.js
index 9229673903623..91a73a0b3511c 100644
--- a/packages/core-data/src/resolvers.js
+++ b/packages/core-data/src/resolvers.js
@@ -645,7 +645,7 @@ export const __experimentalGetCurrentThemeBaseGlobalStyles =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		const themeGlobalStyles = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeBaseGlobalStyles(
 			currentTheme.stylesheet,
@@ -658,7 +658,7 @@ export const __experimentalGetCurrentThemeGlobalStylesVariations =
 	async ( { resolveSelect, dispatch } ) => {
 		const currentTheme = await resolveSelect.getCurrentTheme();
 		const variations = await apiFetch( {
-			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations`,
+			path: `/wp/v2/global-styles/themes/${ currentTheme.stylesheet }/variations?context=view`,
 		} );
 		dispatch.__experimentalReceiveThemeGlobalStyleVariations(
 			currentTheme.stylesheet,
@@ -984,3 +984,34 @@ export const getRevision =
 			dispatch.receiveRevisions( kind, name, recordKey, record, query );
 		}
 	};
+
+/**
+ * Requests a specific post type options from the REST API.
+ *
+ * @param {string} postType Post type slug.
+ */
+export const getRegisteredPostMeta =
+	( postType ) =>
+	async ( { dispatch, resolveSelect } ) => {
+		let options;
+		try {
+			const {
+				rest_namespace: restNamespace = 'wp/v2',
+				rest_base: restBase,
+			} = ( await resolveSelect.getPostType( postType ) ) || {};
+			options = await apiFetch( {
+				path: `${ restNamespace }/${ restBase }/?context=edit`,
+				method: 'OPTIONS',
+			} );
+		} catch ( error ) {
+			// Do nothing if the request comes back with an API error.
+			return;
+		}
+
+		if ( options ) {
+			dispatch.receiveRegisteredPostMeta(
+				postType,
+				options?.schema?.properties?.meta?.properties
+			);
+		}
+	};
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index aeec14782ce4f..9acadd5c0c0e7 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -47,6 +47,7 @@ export interface State {
 	navigationFallbackId: EntityRecordKey;
 	userPatternCategories: Array< UserPatternCategory >;
 	defaultTemplates: Record< string, string >;
+	registeredPostMeta: Record< string, Object >;
 }
 
 type EntityRecordKey = string | number;
diff --git a/packages/core-data/src/test/entity-provider.js b/packages/core-data/src/test/entity-provider.js
index 6b0b7bd5ef77a..4dc0d8a51663e 100644
--- a/packages/core-data/src/test/entity-provider.js
+++ b/packages/core-data/src/test/entity-provider.js
@@ -104,7 +104,7 @@ describe( 'useEntityBlockEditor', () => {
 					source: 'html',
 					selector: 'p',
 					default: '',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 			},
 			title: 'block title',
diff --git a/packages/create-block-interactive-template/CHANGELOG.md b/packages/create-block-interactive-template/CHANGELOG.md
index c044dfff15e3a..24dcfd52b7b58 100644
--- a/packages/create-block-interactive-template/CHANGELOG.md
+++ b/packages/create-block-interactive-template/CHANGELOG.md
@@ -1,6 +1,10 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
-## Unreleased
+## 2.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Added TypeScript variant of the template ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
 
 ## 2.7.0 (2024-09-05)
 
diff --git a/packages/create-block-interactive-template/README.md b/packages/create-block-interactive-template/README.md
index 4417c647495c4..b50adb4926524 100644
--- a/packages/create-block-interactive-template/README.md
+++ b/packages/create-block-interactive-template/README.md
@@ -1,6 +1,6 @@
 # Create Block Interactive Template
 
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks.
 
 ## Usage
 
diff --git a/packages/create-block-interactive-template/block-templates/README.md.mustache b/packages/create-block-interactive-template/block-templates/README.md.mustache
index 3e64ce8f629a3..4a13743750f74 100644
--- a/packages/create-block-interactive-template/block-templates/README.md.mustache
+++ b/packages/create-block-interactive-template/block-templates/README.md.mustache
@@ -3,6 +3,4 @@
 > **Note**
 > Check the [Interactivity API Reference docs in the Block Editor handbook](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) to learn more about the Interactivity API.
 
-{{#isBasicVariant}}
 This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
-{{/isBasicVariant}}
\ No newline at end of file
diff --git a/packages/create-block-interactive-template/block-templates/render.php.mustache b/packages/create-block-interactive-template/block-templates/render.php.mustache
index 3a41a2981cd8c..4f84b30dbcdbd 100644
--- a/packages/create-block-interactive-template/block-templates/render.php.mustache
+++ b/packages/create-block-interactive-template/block-templates/render.php.mustache
@@ -1,4 +1,3 @@
-{{#isBasicVariant}}
 <?php
 /**
  * PHP file to use when rendering the block type on the server to show on the front end.
@@ -11,8 +10,19 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-// Generate unique id for aria-controls.
+// Generates a unique id for aria-controls.
 $unique_id = wp_unique_id( 'p-' );
+
+// Adds the global state.
+wp_interactivity_state(
+	'{{namespace}}',
+	array(
+		'isDark'    => false,
+		'darkText'  => esc_html__( 'Switch to Light', '{{textdomain}}' ),
+		'lightText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+		'themeText'	=> esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+	)
+);
 ?>
 
 <div
@@ -20,9 +30,15 @@ $unique_id = wp_unique_id( 'p-' );
 	data-wp-interactive="{{namespace}}"
 	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
 	data-wp-watch="callbacks.logIsOpen"
+	data-wp-class--dark-theme="state.isDark"
 >
 	<button
-		data-wp-on--click="actions.toggle"
+		data-wp-on--click="actions.toggleTheme"
+		data-wp-text="state.themeText"
+	></button>
+
+	<button
+		data-wp-on--click="actions.toggleOpen"
 		data-wp-bind--aria-expanded="context.isOpen"
 		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
 	>
@@ -38,4 +54,3 @@ $unique_id = wp_unique_id( 'p-' );
 		?>
 	</p>
 </div>
-{{/isBasicVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/style.scss.mustache b/packages/create-block-interactive-template/block-templates/style.scss.mustache
index 1c73fa1c38ff9..c8aa9f232136e 100644
--- a/packages/create-block-interactive-template/block-templates/style.scss.mustache
+++ b/packages/create-block-interactive-template/block-templates/style.scss.mustache
@@ -9,4 +9,19 @@
 	font-size: 1em;
 	background: #ffff001a;
 	padding: 1em;
+
+	&.dark-theme {
+		background: #333;
+		color: #fff;
+
+		button {
+			background: #555;
+			color: #fff;
+			border: 1px solid #777;
+		}
+
+		p {
+			color: #ddd;
+		}
+	}
 }
diff --git a/packages/create-block-interactive-template/block-templates/view.js.mustache b/packages/create-block-interactive-template/block-templates/view.js.mustache
index b4bae3939461d..3fcf1ba365d26 100644
--- a/packages/create-block-interactive-template/block-templates/view.js.mustache
+++ b/packages/create-block-interactive-template/block-templates/view.js.mustache
@@ -1,15 +1,23 @@
-{{#isBasicVariant}}
+{{#isDefaultVariant}}
 /**
  * WordPress dependencies
  */
-import { store, getContext } from "@wordpress/interactivity";
+import { store, getContext } from '@wordpress/interactivity';
 
-store( '{{namespace}}', {
+const { state } = store( '{{namespace}}', {
+	state: {
+		get themeText() {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
 	actions: {
-		toggle: () => {
+		toggleOpen() {
 			const context = getContext();
 			context.isOpen = ! context.isOpen;
 		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
 	},
 	callbacks: {
 		logIsOpen: () => {
@@ -19,5 +27,4 @@ store( '{{namespace}}', {
 		},
 	},
 } );
-
-{{/isBasicVariant}}
+{{/isDefaultVariant}}
diff --git a/packages/create-block-interactive-template/block-templates/view.ts.mustache b/packages/create-block-interactive-template/block-templates/view.ts.mustache
new file mode 100644
index 0000000000000..11670442d7370
--- /dev/null
+++ b/packages/create-block-interactive-template/block-templates/view.ts.mustache
@@ -0,0 +1,46 @@
+{{#isTypescriptVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+type ServerState = {
+	state: {
+		isDark: boolean;
+		darkText: string;
+		lightText: string;
+	};
+};
+
+type Context = {
+	isOpen: boolean;
+};
+
+const storeDef = {
+	state: {
+		get themeText(): string {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
+	actions: {
+		toggleOpen() {
+			const context = getContext< Context >();
+			context.isOpen = ! context.isOpen;
+		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext< Context >();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+};
+
+type Store = ServerState & typeof storeDef;
+
+const { state } = store< Store >( '{{namespace}}', storeDef );
+{{/isTypescriptVariant}}
diff --git a/packages/create-block-interactive-template/index.js b/packages/create-block-interactive-template/index.js
index bb203b7023e28..94f615df2747f 100644
--- a/packages/create-block-interactive-template/index.js
+++ b/packages/create-block-interactive-template/index.js
@@ -7,7 +7,7 @@ module.exports = {
 	defaultValues: {
 		slug: 'example-interactive',
 		title: 'Example Interactive',
-		description: 'An interactive block with the Interactivity API',
+		description: 'An interactive block with the Interactivity API.',
 		dashicon: 'media-interactive',
 		npmDependencies: [ '@wordpress/interactivity' ],
 		customPackageJSON: { files: [ '[^.]*' ] },
@@ -24,7 +24,14 @@ module.exports = {
 		},
 	},
 	variants: {
-		basic: {},
+		default: {},
+		typescript: {
+			slug: 'example-interactive-typescript',
+			title: 'Example Interactive TypeScript',
+			description:
+				'An interactive block with the Interactivity API using TypeScript.',
+			viewScriptModule: 'file:./view.ts',
+		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
diff --git a/packages/create-block-interactive-template/package.json b/packages/create-block-interactive-template/package.json
index 667d3998ba820..ad30a4b7e0195 100644
--- a/packages/create-block-interactive-template/package.json
+++ b/packages/create-block-interactive-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block-tutorial-template/CHANGELOG.md b/packages/create-block-tutorial-template/CHANGELOG.md
index 0fe0f748b8804..e93bc0270ba95 100644
--- a/packages/create-block-tutorial-template/CHANGELOG.md
+++ b/packages/create-block-tutorial-template/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ### Enhancements
diff --git a/packages/create-block-tutorial-template/package.json b/packages/create-block-tutorial-template/package.json
index 64a8a90bc167c..67b0c9554ed98 100644
--- a/packages/create-block-tutorial-template/package.json
+++ b/packages/create-block-tutorial-template/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/create-block/CHANGELOG.md b/packages/create-block/CHANGELOG.md
index 99e7b1fd37a33..d3a8c1c75dd3f 100644
--- a/packages/create-block/CHANGELOG.md
+++ b/packages/create-block/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.51.0 (2024-09-19)
+
 ## 4.50.0 (2024-09-05)
 
 ### Enhancements
diff --git a/packages/create-block/package.json b/packages/create-block/package.json
index 2103a85c5894f..e1522c887deef 100644
--- a/packages/create-block/package.json
+++ b/packages/create-block/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block",
-	"version": "4.50.0",
+	"version": "4.51.0",
 	"description": "Generates PHP, JS and CSS code for registering a block for a WordPress plugin.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/customize-widgets/CHANGELOG.md b/packages/customize-widgets/CHANGELOG.md
index 4e0d5a3755357..061b656c892c7 100644
--- a/packages/customize-widgets/CHANGELOG.md
+++ b/packages/customize-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/customize-widgets/package.json b/packages/customize-widgets/package.json
index a8b50cf9cb318..05edab039844b 100644
--- a/packages/customize-widgets/package.json
+++ b/packages/customize-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/customize-widgets",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Widgets blocks in Customizer Module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data-controls/CHANGELOG.md b/packages/data-controls/CHANGELOG.md
index e6af7fdcb6e24..3d16450a7825b 100644
--- a/packages/data-controls/CHANGELOG.md
+++ b/packages/data-controls/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/data-controls/package.json b/packages/data-controls/package.json
index e97e59b74700c..5d4d06d3c13cd 100644
--- a/packages/data-controls/package.json
+++ b/packages/data-controls/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data-controls",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "A set of common controls for the @wordpress/data api.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/data/CHANGELOG.md b/packages/data/CHANGELOG.md
index 4ba90611c2a78..f9ebf9eb17a68 100644
--- a/packages/data/CHANGELOG.md
+++ b/packages/data/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/data/package.json b/packages/data/package.json
index 84ad7a7973bc4..11396fe33e087 100644
--- a/packages/data/package.json
+++ b/packages/data/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/data",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "Data module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 1e323714c4d5f..6ce337d726e08 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.4.0 (2024-09-19)
+
 ## 4.3.0 (2024-09-05)
 
 ## 4.2.0 (2024-08-21)
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 3ce895680a15c..95b8fc898555c 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -2,6 +2,10 @@
 
 DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).
 
+DataViews is data agnostic, it can work with data coming from a static (JSON file) or dynamic source (HTTP Request) — it just requires the data to be an array of objects that have an unique identifier. Consumers are responsible to query the data source appropiately based on the DataViews props:
+
+![DataViews flow](https://developer.wordpress.org/files/2024/09/368600071-20aa078f-7c3d-406d-8dd0-8b764addd22a.png "DataViews flow")
+
 ## Installation
 
 Install the module
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index e327a217435c5..6265d88a4ad82 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dataviews",
-	"version": "4.3.0",
+	"version": "4.4.0",
 	"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 48fdf6906b077..02e81b2b0913d 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -8,6 +8,7 @@ import type { ChangeEvent } from 'react';
  */
 import {
 	Button,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Dropdown,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -27,6 +28,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useMemo } from '@wordpress/element';
 import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
 import warning from '@wordpress/warning';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -55,6 +57,8 @@ interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
+const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+
 function ViewTypeMenu( {
 	defaultLayouts = { list: {}, grid: {}, table: {} },
 }: ViewTypeMenuProps ) {
@@ -510,7 +514,7 @@ function SettingsSection( {
 	);
 }
 
-function DataviewsViewConfigContent( {
+function DataviewsViewConfigDropdown( {
 	density,
 	setDensity,
 }: {
@@ -518,25 +522,52 @@ function DataviewsViewConfigContent( {
 	setDensity: React.Dispatch< React.SetStateAction< number > >;
 } ) {
 	const { view } = useContext( DataViewsContext );
+	const popoverId = useInstanceId(
+		_DataViewsViewConfig,
+		'dataviews-view-config-dropdown'
+	);
+
 	return (
-		<VStack className="dataviews-view-config" spacing={ 6 }>
-			<SettingsSection title={ __( 'Appearance' ) }>
-				<HStack expanded className="is-divided-in-two">
-					<SortFieldControl />
-					<SortDirectionControl />
-				</HStack>
-				{ view.type === LAYOUT_GRID && (
-					<DensityPicker
-						density={ density }
-						setDensity={ setDensity }
+		<Dropdown
+			popoverProps={ {
+				...DATAVIEWS_CONFIG_POPOVER_PROPS,
+				id: popoverId,
+			} }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<Button
+						size="compact"
+						icon={ cog }
+						label={ _x( 'View options', 'View is used as a noun' ) }
+						onClick={ onToggle }
+						aria-expanded={ isOpen ? 'true' : 'false' }
+						aria-controls={ popoverId }
 					/>
-				) }
-				<ItemsPerPageControl />
-			</SettingsSection>
-			<SettingsSection title={ __( 'Properties' ) }>
-				<FieldControl />
-			</SettingsSection>
-		</VStack>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<VStack className="dataviews-view-config" spacing={ 6 }>
+						<SettingsSection title={ __( 'Appearance' ) }>
+							<HStack expanded className="is-divided-in-two">
+								<SortFieldControl />
+								<SortDirectionControl />
+							</HStack>
+							{ view.type === LAYOUT_GRID && (
+								<DensityPicker
+									density={ density }
+									setDensity={ setDensity }
+								/>
+							) }
+							<ItemsPerPageControl />
+						</SettingsSection>
+						<SettingsSection title={ __( 'Properties' ) }>
+							<FieldControl />
+						</SettingsSection>
+					</VStack>
+				</DropdownContentWrapper>
+			) }
+		/>
 	);
 }
 
@@ -552,28 +583,9 @@ function _DataViewsViewConfig( {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-			<Dropdown
-				popoverProps={ { placement: 'bottom-end', offset: 9 } }
-				contentClassName="dataviews-view-config"
-				renderToggle={ ( { onToggle } ) => {
-					return (
-						<Button
-							size="compact"
-							icon={ cog }
-							label={ _x(
-								'View options',
-								'View is used as a noun'
-							) }
-							onClick={ onToggle }
-						/>
-					);
-				} }
-				renderContent={ () => (
-					<DataviewsViewConfigContent
-						density={ density }
-						setDensity={ setDensity }
-					/>
-				) }
+			<DataviewsViewConfigDropdown
+				density={ density }
+				setDensity={ setDensity }
 			/>
 		</>
 	);
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index c7d07fe7866bc..7fff110337ee3 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,12 +1,9 @@
 .dataviews-view-config {
-	.components-popover__content {
-		width: 320px;
-		/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
-		container-type: inline-size;
-		padding: $grid-unit-20;
-		font-size: $default-font-size;
-		line-height: $default-line-height;
-	}
+	width: 320px;
+	/* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
+	container-type: inline-size;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
 }
 
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 8909c7cf1c7cf..aa8fbcfb009c0 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -80,7 +80,6 @@
 		padding: $grid-unit-15 $grid-unit-30;
 	}
 
-	.dataviews-view-grid,
 	.dataviews-no-results,
 	.dataviews-loading {
 		padding-left: $grid-unit-30;
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 5fab362b0b47b..6286ed94685a0 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -163,3 +163,11 @@
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
 	top: $grid-unit-10;
 }
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews-view-grid {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
diff --git a/packages/date/CHANGELOG.md b/packages/date/CHANGELOG.md
index e19aa08ab6fe5..8c28ff83d53ed 100644
--- a/packages/date/CHANGELOG.md
+++ b/packages/date/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/date/package.json b/packages/date/package.json
index 488db71cfd693..ad957a6393e1c 100644
--- a/packages/date/package.json
+++ b/packages/date/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/date",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Date module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
index 1da5f074301fd..1c0aa630495a0 100644
--- a/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
+++ b/packages/dependency-extraction-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-   Fix a bug where cycles in dependent modules could enter infinite recursion ([#65291](https://github.com/WordPress/gutenberg/pull/65291)).
+
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
index 0e6f8a5fbc6cc..529fb339d15a1 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -269,7 +269,7 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
-			// Go through the assets and hash the sources. We can't just use
+			// Prepare to hash the sources. We can't just use
 			// `chunk.contentHash` because that's not updated when
 			// assets are minified. In practice the hash is updated by
 			// `RealContentHashPlugin` after minification, but it only modifies
@@ -278,12 +278,32 @@ class DependencyExtractionWebpackPlugin {
 			const { hashFunction, hashDigest, hashDigestLength } =
 				compilation.outputOptions;
 
-			const contentHash = chunkFiles
-				.sort()
-				.reduce( ( hash, filename ) => {
-					const asset = compilation.getAsset( filename );
-					return hash.update( asset.source.buffer() );
-				}, createHash( hashFunction ) )
+			const hashBuilder = createHash( hashFunction );
+
+			const processContentsForHash = ( content ) => {
+				hashBuilder.update( content );
+			};
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const processContentsForMagicComments = ( content ) => {
+				if ( content.includes( '/* wp:polyfill */' ) ) {
+					chunkStaticDeps.add( 'wp-polyfill' );
+				}
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to generate hashes, as well as look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				processContentsForHash( content );
+				processContentsForMagicComments( content );
+			} );
+
+			// Finalise hash.
+			const contentHash = hashBuilder
 				.digest( hashDigest )
 				.slice( 0, hashDigestLength );
 
@@ -349,6 +369,9 @@ class DependencyExtractionWebpackPlugin {
 		}
 	}
 
+	static #staticDepsCurrent = new WeakSet();
+	static #staticDepsCache = new WeakMap();
+
 	/**
 	 * Can we trace a line of static dependencies from an entry to a module
 	 *
@@ -358,6 +381,20 @@ class DependencyExtractionWebpackPlugin {
 	 * @return {boolean} True if there is a static import path to the root
 	 */
 	static hasStaticDependencyPathToRoot( compilation, block ) {
+		if ( DependencyExtractionWebpackPlugin.#staticDepsCache.has( block ) ) {
+			return DependencyExtractionWebpackPlugin.#staticDepsCache.get(
+				block
+			);
+		}
+
+		if (
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.has( block )
+		) {
+			return false;
+		}
+
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.add( block );
+
 		const incomingConnections = [
 			...compilation.moduleGraph.getIncomingConnections( block ),
 		].filter(
@@ -371,6 +408,13 @@ class DependencyExtractionWebpackPlugin {
 		// If we don't have non-entry, non-library incoming connections,
 		// we've reached a root of
 		if ( ! incomingConnections.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				true
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
 			return true;
 		}
 
@@ -389,16 +433,28 @@ class DependencyExtractionWebpackPlugin {
 
 		// All the dependencies were Async, the module was reached via a dynamic import
 		if ( ! staticDependentModules.length ) {
+			DependencyExtractionWebpackPlugin.#staticDepsCache.set(
+				block,
+				false
+			);
+			DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete(
+				block
+			);
 			return false;
 		}
 
 		// Continue to explore any static dependencies
-		return staticDependentModules.some( ( parentStaticDependentModule ) =>
-			DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
-				compilation,
-				parentStaticDependentModule
-			)
+		const result = staticDependentModules.some(
+			( parentStaticDependentModule ) =>
+				DependencyExtractionWebpackPlugin.hasStaticDependencyPathToRoot(
+					compilation,
+					parentStaticDependentModule
+				)
 		);
+
+		DependencyExtractionWebpackPlugin.#staticDepsCache.set( block, result );
+		DependencyExtractionWebpackPlugin.#staticDepsCurrent.delete( block );
+		return result;
 	}
 }
 
diff --git a/packages/dependency-extraction-webpack-plugin/package.json b/packages/dependency-extraction-webpack-plugin/package.json
index f720a1df826e8..a9368e1eb1825 100644
--- a/packages/dependency-extraction-webpack-plugin/package.json
+++ b/packages/dependency-extraction-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dependency-extraction-webpack-plugin",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Extract WordPress script dependencies from webpack bundles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
index d3090daa89a47..903c9658250b1 100644
--- a/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
+++ b/packages/dependency-extraction-webpack-plugin/test/__snapshots__/build.js.snap
@@ -55,6 +55,21 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array(array('id' => '@wordpress/interactivity', 'import' => 'dynamic')), 'version' => 'e1033c1bd62e8cb8d4c9', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "module",
+    "request": "@wordpress/interactivity",
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array(array('id' => '@wordpress/blob', 'import' => 'dynamic')), 'version' => '4f59b7847b70a07b2710', 'type' => 'module');
 "
@@ -235,6 +250,13 @@ exports[`DependencyExtractionWebpackPlugin modules Webpack \`overrides\` should
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '9725ab782f6b09598d3d', 'type' => 'module');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin modules Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
 exports[`DependencyExtractionWebpackPlugin modules Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('@wordpress/blob'), 'version' => 'a1906cfc819b623c86f8', 'type' => 'module');
 "
@@ -412,6 +434,24 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-dynamic-depe
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-interactivity'), 'version' => '455f3cab924853d41b8b');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`cyclic-external-deps\` should produce expected output: External modules should match snapshot 1`] = `
+[
+  {
+    "externalType": "window",
+    "request": [
+      "wp",
+      "interactivity",
+    ],
+    "userRequest": "@wordpress/interactivity",
+  },
+]
+`;
+
 exports[`DependencyExtractionWebpackPlugin scripts Webpack \`dynamic-import\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('wp-blob'), 'version' => 'c0e8a6f22065ea096606');
 "
@@ -619,6 +659,13 @@ exports[`DependencyExtractionWebpackPlugin scripts Webpack \`overrides\` should
 ]
 `;
 
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: Asset file 'main.asset.php' should match snapshot 1`] = `
+"<?php return array('dependencies' => array('wp-polyfill'), 'version' => '464c785b5c938d4fde3f');
+"
+`;
+
+exports[`DependencyExtractionWebpackPlugin scripts Webpack \`polyfill-magic-comment\` should produce expected output: External modules should match snapshot 1`] = `[]`;
+
 exports[`DependencyExtractionWebpackPlugin scripts Webpack \`runtime-chunk-single\` should produce expected output: Asset file 'a.asset.php' should match snapshot 1`] = `
 "<?php return array('dependencies' => array('wp-blob'), 'version' => 'd3cda564b538b44d38ef');
 "
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
new file mode 100644
index 0000000000000..1f0edffe27efd
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/a.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import { someFunction } from '.';
+
+someFunction();
+
+export const a = 'test';
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
new file mode 100644
index 0000000000000..01d7eff466bfb
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/index.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { a } from './a';
+
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+
+export const someFunction = () => {
+	store( 'test', {
+		state: {
+			a,
+		},
+	} );
+	return a;
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
new file mode 100644
index 0000000000000..bfffff3ae7831
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/cyclic-external-deps/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
new file mode 100644
index 0000000000000..d98678f44cb69
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/index.js
@@ -0,0 +1,3 @@
+/* wp:polyfill */
+
+// Nothing else, really.
diff --git a/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
new file mode 100644
index 0000000000000..bfffff3ae7831
--- /dev/null
+++ b/packages/dependency-extraction-webpack-plugin/test/fixtures/polyfill-magic-comment/webpack.config.js
@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+const DependencyExtractionWebpackPlugin = require( '../../..' );
+
+module.exports = {
+	plugins: [ new DependencyExtractionWebpackPlugin() ],
+};
diff --git a/packages/deprecated/CHANGELOG.md b/packages/deprecated/CHANGELOG.md
index 673567a2a3e49..945bf44ad6a65 100644
--- a/packages/deprecated/CHANGELOG.md
+++ b/packages/deprecated/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/deprecated/package.json b/packages/deprecated/package.json
index ed2f9434539ef..245d459fb842e 100644
--- a/packages/deprecated/package.json
+++ b/packages/deprecated/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/deprecated",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Deprecation utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/docgen/CHANGELOG.md b/packages/docgen/CHANGELOG.md
index 3aefc7cae99ae..3e966fc4518d7 100644
--- a/packages/docgen/CHANGELOG.md
+++ b/packages/docgen/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/docgen/package.json b/packages/docgen/package.json
index 38a228d50a8e0..9bd4581859193 100644
--- a/packages/docgen/package.json
+++ b/packages/docgen/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/docgen",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Autogenerate public API documentation from exports and JSDoc comments.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom-ready/CHANGELOG.md b/packages/dom-ready/CHANGELOG.md
index f3290182dff5c..265e7b5947061 100644
--- a/packages/dom-ready/CHANGELOG.md
+++ b/packages/dom-ready/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/dom-ready/package.json b/packages/dom-ready/package.json
index 89acde8f2b124..9f4ffbcf61e41 100644
--- a/packages/dom-ready/package.json
+++ b/packages/dom-ready/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom-ready",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Execute callback after the DOM is loaded.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/dom/CHANGELOG.md b/packages/dom/CHANGELOG.md
index 1857e3d51cb70..77f85a59cada8 100644
--- a/packages/dom/CHANGELOG.md
+++ b/packages/dom/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/dom/package.json b/packages/dom/package.json
index dd05677fcb930..6707de0599269 100644
--- a/packages/dom/package.json
+++ b/packages/dom/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/dom",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "DOM utilities module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils-playwright/CHANGELOG.md b/packages/e2e-test-utils-playwright/CHANGELOG.md
index eb3cbd95fe3ad..b53821f46eefe 100644
--- a/packages/e2e-test-utils-playwright/CHANGELOG.md
+++ b/packages/e2e-test-utils-playwright/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/e2e-test-utils-playwright/package.json b/packages/e2e-test-utils-playwright/package.json
index 1bb80bc4cc764..f8e31ddc3c359 100644
--- a/packages/e2e-test-utils-playwright/package.json
+++ b/packages/e2e-test-utils-playwright/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils-playwright",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md
index b22c016a799bc..98c17f5b6ecb0 100644
--- a/packages/e2e-test-utils/CHANGELOG.md
+++ b/packages/e2e-test-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 11.8.0 (2024-09-19)
+
 ## 11.7.0 (2024-09-05)
 
 ## 11.6.0 (2024-08-21)
diff --git a/packages/e2e-test-utils/package.json b/packages/e2e-test-utils/package.json
index 02cee410f33d6..eeb0e66cb62a7 100644
--- a/packages/e2e-test-utils/package.json
+++ b/packages/e2e-test-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-test-utils",
-	"version": "11.7.0",
+	"version": "11.8.0",
 	"description": "End-To-End (E2E) test utils for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index a7ba03f05f466..3fe696deaabb5 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
index 81e7fa1802c65..2ce38150c96a0 100644
--- a/packages/e2e-tests/package.json
+++ b/packages/e2e-tests/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/e2e-tests/plugins/block-bindings.php b/packages/e2e-tests/plugins/block-bindings.php
index 143feb240ac2e..8951255d516bf 100644
--- a/packages/e2e-tests/plugins/block-bindings.php
+++ b/packages/e2e-tests/plugins/block-bindings.php
@@ -28,7 +28,7 @@ function gutenberg_test_block_bindings_registration() {
 			'show_in_rest' => true,
 			'type'         => 'string',
 			'single'       => true,
-			'default'      => 'Value of the text_custom_field',
+			'default'      => 'Value of the text custom field',
 		)
 	);
 	register_meta(
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
index 5a46908f77d87..77f2f25c5f9a4 100644
--- a/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
+++ b/packages/e2e-tests/plugins/interactive-blocks/directive-priorities/view.js
@@ -41,13 +41,13 @@ directive(
 	'test-context',
 	( { context: { Provider }, props: { children } } ) => {
 		executionProof( 'context' );
-		const value = {
+		const client = {
 			[ namespace ]: proxifyState( namespace, {
 				attribute: 'from context',
 				text: 'from context',
 			} ),
 		};
-		return h( Provider, { value }, children );
+		return h( Provider, { value: { client } }, children );
 	},
 	{ priority: 8 }
 );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
new file mode 100644
index 0000000000000..c635846328b9e
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-context",
+	"title": "E2E Interactivity tests - getServerContext",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
new file mode 100644
index 0000000000000..a71ced20dc46a
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/render.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * HTML for testing the getServerContext() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+$link1      = $attributes['links']['modified'];
+$link2      = $attributes['links']['newProps'];
+$parent_ctx = $attributes['parentContext'];
+$child_ctx  = $attributes['childContext'];
+?>
+
+<nav
+	data-testid="navigate"
+	data-wp-interactive="test/get-server-context"
+	data-wp-on--click="actions.navigate"
+>
+	<a data-testid="modified" href="<?php echo esc_url( $link1 ); ?>">modified</a>
+	<a data-testid="newProps" href="<?php echo esc_url( $link2 ); ?>">newProps</a>
+</nav>
+
+<div
+	data-wp-interactive="test/get-server-context"
+	data-wp-router-region="server-context"
+	data-wp-watch="callbacks.updateServerContextParent"
+	<?php echo wp_interactivity_data_wp_context( $parent_ctx ); ?>
+>
+	<div
+		data-wp-watch="callbacks.updateServerContextChild"
+		<?php echo wp_interactivity_data_wp_context( $child_ctx ); ?>
+	>
+		<div data-testid="prop" data-wp-text="context.prop"></div>
+		<div data-testid="nested.prop" data-wp-text="context.nested.prop"></div>
+		<div data-testid="newProp" data-wp-text="context.newProp"></div>
+		<div data-testid="nested.newProp" data-wp-text="context.nested.newProp"></div>
+		<div data-testid="inherited.prop" data-wp-text="context.inherited.prop"></div>
+		<div data-testid="inherited.newProp" data-wp-text="context.inherited.newProp"></div>
+
+		<button
+			data-testid="tryToModifyServerContext"
+			<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+			data-wp-on--click="actions.attemptModification"
+			data-wp-text="context.result">
+		>
+			modify
+		</button>
+	</div>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
new file mode 100644
index 0000000000000..bdaec8d1b67a9
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
new file mode 100644
index 0000000000000..83f016e2eac16
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-context/view.js
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getServerContext } from '@wordpress/interactivity';
+
+store( 'test/get-server-context', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerContext().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateServerContextParent() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+		updateServerContextChild() {
+			const ctx = getContext();
+			const { prop, newProp, nested, inherited } = getServerContext();
+			ctx.prop = prop;
+			ctx.newProp = newProp;
+			ctx.nested.prop = nested.prop;
+			ctx.nested.newProp = nested.newProp;
+			ctx.inherited.prop = inherited.prop;
+			ctx.inherited.newProp = inherited.newProp;
+		},
+	},
+} );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
new file mode 100644
index 0000000000000..abf76eb9beddc
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/block.json
@@ -0,0 +1,15 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "test/get-server-state",
+	"title": "E2E Interactivity tests - getServerState",
+	"category": "text",
+	"icon": "heart",
+	"description": "",
+	"supports": {
+		"interactivity": true
+	},
+	"textdomain": "e2e-interactivity",
+	"viewScriptModule": "file:./view.js",
+	"render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
new file mode 100644
index 0000000000000..abc4efd8272d5
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/render.php
@@ -0,0 +1,50 @@
+<?php
+/**
+ * HTML for testing the getServerState() function.
+ *
+ * @package gutenberg-test-interactive-blocks
+ *
+ * @phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
+ */
+
+if ( isset( $attributes['state'] ) ) {
+	wp_interactivity_state( 'test/get-server-state', $attributes['state'] );
+}
+?>
+
+<div
+	data-wp-interactive="test/get-server-state"
+	data-wp-watch="callbacks.updateState"
+>
+	<div data-testid="prop" data-wp-text="state.prop"></div>
+	<div data-testid="nested.prop" data-wp-text="state.nested.prop"></div>
+	<div data-testid="newProp" data-wp-text="state.newProp"></div>
+	<div data-testid="nested.newProp" data-wp-text="state.nested.newProp"></div>
+
+	<button
+		data-testid="tryToModifyServerState"
+		<?php echo wp_interactivity_data_wp_context( array( 'result' => 'modify' ) ); ?>
+		data-wp-on--click="actions.attemptModification"
+		data-wp-text="context.result">
+	>
+		modify
+	</button>
+
+
+	<nav>
+		<?php
+		if ( isset( $attributes['links'] ) ) {
+			foreach ( $attributes['links'] as $key => $link ) {
+				$i = $key += 1;
+				echo <<<HTML
+				<a
+					data-testid="link $i"
+					data-wp-on--click="actions.navigate"
+					href="$link"
+				>link $i</a>
+HTML;
+			}
+		}
+		?>
+	</nav>
+</div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
new file mode 100644
index 0000000000000..bdaec8d1b67a9
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.asset.php
@@ -0,0 +1,9 @@
+<?php return array(
+	'dependencies' => array(
+		'@wordpress/interactivity',
+		array(
+			'id'     => '@wordpress/interactivity-router',
+			'import' => 'dynamic',
+		),
+	),
+);
diff --git a/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
new file mode 100644
index 0000000000000..db2992ec4a586
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/get-server-state/view.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getServerState, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'test/get-server-state', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+		attemptModification() {
+			try {
+				getServerState().prop = 'updated from client';
+				getContext().result = 'unexpectedly modified ❌';
+			} catch ( e ) {
+				getContext().result = 'not modified ✅';
+			}
+		},
+	},
+	callbacks: {
+		updateState() {
+			const { prop, newProp, nested } = getServerState();
+			state.prop = prop;
+			state.newProp = newProp;
+			state.nested.prop = nested.prop;
+			state.nested.newProp = nested.newProp;
+		},
+	},
+} );
diff --git a/packages/edit-post/CHANGELOG.md b/packages/edit-post/CHANGELOG.md
index cd4b4a36295f0..3eb52f26e6501 100644
--- a/packages/edit-post/CHANGELOG.md
+++ b/packages/edit-post/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index 0d8e0b28f7c7c..1e5cbb13892a1 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 2cbf5c32e814b..e6451c6a4a408 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -26,9 +26,10 @@ import { PluginArea } from '@wordpress/plugins';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	useCallback,
-	useLayoutEffect,
 	useMemo,
+	useId,
 	useRef,
+	useState,
 } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -41,8 +42,17 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
-import { ResizableBox, SlotFillProvider } from '@wordpress/components';
-import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
+import {
+	ResizableBox,
+	SlotFillProvider,
+	Tooltip,
+	VisuallyHidden,
+} from '@wordpress/components';
+import {
+	useMediaQuery,
+	useRefEffect,
+	useViewportMatch,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -176,13 +186,41 @@ function MetaBoxesMain( { isLegacy } ) {
 	const resizableBoxRef = useRef();
 	const isShort = useMediaQuery( '(max-height: 549px)' );
 
-	const isAutoHeight = openHeight === undefined;
-	// In case a user size is set stops the default max-height from applying.
-	useLayoutEffect( () => {
-		if ( ! isLegacy && hasAnyVisible && ! isShort && ! isAutoHeight ) {
-			resizableBoxRef.current.resizable.classList.add( 'has-user-size' );
+	const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
+	// Keeps the resizable area’s size constraints updated taking into account
+	// editor notices. The constraints are also used to derive the value for the
+	// aria-valuenow attribute on the seperator.
+	const effectSizeConstraints = useRefEffect( ( node ) => {
+		const container = node.closest(
+			'.interface-interface-skeleton__content'
+		);
+		const noticeLists = container.querySelectorAll(
+			':scope > .components-notice-list'
+		);
+		const resizeHandle = container.querySelector(
+			'.edit-post-meta-boxes-main__resize-handle'
+		);
+		const actualize = () => {
+			const fullHeight = container.offsetHeight;
+			let nextMax = fullHeight;
+			for ( const element of noticeLists ) {
+				nextMax -= element.offsetHeight;
+			}
+			const nextMin = resizeHandle.offsetHeight;
+			setHeightConstraints( { min: nextMin, max: nextMax } );
+		};
+		const observer = new window.ResizeObserver( actualize );
+		observer.observe( container );
+		for ( const element of noticeLists ) {
+			observer.observe( element );
 		}
-	}, [ isAutoHeight, isShort, hasAnyVisible, isLegacy ] );
+		return () => observer.disconnect();
+	}, [] );
+
+	const separatorRef = useRef();
+	const separatorHelpId = useId();
+
+	const [ isUntouched, setIsUntouched ] = useState( true );
 
 	if ( ! hasAnyVisible ) {
 		return;
@@ -206,6 +244,18 @@ function MetaBoxesMain( { isLegacy } ) {
 		return contents;
 	}
 
+	const isAutoHeight = openHeight === undefined;
+	let usedMax = '50%'; // Approximation before max has a value.
+	if ( max !== undefined ) {
+		// Halves the available max height until a user height is set.
+		usedMax = isAutoHeight && isUntouched ? max / 2 : max;
+	}
+
+	const getAriaValueNow = ( height ) =>
+		Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
+	const usedAriaValueNow =
+		max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );
+
 	if ( isShort ) {
 		return (
 			<details
@@ -224,6 +274,35 @@ function MetaBoxesMain( { isLegacy } ) {
 			</details>
 		);
 	}
+
+	// TODO: Support more/all keyboard interactions from the window splitter pattern:
+	// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+	const onSeparatorKeyDown = ( event ) => {
+		const delta = { ArrowUp: 20, ArrowDown: -20 }[ event.key ];
+		if ( delta ) {
+			const { resizable } = resizableBoxRef.current;
+			const fromHeight = isAutoHeight
+				? resizable.offsetHeight
+				: openHeight;
+			const nextHeight = Math.min(
+				max,
+				Math.max( min, delta + fromHeight )
+			);
+			resizableBoxRef.current.updateSize( {
+				height: nextHeight,
+				// Oddly, if left unspecified a subsequent drag gesture applies a fixed
+				// width and the pane fails to shrink/grow with parent width changes from
+				// sidebars opening/closing or window resizes.
+				width: 'auto',
+			} );
+			setPreference(
+				'core/edit-post',
+				'metaBoxesMainOpenHeight',
+				nextHeight
+			);
+		}
+	};
+
 	return (
 		<ResizableBox
 			className={ className }
@@ -239,8 +318,8 @@ function MetaBoxesMain( { isLegacy } ) {
 				bottomRight: false,
 				bottomLeft: false,
 			} }
-			// This is overriden by an !important rule that applies until user resizes.
-			maxHeight="100%"
+			minHeight={ min }
+			maxHeight={ usedMax }
 			bounds="parent"
 			boundsByDirection
 			// Avoids hiccups while dragging over objects like iframes and ensures that
@@ -250,19 +329,58 @@ function MetaBoxesMain( { isLegacy } ) {
 				target.setPointerCapture( pointerId );
 			} }
 			onResizeStart={ ( event, direction, elementRef ) => {
-				// Avoids height jumping in case it’s limited by max-height.
-				elementRef.style.height = `${ elementRef.offsetHeight }px`;
-				// Stops initial max-height from being applied.
-				elementRef.classList.add( 'has-user-size' );
+				if ( isAutoHeight ) {
+					const heightNow = elementRef.offsetHeight;
+					// Sets the starting height to avoid visual jumps in height and
+					// aria-valuenow being `NaN` for the first (few) resize events.
+					resizableBoxRef.current.updateSize( { height: heightNow } );
+					// Causes `maxHeight` to update to full `max` value instead of half.
+					setIsUntouched( false );
+				}
+			} }
+			onResize={ () => {
+				const { height } = resizableBoxRef.current.state;
+				const separator = separatorRef.current;
+				separator.ariaValueNow = getAriaValueNow( height );
 			} }
 			onResizeStop={ () => {
+				const nextHeight = resizableBoxRef.current.state.height;
 				setPreference(
 					'core/edit-post',
 					'metaBoxesMainOpenHeight',
-					resizableBoxRef.current.state.height
+					nextHeight
 				);
 			} }
+			handleClasses={ {
+				top: 'edit-post-meta-boxes-main__resize-handle',
+			} }
+			handleComponent={ {
+				top: (
+					<>
+						<Tooltip text={ __( 'Drag to resize' ) }>
+							{ /* Disable reason: aria-valuenow is supported by separator role. */ }
+							{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
+							<button
+								ref={ separatorRef }
+								aria-label={ __( 'Drag to resize' ) }
+								aria-describedby={ separatorHelpId }
+								onKeyDown={ onSeparatorKeyDown }
+								// Disable reason: buttons are allowed to be separator role.
+								// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
+								role="separator"
+								aria-valuenow={ usedAriaValueNow }
+							/>
+						</Tooltip>
+						<VisuallyHidden id={ separatorHelpId }>
+							{ __(
+								'Use up and down arrow keys to resize the metabox panel.'
+							) }
+						</VisuallyHidden>
+					</>
+				),
+			} }
 		>
+			<meta ref={ effectSizeConstraints } />
 			{ contents }
 		</ResizableBox>
 	);
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 5392a7e9da4d9..5d0a9a29c329c 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -1,15 +1,12 @@
+$resize-handle-height: $grid-unit-30;
+
 .edit-post-meta-boxes-main {
 	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
 	background-color: $white;
 	clear: both; // This is seemingly only needed in case the canvas is not iframe’d.
 
 	&:not(details) {
-		padding-top: 23px;
-		max-height: 100%;
-
-		&:not(.has-user-size) {
-			max-height: 50% !important;
-		}
+		padding-top: $resize-handle-height;
 	}
 
 	// The component renders as a details element in short viewports.
@@ -31,24 +28,34 @@
 			z-index: 1;
 		}
 	}
+}
 
-	& .components-resizable-box__handle-top {
-		top: 0;
-		box-shadow: 0 $border-width $gray-300;
-	}
-	& .components-resizable-box__side-handle::before {
-		border-radius: 0;
-		top: 0;
-		height: $border-width;
-	}
-	& .components-resizable-box__handle::after {
+.edit-post-meta-boxes-main__resize-handle {
+	display: flex;
+	// The position is absolute by default inline style of ResizableBox.
+	inset: 0 0 auto 0;
+	height: $resize-handle-height;
+	box-shadow: 0 $border-width $gray-300;
+
+	& > button {
+		appearance: none;
+		cursor: inherit;
+		margin: auto;
+		padding: 0;
+		border: none;
+		outline: none;
 		background-color: $gray-300;
-		box-shadow: none;
-		border-radius: 4px;
+		width: $grid-unit-80;
 		height: $grid-unit-05;
-		top: calc(50% - #{$grid-unit-05} / 2);
-		width: 100px;
-		right: calc(50% - 50px);
+		border-radius: $radius-small;
+		transition: width 0.3s ease-out;
+		@include reduce-motion("transition");
+	}
+
+	&:hover > button,
+	> button:focus {
+		background-color: var(--wp-admin-theme-color);
+		width: $grid-unit-80 + $grid-unit-20;
 	}
 }
 
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index f77c8122ca2e5..7230d7b2b15e6 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -3,22 +3,6 @@
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/welcome-guide/style.scss";
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );
 }
diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md
index 025d2389e4b01..b14fb6dcd6d3e 100644
--- a/packages/edit-site/CHANGELOG.md
+++ b/packages/edit-site/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
index 43bcf68aa68e6..ef1cdaaa6a5c7 100644
--- a/packages/edit-site/package.json
+++ b/packages/edit-site/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
index 4993f12153b9e..69f1925c7b0e4 100644
--- a/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
+++ b/packages/edit-site/src/components/add-new-template/add-custom-template-modal-content.js
@@ -36,8 +36,7 @@ function SuggestionListItem( {
 		<Composite.Item
 			render={
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					role="option"
 					className={ baseCssClass }
 					onClick={ () =>
diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
index 933ea6df1198b..bb0acbe62cd65 100644
--- a/packages/edit-site/src/components/add-new-template/index.js
+++ b/packages/edit-site/src/components/add-new-template/index.js
@@ -107,8 +107,7 @@ function TemplateListItem( {
 } ) {
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			className={ className }
 			onClick={ onClick }
 			label={ description }
diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js
index 36a3a5b43e5cd..c55d6b188e1a2 100644
--- a/packages/edit-site/src/components/editor-canvas-container/index.js
+++ b/packages/edit-site/src/components/editor-canvas-container/index.js
@@ -125,8 +125,7 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index b99a7cd78ed37..72f796845c567 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -256,8 +256,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 										whileTap="tap"
 									>
 										<Button
-											// TODO: Switch to `true` (40px size) if possible
-											__next40pxDefaultSize={ false }
+											__next40pxDefaultSize
 											label={ __( 'Open Navigation' ) }
 											showTooltip
 											tooltipPosition="middle right"
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
index b03c99f46f03b..c4090c7e6b119 100644
--- a/packages/edit-site/src/components/error-boundary/warning.js
+++ b/packages/edit-site/src/components/error-boundary/warning.js
@@ -9,12 +9,7 @@ import { useCopyToClipboard } from '@wordpress/compose';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
-			variant="secondary"
-			ref={ ref }
-		>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/edit-site/src/components/global-styles-sidebar/style.scss b/packages/edit-site/src/components/global-styles-sidebar/style.scss
index b76192ddfcb5c..4ca87bf200f17 100644
--- a/packages/edit-site/src/components/global-styles-sidebar/style.scss
+++ b/packages/edit-site/src/components/global-styles-sidebar/style.scss
@@ -22,14 +22,7 @@
 	flex-direction: column;
 	min-height: 100%;
 
-	&__panel,
-	&__navigator-provider {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-	}
-
-	&__navigator-screen {
+	&__panel {
 		flex: 1;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
index cf49d8c28ebcb..ec1dd1a900c3b 100644
--- a/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
+++ b/packages/edit-site/src/components/global-styles/shadows-edit-panel.js
@@ -13,7 +13,6 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
@@ -21,7 +20,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -35,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -51,7 +48,6 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -464,13 +460,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'x', value ) }
 				/>
 				<ShadowInputControl
 					label={ __( 'Y Position' ) }
 					value={ shadowObj.y }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'y', value ) }
 				/>
 				<ShadowInputControl
@@ -481,7 +475,6 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'Spread' ) }
 					value={ shadowObj.spread }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
 			</Grid>
@@ -489,16 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	);
 }
 
-function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -506,50 +490,11 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-				/>
-			) : (
-				<RangeControl
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-				/>
-			) }
-		</VStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 60d7e314d7776..bc6906a769af4 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -272,19 +272,6 @@ function GlobalStylesEditorCanvasContainerLink() {
 					goTo( '/' );
 				}
 				break;
-			default:
-				/*
-				 * Example: the user has navigated to "Browse styles" or elsewhere
-				 * and changes the editorCanvasContainerView, e.g., closes the style book.
-				 * The panel should not be affected.
-				 * Exclude revisions panel from this behavior,
-				 * as it should close when the editorCanvasContainerView doesn't correspond.
-				 */
-				if ( path !== '/' && ! isRevisionsOpen ) {
-					return;
-				}
-				goTo( '/' );
-				break;
 		}
 	}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
 }
diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
index b589a3861c75d..b5aae01918e69 100644
--- a/packages/edit-site/src/components/resizable-frame/index.js
+++ b/packages/edit-site/src/components/resizable-frame/index.js
@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -171,7 +171,10 @@ function ResizableFrame( {
 		event.preventDefault();
 
 		const step = 20 * ( event.shiftKey ? 5 : 1 );
-		const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
+		const delta =
+			step *
+			( event.key === 'ArrowLeft' ? 1 : -1 ) *
+			( isRTL() ? -1 : 1 );
 		const newWidth = Math.min(
 			Math.max(
 				FRAME_MIN_WIDTH,
@@ -200,15 +203,17 @@ function ResizableFrame( {
 	const resizeHandleVariants = {
 		hidden: {
 			opacity: 0,
-			left: 0,
+			...( isRTL() ? { right: 0 } : { left: 0 } ),
 		},
 		visible: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 		},
 		active: {
 			opacity: 1,
-			left: -14, // Account for the handle's width.
+			// Account for the handle's width.
+			...( isRTL() ? { right: -14 } : { left: -14 } ),
 			scaleY: 1.3,
 		},
 	};
@@ -246,10 +251,11 @@ function ResizableFrame( {
 			size={ frameSize }
 			enable={ {
 				top: false,
-				right: false,
 				bottom: false,
 				// Resizing will be disabled until the editor content is loaded.
-				left: isReady,
+				...( isRTL()
+					? { right: isReady, left: false }
+					: { left: isReady, right: false } ),
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,
@@ -269,7 +275,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				left: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index fddb4dbf32ce0..5ab46b1ce2c39 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -92,20 +92,4 @@ body.js.site-editor-php {
 	}
 }
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since they are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 @include wordpress-admin-schemes();
diff --git a/packages/edit-widgets/CHANGELOG.md b/packages/edit-widgets/CHANGELOG.md
index f1cbcef0667d7..6115fc42560f8 100644
--- a/packages/edit-widgets/CHANGELOG.md
+++ b/packages/edit-widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index d24857f0f8a0c..f0cc613aa40fc 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-widgets",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Widgets Page module for WordPress..",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/edit-widgets/src/components/error-boundary/index.js b/packages/edit-widgets/src/components/error-boundary/index.js
index e6ed91926da3e..ff12bfe5fdf47 100644
--- a/packages/edit-widgets/src/components/error-boundary/index.js
+++ b/packages/edit-widgets/src/components/error-boundary/index.js
@@ -11,12 +11,7 @@ import { doAction } from '@wordpress/hooks';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
-			variant="secondary"
-			ref={ ref }
-		>
+		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
 			{ children }
 		</Button>
 	);
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index 6e5d8de8142f4..7bd3c41a6a22a 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -82,6 +82,7 @@
 	padding-right: $grid-unit-10;
 	padding-left: $grid-unit-20;
 	overflow: hidden;
+	height: $header-height;
 }
 
 .edit-widgets-header__title {
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index 085ca38a3e182..156a15e2f460c 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -44,8 +44,7 @@ export default function InserterSidebar() {
 		>
 			<TagName className="edit-widgets-layout__inserter-panel-header">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					icon={ close }
 					onClick={ closeInserter }
 					label={ __( 'Close block inserter' ) }
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
index 9822f3ff00bc7..1bb850393ad02 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -51,8 +51,7 @@ export default function ListViewSidebar() {
 			<div className="edit-widgets-editor__list-view-panel-header">
 				<strong>{ __( 'List View' ) }</strong>
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ closeListView }
diff --git a/packages/edit-widgets/src/components/sidebar/widget-areas.js b/packages/edit-widgets/src/components/sidebar/widget-areas.js
index 3bcba478eefe8..c7b49c10b9746 100644
--- a/packages/edit-widgets/src/components/sidebar/widget-areas.js
+++ b/packages/edit-widgets/src/components/sidebar/widget-areas.js
@@ -66,8 +66,7 @@ export default function WidgetAreas( { selectedWidgetAreaId } ) {
 					) }
 					{ ! selectedWidgetArea && (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							href={ addQueryArgs( 'customize.php', {
 								'autofocus[panel]': 'widgets',
 								return: window.location.pathname,
diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md
index b380c2fd296d5..6f31c1735021f 100644
--- a/packages/editor/CHANGELOG.md
+++ b/packages/editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 14.8.0 (2024-09-19)
+
 ## 14.7.0 (2024-09-05)
 
 ## 14.6.0 (2024-08-21)
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 2e01aff3a0aa5..29cbffcfb7222 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.7.0",
+	"version": "14.8.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/editor/src/bindings/post-meta.js b/packages/editor/src/bindings/post-meta.js
index 7618ba6c36023..fae010e72d1c8 100644
--- a/packages/editor/src/bindings/post-meta.js
+++ b/packages/editor/src/bindings/post-meta.js
@@ -7,22 +7,84 @@ import { store as coreDataStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Gets a list of post meta fields with their values and labels
+ * to be consumed in the needed callbacks.
+ * If the value is not available based on context, like in templates,
+ * it falls back to the default value, label, or key.
+ *
+ * @param {Object} registry The registry context exposed through `useRegistry`.
+ * @param {Object} context  The context provided.
+ * @return {Object} List of post meta fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ *     field_1_key: {
+ *         label: 'Field 1 Label',
+ *         value: 'Field 1 Value',
+ *     },
+ *     field_2_key: {
+ *         label: 'Field 2 Label',
+ *         value: 'Field 2 Value',
+ *     },
+ *     ...
+ * }
+ * ```
+ */
+function getPostMetaFields( registry, context ) {
+	const { getEditedEntityRecord } = registry.select( coreDataStore );
+	const { getRegisteredPostMeta } = unlock(
+		registry.select( coreDataStore )
+	);
+
+	let entityMetaValues;
+	// Try to get the current entity meta values.
+	if ( context?.postType && context?.postId ) {
+		entityMetaValues = getEditedEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId
+		).meta;
+	}
+
+	const registeredFields = getRegisteredPostMeta( context?.postType );
+	const metaFields = {};
+	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+		// Don't include footnotes or private fields.
+		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+			metaFields[ key ] = {
+				label: props.title || key,
+				value:
+					// When using the entity value, an empty string IS a valid value.
+					entityMetaValues?.[ key ] ??
+					// When using the default, an empty string IS NOT a valid value.
+					( props.default || undefined ),
+			};
+		}
+	} );
+
+	if ( ! Object.keys( metaFields || {} ).length ) {
+		return null;
+	}
+
+	return metaFields;
+}
 
 export default {
 	name: 'core/post-meta',
 	getValues( { registry, context, bindings } ) {
-		const meta = registry
-			.select( coreDataStore )
-			.getEditedEntityRecord(
-				'postType',
-				context?.postType,
-				context?.postId
-			)?.meta;
+		const metaFields = getPostMetaFields( registry, context );
+
 		const newValues = {};
 		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
-			// Use the key if the value is not set.
-			newValues[ attributeName ] =
-				meta?.[ source.args.key ] ?? source.args.key;
+			// Use the value, the field label, or the field key.
+			const fieldKey = source.args.key;
+			const { value: fieldValue, label: fieldLabel } =
+				metaFields?.[ fieldKey ] || {};
+			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
 		}
 		return newValues;
 	},
@@ -82,23 +144,6 @@ export default {
 		return true;
 	},
 	getFieldsList( { registry, context } ) {
-		const metaFields = registry
-			.select( coreDataStore )
-			.getEditedEntityRecord(
-				'postType',
-				context?.postType,
-				context?.postId
-			).meta;
-
-		if ( ! metaFields || ! Object.keys( metaFields ).length ) {
-			return null;
-		}
-
-		// Remove footnotes or private keys from the list of fields.
-		return Object.fromEntries(
-			Object.entries( metaFields ).filter(
-				( [ key ] ) => key !== 'footnotes' && key.charAt( 0 ) !== '_'
-			)
-		);
+		return getPostMetaFields( registry, context );
 	},
 };
diff --git a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
index fcf7adfa77635..af0e9b30ae83b 100644
--- a/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
+++ b/packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
@@ -17,21 +17,20 @@ import { __, _x } from '@wordpress/i18n';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import usePostContentBlocks from '../provider/use-post-content-blocks';
 
 function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const postContentBlocks = usePostContentBlocks();
 	const { entity, onNavigateToEntityRecord, canEditTemplates } = useSelect(
 		( select ) => {
 			const {
-				getBlockEditingMode,
 				getBlockParentsByBlockName,
 				getSettings,
 				getBlockAttributes,
+				getBlockParents,
 			} = select( blockEditorStore );
-			const contentOnly =
-				getBlockEditingMode( clientId ) === 'contentOnly';
-			if ( ! contentOnly ) {
-				return {};
-			}
+			const { getCurrentTemplateId, getRenderingMode } =
+				select( editorStore );
 			const patternParent = getBlockParentsByBlockName(
 				clientId,
 				'core/block',
@@ -45,19 +44,20 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					'wp_block',
 					getBlockAttributes( patternParent ).ref
 				);
-			} else {
-				const { getCurrentTemplateId } = select( editorStore );
-				const templateId = getCurrentTemplateId();
-				const { getContentLockingParent } = unlock(
-					select( blockEditorStore )
+			} else if (
+				getRenderingMode() === 'template-locked' &&
+				! getBlockParents( clientId ).some( ( parent ) =>
+					postContentBlocks.includes( parent )
+				)
+			) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_template',
+					getCurrentTemplateId()
 				);
-				if ( ! getContentLockingParent( clientId ) && templateId ) {
-					record = select( coreStore ).getEntityRecord(
-						'postType',
-						'wp_template',
-						templateId
-					);
-				}
+			}
+			if ( ! record ) {
+				return {};
 			}
 			const _canEditTemplates = select( coreStore ).canUser( 'create', {
 				kind: 'postType',
@@ -70,7 +70,7 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					getSettings().onNavigateToEntityRecord,
 			};
 		},
-		[ clientId ]
+		[ clientId, postContentBlocks ]
 	);
 
 	if ( ! entity ) {
diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 54121652bbf13..6a8c20c8d7055 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -38,10 +38,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		listViewShortcut,
 		inserterSidebarToggleRef,
 		listViewToggleRef,
-		hasFixedToolbar,
 		showIconLabels,
 	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
 		const { get } = select( preferencesStore );
 		const {
 			isListViewOpened,
@@ -60,7 +58,6 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			),
 			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			listViewToggleRef: getListViewToggleRef(),
-			hasFixedToolbar: getSettings().hasFixedToolbar,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
@@ -137,7 +134,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && ! hasFixedToolbar && (
+						{ isLargeViewport && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }
diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 284c9772d7bd6..0709b91175712 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -32,6 +32,8 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorContentSlotFill from './content-slot-fill';
 
+import { unlock } from '../../lock-unlock';
+
 const interfaceLabels = {
 	/* translators: accessibility text for the editor top bar landmark region. */
 	header: __( 'Editor top bar' ),
@@ -71,12 +73,13 @@ export default function EditorInterface( {
 		nextShortcut,
 		showBlockBreadcrumbs,
 		documentLabel,
-		blockEditorMode,
+		isZoomOut,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorSettings, getPostTypeLabel } = select( editorStore );
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
+		const { isZoomOut: _isZoomOut } = unlock( select( blockEditorStore ) );
 
 		return {
 			mode: select( editorStore ).getEditorMode(),
@@ -94,8 +97,7 @@ export default function EditorInterface( {
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			// translators: Default label for the Document in the Block Breadcrumb.
 			documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
-			blockEditorMode:
-				select( blockEditorStore ).__unstableGetEditorMode(),
+			isZoomOut: _isZoomOut(),
 		};
 	}, [] );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -139,6 +141,7 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
+						isEditorIframed={ ! disableIframe }
 					/>
 				)
 			}
@@ -205,7 +208,7 @@ export default function EditorInterface( {
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
 				isRichEditingEnabled &&
-				blockEditorMode !== 'zoom-out' &&
+				! isZoomOut &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)
diff --git a/packages/editor/src/components/global-styles-provider/index.js b/packages/editor/src/components/global-styles-provider/index.js
index 8268997d1f1de..6f2d8177056cb 100644
--- a/packages/editor/src/components/global-styles-provider/index.js
+++ b/packages/editor/src/components/global-styles-provider/index.js
@@ -46,24 +46,38 @@ export function mergeBaseAndUserConfigs( base, user ) {
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution, canUser } =
-				select( coreStore );
+			const {
+				getEntityRecord,
+				getEditedEntityRecord,
+				hasFinishedResolution,
+				canUser,
+			} = select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 
-			const record =
-				_globalStylesId &&
-				canUser( 'read', {
-					kind: 'root',
-					name: 'globalStyles',
-					id: _globalStylesId,
-				} )
-					? getEditedEntityRecord(
-							'root',
-							'globalStyles',
-							_globalStylesId
-					  )
-					: undefined;
+			let record;
+			const userCanEditGlobalStyles = canUser( 'update', {
+				kind: 'root',
+				name: 'globalStyles',
+				id: _globalStylesId,
+			} );
+
+			if ( _globalStylesId ) {
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+					);
+				} else {
+					record = getEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId,
+						{ context: 'view' }
+					);
+				}
+			}
 
 			let hasResolved = false;
 			if (
@@ -71,13 +85,22 @@ function useGlobalStylesUserConfig() {
 					'__experimentalGetCurrentGlobalStylesId'
 				)
 			) {
-				hasResolved = _globalStylesId
-					? hasFinishedResolution( 'getEditedEntityRecord', [
-							'root',
-							'globalStyles',
-							_globalStylesId,
-					  ] )
-					: true;
+				if ( _globalStylesId ) {
+					hasResolved = userCanEditGlobalStyles
+						? hasFinishedResolution( 'getEditedEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+						  ] )
+						: hasFinishedResolution( 'getEntityRecord', [
+								'root',
+								'globalStyles',
+								_globalStylesId,
+								{ context: 'view' },
+						  ] );
+				} else {
+					hasResolved = true;
+				}
 			}
 
 			return {
@@ -145,20 +168,11 @@ function useGlobalStylesUserConfig() {
 }
 
 function useGlobalStylesBaseConfig() {
-	const baseConfig = useSelect( ( select ) => {
-		const {
-			__experimentalGetCurrentThemeBaseGlobalStyles,
-			getCurrentTheme,
-			canUser,
-		} = select( coreStore );
-		const currentTheme = getCurrentTheme();
-
-		return currentTheme &&
-			canUser( 'read', 'global-styles/themes', currentTheme.stylesheet )
-			? __experimentalGetCurrentThemeBaseGlobalStyles()
-			: undefined;
-	}, [] );
-
+	const baseConfig = useSelect(
+		( select ) =>
+			select( coreStore ).__experimentalGetCurrentThemeBaseGlobalStyles(),
+		[]
+	);
 	return [ !! baseConfig, baseConfig ];
 }
 
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index b1b8f2fc1ee32..aca91daaac732 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -7,7 +7,6 @@ import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
-import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -47,10 +46,8 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
+	isEditorIframed,
 } ) {
-	const zoomOutExperimentEnabled =
-		window.__experimentalEnableZoomOutExperiment;
-
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
@@ -67,7 +64,6 @@ function Header( {
 			getEditorSettings,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		return {
 			isTextEditor: getEditorMode() === 'text',
@@ -76,7 +72,6 @@ function Header( {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			isNestedEntity:
 				!! getEditorSettings().onNavigateToPreviousEntityRecord,
-			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
 		};
 	}, [] );
 
@@ -85,9 +80,10 @@ function Header( {
 
 	const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar;
 	const hasBackButton = useHasBackButton();
-
-	// The edit-post-header classname is only kept for backward compatibilty
-	// as some plugins might be relying on its presence.
+	/*
+	 * The edit-post-header classname is only kept for backward compatability
+	 * as some plugins might be relying on its presence.
+	 */
 	return (
 		<div className="editor-header edit-post-header">
 			{ hasBackButton && (
@@ -129,11 +125,13 @@ function Header( {
 				className="editor-header__settings"
 			>
 				{ ! customSaveButton && ! isPublishSidebarOpened && (
-					// This button isn't completely hidden by the publish sidebar.
-					// We can't hide the whole toolbar when the publish sidebar is open because
-					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-					// We track that DOM node to return focus to the PostPublishButtonOrToggle
-					// when the publish sidebar has been closed.
+					/*
+					 * This button isn't completely hidden by the publish sidebar.
+					 * We can't hide the whole toolbar when the publish sidebar is open because
+					 * we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					 * We track that DOM node to return focus to the PostPublishButtonOrToggle
+					 * when the publish sidebar has been closed.
+					 */
 					<PostSavedState forceIsDirty={ forceIsDirty } />
 				) }
 				<PreviewDropdown
@@ -146,7 +144,7 @@ function Header( {
 				/>
 				<PostViewLink />
 
-				{ zoomOutExperimentEnabled && <ZoomOutToggle /> }
+				{ isEditorIframed && isWideViewport && <ZoomOutToggle /> }
 
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
diff --git a/packages/editor/src/components/plugin-sidebar/index.js b/packages/editor/src/components/plugin-sidebar/index.js
index b9c0177e30fc4..56a954cadffb6 100644
--- a/packages/editor/src/components/plugin-sidebar/index.js
+++ b/packages/editor/src/components/plugin-sidebar/index.js
@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { ComplementaryArea } from '@wordpress/interface';
 
 /**
@@ -77,12 +76,9 @@ import { store as editorStore } from '../../store';
  * ```
  */
 export default function PluginSidebar( { className, ...props } ) {
-	const { postTitle, shortcut } = useSelect( ( select ) => {
+	const { postTitle } = useSelect( ( select ) => {
 		return {
 			postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
-			shortcut: select(
-				keyboardShortcutsStore
-			).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),
 		};
 	}, [] );
 	return (
@@ -91,7 +87,6 @@ export default function PluginSidebar( { className, ...props } ) {
 			className="editor-sidebar"
 			smallScreenTitle={ postTitle || __( '(no title)' ) }
 			scope="core"
-			toggleShortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss
index f76c586850500..53e0c645f6f06 100644
--- a/packages/editor/src/components/post-panel-row/style.scss
+++ b/packages/editor/src/components/post-panel-row/style.scss
@@ -28,6 +28,7 @@
 		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
+		height: auto;
 		min-height: $button-size-compact;
 	}
 
diff --git a/packages/editor/src/components/post-publish-button/index.js b/packages/editor/src/components/post-publish-button/index.js
index 0460b27b616e8..71e18a4d6a9c8 100644
--- a/packages/editor/src/components/post-publish-button/index.js
+++ b/packages/editor/src/components/post-publish-button/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { Component, createRef } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -17,7 +17,6 @@ const noop = () => {};
 export class PostPublishButton extends Component {
 	constructor( props ) {
 		super( props );
-		this.buttonNode = createRef();
 
 		this.createOnClick = this.createOnClick.bind( this );
 		this.closeEntitiesSavedStates =
@@ -28,21 +27,6 @@ export class PostPublishButton extends Component {
 		};
 	}
 
-	componentDidMount() {
-		if ( this.props.focusOnMount ) {
-			// This timeout is necessary to make sure the `useEffect` hook of
-			// `useFocusReturn` gets the correct element (the button that opens the
-			// PostPublishPanel) otherwise it will get this button.
-			this.timeoutID = setTimeout( () => {
-				this.buttonNode.current.focus();
-			}, 0 );
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timeoutID );
-	}
-
 	createOnClick( callback ) {
 		return ( ...args ) => {
 			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
@@ -182,7 +166,6 @@ export class PostPublishButton extends Component {
 		return (
 			<>
 				<Button
-					ref={ this.buttonNode }
 					{ ...componentProps }
 					className={ `${ componentProps.className } editor-post-publish-button__button` }
 					size="compact"
diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js
index f0e9a55eae060..6a2d393e20c4b 100644
--- a/packages/editor/src/components/post-publish-panel/index.js
+++ b/packages/editor/src/components/post-publish-panel/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, createRef } from '@wordpress/element';
 import {
 	Button,
 	Spinner,
@@ -27,6 +27,20 @@ export class PostPublishPanel extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onSubmit = this.onSubmit.bind( this );
+		this.cancelButtonNode = createRef();
+	}
+
+	componentDidMount() {
+		// This timeout is necessary to make sure the `useEffect` hook of
+		// `useFocusReturn` gets the correct element (the button that opens the
+		// PostPublishPanel) otherwise it will get this button.
+		this.timeoutID = setTimeout( () => {
+			this.cancelButtonNode.current.focus();
+		}, 0 );
+	}
+
+	componentWillUnmount() {
+		clearTimeout( this.timeoutID );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -85,15 +99,9 @@ export class PostPublishPanel extends Component {
 						/>
 					) : (
 						<>
-							<div className="editor-post-publish-panel__header-publish-button">
-								<PostPublishButton
-									focusOnMount
-									onSubmit={ this.onSubmit }
-									forceIsDirty={ forceIsDirty }
-								/>
-							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									ref={ this.cancelButtonNode }
 									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
@@ -103,6 +111,12 @@ export class PostPublishPanel extends Component {
 									{ __( 'Cancel' ) }
 								</Button>
 							</div>
+							<div className="editor-post-publish-panel__header-publish-button">
+								<PostPublishButton
+									onSubmit={ this.onSubmit }
+									forceIsDirty={ forceIsDirty }
+								/>
+							</div>
 						</>
 					) }
 				</div>
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 9892cf5430f9a..7b07571765178 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -68,12 +68,12 @@
 }
 
 .editor-post-publish-panel__header-publish-button {
-	padding-right: $grid-unit-05;
+	padding-left: $grid-unit-05;
 	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
-	padding-left: $grid-unit-05;
+	padding-right: $grid-unit-05;
 }
 
 .editor-post-publish-panel__header-published {
diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
index 1dd75fffaa7b6..b074159ac423d 100644
--- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap
@@ -433,24 +433,24 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -586,24 +586,24 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
@@ -783,24 +783,24 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
       class="editor-post-publish-panel__header"
     >
       <div
-        class="editor-post-publish-panel__header-publish-button"
+        class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          aria-disabled="true"
-          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
+          class="components-button is-secondary is-compact"
           type="button"
         >
-          Submit for Review
+          Cancel
         </button>
       </div>
       <div
-        class="editor-post-publish-panel__header-cancel-button"
+        class="editor-post-publish-panel__header-publish-button"
       >
         <button
-          class="components-button is-secondary is-compact"
+          aria-disabled="true"
+          class="components-button editor-post-publish-button editor-post-publish-button__button is-primary is-compact"
           type="button"
         >
-          Cancel
+          Submit for Review
         </button>
       </div>
     </div>
diff --git a/packages/editor/src/components/post-status/index.js b/packages/editor/src/components/post-status/index.js
index 1d3050e7e3dd6..c2bf038875354 100644
--- a/packages/editor/src/components/post-status/index.js
+++ b/packages/editor/src/components/post-status/index.js
@@ -173,6 +173,7 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle, isOpen } ) => (
 						<Button
+							className="editor-post-status__toggle"
 							variant="tertiary"
 							size="compact"
 							onClick={ onToggle }
diff --git a/packages/editor/src/components/post-status/style.scss b/packages/editor/src/components/post-status/style.scss
index c601d887d68c7..670dc5fc35999 100644
--- a/packages/editor/src/components/post-status/style.scss
+++ b/packages/editor/src/components/post-status/style.scss
@@ -4,6 +4,11 @@
 	&.is-read-only {
 		padding: 6px 12px;
 	}
+
+	.editor-post-status__toggle.editor-post-status__toggle {
+		padding-top: $grid-unit-05;
+		padding-bottom: $grid-unit-05;
+	}
 }
 
 .editor-change-status__password-fieldset,
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index ecc5bc610a302..38565f4b04abe 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -26,6 +26,7 @@ import { ActionItem } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
@@ -44,6 +45,12 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const handleDevicePreviewChange = ( newDeviceType ) => {
+		setDeviceType( newDeviceType );
+		__unstableSetEditorMode( 'edit' );
+	};
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
@@ -113,7 +120,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 						<MenuItemsChoice
 							choices={ choices }
 							value={ deviceType }
-							onSelect={ setDeviceType }
+							onSelect={ handleDevicePreviewChange }
 						/>
 					</MenuGroup>
 					{ isTemplate && (
diff --git a/packages/editor/src/components/provider/disable-non-page-content-blocks.js b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
index 9abb0e14079d5..ae4fd1075fc26 100644
--- a/packages/editor/src/components/provider/disable-non-page-content-blocks.js
+++ b/packages/editor/src/components/provider/disable-non-page-content-blocks.js
@@ -3,52 +3,32 @@
  */
 import { useSelect, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useMemo } from '@wordpress/element';
-import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const POST_CONTENT_BLOCK_TYPES = [
-	'core/post-title',
-	'core/post-featured-image',
-	'core/post-content',
-];
+import usePostContentBlocks from './use-post-content-blocks';
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
-	const contentOnlyBlockTypes = useMemo(
-		() => [
-			...applyFilters(
-				'editor.postContentBlockTypes',
-				POST_CONTENT_BLOCK_TYPES
-			),
-			'core/template-part',
-		],
-		[]
-	);
-
-	// Note that there are two separate subscriptions because the result for each
-	// returns a new array.
-	const contentOnlyIds = useSelect(
+	const contentOnlyIds = usePostContentBlocks();
+	const templateParts = useSelect( ( select ) => {
+		const { getBlocksByName } = select( blockEditorStore );
+		return getBlocksByName( 'core/template-part' );
+	}, [] );
+	const disabledIds = useSelect(
 		( select ) => {
-			const { getPostBlocksByName } = unlock( select( editorStore ) );
-			return getPostBlocksByName( contentOnlyBlockTypes );
+			const { getBlockOrder } = select( blockEditorStore );
+			return templateParts.flatMap( ( clientId ) =>
+				getBlockOrder( clientId )
+			);
 		},
-		[ contentOnlyBlockTypes ]
+		[ templateParts ]
 	);
-	const disabledIds = useSelect( ( select ) => {
-		const { getBlocksByName, getBlockOrder } = select( blockEditorStore );
-		return getBlocksByName( 'core/template-part' ).flatMap( ( clientId ) =>
-			getBlockOrder( clientId )
-		);
-	}, [] );
 
 	const registry = useRegistry();
 
@@ -61,6 +41,9 @@ export default function DisableNonPageContentBlocks() {
 			for ( const clientId of contentOnlyIds ) {
 				setBlockEditingMode( clientId, 'contentOnly' );
 			}
+			for ( const clientId of templateParts ) {
+				setBlockEditingMode( clientId, 'contentOnly' );
+			}
 			for ( const clientId of disabledIds ) {
 				setBlockEditingMode( clientId, 'disabled' );
 			}
@@ -72,12 +55,15 @@ export default function DisableNonPageContentBlocks() {
 				for ( const clientId of contentOnlyIds ) {
 					unsetBlockEditingMode( clientId );
 				}
+				for ( const clientId of templateParts ) {
+					unsetBlockEditingMode( clientId );
+				}
 				for ( const clientId of disabledIds ) {
 					unsetBlockEditingMode( clientId );
 				}
 			} );
 		};
-	}, [ contentOnlyIds, disabledIds, registry ] );
+	}, [ templateParts, contentOnlyIds, disabledIds, registry ] );
 
 	return null;
 }
diff --git a/packages/editor/src/components/provider/use-post-content-blocks.js b/packages/editor/src/components/provider/use-post-content-blocks.js
new file mode 100644
index 0000000000000..bdd277157e47e
--- /dev/null
+++ b/packages/editor/src/components/provider/use-post-content-blocks.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const POST_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
+export default function usePostContentBlocks() {
+	const contentOnlyBlockTypes = useMemo(
+		() => [
+			...applyFilters(
+				'editor.postContentBlockTypes',
+				POST_CONTENT_BLOCK_TYPES
+			),
+		],
+		[]
+	);
+
+	// Note that there are two separate subscriptions because the result for each
+	// returns a new array.
+	const contentOnlyIds = useSelect(
+		( select ) => {
+			const { getPostBlocksByName } = unlock( select( editorStore ) );
+			return getPostBlocksByName( contentOnlyBlockTypes );
+		},
+		[ contentOnlyBlockTypes ]
+	);
+
+	return contentOnlyIds;
+}
diff --git a/packages/editor/src/components/resizable-editor/resize-handle.js b/packages/editor/src/components/resizable-editor/resize-handle.js
index dbba31f6f998b..ccd903d0f3a17 100644
--- a/packages/editor/src/components/resizable-editor/resize-handle.js
+++ b/packages/editor/src/components/resizable-editor/resize-handle.js
@@ -15,6 +15,11 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
 
+		if ( keyCode !== LEFT && keyCode !== RIGHT ) {
+			return;
+		}
+		event.preventDefault();
+
 		if (
 			( direction === 'left' && keyCode === LEFT ) ||
 			( direction === 'right' && keyCode === RIGHT )
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 2ff115272d614..88d2dac8ffd77 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -174,17 +174,19 @@ function VisualEditor( {
 		hasRootPaddingAwareAlignments,
 		themeHasDisabledLayoutStyles,
 		themeSupportsLayout,
-		isZoomOutMode,
+		isZoomedOut,
 	} = useSelect( ( select ) => {
-		const { getSettings, __unstableGetEditorMode } =
-			select( blockEditorStore );
+		const { getSettings, isZoomOut: _isZoomOut } = unlock(
+			select( blockEditorStore )
+		);
+
 		const _settings = getSettings();
 		return {
 			themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
 			themeSupportsLayout: _settings.supportsLayout,
 			hasRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			isZoomedOut: _isZoomOut(),
 		};
 	}, [] );
 
@@ -336,7 +338,7 @@ function VisualEditor( {
 	] );
 
 	const zoomOutProps =
-		isZoomOutMode && ! isTabletViewport
+		isZoomedOut && ! isTabletViewport
 			? {
 					scale: 'default',
 					frameSize: '48px',
@@ -355,7 +357,7 @@ function VisualEditor( {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
-		! isZoomOutMode;
+		! isZoomedOut;
 	const shouldIframe =
 		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
diff --git a/packages/editor/src/components/zoom-out-toggle/index.js b/packages/editor/src/components/zoom-out-toggle/index.js
index e8c7b1e50510a..b89bf15546f0d 100644
--- a/packages/editor/src/components/zoom-out-toggle/index.js
+++ b/packages/editor/src/components/zoom-out-toggle/index.js
@@ -7,26 +7,43 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { square as zoomOutIcon } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
 
 const ZoomOutToggle = () => {
-	const { isZoomOutMode } = useSelect( ( select ) => ( {
-		isZoomOutMode:
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
+		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		showIconLabels: select( preferencesStore ).get(
+			'core',
+			'showIconLabels'
+		),
 	} ) );
 
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	const handleZoomOut = () => {
-		__unstableSetEditorMode( isZoomOutMode ? 'edit' : 'zoom-out' );
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 50 );
+		}
+		__unstableSetEditorMode( isZoomOut ? 'edit' : 'zoom-out' );
 	};
 
 	return (
 		<Button
 			onClick={ handleZoomOut }
 			icon={ zoomOutIcon }
-			label={ __( 'Toggle Zoom Out' ) }
-			isPressed={ isZoomOutMode }
+			label={ __( 'Zoom Out' ) }
+			isPressed={ isZoomOut }
 			size="compact"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 };
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
index ccfa6a6021d71..ee63e4b5e70fa 100644
--- a/packages/element/CHANGELOG.md
+++ b/packages/element/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/element/package.json b/packages/element/package.json
index d6062abe6ecf6..56759cdc23d91 100644
--- a/packages/element/package.json
+++ b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/element",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Element React module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/env/CHANGELOG.md b/packages/env/CHANGELOG.md
index b3dcf350596a0..0b32fd808d960 100644
--- a/packages/env/CHANGELOG.md
+++ b/packages/env/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/env/package.json b/packages/env/package.json
index 7f3b15b1e1562..b1ea172a4303d 100644
--- a/packages/env/package.json
+++ b/packages/env/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/env",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "A zero-config, self contained local WordPress environment for development and testing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/escape-html/CHANGELOG.md b/packages/escape-html/CHANGELOG.md
index 490cbdb184f5b..c13edebda4480 100644
--- a/packages/escape-html/CHANGELOG.md
+++ b/packages/escape-html/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/escape-html/package.json b/packages/escape-html/package.json
index 8dd1a66cf2d5e..8f68366006ce7 100644
--- a/packages/escape-html/package.json
+++ b/packages/escape-html/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/escape-html",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Escape HTML utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index 14d44d21acda9..725872f8bf101 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 21.1.0 (2024-09-19)
+
 ## 21.0.0 (2024-09-05)
 
 ### Breaking Changes
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
index 73996275c9154..4902acd2bcd0a 100644
--- a/packages/eslint-plugin/package.json
+++ b/packages/eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/eslint-plugin",
-	"version": "21.0.0",
+	"version": "21.1.0",
 	"description": "ESLint plugin for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/fields/package.json b/packages/fields/package.json
index b780e99671802..e226e709f26e8 100644
--- a/packages/fields/package.json
+++ b/packages/fields/package.json
@@ -9,7 +9,6 @@
 		"gutenberg",
 		"dataviews"
 	],
-	"private": true,
 	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/fields/README.md",
 	"repository": {
 		"type": "git",
diff --git a/packages/fields/tsconfig.json b/packages/fields/tsconfig.json
index 69dbd076d0574..b0e5e9676ed30 100644
--- a/packages/fields/tsconfig.json
+++ b/packages/fields/tsconfig.json
@@ -22,6 +22,7 @@
 		{ "path": "../dataviews" },
 		{ "path": "../blob" },
 		{ "path": "../core-data" },
+		{ "path": "../block-editor" },
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" }
 	],
diff --git a/packages/format-library/CHANGELOG.md b/packages/format-library/CHANGELOG.md
index c003ac587fcdf..11a32094cffea 100644
--- a/packages/format-library/CHANGELOG.md
+++ b/packages/format-library/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/format-library/package.json b/packages/format-library/package.json
index 780f513bdb037..03b1047d3fb9d 100644
--- a/packages/format-library/package.json
+++ b/packages/format-library/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md
index de9e11c38fe90..0e162b64513d2 100644
--- a/packages/hooks/CHANGELOG.md
+++ b/packages/hooks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 51074af0d239b..cf8e0a791a747 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/hooks",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress hooks library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/html-entities/CHANGELOG.md b/packages/html-entities/CHANGELOG.md
index 6887a70b391f9..e49251a865362 100644
--- a/packages/html-entities/CHANGELOG.md
+++ b/packages/html-entities/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/html-entities/package.json b/packages/html-entities/package.json
index 30e3c1728307d..7196df00a8cd6 100644
--- a/packages/html-entities/package.json
+++ b/packages/html-entities/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/html-entities",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "HTML entity utilities for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/i18n/CHANGELOG.md b/packages/i18n/CHANGELOG.md
index d2bf7ad7ea7eb..928a0d6d0ef74 100644
--- a/packages/i18n/CHANGELOG.md
+++ b/packages/i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index fb3c488c1a4de..2e92335914271 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/i18n",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress internationalization (i18n) library.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 32bbd88181e36..be047e2181d4a 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 10.8.0 (2024-09-19)
+
+### New Features
+
+-   Add new `bell` and `bell-unread` icons.
+
 ## 10.7.0 (2024-09-05)
 
 ## 10.6.0 (2024-08-21)
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ab23fef8eff66..c1c1682ed6750 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/icons",
-	"version": "10.7.0",
+	"version": "10.8.0",
 	"description": "WordPress Icons package, based on dashicon.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index e9b4833136513..9ab41bd362027 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -18,6 +18,8 @@ export { default as aspectRatio } from './library/aspect-ratio';
 export { default as audio } from './library/audio';
 export { default as background } from './library/background';
 export { default as backup } from './library/backup';
+export { default as bell } from './library/bell';
+export { default as bellUnread } from './library/bell-unread';
 export { default as blockDefault } from './library/block-default';
 export { default as blockMeta } from './library/block-meta';
 export { default as blockTable } from './library/block-table';
diff --git a/packages/icons/src/library/bell-unread.js b/packages/icons/src/library/bell-unread.js
new file mode 100644
index 0000000000000..96c209ddb09f6
--- /dev/null
+++ b/packages/icons/src/library/bell-unread.js
@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path, Circle } from '@wordpress/primitives';
+
+const bellUnread = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M13.969 4.39A5.088 5.088 0 0 0 12 4C9.2 4 7 6.2 7 9v2.5c0 1.353-.17 2.368-.976 3-.267.209-.602.376-1.024.5v1h14v-1c-.422-.124-.757-.291-1.024-.5-.806-.632-.976-1.647-.976-3V11c-.53 0-1.037-.103-1.5-.29v.79c0 .93.066 1.98.515 2.897l.053.103H7.932l.053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5.43 0 .838.072 1.214.206.167-.488.425-.933.755-1.316Zm-3.961 13.618c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20a1.991 1.991 0 0 1-1.992-1.992Z" />
+		<Circle cx="17" cy="7" r="2.5" />
+	</SVG>
+);
+
+export default bellUnread;
diff --git a/packages/icons/src/library/bell.js b/packages/icons/src/library/bell.js
new file mode 100644
index 0000000000000..910488ee3035a
--- /dev/null
+++ b/packages/icons/src/library/bell.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const bell = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M17 11.5c0 1.353.17 2.368.976 3 .266.209.602.376 1.024.5v1H5v-1c.422-.124.757-.291 1.024-.5.806-.632.976-1.647.976-3V9c0-2.8 2.2-5 5-5s5 2.2 5 5v2.5ZM15.5 9v2.5c0 .93.066 1.98.515 2.897l.053.103H7.932a4.018 4.018 0 0 0 .053-.103c.449-.917.515-1.967.515-2.897V9c0-1.972 1.528-3.5 3.5-3.5s3.5 1.528 3.5 3.5Zm-5.492 9.008c0-.176.023-.346.065-.508h3.854A1.996 1.996 0 0 1 12 20c-1.1 0-1.992-.892-1.992-1.992Z"
+		/>
+	</SVG>
+);
+
+export default bell;
diff --git a/packages/interactivity-router/CHANGELOG.md b/packages/interactivity-router/CHANGELOG.md
index 00c47f3ed074b..1f8e91dec0547 100644
--- a/packages/interactivity-router/CHANGELOG.md
+++ b/packages/interactivity-router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/interactivity-router/package.json b/packages/interactivity-router/package.json
index db85c0d8bdba3..8314d7b1b70d5 100644
--- a/packages/interactivity-router/package.json
+++ b/packages/interactivity-router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity-router",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,6 +28,7 @@
 	"types": "build-types",
 	"wpScriptModuleExports": "./build-module/index.js",
 	"dependencies": {
+		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/interactivity": "file:../interactivity"
 	},
 	"publishConfig": {
diff --git a/packages/interactivity-router/src/index.ts b/packages/interactivity-router/src/index.ts
index c6e1087b038a5..3bd44c7aebd71 100644
--- a/packages/interactivity-router/src/index.ts
+++ b/packages/interactivity-router/src/index.ts
@@ -209,16 +209,37 @@ const isValidEvent = ( event: MouseEvent ) =>
 // Variable to store the current navigation.
 let navigatingTo = '';
 
-export const { state, actions } = store( 'core/router', {
+let hasLoadedNavigationTextsData = false;
+const navigationTexts = {
+	loading: 'Loading page, please wait.',
+	loaded: 'Page Loaded.',
+};
+
+interface Store {
+	state: {
+		url: string;
+		navigation: {
+			hasStarted: boolean;
+			hasFinished: boolean;
+			message: string;
+			texts?: {
+				loading?: string;
+				loaded?: string;
+			};
+		};
+	};
+	actions: {
+		navigate: ( href: string, options?: NavigateOptions ) => void;
+		prefetch: ( url: string, options?: PrefetchOptions ) => void;
+	};
+}
+
+export const { state, actions } = store< Store >( 'core/router', {
 	state: {
 		url: window.location.href,
 		navigation: {
 			hasStarted: false,
 			hasFinished: false,
-			texts: {
-				loading: '',
-				loaded: '',
-			},
 			message: '',
 		},
 	},
@@ -275,7 +296,7 @@ export const { state, actions } = store( 'core/router', {
 					navigation.hasFinished = false;
 				}
 				if ( screenReaderAnnouncement ) {
-					navigation.message = navigation.texts.loading;
+					a11ySpeak( 'loading' );
 				}
 			}, 400 );
 
@@ -315,14 +336,7 @@ export const { state, actions } = store( 'core/router', {
 				}
 
 				if ( screenReaderAnnouncement ) {
-					// Announce that the page has been loaded. If the message is the
-					// same, we use a no-break space similar to the @wordpress/a11y
-					// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
-					navigation.message =
-						navigation.texts.loaded +
-						( navigation.message === navigation.texts.loaded
-							? '\u00A0'
-							: '' );
+					a11ySpeak( 'loaded' );
 				}
 
 				// Scroll to the anchor if exits in the link.
@@ -363,6 +377,58 @@ export const { state, actions } = store( 'core/router', {
 	},
 } );
 
+/**
+ * Announces a message to screen readers.
+ *
+ * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
+ * the package on demand and should be used instead of calling `ally.speak` direacly.
+ *
+ * @param messageKey The message to be announced by assistive technologies.
+ */
+function a11ySpeak( messageKey: keyof typeof navigationTexts ) {
+	if ( ! hasLoadedNavigationTextsData ) {
+		hasLoadedNavigationTextsData = true;
+		const content = document.getElementById(
+			'wp-script-module-data-@wordpress/interactivity-router'
+		)?.textContent;
+		if ( content ) {
+			try {
+				const parsed = JSON.parse( content );
+				if ( typeof parsed?.i18n?.loading === 'string' ) {
+					navigationTexts.loading = parsed.i18n.loading;
+				}
+				if ( typeof parsed?.i18n?.loaded === 'string' ) {
+					navigationTexts.loaded = parsed.i18n.loaded;
+				}
+			} catch {}
+		} else {
+			// Fallback to localized strings from Interactivity API state.
+			if ( state.navigation.texts?.loading ) {
+				navigationTexts.loading = state.navigation.texts.loading;
+			}
+			if ( state.navigation.texts?.loaded ) {
+				navigationTexts.loaded = state.navigation.texts.loaded;
+			}
+		}
+	}
+
+	const message = navigationTexts[ messageKey ];
+
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
+		import( '@wordpress/a11y' ).then(
+			( { speak } ) => speak( message ),
+			// Ignore failures to load the a11y module.
+			() => {}
+		);
+	} else {
+		state.navigation.message =
+			// Announce that the page has been loaded. If the message is the
+			// same, we use a no-break space similar to the @wordpress/a11y
+			// package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
+			message + ( state.navigation.message === message ? '\u00A0' : '' );
+	}
+}
+
 // Add click and prefetch to all links.
 if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 	if ( navigationMode === 'fullPage' ) {
diff --git a/packages/interactivity-router/tsconfig.json b/packages/interactivity-router/tsconfig.json
index eff80af2f28db..f601a26a86f5f 100644
--- a/packages/interactivity-router/tsconfig.json
+++ b/packages/interactivity-router/tsconfig.json
@@ -7,6 +7,6 @@
 		"checkJs": false,
 		"strict": false
 	},
-	"references": [ { "path": "../interactivity" } ],
+	"references": [ { "path": "../a11y" }, { "path": "../interactivity" } ],
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index 9ea269fa269ad..42f311973709d 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
+### Enhancements
+
+-   Improve TypeScript support for generators ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+-   Refactor internal context proxies implementation ([#64713](https://github.com/WordPress/gutenberg/pull/64713)).
+
 ### Bug Fixes
 
 -   Prevent calling `proxifyContext` over an already-proxified context inside `wp-context` ([#65090](https://github.com/WordPress/gutenberg/pull/65090)).
diff --git a/packages/interactivity/package.json b/packages/interactivity/package.json
index 6be9f3c4a0d7d..5b6ce90fc5184 100644
--- a/packages/interactivity/package.json
+++ b/packages/interactivity/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interactivity",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Package that provides a standard and simple way to handle the frontend interactivity of Gutenberg blocks.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interactivity/src/directives.tsx b/packages/interactivity/src/directives.tsx
index b41d50722e376..340880954683d 100644
--- a/packages/interactivity/src/directives.tsx
+++ b/packages/interactivity/src/directives.tsx
@@ -6,10 +6,6 @@
  */
 import { h as createElement, type RefObject } from 'preact';
 import { useContext, useMemo, useRef } from 'preact/hooks';
-/**
- * Internal dependencies
- */
-import { proxifyState, peek } from './proxies';
 
 /**
  * Internal dependencies
@@ -24,131 +20,7 @@ import {
 } from './utils';
 import { directive, getEvaluate, type DirectiveEntry } from './hooks';
 import { getScope } from './scopes';
-
-// Assigned objects should be ignored during proxification.
-const contextAssignedObjects = new WeakMap();
-
-// Store the context proxy and fallback for each object in the context.
-const contextObjectToProxy = new WeakMap();
-const contextProxyToObject = new WeakMap();
-const contextObjectToFallback = new WeakMap();
-
-const descriptor = Reflect.getOwnPropertyDescriptor;
-
-/**
- * Wrap a context object with a proxy to reproduce the context stack. The proxy
- * uses the passed `inherited` context as a fallback to look up for properties
- * that don't exist in the given context. Also, updated properties are modified
- * where they are defined, or added to the main context when they don't exist.
- *
- * By default, all plain objects inside the context are wrapped, unless it is
- * listed in the `ignore` option.
- *
- * @param current   Current context.
- * @param inherited Inherited context, used as fallback.
- *
- * @return The wrapped context object.
- */
-const proxifyContext = ( current: object, inherited: object = {} ): object => {
-	// Update the fallback object reference when it changes.
-	contextObjectToFallback.set( current, inherited );
-	if ( ! contextObjectToProxy.has( current ) ) {
-		const proxy = new Proxy( current, {
-			get: ( target: object, k: string ) => {
-				const fallback = contextObjectToFallback.get( current );
-				// Always subscribe to prop changes in the current context.
-				const currentProp = target[ k ];
-
-				// Return the inherited prop when missing in target.
-				if ( ! ( k in target ) && k in fallback ) {
-					return fallback[ k ];
-				}
-
-				// Proxify plain objects that were not directly assigned.
-				if (
-					k in target &&
-					! contextAssignedObjects.get( target )?.has( k ) &&
-					isPlainObject( currentProp )
-				) {
-					return proxifyContext( currentProp );
-				}
-
-				// Return the stored proxy for `currentProp` when it exists.
-				if ( contextObjectToProxy.has( currentProp ) ) {
-					return contextObjectToProxy.get( currentProp );
-				}
-
-				/*
-				 * For other cases, return the value from target, also
-				 * subscribing to changes in the parent context when the current
-				 * prop is not defined.
-				 */
-				return k in target ? currentProp : fallback[ k ];
-			},
-			set: ( target, k, value ) => {
-				const fallback = contextObjectToFallback.get( current );
-				const obj =
-					k in target || ! ( k in fallback ) ? target : fallback;
-
-				/*
-				 * Assigned object values should not be proxified so they point
-				 * to the original object and don't inherit unexpected
-				 * properties.
-				 */
-				if ( value && typeof value === 'object' ) {
-					if ( ! contextAssignedObjects.has( obj ) ) {
-						contextAssignedObjects.set( obj, new Set() );
-					}
-					contextAssignedObjects.get( obj ).add( k );
-				}
-
-				/*
-				 * When the value is a proxy, it's because it comes from the
-				 * context, so the inner value is assigned instead.
-				 */
-				if ( contextProxyToObject.has( value ) ) {
-					const innerValue = contextProxyToObject.get( value );
-					obj[ k ] = innerValue;
-				} else {
-					obj[ k ] = value;
-				}
-
-				return true;
-			},
-			ownKeys: ( target ) => [
-				...new Set( [
-					...Object.keys( contextObjectToFallback.get( current ) ),
-					...Object.keys( target ),
-				] ),
-			],
-			getOwnPropertyDescriptor: ( target, k ) =>
-				descriptor( target, k ) ||
-				descriptor( contextObjectToFallback.get( current ), k ),
-		} );
-		contextObjectToProxy.set( current, proxy );
-		contextProxyToObject.set( proxy, current );
-	}
-	return contextObjectToProxy.get( current );
-};
-
-/**
- * Recursively update values within a context object.
- *
- * @param target A context instance.
- * @param source Object with properties to update in `target`.
- */
-const updateContext = ( target: any, source: any ) => {
-	for ( const k in source ) {
-		if (
-			isPlainObject( peek( target, k ) ) &&
-			isPlainObject( source[ k ] )
-		) {
-			updateContext( peek( target, k ) as object, source[ k ] );
-		} else if ( ! ( k in target ) ) {
-			target[ k ] = source[ k ];
-		}
-	}
-};
+import { proxifyState, proxifyContext, deepMerge } from './proxies';
 
 /**
  * Recursively clone the passed object.
@@ -270,14 +142,19 @@ export default () => {
 			const defaultEntry = context.find(
 				( { suffix } ) => suffix === 'default'
 			);
-			const inheritedValue = useContext( inheritedContext );
+			const { client: inheritedClient, server: inheritedServer } =
+				useContext( inheritedContext );
 
 			const ns = defaultEntry!.namespace;
-			const currentValue = useRef( proxifyState( ns, {} ) );
+			const client = useRef( proxifyState( ns, {} ) );
+			const server = useRef( proxifyState( ns, {}, { readOnly: true } ) );
 
 			// No change should be made if `defaultEntry` does not exist.
 			const contextStack = useMemo( () => {
-				const result = { ...inheritedValue };
+				const result = {
+					client: { ...inheritedClient },
+					server: { ...inheritedServer },
+				};
 				if ( defaultEntry ) {
 					const { namespace, value } = defaultEntry;
 					// Check that the value is a JSON object. Send a console warning if not.
@@ -286,17 +163,23 @@ export default () => {
 							`The value of data-wp-context in "${ namespace }" store must be a valid stringified JSON object.`
 						);
 					}
-					updateContext(
-						currentValue.current,
-						deepClone( value ) as object
+					deepMerge(
+						client.current,
+						deepClone( value ) as object,
+						false
 					);
-					result[ namespace ] = proxifyContext(
-						currentValue.current,
-						inheritedValue[ namespace ]
+					deepMerge( server.current, deepClone( value ) as object );
+					result.client[ namespace ] = proxifyContext(
+						client.current,
+						inheritedClient[ namespace ]
+					);
+					result.server[ namespace ] = proxifyContext(
+						server.current,
+						inheritedServer[ namespace ]
 					);
 				}
 				return result;
-			}, [ defaultEntry, inheritedValue ] );
+			}, [ defaultEntry, inheritedClient, inheritedServer ] );
 
 			return createElement( Provider, { value: contextStack }, children );
 		},
@@ -690,17 +573,24 @@ export default () => {
 					suffix === 'default' ? 'item' : kebabToCamelCase( suffix );
 				const itemContext = proxifyContext(
 					proxifyState( namespace, {} ),
-					inheritedValue[ namespace ]
+					inheritedValue.client[ namespace ]
 				);
 				const mergedContext = {
-					...inheritedValue,
-					[ namespace ]: itemContext,
+					client: {
+						...inheritedValue.client,
+						[ namespace ]: itemContext,
+					},
+					server: { ...inheritedValue.server },
 				};
 
 				// Set the item after proxifying the context.
-				mergedContext[ namespace ][ itemProp ] = item;
+				mergedContext.client[ namespace ][ itemProp ] = item;
 
-				const scope = { ...getScope(), context: mergedContext };
+				const scope = {
+					...getScope(),
+					context: mergedContext.client,
+					serverContext: mergedContext.server,
+				};
 				const key = eachKey
 					? getEvaluate( { scope } )( eachKey[ 0 ] )
 					: item;
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 215da8afef9b5..6b55ec014aa79 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -93,7 +93,7 @@ interface DirectivesProps {
 }
 
 // Main context.
-const context = createContext< any >( {} );
+const context = createContext< any >( { client: {}, server: {} } );
 
 // WordPress Directives.
 const directiveCallbacks: Record< string, DirectiveCallback > = {};
@@ -190,9 +190,13 @@ const resolve = ( path: string, namespace: string ) => {
 	}
 	let resolvedStore = stores.get( namespace );
 	if ( typeof resolvedStore === 'undefined' ) {
-		resolvedStore = store( namespace, undefined, {
-			lock: universalUnlock,
-		} );
+		resolvedStore = store(
+			namespace,
+			{},
+			{
+				lock: universalUnlock,
+			}
+		);
 	}
 	const current = {
 		...resolvedStore,
@@ -253,7 +257,9 @@ const Directives = ( {
 	// element ref, state and props.
 	const scope = useRef< Scope >( {} as Scope ).current;
 	scope.evaluate = useCallback( getEvaluate( { scope } ), [] );
-	scope.context = useContext( context );
+	const { client, server } = useContext( context );
+	scope.context = client;
+	scope.serverContext = server;
 	/* eslint-disable react-hooks/rules-of-hooks */
 	scope.ref = previousScope?.ref || useRef( null );
 	/* eslint-enable react-hooks/rules-of-hooks */
diff --git a/packages/interactivity/src/index.ts b/packages/interactivity/src/index.ts
index 336c2a97226db..9d013e4e744ed 100644
--- a/packages/interactivity/src/index.ts
+++ b/packages/interactivity/src/index.ts
@@ -16,8 +16,8 @@ import { getNamespace } from './namespaces';
 import { parseServerData, populateServerData } from './store';
 import { proxifyState } from './proxies';
 
-export { store, getConfig } from './store';
-export { getContext, getElement } from './scopes';
+export { store, getConfig, getServerState } from './store';
+export { getContext, getServerContext, getElement } from './scopes';
 export {
 	withScope,
 	useWatch,
diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts
new file mode 100644
index 0000000000000..64517c91a6940
--- /dev/null
+++ b/packages/interactivity/src/proxies/context.ts
@@ -0,0 +1,69 @@
+const contextObjectToProxy = new WeakMap();
+const contextObjectToFallback = new WeakMap();
+const contextProxies = new WeakSet();
+
+const descriptor = Reflect.getOwnPropertyDescriptor;
+
+// TODO: Use the proxy registry to avoid multiple proxies on the same object.
+const contextHandlers: ProxyHandler< object > = {
+	get: ( target, key ) => {
+		const fallback = contextObjectToFallback.get( target );
+		// Always subscribe to prop changes in the current context.
+		const currentProp = target[ key ];
+
+		/*
+		 * Return the value from `target` if it exists, or from `fallback`
+		 * otherwise. This way, in the case the property doesn't exist either in
+		 * `target` or `fallback`, it also subscribes to changes in the parent
+		 * context.
+		 */
+		return key in target ? currentProp : fallback[ key ];
+	},
+	set: ( target, key, value ) => {
+		const fallback = contextObjectToFallback.get( target );
+
+		// If the property exists in the current context, modify it. Otherwise,
+		// add it to the current context.
+		const obj = key in target || ! ( key in fallback ) ? target : fallback;
+		obj[ key ] = value;
+
+		return true;
+	},
+	ownKeys: ( target ) => [
+		...new Set( [
+			...Object.keys( contextObjectToFallback.get( target ) ),
+			...Object.keys( target ),
+		] ),
+	],
+	getOwnPropertyDescriptor: ( target, key ) =>
+		descriptor( target, key ) ||
+		descriptor( contextObjectToFallback.get( target ), key ),
+};
+
+/**
+ * Wrap a context object with a proxy to reproduce the context stack. The proxy
+ * uses the passed `inherited` context as a fallback to look up for properties
+ * that don't exist in the given context. Also, updated properties are modified
+ * where they are defined, or added to the main context when they don't exist.
+ *
+ * @param current   Current context.
+ * @param inherited Inherited context, used as fallback.
+ *
+ * @return The wrapped context object.
+ */
+export const proxifyContext = (
+	current: object,
+	inherited: object = {}
+): object => {
+	if ( contextProxies.has( current ) ) {
+		throw Error( 'This object cannot be proxified.' );
+	}
+	// Update the fallback object reference when it changes.
+	contextObjectToFallback.set( current, inherited );
+	if ( ! contextObjectToProxy.has( current ) ) {
+		const proxy = new Proxy( current, contextHandlers );
+		contextObjectToProxy.set( current, proxy );
+		contextProxies.add( proxy );
+	}
+	return contextObjectToProxy.get( current );
+};
diff --git a/packages/interactivity/src/proxies/index.ts b/packages/interactivity/src/proxies/index.ts
index 1a495de6b469f..168e6467fc701 100644
--- a/packages/interactivity/src/proxies/index.ts
+++ b/packages/interactivity/src/proxies/index.ts
@@ -3,3 +3,4 @@
  */
 export { proxifyState, peek, deepMerge } from './state';
 export { proxifyStore } from './store';
+export { proxifyContext } from './context';
diff --git a/packages/interactivity/src/proxies/state.ts b/packages/interactivity/src/proxies/state.ts
index ec49c4b27c4ad..c91d8f6ab90a5 100644
--- a/packages/interactivity/src/proxies/state.ts
+++ b/packages/interactivity/src/proxies/state.ts
@@ -46,6 +46,8 @@ const proxyToProps: WeakMap<
 export const hasPropSignal = ( proxy: object, key: string ) =>
 	proxyToProps.has( proxy ) && proxyToProps.get( proxy )!.has( key );
 
+const readOnlyProxies = new WeakSet();
+
 /**
  * Returns the {@link PropSignal | `PropSignal`} instance associated with the
  * specified prop in the passed proxy.
@@ -77,8 +79,11 @@ const getPropSignal = (
 			if ( get ) {
 				prop.setGetter( get );
 			} else {
+				const readOnly = readOnlyProxies.has( proxy );
 				prop.setValue(
-					shouldProxy( value ) ? proxifyState( ns, value ) : value
+					shouldProxy( value )
+						? proxifyState( ns, value, { readOnly } )
+						: value
 				);
 			}
 		}
@@ -148,6 +153,9 @@ const stateHandlers: ProxyHandler< object > = {
 		value: unknown,
 		receiver: object
 	): boolean {
+		if ( readOnlyProxies.has( receiver ) ) {
+			return false;
+		}
 		setNamespace( getNamespaceFromProxy( receiver ) );
 		try {
 			return Reflect.set( target, key, value, receiver );
@@ -161,6 +169,10 @@ const stateHandlers: ProxyHandler< object > = {
 		key: string,
 		desc: PropertyDescriptor
 	): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
 		const isNew = ! ( key in target );
 		const result = Reflect.defineProperty( target, key, desc );
 
@@ -199,6 +211,10 @@ const stateHandlers: ProxyHandler< object > = {
 	},
 
 	deleteProperty( target: object, key: string ): boolean {
+		if ( readOnlyProxies.has( getProxyFromObject( target )! ) ) {
+			return false;
+		}
+
 		const result = Reflect.deleteProperty( target, key );
 
 		if ( result ) {
@@ -230,8 +246,10 @@ const stateHandlers: ProxyHandler< object > = {
  * Returns the proxy associated with the given state object, creating it if it
  * does not exist.
  *
- * @param namespace The namespace that will be associated to this proxy.
- * @param obj       The object to proxify.
+ * @param namespace        The namespace that will be associated to this proxy.
+ * @param obj              The object to proxify.
+ * @param options          Options.
+ * @param options.readOnly Read-only.
  *
  * @throws Error if the object cannot be proxified. Use {@link shouldProxy} to
  *         check if a proxy can be created for a specific object.
@@ -240,8 +258,15 @@ const stateHandlers: ProxyHandler< object > = {
  */
 export const proxifyState = < T extends object >(
 	namespace: string,
-	obj: T
-): T => createProxy( namespace, obj, stateHandlers ) as T;
+	obj: T,
+	options?: { readOnly?: boolean }
+): T => {
+	const proxy = createProxy( namespace, obj, stateHandlers ) as T;
+	if ( options?.readOnly ) {
+		readOnlyProxies.add( proxy );
+	}
+	return proxy;
+};
 
 /**
  * Reads the value of the specified property without subscribing to it.
diff --git a/packages/interactivity/src/proxies/test/context-proxy.ts b/packages/interactivity/src/proxies/test/context-proxy.ts
new file mode 100644
index 0000000000000..306b3e4a8aa94
--- /dev/null
+++ b/packages/interactivity/src/proxies/test/context-proxy.ts
@@ -0,0 +1,291 @@
+/**
+ * External dependencies
+ */
+import { effect } from '@preact/signals';
+
+/**
+ * Internal dependencies
+ */
+import { proxifyContext, proxifyState } from '../';
+
+describe( 'Interactivity API', () => {
+	describe( 'context proxy', () => {
+		describe( 'get', () => {
+			it( 'should inherit props from its fallback', () => {
+				const fallback: any = proxifyContext( { a: 1 }, {} );
+				const context: any = proxifyContext( { b: 2 }, fallback );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+			} );
+
+			it( "should inherit props from its fallback's fallback", () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( context.a ).toBe( 1 );
+				expect( context.b ).toBe( 2 );
+				expect( context.c ).toBe( 3 );
+			} );
+
+			it( 'should list all inherited props', () => {
+				const fallback2: any = proxifyContext( { a: 1 }, {} );
+				const fallback1: any = proxifyContext( { b: 2 }, fallback2 );
+				const context: any = proxifyContext( { c: 3 }, fallback1 );
+
+				expect( Object.entries( context ) ).toEqual( [
+					[ 'a', 1 ],
+					[ 'b', 2 ],
+					[ 'c', 3 ],
+				] );
+			} );
+
+			it( 'should shadow properties defined in its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				expect( context.prop ).toBe( 'context' );
+			} );
+
+			it( 'should not inherit properties from nested objects', () => {
+				const fallback: any = proxifyContext( { obj: { a: 1 } }, {} );
+				const context: any = proxifyContext(
+					{ obj: { b: 2 } },
+					fallback
+				);
+
+				expect( 'a' in context.obj ).toBe( false );
+				expect( context.obj.b ).toBe( 2 );
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( state, fallback );
+
+				expect( context.a ).toBe( 1 );
+			} );
+		} );
+
+		describe( 'set', () => {
+			it( 'should modify props defined in it', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext(
+					{ prop: 'context' },
+					fallback
+				);
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'fallback' );
+			} );
+
+			it( 'should modify props inherited from its fallback', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should see changes in inherited props', () => {
+				const fallback: any = proxifyContext(
+					{ prop: 'fallback' },
+					{}
+				);
+				const context: any = proxifyContext( {}, fallback );
+
+				fallback.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBe( 'modified' );
+			} );
+
+			it( 'should create non-inherited props in itself', () => {
+				const fallback: any = proxifyContext( {}, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.prop = 'modified';
+
+				expect( context.prop ).toBe( 'modified' );
+				expect( fallback.prop ).toBeUndefined();
+			} );
+
+			it( 'should work with the proxified state', () => {
+				const state = proxifyState( 'test', { a: 1 } );
+				const fallback: any = proxifyContext( state, {} );
+				const context: any = proxifyContext( {}, fallback );
+
+				context.a = 2;
+
+				expect( context.a ).toBe( 2 );
+				expect( state.a ).toBe( 2 );
+			} );
+		} );
+
+		describe( 'computations', () => {
+			it( 'should subscribe to changes in the current context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBe( 'context' );
+
+				context.fromContext = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to changes in inherited values', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', { fromFallback: 'fallback' } ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', { fromContext: 'context' } ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBe( 'fallback' );
+
+				fallback.fromFallback = 'modified';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'modified' );
+			} );
+
+			it( 'should subscribe to undefined props added to the context', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromContext );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromContext ).toBeUndefined();
+
+				context.fromContext = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromContext ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to undefined props added to the fallback', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => context.fromFallback );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.fromFallback ).toBeUndefined();
+
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.fromFallback ).toBe( 'added' );
+			} );
+
+			it( 'should subscribe to shadowed props', () => {
+				const fallbackState: any = proxifyState( 'test', {} );
+				const fallback: any = proxifyContext( fallbackState, {} );
+
+				const contextState: any = proxifyState( 'test', {} );
+				const context: any = proxifyContext( contextState, fallback );
+
+				const spy = jest.fn( () => context.prop );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( context.prop ).toBeUndefined();
+
+				fallbackState.prop = 'fromFallback';
+
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( context.prop ).toBe( 'fromFallback' );
+
+				contextState.prop = 'fromContext';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( context.prop ).toBe( 'fromContext' );
+			} );
+
+			it( 'should subscribe to any changes in listed props', () => {
+				const fallback: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					{}
+				);
+				const context: any = proxifyContext(
+					proxifyState( 'test', {} ),
+					fallback
+				);
+
+				const spy = jest.fn( () => Object.keys( context ) );
+				effect( spy );
+
+				expect( spy ).toHaveBeenCalledTimes( 1 );
+				expect( Object.keys( context ) ).toEqual( [] );
+
+				context.fromContext = 'added';
+				fallback.fromFallback = 'added';
+
+				expect( spy ).toHaveBeenCalledTimes( 3 );
+				expect( Object.keys( context ).sort() ).toEqual( [
+					'fromContext',
+					'fromFallback',
+				] );
+			} );
+		} );
+
+		describe( 'proxifyContext', () => {
+			it( 'should throw when trying to re-proxify a proxy object', () => {
+				const context = proxifyContext( {}, {} );
+				expect( () => proxifyContext( context, {} ) ).toThrow(
+					'This object cannot be proxified.'
+				);
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/src/proxies/test/state-proxy.ts b/packages/interactivity/src/proxies/test/state-proxy.ts
index 92500189fc830..4b0d2b0a708c3 100644
--- a/packages/interactivity/src/proxies/test/state-proxy.ts
+++ b/packages/interactivity/src/proxies/test/state-proxy.ts
@@ -9,7 +9,7 @@ import { effect } from '@preact/signals';
 /**
  * Internal dependencies
  */
-import { proxifyState, peek } from '../';
+import { proxifyState, peek, deepMerge } from '../';
 import { setScope, resetScope, getContext, getElement } from '../../scopes';
 import { setNamespace, resetNamespace } from '../../namespaces';
 
@@ -1265,5 +1265,202 @@ describe( 'Interactivity API', () => {
 				expect( x ).toBe( undefined );
 			} );
 		} );
+
+		describe( 'read-only', () => {
+			it( "should not allow modifying a prop's value", () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.prop = 'new value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.prop = 'new value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow modifying a prop descriptor', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					Object.defineProperty( readOnlyState, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+				expect( () => {
+					Object.defineProperty( readOnlyState.nested, 'prop', {
+						get: () => 'value from getter',
+						writable: true,
+						enumerable: false,
+					} );
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					readOnlyState.newProp = 'value';
+				} ).toThrow();
+				expect( () => {
+					readOnlyState.nested.newProp = 'value';
+				} ).toThrow();
+			} );
+
+			it( 'should not allow removing props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{ prop: 'value', nested: { prop: 'value' } },
+					{ readOnly: true }
+				);
+
+				expect( () => {
+					delete readOnlyState.prop;
+				} ).toThrow();
+				expect( () => {
+					delete readOnlyState.nested.prop;
+				} ).toThrow();
+			} );
+
+			it( 'should not allow adding items to an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.push( 4 ) ).toThrow();
+				expect( () => readOnlyState.nested.array.push( 4 ) ).toThrow();
+			} );
+
+			it( 'should not allow removing items from an array', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{ array: [ 1, 2, 3 ], nested: { array: [ 1, 2, 3 ] } },
+					{ readOnly: true }
+				);
+
+				expect( () => readOnlyState.array.pop() ).toThrow();
+				expect( () => readOnlyState.nested.array.pop() ).toThrow();
+			} );
+
+			it( 'should allow subscribing to prop changes', () => {
+				const readOnlyState = proxifyState(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.prop );
+				const spy2 = jest.fn( () => readOnlyState.nested.prop );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { prop: 'new value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+
+				deepMerge( readOnlyState, { nested: { prop: 'new value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'new value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'new value' );
+			} );
+
+			it( 'should allow subscribing to new props', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						prop: 'value',
+						nested: { prop: 'value' },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.newProp );
+				const spy2 = jest.fn( () => readOnlyState.nested.newProp );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( undefined );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { newProp: 'value' } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+
+				deepMerge( readOnlyState, { nested: { newProp: 'value' } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 'value' );
+				expect( spy2 ).toHaveLastReturnedWith( 'value' );
+			} );
+
+			it( 'should allow subscribing to array changes', () => {
+				const readOnlyState = proxifyState< any >(
+					'test',
+					{
+						array: [ 1, 2, 3 ],
+						nested: { array: [ 1, 2, 3 ] },
+					},
+					{ readOnly: true }
+				);
+
+				const spy1 = jest.fn( () => readOnlyState.array[ 0 ] );
+				const spy2 = jest.fn( () => readOnlyState.nested.array[ 0 ] );
+
+				effect( spy1 );
+				effect( spy2 );
+				expect( spy1 ).toHaveBeenCalledTimes( 1 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 1 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { array: [ 4, 5, 6 ] } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 1 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( 1 );
+
+				deepMerge( readOnlyState, { nested: { array: [] } } );
+
+				expect( spy1 ).toHaveBeenCalledTimes( 2 );
+				expect( spy2 ).toHaveBeenCalledTimes( 2 );
+				expect( spy1 ).toHaveLastReturnedWith( 4 );
+				expect( spy2 ).toHaveLastReturnedWith( undefined );
+			} );
+		} );
 	} );
 } );
diff --git a/packages/interactivity/src/scopes.ts b/packages/interactivity/src/scopes.ts
index 2e78755ec4bbe..722305f6bee11 100644
--- a/packages/interactivity/src/scopes.ts
+++ b/packages/interactivity/src/scopes.ts
@@ -12,6 +12,7 @@ import type { Evaluate } from './hooks';
 export interface Scope {
 	evaluate: Evaluate;
 	context: object;
+	serverContext: object;
 	ref: RefObject< HTMLElement >;
 	attributes: createElement.JSX.HTMLAttributes;
 }
@@ -96,3 +97,46 @@ export const getElement = () => {
 		attributes: deepImmutable( attributes ),
 	} );
 };
+
+/**
+ * Retrieves the part of the inherited context defined and updated from the
+ * server.
+ *
+ * The object returned is read-only, and includes the context defined in PHP
+ * with `wp_interactivity_data_wp_context()`, including the corresponding
+ * inherited properties. When `actions.navigate()` is called, this object is
+ * updated to reflect the changes in the new visited page, without affecting the
+ * context returned by `getContext()`. Directives can subscribe to those changes
+ * to update the context if needed.
+ *
+ * @example
+ * ```js
+ *  store('...', {
+ *    callbacks: {
+ *      updateServerContext() {
+ *        const context = getContext();
+ *        const serverContext = getServerContext();
+ *        // Override some property with the new value that came from the server.
+ *        context.overridableProp = serverContext.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store namespace. By default, the namespace where the calling
+ *                  function exists is used.
+ * @return The server context content.
+ */
+export const getServerContext = < T extends object >(
+	namespace?: string
+): T => {
+	const scope = getScope();
+	if ( globalThis.SCRIPT_DEBUG ) {
+		if ( ! scope ) {
+			throw Error(
+				'Cannot call `getServerContext()` when there is no scope. If you are using an async function, please consider using a generator instead. If you are using some sort of async callbacks, like `setTimeout`, please wrap the callback with `withScope(callback)`.'
+			);
+		}
+	}
+	return scope.serverContext[ namespace || getNamespace() ];
+};
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index c74764b902e19..b147e0f61163b 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -12,6 +12,7 @@ export const stores = new Map();
 const rawStores = new Map();
 const storeLocks = new Map();
 const storeConfigs = new Map();
+const serverStates = new Map();
 
 /**
  * Get the defined config for the store with the passed namespace.
@@ -22,6 +23,39 @@ const storeConfigs = new Map();
 export const getConfig = ( namespace?: string ) =>
 	storeConfigs.get( namespace || getNamespace() ) || {};
 
+/**
+ * Get the part of the state defined and updated from the server.
+ *
+ * The object returned is read-only, and includes the state defined in PHP with
+ * `wp_interactivity_state()`. When using `actions.navigate()`, this object is
+ * updated to reflect the changes in its properites, without affecting the state
+ * returned by `store()`. Directives can subscribe to those changes to update
+ * the state if needed.
+ *
+ * @example
+ * ```js
+ *  const { state } = store('myStore', {
+ *    callbacks: {
+ *      updateServerState() {
+ *        const serverState = getServerState();
+ *        // Override some property with the new value that came from the server.
+ *        state.overridableProp = serverState.overridableProp;
+ *      },
+ *    },
+ *  });
+ * ```
+ *
+ * @param namespace Store's namespace from which to retrieve the server state.
+ * @return The server state for the given namespace.
+ */
+export const getServerState = ( namespace?: string ) => {
+	const ns = namespace || getNamespace();
+	if ( ! serverStates.has( ns ) ) {
+		serverStates.set( ns, proxifyState( ns, {}, { readOnly: true } ) );
+	}
+	return serverStates.get( ns );
+};
+
 interface StoreOptions {
 	/**
 	 * Property to block/unblock private store namespaces.
@@ -50,6 +84,42 @@ interface StoreOptions {
 	lock?: boolean | string;
 }
 
+type Prettify< T > = { [ K in keyof T ]: T[ K ] } & {};
+type DeepPartial< T > = T extends object
+	? { [ P in keyof T ]?: DeepPartial< T[ P ] > }
+	: T;
+type DeepPartialState< T extends { state: object } > = Omit< T, 'state' > & {
+	state?: DeepPartial< T[ 'state' ] >;
+};
+type ConvertGeneratorToPromise< T > = T extends (
+	...args: infer A
+) => Generator< any, infer R, any >
+	? ( ...args: A ) => Promise< R >
+	: never;
+type ConvertGeneratorsToPromises< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertGeneratorToPromise< T[ K ] > extends never
+			? T[ K ]
+			: ConvertGeneratorToPromise< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertGeneratorsToPromises< T[ K ] > >
+		: T[ K ];
+};
+type ConvertPromiseToGenerator< T > = T extends (
+	...args: infer A
+) => Promise< infer R >
+	? ( ...args: A ) => Generator< any, R, any >
+	: never;
+type ConvertPromisesToGenerators< T > = {
+	[ K in keyof T ]: T[ K ] extends ( ...args: any[] ) => any
+		? ConvertPromiseToGenerator< T[ K ] > extends never
+			? T[ K ]
+			: ConvertPromiseToGenerator< T[ K ] >
+		: T[ K ] extends object
+		? Prettify< ConvertPromisesToGenerators< T[ K ] > >
+		: T[ K ];
+};
+
 export const universalUnlock =
 	'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
 
@@ -98,17 +168,34 @@ export const universalUnlock =
  *
  * @return A reference to the namespace content.
  */
-export function store< S extends object = {} >(
+
+// Overload for when the types are inferred.
+export function store< T extends object >(
+	namespace: string,
+	storePart: T,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they contain state.
+export function store< T extends { state: object } >(
+	namespace: string,
+	storePart: ConvertPromisesToGenerators< DeepPartialState< T > >,
+	options?: StoreOptions
+): Prettify< ConvertGeneratorsToPromises< T > >;
+
+// Overload for when types are passed via generics and they don't contain state.
+export function store< T extends object >(
 	namespace: string,
-	storePart?: S,
+	storePart: ConvertPromisesToGenerators< T >,
 	options?: StoreOptions
-): S;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
+// Overload for when types are divided into multiple parts.
 export function store< T extends object >(
 	namespace: string,
-	storePart?: T,
+	storePart: ConvertPromisesToGenerators< DeepPartial< T > >,
 	options?: StoreOptions
-): T;
+): Prettify< ConvertGeneratorsToPromises< T > >;
 
 export function store(
 	namespace: string,
@@ -187,6 +274,7 @@ export const populateServerData = ( data?: {
 		Object.entries( data!.state ).forEach( ( [ namespace, state ] ) => {
 			const st = store< any >( namespace, {}, { lock: universalUnlock } );
 			deepMerge( st.state, state, false );
+			deepMerge( getServerState( namespace ), state );
 		} );
 	}
 	if ( isPlainObject( data?.config ) ) {
diff --git a/packages/interactivity/src/test/store.ts b/packages/interactivity/src/test/store.ts
new file mode 100644
index 0000000000000..1092001db0314
--- /dev/null
+++ b/packages/interactivity/src/test/store.ts
@@ -0,0 +1,286 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../store';
+
+describe( 'Interactivity API', () => {
+	describe( 'store', () => {
+		it( 'dummy test', () => {
+			expect( true ).toBe( true );
+		} );
+
+		describe( 'types', () => {
+			describe( 'the whole store can be inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.clientValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async( n: number ) {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.derived satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						state: {
+							clientValue: number;
+							serverValue: number;
+							readonly derived: number;
+						};
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						state: {
+							clientValue: 1,
+							// @ts-expect-error
+							nonExistent: 2,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, unknown > {
+								const n1 = myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the server state can be typed and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerStore = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const clientStore = {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						},
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					};
+
+					type Store = ServerStore & typeof clientStore;
+
+					const myStore = store< Store >( 'test', clientStore );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent();
+				};
+			} );
+
+			describe( 'the state can be casted and the rest inferred', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type State = {
+						clientValue: number;
+						serverValue: number;
+						derived: number;
+					};
+
+					const myStore = store( 'test', {
+						state: {
+							clientValue: 1,
+							get derived(): number {
+								return myStore.state.serverValue;
+							},
+						} as State,
+						actions: {
+							sync( n: number ) {
+								return n;
+							},
+							*async(
+								n: number
+							): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return myStore.state.derived + n1 + n;
+							},
+						},
+					} );
+
+					myStore.state.clientValue satisfies number;
+					myStore.state.serverValue satisfies number;
+					myStore.state.derived satisfies number;
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the whole store can be manually typed even if doesnt contain state', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					interface Store {
+						actions: {
+							sync: ( n: number ) => number;
+							async: ( n: number ) => Promise< number >;
+						};
+						callbacks: {
+							existent: number;
+						};
+					}
+
+					const myStore = store< Store >( 'test', {
+						actions: {
+							sync( n ) {
+								return n;
+							},
+							*async( n ): Generator< unknown, number, number > {
+								const n1: number =
+									yield myStore.actions.sync( n );
+								return n1 + n;
+							},
+						},
+						callbacks: {
+							existent: 1,
+							// @ts-expect-error
+							nonExistent: 1,
+						},
+					} );
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies number;
+					myStore.actions.sync( 1 ) satisfies number;
+					myStore.actions.async( 1 ) satisfies Promise< number >;
+					( await myStore.actions.async( 1 ) ) satisfies number;
+					myStore.callbacks.existent satisfies number;
+					// @ts-expect-error
+					myStore.callbacks.nonExistent satisfies number;
+					// @ts-expect-error
+					myStore.actions.nonExistent() satisfies {};
+				};
+			} );
+
+			describe( 'the store can be divided into multiple parts', () => {
+				// eslint-disable-next-line no-unused-expressions
+				async () => {
+					type ServerState = {
+						state: {
+							serverValue: number;
+						};
+					};
+
+					const firstStorePart = {
+						state: {
+							clientValue1: 1,
+						},
+						actions: {
+							incrementValue1( n = 1 ) {
+								myStore.state.clientValue1 += n;
+							},
+						},
+					};
+
+					type FirstStorePart = typeof firstStorePart;
+
+					const secondStorePart = {
+						state: {
+							clientValue2: 'test',
+						},
+						actions: {
+							*asyncAction() {
+								return (
+									myStore.state.clientValue1 +
+									myStore.state.serverValue
+								);
+							},
+						},
+					};
+
+					type Store = ServerState &
+						FirstStorePart &
+						typeof secondStorePart;
+
+					const myStore = store< Store >( 'test', firstStorePart );
+					store( 'test', secondStorePart );
+
+					myStore.state.clientValue1 satisfies number;
+					myStore.state.clientValue2 satisfies string;
+					myStore.actions.incrementValue1( 1 );
+					myStore.actions.asyncAction() satisfies Promise< number >;
+					( await myStore.actions.asyncAction() ) satisfies number;
+
+					// @ts-expect-error
+					myStore.state.nonExistent satisfies {};
+				};
+			} );
+		} );
+	} );
+} );
diff --git a/packages/interactivity/tsconfig.test.json b/packages/interactivity/tsconfig.test.json
new file mode 100644
index 0000000000000..6a90abc2ba221
--- /dev/null
+++ b/packages/interactivity/tsconfig.test.json
@@ -0,0 +1,13 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"noEmit": true,
+		"emitDeclarationOnly": false,
+		"types": [ "jest" ]
+	},
+	"references": [ { "path": "./tsconfig.json" } ],
+	"files": [ "src/test/store.ts" ],
+	"exclude": []
+}
diff --git a/packages/interface/CHANGELOG.md b/packages/interface/CHANGELOG.md
index 64f8c370bb6ec..f5e0d5e74762a 100644
--- a/packages/interface/CHANGELOG.md
+++ b/packages/interface/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/interface/package.json b/packages/interface/package.json
index d15d648eaef44..932c3fde03de4 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js
index b6690b7df5fc5..15f9e48d71083 100644
--- a/packages/interface/src/components/complementary-area-toggle/index.js
+++ b/packages/interface/src/components/complementary-area-toggle/index.js
@@ -17,6 +17,7 @@ function ComplementaryAreaToggle( {
 	icon,
 	selectedIcon,
 	name,
+	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
@@ -26,8 +27,10 @@ function ComplementaryAreaToggle( {
 			identifier,
 		[ identifier, scope ]
 	);
+
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+
 	return (
 		<ComponentToUse
 			icon={ selectedIcon && isSelected ? selectedIcon : icon }
@@ -39,6 +42,7 @@ function ComplementaryAreaToggle( {
 					enableComplementaryArea( scope, identifier );
 				}
 			} }
+			shortcut={ shortcut }
 			{ ...props }
 		/>
 	);
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 363a6ee9dea76..d9fa8e71acb23 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -275,6 +275,7 @@ function ComplementaryArea( {
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
 							size="compact"
+							shortcut={ toggleShortcut }
 						/>
 					) }
 				</PinnedItems>
diff --git a/packages/is-shallow-equal/CHANGELOG.md b/packages/is-shallow-equal/CHANGELOG.md
index 81f2c4b164a3a..ef424aaeebf22 100644
--- a/packages/is-shallow-equal/CHANGELOG.md
+++ b/packages/is-shallow-equal/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/is-shallow-equal/package.json b/packages/is-shallow-equal/package.json
index 553c3182bb566..462b97bda1721 100644
--- a/packages/is-shallow-equal/package.json
+++ b/packages/is-shallow-equal/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/is-shallow-equal",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Test for shallow equality between two objects or arrays.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-console/CHANGELOG.md b/packages/jest-console/CHANGELOG.md
index 7f7f80b815a85..2ed1dc24299f4 100644
--- a/packages/jest-console/CHANGELOG.md
+++ b/packages/jest-console/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.8.0 (2024-09-19)
+
 ## 8.7.0 (2024-09-05)
 
 ## 8.6.0 (2024-08-21)
diff --git a/packages/jest-console/package.json b/packages/jest-console/package.json
index 4381a0f287235..d55ce881a0956 100644
--- a/packages/jest-console/package.json
+++ b/packages/jest-console/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-console",
-	"version": "8.7.0",
+	"version": "8.8.0",
 	"description": "Custom Jest matchers for the Console object.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-preset-default/CHANGELOG.md b/packages/jest-preset-default/CHANGELOG.md
index e48d25dc1e642..a3ecded683cd1 100644
--- a/packages/jest-preset-default/CHANGELOG.md
+++ b/packages/jest-preset-default/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.8.0 (2024-09-19)
+
 ## 12.7.0 (2024-09-05)
 
 ## 12.6.0 (2024-08-21)
diff --git a/packages/jest-preset-default/package.json b/packages/jest-preset-default/package.json
index 27638c711d4d1..72be60b0f3376 100644
--- a/packages/jest-preset-default/package.json
+++ b/packages/jest-preset-default/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-preset-default",
-	"version": "12.7.0",
+	"version": "12.8.0",
 	"description": "Default Jest preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
index 572b4aa137a14..3e61ea09412d6 100644
--- a/packages/jest-puppeteer-axe/CHANGELOG.md
+++ b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/jest-puppeteer-axe/package.json b/packages/jest-puppeteer-axe/package.json
index b8ccbfcd36bef..69fb9cfa181f4 100644
--- a/packages/jest-puppeteer-axe/package.json
+++ b/packages/jest-puppeteer-axe/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/jest-puppeteer-axe",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Axe API integration with Jest and Puppeteer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keyboard-shortcuts/CHANGELOG.md b/packages/keyboard-shortcuts/CHANGELOG.md
index fe3506ea4a5f1..356e850692af4 100644
--- a/packages/keyboard-shortcuts/CHANGELOG.md
+++ b/packages/keyboard-shortcuts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/keyboard-shortcuts/package.json b/packages/keyboard-shortcuts/package.json
index dd560424b66ff..038e15ebc1532 100644
--- a/packages/keyboard-shortcuts/package.json
+++ b/packages/keyboard-shortcuts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keyboard-shortcuts",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Handling keyboard shortcuts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/keycodes/CHANGELOG.md b/packages/keycodes/CHANGELOG.md
index 51050728f2f5a..a578adb34bd3d 100644
--- a/packages/keycodes/CHANGELOG.md
+++ b/packages/keycodes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/keycodes/package.json b/packages/keycodes/package.json
index 5d8ec0545d7e3..d63d5757dcbf3 100644
--- a/packages/keycodes/package.json
+++ b/packages/keycodes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/keycodes",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Keycodes utilities for WordPress. Used to check for keyboard events across browsers/operating systems.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/lazy-import/CHANGELOG.md b/packages/lazy-import/CHANGELOG.md
index daea6da3404d3..6853a036fdaa5 100644
--- a/packages/lazy-import/CHANGELOG.md
+++ b/packages/lazy-import/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/lazy-import/package.json b/packages/lazy-import/package.json
index 62aab79635e9c..758c1b5934a95 100644
--- a/packages/lazy-import/package.json
+++ b/packages/lazy-import/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/lazy-import",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Lazily import a module, installing it automatically if missing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/list-reusable-blocks/CHANGELOG.md b/packages/list-reusable-blocks/CHANGELOG.md
index 9f62523fd94e1..852f30a299917 100644
--- a/packages/list-reusable-blocks/CHANGELOG.md
+++ b/packages/list-reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/list-reusable-blocks/package.json b/packages/list-reusable-blocks/package.json
index 839532327faa2..03c1c11af9e49 100644
--- a/packages/list-reusable-blocks/package.json
+++ b/packages/list-reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/list-reusable-blocks",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Adding Export/Import support to the reusable blocks listing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/media-utils/CHANGELOG.md b/packages/media-utils/CHANGELOG.md
index 26282b6b2bda2..a25bdf05596f8 100644
--- a/packages/media-utils/CHANGELOG.md
+++ b/packages/media-utils/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ### New Features
 
 -   Rewrite in TypeScript, exporting all the individual utility functions.
diff --git a/packages/media-utils/package.json b/packages/media-utils/package.json
index 1cfe019e89d0a..e90ab5a98e87d 100644
--- a/packages/media-utils/package.json
+++ b/packages/media-utils/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/media-utils",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress Media Upload Utils.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/notices/CHANGELOG.md b/packages/notices/CHANGELOG.md
index f32648df69728..dbff0c69b7449 100644
--- a/packages/notices/CHANGELOG.md
+++ b/packages/notices/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/notices/package.json b/packages/notices/package.json
index a4e2c5ea8d98c..09056f5fe6818 100644
--- a/packages/notices/package.json
+++ b/packages/notices/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/notices",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "State management for notices.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/npm-package-json-lint-config/CHANGELOG.md b/packages/npm-package-json-lint-config/CHANGELOG.md
index 24dfd09fff55a..ecf89f4df6471 100644
--- a/packages/npm-package-json-lint-config/CHANGELOG.md
+++ b/packages/npm-package-json-lint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/npm-package-json-lint-config/package.json b/packages/npm-package-json-lint-config/package.json
index ad88e3fd442a1..38080c1e09d83 100644
--- a/packages/npm-package-json-lint-config/package.json
+++ b/packages/npm-package-json-lint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/npm-package-json-lint-config",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "WordPress npm-package-json-lint shareable configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/CHANGELOG.md b/packages/nux/CHANGELOG.md
index 85feaa73dbc23..51a49b1bf9314 100644
--- a/packages/nux/CHANGELOG.md
+++ b/packages/nux/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.8.0 (2024-09-19)
+
 ## 9.7.0 (2024-09-05)
 
 ## 9.6.0 (2024-08-21)
diff --git a/packages/nux/package.json b/packages/nux/package.json
index 7a8e565d163aa..8bc5bfea622f0 100644
--- a/packages/nux/package.json
+++ b/packages/nux/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/nux",
-	"version": "9.7.0",
+	"version": "9.8.0",
 	"description": "NUX (New User eXperience) module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
index dbea46e35fb09..90edc7a19990a 100644
--- a/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
+++ b/packages/nux/src/components/dot-tip/test/__snapshots__/index.js.snap
@@ -7,7 +7,7 @@ exports[`DotTip should render correctly 1`] = `
   data-wp-c16t="true"
   data-wp-component="Popover"
   role="dialog"
-  style="position: absolute; top: 0px; left: 0px; opacity: 1; transform: translateX(0px) translateY(0px) translateX(0em) scale(1) translateZ(0); transform-origin: 0% 50% 0;"
+  style="position: absolute; top: 0px; left: 0px; transform: none;"
   tabindex="-1"
 >
   <div
diff --git a/packages/patterns/CHANGELOG.md b/packages/patterns/CHANGELOG.md
index eaef3c431d668..1579dd646228f 100644
--- a/packages/patterns/CHANGELOG.md
+++ b/packages/patterns/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/patterns/package.json b/packages/patterns/package.json
index 6d67aa7ef3ac9..e3563325f95fa 100644
--- a/packages/patterns/package.json
+++ b/packages/patterns/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/patterns",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Management of user pattern editing.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/plugins/CHANGELOG.md b/packages/plugins/CHANGELOG.md
index c2c010c888115..18d5e1a38567d 100644
--- a/packages/plugins/CHANGELOG.md
+++ b/packages/plugins/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/plugins/package.json b/packages/plugins/package.json
index 9cc58fc5096be..e9e9bc0667f9a 100644
--- a/packages/plugins/package.json
+++ b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/plugins",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Plugins module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-plugins-preset/CHANGELOG.md b/packages/postcss-plugins-preset/CHANGELOG.md
index b16c9284417a3..e4441308f0fe4 100644
--- a/packages/postcss-plugins-preset/CHANGELOG.md
+++ b/packages/postcss-plugins-preset/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/postcss-plugins-preset/package.json b/packages/postcss-plugins-preset/package.json
index d012dde494958..67c030b3a1070 100644
--- a/packages/postcss-plugins-preset/package.json
+++ b/packages/postcss-plugins-preset/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-plugins-preset",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "PostCSS sharable plugins preset for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/postcss-themes/CHANGELOG.md b/packages/postcss-themes/CHANGELOG.md
index 774c2edf77e0c..c7d61b14eadf1 100644
--- a/packages/postcss-themes/CHANGELOG.md
+++ b/packages/postcss-themes/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/postcss-themes/package.json b/packages/postcss-themes/package.json
index 29e617382161e..864056ee0d61e 100644
--- a/packages/postcss-themes/package.json
+++ b/packages/postcss-themes/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/postcss-themes",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "PostCSS plugin to generate theme colors.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences-persistence/CHANGELOG.md b/packages/preferences-persistence/CHANGELOG.md
index a4a3081901bf5..79a755f40bfd5 100644
--- a/packages/preferences-persistence/CHANGELOG.md
+++ b/packages/preferences-persistence/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/preferences-persistence/package.json b/packages/preferences-persistence/package.json
index a318979abed2a..a82a883e2b574 100644
--- a/packages/preferences-persistence/package.json
+++ b/packages/preferences-persistence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences-persistence",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "Persistence utilities for `wordpress/preferences`.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/preferences/CHANGELOG.md b/packages/preferences/CHANGELOG.md
index 7d87ce9386875..840c476e8ece8 100644
--- a/packages/preferences/CHANGELOG.md
+++ b/packages/preferences/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/preferences/package.json b/packages/preferences/package.json
index 5b12d274af30a..fbd2cc46033ee 100644
--- a/packages/preferences/package.json
+++ b/packages/preferences/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/preferences",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Utilities for managing WordPress preferences.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/prettier-config/CHANGELOG.md b/packages/prettier-config/CHANGELOG.md
index e0e01d2b7f3ac..28d178a87f980 100644
--- a/packages/prettier-config/CHANGELOG.md
+++ b/packages/prettier-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/prettier-config/package.json b/packages/prettier-config/package.json
index f6c7797f2b6e7..27a72866e6126 100644
--- a/packages/prettier-config/package.json
+++ b/packages/prettier-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/prettier-config",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress Prettier shared configuration.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/primitives/CHANGELOG.md b/packages/primitives/CHANGELOG.md
index 48db582f65e10..f0bd389bb08b7 100644
--- a/packages/primitives/CHANGELOG.md
+++ b/packages/primitives/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 8296c6348e9be..2119fc70b11d1 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/primitives",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress cross-platform primitives.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/priority-queue/CHANGELOG.md b/packages/priority-queue/CHANGELOG.md
index a7f1257b8f6b4..1c343e2cd0e81 100644
--- a/packages/priority-queue/CHANGELOG.md
+++ b/packages/priority-queue/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/priority-queue/package.json b/packages/priority-queue/package.json
index c8d7cbe1cebb9..a60c61528bd5e 100644
--- a/packages/priority-queue/package.json
+++ b/packages/priority-queue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/priority-queue",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Generic browser priority queue.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/private-apis/CHANGELOG.md b/packages/private-apis/CHANGELOG.md
index cd6449dc774ce..f7807d3667b8a 100644
--- a/packages/private-apis/CHANGELOG.md
+++ b/packages/private-apis/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/private-apis/package.json b/packages/private-apis/package.json
index 3a3dd1aeab570..957eec5e34b49 100644
--- a/packages/private-apis/package.json
+++ b/packages/private-apis/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/private-apis",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Internal experimental APIs for WordPress core.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/project-management-automation/CHANGELOG.md b/packages/project-management-automation/CHANGELOG.md
index 167e68512b3df..797d6e3a9cfe2 100644
--- a/packages/project-management-automation/CHANGELOG.md
+++ b/packages/project-management-automation/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/project-management-automation/package.json b/packages/project-management-automation/package.json
index 2e33d7c44d6cf..e4e1a345f0556 100644
--- a/packages/project-management-automation/package.json
+++ b/packages/project-management-automation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/project-management-automation",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "GitHub Action that implements various automation to assist with managing the Gutenberg GitHub repository.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/react-i18n/CHANGELOG.md b/packages/react-i18n/CHANGELOG.md
index d0c0dbe7079f4..cdab707f520dc 100644
--- a/packages/react-i18n/CHANGELOG.md
+++ b/packages/react-i18n/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/react-i18n/package.json b/packages/react-i18n/package.json
index d39fc7bba4ba5..dd4e513e33383 100644
--- a/packages/react-i18n/package.json
+++ b/packages/react-i18n/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-i18n",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "React bindings for @wordpress/i18n.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
index 8147d5c3b3475..5f28f282f760f 100644
--- a/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
+++ b/packages/readable-js-assets-webpack-plugin/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/readable-js-assets-webpack-plugin/package.json b/packages/readable-js-assets-webpack-plugin/package.json
index 285bcc27ba0a6..7901045e659b2 100644
--- a/packages/readable-js-assets-webpack-plugin/package.json
+++ b/packages/readable-js-assets-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/readable-js-assets-webpack-plugin",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Generate a readable JS file for each JS asset.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/redux-routine/CHANGELOG.md b/packages/redux-routine/CHANGELOG.md
index bd03c25219ddb..82c3b1b4c2e92 100644
--- a/packages/redux-routine/CHANGELOG.md
+++ b/packages/redux-routine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/redux-routine/package.json b/packages/redux-routine/package.json
index 1efebcb92de7f..8e151e7d6bbfa 100644
--- a/packages/redux-routine/package.json
+++ b/packages/redux-routine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/redux-routine",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Redux middleware for generator coroutines.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/reusable-blocks/CHANGELOG.md b/packages/reusable-blocks/CHANGELOG.md
index 33f4ef529587f..9ea28faa2e6c9 100644
--- a/packages/reusable-blocks/CHANGELOG.md
+++ b/packages/reusable-blocks/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/reusable-blocks/package.json b/packages/reusable-blocks/package.json
index 8c15057189dc9..3e5e9cfb0ca77 100644
--- a/packages/reusable-blocks/package.json
+++ b/packages/reusable-blocks/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/reusable-blocks",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "Reusable blocks utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/CHANGELOG.md b/packages/rich-text/CHANGELOG.md
index cee6ada55f7b6..e456968e24875 100644
--- a/packages/rich-text/CHANGELOG.md
+++ b/packages/rich-text/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 7.8.0 (2024-09-19)
+
 ## 7.7.0 (2024-09-05)
 
 ## 7.6.0 (2024-08-21)
diff --git a/packages/rich-text/package.json b/packages/rich-text/package.json
index a5a96c77175c1..a7e8e4b173c15 100644
--- a/packages/rich-text/package.json
+++ b/packages/rich-text/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/rich-text",
-	"version": "7.7.0",
+	"version": "7.8.0",
 	"description": "Rich text value and manipulation API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
index 0b0a269509e7e..898bdfa73b330 100644
--- a/packages/rich-text/src/create.js
+++ b/packages/rich-text/src/create.js
@@ -431,7 +431,7 @@ export function removeReservedCharacters( string ) {
 /**
  * Creates a Rich Text value from a DOM element and range.
  *
- * @param {Object}  $1                  Named argements.
+ * @param {Object}  $1                  Named arguments.
  * @param {Element} [$1.element]        Element to create value from.
  * @param {Range}   [$1.range]          Range to create value from.
  * @param {boolean} [$1.isEditableTree]
@@ -591,7 +591,7 @@ function createFromElement( { element, range, isEditableTree } ) {
 /**
  * Gets the attributes of an element in object shape.
  *
- * @param {Object}  $1         Named argements.
+ * @param {Object}  $1         Named arguments.
  * @param {Element} $1.element Element to get attributes from.
  *
  * @return {Object|void} Attribute object or `undefined` if the element has no
diff --git a/packages/router/CHANGELOG.md b/packages/router/CHANGELOG.md
index 02871d4f31e13..2d8d93373f4c5 100644
--- a/packages/router/CHANGELOG.md
+++ b/packages/router/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/router/package.json b/packages/router/package.json
index bcc709bbac5d3..5efc014ee221c 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/router",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Router API for WordPress pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md
index 43fe001351bc2..d24f9dfc7c02a 100644
--- a/packages/scripts/CHANGELOG.md
+++ b/packages/scripts/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 30.0.0 (2024-09-19)
+
 
 ### Breaking Changes
 
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index d9e74d0c71826..f1546a9ff7b7e 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/scripts",
-	"version": "29.0.0",
+	"version": "30.0.0",
 	"description": "Collection of reusable scripts for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/server-side-render/CHANGELOG.md b/packages/server-side-render/CHANGELOG.md
index d576f09c8e34b..5acfc6a5cacae 100644
--- a/packages/server-side-render/CHANGELOG.md
+++ b/packages/server-side-render/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 5.8.0 (2024-09-19)
+
 ## 5.7.0 (2024-09-05)
 
 ## 5.6.0 (2024-08-21)
diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json
index 9ace449e3fe96..6b6be2fb7e88d 100644
--- a/packages/server-side-render/package.json
+++ b/packages/server-side-render/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "5.7.0",
+	"version": "5.8.0",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/shortcode/CHANGELOG.md b/packages/shortcode/CHANGELOG.md
index 6abdd3c52f6d7..cc11e7806f00f 100644
--- a/packages/shortcode/CHANGELOG.md
+++ b/packages/shortcode/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/shortcode/package.json b/packages/shortcode/package.json
index 10e368d06c995..c16f22d5023cf 100644
--- a/packages/shortcode/package.json
+++ b/packages/shortcode/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/shortcode",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Shortcode module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
index a5292bfdd6c19..43598ca011863 100644
--- a/packages/style-engine/CHANGELOG.md
+++ b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 2.8.0 (2024-09-19)
+
 ## 2.7.0 (2024-09-05)
 
 ## 2.6.0 (2024-08-21)
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 982ac1c1fa89d..49327c487b232 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "2.7.0",
+	"version": "2.8.0",
 	"description": "A suite of parsers and compilers for WordPress styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/stylelint-config/CHANGELOG.md b/packages/stylelint-config/CHANGELOG.md
index 4cc05e02105ff..7ba3f7fd28dd7 100644
--- a/packages/stylelint-config/CHANGELOG.md
+++ b/packages/stylelint-config/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 23.0.0 (2024-09-19)
+
 ### Breaking Changes
 
 -   Updated `stylelint` peer dependency requirement to `^16.8.2` ([#64828](https://github.com/WordPress/gutenberg/pull/64828)).
diff --git a/packages/stylelint-config/package.json b/packages/stylelint-config/package.json
index 874ec2af0c664..8aa35643b3d7e 100644
--- a/packages/stylelint-config/package.json
+++ b/packages/stylelint-config/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/stylelint-config",
-	"version": "22.7.0",
+	"version": "23.0.0",
 	"description": "stylelint config for WordPress development.",
 	"author": "The WordPress Contributors",
 	"license": "MIT",
diff --git a/packages/sync/CHANGELOG.md b/packages/sync/CHANGELOG.md
index 071974be2a3a8..4b4978c4eab1b 100644
--- a/packages/sync/CHANGELOG.md
+++ b/packages/sync/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/sync/package.json b/packages/sync/package.json
index ba8c433e880c3..b96133c749ad3 100644
--- a/packages/sync/package.json
+++ b/packages/sync/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/sync",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "Sync Data.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/token-list/CHANGELOG.md b/packages/token-list/CHANGELOG.md
index 7258699a5322a..068047bb7f8a5 100644
--- a/packages/token-list/CHANGELOG.md
+++ b/packages/token-list/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/token-list/package.json b/packages/token-list/package.json
index 1a06b76ccb111..346623f3df173 100644
--- a/packages/token-list/package.json
+++ b/packages/token-list/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/token-list",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Constructable, plain JavaScript DOMTokenList implementation, supporting non-browser runtimes.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/undo-manager/CHANGELOG.md b/packages/undo-manager/CHANGELOG.md
index cbe86921a489d..a8ad0c1d7fbf0 100644
--- a/packages/undo-manager/CHANGELOG.md
+++ b/packages/undo-manager/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 1.8.0 (2024-09-19)
+
 ## 1.7.0 (2024-09-05)
 
 ## 1.6.0 (2024-08-21)
diff --git a/packages/undo-manager/package.json b/packages/undo-manager/package.json
index 4574d94f46d7e..1147efbb72a59 100644
--- a/packages/undo-manager/package.json
+++ b/packages/undo-manager/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/undo-manager",
-	"version": "1.7.0",
+	"version": "1.8.0",
 	"description": "A small package to manage undo/redo.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/url/CHANGELOG.md b/packages/url/CHANGELOG.md
index fc3082dd1bd0c..491eaf2e7b8ad 100644
--- a/packages/url/CHANGELOG.md
+++ b/packages/url/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/url/package.json b/packages/url/package.json
index c8360c81008fa..d04b42a2e19fb 100644
--- a/packages/url/package.json
+++ b/packages/url/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/url",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress URL utilities.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/viewport/CHANGELOG.md b/packages/viewport/CHANGELOG.md
index 1bc96013d724b..58850208f348c 100644
--- a/packages/viewport/CHANGELOG.md
+++ b/packages/viewport/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.8.0 (2024-09-19)
+
 ## 6.7.0 (2024-09-05)
 
 ## 6.6.0 (2024-08-21)
diff --git a/packages/viewport/package.json b/packages/viewport/package.json
index 69fe9c8695c6c..1a5d1a1c7f5b4 100644
--- a/packages/viewport/package.json
+++ b/packages/viewport/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/viewport",
-	"version": "6.7.0",
+	"version": "6.8.0",
 	"description": "Viewport module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/warning/CHANGELOG.md b/packages/warning/CHANGELOG.md
index bb7df7b633062..248b318d7b576 100644
--- a/packages/warning/CHANGELOG.md
+++ b/packages/warning/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 3.8.0 (2024-09-19)
+
 ## 3.7.0 (2024-09-05)
 
 ## 3.6.0 (2024-08-21)
diff --git a/packages/warning/package.json b/packages/warning/package.json
index 1095d2efd7562..ded853e825cb0 100644
--- a/packages/warning/package.json
+++ b/packages/warning/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/warning",
-	"version": "3.7.0",
+	"version": "3.8.0",
 	"description": "Warning utility for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/CHANGELOG.md b/packages/widgets/CHANGELOG.md
index be1af83931495..cf3d8c8eac0c2 100644
--- a/packages/widgets/CHANGELOG.md
+++ b/packages/widgets/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index 595bad0f73365..ccc2995650d81 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/widgets",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Functionality used by the widgets block editor in the Widgets screen and the Customizer.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
index f371786c106d6..c5ca43211e58e 100644
--- a/packages/widgets/src/blocks/legacy-widget/edit/index.js
+++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -11,13 +11,11 @@ import {
 	BlockControls,
 	InspectorControls,
 	BlockIcon,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
 import { brush as brushIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { useEntityRecord } from '@wordpress/core-data';
 
 /**
@@ -102,11 +100,6 @@ function NotEmpty( {
 	const { record: widgetType, hasResolved: hasResolvedWidgetType } =
 		useEntityRecord( 'root', 'widgetType', widgetTypeId );
 
-	const isNavigationMode = useSelect(
-		( select ) => select( blockEditorStore ).isNavigationMode(),
-		[]
-	);
-
 	const setInstance = useCallback( ( nextInstance ) => {
 		setAttributes( { instance: nextInstance } );
 	}, [] );
@@ -130,8 +123,7 @@ function NotEmpty( {
 		);
 	}
 
-	const mode =
-		idBase && ( isNavigationMode || ! isSelected ) ? 'preview' : 'edit';
+	const mode = idBase && ! isSelected ? 'preview' : 'edit';
 
 	return (
 		<>
diff --git a/packages/wordcount/CHANGELOG.md b/packages/wordcount/CHANGELOG.md
index 0a5e3ae4d3b20..79a5a75b3ef83 100644
--- a/packages/wordcount/CHANGELOG.md
+++ b/packages/wordcount/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.8.0 (2024-09-19)
+
 ## 4.7.0 (2024-09-05)
 
 ## 4.6.0 (2024-08-21)
diff --git a/packages/wordcount/package.json b/packages/wordcount/package.json
index 4f6fe750e3fad..c8b610c9ccffe 100644
--- a/packages/wordcount/package.json
+++ b/packages/wordcount/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/wordcount",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "WordPress word count utility.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
diff --git a/phpunit/blocks/render-post-template-test.php b/phpunit/blocks/render-post-template-test.php
index e375758044681..e929e459654fe 100644
--- a/phpunit/blocks/render-post-template-test.php
+++ b/phpunit/blocks/render-post-template-test.php
@@ -113,24 +113,33 @@ public function test_rendering_post_template_with_main_query_loop() {
 	}
 
 	/**
-	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a post
+	 * Tests that the `core/post-template` block does not tamper with the main query loop when rendering within a single post
 	 * as the main query loop has already been started. In this case, the main query object needs to be cloned to
 	 * prevent an infinite loop.
+	 * Also tests that the default query returns posts of the 'post' post type when in a single post of any post type.
 	 */
 	public function test_rendering_post_template_with_main_query_loop_already_started() {
 		global $wp_query, $wp_the_query;
 
 		// Query block with post template block.
-		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content  = '<!-- wp:query {"query":{"inherit":false}} -->';
 		$content .= '<!-- wp:post-template {"align":"wide"} -->';
 		$content .= '<!-- wp:post-title /-->';
 		$content .= '<!-- /wp:post-template -->';
 		$content .= '<!-- /wp:query -->';
 
-		$expected  = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
-		$expected .= '<li class="wp-block-post post-' . self::$post->ID . ' post type-post status-publish format-standard hentry category-uncategorized">';
-		$expected .= '<h2 class="wp-block-post-title">' . self::$post->post_title . '</h2>';
-		$expected .= '</li>';
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
 		$expected .= '</ul>';
 
 		// Update the post's content to have a query block for the same query as the main query.
@@ -156,4 +165,55 @@ public function test_rendering_post_template_with_main_query_loop_already_starte
 
 		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
 	}
+
+	/**
+	 * Tests that the `core/post-template` block rewinds the default query when not in a single post of any post type.
+	 */
+	public function test_rendering_post_template_with_main_query_loop_not_single_post() {
+		global $wp_query, $wp_the_query;
+
+		// Query block with post template block.
+		$content  = '<!-- wp:query {"query":{"inherit":true}} -->';
+		$content .= '<!-- wp:post-template {"align":"wide"} -->';
+		$content .= '<!-- wp:post-title /-->';
+		$content .= '<!-- /wp:post-template -->';
+		$content .= '<!-- /wp:query -->';
+
+		$expected = '<ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow wp-block-query-is-layout-flow">';
+
+		// Find all the posts of the 'post' post type.
+		$wp_query_posts = new WP_Query( array( 'post_type' => 'post' ) );
+
+		while ( $wp_query_posts->have_posts() ) {
+			$wp_query_posts->the_post();
+			$expected .= '<li class="wp-block-post post-' . get_the_ID() . ' post type-post status-publish format-standard hentry category-uncategorized">';
+			$expected .= '<h2 class="wp-block-post-title">' . get_the_title() . '</h2>';
+			$expected .= '</li>';
+		}
+
+		$expected .= '</ul>';
+
+		// Update the post's content to have a query block for the same query as the main query.
+		wp_update_post(
+			array(
+				'ID'                    => self::$post->ID,
+				'post_content'          => $content,
+				'post_content_filtered' => $content,
+			)
+		);
+
+		// Set main query to all posts.
+		$wp_query     = new WP_Query( array( 'post_type' => 'post' ) );
+		$wp_the_query = $wp_query;
+
+		// Get post content within main query loop.
+		$output = '';
+		while ( $wp_query->have_posts() ) {
+			$wp_query->the_post();
+
+			$output = get_echo( 'the_content' );
+		}
+
+		$this->assertSame( $expected, $output, 'Unexpected parsed post content' );
+	}
 }
diff --git a/phpunit/bootstrap.php b/phpunit/bootstrap.php
index 5d078193f0c3b..36746d0566951 100644
--- a/phpunit/bootstrap.php
+++ b/phpunit/bootstrap.php
@@ -24,12 +24,6 @@
 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.
-if ( ! defined( 'WP_RUN_CORE_TESTS' ) ) {
-	define( 'WP_RUN_CORE_TESTS', true );
-}
-
 // Require composer dependencies.
 require_once dirname( __DIR__ ) . '/vendor/autoload.php';
 
diff --git a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
index 85731a7dff520..c9453f4bd8e5c 100644
--- a/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
+++ b/phpunit/class-wp-rest-global-styles-controller-gutenberg-test.php
@@ -12,11 +12,21 @@ class WP_REST_Global_Styles_Controller_Gutenberg_Test extends WP_Test_REST_Contr
 	 */
 	protected static $admin_id;
 
+	/**
+	 * @var int
+	 */
+	protected static $editor_id;
+
 	/**
 	 * @var int
 	 */
 	protected static $subscriber_id;
 
+	/**
+	 * @var int
+	 */
+	protected static $theme_manager_id;
+
 	/**
 	 * @var int
 	 */
@@ -44,12 +54,30 @@ public static function wpSetupBeforeClass( $factory ) {
 			)
 		);
 
+		self::$editor_id = $factory->user->create(
+			array(
+				'role' => 'editor',
+			)
+		);
+
 		self::$subscriber_id = $factory->user->create(
 			array(
 				'role' => 'subscriber',
 			)
 		);
 
+		self::$theme_manager_id = $factory->user->create(
+			array(
+				'role' => 'subscriber',
+			)
+		);
+
+		// Add the 'edit_theme_options' capability to the theme manager (subscriber).
+		$theme_manager_id = get_user_by( 'id', self::$theme_manager_id );
+		if ( $theme_manager_id instanceof WP_User ) {
+			$theme_manager_id->add_cap( 'edit_theme_options' );
+		}
+
 		// This creates the global styles for the current theme.
 		self::$global_styles_id = $factory->post->create(
 			array(
@@ -72,7 +100,9 @@ public static function wpSetupBeforeClass( $factory ) {
 	 */
 	public static function wpTearDownAfterClass() {
 		self::delete_user( self::$admin_id );
+		self::delete_user( self::$editor_id );
 		self::delete_user( self::$subscriber_id );
+		self::delete_user( self::$theme_manager_id );
 	}
 
 	/**
@@ -195,17 +225,50 @@ public function test_get_theme_item_no_user() {
 		wp_set_current_user( 0 );
 		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertErrorResponse( 'rest_cannot_manage_global_styles', $response, 401 );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 401 );
 	}
 
 	/**
 	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
 	 */
-	public function test_get_theme_item_permission_check() {
+	public function test_get_theme_item_subscriber_permission_check() {
 		wp_set_current_user( self::$subscriber_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		$this->assertErrorResponse( 'rest_cannot_read_global_styles', $response, 403 );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_editor_permission_check() {
+		wp_set_current_user( self::$editor_id );
+		switch_theme( 'emptytheme' );
 		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
 		$response = rest_get_server()->dispatch( $request );
-		$this->assertErrorResponse( 'rest_cannot_manage_global_styles', $response, 403 );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
+	}
+
+	/**
+	 * @covers WP_REST_Global_Styles_Controller_Gutenberg::get_theme_item
+	 */
+	public function test_get_theme_item_theme_options_manager_permission_check() {
+		wp_set_current_user( self::$theme_manager_id );
+		switch_theme( 'emptytheme' );
+		$request  = new WP_REST_Request( 'GET', '/wp/v2/global-styles/themes/emptytheme' );
+		$response = rest_get_server()->dispatch( $request );
+		// Checks that the response has the expected keys.
+		$data  = $response->get_data();
+		$links = $response->get_links();
+		$this->assertArrayHasKey( 'settings', $data, 'Data does not have "settings" key' );
+		$this->assertArrayHasKey( 'styles', $data, 'Data does not have "styles" key' );
+		$this->assertArrayHasKey( 'self', $links, 'Links do not have a "self" key' );
 	}
 
 	/**
diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
index 79783f1c1d5a1..9ebc6258ce71c 100644
--- a/platform-docs/package-lock.json
+++ b/platform-docs/package-lock.json
@@ -3365,24 +3365,6 @@
 				"@types/ms": "*"
 			}
 		},
-		"node_modules/@types/eslint": {
-			"version": "8.56.5",
-			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.5.tgz",
-			"integrity": "sha512-u5/YPJHo1tvkSF2CE0USEkxon82Z5DBy2xR+qfyYNszpX9qcs4sT6uq2kBbj4BXY1+DBGDPnrhMZV3pKWGNukw==",
-			"dependencies": {
-				"@types/estree": "*",
-				"@types/json-schema": "*"
-			}
-		},
-		"node_modules/@types/eslint-scope": {
-			"version": "3.7.7",
-			"resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-			"integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-			"dependencies": {
-				"@types/eslint": "*",
-				"@types/estree": "*"
-			}
-		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3645,9 +3627,10 @@
 			}
 		},
 		"node_modules/@types/unist": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
-			"integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+			"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+			"license": "MIT"
 		},
 		"node_modules/@types/ws": {
 			"version": "8.5.10",
@@ -3863,10 +3846,11 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/acorn-import-assertions": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-			"integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+		"node_modules/acorn-import-attributes": {
+			"version": "1.9.5",
+			"resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+			"integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8"
 			}
@@ -3908,15 +3892,15 @@
 			}
 		},
 		"node_modules/ajv": {
-			"version": "8.16.0",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.16.0.tgz",
-			"integrity": "sha512-F0twR8U1ZU67JIEtekUcLkXkoO5mMMmgGD8sK/xUFzJ805jxHQl92hImFAqqXMyMYjSPOyUPAwHYhB72g5sTXw==",
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
 			"license": "MIT",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
 				"json-schema-traverse": "^1.0.0",
-				"require-from-string": "^2.0.2",
-				"uri-js": "^4.4.1"
+				"require-from-string": "^2.0.2"
 			},
 			"funding": {
 				"type": "github",
@@ -4284,9 +4268,10 @@
 			}
 		},
 		"node_modules/body-parser": {
-			"version": "1.20.2",
-			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-			"integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+			"version": "1.20.3",
+			"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+			"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+			"license": "MIT",
 			"dependencies": {
 				"bytes": "3.1.2",
 				"content-type": "~1.0.5",
@@ -4296,7 +4281,7 @@
 				"http-errors": "2.0.0",
 				"iconv-lite": "0.4.24",
 				"on-finished": "2.4.1",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"raw-body": "2.5.2",
 				"type-is": "~1.6.18",
 				"unpipe": "1.0.0"
@@ -4310,6 +4295,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
 			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -4318,6 +4304,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -4325,7 +4312,8 @@
 		"node_modules/body-parser/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/bonjour-service": {
 			"version": "1.2.1",
@@ -4875,9 +4863,10 @@
 			}
 		},
 		"node_modules/compressible/node_modules/mime-db": {
-			"version": "1.52.0",
-			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"version": "1.53.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.53.0.tgz",
+			"integrity": "sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -4979,6 +4968,7 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
 			"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -5438,12 +5428,12 @@
 			"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
 		},
 		"node_modules/debug": {
-			"version": "4.3.5",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-			"integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
 			"license": "MIT",
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -5591,6 +5581,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
 			"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -5607,6 +5598,7 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
 			"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8",
 				"npm": "1.2.8000 || >= 1.4.16"
@@ -5735,9 +5727,10 @@
 			}
 		},
 		"node_modules/docusaurus-lunr-search/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/docusaurus-lunr-search/node_modules/bail": {
 			"version": "1.0.5",
@@ -5925,7 +5918,8 @@
 		"node_modules/ee-first": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+			"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.4.704",
@@ -5960,17 +5954,19 @@
 			}
 		},
 		"node_modules/encodeurl": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+			"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
 		},
 		"node_modules/enhanced-resolve": {
-			"version": "5.16.0",
-			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-			"integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+			"version": "5.17.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+			"integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+			"license": "MIT",
 			"dependencies": {
 				"graceful-fs": "^4.2.4",
 				"tapable": "^2.2.0"
@@ -6217,6 +6213,7 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
 			"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -6269,37 +6266,37 @@
 			}
 		},
 		"node_modules/express": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-			"integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+			"version": "4.21.0",
+			"resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+			"integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
 			"license": "MIT",
 			"dependencies": {
 				"accepts": "~1.3.8",
 				"array-flatten": "1.1.1",
-				"body-parser": "1.20.2",
+				"body-parser": "1.20.3",
 				"content-disposition": "0.5.4",
 				"content-type": "~1.0.4",
 				"cookie": "0.6.0",
 				"cookie-signature": "1.0.6",
 				"debug": "2.6.9",
 				"depd": "2.0.0",
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"etag": "~1.8.1",
-				"finalhandler": "1.2.0",
+				"finalhandler": "1.3.1",
 				"fresh": "0.5.2",
 				"http-errors": "2.0.0",
-				"merge-descriptors": "1.0.1",
+				"merge-descriptors": "1.0.3",
 				"methods": "~1.1.2",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
-				"path-to-regexp": "0.1.7",
+				"path-to-regexp": "0.1.10",
 				"proxy-addr": "~2.0.7",
-				"qs": "6.11.0",
+				"qs": "6.13.0",
 				"range-parser": "~1.2.1",
 				"safe-buffer": "5.2.1",
-				"send": "0.18.0",
-				"serve-static": "1.15.0",
+				"send": "0.19.0",
+				"serve-static": "1.16.2",
 				"setprototypeof": "1.2.0",
 				"statuses": "2.0.1",
 				"type-is": "~1.6.18",
@@ -6335,9 +6332,10 @@
 			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
 		},
 		"node_modules/express/node_modules/path-to-regexp": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-			"integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+			"version": "0.1.10",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+			"integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+			"license": "MIT"
 		},
 		"node_modules/express/node_modules/range-parser": {
 			"version": "1.2.1",
@@ -6388,6 +6386,12 @@
 			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
 			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
 		},
+		"node_modules/fast-uri": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+			"integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+			"license": "MIT"
+		},
 		"node_modules/fast-url-parser": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
@@ -6523,12 +6527,13 @@
 			}
 		},
 		"node_modules/finalhandler": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-			"integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+			"version": "1.3.1",
+			"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+			"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+			"license": "MIT",
 			"dependencies": {
 				"debug": "2.6.9",
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"on-finished": "2.4.1",
 				"parseurl": "~1.3.3",
@@ -6543,6 +6548,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -6550,7 +6556,8 @@
 		"node_modules/finalhandler/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
 		"node_modules/find-cache-dir": {
 			"version": "4.0.0",
@@ -6770,6 +6777,7 @@
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
 			"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -7212,9 +7220,10 @@
 			}
 		},
 		"node_modules/hast-util-from-parse5/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/hast-util-from-parse5/node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
@@ -7383,9 +7392,10 @@
 			}
 		},
 		"node_modules/hast-util-raw/node_modules/vfile-location": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
-			"integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+			"integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
 				"vfile": "^6.0.0"
@@ -7439,9 +7449,10 @@
 			}
 		},
 		"node_modules/hast-util-select/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/hast-util-select/node_modules/unist-util-visit": {
 			"version": "2.0.3",
@@ -7594,9 +7605,9 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
-			"version": "0.2.3",
-			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
-			"integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==",
+			"version": "0.2.4",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+			"integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
 			"license": "MIT"
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/property-information": {
@@ -7619,12 +7630,12 @@
 			}
 		},
 		"node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
-			"version": "1.0.6",
-			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
-			"integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+			"integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
 			"license": "MIT",
 			"dependencies": {
-				"inline-style-parser": "0.2.3"
+				"inline-style-parser": "0.2.4"
 			}
 		},
 		"node_modules/hast-util-to-parse5": {
@@ -7748,9 +7759,10 @@
 			}
 		},
 		"node_modules/hastscript/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/he": {
 			"version": "1.2.0",
@@ -7987,6 +7999,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
 			"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+			"license": "MIT",
 			"dependencies": {
 				"depd": "2.0.0",
 				"inherits": "2.0.4",
@@ -8074,6 +8087,7 @@
 			"version": "0.4.24",
 			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
 			"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+			"license": "MIT",
 			"dependencies": {
 				"safer-buffer": ">= 2.1.2 < 3"
 			},
@@ -9281,6 +9295,7 @@
 			"version": "0.3.0",
 			"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
 			"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -9297,9 +9312,13 @@
 			}
 		},
 		"node_modules/merge-descriptors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-			"integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+			"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
 		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
@@ -10994,11 +11013,12 @@
 			]
 		},
 		"node_modules/micromatch": {
-			"version": "4.0.5",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+			"license": "MIT",
 			"dependencies": {
-				"braces": "^3.0.2",
+				"braces": "^3.0.3",
 				"picomatch": "^2.3.1"
 			},
 			"engines": {
@@ -11009,6 +11029,7 @@
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
 			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+			"license": "MIT",
 			"bin": {
 				"mime": "cli.js"
 			},
@@ -11115,9 +11136,10 @@
 			}
 		},
 		"node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"license": "MIT"
 		},
 		"node_modules/multicast-dns": {
 			"version": "7.2.5",
@@ -11279,9 +11301,13 @@
 			}
 		},
 		"node_modules/object-inspect": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-			"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+			"version": "1.13.2",
+			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+			"integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -11320,6 +11346,7 @@
 			"version": "2.4.1",
 			"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
 			"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+			"license": "MIT",
 			"dependencies": {
 				"ee-first": "1.1.1"
 			},
@@ -11508,9 +11535,10 @@
 			}
 		},
 		"node_modules/parse-entities/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/parse-json": {
 			"version": "5.2.0",
@@ -11609,9 +11637,10 @@
 			"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
 		},
 		"node_modules/path-to-regexp": {
-			"version": "1.8.0",
-			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-			"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+			"version": "1.9.0",
+			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+			"integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
+			"license": "MIT",
 			"dependencies": {
 				"isarray": "0.0.1"
 			}
@@ -12452,11 +12481,12 @@
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.11.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-			"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+			"version": "6.13.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+			"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
-				"side-channel": "^1.0.4"
+				"side-channel": "^1.0.6"
 			},
 			"engines": {
 				"node": ">=0.6"
@@ -12523,6 +12553,7 @@
 			"version": "2.5.2",
 			"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
 			"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+			"license": "MIT",
 			"dependencies": {
 				"bytes": "3.1.2",
 				"http-errors": "2.0.0",
@@ -12537,6 +12568,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
 			"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -13392,7 +13424,8 @@
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+			"license": "MIT"
 		},
 		"node_modules/sax": {
 			"version": "1.3.0",
@@ -13462,9 +13495,9 @@
 			}
 		},
 		"node_modules/semver": {
-			"version": "7.6.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-			"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+			"version": "7.6.3",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
 			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
@@ -13488,9 +13521,10 @@
 			}
 		},
 		"node_modules/send": {
-			"version": "0.18.0",
-			"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-			"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+			"version": "0.19.0",
+			"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+			"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+			"license": "MIT",
 			"dependencies": {
 				"debug": "2.6.9",
 				"depd": "2.0.0",
@@ -13514,6 +13548,7 @@
 			"version": "2.6.9",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
 			"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+			"license": "MIT",
 			"dependencies": {
 				"ms": "2.0.0"
 			}
@@ -13521,17 +13556,23 @@
 		"node_modules/send/node_modules/debug/node_modules/ms": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+			"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+			"license": "MIT"
 		},
-		"node_modules/send/node_modules/ms": {
-			"version": "2.1.3",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+		"node_modules/send/node_modules/encodeurl": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+			"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
 		},
 		"node_modules/send/node_modules/range-parser": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
 			"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -13635,14 +13676,15 @@
 			}
 		},
 		"node_modules/serve-static": {
-			"version": "1.15.0",
-			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-			"integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+			"version": "1.16.2",
+			"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+			"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+			"license": "MIT",
 			"dependencies": {
-				"encodeurl": "~1.0.2",
+				"encodeurl": "~2.0.0",
 				"escape-html": "~1.0.3",
 				"parseurl": "~1.3.3",
-				"send": "0.18.0"
+				"send": "0.19.0"
 			},
 			"engines": {
 				"node": ">= 0.8.0"
@@ -13667,7 +13709,8 @@
 		"node_modules/setprototypeof": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+			"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+			"license": "ISC"
 		},
 		"node_modules/shallow-clone": {
 			"version": "3.0.1",
@@ -13732,6 +13775,7 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
 			"integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bind": "^1.0.7",
 				"es-errors": "^1.3.0",
@@ -13919,6 +13963,7 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
 			"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -13960,9 +14005,10 @@
 			}
 		},
 		"node_modules/string-width/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12"
 			},
@@ -14378,9 +14424,10 @@
 			}
 		},
 		"node_modules/to-vfile/node_modules/@types/unist": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-			"integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"license": "MIT"
 		},
 		"node_modules/to-vfile/node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
@@ -14426,6 +14473,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
 			"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.6"
 			}
@@ -14476,6 +14524,7 @@
 			"version": "1.6.18",
 			"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
 			"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+			"license": "MIT",
 			"dependencies": {
 				"media-typer": "0.3.0",
 				"mime-types": "~2.1.24"
@@ -14488,6 +14537,7 @@
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -14496,6 +14546,7 @@
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
 			"dependencies": {
 				"mime-db": "1.52.0"
 			},
@@ -14734,6 +14785,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
 			"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8"
 			}
@@ -14991,12 +15043,12 @@
 			}
 		},
 		"node_modules/vfile": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
-			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+			"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+			"license": "MIT",
 			"dependencies": {
 				"@types/unist": "^3.0.0",
-				"unist-util-stringify-position": "^4.0.0",
 				"vfile-message": "^4.0.0"
 			},
 			"funding": {
@@ -15056,25 +15108,25 @@
 			}
 		},
 		"node_modules/webpack": {
-			"version": "5.90.3",
-			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
-			"integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
+			"version": "5.94.0",
+			"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+			"integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
+			"license": "MIT",
 			"dependencies": {
-				"@types/eslint-scope": "^3.7.3",
 				"@types/estree": "^1.0.5",
-				"@webassemblyjs/ast": "^1.11.5",
-				"@webassemblyjs/wasm-edit": "^1.11.5",
-				"@webassemblyjs/wasm-parser": "^1.11.5",
+				"@webassemblyjs/ast": "^1.12.1",
+				"@webassemblyjs/wasm-edit": "^1.12.1",
+				"@webassemblyjs/wasm-parser": "^1.12.1",
 				"acorn": "^8.7.1",
-				"acorn-import-assertions": "^1.9.0",
+				"acorn-import-attributes": "^1.9.5",
 				"browserslist": "^4.21.10",
 				"chrome-trace-event": "^1.0.2",
-				"enhanced-resolve": "^5.15.0",
+				"enhanced-resolve": "^5.17.1",
 				"es-module-lexer": "^1.2.1",
 				"eslint-scope": "5.1.1",
 				"events": "^3.2.0",
 				"glob-to-regexp": "^0.4.1",
-				"graceful-fs": "^4.2.9",
+				"graceful-fs": "^4.2.11",
 				"json-parse-even-better-errors": "^2.3.1",
 				"loader-runner": "^4.2.0",
 				"mime-types": "^2.1.27",
@@ -15082,7 +15134,7 @@
 				"schema-utils": "^3.2.0",
 				"tapable": "^2.1.1",
 				"terser-webpack-plugin": "^5.3.10",
-				"watchpack": "^2.4.0",
+				"watchpack": "^2.4.1",
 				"webpack-sources": "^3.2.3"
 			},
 			"bin": {
@@ -15244,9 +15296,9 @@
 			}
 		},
 		"node_modules/webpack-dev-server/node_modules/ws": {
-			"version": "8.17.1",
-			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+			"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=10.0.0"
@@ -15308,6 +15360,12 @@
 				"ajv": "^6.9.1"
 			}
 		},
+		"node_modules/webpack/node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"license": "ISC"
+		},
 		"node_modules/webpack/node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -15463,9 +15521,10 @@
 			}
 		},
 		"node_modules/wrap-ansi/node_modules/ansi-regex": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-			"integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+			"integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12"
 			},
@@ -15579,9 +15638,10 @@
 			}
 		},
 		"node_modules/yocto-queue": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
-			"integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
+			"integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12.20"
 			},
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ebf2d6891ba0b..7293248ae3e47 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -2,6 +2,7 @@
 	( function redirectIfStoryMoved() {
 		const PREVIOUSLY_EXPERIMENTAL_COMPONENTS = [
 			'alignmentmatrixcontrol',
+			'boxcontrol',
 			'customselectcontrol-v2',
 			'dimensioncontrol',
 			'navigation',
diff --git a/storybook/stories/playground/fullpage/style.lazy.scss b/storybook/stories/playground/fullpage/style.lazy.scss
index 6d28c1d3c8163..0249011c3e960 100644
--- a/storybook/stories/playground/fullpage/style.lazy.scss
+++ b/storybook/stories/playground/fullpage/style.lazy.scss
@@ -46,19 +46,3 @@
 		display: block;
 	}
 }
-
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js
index e592f776c61dd..894f143d19bb8 100644
--- a/test/e2e/specs/editor/various/allowed-patterns.spec.js
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -14,10 +14,7 @@ test.describe( 'Allowed Patterns', () => {
 		);
 	} );
 
-	test( 'should show all patterns when all blocks are allowed', async ( {
-		admin,
-		page,
-	} ) => {
+	test( 'should show all patterns by default', async ( { admin, page } ) => {
 		await admin.createNewPost();
 		await page
 			.getByRole( 'toolbar', { name: 'Document tools' } )
@@ -57,7 +54,7 @@ test.describe( 'Allowed Patterns', () => {
 			);
 		} );
 
-		test( 'should show only allowed patterns', async ( {
+		test( 'should show all patterns even if not allowed', async ( {
 			admin,
 			page,
 		} ) => {
@@ -80,7 +77,11 @@ test.describe( 'Allowed Patterns', () => {
 				page
 					.getByRole( 'listbox', { name: 'Block patterns' } )
 					.getByRole( 'option' )
-			).toHaveText( [ 'Test: Single heading' ] );
+			).toHaveText( [
+				'Test: Single heading',
+				'Test: Single paragraph',
+				'Test: Paragraph inside group',
+			] );
 		} );
 	} );
 } );
diff --git a/test/e2e/specs/editor/various/block-bindings.spec.js b/test/e2e/specs/editor/various/block-bindings.spec.js
index 6e36b6ad5dd33..010d173e760ca 100644
--- a/test/e2e/specs/editor/various/block-bindings.spec.js
+++ b/test/e2e/specs/editor/various/block-bindings.spec.js
@@ -66,7 +66,7 @@ test.describe( 'Block bindings', () => {
 				);
 			} );
 
-			test( 'should show the key of the custom field in server sources with key', async ( {
+			test( 'should always show the source label in server-only sources', async ( {
 				editor,
 			} ) => {
 				await editor.insertBlock( {
@@ -86,30 +86,6 @@ test.describe( 'Block bindings', () => {
 				const paragraphBlock = editor.canvas.getByRole( 'document', {
 					name: 'Block: Paragraph',
 				} );
-				await expect( paragraphBlock ).toHaveText(
-					'text_custom_field'
-				);
-			} );
-
-			test( 'should show the source label in server sources without key', async ( {
-				editor,
-			} ) => {
-				await editor.insertBlock( {
-					name: 'core/paragraph',
-					attributes: {
-						content: 'paragraph default content',
-						metadata: {
-							bindings: {
-								content: {
-									source: 'core/server-source',
-								},
-							},
-						},
-					},
-				} );
-				const paragraphBlock = editor.canvas.getByRole( 'document', {
-					name: 'Block: Paragraph',
-				} );
 				await expect( paragraphBlock ).toHaveText( 'Server Source' );
 			} );
 
@@ -1231,14 +1207,14 @@ test.describe( 'Block bindings', () => {
 					name: 'Block: Paragraph',
 				} );
 				await expect( paragraphBlock ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 
 				// Check the frontend shows the value of the custom field.
 				const previewPage = await editor.openPreviewPage();
 				await expect(
 					previewPage.locator( '#paragraph-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
+				).toHaveText( 'Value of the text custom field' );
 			} );
 
 			test( "should show the value of the key when custom field doesn't exist", async ( {
@@ -1278,6 +1254,39 @@ test.describe( 'Block bindings', () => {
 				).toHaveText( 'fallback value' );
 			} );
 
+			test( 'should prioritize the placeholder attribute over the placeholder generated by the bindings API', async ( {
+				editor,
+			} ) => {
+				await editor.insertBlock( {
+					name: 'core/paragraph',
+					attributes: {
+						placeholder: 'My custom placeholder',
+						content: 'paragraph default content',
+						metadata: {
+							bindings: {
+								content: {
+									source: 'core/post-meta',
+									args: { key: 'empty_field' },
+								},
+							},
+						},
+					},
+				} );
+
+				const paragraphBlock = editor.canvas.getByRole( 'document', {
+					// Aria-label is changed for empty paragraphs.
+					name: 'Empty empty_field; start writing to edit its value',
+				} );
+
+				await expect( paragraphBlock ).toBeEmpty();
+
+				const placeholder = paragraphBlock.locator( 'span' );
+				await expect( placeholder ).toHaveAttribute(
+					'data-rich-text-placeholder',
+					'My custom placeholder'
+				);
+			} );
+
 			test( 'should show the prompt placeholder in field with empty value', async ( {
 				editor,
 			} ) => {
@@ -1298,7 +1307,7 @@ test.describe( 'Block bindings', () => {
 
 				const paragraphBlock = editor.canvas.getByRole( 'document', {
 					// Aria-label is changed for empty paragraphs.
-					name: 'Add empty_field',
+					name: 'Empty empty_field; start writing to edit its value',
 				} );
 
 				await expect( paragraphBlock ).toBeEmpty();
@@ -1400,7 +1409,7 @@ test.describe( 'Block bindings', () => {
 						.locator( '[data-type="core/paragraph"]' )
 						.all();
 				await expect( initialParagraph ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				await expect( newEmptyParagraph ).toHaveText( '' );
 				await expect( newEmptyParagraph ).toBeEditable();
@@ -1510,7 +1519,7 @@ test.describe( 'Block bindings', () => {
 					name: 'Block: Paragraph',
 				} );
 				await expect( paragraphBlock ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 			} );
 		} );
@@ -1538,14 +1547,14 @@ test.describe( 'Block bindings', () => {
 					name: 'Block: Heading',
 				} );
 				await expect( headingBlock ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 
 				// Check the frontend shows the value of the custom field.
 				const previewPage = await editor.openPreviewPage();
 				await expect(
 					previewPage.locator( '#heading-binding' )
-				).toHaveText( 'Value of the text_custom_field' );
+				).toHaveText( 'Value of the text custom field' );
 			} );
 
 			test( 'should add empty paragraph block when pressing enter', async ( {
@@ -1584,7 +1593,7 @@ test.describe( 'Block bindings', () => {
 					'core/heading'
 				);
 				await expect( initialHeading ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				// Second block should be an empty paragraph block.
 				await expect( newEmptyParagraph ).toHaveAttribute(
@@ -1642,7 +1651,7 @@ test.describe( 'Block bindings', () => {
 					.getByRole( 'textbox' );
 				await buttonBlock.click();
 				await expect( buttonBlock ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 
 				// Check the frontend shows the value of the custom field.
@@ -1651,7 +1660,7 @@ test.describe( 'Block bindings', () => {
 					'#button-text-binding a'
 				);
 				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				await expect( buttonDom ).toHaveAttribute(
 					'href',
@@ -1731,7 +1740,7 @@ test.describe( 'Block bindings', () => {
 					'#button-multiple-bindings a'
 				);
 				await expect( buttonDom ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				await expect( buttonDom ).toHaveAttribute(
 					'href',
@@ -1778,7 +1787,7 @@ test.describe( 'Block bindings', () => {
 					.all();
 				// First block should be the original block.
 				await expect( initialButton ).toHaveText(
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				// Second block should be an empty paragraph block.
 				await expect( newEmptyButton ).toHaveText( '' );
@@ -1943,7 +1952,7 @@ test.describe( 'Block bindings', () => {
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Alternative text' )
 					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
+				expect( altValue ).toBe( 'Value of the text custom field' );
 
 				// Check the frontend uses the value of the custom field.
 				const previewPage = await editor.openPreviewPage();
@@ -1956,7 +1965,7 @@ test.describe( 'Block bindings', () => {
 				);
 				await expect( imageDom ).toHaveAttribute(
 					'alt',
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				await expect( imageDom ).toHaveAttribute(
 					'title',
@@ -2013,7 +2022,7 @@ test.describe( 'Block bindings', () => {
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Title attribute' )
 					.inputValue();
-				expect( titleValue ).toBe( 'Value of the text_custom_field' );
+				expect( titleValue ).toBe( 'Value of the text custom field' );
 
 				// Check the frontend uses the value of the custom field.
 				const previewPage = await editor.openPreviewPage();
@@ -2030,7 +2039,7 @@ test.describe( 'Block bindings', () => {
 				);
 				await expect( imageDom ).toHaveAttribute(
 					'title',
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 			} );
 
@@ -2077,7 +2086,7 @@ test.describe( 'Block bindings', () => {
 					.getByRole( 'tabpanel', { name: 'Settings' } )
 					.getByLabel( 'Alternative text' )
 					.inputValue();
-				expect( altValue ).toBe( 'Value of the text_custom_field' );
+				expect( altValue ).toBe( 'Value of the text custom field' );
 
 				// Title input should have the original value.
 				const advancedButton = page
@@ -2107,7 +2116,7 @@ test.describe( 'Block bindings', () => {
 				);
 				await expect( imageDom ).toHaveAttribute(
 					'alt',
-					'Value of the text_custom_field'
+					'Value of the text custom field'
 				);
 				await expect( imageDom ).toHaveAttribute(
 					'title',
diff --git a/test/e2e/specs/editor/various/block-moving-mode.spec.js b/test/e2e/specs/editor/various/block-moving-mode.spec.js
deleted file mode 100644
index 5b8ef6bdcd051..0000000000000
--- a/test/e2e/specs/editor/various/block-moving-mode.spec.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/**
- * WordPress dependencies
- */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-
-test.describe( 'Block moving mode', () => {
-	test.beforeEach( async ( { admin } ) => {
-		await admin.createNewPost();
-	} );
-
-	test.afterEach( async ( { requestUtils } ) => {
-		await requestUtils.deleteAllPosts();
-	} );
-
-	test( 'can move block', async ( { editor, page } ) => {
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Second Paragraph' },
-		} );
-
-		// Move the second block in front of the first block.
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'Second Paragraph' },
-			},
-			{
-				name: 'core/paragraph',
-				attributes: { content: 'First Paragraph' },
-			},
-		] );
-	} );
-
-	test( 'can move block in the nested block', async ( { editor, page } ) => {
-		// Create two group blocks with some blocks.
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'First Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Second Paragraph' );
-
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Third Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Fourth Paragraph' );
-
-		// Move a paragraph block in the first group block into the second group block.
-		const paragraphBlock = editor.canvas.locator(
-			'text="First Paragraph"'
-		);
-		await paragraphBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowLeft' ); // Select the first group block.
-		await page.keyboard.press( 'ArrowDown' ); // Select the second group block.
-		await page.keyboard.press( 'ArrowRight' ); // Enter the second group block.
-		await page.keyboard.press( 'ArrowDown' ); // Move down in the second group block.
-		await page.keyboard.press( 'Enter' );
-
-		await expect.poll( editor.getBlocks ).toMatchObject( [
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Second Paragraph' },
-					},
-				],
-			},
-			{
-				name: 'core/group',
-				innerBlocks: [
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Third Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'First Paragraph' },
-					},
-					{
-						name: 'core/paragraph',
-						attributes: { content: 'Fourth Paragraph' },
-					},
-				],
-			},
-		] );
-	} );
-
-	test( 'can not move inside its own block', async ( { editor, page } ) => {
-		// Create a paragraph block and a group block.
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'First Paragraph' },
-		} );
-		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas
-			.locator(
-				'role=button[name="Group: Gather blocks in a container."i]'
-			)
-			.click();
-		await page.keyboard.press( 'ArrowDown' );
-		await page.keyboard.press( 'Enter' );
-		await page.getByRole( 'option', { name: 'Paragraph' } ).click();
-		await page.keyboard.type( 'Second Paragraph' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Third Paragraph' );
-
-		// Trying to move the group block into its own.
-		const groupBlock = editor.canvas.locator(
-			'role=document[name="Block: Group"i]'
-		);
-		await groupBlock.focus();
-		await editor.showBlockToolbar();
-		await page
-			.getByRole( 'toolbar', { name: 'Block tools' } )
-			.getByRole( 'button', { name: 'Options' } )
-			.click();
-		await page.getByRole( 'menuitem', { name: 'Move to' } ).click();
-		await page.keyboard.press( 'ArrowRight' );
-		await expect( groupBlock ).toHaveClass( /is-selected/ );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
index 6a7125d04f7a6..e1ca121040b97 100644
--- a/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
+++ b/test/e2e/specs/editor/various/keyboard-navigable-blocks.spec.js
@@ -17,108 +17,26 @@ test.describe( 'Order of block keyboard navigation', () => {
 		await editor.openDocumentSettingsSidebar();
 	} );
 
-	test( 'permits tabbing through paragraph blocks in the expected order', async ( {
+	test( 'permits tabbing through the block toolbar of the paragraph block', async ( {
 		editor,
 		KeyboardNavigableBlocks,
 		page,
+		pageUtils,
 	} ) => {
-		const paragraphBlocks = [ 'Paragraph 0', 'Paragraph 1', 'Paragraph 2' ];
-
-		// Create 3 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
+		// Insert three paragraph blocks.
+		for ( let i = 0; i < 3; i++ ) {
 			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
+			await page.keyboard.type( `Paragraph ${ i + 1 }` );
 		}
-
-		// Select the middle block.
+		// Select the middle paragraph block.
 		await page.keyboard.press( 'ArrowUp' );
 		await editor.showBlockToolbar();
-		await KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-
-		// Repeat the same steps to ensure that there is no change introduced in how the focus is handled.
-		// This prevents the previous regression explained in: https://github.com/WordPress/gutenberg/issues/11773.
-		await KeyboardNavigableBlocks.navigateToContentEditorTop();
-		await KeyboardNavigableBlocks.tabThroughParagraphBlock( 'Paragraph 1' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
-		await page.keyboard.press( 'Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Post' );
-	} );
-
-	test( 'allows tabbing in navigation mode if no block is selected (reverse)', async ( {
-		editor,
-		KeyboardNavigableBlocks,
-		page,
-		pageUtils,
-	} ) => {
-		const paragraphBlocks = [ '0', '1' ];
-
-		// Create 2 paragraphs blocks with some content.
-		for ( const paragraphBlock of paragraphBlocks ) {
-			await editor.insertBlock( { name: 'core/paragraph' } );
-			await page.keyboard.type( paragraphBlock );
-		}
-
-		// Clear the selected block.
-		const paragraph = editor.canvas
-			.locator( '[data-type="core/paragraph"]' )
-			.getByText( '1' );
-		const box = await paragraph.boundingBox();
-		await page.mouse.click( box.x - 1, box.y );
-
-		// Put focus behind the block list.
-		await page.evaluate( () => {
-			document
-				.querySelector( '.interface-interface-skeleton__sidebar' )
-				.focus();
-		} );
-
-		await pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 2. 1'
-		);
-
 		await pageUtils.pressKeys( 'shift+Tab' );
+		await KeyboardNavigableBlocks.navigateThroughBlockToolbar();
+		await page.keyboard.press( 'Tab' );
 		await KeyboardNavigableBlocks.expectLabelToHaveFocus(
-			'Paragraph Block. Row 1. 0'
+			'Block: Paragraph'
 		);
-
-		await pageUtils.pressKeys( 'shift+Tab' );
-		await KeyboardNavigableBlocks.expectLabelToHaveFocus( 'Add title' );
 	} );
 
 	test( 'should navigate correctly with multi selection', async ( {
@@ -208,31 +126,7 @@ class KeyboardNavigableBlocks {
 		expect( ariaLabel ).toBe( label );
 	}
 
-	async navigateToContentEditorTop() {
-		// Use 'Ctrl+`' to return to the top of the editor.
-		await this.pageUtils.pressKeys( 'ctrl+`', { times: 5 } );
-	}
-
-	async tabThroughParagraphBlock( paragraphText ) {
-		await this.tabThroughBlockToolbar();
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-
-		const activeElement = this.editor.canvas.locator( ':focus' );
-
-		await expect( activeElement ).toHaveText( paragraphText );
-
-		await this.page.keyboard.press( 'Tab' );
-		await this.expectLabelToHaveFocus( 'Block' );
-
-		// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
-		await this.pageUtils.pressKeys( 'shift+Tab' );
-		await this.expectLabelToHaveFocus( 'Block: Paragraph' );
-	}
-
-	async tabThroughBlockToolbar() {
-		await this.page.keyboard.press( 'Tab' );
+	async navigateThroughBlockToolbar() {
 		await this.expectLabelToHaveFocus( 'Paragraph' );
 
 		await this.page.keyboard.press( 'ArrowRight' );
diff --git a/test/e2e/specs/editor/various/publish-panel.spec.js b/test/e2e/specs/editor/various/publish-panel.spec.js
index 534fea5289c9e..1fe94ff334f3b 100644
--- a/test/e2e/specs/editor/various/publish-panel.spec.js
+++ b/test/e2e/specs/editor/various/publish-panel.spec.js
@@ -58,7 +58,7 @@ test.describe( 'Post publish panel', () => {
 		).toBeFocused();
 	} );
 
-	test( 'should move focus to the publish button in the panel', async ( {
+	test( 'should move focus to the cancel button in the panel', async ( {
 		editor,
 		page,
 	} ) => {
@@ -74,7 +74,7 @@ test.describe( 'Post publish panel', () => {
 			page
 				.getByRole( 'region', { name: 'Editor publish' } )
 				.locator( ':focus' )
-		).toHaveText( 'Publish' );
+		).toHaveText( 'Cancel' );
 	} );
 
 	test( 'should focus on the post list after publishing', async ( {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index a8e49f7a6b84d..cfaf4e0be9188 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -50,32 +50,6 @@ test.describe( 'Focus toolbar shortcut (alt + F10)', () => {
 		await expect( toolbarUtils.documentToolbarTooltip ).toBeHidden();
 	} );
 
-	test( 'Focuses correct toolbar in default view options in select mode', async ( {
-		editor,
-		page,
-		toolbarUtils,
-	} ) => {
-		// Test: Focus the document toolbar from title
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
-		// Test: Focus the top level toolbar from empty block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-
-		// Test: Focus the top level toolbar from paragraph block
-		await editor.insertBlock( { name: 'core/paragraph' } );
-		await page.keyboard.type(
-			'Focus top level toolbar from paragraph block in select mode.'
-		);
-		await toolbarUtils.useSelectMode();
-		await toolbarUtils.moveToToolbarShortcut();
-		await expect( toolbarUtils.documentToolbarButton ).toBeFocused();
-	} );
-
 	test.describe( 'In Top Toolbar option:', () => {
 		test.beforeEach( async ( { editor } ) => {
 			// Ensure the fixed toolbar option is on
diff --git a/test/e2e/specs/editor/various/writing-flow.spec.js b/test/e2e/specs/editor/various/writing-flow.spec.js
index bd1552ad4cb66..4077d6dcc5820 100644
--- a/test/e2e/specs/editor/various/writing-flow.spec.js
+++ b/test/e2e/specs/editor/various/writing-flow.spec.js
@@ -106,48 +106,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 		] );
 	} );
 
-	test( 'Should navigate between inner and root blocks in navigation mode', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await writingFlowUtils.addDemoContent();
-
-		// Switch to navigation mode.
-		await page.keyboard.press( 'Escape' );
-		// Arrow up to Columns block.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow right into Column block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow down to reach second Column block.
-		await page.keyboard.press( 'ArrowDown' );
-		// Arrow right again into Paragraph block.
-		await page.keyboard.press( 'ArrowRight' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-		// Arrow left back to Column block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/column' );
-		// Arrow left back to Columns block.
-		await page.keyboard.press( 'ArrowLeft' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/columns' );
-		// Arrow up to first paragraph.
-		await page.keyboard.press( 'ArrowUp' );
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-	} );
-
 	test( 'should navigate around inline boundaries', async ( {
 		editor,
 		page,
@@ -958,32 +916,6 @@ test.describe( 'Writing Flow (@firefox, @webkit)', () => {
 <!-- /wp:table -->` );
 	} );
 
-	test( 'escape should set select mode and then focus the canvas', async ( {
-		page,
-		writingFlowUtils,
-	} ) => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Random Paragraph' );
-
-		// First escape enters navigation mode.
-		await page.keyboard.press( 'Escape' );
-		const navigationButton = page.getByLabel(
-			'Paragraph Block. Row 1. Random Paragraph'
-		);
-		await expect( navigationButton ).toBeVisible();
-		await expect
-			.poll( writingFlowUtils.getActiveBlockName )
-			.toBe( 'core/paragraph' );
-
-		// Second escape should send focus to the canvas
-		await page.keyboard.press( 'Escape' );
-		// The navigation button should be hidden.
-		await expect( navigationButton ).toBeHidden();
-		await expect(
-			page.getByRole( 'region', { name: 'Editor content' } )
-		).toBeFocused();
-	} );
-
 	// Checks for regressions of https://github.com/WordPress/gutenberg/issues/40091.
 	test( 'does not deselect the block when selecting text outside the editor canvas', async ( {
 		editor,
@@ -1222,11 +1154,11 @@ class WritingFlowUtils {
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);
 		await this.page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
-
-		await this.page.keyboard.press( 'Escape' ); // Enter navigation mode.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
-		await this.page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
-		await this.page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
+		await this.editor.showBlockToolbar();
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the column block.
+		await this.page.keyboard.press( 'Shift+Tab' ); // Move to toolbar to select parent
+		await this.page.keyboard.press( 'Enter' ); // Selects the columns block.
 		await this.page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 		await this.page.keyboard.type( 'Second paragraph' );
 	}
diff --git a/test/e2e/specs/interactivity/get-sever-context.spec.ts b/test/e2e/specs/interactivity/get-sever-context.spec.ts
new file mode 100644
index 0000000000000..d7bc4075f9760
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-context.spec.ts
@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerContext()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		const parent = {
+			prop: 'parent',
+			nested: {
+				prop: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+			},
+		};
+
+		const parentModified = {
+			prop: 'parentModified',
+			nested: {
+				prop: 'parentModified',
+			},
+			inherited: {
+				prop: 'parentModified',
+			},
+		};
+
+		const parentNewProps = {
+			prop: 'parent',
+			newProp: 'parent',
+			nested: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+			inherited: {
+				prop: 'parent',
+				newProp: 'parent',
+			},
+		};
+
+		const child = {
+			prop: 'child',
+			nested: {
+				prop: 'child',
+			},
+		};
+
+		const childModified = {
+			prop: 'childModified',
+			nested: {
+				prop: 'childModified',
+			},
+		};
+
+		const childNewProps = {
+			prop: 'child',
+			newProp: 'child',
+			nested: {
+				prop: 'child',
+				newProp: 'child',
+			},
+		};
+
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - modified',
+			attributes: {
+				parentContext: parentModified,
+				childContext: childModified,
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - new props',
+			attributes: {
+				parentContext: parentNewProps,
+				childContext: childNewProps,
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-context', {
+			alias: 'getServerContext() - main',
+			attributes: {
+				links: { modified: link1, newProps: link2 },
+				parentContext: parent,
+				childContext: child,
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerContext() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update modified props on navigation', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+		const inheritedProp = page.getByTestId( 'inherited.prop' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+
+		await page.getByTestId( 'modified' ).click();
+
+		await expect( prop ).toHaveText( 'childModified' );
+		await expect( nestedProp ).toHaveText( 'childModified' );
+		await expect( inheritedProp ).toHaveText( 'parentModified' );
+
+		await page.goBack();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( nestedProp ).toHaveText( 'child' );
+		await expect( inheritedProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should add new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+		await expect( inheritedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should keep new props on navigation', async ( { page } ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+		const inheritedNewProp = page.getByTestId( 'inherited.newProp' );
+
+		await page.getByTestId( 'newProps' ).click();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+
+		await page.goBack();
+
+		await expect( newProp ).toHaveText( 'child' );
+		await expect( nestedNewProp ).toHaveText( 'child' );
+		await expect( inheritedNewProp ).toHaveText( 'parent' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerContext' );
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'child' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/interactivity/get-sever-state.spec.ts b/test/e2e/specs/interactivity/get-sever-state.spec.ts
new file mode 100644
index 0000000000000..16406c1d82446
--- /dev/null
+++ b/test/e2e/specs/interactivity/get-sever-state.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'getServerState()', () => {
+	test.beforeAll( async ( { interactivityUtils: utils } ) => {
+		await utils.activatePlugins();
+		const link1 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 1',
+			attributes: {
+				state: {
+					prop: 'link 1',
+					newProp: 'link 1',
+					nested: {
+						prop: 'link 1',
+						newProp: 'link 1',
+					},
+				},
+			},
+		} );
+		const link2 = await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - link 2',
+			attributes: {
+				state: {
+					prop: 'link 2',
+					newProp: 'link 2',
+					nested: {
+						prop: 'link 2',
+						newProp: 'link 2',
+					},
+				},
+			},
+		} );
+		await utils.addPostWithBlock( 'test/get-server-state', {
+			alias: 'getServerState() - main',
+			attributes: {
+				title: 'Main',
+				links: [ link1, link2 ],
+				state: {
+					prop: 'main',
+					nested: {
+						prop: 'main',
+					},
+				},
+			},
+		} );
+	} );
+
+	test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+		await page.goto( utils.getLink( 'getServerState() - main' ) );
+	} );
+
+	test.afterAll( async ( { interactivityUtils: utils } ) => {
+		await utils.deactivatePlugins();
+		await utils.deleteAllPosts();
+	} );
+
+	test( 'should update existing state props on navigation', async ( {
+		page,
+	} ) => {
+		const prop = page.getByTestId( 'prop' );
+		const nestedProp = page.getByTestId( 'nested.prop' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( prop ).toHaveText( 'link 1' );
+		await expect( nestedProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( prop ).toHaveText( 'main' );
+		await expect( nestedProp ).toHaveText( 'main' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( prop ).toHaveText( 'link 2' );
+		await expect( nestedProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should add new state props and keep them on navigation', async ( {
+		page,
+	} ) => {
+		const newProp = page.getByTestId( 'newProp' );
+		const nestedNewProp = page.getByTestId( 'nested.newProp' );
+
+		await expect( newProp ).toBeEmpty();
+		await expect( nestedNewProp ).toBeEmpty();
+
+		await page.getByTestId( 'link 1' ).click();
+
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.goBack();
+		await expect( newProp ).toHaveText( 'link 1' );
+		await expect( nestedNewProp ).toHaveText( 'link 1' );
+
+		await page.getByTestId( 'link 2' ).click();
+
+		await expect( newProp ).toHaveText( 'link 2' );
+		await expect( nestedNewProp ).toHaveText( 'link 2' );
+	} );
+
+	test( 'should prevent any manual modifications', async ( { page } ) => {
+		const prop = page.getByTestId( 'prop' );
+		const button = page.getByTestId( 'tryToModifyServerState' );
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'modify' );
+
+		await button.click();
+
+		await expect( prop ).toHaveText( 'main' );
+		await expect( button ).toHaveText( 'not modified ✅' );
+	} );
+} );
diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js
index 5b049cda252a8..19318081aa171 100644
--- a/test/e2e/specs/site-editor/command-center.spec.js
+++ b/test/e2e/specs/site-editor/command-center.spec.js
@@ -28,10 +28,12 @@ test.describe( 'Site editor command palette', () => {
 		await page.keyboard.type( 'new page' );
 		await page.getByRole( 'option', { name: 'Add new page' } ).click();
 		await expect( page ).toHaveURL(
-			'/wp-admin/post-new.php?post_type=page'
+			/\/wp-admin\/site-editor.php\?postId=(\d+)&postType=page&canvas=edit/
 		);
 		await expect(
-			editor.canvas.getByRole( 'textbox', { name: 'Add title' } )
+			editor.canvas
+				.getByLabel( 'Block: Title' )
+				.locator( '[data-rich-text-placeholder="No title"]' )
 		).toBeVisible();
 	} );
 
diff --git a/test/e2e/specs/site-editor/navigation.spec.js b/test/e2e/specs/site-editor/navigation.spec.js
index 4db860b703892..1b92ef2e850e6 100644
--- a/test/e2e/specs/site-editor/navigation.spec.js
+++ b/test/e2e/specs/site-editor/navigation.spec.js
@@ -83,19 +83,6 @@ test.describe( 'Site editor navigation', () => {
 		// The button role should have been removed from the iframe.
 		await expect( editorCanvasButton ).toBeHidden();
 
-		// Test to make sure a Tab keypress works as expected.
-		// As of this writing, we are in select mode and a tab
-		// keypress will reveal the header template select mode
-		// button. This test is not documenting that we _want_
-		// that action, but checking that we are within the site
-		// editor and keypresses work as intened.
-		await pageUtils.pressKeys( 'Tab' );
-		await expect(
-			page.getByRole( 'button', {
-				name: 'Template Part Block. Row 1. header',
-			} )
-		).toBeFocused();
-
 		// Test: We can go back to the main navigation from the editor frame
 		// Move to the document toolbar
 		await pageUtils.pressKeys( 'alt+F10' );
diff --git a/test/e2e/specs/widgets/customizing-widgets.spec.js b/test/e2e/specs/widgets/customizing-widgets.spec.js
index 53b4da7be2d61..38e9d3ee2c58a 100644
--- a/test/e2e/specs/widgets/customizing-widgets.spec.js
+++ b/test/e2e/specs/widgets/customizing-widgets.spec.js
@@ -465,16 +465,6 @@ test.describe( 'Widgets Customizer', () => {
 		await expect( paragraphBlock ).toBeVisible();
 
 		await paragraphBlock.focus();
-
-		// Expect pressing the Escape key to enter navigation mode,
-		// but not close the editor.
-		await page.keyboard.press( 'Escape' );
-		await expect(
-			page.locator(
-				'css=.block-editor-block-list__layout.is-navigate-mode'
-			)
-		).toBeVisible();
-		await expect( paragraphBlock ).toBeVisible();
 	} );
 
 	test( 'should move (inner) blocks to another sidebar', async ( {
diff --git a/test/integration/fixtures/blocks/core__categories.json b/test/integration/fixtures/blocks/core__categories.json
index 5d271aa5c8499..698105d892134 100644
--- a/test/integration/fixtures/blocks/core__categories.json
+++ b/test/integration/fixtures/blocks/core__categories.json
@@ -3,6 +3,7 @@
 		"name": "core/categories",
 		"isValid": true,
 		"attributes": {
+			"taxonomy": "category",
 			"displayAsDropdown": false,
 			"showHierarchy": false,
 			"showPostCounts": false,
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
index 30f9448539643..8564d4116691f 100644
--- a/test/unit/jest.config.js
+++ b/test/unit/jest.config.js
@@ -19,7 +19,10 @@ module.exports = {
 		'<rootDir>/test/unit/config/global-mocks.js',
 		'<rootDir>/test/unit/config/gutenberg-env.js',
 	],
-	setupFilesAfterEnv: [ '<rootDir>/test/unit/config/testing-library.js' ],
+	setupFilesAfterEnv: [
+		'<rootDir>/test/unit/config/testing-library.js',
+		'<rootDir>/test/unit/mocks/match-media.js',
+	],
 	testEnvironmentOptions: {
 		url: 'http://localhost/',
 	},
diff --git a/test/unit/mocks/match-media.js b/test/unit/mocks/match-media.js
new file mode 100644
index 0000000000000..3a9ff7b901ff1
--- /dev/null
+++ b/test/unit/mocks/match-media.js
@@ -0,0 +1,22 @@
+// Mock `matchMedia` so that all animations are skipped,
+// since js-dom does not fully support CSS animations.
+// Example: https://github.com/jsdom/jsdom/issues/3239
+const originalMatchMedia = window.matchMedia;
+const mockedMatchMedia = jest.fn( ( query ) => {
+	if ( /prefers-reduced-motion/.test( query ) ) {
+		return {
+			...originalMatchMedia( query ),
+			matches: true,
+		};
+	}
+
+	return originalMatchMedia( query );
+} );
+
+beforeAll( () => {
+	window.matchMedia = jest.fn( mockedMatchMedia );
+} );
+
+afterAll( () => {
+	window.matchMedia = originalMatchMedia;
+} );
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index a1610d0a5ba54..76d460cafc15d 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -146,7 +146,7 @@ module.exports = {
 	},
 	plugins: [
 		...plugins,
-		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: false } ),
 		new CopyWebpackPlugin( {
 			patterns: gutenbergPackages
 				.map( ( packageName ) => ( {
diff --git a/tools/webpack/script-modules.js b/tools/webpack/script-modules.js
index 18287c96d83c8..021f11f5f5ed9 100644
--- a/tools/webpack/script-modules.js
+++ b/tools/webpack/script-modules.js
@@ -89,11 +89,11 @@ module.exports = {
 	},
 	output: {
 		devtoolNamespace: 'wp',
-		filename: './build-module/[name].min.js',
+		filename: '[name].min.js',
 		library: {
 			type: 'module',
 		},
-		path: join( __dirname, '..', '..' ),
+		path: join( __dirname, '..', '..', 'build-module' ),
 		environment: { module: true },
 		module: true,
 		chunkFormat: 'module',
@@ -102,7 +102,13 @@ module.exports = {
 	resolve: {
 		extensions: [ '.js', '.ts', '.tsx' ],
 	},
-	plugins: [ ...plugins, new DependencyExtractionWebpackPlugin() ],
+	plugins: [
+		...plugins,
+		new DependencyExtractionWebpackPlugin( {
+			combineAssets: true,
+			combinedOutputFile: `./assets.php`,
+		} ),
+	],
 	watchOptions: {
 		ignored: [ '**/node_modules' ],
 		aggregateTimeout: 500,
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index f30d3a830f3eb..c8c5b05c7d151 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -25,7 +25,7 @@ const baseConfig = {
 				parallel: true,
 				terserOptions: {
 					output: {
-						comments: /translators:/i,
+						comments: /(translators:|wp:polyfill)/i,
 					},
 					compress: {
 						passes: 2,
diff --git a/tsconfig.json b/tsconfig.json
index 3ab54f66019bc..8821ef4404e3b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,7 @@
 		{ "path": "packages/i18n" },
 		{ "path": "packages/icons" },
 		{ "path": "packages/interactivity" },
+		{ "path": "packages/interactivity/tsconfig.test.json" },
 		{ "path": "packages/interactivity-router" },
 		{ "path": "packages/is-shallow-equal" },
 		{ "path": "packages/keycodes" },